/* ==========================================================================
   03 · SECURITYREVIEW — soul
   Standalone "Trace family" system, ported from the approved full-page
   mockup (attest-full-mockup.html) — this is the reference shell the other
   three tools' mockups describe themselves as matching. Deliberately NOT
   built on indivesta-spine.css — this page defines its own complete
   reset/nav/footer, and its class names (.btn, .hero, .section) collide
   with the spine's, so the two stylesheets must not be loaded together.

   Self-hosted Outfit/Inter/JetBrains Mono replace the mockup's Google Fonts
   CDN link. Inter + JetBrains Mono files already existed in /assets/fonts/
   unused by any stylesheet; Outfit did not exist at all and was added here.
   FIX: the mockup's own CSS referenced var(--font-mono) (in .marquee-track
   span) without ever defining the token or loading the font — declared
   here, matching the "shared across all four" font list from spec.

   Live Oak IT palette. Non-negotiable: teal (#60ADB1) and yellow (#E4E270)
   both fail badly as small text/thin borders on the light background —
   every use on #E4F1F1 is a bold fill with --hero-ink text on top, never
   standalone text or a hairline border. On the dark footer, teal works
   fine as text (5.54:1) — that's the one correct exception, already so
   below.

   PLACEHOLDER PHOTOS: the 8 real photos (attest-photos/*.png) were not
   supplied with the mockup. .photo-placeholder stands in for each slot,
   labelled with the expected real filename via data-photo, so swapping in
   the real images later is a one-line change (replace the placeholder div
   with <img src="media/photo-*.png" alt="">).
   ========================================================================== */

/* ---------- Self-hosted faces ------------------------------------------- */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/outfit-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/outfit-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');}

:root{
  --dark-bg:      #1B2D2F; /* Live Oak ink */
  --dark-surface: #142224;
  --light-text:   #ffffff;
  --gray-text:    #60ADB1; /* teal reads great on the dark footer (5.54:1) */
  --light-bg:     #E4F1F1;
  --light-surface:#E4F1F1;
  --blue-900:     #1B2D2F;
  --blue-500:     #60ADB1;

  --shader-1: 228,241,241;
  --shader-2: 96,173,177;
  --shader-hi:228,226,112;

  /* hero-only recolor — Live Oak IT palette: #E4F1F1 / #60ADB1 (teal) /
     #E4E270 (yellow) / #1B2D2F (ink). Both teal and yellow fail badly as
     small text on this light background (2.24:1 and 1.18:1) — same
     situation as Nimbl's green on FunderReport. Used as bold fills with ink text
     on top instead (ink-on-teal 5.54:1, ink-on-yellow 10.53:1), never as
     standalone text or thin borders on the light sections. */
  --hero-bg-1:     #E4F1F1;
  --hero-bg-2:     #60ADB1;
  --hero-accent:   #60ADB1;
  --hero-highlight:#E4E270;
  --hero-ink:      #1B2D2F;
  --hero-muted:    rgba(27,45,47,0.7); /* ink at 70% — clears ~7:1 on E4F1F1 */

  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --ease-out:  cubic-bezier(0,0,0.2,1);
  --ease-sig:  cubic-bezier(0.16,1,0.3,1);
  --dur:       0.8s;
  --stagger:   0.2s;

  --container: 1200px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--font-body); color:var(--dark-bg); background:var(--light-bg); font-weight:400; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--font-display); margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--dark-bg); outline-offset:3px; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
@media (min-width:768px){ .container{ padding:0 48px; } }
@media (min-width:1024px){ .container{ padding:0 96px; } }
.section{ padding:96px 0; }
@media (min-width:768px){ .section{ padding:128px 0; } }
.eyebrow{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--hero-muted); font-weight:500; }
.section-title{ font-size:clamp(2.25rem, 5vw, 3.75rem); font-weight:600; line-height:1.08; letter-spacing:-.01em; }
.body-lg{ font-size:clamp(0.875rem, 1vw + .5rem, 1.125rem); line-height:1.65; color:#52525b; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------------------------------------------------------------------- */
/* NAVBAR — absolute, mix-blend-difference white text                     */
/* ---------------------------------------------------------------------- */
/* Anchored to the top of the hero, not to the hero's flex alignment. .hero is
   display:flex + align-items:center, and a flex container gives its absolutely
   positioned children a *static* position taken from that alignment. So any time
   this bar is laid out from its static position instead of from its own offsets,
   it lands in the vertical centre of a hero that is taller than the screen —
   i.e. the header appears halfway down the page. `bottom:auto` states the box
   explicitly and `align-self:flex-start` makes the top the answer in the
   fallback case too. Neither changes how the bar looks when all is well. */
.navbar{
  position:fixed; top:0; bottom:auto; left:0; right:0; align-self:flex-start; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 24px; mix-blend-mode:difference;
  transition:padding .25s var(--ease-out), background .25s var(--ease-out);
}
/* The menu used to live inside the hero and scroll away with it, which left every
   section below — How to use, Before / After — with no way back. It is fixed now.
   Over the hero it keeps the difference blend that gave it its contrast; past the
   hero the blend is dropped for a paper bar, because difference over the light
   sections and the walkthrough console is unreadable. `is-stuck` is set by a
   polled scroll read, not a scroll listener: this codebase has been bitten by
   scroll events that never fire. */
/* Colours are this page's own. There is no global --ink/--line/--accent here —
   those three are scoped to #atStage — so the stuck bar takes --dark-bg for ink
   and #e5e7eb for the hairline, the same pair .subnav, .doc-tile and .acc-item
   already use on the light sections. No hover colour is set: the palette's teal
   (#60ADB1) is 2.24:1 on white and this sheet's header rules it out as text,
   and .nav-links a already hovers .85 -> 1 opacity. */
.navbar.is-stuck{
  mix-blend-mode:normal;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid #e5e7eb;
  padding-top:16px; padding-bottom:16px;
}
.navbar.is-stuck .mark,
.navbar.is-stuck .nav-links a{ color:var(--dark-bg); }
.navbar.is-stuck .hamburger span{ background:var(--dark-bg); }
@media (min-width:768px){ .navbar.is-stuck{ padding-top:18px; padding-bottom:18px; } }
/* anchor jumps have to clear the fixed bar */
html{ scroll-padding-top:96px; }
@media (min-width:768px){ .navbar{ padding:30px 48px; } }
.navbar .mark{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:15px; color:#fff; letter-spacing:.01em; }
.navbar .mark svg{ width:20px; height:20px; }
.nav-links{ display:none; align-items:center; gap:32px; font-size:13.5px; color:#fff; }
@media (min-width:900px){ .nav-links{ display:flex; } }
.nav-links a{ opacity:.85; }
.nav-links a:hover{ opacity:1; }
.nav-links .brand{ font-weight:700; letter-spacing:.02em; opacity:1; }
.hamburger{ display:flex; flex-direction:column; gap:5px; width:26px; background:none; border:0; cursor:pointer; padding:6px; }
@media (min-width:900px){ .hamburger{ display:none; } }
.hamburger span{ height:2px; background:#fff; border-radius:2px; }

.mobile-overlay{
  position:fixed; inset:0; background:var(--dark-bg); z-index:100;
  display:flex; flex-direction:column; justify-content:center; gap:28px; padding:48px 32px;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease-sig);
}
.mobile-overlay.open{ opacity:1; pointer-events:auto; }
.mobile-overlay a{ color:#fff; font-family:var(--font-display); font-size:36px; font-weight:600; }
.mobile-overlay .close{ position:absolute; top:26px; right:24px; background:none; border:0; color:#fff; font-size:28px; cursor:pointer; }

/* ---------------------------------------------------------------------- */
/* HERO — 100vh, CSS-gradient only (no canvas/WebGL), headline micro-      */
/* interaction, parallax, rotating circular badge.                        */
/* ---------------------------------------------------------------------- */
.hero{ position:relative; min-height:100vh; background:var(--hero-bg-1); overflow:hidden; display:flex; align-items:center; }
.hero-fallback{ position:absolute; inset:0; background:
  radial-gradient(ellipse at 88% 15%, rgba(96,173,177,.4), transparent 55%),
  radial-gradient(ellipse at 92% 90%, rgba(228,226,112,.35), transparent 50%),
  #E4F1F1; }

.hero-inner{ position:relative; z-index:10; width:100%; padding:120px 24px 64px; }
@media (min-width:768px){ .hero-inner{ padding:96px 48px 40px; } }
/* The menu is fixed to the top of the window, so it is painted over whatever
   is beneath it. The hero used to rely on being taller than its content and
   centring it clear of the bar; when the headline and the lede together run
   past 100vh the content starts at the very top instead and the first line
   comes out through the menu. This padding is the bar's own height, so the
   headline clears it whether the hero is centring or overflowing. */
.hero-content{ max-width:820px; }

.hero-eyebrow{ font-family:var(--font-body); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--hero-muted); margin-bottom:22px; }

.hero-headline{
  font-family:var(--font-display); font-weight:600; color:var(--hero-ink);
  font-size:clamp(3rem, 8vw, 6.25rem);
  line-height:1.1; letter-spacing:-.02em; margin:0 0 8px;
}
.hero-headline .accent-line-wrap{ position:relative; display:inline-block; }
.hero-headline .accent-line{
  position:absolute; left:0; bottom:-.14em; height:.09em; border-radius:0 999px 999px 0;
  background:linear-gradient(90deg, var(--hero-accent), var(--hero-highlight));
  width:0; transform-origin:left center;
}

.hero-sub{ margin-top:26px; max-width:520px; font-size:clamp(.9rem,1vw + .55rem,1.125rem); line-height:1.65; color:var(--hero-muted); }
.hero-sub b{ color:var(--hero-ink); font-weight:600; }

.hero-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.hero-tag{ margin-top:14px; font-size:12px; color:var(--hero-muted); }
.btn{ font-size:14.5px; font-weight:500; padding:13px 24px; border-radius:999px; cursor:pointer; border:1px solid transparent; display:inline-block; transition:transform .3s var(--ease-out), background .3s, border-color .3s; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--hero-ink); color:#fff; }
.btn-primary:hover{ background:var(--hero-accent); color:var(--hero-ink); }
.btn-outline{ background:transparent; color:var(--hero-ink); border-color:rgba(27,45,47,.3); }
.btn-outline:hover{ border-color:var(--hero-ink); }
.btn-dark{ background:var(--dark-bg); color:#fff; }
.btn-dark:hover{ background:var(--blue-900); }

.hero-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:56px; max-width:560px; background:rgba(96,173,177,.25); border:1px solid rgba(96,173,177,.25); border-radius:12px; overflow:hidden; }
@media (min-width:640px){ .hero-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.hero-stat{ background:rgba(255,255,255,.55); padding:16px 18px; }
.hero-stat .n{ font-family:var(--font-display); font-weight:600; font-size:28px; color:var(--hero-ink); }
.hero-stat .n.amber{ color:var(--hero-ink); }
.hero-stat .l{ margin-top:4px; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--hero-muted); }

/* rotating circular badge, bottom right */
.badge{ position:absolute; right:24px; bottom:28px; width:120px; height:120px; z-index:10; }
@media (min-width:768px){ .badge{ right:48px; bottom:40px; width:140px; height:140px; } }
.badge .ring{ width:100%; height:100%; animation:spin 10s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.badge .center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.badge .center svg{ width:26px; height:26px; color:var(--hero-ink); }

[data-parallax]{ will-change:transform; }

/* ---------------------------------------------------------------------- */
/* IN-PAGE SUBNAV — sticky, scrollspy.                                    */
/* ---------------------------------------------------------------------- */
.subnav{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid #e5e7eb; }
.subnav-row{ display:flex; gap:28px; padding:14px 24px; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; }
@media (min-width:768px){ .subnav-row{ padding:14px 48px; } }
.subnav-row a{ color:#a1a1aa; padding-bottom:3px; border-bottom:2px solid transparent; transition:color .25s; }
.subnav-row a.active{ color:var(--dark-bg); border-color:var(--dark-bg); }

/* ---------------------------------------------------------------------- */
/* "What SecurityReview will not do", white/black, 4-col.                  */
/* ---------------------------------------------------------------------- */
.wontdo{ background:var(--light-bg); }
.wontdo-head{ max-width:640px; margin-bottom:56px; }
.wontdo-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:#e5e7eb; border:1px solid #e5e7eb; }
@media (min-width:640px){ .wontdo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .wontdo-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.wontdo-card{ background:#fff; padding:28px 24px; opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.wontdo-card svg{ width:24px; height:24px; color:var(--dark-bg); margin-bottom:18px; }
.wontdo-card h3{ font-size:16px; font-weight:600; margin-bottom:8px; }
.wontdo-card p{ font-size:14px; line-height:1.55; color:var(--hero-muted); }

/* ---------------------------------------------------------------------- */
/* ABOUT MASONRY PARALLAX — Evidence Library.                             */
/* ---------------------------------------------------------------------- */
.evidence{ background:var(--light-surface); }
.evidence .grid{ display:flex; flex-direction:column; gap:48px; }
@media (min-width:768px){ .evidence .grid{ flex-direction:row; align-items:flex-start; gap:64px; } }
.evidence .sticky-col{ flex:1; }
@media (min-width:768px){ .evidence .sticky-col{ position:sticky; top:88px; } }
.evidence .sticky-col h2{ margin-bottom:20px; }
.evidence .sticky-col p{ margin-bottom:14px; }
.evidence .masonry{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.doc-tile{ position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:22px 18px; overflow:hidden; min-height:190px; display:flex; align-items:flex-end; }
.doc-tile.large{ grid-column:1 / 2; grid-row:1 / 3; padding:26px 20px; min-height:280px; }
.doc-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.doc-tile .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(27,45,47,0) 40%, rgba(27,45,47,.85) 100%); z-index:1; }
.doc-tile .tile-text{ position:relative; z-index:2; }
.doc-tile .tag{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#e4e4e7; margin-bottom:8px; }
.doc-tile .name{ font-family:var(--font-display); font-weight:600; font-size:17px; color:#fff; }
.doc-tile .meta{ margin-top:8px; font-size:12.5px; color:#d4d4d8; }

/* photo placeholder — stands in for the 8 real photos not yet supplied */
.photo-placeholder{
  width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg, rgba(96,173,177,.22) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, rgba(228,241,241,.95), rgba(96,173,177,.4));
  display:flex; align-items:flex-end;
}
.photo-placeholder::after{
  content: attr(data-photo);
  margin:10px; padding:4px 8px; border:1px dashed rgba(27,45,47,.4); border-radius:6px;
  font-family:var(--font-mono); font-size:10px; color:var(--hero-ink); background:rgba(255,255,255,.72);
}

/* ---------------------------------------------------------------------- */
/* HOW TO USE — the tool itself, running in the page.                      */
/* The stack of five description cards that used to live here (.stage +    */
/* .step-card, built in attest.js) has been replaced by #atStage: the real */
/* Collect > Process > Review > Approve > Export flow, built from data.js  */
/* and table.js and driven by IND.walkthrough.                             */
/* The walkthrough's own furniture — the one-screen cap, the narration     */
/* band, the ghost cursor and the Manual / Auto Play controls — comes from */
/* /assets/css/walkthrough.css and is NOT restated here. That file takes   */
/* its palette from the --wt-c-* variables mapped below.                   */
/* ---------------------------------------------------------------------- */
.howto{ background:var(--light-bg); }
.howto-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:40px; flex-wrap:wrap; gap:16px; }

/* The console keeps the tool's own visual grammar, so a panel, a source chip,
   a confidence dot and an answer row read the same here as in tool.html. The
   .at-* rules at the foot of this file are written against the spine's tokens
   and the spine stylesheet must never load beside this one (see the file
   header), so those tokens are declared here instead — scoped to the console,
   and remapped to the Live Oak palette.

   Two deliberate departures from the brand colours, for the reason set out in
   the header: teal #60ADB1 and yellow #E4E270 are both unreadable as small
   text on a light ground (2.24:1 and 1.18:1), and this console is nothing but
   small text. --accent is a darkened teal (#2E6B70) and --amber a dark ochre
   (#7D5210) — the same two roles, legible at 13px. */
#atStage{
  --ink:#1B2D2F; --paper:#F1F8F8; --card:#FFFFFF;
  --muted:#3E5658; --faint:#5C7375;
  --line:#CEE0E0; --line-soft:#E3EDED;
  --surface:#EFF7F7; --surface-2:#E4F1F1;
  --accent:#2E6B70; --accent-rgb:46,107,112;
  --amber:#7D5210; --amber-rgb:180,118,26;
  --green:#456A4A; --red:#8C3527;
  --radius:12px; --radius-sm:7px;
  --t-small:13px; --t-micro:11px;

  /* what /assets/css/walkthrough.css reads */
  --wt-c-ink:var(--ink); --wt-c-paper:var(--card); --wt-c-line:var(--line);
  --wt-c-muted:var(--muted); --wt-c-accent:var(--accent);
  --wt-c-accent-rgb:var(--accent-rgb); --wt-c-mono:var(--font-mono);

  position:relative; color:var(--ink); font-family:var(--font-body); font-size:var(--t-small);
  background:var(--paper); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(27,45,47,.28);
}

/* ---- shared primitives, scoped so nothing leaks onto the page ---- */
#atStage .label{ font-family:var(--font-mono); font-size:var(--t-micro); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
#atStage .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
#atStage .cluster{ display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
#atStage .is-hidden{ display:none !important; }

#atStage .panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
#atStage .panel__head{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .75rem; padding:.6rem .85rem; border-bottom:1px solid var(--line); background:var(--surface); }
#atStage .panel__head .label{ color:var(--muted); }
#atStage .panel__body{ padding:.85rem; }

#atStage .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.62rem 1.05rem; border-radius:var(--radius-sm);
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-family:var(--font-body); font-size:var(--t-small); font-weight:500; letter-spacing:.01em;
  cursor:pointer; transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
#atStage .btn:hover{ transform:none; }
#atStage .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
#atStage .btn--ghost:hover{ border-color:var(--ink); }
#atStage .btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; }
#atStage .btn.is-done{ background:var(--accent); border-color:var(--accent); color:#fff; }
#atStage .btn[disabled]{ cursor:not-allowed; background:var(--surface-2); border-color:var(--line); color:var(--faint); }

#atStage .chip{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:var(--t-micro); padding:.16rem .44rem; border-radius:4px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line-soft); white-space:nowrap; }
#atStage .chip--src{ background:rgba(var(--accent-rgb),.09); border-color:rgba(var(--accent-rgb),.28); color:var(--accent); }
#atStage .chip--none{ background:rgba(var(--amber-rgb),.13); border-color:rgba(var(--amber-rgb),.36); color:var(--amber); }
#atStage .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; flex:none; }
#atStage .dot--hi{ background:var(--green); }
#atStage .dot--lo{ background:var(--amber); }
#atStage .dot--none{ background:transparent; border:1.5px solid var(--amber); }

#atStage .flag{ display:flex; gap:.55rem; align-items:flex-start; font-size:var(--t-small); line-height:1.5; padding:.6rem .7rem; border-radius:var(--radius-sm); background:rgba(var(--amber-rgb),.1); border:1px solid rgba(var(--amber-rgb),.3); color:var(--amber); }
#atStage .flag__mark{ font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; padding-top:.14rem; flex:none; }
#atStage .flag strong{ color:var(--ink); }

#atStage .tbl__scroll{ max-height:var(--tbl-h,420px); overflow:auto; }

#atStage .signoff{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; padding:.9rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
#atStage .signoff__check{ display:flex; gap:.6rem; align-items:flex-start; cursor:pointer; font-size:var(--t-small); line-height:1.5; color:var(--muted); max-width:46ch; }
#atStage .signoff__check input{ margin-top:.28rem; accent-color:var(--accent); width:15px; height:15px; flex:none; cursor:pointer; }
#atStage .signoff__who{ font-family:var(--font-mono); font-size:var(--t-micro); color:var(--faint); margin-left:auto; text-align:right; line-height:1.5; }

#atStage .audit{ list-style:none; margin:0; padding:0; font-family:var(--font-mono); font-size:var(--t-micro); }
#atStage .audit li{ display:flex; gap:.7rem; padding:.4rem 0; border-bottom:1px dashed var(--line-soft); color:var(--muted); line-height:1.5; }
#atStage .audit li:last-child{ border-bottom:0; }
#atStage .audit time{ color:var(--faint); flex:none; }
#atStage .audit b{ font-weight:600; color:var(--ink); }
#atStage .audit__empty{ color:var(--faint); }

#atStage .toggle{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
#atStage .toggle input{ position:absolute; opacity:0; width:0; height:0; }
#atStage .toggle__track{ width:34px; height:19px; border-radius:19px; background:var(--surface-2); border:1px solid var(--line); position:relative; flex:none; transition:background-color .18s ease, border-color .18s ease; }
#atStage .toggle__track::after{ content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--faint); transition:left .18s ease, background-color .18s ease; }
#atStage .toggle input:checked + .toggle__track{ background:rgba(var(--accent-rgb),.18); border-color:rgba(var(--accent-rgb),.42); }
#atStage .toggle input:checked + .toggle__track::after{ left:16px; background:var(--accent); }

#atStage .wb__stat{ display:flex; gap:1.1rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:var(--t-micro); color:var(--faint); }
#atStage .wb__state{ font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
#atStage .wb__note{ font-size:var(--t-small); line-height:1.55; color:var(--faint); max-width:64ch; }

/* ---- the five-stage contract strip, as IND.contract builds it ---- */
#atStage .contract{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
#atStage .contract__step{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); padding:.3rem .55rem; border-radius:4px; border:1px solid transparent;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}
#atStage .contract__step[data-done="1"]{ color:var(--muted); }
#atStage .contract__step[aria-current="step"]{ color:var(--ink); background:var(--card); border-color:var(--line); }
#atStage .contract__step i{ width:5px; height:5px; border-radius:50%; background:var(--line); flex:none; }
#atStage .contract__step[data-done="1"] i{ background:var(--green); }
#atStage .contract__step[aria-current="step"] i{ background:var(--accent); }
#atStage .contract__arrow{ color:var(--line); font-family:var(--font-mono); font-size:var(--t-micro); }

/* ---- the console's own furniture ---- */
.sr-topbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--surface); }
.sr-who{ margin-left:auto; font-family:var(--font-mono); font-size:var(--t-micro); line-height:1.55; color:var(--faint); text-align:right; }
.sr-who b{ color:var(--ink); font-weight:600; }
.sr-badge{ margin-left:7px; padding:1px 7px; border:1px solid var(--line); border-radius:20px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle; }
.sr-walk{ padding:14px 18px 0; }
.sr-body{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:14px 18px 20px; }
@media (min-width:900px){ .sr-body{ grid-template-columns:19rem minmax(0,1fr); gap:16px; } }
.sr-side,.sr-main{ display:grid; gap:14px; align-content:start; min-width:0; }
.sr-approved{ margin:0; font-family:var(--font-mono); font-size:var(--t-micro); color:var(--green); }
.sr-caption{ margin:20px 0 0; text-align:center; font-size:13.5px; color:var(--hero-muted); }
.sr-caption a{ color:var(--hero-ink); text-decoration:underline; text-underline-offset:2px; }

/* ---- inside the capped walkthrough console ----
   .sr-main is one long column that ends in the sign-off and the export panel,
   with the answer table in the middle of it carrying a fixed --tbl-h. Left
   alone that table keeps its 30rem inside a pane with less than that to give
   and pushes the sign-off out of reach, so under the cap it flexes instead:
   it takes whatever height is left over and scrolls its own rows. */
@media (min-width:900px){
  #atStage.wt-console--fit .sr-main{ display:flex; flex-direction:column; gap:14px; }
  /* min-height:0 let this collapse below its own filter row: the answer table came
     out as a 121px slot with the filters sliced in half and two rows showing. It
     keeps a floor now and .sr-main scrolls past it, which is legible where a
     half-drawn control is not. */
  #atStage.wt-console--fit #atTable{ flex:1 1 auto; display:flex; flex-direction:column; min-height:17rem; }
  #atStage.wt-console--fit #atTable .panel__head,
  #atStage.wt-console--fit #atTable .at-filters{ flex:none; }
  #atStage.wt-console--fit #atTable .tbl__scroll{ flex:1 1 auto; min-height:8rem; max-height:none; }
  /* The left column is a grid of panels, and .panel is overflow:hidden. Squeezed
     into a pane shorter than they need, the grid's auto rows shrank and each panel
     quietly cut its own content off — no scrollbar, no way to reach the rest, four
     postage stamps where the evidence library and the audit should be. Rows keep
     their content height now, and the column scrolls as one thing, which is what
     the pane's own scroller was always for. */
  #atStage.wt-console--fit .sr-side{ grid-auto-rows:max-content; }
  #atStage.wt-console--fit .sr-side > .panel{ overflow:visible; }
  /* the chrome above the tool was taking a quarter of the capped height */
  #atStage.wt-console--fit .sr-walk{ padding-top:10px; }
  #atStage.wt-console--fit .sr-body{ padding-top:10px; padding-bottom:14px; }
}
@media (max-width:899px){
  /* no cap on phones: the page scrolls, and the table keeps a sane height of
     its own rather than 30rem of rows between the filters and the sign-off. */
  #atStage .tbl__scroll{ max-height:22rem; }
}

/* ---------------------------------------------------------------------- */
/* BEFORE / AFTER — real before/after framing + marquee + accordion       */
/* ---------------------------------------------------------------------- */
.ba{ background:var(--light-surface); }
.ba-compare{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:#e5e7eb; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; margin-bottom:80px; }
@media (min-width:768px){ .ba-compare{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.ba-col{ background:#fff; padding:40px 32px; }
.ba-col.before{ background:#fcfaf8; }
.ba-col .tag{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; margin-bottom:14px; }
.ba-col h3{ font-size:22px; font-weight:600; margin-bottom:14px; }
.ba-col p{ font-size:14.5px; line-height:1.65; color:#52525b; margin-bottom:10px; }
.ba-col .big{ font-family:var(--font-display); font-size:44px; font-weight:600; margin:14px 0 6px; }
.ba-col.after .big{ color:var(--dark-bg); }

/* marquee — real evidence-doc list */
.marquee-wrap{ overflow:hidden; padding:32px 0 64px; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; }
.marquee-track{ display:flex; white-space:nowrap; width:max-content; animation:marquee 34s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-track span{
  font-family:var(--font-mono); font-weight:500; font-size:clamp(1.1rem,2.4vw,1.75rem);
  padding:0 28px; color:#1B2D2F; letter-spacing:.02em;
}

/* accordion — "why nine stay blank" */
.accordion{ max-width:760px; margin:0 auto; }
.acc-item{ border-bottom:1px solid #e5e7eb; }
.acc-trigger{ width:100%; background:none; border:0; padding:24px 4px; display:flex; justify-content:space-between; align-items:center; text-align:left; cursor:pointer; font-family:var(--font-display); font-size:18px; font-weight:500; }
.acc-trigger .plus{ transition:transform .35s var(--ease-sig); flex:none; }
.acc-item.open .acc-trigger .plus{ transform:rotate(45deg); }
.acc-panel{ height:0; overflow:hidden; transition:height .4s var(--ease-sig); }
.acc-panel-inner{ padding:0 4px 24px; font-size:14.5px; line-height:1.7; color:#52525b; }
.acc-flag{ margin-top:10px; padding:10px 12px; border:1px dashed #d4d4d8; border-radius:8px; font-size:12px; color:#9ca3af; }

/* ---------------------------------------------------------------------- */
/* FOOTER — parallax reveal                                               */
/* ---------------------------------------------------------------------- */
.footer{ position:relative; background:var(--dark-bg); color:#fff; overflow:hidden; }
.footer-inner{ padding:96px 24px 48px; transform:translateY(-14%); }
@media (min-width:768px){ .footer-inner{ padding:128px 48px 56px; } }
.footer-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:28px; padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,.14); position:relative; }
.footer-cta h2{ font-size:clamp(2.25rem,6vw,4.5rem); font-weight:600; letter-spacing:-.01em; max-width:14ch; line-height:1.05; }
.footer-scrolltop{ position:absolute; top:0; right:0; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.footer-scrolltop:hover{ background:#fff; color:var(--dark-bg); }
.footer-contact{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:22px; }
.footer-email{ font-family:var(--font-body); font-size:15px; color:var(--gray-text); user-select:all; }
.footer-copy-btn{ border:1px solid rgba(255,255,255,.25); background:none; color:#fff; font-size:12px; padding:6px 12px; border-radius:999px; cursor:pointer; }
.footer-copy-btn:hover{ border-color:#fff; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:28px; font-size:12.5px; color:var(--gray-text); }
.footer-bottom a{ color:var(--gray-text); }
.footer-bottom a:hover{ color:#fff; }

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:.7rem 1rem;background:var(--dark-bg);color:var(--light-bg);
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
}
.skip-link:focus{left:0;}
[tabindex="-1"]:focus{outline:none;}

/* ---------------------------------------------------------------------- */
/* TOOL.HTML — everything above this line is the "Trace family" mockup    */
/* skin for the overview page and was never meant to share a page with    */
/* indivesta-spine.css (see file header). tool.html loads both anyway, so */
/* these at-* classes style the tool's own bits on top of the spine —     */
/* they intentionally use spine tokens (--ink/--muted/--line/--card/etc,  */
/* still live since nothing above redeclares them) so this matches the    */
/* other nine tools' review screens, not this file's own hero palette.    */
/* ---------------------------------------------------------------------- */
.at-file{padding:1rem;display:grid;gap:.5rem;}
.at-file__name{font-weight:600;color:var(--ink);word-break:break-word;}

/* four-cell summary strip — same pattern as StatementSort's .cd-stats */
.at-score{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:700px){ .at-score{grid-template-columns:repeat(4,minmax(0,1fr));} }
.at-score__cell{background:var(--card);padding:.8rem .9rem;}
.at-score__n{
  font-family:var(--font-mono);font-size:1.5rem;font-variant-numeric:tabular-nums;
  line-height:1;display:block;
}
.at-score__k{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);display:block;margin-top:.4rem;
}
.at-score__cell--gap .at-score__n{color:var(--amber);}

/* review toolbar */
.at-filters{
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;
  padding:.6rem 1rem;border-bottom:1px solid var(--line);background:var(--surface);
}
.at-select{
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.3rem .5rem;
}
.at-showing{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);margin-left:auto;}
.at-empty{padding:1.5rem 1rem;text-align:center;color:var(--faint);font-size:var(--t-small);}
.at-empty.is-hidden{display:none;}

/* the answer table — div-grid rows, not <table>, so it can collapse to a
   stacked card per row on narrow screens instead of scrolling sideways */
.at-head,.at-row{
  display:grid;grid-template-columns:2.5rem 6.5rem minmax(0,1.3fr) minmax(0,1.3fr) 8rem;
  gap:.75rem;align-items:start;padding:.6rem .8rem;
}
.at-head{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:2;
}
.at-row{border-bottom:1px solid var(--line-soft);font-size:var(--t-small);line-height:1.5;}
.at-row:last-child{border-bottom:0;}
.at-row.is-out{display:none;}
.at-n{font-family:var(--font-mono);color:var(--faint);}
.at-ctrl{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--muted);}
.at-q{color:var(--ink);}
.at-a{color:var(--muted);}
.at-a--gap{color:var(--amber);font-style:italic;}
.at-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}

@media (max-width:640px){
  .at-head{display:none;}
  .at-row{grid-template-columns:1fr;gap:.3rem;padding:.75rem .9rem;}
  .at-n{display:none;}
  .at-ctrl{font-weight:600;color:var(--ink);}
}

/* The menu is fixed to the top of the window on this page, so the one-screen
   console in /assets/css/walkthrough.css is capped against the room left under
   it, not the whole window. 57px of stuck bar (20px mark + 2x18px padding +
   1px hairline) plus the sheet's own 40px margin. This is the last of this
   page's own sheets, and walkthrough.css only ever reads the token. */
:root{ --wt-headroom:98px; }