/* Values below are copied from packages/design/src/tokens.css (the Quiet Signal tokens). Change them there first.
   Layout: one centred column (max 1060px), copy on the left, a sample of the product on the right; one column below 760px.
   Calm at rest: saturated colour appears only on the observed side of a disagreement. Nothing moves except the button on hover.
   This is a file, not an inline block, so the Content-Security-Policy needs no 'unsafe-inline'. */
:root{
  --r-xs:6px; --r-1:10px; --r-2:16px; --r-3:22px; --r-pill:999px;
  --font-text:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --dur:180ms; --ease:cubic-bezier(.34,1.45,.64,1); --lift:-2px;
  --bg:#F3F1EE; --surface:#FCFBFA; --raised:#FFFFFF; --sunk:#E9E6E1;
  --fg:#23201D; --fg2:#433E38; --fg3:#5B554D;
  --line:#E0DCD5; --line-strong:#867F73;
  --accent:#4338C4; --accent-fg:#FFFFFF; --accent-text:#4338C4; --focus:#4338C4;
  --on-fg:#047271; --on-bg:#DFF0EF;
  --at-fg:#804600; --at-sb:#FFD162; --at-sf:#1E1B18;
  --off-fg:#6C2C1B; --off-sb:#B82F18; --off-sf:#FFFFFF;
  --mid-fg:#4A443D; --mid-bg:#EFEDE9;
  --shadow-2:0 12px 28px rgba(35,32,29,.13), 0 2px 6px rgba(35,32,29,.07);
  --glow:0 0 0 4px rgba(67,56,196,.20), 0 0 18px rgba(67,56,196,.22);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#181614; --surface:#211E1B; --raised:#2B2723; --sunk:#121110;
    --fg:#F1EDE8; --fg2:#CBC4BB; --fg3:#A39B90;
    --line:#312D28; --line-strong:#7D766B;
    --accent:#B4B0FF; --accent-fg:#14110F; --accent-text:#C9C6FF; --focus:#B4B0FF;
    --on-fg:#5AC4B7; --on-bg:#1C2D2B;
    --at-fg:#FFE3C4; --at-sb:#FFCF5A; --at-sf:#14110F;
    --off-fg:#FE8B78; --off-sb:#DD5262; --off-sf:#14110F;
    --mid-fg:#CBC4BB; --mid-bg:#2B2723;
    --shadow-2:0 14px 34px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
    --glow:0 0 0 4px rgba(180,176,255,.28), 0 0 20px rgba(180,176,255,.30);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#181614; --surface:#211E1B; --raised:#2B2723; --sunk:#121110;
  --fg:#F1EDE8; --fg2:#CBC4BB; --fg3:#A39B90;
  --line:#312D28; --line-strong:#7D766B;
  --accent:#B4B0FF; --accent-fg:#14110F; --accent-text:#C9C6FF; --focus:#B4B0FF;
  --on-fg:#5AC4B7; --on-bg:#1C2D2B;
  --at-fg:#FFE3C4; --at-sb:#FFCF5A; --at-sf:#14110F;
  --off-fg:#FE8B78; --off-sb:#DD5262; --off-sf:#14110F;
  --mid-fg:#CBC4BB; --mid-bg:#2B2723;
  --shadow-2:0 14px 34px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --glow:0 0 0 4px rgba(180,176,255,.28), 0 0 20px rgba(180,176,255,.30);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-text);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:var(--glow)}

.wrap{max-width:1060px;margin:0 auto;padding:0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px))}
.nav{display:flex;align-items:center;gap:10px;min-height:56px;font-weight:700;letter-spacing:-.02em}
.nav svg{width:22px;height:22px;color:var(--accent-text);flex:none}

.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;padding:56px 0 64px}
.hero > *{min-width:0}
h1{margin:0 0 16px;font-size:clamp(2.2rem, 5vw, 3.5rem);line-height:1.05;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.subhead{margin:0 0 12px;font-size:1.375rem;line-height:1.2;letter-spacing:-.02em;font-weight:700;color:var(--fg)}
.lede{margin:0 0 24px;max-width:46ch;font-size:1.0625rem;color:var(--fg2)}
.btn{display:inline-flex;align-items:center;min-height:44px;background:var(--accent);color:var(--accent-fg);border:1px solid var(--accent);border-radius:var(--r-1);padding:0 24px;font-weight:700;text-decoration:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn{transition:transform var(--dur) var(--ease)}
  .btn:hover{transform:translateY(var(--lift))}
}

/* how it works */
.how{padding:0 0 72px;max-width:62ch;scroll-margin-top:16px}
.how h2{margin:0 0 16px;font-size:1.375rem;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.how ol{margin:0;padding-left:1.5rem;color:var(--fg2);font-size:1.0625rem}
.how li{margin-bottom:12px}

/* sample panel */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:16px;box-shadow:var(--shadow-2)}
.ph{display:flex;justify-content:space-between;gap:12px;padding:0 4px 12px;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}
.row{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-2);padding:12px 14px;margin-bottom:6px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.why{font-size:.8125rem;color:var(--fg3)}
.pair{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.cell{background:var(--sunk);border-radius:var(--r-1);padding:6px 10px;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}
.cell .p{display:flex;margin-top:4px;text-transform:none;letter-spacing:0}
.cell.dis{background:var(--raised);box-shadow:inset 0 0 0 2px var(--off-fg);color:var(--fg);font-weight:700}
.cell.dis.am{box-shadow:inset 0 0 0 2px var(--at-fg)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:3px 10px 3px 8px;font-size:.8125rem;font-weight:600;background:var(--on-bg);color:var(--on-fg)}
.pill.sat{background:var(--off-sb);color:var(--off-sf);font-weight:700;font-size:.9375rem;padding:5px 13px 5px 10px}
.pill.sat.am{background:var(--at-sb);color:var(--at-sf)}
.rel{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--off-sb);color:var(--off-sf);font-family:var(--font-mono);font-weight:800}
.rel.am{background:var(--at-sb);color:var(--at-sf)}
.age{flex:none;font-family:var(--font-mono);font-size:.75rem;background:var(--sunk);color:var(--fg);font-weight:700;padding:1px 8px;border-radius:var(--r-pill)}
.sum{display:flex;align-items:center;gap:8px;min-height:44px;border:1px dashed var(--line-strong);border-radius:var(--r-2);padding:10px 14px;color:var(--fg2);font-weight:500;font-size:.9375rem}
.sum i{font:normal .75rem var(--font-mono);color:var(--fg3)}
.fict{margin:12px 0 0;padding:0 4px;font-size:.75rem;color:var(--fg3)}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:32px;padding:24px 0 40px}
  .subhead{font-size:1.125rem}
}