/* =========================================================
   TringTring — "LEDGER"
   A front desk keeps a day book. This site is that day book:
   grey paper, ink anchors, hairline rules, tabular numerals.
   Greyscale throughout, keyed to the logo's own grey — with a
   single green spent only on action, live state, money recovered,
   and the focus ring.

   Single stylesheet, zero dependencies, no build step.
   Token layer first — nothing below invents its own values.
   ========================================================= */

:root{
  /* ---- surfaces: neutral greys, keyed to the logo's own grey ---- */
  --paper:#E2E2E2;          /* page ground — the grey, not a white */
  --paper-2:#FFFFFF;        /* raised sheet */
  --paper-3:#DCDCDC;        /* sunken / banded — one step down from the ground */
  --ink:#141414;            /* text + dark anchor surfaces */
  --ink-2:#1E1E1E;          /* elevated on dark */

  /* ---- text ---- */
  --fg:#141414;
  --fg-soft:#454545;        /* 7.0:1 on the banded grey */
  --fg-faint:#5F5F5F;       /* 4.6:1 on the banded grey — labels are still text */
  --fg-on-ink:#F0F0F0;
  --fg-on-ink-soft:#A5A5A5;
  /* 5.34:1 on --ink. Was #6D6D6D (3.56:1), which failed AA for the small
     mono labels this carries (.index--ink, .sb__step, .ledger__head). */
  --fg-on-ink-faint:#8A8A8A;

  /* ---- lines ---- */
  --rule:rgba(20,20,20,.12);
  --rule-2:rgba(20,20,20,.22);
  --rule-ink:rgba(240,240,240,.14);
  --rule-ink-2:rgba(240,240,240,.26);

  /* ---- THE one colour ----
     Everything else on this site is grey. Blue is spent only on: a primary
     action, a live/working state, money recovered, and the focus ring. If it
     is not one of those four things, it is grey. */
  --accent:#0B5FA5;         /* on paper — GlobalVox blue, darkened to clear AA (5.07:1) */
  --accent-2:#0C6AB8;       /* hover — one step toward the true brand blue #007FD2 */
  --accent-ink:#5AB0F0;     /* the same idea, legible on ink (7.81:1) */
  --danger:#8C2F2F;         /* functional only: an invalid field */

  /* ---- type ---- */
  /* Swiss-neutral trio, replacing Space Grotesk / Inter / JetBrains Mono.
     All three carry ₹ (U+20B9) in their latin-ext subset — checked, because a
     missing rupee glyph would fall back mid-figure on every price on the site.
     Archivo and Public Sans are variable, hence wght@400..700 ranges rather
     than the old link's six discrete Inter weights. IBM Plex Mono has NO
     variable axis on Google Fonts and must be asked for as 400;500;700.
     It is used ANYWAY, and the reason is ₹: Roboto Mono and JetBrains Mono
     both DECLARE the latin-ext range that contains U+20B9 and then ship no
     glyph for it, so every mono rupee figure fell back to Menlo mid-number.
     IBM Plex Mono carries ₹ at 600/1000 em — the full monospace advance, so
     it aligns with the digits beside it. Verify a mono replacement by reading
     its cmap, not its declared unicode-range. */
  --font:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Archivo","Public Sans",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:clamp(2.4rem,5.1vw,4.5rem);
  --t-h1:clamp(2rem,4vw,3.25rem);
  --t-h2:clamp(1.6rem,2.9vw,2.5rem);
  --t-h3:clamp(1.15rem,1.6vw,1.35rem);
  --t-lead:clamp(1.02rem,1.35vw,1.18rem);
  --t-label:.7rem;

  /* ---- space (4px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---- geometry ---- */
  --r-1:2px; --r-2:4px; --r-3:8px;
  --maxw:1280px;
  --gutter:clamp(20px,4.4vw,56px);

  /* ---- elevation (used twice on the whole site) ---- */
  --lift:0 1px 0 rgba(20,20,20,.04), 0 18px 44px -28px rgba(20,20,20,.34);

  /* ---- motion ---- */
  --d1:150ms; --d2:320ms; --d3:640ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--fg);
  font-size:1rem;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  /* never gate content on a scroll animation these users don't get */
  .reveal{opacity:1!important;transform:none!important}
}

/* =========================================================
   TYPE PRIMITIVES
   Headlines are tight grotesk. One italic serif word carries
   the emotion — that pairing is the brand's signature.
   ========================================================= */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.015em}
.t-display{font-family:var(--font-display);font-size:var(--t-display);font-weight:700;letter-spacing:-.015em;line-height:1.04}
h1,.t-h1{font-size:var(--t-h1)}
h2,.t-h2{font-size:var(--t-h2)}
h3,.t-h3{font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.2}
.em{font-weight:500;color:var(--fg-soft)}
.section--ink .em,.promise .em,.hero .em,.pagehero--ink .em,.featrow__media .em{color:var(--paper)}
.lead{font-size:var(--t-lead);color:var(--fg-soft);max-width:62ch;line-height:1.62}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}

/* the ledger index label: 01 / THE LEAK */
.index{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);
  margin-bottom:var(--s5);
}
.index::after{content:"";flex:1;height:1px;background:var(--rule);max-width:220px}
.index b{color:var(--ink);font-weight:500}
.index--ink{color:var(--fg-on-ink-faint)}
.index--ink::after{background:var(--rule-ink)}
.index--ink b{color:var(--fg-on-ink)}

/* =========================================================
   LAYOUT
   ========================================================= */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,128px);position:relative}
.section--tight{padding-block:clamp(40px,6vw,80px)}
.section--ink{background:var(--ink);color:var(--fg-on-ink)}
.section--ink .lead{color:var(--fg-on-ink-soft)}
.section--band{background:var(--paper-3)}
.rule{height:1px;background:var(--rule);border:0}
.head{max-width:800px;margin-bottom:clamp(32px,4.5vw,64px)}
.head .lead{margin-top:var(--s4)}
.head--center{margin-inline:auto;text-align:center}
.head--center .index{justify-content:center}
.head--center .index::after{display:none}
.head--center .lead{margin-inline:auto}
.center{text-align:center}
[data-mt]{margin-top:clamp(32px,4vw,56px)}

/* =========================================================
   BUTTONS — rectangular, precise, no gradients
   ========================================================= */
.btn{
  --btn-bg:transparent; --btn-fg:var(--fg); --btn-bd:var(--rule-2);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-size:.925rem;font-weight:500;letter-spacing:-.01em;
  padding:.78em 1.25em;border-radius:var(--r-2);cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease),transform var(--d1) var(--ease);
  white-space:nowrap;position:relative;
}
.btn svg{transition:transform var(--d2) var(--ease);flex:0 0 auto}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn--primary{--btn-bg:var(--ink);--btn-fg:var(--paper);--btn-bd:var(--ink)}
.btn--primary:hover{--btn-bg:var(--accent);--btn-bd:var(--accent)}
.btn--accent{--btn-bg:var(--accent);--btn-fg:#fff;--btn-bd:var(--accent)}
.btn--accent:hover{--btn-bg:var(--accent-2);--btn-bd:var(--accent-2)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);--btn-bd:var(--rule-2)}
.btn--ghost:hover{--btn-bd:var(--ink);--btn-bg:rgba(20,20,20,.04)}
.btn--quiet{--btn-bd:transparent;padding-inline:.5em}
.btn--quiet:hover{--btn-bd:transparent;text-decoration:underline;text-underline-offset:4px}
.btn--sm{padding:.55em .9em;font-size:.85rem}
.btn--lg{padding:.95em 1.5em;font-size:1rem}
.btn--block{width:100%}
.section--ink .btn--primary,.promise .btn--primary{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-bd:var(--paper)}
.section--ink .btn--primary:hover,.promise .btn--primary:hover{--btn-bg:var(--accent-ink);--btn-fg:var(--ink);--btn-bd:var(--accent-ink)}
.section--ink .btn--ghost,.promise .btn--ghost{--btn-fg:var(--fg-on-ink);--btn-bd:var(--rule-ink-2)}
.section--ink .btn--ghost:hover,.promise .btn--ghost:hover{--btn-bd:var(--paper);--btn-bg:rgba(240,240,240,.07)}

/* live dot — the only pulsing element on the site */
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);position:relative;flex:0 0 auto}
.hero .live-dot,.console .live-dot,.section--ink .live-dot,.promise .live-dot,.pagehero--ink .live-dot,.footer .live-dot{background:var(--accent-ink)}
.hero .live-dot::after,.console .live-dot::after,.section--ink .live-dot::after,.promise .live-dot::after,.pagehero--ink .live-dot::after,.footer .live-dot::after{border-color:var(--accent-ink)}
.live-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ping 2.4s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.8}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* text link with a ruled underline that draws in */
.link{position:relative;font-weight:500;color:var(--ink);white-space:nowrap}
.link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--d2) var(--ease)}
.link:hover::after{transform:scaleX(1)}
.link--accent{color:var(--accent)}

/* =========================================================
   NAV — a ruled bar, not a floating pill
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;transition:background var(--d2) var(--ease),border-color var(--d2) var(--ease)}
.nav.is-stuck{background:rgba(226,226,226,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
.nav__inner{display:flex;align-items:center;gap:var(--s6);padding-block:var(--s4);transition:padding var(--d2) var(--ease)}
.nav.is-stuck .nav__inner{padding-block:10px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand__logo{height:clamp(26px,2.6vw,30px);width:auto;object-fit:contain}
.brand__logo--footer{height:34px}
.nav__menu{display:contents}
.nav__links{display:flex;gap:var(--s6);margin-left:auto;font-size:.9rem;color:var(--fg-soft)}
.nav__links a{position:relative;padding-block:2px;transition:color var(--d1) var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--d2) var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1)}
.nav__links a.active{color:var(--ink)}
.nav__cta{display:flex;gap:var(--s2);align-items:center;flex:0 0 auto}
.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;width:40px;height:40px;margin-left:auto;padding:0}
.nav__burger span{width:20px;height:1.5px;background:var(--ink);margin-inline:auto;transition:transform var(--d2) var(--ease),opacity var(--d1) var(--ease)}
.nav__burger.is-x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger.is-x span:nth-child(2){opacity:0}
.nav__burger.is-x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Pages that open on an ink surface invert the nav until it sticks.
   The stuck bar always reverts to paper, so this only ever applies
   over the dark hero itself. */
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .brand__logo{filter:invert(1) brightness(1.35) contrast(1.08)}
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .nav__links{color:var(--fg-on-ink-soft)}
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .nav__links a:hover,
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .nav__links a.active{color:var(--fg-on-ink)}
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .btn--quiet{--btn-fg:var(--fg-on-ink-soft)}
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .btn--quiet:hover{--btn-fg:var(--fg-on-ink)}
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .btn--ghost{--btn-fg:var(--fg-on-ink);--btn-bd:var(--rule-ink-2)}
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .btn--ghost:hover{--btn-bd:var(--paper);--btn-bg:rgba(240,240,240,.07)}
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .btn--primary{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-bd:var(--paper)}
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .btn--primary:hover{--btn-bg:var(--accent-ink);--btn-fg:var(--ink);--btn-bd:var(--accent-ink)}
body[data-nav="ink"] .nav:not(.is-stuck):not(.is-open) .nav__burger span{background:var(--fg-on-ink)}
.footer .brand__logo{filter:invert(1) brightness(1.35) contrast(1.08)}

@media(max-width:1040px){
  .nav.is-open{background:var(--paper);border-bottom-color:var(--rule)}
  .nav__burger{display:flex}
  .nav__menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:var(--s5);padding:var(--s5) var(--gutter) var(--s6);background:var(--paper);border-bottom:1px solid var(--rule)}
  .nav__menu.open{display:flex;animation:drop var(--d2) var(--ease) both}
  @keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .nav__links{flex-direction:column;gap:0;margin-left:0;font-size:1.05rem;color:var(--ink)}
  .nav__links a{padding-block:var(--s4);border-bottom:1px solid var(--rule)}
  .nav__links a::after{display:none}
  .nav__cta{flex-direction:column;align-items:stretch}
  .nav__cta .btn{width:100%;padding-block:.85em}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding-top:clamp(112px,15vh,168px);padding-bottom:var(--s7);background:var(--ink);color:var(--fg-on-ink);position:relative;overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:start}
.hero__eyebrow{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-on-ink-soft);margin-bottom:var(--s6)}
.hero__title{font-family:var(--font-display);font-weight:700;font-size:var(--t-display);letter-spacing:-.015em;line-height:1.04;color:var(--fg-on-ink)}
.hero__title .em{color:var(--paper)}
.hero__sub{margin-top:var(--s5);font-size:var(--t-lead);color:var(--fg-on-ink-soft);max-width:44ch;line-height:1.6}
.hero__sub strong{color:var(--fg-on-ink);font-weight:500}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7)}
.hero__actions .btn--primary{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-bd:var(--paper)}
.hero__actions .btn--primary:hover{--btn-bg:var(--accent-ink);--btn-fg:var(--ink);--btn-bd:var(--accent-ink)}
.hero__actions .btn--ghost{--btn-fg:var(--fg-on-ink);--btn-bd:var(--rule-ink-2)}
.hero__actions .btn--ghost:hover{--btn-bd:var(--paper);--btn-bg:rgba(240,240,240,.07)}
.hero__facts{display:grid;grid-template-columns:repeat(3,auto);gap:var(--s7);margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule-ink);justify-content:start}
.hero__fact b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.015em;color:var(--fg-on-ink);font-variant-numeric:tabular-nums}
.hero__fact>span{font-size:.78rem;color:var(--fg-on-ink-faint);letter-spacing:-.005em}

/* =========================================================
   SWITCHBOARD — the signature interaction.
   A live call runs its states, then settles into the ledger
   below as a row, and the recovered total ticks up.
   ========================================================= */
.switchboard{border:1px solid var(--rule-ink);border-radius:var(--r-3);background:var(--ink-2);overflow:hidden}
.sb__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule-ink);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase}
.sb__state{display:inline-flex;align-items:center;gap:var(--s2);color:var(--accent-ink);transition:color var(--d2) var(--ease)}
.sb__state[data-tone="booked"]{color:var(--accent-ink)}
.sb__state[data-tone="idle"]{color:var(--fg-on-ink-faint)}
.sb__state[data-tone="idle"] .live-dot{background:var(--fg-on-ink-faint)}
.sb__state[data-tone="idle"] .live-dot::after{display:none}
.sb__state[data-tone="booked"] .live-dot{background:var(--accent-ink)}
.sb__state[data-tone="booked"] .live-dot::after{border-color:var(--accent-ink)}
.sb__clock{color:var(--fg-on-ink-faint)}

/* the caller line */
.sb__call{padding:var(--s5) var(--s4) var(--s4)}
.sb__who{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s4)}
.sb__who b{font-size:1.02rem;font-weight:500;color:var(--fg-on-ink);letter-spacing:-.015em}
.sb__who span{font-family:var(--font-mono);font-size:.72rem;color:var(--fg-on-ink-faint)}
.sb__wave{width:100%;height:52px;display:block;opacity:.9}
.sb__thread{min-height:158px;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2);margin-top:var(--s4)}
.sb__line{max-width:88%;font-size:.9rem;line-height:1.45;padding:.5em .75em;border-radius:var(--r-3);animation:lineUp var(--d3) var(--ease-out) both}
.sb__line--agent{align-self:flex-start;background:rgba(240,240,240,.07);border:1px solid var(--rule-ink);border-bottom-left-radius:var(--r-1);color:var(--fg-on-ink)}
.sb__line--caller{align-self:flex-end;background:transparent;border:1px solid var(--rule-ink-2);border-bottom-right-radius:var(--r-1);color:var(--fg-on-ink-soft)}
.sb__line i{display:block;font-family:var(--font-mono);font-style:normal;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-ink-faint);margin-bottom:.25em}
@keyframes lineUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.caret::after{content:"▍";color:var(--accent-ink);animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* the pipeline: missed -> answered -> intent -> booked -> logged */
.sb__pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-ink);background:rgba(0,0,0,.16)}
.sb__step{padding:var(--s3) var(--s2);text-align:center;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-ink-faint);border-right:1px solid var(--rule-ink);position:relative;transition:color var(--d2) var(--ease),background var(--d2) var(--ease)}
.sb__step:last-child{border-right:0}
.sb__step::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-ink);transform:scaleX(0);transform-origin:left;transition:transform var(--d3) var(--ease)}
.sb__step.is-on{color:var(--fg-on-ink)}
.sb__step.is-on::before{transform:scaleX(1)}
.sb__step.is-done{color:var(--fg-on-ink-soft)}
.sb__step.is-done::before{transform:scaleX(1);background:var(--rule-ink-2)}

/* the ledger the calls fall into */
.ledger{margin-top:var(--s5);border-top:1px solid var(--rule-ink);padding-top:var(--s4)}
.ledger__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-ink-faint);margin-bottom:var(--s3)}
.ledger__total{font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.01em;color:var(--accent-ink);font-weight:500;text-transform:none}
.ledger__rows{display:flex;flex-direction:column}
.ledger__row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:baseline;padding-block:var(--s2);border-bottom:1px solid var(--rule-ink);font-size:.82rem;color:var(--fg-on-ink-soft);animation:rowIn var(--d3) var(--ease-out) both}
.ledger__row:last-child{border-bottom:0}
.ledger__row time{font-family:var(--font-mono);font-size:.72rem;color:var(--fg-on-ink-faint)}
.ledger__row em{font-style:normal;color:var(--fg-on-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger__row b{font-family:var(--font-mono);font-weight:500;color:var(--accent-ink)}
@keyframes rowIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ledger__empty{font-size:.82rem;color:var(--fg-on-ink-faint);padding-block:var(--s2)}

/* scenario switcher — reused on the industries page */
.scenarios{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.scenario{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.5em .8em;border:1px solid var(--rule-ink);border-radius:var(--r-2);color:var(--fg-on-ink-soft);background:transparent;cursor:pointer;transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease),background var(--d1) var(--ease)}
.scenario:hover{border-color:var(--rule-ink-2);color:var(--fg-on-ink)}
.scenario[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
/* listen toggle — the equaliser only moves while sound is actually on */
.listen{margin-left:auto;display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.5em .8em;border:1px solid var(--rule-ink);border-radius:var(--r-2);background:transparent;color:var(--fg-on-ink-soft);cursor:pointer;transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease),background var(--d1) var(--ease)}
.listen:hover{border-color:var(--rule-ink-2);color:var(--fg-on-ink)}
.listen.is-on{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--ink)}
.listen[hidden]{display:none}
.listen__eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.listen__eq i{width:2px;height:3px;background:currentColor;border-radius:1px;transition:height var(--d1) var(--ease)}
.listen.is-on .listen__eq i{animation:eq .9s var(--ease) infinite alternate}
.listen.is-on .listen__eq i:nth-child(2){animation-delay:.15s}
.listen.is-on .listen__eq i:nth-child(3){animation-delay:.3s}
.listen.is-on .listen__eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{from{height:3px}to{height:11px}}
/* a remembered "on" hints that a click will resume sound — browsers require it */
.listen.is-remembered:not(.is-on){border-color:var(--accent-ink);color:var(--accent-ink)}
.scenarios--paper .listen{border-color:var(--rule-2);color:var(--fg-soft)}
.scenarios--paper .listen:hover{border-color:var(--ink);color:var(--ink)}
.scenarios--paper .listen.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

.scenarios--paper .scenario{border-color:var(--rule-2);color:var(--fg-soft)}
.scenarios--paper .scenario:hover{border-color:var(--ink);color:var(--ink)}
.scenarios--paper .scenario[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* =========================================================
   THE LEAK — ruled statistic rows, not cards
   ========================================================= */
.statrows{border-top:1px solid var(--rule)}
.statrow{display:grid;grid-template-columns:minmax(140px,.5fr) 1fr;gap:var(--s5);align-items:baseline;padding-block:clamp(20px,2.6vw,32px);border-bottom:1px solid var(--rule);transition:background var(--d2) var(--ease)}
.statrow:hover{background:rgba(20,20,20,.02)}
.statrow b{font-family:var(--font-display);font-size:clamp(2.25rem,4.6vw,3.5rem);font-weight:700;letter-spacing:-.015em;line-height:.9;font-variant-numeric:tabular-nums}
.statrow p{color:var(--fg-soft);max-width:52ch;font-size:1rem}
.statrow p strong{color:var(--ink);font-weight:500}
/* .statrow is used on BOTH surfaces, and its paper colours are catastrophic on
   ink: --fg-soft lands at 1.92:1 and --ink at 1.00:1 — the lead-in sentence of
   every security control was rendering invisible on /security/, the page whose
   whole argument is that our claims are checkable. Nothing overrode it. */
.section--ink .statrow p{color:var(--fg-on-ink-soft)}
.section--ink .statrow p strong{color:var(--fg-on-ink)}
.statrow--mark b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;text-decoration-color:var(--rule-2)}
.punch{margin-top:var(--s7);font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.35;letter-spacing:-.025em;max-width:26ch;font-weight:600}

/* =========================================================
   JOURNEY — the done-for-you deployment, as a ruled score
   ========================================================= */
.journey{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule-ink)}
.journey__step{padding:var(--s5) var(--s4) var(--s6);border-right:1px solid var(--rule-ink);position:relative;transition:background var(--d2) var(--ease)}
.journey__step:last-child{border-right:0}
.journey__step::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform var(--d3) var(--ease)}
.journey__step.in::before{transform:scaleX(1)}
.journey__step:hover{background:rgba(240,240,240,.04)}
.journey__n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--fg-on-ink-faint);display:block;margin-bottom:var(--s5)}
.journey__step h3{color:var(--fg-on-ink);margin-bottom:var(--s2);font-size:1.05rem}
.journey__step p{font-size:.88rem;color:var(--fg-on-ink-soft);line-height:1.5}
.journey__step--end .journey__n{color:var(--accent-ink)}

/* =========================================================
   CAPABILITIES — four columns of outcomes, ruled
   ========================================================= */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule)}
.cap{padding:var(--s6) var(--s5) var(--s6) 0;border-right:1px solid var(--rule)}
.cap:last-child{border-right:0;padding-right:0}
.cap:not(:first-child){padding-left:var(--s5)}
.cap__t{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s5)}
.cap ul{list-style:none;display:flex;flex-direction:column;gap:var(--s4)}
.cap li{font-size:.94rem;line-height:1.45}
.cap li b{display:block;font-weight:500;color:var(--ink);letter-spacing:-.015em}
.cap li span{color:var(--fg-soft);font-size:.86rem}
.cap li em{display:block;font-style:normal;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--fg-faint);margin-top:var(--s1)}

/* =========================================================
   COMPARISON — a ruled matrix with a sticky first column
   ========================================================= */
.matrix-wrap{overflow-x:auto;border-top:1px solid var(--rule);-webkit-overflow-scrolling:touch}
.matrix{width:100%;border-collapse:collapse;min-width:760px;font-size:.9rem}
.matrix th,.matrix td{padding:var(--s4) var(--s4);text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.matrix thead th{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);padding-block:var(--s3) var(--s4);vertical-align:bottom}
.matrix thead th span{display:block;font-size:.62rem;letter-spacing:.06em;color:var(--fg-faint);opacity:.75;margin-top:2px;text-transform:none}
.matrix tbody th:first-child,.matrix tbody td:first-child,.matrix thead th:first-child{position:sticky;left:0;background:var(--paper);z-index:1;font-weight:500;color:var(--ink)}
.matrix .col-tt{background:var(--ink);color:var(--fg-on-ink);font-weight:500}
.matrix thead .col-tt{color:var(--paper);background:var(--ink);border-bottom-color:var(--ink)}
.matrix tbody tr:last-child td{border-bottom:1px solid var(--rule)}
.matrix .y::before{content:"✓";font-family:var(--font-mono);margin-right:.5em;color:var(--accent-ink)}
.matrix .col-tt.y{color:var(--fg-on-ink)}
.matrix .p{color:var(--fg-soft)}
.matrix .n{color:var(--fg-faint)}
.matrix tbody tr{transition:background var(--d1) var(--ease)}
.matrix tbody tr:hover td:not(.col-tt){background:rgba(20,20,20,.025)}
.matrix tbody tr:hover th:first-child,.matrix tbody tr:hover td:first-child{background:var(--paper-3)}
.section--band .matrix tbody th:first-child,.section--band .matrix tbody td:first-child,.section--band .matrix thead th:first-child{background:var(--paper-3)}
.section--band .matrix tbody tr:hover th:first-child,.section--band .matrix tbody tr:hover td:first-child{background:#D2D2D2}

/* =========================================================
   CALCULATOR
   ========================================================= */
.calc{border:1px solid var(--rule);border-radius:var(--r-3);background:var(--paper-2);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.calc__inputs{padding:clamp(24px,3vw,40px);border-right:1px solid var(--rule)}
.calc__results{padding:clamp(24px,3vw,40px);background:var(--ink);color:var(--fg-on-ink);position:relative}
.field{margin-bottom:var(--s6)}
.field--mini{margin-bottom:var(--s4)}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);font-size:.9rem;color:var(--fg-soft);margin-bottom:var(--s3)}
.field label b{color:var(--ink);font-weight:500}
.field output{font-family:var(--font-mono);font-size:.95rem;font-weight:500;color:var(--ink);flex:0 0 auto}
.field__scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.66rem;color:var(--fg-faint);margin-top:var(--s2)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--rule-2);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ink);cursor:grab;transition:transform var(--d1) var(--ease),background var(--d1) var(--ease)}
input[type=range]::-webkit-slider-thumb:hover{background:var(--accent)}
input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.25);background:var(--accent)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--ink);cursor:grab}
input[type=range]::-moz-range-track{height:1px;background:var(--rule-2)}
.calc__assume{font-size:.82rem;color:var(--fg-faint);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);line-height:1.5}
.calc__assume b{color:var(--fg-soft);font-weight:500}
.assume-toggle{background:none;border:0;cursor:pointer;font-size:.82rem;color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;padding:0}
.calc__advanced{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule)}

.result__label{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-ink-faint);display:block}
.result__num{display:block;font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:700;letter-spacing:-.015em;line-height:1;margin-top:var(--s2);font-variant-numeric:tabular-nums;color:var(--fg-on-ink)}
.result__unit{display:block;font-size:.78rem;color:var(--fg-on-ink-faint);margin-top:var(--s2)}
.result--loss{padding-bottom:var(--s5);border-bottom:1px solid var(--rule-ink);margin-bottom:var(--s5)}
.result--loss .result__num{color:var(--paper)}
.result--gain .result__num,.result--net .result__num{font-size:clamp(1.6rem,3vw,2.1rem)}
.result--net .result__num{color:var(--accent-ink)}
.costbar{display:flex;height:6px;border-radius:var(--r-1);overflow:hidden;margin-top:var(--s5);background:rgba(240,240,240,.1)}
.costbar__seg{width:0;transition:width var(--d3) var(--ease)}
.costbar__seg--a{background:rgba(240,240,240,.92)}
.costbar__seg--b{background:rgba(240,240,240,.55)}
.costbar__seg--c{background:rgba(240,240,240,.26)}
.costkey{list-style:none;margin-top:var(--s4);display:grid;gap:var(--s2)}
.costkey li{display:flex;align-items:center;gap:var(--s3);font-size:.82rem;color:var(--fg-on-ink-soft)}
.costkey b{margin-left:auto;font-family:var(--font-mono);font-weight:500;color:var(--fg-on-ink)}
.costkey__dot{width:8px;height:2px;flex:0 0 auto}
.costkey__dot--a{background:rgba(240,240,240,.92)}
.costkey__dot--b{background:rgba(240,240,240,.55)}
.costkey__dot--c{background:rgba(240,240,240,.26)}
.result__split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-bottom:var(--s5)}
.result__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:var(--s4);padding-block:var(--s4);border-block:1px solid var(--rule-ink);margin-bottom:var(--s5)}
.result__meta>div{display:flex;flex-direction:column;gap:2px}
.result__meta b{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--fg-on-ink);letter-spacing:-.02em}
.result__meta span{font-size:.68rem;color:var(--fg-on-ink-faint);line-height:1.3}
.calc__disclaimer{font-size:.72rem;color:var(--fg-on-ink-faint);margin-top:var(--s4)}
.calc__warn{margin-top:var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--rule-ink-2);border-left:2px solid var(--accent-ink);border-radius:var(--r-2);font-size:.82rem;line-height:1.5;color:var(--fg-on-ink-soft)}
.calc__warn b{color:var(--fg-on-ink);font-weight:500}
.calc__warn[hidden]{display:none}
.bump{animation:bump var(--d2) var(--ease)}
@keyframes bump{0%{opacity:.65}100%{opacity:1}}

/* email-to-reveal gate */
.calc__gate{position:relative;display:grid}
.calc__gate>#calcReveal,.calc__gate>.calclock{grid-area:1/1}
#calcReveal{transition:filter var(--d3) var(--ease)}
#calcReveal.is-locked{filter:blur(10px);pointer-events:none;user-select:none;min-height:240px;opacity:.5}
.calclock{position:relative;z-index:3;align-self:center;padding:var(--s5);border:1px solid var(--rule-ink-2);border-radius:var(--r-3);background:rgba(20,20,20,.86);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.calclock h4{font-size:1.05rem;margin-bottom:var(--s2);color:var(--fg-on-ink)}
.calclock p{font-size:.85rem;color:var(--fg-on-ink-soft);margin-bottom:var(--s4)}

/* =========================================================
   FORMS
   ========================================================= */
.field-text{display:block;margin-bottom:var(--s4)}
.field-text>span{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:var(--s2)}
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%;background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--r-2);
  padding:.72em .85em;color:var(--ink);font-family:inherit;font-size:.95rem;
  transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink);background:#fff}
input::placeholder,textarea::placeholder{color:var(--fg-faint)}
input.invalid,textarea.invalid{border-color:var(--danger)}
textarea{resize:vertical;min-height:7em;line-height:1.55}
select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-soft) 50%),linear-gradient(135deg,var(--fg-soft) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2em}
.leadform{display:grid;gap:var(--s3)}
.leadform__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.leadform__legal{font-size:.7rem;color:var(--fg-faint);line-height:1.45}
.leadcap{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--rule-ink)}
.leadcap__title{font-size:1rem;font-weight:500;margin-bottom:var(--s1);color:var(--fg-on-ink)}
.leadcap__sub{font-size:.84rem;color:var(--fg-on-ink-soft);margin-bottom:var(--s4)}
/* /contact/ — form beside the direct routes. Layout only; every colour, rule
   and radius below is an existing token. */
.contactgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.contactform{max-width:640px}
.contactform .field-text{margin-bottom:0}
.contactform__err{font-size:.82rem;color:var(--danger);line-height:1.45}
.contactform__count{font-family:var(--font-mono);font-size:.72rem;color:var(--fg-faint);text-align:right}
.contactaside{display:grid;gap:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s5)}
.contactaside__block h3{font-size:.95rem;font-weight:600;margin-bottom:var(--s1)}
.contactaside__block p{font-size:.86rem;color:var(--fg-soft);line-height:1.55}
/* Inline links here inherit the paragraph colour and were indistinguishable
   from the text around them — colour alone would not have been enough anyway,
   so they get the same underline treatment as .prose links. */
.contactaside__block p a,.contactform .leadform__legal a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.contactaside__block p a:hover,.contactform .leadform__legal a:hover{text-decoration-color:var(--accent)}
.contactaside__link{display:inline-block;margin-top:var(--s2);font-family:var(--font-mono);font-size:.86rem;color:var(--accent)}
.contactsuccess{max-width:720px;padding-block:var(--s5)}
.contactsuccess h2{margin-block:var(--s2) var(--s3)}
.leadsuccess{padding-block:var(--s4)}
.leadsuccess h4{font-size:1.1rem;margin-bottom:var(--s2)}
.leadsuccess p{font-size:.9rem;color:var(--fg-soft)}
/* on the ink panel the lead form inverts */
.calc__results .leadform input,.calclock .leadform input{background:rgba(240,240,240,.06);border-color:var(--rule-ink-2);color:var(--fg-on-ink)}
.calc__results .leadform input::placeholder,.calclock .leadform input::placeholder{color:var(--fg-on-ink-faint)}
.calc__results .leadform input:focus,.calclock .leadform input:focus{border-color:var(--paper);background:rgba(240,240,240,.1)}
.calc__results .leadform__legal,.calclock .leadform__legal{color:var(--fg-on-ink-faint)}
.calc__results .btn--primary,.calclock .btn--primary{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-bd:var(--paper)}
.calc__results .btn--primary:hover,.calclock .btn--primary:hover{--btn-bg:var(--accent-ink);--btn-fg:var(--ink);--btn-bd:var(--accent-ink)}
.calc__results .leadsuccess h4{color:var(--fg-on-ink)}
.calc__results .leadsuccess p{color:var(--fg-on-ink-soft)}

/* =========================================================
   LIVE DEMO
   ========================================================= */
.demo__inner{display:grid;grid-template-columns:1fr .82fr;gap:clamp(32px,5vw,72px);align-items:start}
.demo__points{list-style:none;margin-top:var(--s6);border-top:1px solid var(--rule)}
.demo__points li{padding-block:var(--s3);border-bottom:1px solid var(--rule);color:var(--fg-soft);font-size:.94rem;display:flex;gap:var(--s3)}
.demo__points li::before{content:"—";color:var(--fg-faint);font-family:var(--font-mono)}
/* Same trap as .statrow: this list is authored on /demo/'s INK hero, but its
   colours are the paper ones — 1.92:1 for the text and worse for the dash. */
.pagehero--ink .demo__points li,.section--ink .demo__points li{color:var(--fg-on-ink-soft)}
.pagehero--ink .demo__points li::before,.section--ink .demo__points li::before{color:var(--fg-on-ink-faint)}
.console{border:1px solid var(--rule-ink);border-radius:var(--r-3);background:var(--ink);color:var(--fg-on-ink);overflow:hidden;box-shadow:var(--lift)}
.console__bar{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule-ink);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-ink-faint)}
.console__live{display:inline-flex;align-items:center;gap:var(--s2);color:var(--fg-on-ink)}
.console__body{padding:var(--s5)}
.console .field-text>span{color:var(--fg-on-ink-faint)}
.console input,.console select{background:rgba(240,240,240,.06);border-color:var(--rule-ink-2);color:var(--fg-on-ink)}
.console input::placeholder{color:var(--fg-on-ink-faint)}
.console input:focus,.console select:focus{border-color:var(--paper);background:rgba(240,240,240,.1)}
.console select{background-image:linear-gradient(45deg,transparent 50%,var(--fg-on-ink-soft) 50%),linear-gradient(135deg,var(--fg-on-ink-soft) 50%,transparent 50%)}
.console select option{color:#141414;background:#fff}
.console .btn--primary{--btn-bg:var(--accent-ink);--btn-fg:var(--ink);--btn-bd:var(--accent-ink)}
.console .btn--primary:hover{--btn-bg:var(--accent-2);--btn-bd:var(--accent-2)}
.console .btn--ghost{--btn-fg:var(--fg-on-ink);--btn-bd:var(--rule-ink-2)}
.console .btn--ghost:hover{--btn-bd:var(--paper);--btn-bg:rgba(240,240,240,.07)}
.console__legal{font-size:.7rem;color:var(--fg-on-ink-faint);margin-top:var(--s3);line-height:1.45}
.demoform__phone{display:grid;grid-template-columns:96px 1fr;gap:var(--s2)}

.demostate h3{font-size:1.25rem;color:var(--fg-on-ink);margin-bottom:var(--s2)}
.demostate>p{color:var(--fg-on-ink-soft);font-size:.9rem}
.demostate__lang{display:inline-block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--fg-on-ink-soft);border:1px solid var(--rule-ink-2);border-radius:var(--r-2);padding:.25em .6em;margin-top:var(--s3)}
.demostate canvas{width:100%;height:48px;display:block;margin-block:var(--s4)}
.demostate__note{font-size:.7rem;color:var(--fg-on-ink-faint);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule-ink)}
.demotranscript{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.demotranscript:empty{display:none}
.demoline{max-width:90%;font-size:.88rem;line-height:1.45;padding:.5em .75em;border-radius:var(--r-3);animation:lineUp var(--d2) var(--ease-out) both}
.demoline--agent{align-self:flex-start;background:rgba(240,240,240,.07);border:1px solid var(--rule-ink);border-bottom-left-radius:var(--r-1)}
.demoline--caller{align-self:flex-end;border:1px solid var(--rule-ink-2);border-bottom-right-radius:var(--r-1);color:var(--fg-on-ink-soft)}
.demoline--system{align-self:stretch;max-width:100%;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--fg-on-ink-faint);padding:0;border:0}
.demoline__who{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-ink-faint);margin-bottom:.25em}

/* =========================================================
   INDUSTRIES
   ========================================================= */
.indlist{border-top:1px solid var(--rule)}
.indrow{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s5);align-items:baseline;padding-block:clamp(20px,2.4vw,28px);border-bottom:1px solid var(--rule);transition:background var(--d2) var(--ease),padding-inline var(--d2) var(--ease)}
.indrow:hover{background:rgba(20,20,20,.025);padding-inline:var(--s3)}
.indrow__n{font-family:var(--font-mono);font-size:.72rem;color:var(--fg-faint);letter-spacing:.1em}
.indrow h3{font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.015em;margin-bottom:var(--s2)}
.indrow p{color:var(--fg-soft);font-size:.94rem;max-width:64ch}
.indrow__go{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);white-space:nowrap;transition:color var(--d1) var(--ease),transform var(--d2) var(--ease)}
.indrow:hover .indrow__go{color:var(--accent);transform:translateX(3px)}

/* =========================================================
   THE PROMISE — the biggest typographic moment
   ========================================================= */
.promise{background:var(--ink);color:var(--fg-on-ink);padding-block:clamp(80px,12vw,168px)}
.promise__q{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,5.4vw,4.5rem);letter-spacing:-.015em;line-height:1.05;max-width:16ch}
.promise__q .em{color:var(--paper)}
.promise__a{margin-top:clamp(32px,5vw,64px);padding-top:var(--s5);border-top:1px solid var(--rule-ink);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.promise__stamp{font-family:var(--font-mono);font-size:clamp(1.05rem,2.2vw,1.6rem);letter-spacing:.02em;line-height:1.3;color:var(--accent-ink);text-transform:uppercase}
.promise__a p{color:var(--fg-on-ink-soft);font-size:1rem;line-height:1.6}
.promise__a .btn{margin-top:var(--s5)}

/* =========================================================
   FINAL CTA — three doors as ruled rows
   ========================================================= */
.doors{border-top:1px solid var(--rule)}
.door{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s5);align-items:center;padding-block:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--rule);transition:background var(--d2) var(--ease),padding-inline var(--d2) var(--ease)}
.door:hover{background:var(--ink);color:var(--fg-on-ink);padding-inline:var(--s4)}
.door__n{font-family:var(--font-mono);font-size:.72rem;color:var(--fg-faint);letter-spacing:.1em}
.door:hover .door__n{color:var(--fg-on-ink-faint)}
.door b{font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600;letter-spacing:-.015em;display:block}
.door__c span{font-size:.88rem;color:var(--fg-soft)}
.door:hover .door__c span{color:var(--fg-on-ink-soft)}
.door__go{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);white-space:nowrap;transition:transform var(--d2) var(--ease)}
.door:hover .door__go{color:var(--paper);transform:translateX(4px)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--ink);color:var(--fg-on-ink);padding-top:clamp(56px,7vw,88px);padding-bottom:var(--s6)}
.footer__inner{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s7);padding-bottom:var(--s7);border-bottom:1px solid var(--rule-ink)}
.footer__brand p{color:var(--fg-on-ink-soft);font-size:.92rem;margin-top:var(--s4);max-width:32ch;line-height:1.55}
.footer__parent{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-on-ink-faint);margin-top:var(--s5)}
.footer__col h4{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-ink-faint);margin-bottom:var(--s4)}
.footer__col a{display:block;color:var(--fg-on-ink-soft);font-size:.9rem;padding-block:var(--s2);transition:color var(--d1) var(--ease)}
.footer__col a:hover{color:var(--paper)}
.footer__bottom{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s5);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--fg-on-ink-faint)}
/* legal row in the footer bottom bar — text links, never badges */
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
.footer__legal a{color:var(--fg-on-ink-faint);text-decoration:none;transition:color var(--d1) var(--ease)}
.footer__legal a:hover{color:var(--fg-on-ink)}
@media(max-width:640px){.footer__bottom{flex-direction:column-reverse;align-items:flex-start}}


/* =========================================================
   SUBPAGE FURNITURE
   ========================================================= */
.pagehero{padding-top:clamp(112px,15vh,168px);padding-bottom:clamp(32px,5vw,64px)}
.pagehero--ink{background:var(--ink);color:var(--fg-on-ink)}
.pagehero--ink .pagehero__lead{color:var(--fg-on-ink-soft)}
.pagehero--ink .breadcrumb{color:var(--fg-on-ink-faint)}
.pagehero--ink .breadcrumb a{color:var(--fg-on-ink-soft)}
.pagehero--ink .breadcrumb a:hover{color:var(--paper)}
.pagehero__inner{max-width:900px}
.breadcrumb{display:flex;gap:var(--s2);align-items:center;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:var(--s6)}
.breadcrumb a{transition:color var(--d1) var(--ease)}
.breadcrumb a:hover{color:var(--ink)}
.pagehero h1{font-size:var(--t-h1);letter-spacing:-.015em}
.pagehero__lead{margin-top:var(--s5);font-size:var(--t-lead);color:var(--fg-soft);max-width:62ch;line-height:1.6}
.pagehero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.pagehero--ink .btn--primary{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-bd:var(--paper)}
.pagehero--ink .btn--primary:hover{--btn-bg:var(--accent-ink);--btn-fg:var(--ink);--btn-bd:var(--accent-ink)}
.pagehero--ink .btn--ghost{--btn-fg:var(--fg-on-ink);--btn-bd:var(--rule-ink-2)}
.pagehero--ink .btn--ghost:hover{--btn-bd:var(--paper);--btn-bg:rgba(240,240,240,.07)}

/* ruled card list (replaces the old glass card grids) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.tiles--2{grid-template-columns:repeat(2,1fr)}
.tile{background:var(--paper);padding:var(--s6) var(--s5);transition:background var(--d2) var(--ease)}
.tile:hover{background:var(--paper-2)}
.tile__n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:var(--fg-faint);display:block;margin-bottom:var(--s4)}
.tile h3{margin-bottom:var(--s3)}
.tile p{color:var(--fg-soft);font-size:.92rem;line-height:1.55}
.tile__meta{display:block;margin-top:var(--s4);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--accent)}
a.tile:hover{background:var(--ink);color:var(--fg-on-ink)}
a.tile:hover p{color:var(--fg-on-ink-soft)}
a.tile:hover .tile__n{color:var(--fg-on-ink-faint)}

/* feature rows */
.featrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,72px);border-bottom:1px solid var(--rule)}
.featrow:last-child{border-bottom:0}
.featrow:nth-child(even) .featrow__media{order:-1}
.featrow h3{font-size:clamp(1.35rem,2.4vw,1.9rem);margin-bottom:var(--s4)}
.featrow p{color:var(--fg-soft)}
.featrow ul{list-style:none;margin-top:var(--s5);border-top:1px solid var(--rule)}
.featrow li{padding-block:var(--s3);border-bottom:1px solid var(--rule);color:var(--fg-soft);font-size:.92rem;display:flex;gap:var(--s3)}
.featrow li::before{content:"→";font-family:var(--font-mono);color:var(--fg-faint)}
.featrow__media{background:var(--ink);color:var(--fg-on-ink);border-radius:var(--r-3);padding:var(--s6);min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s3)}
.featrow__media .mono{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-on-ink-faint)}
.featrow__media q{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,1.9vw,1.4rem);line-height:1.4;letter-spacing:-.02em;quotes:"“" "”"}
.featrow__media em{font-style:normal;font-family:var(--font-mono);font-size:.72rem;color:var(--accent-ink);letter-spacing:.06em}

/* metric band */
.metricband{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.metricband__item{padding:var(--s6) var(--s4) var(--s6) 0;border-right:1px solid var(--rule)}
.metricband__item:last-child{border-right:0}
.metricband__item:not(:first-child){padding-left:var(--s4)}
.metricband__item b{display:block;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.015em;line-height:1}
.metricband__item>span{display:block;margin-top:var(--s2);font-size:.82rem;color:var(--fg-soft);line-height:1.4}

/* CTA band */
.ctaband{border-top:1px solid var(--rule);padding-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1fr auto;gap:var(--s6);align-items:end}
.ctaband h2{max-width:20ch}
.ctaband p{color:var(--fg-soft);margin-top:var(--s4);max-width:52ch}
.ctaband__actions{display:flex;gap:var(--s3);flex-wrap:wrap}
.section--ink .ctaband{border-color:var(--rule-ink)}
.section--ink .ctaband p{color:var(--fg-on-ink-soft)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.plan{background:var(--paper);padding:var(--s6) var(--s5);display:flex;flex-direction:column}
.plan--featured{background:var(--ink);color:var(--fg-on-ink)}
.plan__tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.plan--featured .plan__tag{color:var(--accent-ink)}
.plan__price{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;letter-spacing:-.015em;margin-top:var(--s5);line-height:1}
.plan__price span{display:block;font-size:.78rem;font-weight:400;letter-spacing:0;color:var(--fg-faint);margin-top:var(--s2)}
.plan--featured .plan__price span{color:var(--fg-on-ink-faint)}
.plan__desc{color:var(--fg-soft);font-size:.9rem;margin-top:var(--s4);min-height:3.6em;line-height:1.5}
.plan--featured .plan__desc{color:var(--fg-on-ink-soft)}
.plan ul{list-style:none;margin-block:var(--s5);border-top:1px solid var(--rule);flex:1}
.plan--featured ul{border-color:var(--rule-ink)}
.plan li{padding-block:var(--s3);border-bottom:1px solid var(--rule);font-size:.88rem;color:var(--fg-soft)}
.plan--featured li{border-color:var(--rule-ink);color:var(--fg-on-ink-soft)}
.plan li b{color:var(--ink);font-weight:500}
.plan--featured li b{color:var(--fg-on-ink)}
.plan--featured .btn--primary{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-bd:var(--paper)}
.plan--featured .btn--primary:hover{--btn-bg:var(--accent-ink);--btn-fg:var(--ink);--btn-bd:var(--accent-ink)}
.pricing__note{margin-top:var(--s6);color:var(--fg-soft);max-width:70ch}
.pricing__note b{color:var(--ink);font-weight:500}
/* The disclosure under the headline rate: quieter than the price it qualifies,
   but never hidden — it is the line that stops "from ₹2.5" reading as "₹2.5". */
.pricing__note--fine{margin-top:var(--s3);font-size:.86rem;color:var(--fg-soft)}

/* Headline rate on /pricing/. Hairline rules instead of a card, no colour — the
   emphasis is size and weight, per the Ledger rules.
   The FIGURE is the display face with tabular-nums, matching .result__num,
   .statrow b, .plan__price and .metricband__item b. It is NOT mono: a true
   monospace gives the decimal point a full character cell, so at 4.2rem
   "₹2.5" reads as "₹2 . 5". Mono is for labels and table cells here, not for
   a headline number. (Both rules used to say var(--mono), a token this
   stylesheet never defined, so they silently inherited the body face.) */
.rateline{margin:var(--s6) 0 var(--s7);padding:var(--s5) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.rateline__lede{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);margin:0}
.rateline__fig{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s3);margin:var(--s2) 0 0}
.rateline__amt{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.015em;font-size:clamp(2.6rem,7vw,4.2rem);line-height:1;color:var(--ink)}
.rateline__unit{font-size:1rem;color:var(--fg-soft)}
.rateline__terms{margin:var(--s3) 0 0;max-width:62ch;font-size:.86rem;line-height:1.55;color:var(--fg-soft)}


/* faq */
.faqlist{border-top:1px solid var(--rule);max-width:820px}
.faqitem{border-bottom:1px solid var(--rule)}
.faqitem summary{list-style:none;cursor:pointer;padding-block:var(--s5);font-family:var(--font-display);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center;gap:var(--s4)}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem__plus{position:relative;width:12px;height:12px;flex:0 0 auto}
.faqitem__plus::before,.faqitem__plus::after{content:"";position:absolute;background:var(--fg-soft);transition:transform var(--d2) var(--ease)}
.faqitem__plus::before{top:5.5px;left:0;width:12px;height:1px}
.faqitem__plus::after{left:5.5px;top:0;width:1px;height:12px}
.faqitem[open] .faqitem__plus::after{transform:scaleY(0)}
.faqitem p{padding-bottom:var(--s5);color:var(--fg-soft);font-size:.94rem;max-width:70ch;line-height:1.6}

/* prose */
.prose{max-width:620px}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:var(--s7) 0 var(--s4)}
.prose h3{margin:var(--s6) 0 var(--s3)}
.prose p{color:var(--fg-soft);margin-bottom:var(--s4);line-height:1.65}
.prose ul{margin:0 0 var(--s4) var(--s5);color:var(--fg-soft)}
.prose li{margin-bottom:var(--s2)}

/* vertical timeline */
.vtimeline{border-top:1px solid var(--rule);max-width:900px}
.vstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);padding-block:clamp(24px,3.4vw,40px);border-bottom:1px solid var(--rule);align-items:start}
.vstep__n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--fg-faint);padding-top:.35em}
.vstep h3{margin-bottom:var(--s3)}
.vstep p{color:var(--fg-soft);max-width:62ch}

/* 404 */
.notfound{min-height:66vh;display:flex;flex-direction:column;justify-content:center;padding-top:120px}
.notfound__code{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--fg-faint);margin-bottom:var(--s5)}
.notfound h1{font-size:var(--t-h1)}
.notfound p{color:var(--fg-soft);margin:var(--s4) 0 var(--s6);max-width:44ch;font-size:var(--t-lead)}

/* =========================================================
   MOTION — reveal, applied sparingly and only downward
   ========================================================= */
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--d3) var(--ease-out),transform var(--d3) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1040px){
  .hero__inner{grid-template-columns:1fr;gap:var(--s7)}
  .hero__sub{max-width:52ch}
  .caps{grid-template-columns:repeat(2,1fr)}
  .cap{padding-inline:0 var(--s5)}
  .cap:nth-child(2n){border-right:0;padding-left:var(--s5)}
  .cap:nth-child(n+3){border-top:1px solid var(--rule)}
  .journey{grid-template-columns:repeat(2,1fr)}
  .journey__step{border-bottom:1px solid var(--rule-ink)}
  .journey__step:nth-child(2n){border-right:0}
  .demo__inner{grid-template-columns:1fr}
  .plans,.tiles{grid-template-columns:1fr}
  .featrow{grid-template-columns:1fr}
  .featrow:nth-child(even) .featrow__media{order:0}
  .promise__a{grid-template-columns:1fr}
  .ctaband{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr 1fr;gap:var(--s6)}
}
@media(max-width:760px){
  .calc{grid-template-columns:1fr}
  .calc__inputs{border-right:0;border-bottom:1px solid var(--rule)}
  .result__split{grid-template-columns:1fr;gap:var(--s4)}
  .statrow{grid-template-columns:1fr;gap:var(--s3)}
  .metricband{grid-template-columns:repeat(2,1fr)}
  .metricband__item{border-bottom:1px solid var(--rule);padding-block:var(--s5)}
  .metricband__item:nth-child(2n){border-right:0}
  .metricband__item:nth-last-child(-n+2){border-bottom:0}
  .hero__facts{grid-template-columns:1fr;gap:var(--s4)}
  .hero__fact{display:flex;align-items:baseline;gap:var(--s3)}
  .hero__fact b{font-size:1.25rem}
  .caps{grid-template-columns:1fr}
  .cap{border-right:0;padding-left:0!important;padding-block:var(--s5)}
  .cap:not(:first-child){border-top:1px solid var(--rule)}
  .journey{grid-template-columns:1fr}
  .journey__step{border-right:0}
  .indrow,.door{grid-template-columns:auto 1fr;row-gap:var(--s2)}
  .indrow__go,.door__go{grid-column:2;text-align:left}
  .leadform__row{grid-template-columns:1fr}
  .contactgrid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
  .sb__pipe{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sb__step{font-size:.5rem;letter-spacing:.05em;padding:10px 3px}
  .promise__a{gap:var(--s5)}
}
@media(max-width:400px){
  :root{--gutter:18px}
}

/* =========================================================
   CURSOR — the mark from the logo

   Three tones so it never disappears: ink on the grey page, paper on the
   ink surfaces, accent on anything you can click (so the hover state still
   announces itself). Each is a flat silhouette with a contrast halo baked
   in, at 1x and 2x.

   Gated to fine pointers: a custom cursor is meaningless on touch, and this
   also keeps it away from devices where it would only get in the way. Every
   declaration keeps a real keyword fallback after the comma, so if the image
   fails to load the normal cursor is still correct.
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  body{
    cursor:url("/assets/img/cursor-ink.png") 2 2, auto;
    cursor:-webkit-image-set(url("/assets/img/cursor-ink.png") 1x, url("/assets/img/cursor-ink@2x.png") 2x) 2 2, auto;
    cursor:image-set(url("/assets/img/cursor-ink.png") 1x, url("/assets/img/cursor-ink@2x.png") 2x) 2 2, auto;
  }
  .hero,.section--ink,.promise,.footer,.pagehero--ink,.console,.calc__results,
  .switchboard,.featrow__media,.plan--featured,.calclock{
    cursor:url("/assets/img/cursor-paper.png") 2 2, auto;
    cursor:-webkit-image-set(url("/assets/img/cursor-paper.png") 1x, url("/assets/img/cursor-paper@2x.png") 2x) 2 2, auto;
    cursor:image-set(url("/assets/img/cursor-paper.png") 1x, url("/assets/img/cursor-paper@2x.png") 2x) 2 2, auto;
  }
  a,button,summary,label,select,[role="button"],
  .btn,.nav__burger,.scenario,.listen,.assume-toggle,.faqitem summary{
    cursor:url("/assets/img/cursor-accent.png?v=2") 2 2, pointer;
    cursor:-webkit-image-set(url("/assets/img/cursor-accent.png?v=2") 1x, url("/assets/img/cursor-accent@2x.png?v=2") 2x) 2 2, pointer;
    cursor:image-set(url("/assets/img/cursor-accent.png?v=2") 1x, url("/assets/img/cursor-accent@2x.png?v=2") 2x) 2 2, pointer;
  }
  /* Typing and dragging must keep their real affordances. */
  input[type="text"],input[type="email"],input[type="tel"],textarea{cursor:text}
  input[type="range"],input[type="range"]::-webkit-slider-thumb{cursor:grab}
  input[type="range"]:active{cursor:grabbing}
}

/* =========================================================
   A11Y & ANTI-SPAM
   ========================================================= */
.skip-link{position:fixed;top:-60px;left:12px;z-index:200;background:var(--ink);color:var(--paper);font-size:.85rem;padding:.6em 1em;border-radius:var(--r-2);transition:top var(--d2) var(--ease)}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-1)}
/* The ring is 2.80 against ink — under the 3:1 non-text floor. It was 2.84 in
   green and equally failing; blue is where you notice it. */
.section--ink :focus-visible,.promise :focus-visible,.hero :focus-visible,.pagehero--ink :focus-visible,.console :focus-visible,.calc__results :focus-visible,.footer :focus-visible{outline-color:var(--accent-ink)}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
#leadSuccess:focus,.demostate:focus,[tabindex="-1"]:focus{outline:none}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nav.is-stuck{background:var(--paper)}
  .calclock{background:var(--ink)}
}

/* =========================================================
   LEGAL & COMPLIANCE
   The register, the document stamp, and the prose a policy
   needs. No new colour, no new radius — status is carried by
   the mono label and the rule, not by a badge graphic. A wall
   of logos is exactly what /trust/ promises not to do.
   ========================================================= */

/* ---- document stamp: effective date + version, above the fold of a policy ---- */
.legalmeta{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:var(--s4);margin-bottom:var(--s7);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.legalmeta b{color:var(--ink);font-weight:500}

/* ---- table of contents ---- */
.toc{border-left:1px solid var(--rule-2);padding-left:var(--s5);margin-bottom:var(--s7);max-width:720px}
.toc h2{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);font-weight:500;margin:0 0 var(--s3)}
.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s6)}
.toc li{margin-bottom:var(--s2);break-inside:avoid}
.toc a{color:var(--fg-soft);font-size:.92rem;text-decoration:none;border-bottom:1px solid transparent;transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.toc a:hover{color:var(--ink);border-bottom-color:var(--rule-2)}
@media(max-width:640px){.toc ol{columns:1}}

/* ---- the compliance register ----
   One row per framework. `data-state` is the single source of visual truth,
   so a status can never drift from its styling:
     held      — we hold it, with an artefact to point at
     progress  — under way, dated, no badge earned yet
     none      — we do not hold it, said plainly
     na        — not applicable to this product, with the reason  */
.certgrid{border-top:1px solid var(--rule-2);margin-top:var(--s5)}
.cert{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;gap:var(--s4) var(--s5);align-items:baseline;padding-block:var(--s5);border-bottom:1px solid var(--rule)}
.cert__name{font-weight:500;color:var(--ink);font-size:1rem}
.cert__name small{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);font-weight:400;margin-top:3px}
.cert__note{color:var(--fg-soft);font-size:.92rem;line-height:1.6;max-width:56ch}
.cert__note a{color:var(--fg-soft);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.cert__note a:hover{color:var(--ink)}
.cert__state{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding:.42em .7em;border:1px solid var(--rule-2);border-radius:var(--r-1);color:var(--fg-faint);justify-self:end;align-self:start}
.cert[data-state="held"] .cert__state{color:var(--accent);border-color:var(--accent);font-weight:500}
.cert[data-state="held"] .cert__state::before{content:"✓ ";}
.cert[data-state="progress"] .cert__state{color:var(--fg-soft);border-color:var(--rule-2)}
.cert[data-state="none"] .cert__state,.cert[data-state="na"] .cert__state{color:var(--fg-faint);border-style:dashed}
@media(max-width:760px){
  .cert{grid-template-columns:1fr auto;gap:var(--s2) var(--s4)}
  .cert__note{grid-column:1/-1;max-width:none}
}
/* on ink */
.section--ink .certgrid{border-top-color:var(--rule-ink-2)}
.section--ink .cert{border-bottom-color:var(--rule-ink)}
.section--ink .cert__name{color:var(--fg-on-ink)}
.section--ink .cert__name small,.section--ink .cert__note{color:var(--fg-on-ink-soft)}
.section--ink .cert__state{color:var(--fg-on-ink-faint);border-color:var(--rule-ink-2)}
.section--ink .cert[data-state="held"] .cert__state{color:var(--accent-ink);border-color:var(--accent-ink)}

/* ---- prose extensions a policy document needs ---- */
.prose ol{margin:0 0 var(--s4) var(--s5);color:var(--fg-soft)}
.prose ol li{margin-bottom:var(--s2)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--accent)}
.prose strong{color:var(--ink);font-weight:600}
.prose h2{scroll-margin-top:96px}
.prose h2 .n{font-family:var(--font-mono);font-size:.62em;letter-spacing:.1em;color:var(--fg-faint);font-weight:400;margin-right:.7em;vertical-align:.12em}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:var(--s5)}
.prose th,.prose td{text-align:left;padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--fg-soft)}
.prose th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);font-weight:500}
.prose blockquote{border-left:2px solid var(--rule-2);padding-left:var(--s4);margin:0 0 var(--s4);color:var(--fg-soft)}
/* A four-column policy table cannot fit 375px, and the page body must never be
   what scrolls sideways. Same rule the .matrix-wrap container implements, but
   applied to the element itself so every prose table is covered — including the
   ones nobody has written yet. display:table on the sections keeps the column
   algorithm that display:block on the table alone would throw away. */
@media(max-width:700px){
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .prose thead,.prose tbody{display:table;width:100%;min-width:520px}
}

/* ---- contact block: grievance officer, security contact, DPO ---- */
.contactcard{border:1px solid var(--rule-2);border-radius:var(--r-3);padding:var(--s5);margin-bottom:var(--s5);max-width:720px}
.contactcard h3{margin:0 0 var(--s3)}
.contactcard dl{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:var(--s2) var(--s4);font-size:.92rem;margin:0}
.contactcard dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);padding-top:.3em}
.contactcard dd{color:var(--fg-soft);margin:0}
.contactcard dd a{color:var(--ink)}
@media(max-width:560px){.contactcard dl{grid-template-columns:1fr;gap:0 0}.contactcard dd{margin-bottom:var(--s3)}}

/* ---- cookie controls ---- */
.cookiestate{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;color:var(--fg-soft);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--s4);margin-bottom:var(--s5);max-width:720px;white-space:pre-wrap;line-height:1.7}
.cookiestate b{color:var(--ink);font-weight:500}