/* ==========================================================================
   09 · SUPPLIERESG — soul
   Standalone "Trace family" system, ported from the approved full-page
   mockup (scope-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, .card-ish blocks) 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
   (two new files: outfit-variable-latin[-ext].woff2, same source as Google
   Fonts' own served file, just self-hosted).

   Palette is the SentinelOne-inspired one approved in chat — clean, no
   contrast workarounds needed anywhere it's used.
   ========================================================================== */

/* ---------- 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:     #f8f7fb;
  --ink:      #0B0D1B;
  --muted:    #514A85; /* clears 7.87:1 on white as-is, no dilution needed */
  --accent:   #5F01FB;
  --amber:    #5F01FB; /* no separate flag color in this palette — reuse accent */
  --border:   #e3e0ec;
  --hero-highlight: #5F01FB;

  --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:#345245; }

/* ---------------- 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(242,250,247,.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-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 (#0B0D1B), --border (#e3e0ec) and --accent
   (#5F01FB). There is no --line in this sheet — --border is what every other
   hairline here uses. --accent clears 9:1 on white, so it can carry the hover. */
.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); }
.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(248,247,251,.9), transparent 55%), radial-gradient(ellipse at 92% 88%, rgba(95,1,251,.18), 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:760px; }
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:660px; margin:0 0 30px; }
.sub b{ color:var(--ink); font-weight:600; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.cta-tag{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; color:var(--muted); margin:0 0 30px; }
.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:#fff; }
.btn-primary:hover{ background:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:rgba(22,58,38,.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; }

.calc-panel{ border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden; margin-bottom:20px; }
.calc-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:16px 20px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11.5px; }
.calc-head .label{ color:var(--muted); }
.calc-head .stamp{ color:var(--amber); font-weight:600; letter-spacing:.04em; }
.calc-figures{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--border); }
@media (min-width:640px){ .calc-figures{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.figure{ background:#fff; padding:20px 20px 18px; }
.figure .val{ font-family:var(--font-display); font-weight:600; font-size:32px; color:var(--ink); }
.figure .unit{ font-size:15px; font-weight:500; color:var(--muted); margin-left:4px; }
.figure .line{ margin-top:6px; font-family:var(--font-mono); font-size:11px; color:var(--muted); line-height:1.5; }
.figure .line b{ color:var(--ink); font-weight:600; }
.figure.flag .val{ color:var(--amber); }
.calc-caption{ margin:0; padding:14px 20px 18px; border-top:1px dashed var(--border); font-family:var(--font-mono); font-size:11px; color:var(--muted); line-height:1.6; }
.evidence-note{ font-size:13px; color:var(--muted); line-height:1.6; max-width:640px; }
.evidence-note b{ color:var(--ink); }
.data-gap{ margin-top:14px; padding:10px 12px; border:1px dashed #b9cdd6; border-radius:8px; font-family:var(--font-mono); font-size:11px; color:var(--muted); max-width:640px; }

/* ---------------- what it is ---------------- */
.whatitis-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin-top:24px; }
@media (min-width:720px){ .whatitis-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.whatitis-card{ background:#fff; padding:26px 24px; }
.whatitis-card h3{ font-size:16px; font-weight:600; line-height:1.35; margin-bottom:10px; }
.whatitis-card p{ font-size:13.5px; line-height:1.6; color:var(--muted); }

/* ---------------- how to use ---------------- */
/* The stack of five description cards this section used to hold is gone. The
   console that replaced it — the tool itself, running in the page — is styled
   by console.css, and its controls, narration band and ghost cursor by
   /assets/css/walkthrough.css. The rules that went with the deck (.stage,
   .step-card, .step-visual, .mode-toggle, .step-progress, and a second copy of
   the .wt-pointer rules that now live in walkthrough.css) went with it. */
.howto-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; flex-wrap:wrap; gap:16px; }

/* ---------------- what SupplierESG 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); }

/* ---------------- four blanks, on purpose ---------------- */
.blanks{ margin-top:40px; border:1px solid var(--border); border-radius:14px; background:#fff; padding:6px; }
.blank-row{ display:flex; gap:16px; padding:16px 18px; border-bottom:1px solid var(--border); font-size:13.5px; line-height:1.6; color:var(--muted); }
.blank-row:last-child{ border-bottom:0; }
.blank-row b{ color:var(--ink); flex:none; width:9.5rem; font-weight:600; }

.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:#fbfaf6; }
.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 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; text-align:left; cursor:pointer; font-family:var(--font-display); font-size:16px; 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:#ECF7FE; }
.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); }
.about-demo{ font-size:13px; color:var(--muted); line-height:1.6; margin-top:20px; max-width:62ch; }

@media (prefers-reduced-motion: reduce){ .figure .val{ transition:none !important; } }

.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 sc-*/gb-break 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/--amber.            */
/* ---------------------------------------------------------------------- */
.sc-bills{list-style:none;margin:0;padding:0;}
.sc-bills li{padding:.6rem 1rem;border-bottom:1px solid var(--line-soft);}
.sc-bills li:last-child{border-bottom:0;}
.sc-bills__top{display:flex;align-items:center;gap:.5rem;font-size:var(--t-small);color:var(--ink);}
.sc-bills__q{margin-left:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted);}
.sc-bills__s{display:block;margin-top:.2rem;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}

/* label/value breakdown rows — plain divs filled by JS, no classes of
   their own, so this styles the shape directly. */
.gb-break > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  padding:.5rem 0;border-bottom:1px solid var(--line-soft);font-size:var(--t-small);
}
.gb-break > div:last-child{border-bottom:0;}
.gb-break > div > span:first-child{color:var(--faint);}
.gb-break > div > span:last-child{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:500;flex:none;
}

.sc-figs{display:grid;gap:1px;background:var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:640px){ .sc-figs{grid-template-columns:1fr;} }
.sc-fig{background:var(--card);padding:.9rem 1rem;}
.sc-fig__k{display:block;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:.35rem;}
.sc-fig__v{font-family:var(--font-display);font-weight:600;font-size:1.5rem;color:var(--ink);}
.sc-fig__v small{margin-left:.3rem;font-size:var(--t-small);font-weight:500;color:var(--muted);}
.sc-fig__from{display:block;margin-top:.3rem;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);line-height:1.5;}
.sc-fig--total .sc-fig__v{color:var(--amber);}

.sc-work__f{display:block;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--faint);}
.sc-work__s{display:block;font-family:var(--font-mono);font-size:var(--t-micro);color:var(--muted);}

.sc-stamp{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.08em;color:var(--amber);font-weight:600;}

.sc-q{padding:.9rem 1rem;border-bottom:1px solid var(--line-soft);display:grid;gap:.4rem;}
.sc-q:last-child{border-bottom:0;}
.sc-q__q{display:flex;gap:.5rem;font-size:var(--t-small);color:var(--ink);}
.sc-q__n{font-family:var(--font-mono);color:var(--faint);flex:none;}
.sc-q__why{font-size:var(--t-small);color:var(--faint);}
.sc-q__a{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:var(--t-small);}
.sc-fill{
  width:100%;min-height:4rem;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;
}

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