/* ==========================================================================
   CaseWeave — design system v2  ·  "one canvas, elevation not inversion"
   Consistent obsidian. No light sections, ever. Depth from elevation panels,
   hairlines, a 1px inset top-edge highlight, grain, and real product UI.
   Built VISIBLE-FIRST (transform-only reveals; never opacity:0 on content).
   ========================================================================== */

:root {
  /* ---- the one canvas + violet-tinted elevation ramp (±luminance, never a light band) ---- */
  --floor:  #0D0A20;   /* THE canvas — every section sits on this */
  --lift-1: #14112E;   /* a barely-raised panel */
  --lift-2: #1B1740;   /* a card / raised surface */
  --lift-3: #231C53;   /* input / hover / nested chrome */
  --well:   #09071A;   /* recessed (code, wells) */

  /* hairlines + the "expensive" lighting model */
  --hair:        rgba(255,255,255,0.07);
  --hair-bright: rgba(255,255,255,0.12);
  --hair-brass:  rgba(201,162,75,0.30);
  --inset-hi: inset 0 1px 0 0 rgba(255,255,255,0.05);          /* top-edge light catch */
  --ring: 0 0 0 1px var(--hair), var(--inset-hi);
  --glow: 0 24px 60px -20px #050310, 0 0 90px -40px #050310;    /* same-as-floor ambient seat */

  /* ---- text ramp (hierarchy by gray-step, not size) ---- */
  --t1: #ECEAFB;   /* primary */
  --t2: #B7B1D6;   /* secondary / body */
  --t3: #837CA8;   /* tertiary / muted */
  --t4: #585379;   /* dim / captions */

  /* ---- FUNCTIONAL color (hue = state, never decoration) ---- */
  --violet: #7C53F0;   --violet-press: #6A40DE;   --violet-soft: rgba(124,83,240,0.14);  /* ACTION only */
  --brass:  #C9A24B;   --brass-soft: rgba(201,162,75,0.12);                               /* CERTIFIED (scarce) */
  --sage:   #38B584;   --sage-soft: rgba(56,181,132,0.13);                                /* VERIFIED */
  --clay:   #E0604D;   --clay-soft: rgba(224,96,77,0.13);                                 /* ALERT (deadline / sensitive flag) */
  --cyan:   #4FC4D6;                                                                       /* secondary status (rare) */

  /* ---- type ---- */
  --display: "Fraunces", "Spectral", Georgia, serif;       /* gravitas, high-contrast, dialed severe */
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;  /* the forensic "lab coat" */
  --serif: "Spectral", Georgia, serif;                     /* the HUMAN voice, rare */

  /* ---- space (8px), radii, width ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --maxw: 1120px;
  --radius: 14px; --radius-sm: 9px; --radius-lg: 20px; --radius-pill: 999px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  margin:0; font-family:var(--body); font-size:16.5px; line-height:1.6; color:var(--t2);
  background:var(--floor); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* film grain — material texture, not glow. Fixed, never blocks input. */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{ font-family:var(--display); color:var(--t1); margin:0 0 .5em; font-weight:560; line-height:1.04;
  letter-spacing:-0.015em; font-optical-sizing:auto; }
h1{ font-size:clamp(2.6rem,6.2vw,4.6rem); letter-spacing:-0.025em; }
h2{ font-size:clamp(2rem,4.2vw,3.1rem); letter-spacing:-0.02em; }
h3{ font-size:clamp(1.2rem,2vw,1.5rem); letter-spacing:-0.01em; font-weight:540; }
/* the two-tone headline: dim the second clause */
.dim{ color:var(--t3); }
p{ margin:0 0 1em; }
a{ color:var(--violet); text-decoration:none; }
a:hover{ color:var(--t1); }
strong{ color:var(--t1); font-weight:600; }
img{ max-width:100%; display:block; }
::selection{ background:var(--violet-soft); color:#fff; }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:6px; }

/* ---- layout ---- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--s5); }
.wide{ max-width:1280px; }
.section{ padding:var(--s9) 0; position:relative; }
.section--tight{ padding:var(--s8) 0; }
.section + .section{ border-top:1px solid var(--hair); }   /* sections divided by a hairline, not a bg flip */
.section--seam{ border-top:0; }
/* faint ledger grid — "everything logged & accounted for" — used sparingly */
.ledger{ background-image:linear-gradient(var(--hair) 1px, transparent 1px); background-size:100% 32px;
  background-position:0 -1px; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--t2); max-width:54ch; line-height:1.55; }
.center{ text-align:center; } .center .lead{ margin-left:auto; margin-right:auto; }
.measure{ max-width:60ch; }
.mono{ font-family:var(--mono); } .serif{ font-family:var(--serif); }

/* ---- eyebrow: mono figure-caption label (encodes truth) ---- */
.eyebrow{ font-family:var(--mono); font-size:0.72rem; font-weight:500; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--t3); margin:0 0 var(--s4); display:inline-flex; align-items:center; gap:var(--s2); }
.eyebrow::before{ content:""; width:18px; height:1px; background:var(--violet); opacity:.8; }
.eyebrow.no-rule::before{ display:none; }
.eyebrow b{ color:var(--violet); font-weight:600; }

/* ---- buttons (violet = ACTION, the only place violet leads) ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--body); font-weight:560; font-size:0.98rem; line-height:1; padding:0.9em 1.4em;
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; white-space:nowrap; }
.btn:hover{ color:#fff; transform:translateY(-1px); }
.btn--primary{ background:var(--violet); color:#fff; box-shadow:0 8px 24px -8px rgba(124,83,240,.6), var(--inset-hi); }
.btn--primary:hover{ background:var(--violet-press); }
.btn--ghost{ background:transparent; color:var(--t1); border-color:var(--hair-bright); }
.btn--ghost:hover{ border-color:var(--violet); color:#fff; background:var(--violet-soft); }
.btn--lg{ padding:1.05em 1.7em; font-size:1.04rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }

.appstore{ display:inline-flex; align-items:center; gap:var(--s3); background:var(--lift-2); color:var(--t1);
  border-radius:12px; padding:0.65em 1.1em; border:1px solid var(--hair-bright); box-shadow:var(--inset-hi); font-weight:560; }
.appstore small{ display:block; font-size:0.62rem; color:var(--t3); text-transform:uppercase; letter-spacing:0.1em; }
.appstore .as-name{ font-family:var(--display); font-size:1rem; }
.appstore:hover{ transform:translateY(-1px); border-color:var(--hair); text-decoration:none; }

/* ==========================================================================
   header / nav — one dark bar, dissolves under a blur veil on scroll
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:50; transition:background .25s, border-color .25s, backdrop-filter .25s;
  border-bottom:1px solid transparent; }
.site-header .container{ display:flex; align-items:center; gap:var(--s5); height:70px; position:relative; }
/* NOTE: no flex `gap` here — the wordmark is `Case<span class="w">Weave</span>`, which flex
   treats as two items; a gap wedges a space *inside* "CaseWeave". Icon↔wordmark spacing
   lives on `.brand img` margin instead. */
.brand{ display:inline-flex; align-items:center; font-family:var(--display); font-weight:600;
  font-size:1.3rem; letter-spacing:-0.02em; color:var(--t1); }
.brand:hover{ color:var(--t1); }
.brand img{ width:28px; height:28px; border-radius:8px; margin-right:var(--s3); }
.brand .w{ color:var(--violet); }
.nav-links{ display:flex; align-items:center; gap:var(--s5); margin-left:auto; }
.nav-links a{ color:var(--t2); font-weight:500; font-size:0.95rem; }
.nav-links a:hover, .nav-links a[aria-current]{ color:var(--t1); }
.nav-actions{ display:flex; align-items:center; gap:var(--s3); margin-left:var(--s4); }
.nav-signin{ color:var(--t2); font-weight:560; font-size:0.93rem; }
.nav-signin:hover{ color:var(--t1); }
.site-header.scrolled{ background:linear-gradient(180deg, rgba(13,10,32,0.86), rgba(13,10,32,0.66));
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); border-bottom-color:var(--hair); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; width:42px; height:42px; border-radius:10px; }
.nav-toggle span{ display:block; width:22px; height:1.5px; background:var(--t1); margin:5px auto; border-radius:2px; transition:.2s; }
@media (max-width:900px){
  .nav-toggle{ display:block; margin-left:auto; }
  .nav-links,.nav-actions{ position:absolute; top:70px; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:var(--s2); margin:0; padding:var(--s4) var(--s5); background:var(--lift-1); border-bottom:1px solid var(--hair);
    box-shadow:var(--glow); display:none; }
  .nav-open .nav-links,.nav-open .nav-actions{ display:flex; }
  .nav-actions{ top:auto; border-bottom:0; box-shadow:none; padding-top:0; }
  .nav-actions .btn{ width:100%; }
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero{ position:relative; padding:calc(70px + var(--s9)) 0 var(--s9); overflow:hidden; }
/* one overhead key-light + edge vignette so the black is lit, not a dead void */
.hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 70% -10%, rgba(124,83,240,0.18), transparent 60%),
    radial-gradient(700px 500px at 8% 8%, rgba(79,196,214,0.05), transparent 55%); }
.hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 -160px 120px -120px #060417, inset 0 120px 120px -120px #060417; }
.hero .container{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:var(--s8); align-items:center; }
.hero h1{ margin-bottom:var(--s5); }
.hero .lead{ margin-bottom:var(--s6); }
.hero-trust{ display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); margin-top:var(--s6); }
.hero-trust span{ display:inline-flex; align-items:center; gap:var(--s2); font-size:0.84rem; color:var(--t3); font-weight:500; }
.hero-trust svg{ color:var(--sage); flex:none; }
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; gap:var(--s7); } }

/* ==========================================================================
   the SIGNATURE — "the weave": scattered inputs -> one case -> two paths
   ========================================================================== */
.weave{ position:relative; border-radius:var(--radius-lg); border:1px solid var(--hair); background:
   linear-gradient(180deg, var(--lift-1), var(--floor)); box-shadow:var(--ring), var(--glow); padding:var(--s5);
   overflow:hidden; }
.weave-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s4);
   font-family:var(--mono); font-size:0.68rem; letter-spacing:0.12em; color:var(--t3); text-transform:uppercase; }
/* scattered input chips */
.scatter{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--s4); }
.chipx{ font-family:var(--mono); font-size:0.64rem; color:var(--t3); border:1px solid var(--hair);
   border-radius:6px; padding:3px 7px; background:var(--well); }
.chipx .d{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; vertical-align:middle; }
/* the woven spine: one organized case */
.spine{ position:relative; padding-left:var(--s5); }
.spine::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px;
   background:linear-gradient(var(--violet), var(--brass)); opacity:.7; }
.node{ position:relative; display:flex; align-items:center; gap:var(--s3); padding:7px 0; }
.node::before{ content:""; position:absolute; left:-21px; width:8px; height:8px; border-radius:50%;
   background:var(--floor); border:1.5px solid var(--violet); }
.node.ok::before{ border-color:var(--sage); } .node.seal::before{ border-color:var(--brass); }
.node .t{ color:var(--t1); font-size:0.9rem; font-weight:550; }
.node .m{ font-family:var(--mono); font-size:0.66rem; color:var(--t3); }
/* the fork: two synchronized paths */
.fork-mini{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s4); padding-top:var(--s4);
   border-top:1px solid var(--hair); }
.path{ border:1px solid var(--hair); border-radius:10px; padding:var(--s3); background:var(--lift-1); box-shadow:var(--inset-hi); }
.path .lbl{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--t3); }
.path .who{ color:var(--t1); font-weight:600; font-size:0.92rem; margin-top:2px; }
.path.client{ border-color:rgba(124,83,240,0.3); } .path.att{ border-color:var(--hair-brass); }

/* seal + badges (functional) */
.seal{ display:inline-flex; align-items:center; gap:6px; padding:0.35em 0.7em; border-radius:999px;
   border:1px solid var(--brass); color:var(--brass); font-family:var(--mono); font-size:0.62rem;
   letter-spacing:0.08em; text-transform:uppercase; background:var(--brass-soft); }
.seal svg{ width:12px; height:12px; }

/* ==========================================================================
   cards / grids
   ========================================================================== */
.grid{ display:grid; gap:var(--s4); }
.grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{ background:var(--lift-1); border:1px solid var(--hair); border-radius:var(--radius);
   padding:var(--s6); box-shadow:var(--inset-hi); transition:transform .18s, border-color .18s, background .18s; }
.card:hover{ transform:translateY(-2px); border-color:var(--hair-bright); background:var(--lift-2); }
.card h3{ margin-bottom:var(--s2); color:var(--t1); }
.card p{ color:var(--t2); font-size:0.96rem; margin:0; }
.card .ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:var(--s4);
   background:var(--lift-3); color:var(--t1); box-shadow:var(--inset-hi); border:1px solid var(--hair); }
.card .num{ font-family:var(--mono); font-size:0.72rem; color:var(--t3); letter-spacing:0.08em; }

/* a real-process step (numbering encodes a true sequence: capture->organize->complete->hand off) */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
@media (max-width:860px){ .flow{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .flow{ grid-template-columns:1fr; } }
.step .num{ font-family:var(--mono); font-size:0.72rem; color:var(--violet); letter-spacing:0.1em; margin-bottom:var(--s3); }
.step h3{ font-size:1.1rem; margin-bottom:var(--s2); }
.step p{ color:var(--t2); font-size:0.93rem; margin:0; }

/* stat tiles (no light bg — elevation panel) */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:720px){ .stat-row{ grid-template-columns:1fr; } }
.stat{ background:var(--lift-1); border:1px solid var(--hair); border-radius:var(--radius); padding:var(--s6);
   text-align:center; box-shadow:var(--inset-hi); }
.stat-num{ font-family:var(--display); font-size:clamp(2.1rem,4vw,2.9rem); font-weight:560; color:var(--t1); letter-spacing:-0.03em; }
.stat-label{ color:var(--t3); font-size:0.9rem; margin-top:var(--s1); }

/* badges (functional color = state) */
.badges{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:0.5em 0.85em; border-radius:999px;
   border:1px solid var(--hair); background:var(--lift-1); font-size:0.82rem; font-weight:550; color:var(--t1); box-shadow:var(--inset-hi); }
.badge svg{ width:14px; height:14px; flex:none; color:var(--t3); }
.badge--cert{ border-color:var(--brass); color:var(--brass); background:var(--brass-soft); } .badge--cert svg{ color:var(--brass); }
.badge--ok{ border-color:rgba(56,181,132,.4); color:var(--sage); background:var(--sage-soft); } .badge--ok svg{ color:var(--sage); }

/* the two-audience "one platform, two paths" split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
@media (max-width:760px){ .split{ grid-template-columns:1fr; } }
.split .card{ padding:var(--s7); }
.split .card h3{ font-size:1.5rem; }
.split .client-card{ border-color:rgba(124,83,240,0.32); }
.split .att-card{ border-color:var(--hair-brass); }

/* pricing */
.toggle-wrap{ display:inline-flex; gap:4px; background:var(--lift-1); border:1px solid var(--hair); border-radius:999px; padding:4px; box-shadow:var(--inset-hi); }
.toggle-wrap button{ border:0; background:none; padding:0.5em 1.05em; border-radius:999px; font-weight:560; color:var(--t3); cursor:pointer; font-family:var(--body); }
.toggle-wrap button.active{ background:var(--violet); color:#fff; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); align-items:start; }
@media (max-width:920px){ .plans{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }
.plan{ background:var(--lift-1); border:1px solid var(--hair); border-radius:var(--radius); padding:var(--s6); box-shadow:var(--inset-hi); }
.plan--featured{ border-color:var(--violet); position:relative; background:var(--lift-2); }
.plan--featured::before{ content:"Most popular"; position:absolute; top:-11px; left:var(--s6); background:var(--violet); color:#fff;
   font-size:0.66rem; font-weight:600; padding:0.3em 0.7em; border-radius:999px; }
.plan h3{ margin-bottom:var(--s1); } .plan .price{ font-family:var(--display); font-size:2.2rem; color:var(--t1); font-weight:560; }
.plan .price small{ font-size:0.92rem; color:var(--t3); font-weight:500; font-family:var(--body); }
.plan ul{ list-style:none; padding:0; margin:var(--s4) 0 var(--s5); }
.plan li{ display:flex; gap:var(--s2); padding:var(--s2) 0; font-size:0.92rem; color:var(--t2); border-top:1px solid var(--hair); }
.plan li:first-child{ border-top:0; } .plan li svg{ color:var(--sage); flex:none; margin-top:3px; width:15px; height:15px; }

/* FAQ */
.faq{ max-width:780px; margin:0 auto; }
.faq details{ border-bottom:1px solid var(--hair); padding:var(--s4) 0; }
.faq summary{ font-family:var(--display); font-weight:540; font-size:1.08rem; color:var(--t1); cursor:pointer;
   list-style:none; display:flex; justify-content:space-between; gap:var(--s4); align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--violet); font-size:1.3rem; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ margin:var(--s3) 0 0; color:var(--t2); }

/* misc */
.kicker{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.1em; color:var(--t3); text-transform:uppercase; }
.note{ font-size:0.85rem; color:var(--t3); }
.callout{ border-left:2px solid var(--violet); background:var(--violet-soft); padding:var(--s4) var(--s5); border-radius:0 12px 12px 0; color:var(--t2); }
.shot{ border-radius:var(--radius); border:1px solid var(--hair); box-shadow:var(--ring), var(--glow); overflow:hidden; }
.hr{ height:1px; background:var(--hair); border:0; margin:var(--s7) 0; }
.tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--violet); }

/* "what we are / are not" table */
.wtable{ width:100%; border-collapse:collapse; }
.wtable td{ padding:var(--s4); border-top:1px solid var(--hair); vertical-align:top; font-size:0.94rem; color:var(--t2); }
.wtable .yes{ color:var(--sage); font-weight:600; } .wtable .no{ color:var(--clay); font-weight:600; }

/* legal long-form */
.legal{ max-width:800px; margin:0 auto; }
.legal h2{ font-size:1.45rem; margin-top:var(--s7); } .legal h3{ font-size:1.1rem; margin-top:var(--s5); }
.legal p,.legal li{ color:var(--t2); font-size:0.96rem; }

/* ==========================================================================
   footer
   ========================================================================== */
.site-footer{ background:var(--well); color:var(--t3); padding:var(--s8) 0 var(--s6); border-top:1px solid var(--hair); }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--s6); }
.foot-grid h4{ color:var(--t1); font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:500; margin-bottom:var(--s4); }
.foot-grid a{ display:block; color:var(--t3); padding:var(--s1) 0; font-size:0.9rem; overflow-wrap:anywhere; }
.foot-grid a:hover{ color:var(--t1); }
.foot-brand{ display:inline-flex; align-items:center; color:var(--t1); font-family:var(--display); font-weight:600; font-size:1.2rem; margin-bottom:var(--s3); }
.foot-brand .w{ color:var(--violet); } .foot-brand img{ width:26px; height:26px; border-radius:7px; margin-right:var(--s3); }
.foot-blurb{ font-size:0.9rem; max-width:34ch; color:var(--t3); }
.foot-bottom{ border-top:1px solid var(--hair); margin-top:var(--s7); padding-top:var(--s5); display:flex; flex-wrap:wrap;
   gap:var(--s3) var(--s5); justify-content:space-between; align-items:center; }
.foot-bottom p{ margin:0; font-size:0.82rem; } .foot-legal{ font-size:0.82rem; color:var(--t3); max-width:60ch; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   motion — TRANSFORM-ONLY, never opacity. Content always visible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ transform:translateY(16px); transition:transform .6s cubic-bezier(.2,.7,.2,1); will-change:transform; }
  .js .reveal.in{ transform:none; }
}
.skip{ position:absolute; left:-999px; top:0; background:var(--violet); color:#fff; padding:0.7em 1em; border-radius:0 0 10px 0; z-index:100; }
.skip:focus{ left:0; }

/* ==========================================================================
   poster-as-spine additions (v3) — chaos · pillars · proof · frames · thread
   All visible-first; animation is transform-only on already-visible content.
   ========================================================================== */

/* ---- THE PROBLEM: a tangled field that contrasts with the woven order ---- */
.chaos{ position:relative; border:1px solid var(--hair); border-radius:var(--radius-lg);
   background:linear-gradient(180deg, var(--well), var(--floor)); box-shadow:var(--ring);
   padding:var(--s6) var(--s5) var(--s7); overflow:hidden; min-height:300px; }
.chaos-head{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
   color:var(--clay); display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s5); }
.chaos-head .d{ width:7px; height:7px; border-radius:50%; background:var(--clay); }
.chaos-field{ position:relative; display:flex; flex-wrap:wrap; gap:8px; }
.chip-mess{ font-family:var(--mono); font-size:0.66rem; color:var(--t3); border:1px solid var(--hair);
   border-radius:6px; padding:5px 9px; background:var(--lift-1); box-shadow:var(--inset-hi); white-space:nowrap; }
/* a controlled "mess": slight rotations, never random (deterministic, layout-safe) */
.chip-mess:nth-child(3n){ transform:rotate(-2.2deg); } .chip-mess:nth-child(3n+1){ transform:rotate(1.6deg); }
.chip-mess:nth-child(4n){ transform:rotate(-1deg); } .chip-mess:nth-child(5n){ transform:rotate(2.6deg); }
.chip-mess.flag{ color:var(--clay); border-color:var(--clay-soft); background:var(--clay-soft); }
.incomplete{ display:inline-flex; align-items:center; gap:var(--s2); margin-top:var(--s5);
   font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--clay);
   border:1.5px dashed var(--clay); border-radius:8px; padding:0.5em 0.85em; transform:rotate(-1.5deg); }
.repeat-row{ display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); margin-top:var(--s6); }
.repeat-row .ri{ display:flex; align-items:flex-start; gap:var(--s2); font-size:0.86rem; color:var(--t3); max-width:15rem; }
.repeat-row svg{ color:var(--clay); flex:none; margin-top:2px; }

/* ---- THE FOUR PILLARS (poster bottom bar) — 2x2, not an identical 4-up ---- */
.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair);
   border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; box-shadow:var(--inset-hi); }
.pillar{ background:var(--lift-1); padding:var(--s6); transition:background .18s; }
.pillar:hover{ background:var(--lift-2); }
.pillar .pn{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; color:var(--brass); }
.pillar h3{ font-size:1.18rem; margin:var(--s3) 0 var(--s2); }
.pillar p{ color:var(--t2); font-size:0.93rem; margin:0; }
@media (max-width:640px){ .pillars{ grid-template-columns:1fr; } }

/* ---- THE PROOF: evidence readouts (real, demonstrable numbers) ---- */
.proof{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:820px){ .proof{ grid-template-columns:1fr; } }
.readout{ position:relative; background:var(--lift-1); border:1px solid var(--hair); border-radius:var(--radius);
   padding:var(--s6); box-shadow:var(--inset-hi); }
.readout .rl{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase;
   color:var(--t3); display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s4); }
.readout .rl svg{ width:13px; height:13px; color:var(--sage); }
.readout .rn{ font-family:var(--display); font-size:clamp(2rem,3.4vw,2.7rem); color:var(--t1);
   letter-spacing:-0.03em; line-height:1; }
.readout .rs{ font-family:var(--mono); font-size:0.74rem; color:var(--brass); margin-top:var(--s3); }
.readout .rd{ color:var(--t2); font-size:0.92rem; margin:var(--s3) 0 0; }

/* ---- product shot in a window frame (chrome makes a screenshot read as "real product") ---- */
.frame{ border-radius:var(--radius); border:1px solid var(--hair-bright); overflow:hidden;
   box-shadow:var(--ring), var(--glow); background:var(--lift-2); }
.frame-bar{ display:flex; align-items:center; gap:6px; padding:9px var(--s4); background:var(--lift-2);
   border-bottom:1px solid var(--hair); }
.frame-bar .dot{ width:9px; height:9px; border-radius:50%; background:var(--lift-3); }
.frame-bar .url{ margin-left:var(--s3); font-family:var(--mono); font-size:0.64rem; color:var(--t4);
   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frame img{ width:100%; display:block; }

/* ---- the page "weave thread": a thin spine connecting the narrative (desktop accent) ---- */
.spine-rail{ position:relative; }
@media (min-width:1000px) and (prefers-reduced-motion: no-preference){
  .spine-rail::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%);
     background:linear-gradient(180deg, transparent, var(--hair-bright) 8%, var(--hair-brass) 92%, transparent);
     opacity:.5; pointer-events:none; z-index:0; }
}

/* ---- the fork made literal: one strand splits into client + attorney ---- */
.forklane{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s5); }
.forklane .knot{ width:14px; height:14px; border-radius:50%; background:var(--floor); border:2px solid var(--violet);
   box-shadow:0 0 0 6px var(--violet-soft); justify-self:center; }
@media (max-width:760px){ .forklane{ grid-template-columns:1fr; } .forklane .knot{ display:none; } }

/* ---- interactive weave: staggered node entrance (transform-only, visible-first) ---- */
@media (prefers-reduced-motion: no-preference){
  .js .weave--anim:not(.in) .node{ transform:translateX(-10px); }
  .js .weave--anim:not(.in) .chipx{ transform:translateY(-6px); }
  .js .weave--anim .node{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
  .js .weave--anim .chipx{ transition:transform .45s cubic-bezier(.2,.7,.2,1); }
  .js .weave--anim.in .node:nth-child(2){ transition-delay:.06s; }
  .js .weave--anim.in .node:nth-child(3){ transition-delay:.12s; }
  .js .weave--anim.in .node:nth-child(4){ transition-delay:.18s; }
  /* the spine gradient breathes once it's woven */
  .js .weave--anim.in .spine::before{ animation:thread-pulse 3.2s ease-in-out 1; }
}
@keyframes thread-pulse{ 0%{ opacity:.35; } 50%{ opacity:.85; } 100%{ opacity:.7; } }

/* legacy light-section class names now resolve to dark — so existing pages don't flash white
   while they're re-skinned. They all collapse onto the one obsidian canvas. */
.section--mist, .section--cloud, .section--paper{ background:transparent; }