/* ==========================================================================
   08 · FUNDERREPORT — soul
   Standalone "Trace family" system, ported from the approved full-page
   mockup (acquit-full-mockup.html). 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.

   Palette is the Nimbl-inspired one approved in chat. Non-negotiable rule:
   the accent green (#60D38D) only clears 1.88:1 against white — every
   button/badge/step-tag/before-after number uses BLACK text on the green
   fill, never white-on-green and never green-as-text. Already correct
   below; do not "simplify" it back to white-on-accent.
   ========================================================================== */

/* ---------- 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{
  --bg-1:     #FFFFFF;
  --bg-2:     #F7F7F7;
  --ink:      #000000;
  --muted:    rgba(0,0,0,0.62); /* black at 62% — clears 5.74:1 on white */
  --accent:   #60D38D;
  --amber:    #60D38D; /* no separate flag color in this palette — reuse accent */
  --border:   #e5e5e5;
  --hero-highlight: #60D38D;

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

  --ease-sig: cubic-bezier(0.16,1,0.3,1);
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg-1); -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--font-display); margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }
@media (min-width:768px){ .wrap{ padding:0 48px; } }
.section{ padding:72px 0; border-bottom:1px solid var(--border); }
@media (min-width:768px){ .section{ padding:100px 0; } }
.eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin:0 0 16px; }
.section-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.12; letter-spacing:-.01em; }
.body-lg{ font-size:15.5px; line-height:1.7; color:var(--muted); }

/* ---------------- topbar / subnav ---------------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:22px 0 18px; border-bottom:1px solid var(--border); }
.tool-id{ font-family:var(--font-mono); font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px; }
.tool-id .n{ color:var(--muted); }
.tool-id .name{ font-family:var(--font-display); font-weight:600; font-size:15px; }
nav.global{ display:flex; align-items:center; gap:22px; font-size:13.5px; color:var(--muted); }
nav.global a.current{ color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; }
nav.global .brand{ font-weight:700; color:var(--ink); margin-left:6px; }

.subnav{ position:sticky; top:0; z-index:20; display:flex; gap:28px; padding:14px 24px; background:rgba(244,246,251,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin:0 -24px; }
@media (min-width:768px){ .subnav{ padding:14px 48px; margin:0 -48px; } }
.subnav a{ color:var(--muted); padding-bottom:4px; border-bottom:2px solid transparent; }
.subnav a.active{ color:var(--ink); border-bottom-color:var(--ink); }

/* ---------------- navbar: absolute, mix-blend-difference, matches SecurityReview ---------------- */
/* 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-sig), background .25s var(--ease-sig); }
/* 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. */
/* Tokens are this page's own: --ink (#000000) and --border (#e5e5e5). There is
   no --line in this sheet. --accent here is Nimbl green (#60D38D) — 1.9:1 on
   white — so it is deliberately NOT used for the hover, exactly as .subnav
   a.active on this page borders in --ink rather than --accent. .nav-links a
   already hovers .85 -> 1 opacity, which is the whole hover on this bar. */
.navbar.is-stuck{
  mix-blend-mode:normal;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--border);
  padding-top:16px; padding-bottom:16px;
}
.navbar.is-stuck .mark,
.navbar.is-stuck .nav-links a{ color:var(--ink); }
.navbar.is-stuck .hamburger span{ background:var(--ink); }
@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; }
.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; 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(--ink); 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), badge, parallax ---------------- */
.hero{ position:relative; min-height:100vh; background:var(--bg-1); overflow:hidden; display:flex; align-items:center; padding:0; }
.hero-fallback{ position:absolute; inset:0; background:radial-gradient(ellipse at 88% 15%, rgba(247,247,247,.9), transparent 55%), radial-gradient(ellipse at 92% 88%, rgba(96,211,141,.28), transparent 50%), var(--bg-1); }
.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:780px; }
h1.headline{ font-weight:600; font-size:clamp(2.4rem,5.4vw,4.4rem); line-height:1.08; letter-spacing:-.01em; margin:0 0 22px; max-width:17ch; position:relative; z-index:1; }
.headline .accent-line-wrap{ position:relative; display:inline-block; }
.headline .accent-line{ position:absolute; left:0; bottom:-.1em; height:.09em; border-radius:0 999px 999px 0; background:linear-gradient(90deg, var(--accent), var(--hero-highlight)); width:0; transform-origin:left center; }
.sub{ font-size:17px; line-height:1.65; color:var(--muted); max-width:680px; margin:0 0 30px; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }
.btn{ font-family:var(--font-body); font-size:14.5px; font-weight:500; padding:12px 22px; border-radius:8px; cursor:pointer; border:1px solid transparent; text-decoration:none; display:inline-block; transition:background .2s, transform .2s; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--accent); color:#000; font-weight:600; }
.btn-primary:hover{ background:var(--ink); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:rgba(22,35,63,.25); }
.btn-ghost:hover{ border-color:var(--ink); }

.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(--ink); }
[data-parallax]{ will-change:transform; }

/* ---------------- signature demo: click a requirement, section comes to you ---------------- */
.agreement-panel{ border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden; }
.agreement-head{ padding:16px 20px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
.agreement-body{ display:flex; flex-direction:column; }
@media (min-width:720px){ .agreement-body{ flex-direction:row; } }
.req-list{ flex:1; border-bottom:1px solid var(--border); }
@media (min-width:720px){ .req-list{ border-bottom:0; border-right:1px solid var(--border); } }
.req-item{ width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--border); padding:16px 20px; cursor:pointer; font-family:var(--font-body); font-size:13.5px; color:var(--muted); }
.req-item:last-child{ border-bottom:0; }
.req-item.active{ color:var(--ink); background:#eef2fb; font-weight:500; }
.section-preview{ flex:1.3; padding:20px; }
.section-preview .k{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
.section-preview p{ font-size:13.5px; line-height:1.6; color:var(--muted); margin-bottom:12px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:var(--font-mono); font-size:11px; border:1px solid var(--border); border-radius:6px; padding:5px 9px; color:var(--muted); background:#fff; transition:box-shadow .2s, border-color .2s; }
.chip.pulse{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(96,211,141,.35); }

.agreement-note{ font-size:13px; color:var(--muted); line-height:1.6; max-width:660px; margin-top:16px; }
.agreement-note b{ color:var(--ink); }

.cta-tag{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); margin-top:14px; }

/* ---------------- how to use ----------------
   The heading row is all that is left here. The section below it used to be a
   deck of five description cards (.stage/.step-card/.step-visual) with its own
   ghost pointer and narrative line; it now runs the real acquittal instead, so
   those rules are gone. The console's skin is in console.css and its furniture
   in /assets/css/walkthrough.css. */
.howto-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; flex-wrap:wrap; gap:16px; }

/* ---------------- three holes ---------------- */
.holes{ display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-top:32px; }
.hole{ background:#fff; padding:22px 22px; }
.hole .tag{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--amber); margin-bottom:8px; }
.hole h3{ font-size:16px; font-weight:600; margin-bottom:8px; }
.hole p{ font-size:13.5px; line-height:1.65; color:var(--muted); }
.hole b{ color:var(--ink); }

/* ---------------- what FunderReport will not do ---------------- */
.wontdo-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin-top:40px; }
@media (min-width:640px){ .wontdo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.wontdo-card{ background:#fff; padding:24px 22px; }
.wontdo-card h3{ font-size:15.5px; font-weight:600; margin-bottom:8px; }
.wontdo-card p{ font-size:13.5px; line-height:1.55; color:var(--muted); }

.ba-compare{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-top:8px; }
@media (min-width:720px){ .ba-compare{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.ba-col{ background:#fff; padding:28px 26px; }
.ba-col.before{ background:#f9fafc; }
.ba-col .tag{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:12px; }
.ba-col h3{ font-size:19px; font-weight:600; margin-bottom:10px; }
.ba-col .big{ font-family:var(--font-display); font-size:30px; font-weight:600; margin:10px 0 6px; }
.ba-col.after .big{ color:var(--ink); }
.ba-col p{ font-size:13.5px; line-height:1.6; color:var(--muted); }

.marquee-wrap{ overflow:hidden; padding:28px 0; margin:40px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.marquee-track{ display:flex; white-space:nowrap; width:max-content; animation:marquee 30s 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 24px; color:var(--muted); letter-spacing:.02em; }

.accordion{ max-width:760px; margin:0 auto; }
.acc-item{ border-bottom:1px solid var(--border); }
.acc-trigger{ width:100%; background:none; border:0; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left; cursor:pointer; font-family:var(--font-display); font-size:15.5px; font-weight:500; color:var(--ink); }
.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 20px; font-size:14px; line-height:1.65; color:var(--muted); }

/* ---------------- footer ---------------- */
.footer{ padding:64px 0 40px; background:#F7F7F7; }
.footer h2{ font-size:clamp(1.9rem,4.5vw,3rem); font-weight:600; letter-spacing:-.01em; max-width:16ch; line-height:1.1; margin-bottom:24px; }
.footer-contact{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; }
.footer-email{ font-size:14px; color:var(--muted); user-select:all; }
.footer-copy-btn{ border:1px solid var(--border); background:#fff; color:var(--ink); font-size:12px; padding:6px 12px; border-radius:999px; cursor:pointer; }
.footer-copy-btn:hover{ border-color:var(--ink); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:32px; margin-top:32px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); }
.about-demo{ margin-top:16px; max-width:62ch; }

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:.7rem 1rem;background:var(--ink);color:var(--bg-1);
  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 is the "Trace family" overview-page skin  */
/* and was never meant to share a page with indivesta-spine.css (see file */
/* header). tool.html loads both anyway, so these aq-* rules style the    */
/* tool's own bits on top of the spine, using spine tokens (--line/--card/*/
/* --surface/--radius/--t-*/--green — still live, unredeclared above)     */
/* plus this file's own --ink/--muted/--amber (here doubling as "unmet"). */
/* ---------------------------------------------------------------------- */
.aq-clauses{list-style:none;margin:0;padding:0;}
.aq-clause{border-bottom:1px solid var(--line-soft);}
.aq-clause:last-child{border-bottom:0;}
.aq-clause > button{
  width:100%;display:flex;align-items:baseline;gap:.6rem;text-align:left;
  background:none;border:0;cursor:pointer;padding:.65rem 1rem;
  font-family:inherit;color:var(--ink);font-size:var(--t-small);
}
.aq-clause > button[aria-current="true"]{background:var(--surface);}
.aq-clause__ref{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);flex:none;}
.aq-clause > button > span:nth-child(2){flex:1;}
.aq-clause__state{
  flex:none;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);
}
.aq-clause[data-unmet="1"] .aq-clause__state{color:var(--amber);}

.aq-doc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.aq-doc__hd{padding:1rem;border-bottom:1px solid var(--line);background:var(--surface);}
.aq-doc__hd h3{margin:0 0 .3rem;font-size:var(--t-h3,1.15rem);}
.aq-doc__hd p{margin:0;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}

.aq-sec{padding:1rem;border-bottom:1px solid var(--line-soft);}
.aq-sec:last-child{border-bottom:0;}
.aq-sec.is-target{background:var(--surface);}
.aq-sec__hd{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem;}
.aq-sec__n{
  flex:none;width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);
}
.aq-sec__t{font-weight:600;color:var(--ink);}
.aq-sec__refs{margin-left:auto;display:flex;gap:.3rem;flex-wrap:wrap;}
.aq-sec__body{font-size:var(--t-small);line-height:1.6;color:var(--muted);margin:0 0 .5rem;}
.aq-sec__ev{display:flex;gap:.35rem;flex-wrap:wrap;}

.aq-unmet{
  padding:.75rem .85rem;border:1px dashed color-mix(in oklab,var(--amber) 45%,var(--line));
  border-radius:var(--radius-sm);background:color-mix(in oklab,var(--amber) 8%,var(--card));
}
.aq-unmet__k{
  display:block;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:.4rem;
}
.aq-unmet__b{font-size:var(--t-small);line-height:1.55;color:var(--muted);margin:0 0 .5rem;}
.aq-unmet__ask{font-size:var(--t-small);line-height:1.55;color:var(--ink);margin:0 0 .6rem;}
.aq-unmet__ask b{
  display:block;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:.2rem;
}
.aq-fill{
  width:100%;min-height:4.5rem;resize:vertical;font-family:var(--font-body);font-size:var(--t-small);
  color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.5rem .6rem;
}

.aq-out{
  width:100%;min-height:12rem;resize:vertical;white-space:pre;overflow-x:auto;
  font-family:var(--font-mono);font-size:var(--t-micro);line-height:1.7;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.8rem;
}