/* Resus Review — product pages.
   Separate from main.css: the conference site is a scroll-snap presentation and
   this is a product people read and use. Same brand tokens, different behaviour. */
/* Brand chrome (navy bar, hero, footer, buttons on navy) stays the same navy
   in both themes -- it is not "light mode furniture", it is the constant. --white
   is likewise constant: it means literal white text set against that chrome and
   must never invert, so it is never redefined below.

   Everything a reader's eye actually rests on -- the page ground, cards, text,
   borders, highlight tints -- lives in a separate set of tokens that DOES
   change: --surface, --paper, --ink, --body, --muted, --grey, --line,
   --line-soft, --accent, --ok/--warn/--err (+ their -bg fills) and --hl-*.
   Redefine only those below; --navy*, --steel*, --gold*, --white never move. */
:root{
  --navy:#0B1740; --navy-mid:#152255; --navy-light:#1E2F6E;
  --steel:#7A9ABF; --steel-light:#B8CDE0;
  --gold:#C9A84C; --gold-light:#E8C97A;
  --white:#FFFFFF;

  --paper:#F4F6FA; --surface:#FFFFFF; --grey:#8A94A6;
  --ink:#0B1740; --body:#2C3752; --muted:#5F6B85; --line:#DDE3EE; --line-soft:#EBEFF6;
  --accent:#1E2F6E;
  --ok:#1F6B4D;   --ok-bg:#E4F0EA;
  --warn:#8A5A12; --warn-bg:#F7EEDC;
  --err:#8A2323;  --err-bg:#F6E3E3;
  --hl-yellow:#FDF0B8; --hl-green:#D8F0DC; --hl-blue:#D9E8FA; --hl-pink:#FADDE8;

  --f-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --max:1120px; --read:70ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0D0F18; --surface:#141724; --grey:#7D84A3;
    --ink:#EDEFF7; --body:#C9CFE3; --muted:#8B93B0; --line:#252A3D; --line-soft:#1C2030;
    --accent:#8FB0FF;
    --ok:#4ADE80;   --ok-bg:rgba(34,197,94,.14);
    --warn:#FBBF24; --warn-bg:rgba(245,158,11,.14);
    --err:#F87171;  --err-bg:rgba(239,68,68,.14);
    /* Translucent tints over the dark surface, not solid pastels: the same
       reader-set body text (now light-on-dark) sits on top, and a solid pale
       yellow would put light text on a light chip and erase it. */
    --hl-yellow:rgba(232,206,74,.22); --hl-green:rgba(111,184,132,.22);
    --hl-blue:rgba(110,159,216,.24);  --hl-pink:rgba(217,139,174,.24);
  }
}
:root[data-theme="dark"] {
  --paper:#0D0F18; --surface:#141724; --grey:#7D84A3;
  --ink:#EDEFF7; --body:#C9CFE3; --muted:#8B93B0; --line:#252A3D; --line-soft:#1C2030;
  --accent:#8FB0FF;
  --ok:#4ADE80;   --ok-bg:rgba(34,197,94,.14);
  --warn:#FBBF24; --warn-bg:rgba(245,158,11,.14);
  --err:#F87171;  --err-bg:rgba(239,68,68,.14);
  --hl-yellow:rgba(232,206,74,.22); --hl-green:rgba(111,184,132,.22);
  --hl-blue:rgba(110,159,216,.24);  --hl-pink:rgba(217,139,174,.24);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--f-body);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{color:var(--ink);margin:0;text-wrap:balance;line-height:1.2;}
a{color:var(--accent);}
img{max-width:100%;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

/* ── site chrome ─────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;background:rgba(11,23,64,.97);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.09);}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px;}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--white);
  font-weight:600;font-size:16px;letter-spacing:-.01em;}
.brand span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);}
.bar nav{display:flex;gap:22px;align-items:center;}
.bar nav a{color:var(--steel-light);text-decoration:none;font-size:14px;}
.bar nav a:hover{color:var(--white);}
.btn{display:inline-block;border-radius:4px;font-weight:600;font-size:14.5px;
  padding:11px 20px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s;}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--gold-light);}
.btn-ghost{border-color:rgba(255,255,255,.28);color:var(--white);background:transparent;}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
.btn-navy{background:var(--navy);color:var(--white);}
.btn-navy:hover{background:var(--navy-mid);}
.btn-line{border-color:var(--line);background:var(--surface);color:var(--ink);}
.btn-line:hover{border-color:var(--accent);}
.btn[disabled]{opacity:.5;pointer-events:none;}

/* ── hero ────────────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-mid) 62%,var(--navy-light) 100%);
  color:var(--white);padding:84px 0 76px;position:relative;overflow:hidden;}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 300px at 82% 12%,rgba(201,168,76,.16),transparent 70%);}
.hero .wrap{position:relative;z-index:1;}
.kicker{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;}
.hero h1{font-size:clamp(34px,5.2vw,54px);color:var(--white);letter-spacing:-.02em;max-width:19ch;}
.hero p.lead{font-size:19px;color:var(--steel-light);max-width:60ch;margin:22px 0 0;}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.note{font-size:13.5px;color:var(--steel);margin-top:16px;}
.figs{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.12);}
.fig{min-width:132px;}
.fig b{display:block;font-family:var(--f-mono);font-size:27px;color:var(--gold);font-weight:500;}
.fig span{font-size:13px;color:var(--steel-light);}

/* ── sections ────────────────────────────────────────────── */
section{padding:74px 0;}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-bottom:14px;}
h2.sec{font-size:clamp(25px,3.4vw,34px);letter-spacing:-.015em;max-width:24ch;}
.sub{font-size:17px;color:var(--muted);max-width:var(--read);margin:16px 0 0;}
.grid{display:grid;gap:18px;margin-top:40px;}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:26px;}
.card h3{font-size:18px;margin-bottom:10px;}
.card p{margin:0;font-size:15px;color:var(--muted);}
.card .ic{font-family:var(--f-mono);font-size:11px;color:var(--gold);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:14px;}
.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ── pricing ─────────────────────────────────────────────── */
.price{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:40px;}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:32px;
  display:flex;flex-direction:column;}
.plan.lead{border:1.5px solid var(--accent);box-shadow:0 14px 36px -22px rgba(11,23,64,.5);}
.plan h3{font-size:19px;}
.plan .amt{font-family:var(--f-mono);font-size:40px;color:var(--ink);margin:16px 0 2px;font-weight:500;}
.plan .amt small{font-size:15px;color:var(--muted);font-family:var(--f-body);}
.plan .per{font-size:13.5px;color:var(--muted);margin-bottom:22px;}
.plan ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;}
.plan li{font-size:14.5px;padding-left:24px;position:relative;color:var(--body);}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700;}
.plan li.no{color:var(--grey);}
.plan li.no::before{content:"—";color:var(--grey);}
.plan .btn{margin-top:auto;text-align:center;}
.tag{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:3px;background:var(--navy);color:var(--white);}

/* ── forms ───────────────────────────────────────────────── */
.panel{max-width:460px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:36px;}
label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px;}
input[type=email],input[type=text]{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:4px;font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--surface);}
input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.field{margin-bottom:18px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.msg{margin-top:16px;padding:13px 15px;border-radius:4px;font-size:14px;}
.msg.ok{background:var(--ok-bg);color:var(--ok);}
.msg.err{background:var(--err-bg);color:var(--err);}
.msg.warn{background:var(--warn-bg);color:var(--warn);}

/* ── footer ──────────────────────────────────────────────── */
footer{background:var(--navy);color:var(--steel-light);padding:52px 0 40px;font-size:14px;}
footer a{color:var(--steel-light);}
footer .cols{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between;}
footer h4{color:var(--white);font-size:13px;margin-bottom:12px;font-family:var(--f-mono);
  letter-spacing:.12em;text-transform:uppercase;font-weight:500;}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.legal{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;color:var(--steel);max-width:78ch;}

@media (max-width:720px){
  .bar nav{display:none;} .hero{padding:56px 0 50px;} section{padding:52px 0;}
  .wrap{padding:0 18px;} .panel{padding:26px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}