/* ═══════════════════════════════════════════════════════════════════════════
   BE-FLAGSHIP.CSS — BagEngine flagship article system
   Standardised template layer. Dark-native, site-coherent, instrument-grade.

   WHY THIS EXISTS
   Flagship articles were being authored on ad-hoc LIGHT token sets and then
   patched with dark overrides, which is what produced stark white cards on a
   dark ground. This file is the dark-native token set, authored once.

   GROUND ARCHITECTURE (important)
   site_engine.js magazine mode assigns document.body.style.backgroundImage as
   an INLINE style at runtime. An inline style beats any stylesheet rule, so we
   do not try to out-specify it. `.fs-ground` paints a fixed full-viewport layer
   beneath the content instead. Robust regardless of what the engine sets.

   NAMESPACE
   Everything is scoped under .fs so this cannot collide with styles.css or
   be-digest.css, both of which claim generic class names globally.

   USAGE
   <link rel="stylesheet" href="/assets/be-flagship.css?v=1">
   <div class="fs-ground" aria-hidden="true"></div>
   <article class="fs"> ... </article>
   ═══════════════════════════════════════════════════════════════════════════ */

/* Scoped reset. The flagship article does not inherit a global reset on
   every page it can appear on, and without border-box every padded card
   renders wider than its max-width. Scoped to .fs so nothing else moves. */
.fs, .fs *, .fs *::before, .fs *::after{ box-sizing:border-box; }

/* ── TOKENS ──────────────────────────────────────────────────────────────── */
/* #site-header is included deliberately: the engine injects the nav OUTSIDE
   .fs, so without it every var() in the nav block resolves to nothing —
   which renders the wordmark in Times/black and clips the gradient span to
   transparent. Tokens must be visible everywhere they are consumed. */
.fs, .fs-ground, #site-header, #site-footer {
  /* Ground: near-black carrying a slight violet bias so it reads as chosen
     rather than as a default neutral grey. */
  --ground:   #0a0a0e;
  --surface:  #131319;
  --surface-2:#181820;
  --raise:    #1e1e28;
  --line:     #26262f;
  --line-2:   #32323e;

  --ink:  #f6f6f7;
  --mut:  #a8a8b3;
  --dim:  #71717f;

  /* Accent: the site brand violet (#7c6af7), lifted for legibility on a dark
     ground. Boldness is spent here and nowhere else. */
  --vio:      #8b7cff;
  --vio-soft: #a79aff;
  --vio-deep: #6d5aef;
  --vio-wash: rgba(139,124,255,.10);
  --vio-line: rgba(139,124,255,.28);

  /* Semantic signal spectrum. Encodes tier severity. Deliberately NOT the
     accent hue: severity is information, not decoration. */
  --safe:#34d399; --safe-wash:rgba(52,211,153,.09);  --safe-line:rgba(52,211,153,.30);
  --caut:#fbbf24; --caut-wash:rgba(251,191,36,.09);  --caut-line:rgba(251,191,36,.30);
  --mute:#f87171; --mute-wash:rgba(248,113,113,.09); --mute-line:rgba(248,113,113,.30);

  --display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --body:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --read: 760px;   /* reading column */
  --band: 1120px;  /* instrument band — what breaks out of the column */

  /* Depth: a top inner highlight is what separates enterprise dark UI from
     flat dark UI. Every raised surface gets one. */
  --lift:  inset 0 1px 0 rgba(255,255,255,.045);
  --sh-sm: 0 1px 2px rgba(0,0,0,.5);
  --sh-md: 0 8px 26px -8px rgba(0,0,0,.65);
  --sh-lg: 0 24px 60px -18px rgba(0,0,0,.75);
}

/* ── THE GROUND ──────────────────────────────────────────────────────────── */
/* Three stacked layers: violet bloom, fractal-noise grain, base colour.
   Fixed, so the texture stays put while content scrolls over it. */
.fs-ground{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--ground);
  background-image:
    radial-gradient(1100px 620px at 50% -8%, rgba(139,124,255,.16), transparent 62%),
    radial-gradient(760px 520px at 88% 22%, rgba(52,211,153,.055), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,repeat;
  background-size:auto,auto,180px 180px;
}

/* ── BASE ────────────────────────────────────────────────────────────────── */
.fs{
  max-width:var(--band); margin:0 auto; padding:0 22px 96px;
  font-family:var(--body); font-size:17.5px; line-height:1.72;
  color:var(--mut); -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01' 1,'cv01' 1;
}
/* Every direct child sits in the reading column; instrument bands opt out. */
.fs > *{ max-width:var(--read); margin-left:auto; margin-right:auto; }
.fs > .fs-band{ max-width:var(--band); }

.fs p{ margin-block:0 1.15em; }
.fs b,.fs strong{ color:var(--ink); font-weight:650; }
.fs em{ color:var(--mut); }

/* ── SEXY HYPERLINKING ───────────────────────────────────────────────────── */
/* An underline that is a real gradient rule and sweeps to accent on hover.
   background-size transition is compositor-cheap; text-decoration is not. */
.fs a{
  color:var(--ink); text-decoration:none;
  background-image:linear-gradient(90deg,var(--vio),var(--vio)),
                   linear-gradient(90deg,var(--line-2),var(--line-2));
  background-size:0% 1.5px, 100% 1px;
  background-position:0 100%, 0 100%;
  background-repeat:no-repeat;
  padding-bottom:2px;
  transition:background-size .38s cubic-bezier(.2,.8,.2,1), color .25s ease;
}
.fs a:hover,.fs a:focus-visible{ color:var(--vio-soft); background-size:100% 1.5px, 100% 1px; }
.fs a:focus-visible{ outline:2px solid var(--vio); outline-offset:3px; border-radius:2px; }

/* External links carry a small ascending mark. Signals "this leaves the page"
   without the noise of an icon font. */
.fs a[rel~="noopener"]::after{
  content:"↗"; font-family:var(--mono); font-size:.66em; line-height:1;
  margin-left:.28em; color:var(--dim); vertical-align:.32em;
  transition:color .25s ease, transform .25s ease; display:inline-block;
}
.fs a[rel~="noopener"]:hover::after{ color:var(--vio); transform:translate(1px,-1px); }

/* ── TYPE ────────────────────────────────────────────────────────────────── */
.fs h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.5rem,6.2vw,4.15rem); line-height:1.02;
  letter-spacing:-.021em; color:var(--ink);
  margin-block:.35em .42em; text-wrap:balance;
}
.fs h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.85rem,3.7vw,2.65rem); line-height:1.1;
  letter-spacing:-.017em; color:var(--ink);
  margin-block:3.5rem 1rem; text-wrap:balance; position:relative;
}
/* Section spine: a signal rule in the margin. Reads as instrument, and on wide
   viewports it sits outside the text so it never crowds the measure. */
.fs h2::before{
  content:""; position:absolute; left:-26px; top:.2em; bottom:.2em; width:3px;
  border-radius:3px; background:linear-gradient(180deg,var(--vio),transparent);
}
.fs h3{
  font-family:var(--body); font-weight:640; color:var(--ink);
  font-size:1.14rem; line-height:1.38; letter-spacing:-.01em;
  margin-block:2rem .5rem;
}
@media(max-width:1180px){ .fs h2::before{ left:-16px; } }
@media(max-width:820px){  .fs h2::before{ display:none; } }

/* Eyebrow / mono label — the utility face doing utility work. */
.fs .fs-eyebrow{
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
}
.fs .fs-eyebrow .on{ color:var(--vio); }
.fs .fs-eyebrow::after{
  content:""; flex:1; height:1px; min-width:24px;
  background:linear-gradient(90deg,var(--line-2),transparent);
}

.fs .fs-crumbs{ font-family:var(--mono); font-size:.72rem; color:var(--dim); letter-spacing:.04em; padding-top:2rem; }
.fs .fs-crumbs a{ color:var(--dim); background-image:none; padding:0; }
.fs .fs-crumbs a:hover{ color:var(--vio); }

.fs .fs-lede{
  font-size:clamp(1.22rem,2.3vw,1.44rem); line-height:1.56;
  color:var(--mut); letter-spacing:-.008em; margin-block:0 1.6rem; text-wrap:pretty;
}
.fs .fs-lede b{ color:var(--ink); font-weight:600; }

/* Metadata chips */
.fs .fs-chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin-block:1.3rem 1.9rem; }
.fs .fs-chip{
  font-family:var(--mono); font-size:.665rem; font-weight:550;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--mut); background:var(--surface); border:1px solid var(--line);
  border-radius:100px; padding:.34rem .78rem; box-shadow:var(--lift);
  display:inline-flex; align-items:center; gap:.42rem;
}
.fs .fs-chip.hot{ color:var(--vio-soft); border-color:var(--vio-line); background:var(--vio-wash); }
.fs .fs-chip .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.fs .fs-chip.hot .dot{ animation:fsPulse 2.6s ease-in-out infinite; }
@keyframes fsPulse{ 0%,100%{opacity:1;box-shadow:0 0 0 0 var(--vio-line)} 50%{opacity:.55;box-shadow:0 0 0 4px transparent} }

/* Byline: attribution card, not an italic afterthought. */
.fs .fs-byline{
  font-size:.925rem; line-height:1.68; color:var(--mut);
  background:linear-gradient(180deg,var(--surface),transparent);
  border:1px solid var(--line); border-left:2px solid var(--vio);
  border-radius:0 12px 12px 0; padding:1.05rem 1.25rem;
  margin-block:0 2rem; box-shadow:var(--lift);
}

/* ── BLUF ────────────────────────────────────────────────────────────────── */
.fs .fs-bluf{
  background:linear-gradient(165deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-radius:16px;
  padding:1.7rem 1.85rem; margin-block:2rem 2.6rem;
  box-shadow:var(--lift),var(--sh-md); position:relative; overflow:hidden;
}
/* Accent bloom in the corner, kept faint — depth without a gradient hero. */
.fs .fs-bluf::before{
  content:""; position:absolute; top:-60%; right:-18%; width:340px; height:340px;
  background:radial-gradient(circle,var(--vio-wash),transparent 68%); pointer-events:none;
}
.fs .fs-bluf ul{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.95rem; }
.fs .fs-bluf li{
  font-size:.985rem; line-height:1.62; padding-left:1.5rem;
  position:relative; color:var(--mut);
}
.fs .fs-bluf li::before{
  content:""; position:absolute; left:0; top:.56em; width:6px; height:6px;
  border-radius:2px; background:var(--vio); transform:rotate(45deg);
  box-shadow:0 0 0 3px var(--vio-wash);
}

/* ── STAT RAIL (instrument band) ─────────────────────────────────────────── */
.fs .fs-rail{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  margin:2.4rem auto 3rem; box-shadow:var(--sh-md);
}
.fs .fs-rail .c{
  background:var(--surface); padding:1.35rem 1rem 1.2rem; text-align:center;
  position:relative; transition:background .3s ease;
}
.fs .fs-rail .c:hover{ background:var(--surface-2); }
.fs .fs-rail .n{
  display:block; font-family:var(--display); font-weight:400;
  font-size:2.5rem; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.fs .fs-rail .c.on .n{ color:var(--vio-soft); }
.fs .fs-rail .l{
  display:block; font-family:var(--mono); font-size:.635rem; font-weight:550;
  letter-spacing:.075em; text-transform:uppercase; color:var(--dim);
  margin-top:.6rem; line-height:1.45;
}

/* ── CAPABILITY MATRIX (instrument band) ─────────────────────────────────── */
/* The three tiers, as a graded instrument rather than three stacked cards.
   Severity is carried by the signal rail on the left, so the taxonomy is
   legible before a word is read. */
.fs .fs-matrix{ margin:2rem auto 2.6rem; display:grid; gap:.85rem; }
.fs .fs-tier{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.35rem;
  background:linear-gradient(120deg,var(--surface-2),var(--surface) 55%);
  border:1px solid var(--line); border-radius:14px;
  padding:1.4rem 1.6rem 1.4rem 1.35rem;
  box-shadow:var(--lift),var(--sh-sm);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease;
}
.fs .fs-tier:hover{ transform:translateY(-2px); box-shadow:var(--lift),var(--sh-md); }
.fs .fs-tier .sig{
  width:4px; border-radius:4px; background:var(--sig,var(--vio));
  transform-origin:top; box-shadow:0 0 16px -2px var(--sig,var(--vio));
}
.fs .fs-tier.t-safe{ --sig:var(--safe); } .fs .fs-tier.t-safe:hover{ border-color:var(--safe-line); }
.fs .fs-tier.t-caut{ --sig:var(--caut); } .fs .fs-tier.t-caut:hover{ border-color:var(--caut-line); }
.fs .fs-tier.t-mute{ --sig:var(--mute); } .fs .fs-tier.t-mute:hover{ border-color:var(--mute-line); }
.fs .fs-tier .hd{ display:flex; align-items:baseline; gap:.85rem; flex-wrap:wrap; margin-bottom:.5rem; }
.fs .fs-tier .nm{
  font-family:var(--display); font-size:1.5rem; font-weight:400;
  color:var(--ink); letter-spacing:-.015em; line-height:1.1;
}
.fs .fs-tier .bg{
  font-family:var(--mono); font-size:.6rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--sig); background:var(--sig-wash); border:1px solid var(--sig-line);
  border-radius:100px; padding:.26rem .68rem; white-space:nowrap;
}
.fs .fs-tier.t-safe .bg{ --sig-wash:var(--safe-wash); --sig-line:var(--safe-line); }
.fs .fs-tier.t-caut .bg{ --sig-wash:var(--caut-wash); --sig-line:var(--caut-line); }
.fs .fs-tier.t-mute .bg{ --sig-wash:var(--mute-wash); --sig-line:var(--mute-line); }
.fs .fs-tier p{ font-size:.945rem; line-height:1.62; margin:0; color:var(--mut); }
/* Verdict line: the one-sentence "so what" per tier, in mono. */
.fs .fs-tier .vd{
  margin-top:.85rem; padding-top:.8rem; border-top:1px dashed var(--line-2);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  color:var(--dim); line-height:1.6;
}
.fs .fs-tier .vd b{ color:var(--sig); font-weight:600; }
@media(max-width:640px){ .fs .fs-tier{ padding:1.2rem 1.1rem; gap:1rem; } }

/* ── DIAGNOSTIC GRID — the eight questions ───────────────────────────────── */
/* Two columns on desktop deliberately: this is a checklist to scan, not prose
   to read top-to-bottom, and a single column of eight is the listicle shape. */
.fs .fs-dx{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:.85rem; margin:1.8rem auto 2.6rem; counter-reset:dx;
}
.fs .fs-q{
  counter-increment:dx; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:1.3rem 1.35rem 1.25rem;
  box-shadow:var(--lift);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease;
}
.fs .fs-q::after{ /* top edge lights up on hover */
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--vio),transparent);
  opacity:0; transition:opacity .35s ease;
}
.fs .fs-q:hover{ transform:translateY(-3px); border-color:var(--vio-line); box-shadow:var(--lift),var(--sh-md); }
.fs .fs-q:hover::after{ opacity:1; }
.fs .fs-q h3{
  margin:0 0 .55rem; font-size:1.005rem; line-height:1.42;
  display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:start;
}
.fs .fs-q h3::before{
  content:counter(dx,decimal-leading-zero);
  font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.04em;
  color:var(--vio); background:var(--vio-wash); border:1px solid var(--vio-line);
  border-radius:7px; padding:.28rem .42rem; line-height:1;
  transition:background .3s ease,box-shadow .3s ease;
}
.fs .fs-q:hover h3::before{ background:var(--vio); color:#0a0a0e; box-shadow:0 0 18px -3px var(--vio); }
.fs .fs-q p{ font-size:.9rem; line-height:1.62; margin:0; color:var(--mut); }
/* The deep-detail layer: what a bad answer actually sounds like. */
.fs .fs-q .bad{
  margin-top:.8rem; padding-top:.72rem; border-top:1px dashed var(--line-2);
  font-family:var(--mono); font-size:.705rem; line-height:1.58; color:var(--dim);
}
.fs .fs-q .bad b{ color:var(--mute); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.92em; }

/* ── PULL QUOTE ──────────────────────────────────────────────────────────── */
.fs .fs-pull{ margin:2.8rem auto; padding:.2rem 0 .2rem 1.75rem; border-left:3px solid var(--vio); position:relative; }
.fs .fs-pull p{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,2.9vw,1.95rem); line-height:1.32;
  color:var(--ink); letter-spacing:-.014em; margin:0; text-wrap:pretty;
}
/* Gradient-clipped emphasis, matching the house .pq .hl treatment. */
.fs .fs-pull .hl{
  background:linear-gradient(92deg,var(--vio-soft),var(--safe));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-style:italic;
}
.fs .fs-pull cite{
  display:block; margin-top:.85rem; font-family:var(--mono); font-style:normal;
  font-size:.665rem; font-weight:550; letter-spacing:.11em; text-transform:uppercase; color:var(--dim);
}
.fs .fs-pull cite a{ color:var(--mut); }

/* ── SEQUENCE DIAGRAM (instrument band) ──────────────────────────────────── */
/* The uncertain-outcome failure mode, drawn. This is the one idea in the piece
   that is genuinely spatial: a message crosses, the reply does not come back,
   and the request is sent twice. Prose describes it; a diagram shows it. */
.fs .fs-seq{
  background:linear-gradient(165deg,var(--surface-2),var(--ground));
  border:1px solid var(--line); border-radius:18px;
  padding:1.9rem 1.7rem 1.5rem; margin:2.2rem auto 2.6rem;
  box-shadow:var(--lift),var(--sh-lg); overflow:hidden;
}
.fs .fs-seq .cap{
  font-family:var(--mono); font-size:.635rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.7rem;
}
.fs .fs-seq .cap::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent); }
.fs .fs-seq .scroll{ overflow-x:auto; overflow-y:hidden; margin-inline:-.3rem; padding-inline:.3rem; }
/* Below ~600px the diagram's mono labels would shrink past legibility if the
   SVG simply scaled. Scroll it in its own container instead, so the page body
   never scrolls sideways and the labels stay readable. */
.fs .fs-seq svg{ width:100%; min-width:540px; height:auto; display:block; overflow:visible; }
.fs .fs-seq .lgd{
  display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1.35rem;
  padding-top:1.1rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.665rem; letter-spacing:.05em; color:var(--dim);
}
.fs .fs-seq .lgd span{ display:inline-flex; align-items:center; gap:.5rem; }
.fs .fs-seq .lgd i{ width:16px; height:2px; border-radius:2px; background:currentColor; flex:none; }
.fs .fs-seq .lgd .ok{ color:var(--safe); } .fs .fs-seq .lgd .no{ color:var(--mute); } .fs .fs-seq .lgd .dup{ color:var(--caut); }

/* SVG internals */
.fs .fs-seq .lane{ stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 5; }
.fs .fs-seq .actor{ fill:var(--surface); stroke:var(--line-2); stroke-width:1; }
.fs .fs-seq .aname{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; fill:var(--mut); text-transform:uppercase; }
.fs .fs-seq .msg{ stroke-width:1.75; fill:none; stroke-linecap:round; }
.fs .fs-seq .msg.ok{ stroke:var(--safe); }
.fs .fs-seq .msg.no{ stroke:var(--mute); stroke-dasharray:5 5; }
.fs .fs-seq .msg.dup{ stroke:var(--caut); }
.fs .fs-seq .mlabel{ font-family:var(--mono); font-size:10.5px; letter-spacing:.045em; fill:var(--dim); }
.fs .fs-seq .mlabel.ok{ fill:var(--safe); } .fs .fs-seq .mlabel.no{ fill:var(--mute); } .fs .fs-seq .mlabel.dup{ fill:var(--caut); }
.fs .fs-seq .verdict{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; fill:var(--mute); }

/* ── CALLOUT ─────────────────────────────────────────────────────────────── */
.fs .fs-callout{
  background:linear-gradient(150deg,var(--caut-wash),transparent 70%);
  border:1px solid var(--caut-line); border-radius:14px;
  padding:1.45rem 1.6rem; margin:2.2rem auto; box-shadow:var(--lift);
}
.fs .fs-callout h3{
  margin:0 0 .6rem; color:var(--caut); font-size:1.06rem;
  font-family:var(--mono); font-weight:600; letter-spacing:.02em;
}
.fs .fs-callout p{ font-size:.945rem; margin:0 0 .8rem; color:var(--mut); }
.fs .fs-callout p:last-child{ margin:0; }

/* ── NOTE / SOURCES ──────────────────────────────────────────────────────── */
.fs .fs-note{
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:1.3rem 1.45rem; margin:2.2rem auto; font-size:.9rem; line-height:1.72;
  color:var(--mut); box-shadow:var(--lift);
}
.fs .fs-src{
  border-top:1px solid var(--line); margin:3.4rem auto 0; padding-top:1.7rem;
  font-size:.845rem; line-height:1.78; color:var(--dim);
}
.fs .fs-src b{ color:var(--mut); }

/* ── FAQ (disclosure, not a wall) ────────────────────────────────────────── */
.fs .fs-faq{ margin:1.5rem auto 2.4rem; display:grid; gap:.6rem; }
.fs .fs-faq details{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; box-shadow:var(--lift); transition:border-color .3s ease;
}
.fs .fs-faq details[open]{ border-color:var(--vio-line); }
.fs .fs-faq summary{
  cursor:pointer; list-style:none; padding:1rem 1.25rem;
  font-size:.985rem; font-weight:600; color:var(--ink); line-height:1.45;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:color .25s ease;
}
.fs .fs-faq summary::-webkit-details-marker{ display:none; }
.fs .fs-faq summary:hover{ color:var(--vio-soft); }
.fs .fs-faq summary::after{
  content:"+"; font-family:var(--mono); font-size:1.15rem; color:var(--vio);
  flex:none; transition:transform .3s cubic-bezier(.2,.8,.2,1); line-height:1;
}
.fs .fs-faq details[open] summary::after{ transform:rotate(45deg); }
.fs .fs-faq .a{ padding:0 1.25rem 1.15rem; font-size:.92rem; line-height:1.7; color:var(--mut); }

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.fs .fs-cta{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(150deg,var(--vio-deep),#3b2d9e 55%,var(--surface-2));
  border:1px solid var(--vio-line); border-radius:18px;
  padding:2.1rem 1.8rem; margin:3rem auto; box-shadow:var(--sh-lg);
}
.fs .fs-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
.fs .fs-cta h3{ position:relative; color:#fff; margin:0 0 .5rem; font-family:var(--display); font-weight:400; font-size:1.72rem; letter-spacing:-.015em; }
.fs .fs-cta p{ position:relative; color:rgba(255,255,255,.82); font-size:.945rem; max-width:460px; margin:0 auto 1.3rem; }
.fs .fs-cta form{ position:relative; display:flex; gap:.55rem; max-width:430px; margin:0 auto; flex-wrap:wrap; }
.fs .fs-cta input{
  flex:1; min-width:200px; padding:.78rem .95rem; border-radius:9px;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.28); color:#fff;
  font-family:var(--body); font-size:.92rem; transition:border-color .25s ease;
}
.fs .fs-cta input::placeholder{ color:rgba(255,255,255,.42); }
.fs .fs-cta input:focus{ outline:none; border-color:#fff; }
.fs .fs-cta button{
  padding:.78rem 1.35rem; border:0; border-radius:9px; background:#fff; color:var(--vio-deep);
  font-family:var(--body); font-weight:700; font-size:.92rem; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fs .fs-cta button:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(0,0,0,.6); }

/* ── PARTNER SLOT ────────────────────────────────────────────────────────── */
.fs .fs-partner{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--vio);
  border-radius:0 14px 14px 0; padding:1.45rem 1.6rem; margin:2.6rem auto 0;
  box-shadow:var(--lift);
}
.fs .fs-partner .lbl{
  font-family:var(--mono); font-size:.63rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vio); margin-bottom:.55rem;
}
.fs .fs-partner strong.hd{ display:block; font-size:1.1rem; color:var(--ink); line-height:1.35; margin-bottom:.55rem; font-weight:640; }
.fs .fs-partner p{ font-size:.9rem; color:var(--mut); margin:0 0 1.05rem; }
.fs .fs-partner .go{
  display:inline-block; background:var(--vio); color:#0a0a0e; font-weight:700;
  font-size:.875rem; padding:.62rem 1.2rem; border-radius:9px;
  background-image:none; padding-bottom:.62rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.fs .fs-partner .go:hover{ transform:translateY(-1px); color:#0a0a0e; background:var(--vio-soft); box-shadow:0 10px 24px -8px var(--vio-line); }

.fs code{
  font-family:var(--mono); font-size:.86em; color:var(--vio-soft);
  background:var(--vio-wash); border:1px solid var(--vio-line);
  border-radius:5px; padding:.1em .38em;
}

/* ── NAV ─────────────────────────────────────────────────────────────────────
   site_engine.js injects `.nav-brand` / `.nav-left` / `.nav-cta` into
   #site-header, but those classes are defined ONLY in styles.css, which a
   flagship article does not link (it is a light-theme design system and would
   fight the dark ground). Result before this block: the wordmark fell back to a
   raw <a> — Times New Roman, #0000EE link blue. Styling it here keeps the
   flagship page self-sufficient and dark-native.
   Scoped to #site-header so it cannot touch any page that DOES load styles.css. */
#site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,14,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
  font-family:var(--body);
}
#site-header nav{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  max-width:var(--band); margin:0 auto; padding:.85rem 22px; gap:1rem;
  border-bottom:0;
}
/* Wordmark. No dark pill — a dark pill on a dark ground is invisible, which is
   how the original light-theme treatment would have failed here anyway. */
#site-header .nav-brand{
  justify-self:center; text-decoration:none; white-space:nowrap;
  font-family:var(--body); font-size:1.18rem; font-weight:700;
  letter-spacing:-.03em; color:var(--ink);
  background:none; padding:0; border-radius:0;
  transition:opacity .25s ease;
}
#site-header .nav-brand span{
  background:linear-gradient(92deg,var(--vio-soft),var(--safe));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
#site-header .nav-brand:hover{ opacity:.85; }

#site-header .nav-left{ display:flex; align-items:center; gap:1.45rem; min-width:0; }
#site-header .nav-left a{
  position:relative; text-decoration:none; white-space:nowrap;
  font-size:.815rem; font-weight:500; color:var(--mut);
  transition:color .25s ease;
}
#site-header .nav-left a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1.5px;
  background:var(--vio); transform:scaleX(0); transform-origin:right;
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
#site-header .nav-left a:hover{ color:var(--ink); }
#site-header .nav-left a:hover::after{ transform:scaleX(1); transform-origin:left; }

#site-header .nav-right{ display:flex; align-items:center; justify-content:flex-end; gap:1rem; }
#site-header .nav-cta{
  text-decoration:none; white-space:nowrap;
  font-size:.815rem; font-weight:650; color:#0a0a0e;
  background:var(--vio); border:1px solid var(--vio-soft);
  padding:.46rem 1.15rem; border-radius:9px;
  box-shadow:0 6px 18px -8px var(--vio-line), var(--lift);
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
}
#site-header .nav-cta:hover{
  background:var(--vio-soft); transform:translateY(-1px);
  box-shadow:0 10px 26px -8px rgba(139,124,255,.55);
}
#site-header a:focus-visible{ outline:2px solid var(--vio); outline-offset:3px; border-radius:4px; }

/* Below ~860px the three-column grid cannot hold. Drop to brand + CTA and let
   the section links scroll on their own row rather than wrapping or vanishing. */
@media(max-width:860px){
  #site-header nav{ grid-template-columns:1fr auto; row-gap:.6rem; padding:.7rem 17px; }
  #site-header .nav-brand{ justify-self:start; order:1; }
  #site-header .nav-right{ order:2; }
  #site-header .nav-left{
    order:3; grid-column:1/-1; gap:1.15rem;
    overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
  }
  #site-header .nav-left::-webkit-scrollbar{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  #site-header *{ transition:none!important; }
}

/* ── READING PROGRESS ────────────────────────────────────────────────────── */
.fs-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:60; background:transparent; }
.fs-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--vio-deep,#6d5aef),#8b7cff,#34d399);
  box-shadow:0 0 12px -1px rgba(139,124,255,.8);
}

/* ── FOOTER + INJECTED BLOCKS ────────────────────────────────────────────────
   Same root cause as the nav: site_engine.js injects .footer-links / .footer-logo
   etc, but those are defined only in styles.css, which a flagship page does not
   link. Unstyled, the footer rendered as Times New Roman with raw <ul> bullets
   and default blue underlined links. */
#site-footer{
  font-family:var(--body); color:var(--mut); font-size:.875rem; line-height:1.7;
  border-top:1px solid var(--line); margin-top:3rem; padding:2.5rem 22px 3.5rem;
  background:linear-gradient(180deg,transparent,rgba(139,124,255,.035));
}
#site-footer > footer{ max-width:var(--band); margin:0 auto; }
#site-footer .footer-logo{
  display:inline-block; font-weight:700; font-size:1.05rem; letter-spacing:-.03em;
  color:var(--ink); text-decoration:none; margin-bottom:1.1rem;
}
#site-footer .footer-links{
  list-style:none; padding:0; margin:0 0 1.4rem;
  display:flex; flex-wrap:wrap; gap:.55rem 1.35rem;
}
#site-footer .footer-links li{ list-style:none; }
#site-footer a{ color:var(--mut); text-decoration:none; transition:color .25s ease; }
#site-footer a:hover{ color:var(--vio-soft); }
#site-footer .footer-disclosure,#site-footer .footer-note{
  font-size:.8rem; color:var(--dim); max-width:70ch; margin:0 0 .8rem;
}
#site-footer .footer-disclosure a{ color:var(--vio-soft); }
/* The network row rendered as one unbroken run of link text with no separators. */
#site-footer .footer-network{
  font-size:.78rem; color:var(--dim); margin-top:1.3rem;
  padding-top:1.2rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:baseline;
}
#site-footer .footer-network a{ color:var(--mut); white-space:nowrap; }
#site-footer .lattice-frame-bar{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1.2rem; margin-bottom:1.8rem; color:var(--mut);
  font-size:.8rem; box-shadow:var(--lift);
}
#site-footer .lattice-frame-bar a{ color:var(--vio-soft); }

/* _worker.js injects a "From our network" promo with INLINE styles
   (background:#f0fdf4), which lands as a mint-white card on a near-black page.
   Inline styles beat stylesheets, so this override needs !important. Targeted by
   the colour in the style attribute so it cannot hit anything else. */
div[style*="f0fdf4"]{
  background:var(--surface,#131319)!important;
  border-left-color:var(--safe,#34d399)!important;
  border-radius:12px!important;
}
div[style*="f0fdf4"] p{ color:var(--safe,#34d399)!important; }
div[style*="f0fdf4"] a{ color:var(--mut,#a8a8b3)!important; }
div[style*="f0fdf4"] a:hover{ color:var(--ink,#f6f6f7)!important; }

/* ── MOTION ──────────────────────────────────────────────────────────────── */
/* Load sequence: a short orchestrated stagger, then scroll-reveal takes over.
   .fs-r elements are revealed by IntersectionObserver adding .in. */
.fs .fs-r{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.fs .fs-r.in{ opacity:1; transform:none; }
.fs .fs-tier .sig{ transform:scaleY(0); transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.fs .fs-r.in .sig, .fs .fs-tier.in .sig{ transform:scaleY(1); }

.fs-lo{ opacity:0; transform:translateY(20px); animation:fsIn .85s cubic-bezier(.2,.8,.2,1) forwards; }
.fs-lo-1{ animation-delay:.05s } .fs-lo-2{ animation-delay:.16s } .fs-lo-3{ animation-delay:.27s }
.fs-lo-4{ animation-delay:.38s } .fs-lo-5{ animation-delay:.49s }
@keyframes fsIn{ to{ opacity:1; transform:none; } }

/* Sequence-diagram packet animation, gated on .play so it starts on reveal. */
.fs .fs-seq .draw{ stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400); }
.fs .fs-seq.play .draw{ animation:fsDraw 1s cubic-bezier(.3,.7,.3,1) forwards; }
.fs .fs-seq.play .d2{ animation-delay:.9s } .fs .fs-seq.play .d3{ animation-delay:1.8s } .fs .fs-seq.play .d4{ animation-delay:2.7s }
@keyframes fsDraw{ to{ stroke-dashoffset:0; } }
.fs .fs-seq .fade{ opacity:0; }
.fs .fs-seq.play .fade{ animation:fsFade .6s ease forwards; }
.fs .fs-seq.play .f1{ animation-delay:.85s } .fs .fs-seq.play .f2{ animation-delay:1.75s }
.fs .fs-seq.play .f3{ animation-delay:2.65s } .fs .fs-seq.play .f4{ animation-delay:3.5s }
@keyframes fsFade{ to{ opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .fs *,.fs-lo,.fs .fs-r{ animation:none!important; transition:none!important; }
  .fs .fs-r,.fs-lo,.fs .fs-seq .fade{ opacity:1!important; transform:none!important; }
  .fs .fs-seq .draw{ stroke-dashoffset:0!important; }
  .fs .fs-tier .sig{ transform:scaleY(1)!important; }
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:720px){
  .fs{ font-size:16.5px; padding:0 17px 64px; }
  .fs .fs-bluf,.fs .fs-seq{ padding:1.35rem 1.15rem; }
  .fs .fs-rail .n{ font-size:2.1rem; }
  .fs .fs-cta{ padding:1.6rem 1.15rem; }
}