/* ════════════════════════════════════════════════════════════════════
   SINEW · landing design system — the Luminous blue world
   Shared by every audience front door (index.html, creators.html, …).
   Tokens lifted verbatim from the locked Workbench Kit (workbench.css).
   Cinzel → wordmark only · Merriweather → display + verbatim · Inter → UI.
   Define once here; each page is only its own copy + diagram.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#25284A; --ink-2:#3a3d5e; --muted:#565a7e; --faint:#5b5f86;
  --tone:#34417d; --tone-link:#2b3568;
  --pool:166,174,226; --hi:255,255,255;
  --g0:#f8f8fe; --g1:#eceefb; --g2:#dcdff4;
  --ai:#155f5a;    --ai-soft:rgba(21,95,90,.10);   --ai-line:rgba(21,95,90,.42);
  --human:#8a4a2b; --human-soft:rgba(138,74,43,.10);--human-line:rgba(138,74,43,.42);
  --study:#4b57a3;
  --card:rgba(255,255,255,.55); --card-solid:rgba(255,255,255,.74);
  --panel:rgba(255,255,255,.80);
  --row-hover:rgba(52,65,125,.055);
  --hair:rgba(52,65,125,.20); --hair-2:rgba(52,65,125,.32);
  --focus:#34417d;
  --shadow:0 18px 44px -28px rgba(37,40,74,.55);
  --shadow-lg:0 40px 90px -50px rgba(37,40,74,.6);
  --held-fg:#8a6410;
  --radius:14px; --radius-lg:18px;
}
@media (prefers-color-scheme:dark){:root{
  --ink:#e9ecfb; --ink-2:#c6cbee; --muted:#9aa1cd; --faint:#9098c2;
  --tone:#b3bce0; --tone-link:#c9d0ee;
  --pool:74,90,164; --hi:132,150,220;
  --g0:#2b356a; --g1:#141a44; --g2:#090d22;
  --ai:#8ec8c0;    --ai-soft:rgba(142,200,192,.12);  --ai-line:rgba(142,200,192,.42);
  --human:#e3aa8b; --human-soft:rgba(227,170,139,.12);--human-line:rgba(227,170,139,.44);
  --study:#9aa4e0;
  --card:rgba(255,255,255,.05); --card-solid:rgba(255,255,255,.07);
  --panel:rgba(18,23,54,.72);
  --row-hover:rgba(179,188,224,.07);
  --hair:rgba(179,188,224,.16); --hair-2:rgba(179,188,224,.30);
  --focus:#b3bce0;
  --shadow:0 22px 50px -30px rgba(0,0,0,.7);
  --shadow-lg:0 48px 100px -50px rgba(0,0,0,.8);
  --held-fg:#e2b665;
}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,sans-serif;color:var(--ink-2);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;
  background:
    radial-gradient(115% 95% at 88% 94%, rgba(var(--pool),.42), transparent 60%),
    radial-gradient(72% 60% at 16% 10%, rgba(var(--hi),.5), transparent 62%),
    linear-gradient(152deg, var(--g0) 0%, var(--g1) 52%, var(--g2) 100%);
  background-attachment:fixed;
}
@media (prefers-color-scheme:dark){body{background:
  radial-gradient(115% 95% at 86% 90%, rgba(var(--pool),.5), transparent 60%),
  radial-gradient(80% 70% at 18% 8%, rgba(var(--hi),.14), transparent 58%),
  radial-gradient(135% 130% at 50% 26%, var(--g0) 0%, var(--g1) 46%, var(--g2) 100%);
  background-attachment:fixed}}

::selection{background:var(--tone);color:var(--g0)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:20px;border:3px solid transparent;background-clip:content-box}
a{color:var(--tone-link);text-decoration:none}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}

/* ── top bar ── */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(var(--hi),.35), transparent);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.topbar.stuck{border-bottom-color:var(--hair);background:var(--panel)}
.topbar .row{display:flex;align-items:center;gap:16px;height:64px}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-family:"Cinzel",serif;font-weight:700;
  letter-spacing:.22em;font-size:16px;color:var(--tone)}
.wordmark svg{width:16px;height:16px;flex:none}
.topbar .spacer{flex:1}
.navlink{font-size:13.5px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border:1px solid var(--hair-2);border-radius:100px;background:var(--card);
  transition:border-color .2s,transform .2s}
.navlink:hover{border-color:var(--tone);transform:translateY(-1px)}

/* ── shared ── */
section{position:relative;z-index:1}
h1,h2,h3{font-family:"Merriweather",serif;color:var(--ink);letter-spacing:-.02em;line-height:1.15;font-weight:700}
.lede{color:var(--muted);font-size:19px;line-height:1.6;max-width:60ch}
.lede b{color:var(--ink-2);font-weight:600}

/* ── hero ── */
.hero{padding:64px 0 40px}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,56px)}
.hero .lede{margin-top:22px}

/* email form */
.form{margin-top:30px;max-width:520px}
.field{display:flex;gap:9px;flex-wrap:wrap}
.field input[type=email]{flex:1;min-width:220px;height:52px;padding:0 18px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--card-solid);border:1px solid var(--hair-2);border-radius:12px;transition:border-color .2s,box-shadow .2s}
.field input[type=email]::placeholder{color:var(--faint)}
.field input[type=email]:focus{outline:none;border-color:var(--tone);box-shadow:0 0 0 4px var(--ai-soft)}
.btn{height:52px;padding:0 24px;font:inherit;font-size:15px;font-weight:700;color:var(--g0);cursor:pointer;
  background:var(--tone);border:1px solid var(--tone);border-radius:12px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;transition:transform .18s,box-shadow .2s,opacity .2s}
.btn svg{width:16px;height:16px}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(52,65,125,.7)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
.microcopy{margin-top:13px;font-size:13px;color:var(--faint);line-height:1.55;max-width:46ch}
.form-note{margin-top:14px;font-size:14px;font-weight:600;display:none;align-items:flex-start;gap:9px;line-height:1.5}
.form-note svg{width:17px;height:17px;flex:none;margin-top:1px}
.form-note.ok{display:flex;color:var(--ai)}
.form-note.err{display:flex;color:var(--human)}

/* ── the lineage diagram — connective tissue made visible (research page) ── */
.lineage{position:relative;margin:0 auto;width:100%;max-width:420px;filter:drop-shadow(var(--shadow))}
.lineage svg{width:100%;height:auto;display:block;overflow:visible}
.thread{fill:none;stroke:var(--tone);stroke-width:2.2;stroke-linecap:round;opacity:.55}
.node-c{fill:var(--card-solid);stroke:var(--hair-2);stroke-width:1.4}
.node-ic{stroke:var(--tone);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.node-lbl{font-family:"Inter",sans-serif;font-weight:700;font-size:13px;fill:var(--ink)}
.node-sub{font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;fill:var(--faint)}
.prov{stroke-width:1.2}
.prov.ai{fill:var(--ai-soft);stroke:var(--ai-line)}
.prov.human{fill:var(--human-soft);stroke:var(--human-line)}
.prov-t{font-family:"Inter",sans-serif;font-weight:700;font-size:9px}
.prov-t.ai{fill:var(--ai)}.prov-t.human{fill:var(--human)}

/* ── the funnel diagram — one library, many outputs (creators page) ── */
.funnel{position:relative;margin:0 auto;width:100%;max-width:430px;filter:drop-shadow(var(--shadow))}
.funnel svg{width:100%;height:auto;display:block;overflow:visible}
.f-thread{fill:none;stroke:var(--tone);stroke-width:1.9;stroke-linecap:round;opacity:.42}
.f-lib{fill:var(--card-solid);stroke:var(--tone);stroke-width:1.7}
.f-node{fill:var(--card-solid);stroke:var(--hair-2);stroke-width:1.3}
.f-ic{stroke:var(--tone);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.f-lbl{font-family:"Inter",sans-serif;font-weight:600;font-size:11px;fill:var(--ink-2)}
.f-libl{font-family:"Cinzel",serif;font-weight:700;font-size:10px;letter-spacing:.14em;fill:var(--tone)}

/* ── generic section rhythm ── */
.band{padding:64px 0}
.band h2{font-size:clamp(26px,3.4vw,36px);max-width:20ch}
.band .sub{margin-top:18px;color:var(--muted);font-size:18px;line-height:1.65;max-width:62ch}
.band .sub b{color:var(--ink-2);font-weight:600}

/* problem — editorial, not cards */
.problem .pts{margin-top:26px;display:grid;gap:14px;max-width:60ch}
.problem .pt{display:flex;gap:13px;align-items:flex-start;color:var(--ink-2);font-size:16.5px;line-height:1.5}
.problem .pt .dot{width:7px;height:7px;border-radius:50%;background:var(--tone);flex:none;margin-top:9px}

/* flow — the object model as a connected chain */
.flow-rail{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.flow-rail::before{content:"";position:absolute;top:27px;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,transparent,var(--hair-2) 12%,var(--hair-2) 88%,transparent);z-index:0}
.step{position:relative;z-index:1;text-align:center;padding:0 12px}
.step .disc{width:56px;height:56px;margin:0 auto;border-radius:16px;display:grid;place-items:center;
  background:var(--card-solid);border:1px solid var(--hair-2);box-shadow:var(--shadow);color:var(--tone)}
.step .disc svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.step h3{font-family:"Inter",sans-serif;font-size:15.5px;font-weight:700;color:var(--ink);margin-top:16px;letter-spacing:0}
.step p{margin-top:7px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* proof — the specimen record */
.proof{padding:12px 0 64px}
.specimen{margin-top:38px;display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  border:1px solid var(--hair-2);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--panel);backdrop-filter:blur(9px);box-shadow:var(--shadow-lg)}
.spec-main{padding:30px 32px;border-right:1px solid var(--hair)}
.spec-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--study)}
.spec-tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.spec-finding{font-family:"Merriweather",serif;font-weight:700;font-size:22px;color:var(--ink);line-height:1.35;margin-top:14px}
.spec-meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:100px;border:1px solid var(--hair-2)}
.chip svg{width:12px;height:12px}
.chip.ai{color:var(--ai);background:var(--ai-soft);border-color:var(--ai-line)}
.chip.human{color:var(--human);background:var(--human-soft);border-color:var(--human-line)}
.conf{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted)}
.conf .bars{display:inline-flex;gap:2px}
.conf .bars i{width:4px;height:13px;border-radius:2px;background:var(--hair-2)}
.conf .bars i.on{background:var(--tone)}
.spec-side{padding:26px 28px;background:var(--card)}
.spec-side .lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.evidence{margin-top:14px;padding-left:16px;border-left:2px solid var(--human-line);
  font-family:"Merriweather",serif;font-style:italic;font-size:15px;line-height:1.6;color:var(--ink-2)}
.evidence + .evidence{margin-top:18px}
.attr{margin-top:9px;font-family:"Inter",sans-serif;font-style:normal;font-size:12px;color:var(--faint);font-weight:500}
.trace{margin-top:22px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tone);font-weight:600}
.trace svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}

/* audience */
.audience{text-align:center;padding:56px 0}
.audience h2{margin:0 auto;font-size:clamp(24px,3vw,32px)}
.who{margin:26px auto 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:760px}
.who span{font-size:14px;font-weight:600;color:var(--ink-2);padding:9px 16px;border:1px solid var(--hair-2);
  border-radius:100px;background:var(--card)}

/* founder note */
.founder{padding:20px 0 72px}
.note-card{max-width:720px;margin:0 auto;padding:38px 40px;border:1px solid var(--hair-2);border-radius:var(--radius-lg);
  background:var(--panel);backdrop-filter:blur(9px);box-shadow:var(--shadow)}
.note-card p{font-family:"Merriweather",serif;font-size:17px;line-height:1.7;color:var(--ink-2)}
.note-card p + p{margin-top:16px}
.sig{margin-top:22px;display:flex;align-items:center;gap:12px}
.sig .who-nm{font-family:"Cinzel",serif;letter-spacing:.12em;font-size:14px;color:var(--tone);font-weight:700}
.sig .who-rl{font-size:12.5px;color:var(--faint)}

/* final cta */
.final{text-align:center;padding:24px 0 96px}
.final h2{font-size:clamp(28px,3.6vw,40px);max-width:18ch;margin:0 auto}
.final .form{margin:30px auto 0}
.final .field{justify-content:center}
.final .microcopy{margin-left:auto;margin-right:auto;text-align:center}

/* footer */
footer{border-top:1px solid var(--hair);padding:34px 0 48px}
footer .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
footer .fine{font-size:12.5px;color:var(--faint)}
footer .spacer{flex:1}
footer a{color:var(--muted);font-weight:500}
footer a:hover{color:var(--tone)}

/* reveal — one authored moment, from an already-visible default */
@media (prefers-reduced-motion:no-preference){
  .thread,.f-thread{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);animation:draw 1.6s cubic-bezier(.16,1,.3,1) .25s forwards}
  .rise{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
  .rise.d1{animation-delay:.05s}.rise.d2{animation-delay:.14s}.rise.d3{animation-delay:.23s}.rise.d4{animation-delay:.32s}
  .node-g{opacity:0;animation:pop .7s cubic-bezier(.16,1,.3,1) forwards}
  .node-g.n1{animation-delay:.5s}.node-g.n2{animation-delay:.7s}.node-g.n3{animation-delay:.9s}
  .node-g.n4{animation-delay:1.1s}.node-g.n5{animation-delay:1.3s}.node-g.n6{animation-delay:1.5s}.node-g.n7{animation-delay:1.7s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{to{opacity:1;transform:none}}
/* opacity ONLY — animating transform here would clobber each node's SVG translate() and collapse them to the origin */
@keyframes pop{from{opacity:0}to{opacity:1}}

/* ── responsive ── */
@media (max-width:880px){
  .hero .grid{grid-template-columns:1fr;gap:40px}
  /* headline + form lead on mobile; the diagram follows as reinforcement */
  .lineage{max-width:320px}
  .funnel{max-width:340px}
  .specimen{grid-template-columns:1fr}
  .spec-main{border-right:0;border-bottom:1px solid var(--hair)}
  .flow-rail{grid-template-columns:1fr 1fr;gap:32px 0;row-gap:34px}
  .flow-rail::before{display:none}
}
@media (max-width:520px){
  .hero{padding:44px 0 28px}
  .band,.proof,.founder{padding-top:48px;padding-bottom:48px}
  .field input[type=email]{min-width:100%}
  .btn{width:100%;justify-content:center}
  .flow-rail{grid-template-columns:1fr;gap:26px}
}