/* ==========================================================================
   05 · DRAWINGQUOTE — soul
   Standalone "Trace family" system, ported from the approved full-page
   mockup (bench-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 Collective-inspired one approved in chat, plus one added
   near-black (#1c1512) for body text — the four real swatches have no dark
   neutral (coral tops out at 3.57:1 on white). Non-negotiable: buttons use
   ink text on the coral fill, never white; #F9D6D7 (pink) stays decorative
   only, never text or a border.
   ========================================================================== */

/* ---------- 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:     #EFECE4;
  --ink:      #1c1512; /* NOT one of the 4 swatches — this palette has no dark neutral (the coral only clears 3.57:1 on white, below the 4.5:1 body-text floor), so a near-black was added for actual text legibility. Everything else is exactly the 4 given colors. */
  --muted:    rgba(28,21,18,0.72); /* ink at 72% — clears ~6:1 */
  --accent:   #E7565C;
  --flag:     #E7565C;
  --pink:     #F9D6D7;
  --border:   #e8e1d5;
  --hero-highlight: #F9D6D7;

  --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(--accent); 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(253,248,242,.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; }
@media (min-width:768px){ .subnav{ padding:14px 48px; } }
.subnav a{ color:var(--muted); padding-bottom:4px; border-bottom:2px solid transparent; }
.subnav a.active{ color:var(--ink); border-bottom-color:var(--accent); }

/* ---------------- 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), background .25s var(--ease); }
/* 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 dark hero it keeps the difference blend that made it white; 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. */
.navbar.is-stuck{
  mix-blend-mode:normal;
  background:rgba(253,248,242,.94);
  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); }
.nav-links a[aria-current]{ font-weight:600; }
.navbar.is-stuck .nav-links a[aria-current]{ color:var(--ink,#000); }
.navbar.is-stuck .nav-links a:hover{ color:var(--accent); }
.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(239,236,228,.9), transparent 55%), radial-gradient(ellipse at 92% 88%, rgba(249,214,215,.7), 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:16ch; 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 .15s, transform .15s; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--accent); color:var(--ink); font-weight:600; }
.btn-primary:hover{ background:var(--ink); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:rgba(58,42,21,.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: hover a spec row <-> hover the drawing ---------------- */
.rfq-panel{ border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden; }
.rfq-head{ padding:16px 20px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11.5px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; }
.rfq-body{ display:flex; flex-direction:column; }
@media (min-width:720px){ .rfq-body{ flex-direction:row; } }
.drawing{ flex:1; padding:18px; border-bottom:1px solid var(--border); }
@media (min-width:720px){ .drawing{ border-bottom:0; border-right:1px solid var(--border); } }
.drawing svg{ width:100%; height:auto; display:block; }
.d-region{ fill:#f7ecdb; stroke:#d8c39c; stroke-width:1; transition:fill 120ms, stroke 120ms; }
.d-region.lit{ fill:#f3dcb0; stroke:var(--accent); stroke-width:1.6; }
.spec-table{ flex:1.1; }
.spec-row{ display:flex; justify-content:space-between; gap:10px; padding:12px 18px; border-bottom:1px solid var(--border); font-size:12.5px; cursor:default; transition:background 120ms; }
.spec-row:last-child{ border-bottom:0; }
.spec-row:hover, .spec-row.lit{ background:#faf1e2; }
.spec-row .k{ color:var(--muted); font-family:var(--font-mono); font-size:11px; }
.spec-row .v{ font-weight:500; }
.spec-row.reveal{ opacity:0; transform:translateY(6px); }

.extract-note{ font-size:13px; color:var(--muted); line-height:1.6; max-width:660px; margin-top:16px; }
.extract-note b{ color:var(--ink); }
.cta-row .cta-tag{ align-self:center; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.data-gap{ margin-top:14px; padding:10px 12px; border:1px dashed #ddd3c5; border-radius:8px; font-family:var(--font-mono); font-size:11px; color:var(--muted); max-width:660px; }

/* ---------------- what it is: 3-up ---------------- */
.what-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
@media (min-width:820px){ .what-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.what-card{ background:#fff; padding:26px 24px; }
.what-card .num{ font-family:var(--font-mono); font-size:11px; color:var(--accent); letter-spacing:.06em; margin-bottom:10px; }
.what-card h3{ font-size:16.5px; font-weight:600; margin-bottom:10px; line-height:1.3; }
.what-card p{ font-size:13.5px; line-height:1.65; color:var(--muted); }

/* ---------------- how to use: draggable Autoplay/Manual carousel ---------------- */
.howto-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; flex-wrap:wrap; gap:16px; }
.howto-controls{ display:flex; align-items:center; gap:12px; }
.howto-controls > button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.howto-controls > button:hover{ border-color:var(--ink); }
.howto-controls svg{ width:18px; height:18px; }

.mode-toggle{ display:flex; border:1px solid var(--border); border-radius:999px; padding:3px; gap:2px; }
.mode-btn{ border:0; background:none; padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:500; color:var(--muted); cursor:pointer; transition:background .25s, color .25s; }
.mode-btn[aria-pressed="true"]{ background:var(--ink); color:#fff; }

.step-progress{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:28px; }
.step-dot{ width:9px; height:9px; border-radius:50%; background:var(--border); border:0; cursor:pointer; padding:0; transition:background .3s; }
.step-dot.active{ background:var(--ink); width:22px; border-radius:5px; }

/* narrative caption + ghost pointer — same mechanic as CommentSmart's walkthrough console */
.wt-narrative{ margin:16px 0 0; font-size:13.5px; line-height:1.6; color:var(--muted); max-width:56rem; }
.wt-narrative b{ color:var(--ink); }
.wt-pointer{
  position:absolute; top:0; left:0; width:22px; height:22px; z-index:40; pointer-events:none;
  transform:translate(-9999px,-9999px); opacity:0;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
}
.wt-pointer.visible{ opacity:1; }
.wt-pointer-bob{ display:block; position:relative; }
.wt-pointer.hint .wt-pointer-bob{ animation:wtBob 1.1s ease-in-out infinite; }
@keyframes wtBob{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-3px,4px); } }
.wt-pointer-ring{
  position:absolute; left:-7px; top:-7px; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--accent); opacity:0;
}
.wt-pointer.pulse .wt-pointer-ring{ animation:wtPulse .6s ease-out; }
@keyframes wtPulse{ 0%{ transform:scale(.3); opacity:.9; } 100%{ transform:scale(1.9); opacity:0; } }

.stage{ position:relative; height:600px; max-width:980px; margin-top:40px; }
.step-card{
  position:absolute; inset:0; background:#fdf9f2; border-radius:20px; border:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden; cursor:grab;
  transition:transform .6s var(--ease-sig), box-shadow .6s var(--ease-sig);
  touch-action:pan-y;
}
.step-card:active{ cursor:grabbing; }
@media (min-width:768px){ .step-card{ flex-direction:row; } }
.step-card .left{ padding:36px 32px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.step-card .right{ flex:1; padding:20px; display:flex; }
.step-badge{ width:44px; height:44px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:15px; margin-bottom:22px; }
.step-tag{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:600; margin-bottom:12px; }
.step-title{ font-size:26px; font-weight:600; margin-bottom:12px; }
.step-desc{ font-size:14.5px; line-height:1.6; color:var(--muted); max-width:38ch; margin-bottom:22px; }
.step-pill{ align-self:flex-start; padding:10px 20px; border-radius:999px; background:var(--ink); color:#fff; font-size:13px; font-weight:500; }

.step-visual{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; width:100%; font-size:12px; }
.step-visual .fname{ font-weight:600; margin-bottom:4px; }
.step-visual .fmeta{ color:var(--muted); margin-bottom:14px; }
.step-visual .tagrow{ display:flex; flex-wrap:wrap; gap:6px; }
.step-visual .chip{ border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-family:var(--font-body); font-size:10.5px; color:var(--muted); }
.step-visual .draft-btn{ margin-top:16px; background:var(--ink); color:#fff; text-align:center; padding:11px; border-radius:8px; font-size:12.5px; }
.step-visual .row{ display:flex; justify-content:space-between; padding:7px 0; border-top:1px solid #f1ede2; font-size:11px; }
.step-visual .flag-dot{ width:6px; height:6px; border-radius:50%; background:var(--flag); display:inline-block; margin-left:6px; }
.step-visual .approve-check{ display:flex; align-items:flex-start; gap:8px; font-size:11px; color:var(--muted); line-height:1.4; margin-bottom:14px; }
.step-visual .export-note{ color:var(--muted); line-height:1.6; }

/* ---------------- the two it won't price ---------------- */
.guesses{ display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-top:32px; }
.guess{ background:#fff; padding:22px 22px; }
.guess .tag{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--flag); margin-bottom:8px; }

.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:#fdf6ec; }
.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:34px; font-weight:600; margin:10px 0 6px; }
.ba-col.after .big{ color:var(--accent); }
.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 28s 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); }
.guess h3{ font-size:16px; font-weight:600; margin-bottom:8px; }
.guess p{ font-size:13.5px; line-height:1.65; color:var(--muted); }
.guess b{ color:var(--ink); }

.anchor-note{ margin-top:32px; border:1px solid var(--border); border-radius:14px; background:#fff; padding:22px; }
.anchor-note .tag{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
.anchor-note p{ font-size:13.5px; line-height:1.65; color:var(--muted); }

.meta-strip{ display:flex; flex-wrap:wrap; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-top:32px; }
.meta-cell{ flex:1 1 200px; background:#fff; padding:18px 20px; }
.meta-cell .k{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
.meta-cell .v{ font-family:var(--font-display); font-weight:600; font-size:16px; }

/* ---------------- footer ---------------- */
.footer{ padding:64px 0 40px; background:#EFECE4; }
.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(--accent); }
.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); }
.demo-note{ font-size:11px; color:var(--muted); margin-top:14px; max-width:52ch; }

.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 bn-* rules style the    */
/* tool's own bits on top of the spine, using spine tokens (--line/--card/*/
/* --surface/--radius/--t-* — still live, unredeclared above) plus this   */
/* file's own --ink/--muted/--accent, which are close enough to the       */
/* spine's to read as one page. */
/* ---------------------------------------------------------------------- */
.bn-mail{padding:1rem;display:grid;gap:.55rem;}
.bn-mail__sub{display:block;font-weight:600;color:var(--ink);}
.bn-mail__from{display:block;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}
.bn-mail__body{font-size:var(--t-small);line-height:1.6;color:var(--muted);white-space:pre-line;margin:.15rem 0 .3rem;}
.bn-mail__body mark{background:color-mix(in oklab,var(--accent) 30%,transparent);color:var(--ink);border-radius:3px;padding:0 .15rem;}

.bn-past{list-style:none;margin:0;padding:0;}
.bn-past li{padding:.7rem 1rem;border-bottom:1px solid var(--line-soft);}
.bn-past li:last-child{border-bottom:0;}
.bn-past__top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.bn-past__job{font-weight:600;color:var(--ink);font-size:var(--t-small);}
.bn-past__unit{margin-left:auto;font-family:var(--font-mono);font-size:var(--t-small);font-variant-numeric:tabular-nums;color:var(--ink);}
.bn-past__note{display:block;margin-top:.3rem;font-size:var(--t-small);color:var(--faint);}

.bn-anchor,.bn-unit{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  padding:.75rem 1rem;border-top:1px solid var(--line);
}
.bn-anchor__v,.bn-unit__v{font-family:var(--font-mono);font-size:1.15rem;font-variant-numeric:tabular-nums;color:var(--ink);}

.bn-sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;overflow:auto;}
.bn-sheet__cap{
  display:flex;justify-content:space-between;gap:.5rem;margin-top:.5rem;
  font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);
}
.bn-svg{width:100%;height:auto;display:block;color:var(--ink);}
.bn-regions .bn-region{
  fill:transparent;stroke:transparent;stroke-width:1.6;cursor:pointer;
  transition:fill var(--dur) var(--ease-out),stroke var(--dur) var(--ease-out);
}
.bn-regions .bn-region:hover,.bn-regions .bn-region.is-linked{
  fill:color-mix(in oklab,var(--accent) 14%,transparent);stroke:var(--accent);
}

.bn-spec{width:100%;border-collapse:collapse;font-size:var(--t-small);}
.bn-spec th{
  text-align:left;font-family:var(--font-mono);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  padding:.5rem .6rem;border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;
}
.bn-spec td{padding:.5rem .6rem;border-bottom:1px solid var(--line-soft);vertical-align:top;}
.bn-spec tbody tr:last-child td{border-bottom:0;}
.bn-spec tbody tr{cursor:pointer;transition:background var(--dur) var(--ease-out);}
.bn-spec tbody tr:hover,.bn-spec tbody tr.is-linked{background:var(--surface);}
.bn-spec__v{font-weight:500;color:var(--ink);}
.bn-spec__where{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);white-space:nowrap;}

@keyframes bn-in{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.bn-in{animation:bn-in var(--dur-slow) var(--ease-out) backwards;}

.bn-qty{
  width:4.5rem;font-family:var(--font-mono);font-size:var(--t-small);color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.25rem .4rem;
}

.bn-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;
}

@media (max-width:640px){
  .bn-past__unit{margin-left:0;}
  .bn-anchor,.bn-unit{flex-wrap:wrap;}
}