/*
 * Styling for the hand-written COMPARISON pages (doors-alternative.html, and
 * the sibling pages that will follow: jama-alternative, polarion-alternative).
 *
 * Same situation as legal.css: these are NOT generated from the Claude Design
 * export. They are dense argumentative text and tables, which is a thing you
 * edit as text, not a thing you lay out in a design tool — and routing them
 * through the export would make every copy tweak a three-step ritual
 * (design -> export -> sync) for no visual gain.
 *
 * The tokens mirror the ones index.html inlines, so the pages look like part of
 * the same site. If the design's palette changes, this file has to be updated
 * by hand to match — exactly the deal legal.css already takes.
 *
 * Wider than legal.css (940px vs 760px) because the comparison tables need the
 * room, and it carries the landing-page furniture legal.css has no use for:
 * hero, buttons, a highlighted "us" column, verdict boxes.
 */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/geist-sans-400.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/geist-sans-500.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/geist-sans-600.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/geist-sans-700.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/geist-sans-800.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/geist-mono-400.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/geist-mono-500.woff2") format("woff2")}

:root{
  --ink:oklch(0.16 0.012 270);--ink-2:oklch(0.42 0.01 270);--ink-3:oklch(0.58 0.008 270);
  --paper:oklch(0.985 0.003 80);--paper-2:#ffffff;--line:oklch(0.91 0.005 80);
  --accent:oklch(0.52 0.14 264);--accent-2:oklch(0.62 0.14 264);--accent-soft:oklch(0.95 0.025 264);
  --hero-tint:oklch(0.94 0.04 264);
  --ok:oklch(0.62 0.12 155);--warn:oklch(0.7 0.13 75);
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
[data-theme="dark"]{
  --ink:oklch(0.96 0.005 80);--ink-2:oklch(0.72 0.01 270);--ink-3:oklch(0.56 0.01 270);
  --paper:oklch(0.15 0.015 268);--paper-2:oklch(0.19 0.02 266);--line:oklch(0.28 0.02 266);
  --accent:oklch(0.62 0.15 264);--accent-2:oklch(0.72 0.14 264);--accent-soft:oklch(0.26 0.06 264);
  --hero-tint:oklch(0.27 0.07 264/0.55);
}

*{box-sizing:border-box}
body{
  margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:940px;margin:0 auto;padding:0 28px}

/* topbar — same shape as legal.css so the two page families agree */
.topbar{border-bottom:1px solid var(--line);background:var(--paper-2)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 28px}
.topbar img{height:26px;display:block}
.topbar .back{font-size:14px;color:var(--ink-2)}
/* Scoped to .topbar, not bare .only-dark: ".topbar img{display:block}" above is
   specificity 0,1,1 and silently beats a bare ".only-dark{display:none}" at
   0,1,0 — which renders BOTH logos stacked. index.html solves the same clash
   with !important; matching the specificity is the tidier half of that trade. */
.topbar .only-dark{display:none}
[data-theme="dark"] .topbar .only-dark{display:block}
[data-theme="dark"] .topbar .only-light{display:none}

/* hero */
.hero{background:radial-gradient(900px 400px at 50% -20%,var(--hero-tint),transparent 70%);padding:64px 0 8px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 12px}
h1{font-size:clamp(30px,4.4vw,44px);font-weight:800;letter-spacing:-0.03em;line-height:1.1;margin:0 0 18px;text-wrap:balance;max-width:20ch}
.lead{font-size:18px;color:var(--ink-2);max-width:62ch;text-wrap:pretty;margin:0 0 26px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:9px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:background 140ms,border-color 140ms,transform 140ms}
.btn:hover{text-decoration:none}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2);color:#fff;transform:translateY(-1px)}
.btn.ghost{border-color:var(--line);color:var(--ink-2);background:var(--paper-2)}
.btn.ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.trust{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin:14px 0 0}

main.wrap{padding-top:48px;padding-bottom:88px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;margin:52px 0 12px;text-wrap:balance}
h3{font-size:17px;font-weight:650;margin:30px 0 6px;letter-spacing:-0.01em}
p,li{color:var(--ink-2)}
ul{padding-left:20px}
li{margin:6px 0}
strong{color:var(--ink);font-weight:600}
.mono{font-family:var(--mono);font-size:0.94em;color:var(--ink)}

/* comparison table — the "us" column is tinted so the eye lands on it */
table{border-collapse:collapse;width:100%;margin:18px 0;font-size:14.5px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink);font-weight:600;border-bottom:1px solid var(--ink-3)}
td{color:var(--ink-2)}
th:first-child,td:first-child{color:var(--ink);font-weight:500;width:26%}
.col-us{background:var(--accent-soft)}
th.col-us{color:var(--accent)}
[data-theme="dark"] th.col-us{color:oklch(0.82 0.1 264)}
.yes{color:var(--ok);font-weight:600}
.no{color:var(--ink-3)}

.notice{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--paper-2);border-radius:8px;padding:16px 18px;margin:28px 0;font-size:14.5px;
}
.notice p{margin:0}
.notice p+p{margin-top:8px}

/* Unverified competitor claims. Comparative advertising is lawful in the EU
   (Directive 2006/114/EC) only where every claim is accurate and VERIFIABLE,
   and the subject here is IBM. So an unchecked claim is not a rough edge, it
   is a liability — this is deliberately loud, and the page must not be linked
   from index.html or added to sitemap.xml while any of them remain.
   Same convention as .todo in legal.css. */
.verify{
  background:oklch(0.94 0.09 85);color:oklch(0.3 0.09 60);
  border-radius:5px;padding:1px 7px;font-family:var(--mono);font-size:12.5px;
  font-weight:500;
}
[data-theme="dark"] .verify{background:oklch(0.42 0.1 75);color:oklch(0.96 0.03 85)}
.verify-banner{
  border:1px solid oklch(0.7 0.13 75);background:oklch(0.97 0.05 85);
  border-radius:8px;padding:16px 18px;margin:0 0 32px;font-size:14.5px;color:oklch(0.3 0.09 60);
}
[data-theme="dark"] .verify-banner{background:oklch(0.26 0.06 75);color:oklch(0.92 0.04 85);border-color:oklch(0.45 0.1 75)}
.verify-banner strong{color:inherit}
.verify-banner p{margin:0;color:inherit}
.verify-banner p+p{margin-top:8px}

/* closing CTA */
.cta{border:1px solid var(--line);background:var(--paper-2);border-radius:14px;padding:32px 30px;margin:56px 0 0;text-align:center}
.cta h2{margin:0 0 10px}
.cta p{max-width:52ch;margin:0 auto 22px}
.cta .actions{justify-content:center}

/* FAQ */
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-weight:400;font-size:19px;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:10px 0 0;font-size:14.5px}

footer{border-top:1px solid var(--line);background:var(--paper-2);padding:28px 0;font-size:13px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-3);font-family:var(--mono)}

@media(max-width:620px){
  .hero{padding-top:40px}
  main.wrap{padding-top:32px}
  h2{font-size:22px;margin-top:40px}
  table{display:block;overflow-x:auto;white-space:nowrap}
  th:first-child,td:first-child{width:auto}
}