/* ==========================================================================
   SignalVibe — site.css
   Production stylesheet. Sprint 003.

   Structure
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout & surfaces
     05  Navigation
     06  Buttons & links
     07  Section components
     08  Proof object
     09  Forms
     10  Footer
     11  Motion & reveal
     12  Responsive
     13  Print

   Notes for migration
     - Every section is a self-contained `.sv-section` block. Markup can be
       lifted into a Squarespace code block without touching this file.
     - No framework, no build step, no dependencies.
     - Class names are namespaced `sv-` so nothing collides with a host theme.
   ========================================================================== */


/* 01  TOKENS
   ========================================================================== */
:root{
  /* Surfaces — luminance carries the emotional arc. See README. */
  --sv-ink:        #08090A;   /* house dark  */
  --sv-ink-2:      #0E1011;
  --sv-ink-3:      #15181A;
  --sv-void:       #000000;   /* used ONCE, movement 03 */
  --sv-bone:       #C9C5BC;   /* explanation surface */
  --sv-bone-2:     #D6D2CA;
  --sv-paper:      #EDEBE7;   /* used ONCE as a background, movement 09 */

  /* Ink on surfaces */
  --sv-on-dark:    #EDEBE7;
  --sv-on-dark-2:  rgba(237,235,231,.72);
  --sv-on-dark-3:  rgba(237,235,231,.56);  /* 4.9:1 on ink */
  --sv-on-light:   #14140F;
  --sv-on-light-2: rgba(20,20,15,.72);
  --sv-on-light-3: rgba(20,20,15,.66);    /* 4.7:1 on bone */

  /* Accent — means exactly one thing: verified, or forward-looking-and-labelled */
  --sv-signal:     #A9E4F0;
  --sv-signal-ink: #12525E;   /* 5.1:1 on bone, 7.4:1 on paper */

  /* Lines */
  --sv-line-d:     rgba(237,235,231,.14);
  --sv-line-d-2:   rgba(237,235,231,.28);
  --sv-line-l:     rgba(20,20,15,.16);
  --sv-line-l-2:   rgba(20,20,15,.30);

  /* Type */
  --sv-sans: "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;
  --sv-mono: "Söhne Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
             "SF Mono", Menlo, Consolas, monospace;

  /* Scale — clamps handle every breakpoint; no per-device overrides needed */
  --sv-t-display: clamp(2.35rem, 5.4vw, 4.6rem);
  --sv-t-h1:      clamp(2.1rem, 4.6vw, 4rem);
  --sv-t-h2:      clamp(1.65rem, 2.9vw, 2.4rem);
  --sv-t-h3:      clamp(1.2rem, 1.7vw, 1.45rem);
  --sv-t-lede:    clamp(1.075rem, 1.5vw, 1.375rem);
  --sv-t-body:    1.0625rem;
  --sv-t-small:   0.875rem;
  --sv-t-mono:    0.75rem;
  --sv-t-eyebrow: 0.65rem;

  /* Space */
  --sv-gutter:    clamp(1.5rem, 6vw, 7rem);
  --sv-section-y: clamp(5.5rem, 11vw, 11rem);
  --sv-measure:   40rem;
  --sv-wide:      74rem;

  /* Motion */
  --sv-ease:      cubic-bezier(.16, 1, .3, 1);
  --sv-ease-io:   cubic-bezier(.65, 0, .35, 1);
  --sv-t-fast:    160ms;
  --sv-t-base:    380ms;
  --sv-t-slow:    700ms;
  --sv-t-cine:    1400ms;

  --sv-radius:    3px;
  --sv-nav-h:     64px;
}


/* 02  RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;
  background:var(--sv-ink);
  color:var(--sv-on-dark);
  font-family:var(--sv-sans);
  font-size:var(--sv-t-body);
  font-weight:300;
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:proportional-nums;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}
::selection{background:var(--sv-signal);color:var(--sv-ink)}

/* Focus — visible, never removed. */
:focus-visible{
  outline:2px solid var(--sv-signal);
  outline-offset:3px;
  border-radius:2px;
}
.sv-surface--bone :focus-visible,
.sv-surface--paper :focus-visible{outline-color:var(--sv-signal-ink)}

.sv-skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--sv-paper);color:var(--sv-ink);
  padding:.75rem 1.25rem;font-size:var(--sv-t-small);font-weight:600;
  border-radius:0 0 var(--sv-radius) 0;
}
.sv-skip:focus{left:0}

.sv-visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* 03  TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4{
  font-weight:600;
  line-height:1.04;
  margin:0 0 1rem;
  text-wrap:balance;
}
h1{font-size:var(--sv-t-h1);letter-spacing:-.042em}
h2{font-size:var(--sv-t-h2);letter-spacing:-.035em}
h3{font-size:var(--sv-t-h3);letter-spacing:-.025em;line-height:1.2}
p{margin:0 0 1.15rem;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:600}
em{font-style:normal;color:var(--sv-signal)}
.sv-surface--bone em,.sv-surface--paper em{color:var(--sv-signal-ink)}

.sv-display{
  font-size:var(--sv-t-display);
  font-weight:600;
  letter-spacing:-.048em;
  line-height:.98;
  margin:0 0 1.5rem;
  text-wrap:balance;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"ss03" 1;
}
.sv-lede{
  font-size:var(--sv-t-lede);
  font-weight:300;
  line-height:1.45;
  letter-spacing:-.012em;
  color:var(--sv-on-dark-2);
  max-width:34rem;
  margin:0 0 2rem;
  text-wrap:pretty;
}
.sv-surface--bone .sv-lede,.sv-surface--paper .sv-lede{color:var(--sv-on-light-2)}

.sv-eyebrow{
  font-family:var(--sv-mono);
  font-size:var(--sv-t-eyebrow);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sv-on-dark-3);
  margin:0 0 1.5rem;
  display:block;
}
.sv-surface--bone .sv-eyebrow,.sv-surface--paper .sv-eyebrow{color:var(--sv-on-light-3)}

/* Mono is semantic: it means "this is evidence". Never decorative. */
.sv-mono{
  font-family:var(--sv-mono);
  font-size:var(--sv-t-mono);
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}

.sv-small{font-size:var(--sv-t-small);color:var(--sv-on-dark-3)}
.sv-surface--bone .sv-small,.sv-surface--paper .sv-small{color:var(--sv-on-light-3)}

/* Lists */
.sv-list{list-style:none;padding:0;margin:0 0 1.5rem}
.sv-list li{position:relative;padding-left:1.4rem;margin-bottom:.7rem;color:var(--sv-on-dark-2);text-wrap:pretty}
.sv-list li::before{
  content:"";position:absolute;left:0;top:.85em;
  width:.4rem;height:1px;background:currentColor;opacity:.45;
}
.sv-surface--bone .sv-list li,.sv-surface--paper .sv-list li{color:var(--sv-on-light-2)}

.sv-steps{list-style:none;padding:0;margin:0;counter-reset:sv-step}
.sv-steps > li{counter-increment:sv-step;padding:2rem 0;border-top:1px solid var(--sv-line-l)}
.sv-steps > li:first-child{border-top:0}
.sv-surface--dark .sv-steps > li{border-color:var(--sv-line-d)}
.sv-steps > li::before{
  content:counter(sv-step,decimal-leading-zero);
  display:block;font-family:var(--sv-sans);font-size:clamp(2rem,4vw,3.25rem);
  font-weight:600;letter-spacing:-.05em;line-height:1;opacity:.22;margin-bottom:.75rem;
}


/* 04  LAYOUT & SURFACES
   ========================================================================== */
.sv-section{
  padding:var(--sv-section-y) var(--sv-gutter);
  position:relative;
  overflow:hidden;
}
.sv-inner{max-width:var(--sv-measure);margin-inline:auto}

/* Consecutive sections on the same surface read as one world. Collapse the
   doubled padding and mark the seam with a hairline instead of a gap. */
.sv-surface--bone + .sv-surface--bone,
.sv-surface--paper + .sv-surface--paper{
  padding-top:calc(var(--sv-section-y) * .58);
}
.sv-surface--bone + .sv-surface--bone::before,
.sv-surface--dark + .sv-surface--dark::before{
  content:"";position:absolute;left:var(--sv-gutter);right:var(--sv-gutter);top:0;
  height:1px;background:var(--sv-line-l);
}
.sv-surface--dark + .sv-surface--dark::before{background:var(--sv-line-d)}
.sv-inner--wide{max-width:var(--sv-wide);margin-inline:auto}

/* Surface variants carry the luminance arc. */
.sv-surface--dark  {background:var(--sv-ink);   color:var(--sv-on-dark)}
.sv-surface--dark-2{background:var(--sv-ink-3); color:var(--sv-on-dark)}
.sv-surface--void  {background:var(--sv-void);  color:var(--sv-on-dark)}
.sv-surface--bone  {background:var(--sv-bone);  color:var(--sv-on-light)}
.sv-surface--paper {background:var(--sv-paper); color:var(--sv-on-light)}

/* Film grain. Dark surfaces only — implies a camera was present. */
.sv-surface--dark::after,
.sv-surface--dark-2::after,
.sv-surface--void::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.032;background-size:100px 100px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sv-section > *{position:relative;z-index:1}

.sv-grid{display:grid;gap:1px;background:var(--sv-line-d);border:1px solid var(--sv-line-d);border-radius:var(--sv-radius);overflow:hidden}
.sv-grid--2{grid-template-columns:repeat(2,1fr)}
.sv-grid--3{grid-template-columns:repeat(3,1fr)}
.sv-grid > .sv-cell{background:var(--sv-ink);padding:1.75rem}
.sv-surface--bone .sv-grid{background:var(--sv-line-l);border-color:var(--sv-line-l)}
.sv-surface--bone .sv-grid > .sv-cell{background:var(--sv-bone)}
.sv-cell h3{margin-bottom:.5rem}
.sv-cell p{font-size:var(--sv-t-small);color:var(--sv-on-dark-2);margin:0}
.sv-surface--bone .sv-cell p{color:var(--sv-on-light-2)}

.sv-rule{height:1px;background:var(--sv-line-d);border:0;margin:3rem 0}
.sv-surface--bone .sv-rule,.sv-surface--paper .sv-rule{background:var(--sv-line-l)}

/* Tier chip — the Now/Next disclosure system, made visible. */
.sv-chip{
  display:inline-block;font-family:var(--sv-mono);
  font-size:var(--sv-t-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  padding:.25rem .55rem;border-radius:2px;vertical-align:middle;
}
.sv-chip--next{color:var(--sv-signal);border:1px dashed rgba(169,228,240,.5);background:none}
.sv-chip--now{color:var(--sv-on-dark);border:1px solid var(--sv-line-d-2)}
.sv-surface--bone .sv-chip--next,.sv-surface--paper .sv-chip--next{
  color:var(--sv-signal-ink);border-color:rgba(22,96,111,.5)}
.sv-surface--bone .sv-chip--now,.sv-surface--paper .sv-chip--now{
  color:var(--sv-on-light);border-color:var(--sv-line-l-2)}

/* Forward-looking container. Dashed = not yet available. */
.sv-next-frame{
  border:1px dashed rgba(169,228,240,.36);
  border-radius:var(--sv-radius);
  padding:clamp(1.75rem,4vw,3.25rem);
}


/* 05  NAVIGATION
   ========================================================================== */
.sv-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--sv-nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--sv-gutter);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--sv-t-base) var(--sv-ease),
             border-color var(--sv-t-base) var(--sv-ease);
}
.sv-nav[data-scrolled="true"]{
  background:rgba(8,9,10,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--sv-line-d);
}
.sv-nav__brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--sv-on-dark)}
.sv-nav__brand svg{width:22px;height:22px;flex:none}
.sv-nav__wordmark{font-size:.95rem;font-weight:600;letter-spacing:-.025em}
.sv-nav__wordmark sup{font-size:.5em;vertical-align:super;opacity:.55}

.sv-nav__links{display:flex;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0}
.sv-nav__links a{
  font-size:.8125rem;color:var(--sv-on-dark-2);text-decoration:none;
  transition:color var(--sv-t-fast) linear;
}
.sv-nav__links a:hover,.sv-nav__links a[aria-current="page"]{color:var(--sv-on-dark)}
.sv-nav__right{display:flex;align-items:center;gap:1.25rem}

.sv-nav__toggle{
  display:none;background:none;border:0;padding:.5rem;cursor:pointer;
  color:var(--sv-on-dark);
}
.sv-nav__toggle svg{width:20px;height:20px}


/* 06  BUTTONS & LINKS
   ========================================================================== */
.sv-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:.875rem;font-weight:500;letter-spacing:-.01em;
  padding:.7rem 1.35rem;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:background var(--sv-t-fast) linear,
             color var(--sv-t-fast) linear,
             border-color var(--sv-t-fast) linear;
  white-space:nowrap;
}
/* Primary — the only filled button on the site. */
.sv-btn--primary{background:var(--sv-paper);color:var(--sv-ink);border-color:var(--sv-paper)}
.sv-btn--primary:hover{background:#fff;border-color:#fff}
.sv-btn--ghost{background:transparent;color:var(--sv-on-dark);border-color:var(--sv-line-d-2)}
.sv-btn--ghost:hover{border-color:var(--sv-on-dark)}
.sv-surface--bone .sv-btn--primary,.sv-surface--paper .sv-btn--primary{
  background:var(--sv-ink);color:var(--sv-paper);border-color:var(--sv-ink)}
.sv-surface--bone .sv-btn--ghost,.sv-surface--paper .sv-btn--ghost{
  color:var(--sv-on-light);border-color:var(--sv-line-l-2)}
.sv-surface--bone .sv-btn--ghost:hover,.sv-surface--paper .sv-btn--ghost:hover{
  border-color:var(--sv-on-light)}

.sv-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

.sv-link{
  color:inherit;text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  transition:opacity var(--sv-t-fast) linear;
}
.sv-link:hover{opacity:.62}
.sv-link--quiet{border-bottom-color:rgba(237,235,231,.24)}
.sv-surface--bone .sv-link--quiet,.sv-surface--paper .sv-link--quiet{border-bottom-color:rgba(20,20,15,.24)}


/* 07  SECTION COMPONENTS
   ========================================================================== */

/* Hero — full viewport, fades up out of darkness on first load. */
.sv-hero{
  min-height:100svh;
  display:flex;align-items:center;
  padding-top:calc(var(--sv-nav-h) + 3rem);
  padding-bottom:6rem;
}
.sv-hero__glow{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(1100px,150vw);aspect-ratio:1;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(169,228,240,.075) 0%,rgba(169,228,240,0) 62%);
}
.sv-hero .sv-inner{max-width:54rem}
.sv-hero .sv-lede{max-width:36rem}

/* Statement — one idea, centred in space, nothing else on screen. */
.sv-statement{min-height:min(82svh,44rem);display:flex;align-items:center}
.sv-statement .sv-display{margin-bottom:1.25rem}

/* Quote — a human voice. */
.sv-quote{max-width:44rem}
.sv-quote blockquote{
  margin:0 0 1.5rem;
  text-indent:-.44em;          /* optical: the opening quote hangs */
  hanging-punctuation:first;
  font-size:clamp(1.5rem,3.2vw,2.35rem);
  font-weight:600;letter-spacing:-.035em;line-height:1.16;text-wrap:balance;
}
.sv-quote figcaption{font-size:var(--sv-t-small);color:var(--sv-on-light-3)}
.sv-surface--dark .sv-quote figcaption{color:var(--sv-on-dark-3)}

/* Flow — the pipeline diagram. Signal-flow chart, not marketing arrows. */
.sv-flow{
  display:flex;align-items:stretch;flex-wrap:wrap;gap:1px;
  border:1px solid var(--sv-line-l);background:var(--sv-line-l);
  border-radius:var(--sv-radius);overflow:hidden;margin:2.5rem 0 0;
}
.sv-flow__node{
  flex:1 1 8rem;background:var(--sv-bone);padding:1.1rem 1rem;
  font-family:var(--sv-mono);font-size:var(--sv-t-mono);
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
  color:var(--sv-on-light-2);
}
.sv-flow__node--self{color:var(--sv-on-light);font-weight:500}
.sv-surface--dark .sv-flow{border-color:var(--sv-line-d);background:var(--sv-line-d)}
.sv-surface--dark .sv-flow__node{background:var(--sv-ink);color:var(--sv-on-dark-2)}

/* Anchor rail — long pages only. */
.sv-rail{
  position:sticky;top:calc(var(--sv-nav-h) + 2rem);
  align-self:start;
  font-family:var(--sv-mono);font-size:var(--sv-t-mono);
}
.sv-rail ol{list-style:none;margin:0;padding:0}
.sv-rail li{margin-bottom:.6rem}
.sv-rail a{color:var(--sv-on-light-3);text-decoration:none;letter-spacing:.06em}
.sv-rail a:hover,.sv-rail a[data-active="true"]{color:var(--sv-on-light)}
.sv-surface--dark .sv-rail a{color:var(--sv-on-dark-3)}
.sv-surface--dark .sv-rail a:hover,.sv-surface--dark .sv-rail a[data-active="true"]{color:var(--sv-on-dark)}

.sv-split{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.sv-split > *{min-width:0}                 /* never let content set the floor */
.sv-inner,.sv-inner--wide{min-width:0}
.sv-grid > .sv-cell{min-width:0}
.sv-radio__meta{min-width:0}

/* Data table */
.sv-table{width:100%;border-collapse:collapse;font-size:var(--sv-t-small);margin:1.5rem 0 2rem}
.sv-table th{
  font-family:var(--sv-mono);font-size:var(--sv-t-eyebrow);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;text-align:left;
  padding:0 1rem .75rem 0;border-bottom:1px solid var(--sv-line-l-2);
  color:var(--sv-on-light-3);
}
.sv-table td{padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--sv-line-l);vertical-align:top;color:var(--sv-on-light-2)}
.sv-table td:first-child{color:var(--sv-on-light);font-weight:500}
.sv-surface--dark .sv-table th{color:var(--sv-on-dark-3);border-bottom-color:var(--sv-line-d-2)}
.sv-surface--dark .sv-table td{border-bottom-color:var(--sv-line-d);color:var(--sv-on-dark-2)}
.sv-surface--dark .sv-table td:first-child{color:var(--sv-on-dark)}

/* Radio player */
.sv-radio{border:1px solid var(--sv-line-d);border-radius:var(--sv-radius);overflow:hidden;margin-top:2.5rem}
.sv-radio__bar{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.25rem;border-bottom:1px solid var(--sv-line-d)}
.sv-radio__play{
  width:2.5rem;height:2.5rem;flex:none;border-radius:50%;
  border:1px solid var(--sv-line-d-2);background:none;color:var(--sv-on-dark);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color var(--sv-t-fast) linear;
}
.sv-radio__play:hover{border-color:var(--sv-on-dark)}
.sv-radio__play svg{width:12px;height:12px}
.sv-radio__meta{flex:1;min-width:0}
.sv-radio__label{font-family:var(--sv-mono);font-size:var(--sv-t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--sv-on-dark-3)}
.sv-radio__title{font-size:.95rem;font-weight:500;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-radio__wave{display:block;width:100%;height:64px}
.sv-radio__channels{display:flex;flex-wrap:wrap;gap:1px;background:var(--sv-line-d)}
.sv-radio__channel{
  flex:1 1 7rem;background:var(--sv-ink);border:0;cursor:pointer;
  padding:.9rem .75rem;color:var(--sv-on-dark-3);
  font-family:var(--sv-mono);font-size:var(--sv-t-mono);letter-spacing:.1em;text-transform:uppercase;
  transition:color var(--sv-t-fast) linear;
}
.sv-radio__channel:hover{color:var(--sv-on-dark)}
.sv-radio__channel[aria-pressed="true"]{color:var(--sv-signal)}


/* 08  PROOF OBJECT
   ========================================================================== */
.sv-proof{
  border:1px solid var(--sv-line-l-2);border-radius:var(--sv-radius);
  font-family:var(--sv-mono);font-size:var(--sv-t-mono);line-height:2.1;
  margin:2.5rem 0 0;overflow:hidden;
  font-variant-numeric:tabular-nums;
}
.sv-proof__head{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.75rem 1.25rem;border-bottom:1px solid var(--sv-line-l);
  letter-spacing:.16em;text-transform:uppercase;font-size:var(--sv-t-eyebrow);
  color:var(--sv-on-light-3);
}
.sv-proof__ok{color:var(--sv-signal-ink)}
.sv-proof__body{padding:1rem 1.25rem 1.25rem}
.sv-proof__row{display:flex;gap:1rem;flex-wrap:wrap}
.sv-proof__k{flex:0 0 7.5rem;color:var(--sv-on-light-3);letter-spacing:.12em}
.sv-proof__v{color:var(--sv-on-light);min-width:0}
.sv-proof__v--sig{color:var(--sv-signal-ink)}
.sv-surface--dark .sv-proof{border-color:var(--sv-line-d-2)}
.sv-surface--dark .sv-proof__head{border-bottom-color:var(--sv-line-d);color:var(--sv-on-dark-3)}
.sv-surface--dark .sv-proof__ok{color:var(--sv-signal)}
.sv-surface--dark .sv-proof__k{color:var(--sv-on-dark-3)}
.sv-surface--dark .sv-proof__v{color:var(--sv-on-dark)}
.sv-surface--dark .sv-proof__v--sig{color:var(--sv-signal)}
.sv-proof__note{margin-top:1.25rem;font-size:var(--sv-t-small);color:var(--sv-on-light-3);font-family:var(--sv-sans)}
.sv-surface--dark .sv-proof__note{color:var(--sv-on-dark-3)}


/* 09  FORMS
   ========================================================================== */
.sv-form{max-width:26rem;margin-top:2rem}
.sv-field{margin-bottom:.75rem}
.sv-field label{
  display:block;font-family:var(--sv-mono);font-size:var(--sv-t-eyebrow);
  letter-spacing:.16em;text-transform:uppercase;color:var(--sv-on-dark-3);margin-bottom:.4rem;
}
.sv-field input{
  width:100%;font-family:inherit;font-size:var(--sv-t-body);font-weight:300;
  color:var(--sv-on-dark);background:transparent;
  border:1px solid var(--sv-line-d-2);border-radius:2px;
  padding:.75rem .9rem;
  transition:border-color var(--sv-t-fast) linear;
}
.sv-field input::placeholder{color:rgba(237,235,231,.3)}
.sv-field input:focus{border-color:var(--sv-on-dark);outline:none}
.sv-field input:focus-visible{outline:2px solid var(--sv-signal);outline-offset:2px}
.sv-form__consent{font-size:var(--sv-t-small);color:var(--sv-on-dark-3);margin:1.25rem 0 0}
.sv-form__error{
  font-size:var(--sv-t-small);color:var(--sv-on-dark);margin-top:.75rem;
  border-left:2px solid var(--sv-signal);padding-left:.75rem;
}
.sv-form__error[hidden]{display:none}


/* 10  FOOTER
   ========================================================================== */
.sv-footer{
  background:var(--sv-ink);color:var(--sv-on-dark);
  border-top:1px solid var(--sv-line-d);
  padding:clamp(3.5rem,7vw,6rem) var(--sv-gutter) 3rem;
}
.sv-footer__top{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;
  max-width:var(--sv-wide);margin-inline:auto;
}
.sv-footer__tag{font-size:1.05rem;font-weight:600;letter-spacing:-.03em}
.sv-footer nav{display:flex;flex-wrap:wrap;gap:2.5rem}
.sv-footer h2{
  font-family:var(--sv-mono);font-size:var(--sv-t-eyebrow);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sv-on-dark-3);margin-bottom:.9rem;
}
.sv-footer ul{list-style:none;margin:0;padding:0}
.sv-footer li{margin-bottom:.5rem}
.sv-footer a{color:var(--sv-on-dark-2);text-decoration:none;font-size:var(--sv-t-small)}
.sv-footer a:hover{color:var(--sv-on-dark)}
.sv-footer__base{
  max-width:var(--sv-wide);margin:3.5rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--sv-line-d);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-family:var(--sv-mono);font-size:var(--sv-t-eyebrow);letter-spacing:.1em;
  color:var(--sv-on-dark-3);
}


/* 11  MOTION & REVEAL
   ========================================================================== */
/* Content is fully present in the DOM and readable without JS.
   These classes are only added by script once it is confirmed running. */
.sv-js [data-reveal]{opacity:0;transform:translateY(14px)}
.sv-js [data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity var(--sv-t-slow) var(--sv-ease),
             transform var(--sv-t-slow) var(--sv-ease);
}
.sv-js [data-reveal-delay="1"].is-in{transition-delay:90ms}
.sv-js [data-reveal-delay="2"].is-in{transition-delay:180ms}
.sv-js [data-reveal-delay="3"].is-in{transition-delay:270ms}

/* The fade-up. First frame of a film, once per session. */
.sv-js .sv-fadeup::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:var(--sv-ink);
  animation:sv-fadeup 1800ms var(--sv-ease) forwards;
}
@keyframes sv-fadeup{from{opacity:1}to{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .sv-js [data-reveal]{opacity:1;transform:none;transition:none}
  .sv-js .sv-fadeup::before{display:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}


/* 12  RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .sv-grid--3,.sv-grid--2{grid-template-columns:1fr}
  .sv-split{grid-template-columns:1fr;gap:2rem}
  .sv-rail{position:static;display:flex;flex-wrap:wrap;gap:1rem}
  .sv-rail ol{display:flex;flex-wrap:wrap;gap:1rem}
  .sv-rail li{margin:0}
}

@media (max-width:920px){
  .sv-nav__links{
    position:fixed;inset:var(--sv-nav-h) 0 auto 0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(8,9,10,.97);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--sv-line-d);
    padding:.5rem var(--sv-gutter) 1.5rem;
    transform:translateY(-120%);
    transition:transform var(--sv-t-base) var(--sv-ease);
  }
  .sv-nav[data-open="true"] .sv-nav__links{transform:none}
  .sv-nav__links li{width:100%;border-top:1px solid var(--sv-line-d)}
  .sv-nav__links a{display:block;padding:.9rem 0;font-size:1rem}
  .sv-nav__toggle{display:grid;place-items:center}
  /* The primary CTA never hides inside the menu. */
  .sv-nav__right .sv-btn{padding:.55rem 1rem;font-size:.8125rem}
  .sv-footer__top{flex-direction:column}
  .sv-footer nav{gap:2rem}
  .sv-proof__k{flex-basis:6rem}
}

@media (max-width:420px){
  .sv-nav__wordmark{font-size:.875rem}
  .sv-actions .sv-btn{width:100%}
}


/* 13  PRINT — /industry gets forwarded and printed. Make that work.
   ========================================================================== */
@media print{
  .sv-nav,.sv-radio,.sv-hero__glow,.sv-footer__base{display:none}
  body{background:#fff;color:#000}
  .sv-section{padding:1.5rem 0;page-break-inside:avoid}
  .sv-surface--dark,.sv-surface--void,.sv-surface--dark-2,
  .sv-surface--bone,.sv-surface--paper{background:#fff!important;color:#000!important}
  .sv-surface--dark::after,.sv-surface--void::after,.sv-surface--dark-2::after{display:none}
  a{text-decoration:underline;color:#000}
  .sv-js [data-reveal]{opacity:1!important;transform:none!important}
}

/* 14  ATTRIBUTION — Absolute ID / GAC licensing statements (Sprint 003)
   ========================================================================== */
.sv-attribution{
  max-width:var(--sv-wide);margin:3rem auto 0;
  font-family:var(--sv-mono);font-size:var(--sv-t-mono);line-height:1.9;
  letter-spacing:.02em;color:var(--sv-on-dark-3);
}
.sv-attribution-inline{
  border-left:2px solid var(--sv-line-l-2);
  padding:.25rem 0 .25rem 1rem;margin:1.75rem 0;
  font-size:var(--sv-t-small);color:var(--sv-on-light-2);
}
.sv-surface--dark .sv-attribution-inline,
.sv-surface--dark-2 .sv-attribution-inline{
  border-left-color:var(--sv-line-d-2);color:var(--sv-on-dark-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   15  SPRINT 004 — POLISH
   Typography · micro-interactions · motion · image direction · pixel work
   No new components. Refinement of what is already here.
   ══════════════════════════════════════════════════════════════════════════ */

/* 15.1  TYPE — per-step tracking. Negative tracking must scale with size,
         and mono needs positive tracking to stay legible small.            */
h3{letter-spacing:-.022em}
.sv-eyebrow{font-variant-numeric:tabular-nums}
.sv-proof,.sv-table td,.sv-table th,time{font-variant-numeric:tabular-nums}
.sv-steps > li h3{margin-bottom:.4rem}

/* Optical hang: the eyebrow sits above a heading, so pull the heading up
   slightly to close the gap the cap-height already creates. */
.sv-eyebrow + h1,.sv-eyebrow + h2{margin-top:-.15em}

/* Long single words (URLs, hashes) never blow out the measure. */
.sv-proof__v{overflow-wrap:anywhere}


/* 15.2  LINKS — underline grows from the left on hover.
         background-size animates on the compositor; text-decoration cannot. */
.sv-link{
  border-bottom:0;
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
  transition:opacity var(--sv-t-fast) linear;
}
.sv-link--quiet{
  background-image:linear-gradient(rgba(237,235,231,.32),rgba(237,235,231,.32));
}
.sv-surface--bone .sv-link--quiet,.sv-surface--paper .sv-link--quiet{
  background-image:linear-gradient(rgba(20,20,15,.3),rgba(20,20,15,.3));
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sv-link{
    background-size:0% 1px;
    transition:background-size 420ms var(--sv-ease),opacity var(--sv-t-fast) linear;
  }
  .sv-link:hover,.sv-link:focus-visible{background-size:100% 1px}
}

/* Nav links get the same treatment, sized to the text. */
.sv-nav__links a{
  position:relative;padding-block:.35rem;
}
.sv-nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 380ms var(--sv-ease);
}
.sv-nav__links a:hover::after,
.sv-nav__links a[aria-current="page"]::after{transform:scaleX(1)}


/* 15.3  BUTTONS — press state. Nothing lifts, nothing glows; the surface
         settles by one notch, which is what a real button does.            */
.sv-btn{
  -webkit-tap-highlight-color:transparent;
  transition:background var(--sv-t-fast) linear,
             color var(--sv-t-fast) linear,
             border-color var(--sv-t-fast) linear,
             transform 90ms var(--sv-ease-io);
}
.sv-btn:active{transform:translateY(1px)}
.sv-btn--ghost:hover{background:rgba(237,235,231,.045)}
.sv-surface--bone .sv-btn--ghost:hover,
.sv-surface--paper .sv-btn--ghost:hover{background:rgba(20,20,15,.045)}


/* 15.4  THE SIGNATURE MOMENT — proof issuance.
         Fields populate in sequence, then the verified mark resolves.
         ~1.3s total, settles static, plays once. This is the site's one
         piece of memorable motion; nothing else may compete with it.       */
.sv-js .sv-proof__row{opacity:0;transform:translateY(5px)}
.sv-js .sv-proof.is-in .sv-proof__row{
  opacity:1;transform:none;
  transition:opacity 400ms var(--sv-ease),transform 400ms var(--sv-ease);
}
.sv-js .sv-proof.is-in .sv-proof__row:nth-child(1){transition-delay:140ms}
.sv-js .sv-proof.is-in .sv-proof__row:nth-child(2){transition-delay:245ms}
.sv-js .sv-proof.is-in .sv-proof__row:nth-child(3){transition-delay:350ms}
.sv-js .sv-proof.is-in .sv-proof__row:nth-child(4){transition-delay:455ms}
.sv-js .sv-proof.is-in .sv-proof__row:nth-child(5){transition-delay:560ms}
.sv-js .sv-proof.is-in .sv-proof__row:nth-child(6){transition-delay:665ms}
.sv-js .sv-proof__ok{opacity:0}
.sv-js .sv-proof.is-in .sv-proof__ok{
  opacity:1;transition:opacity 460ms var(--sv-ease) 860ms;
}
/* The record itself settles rather than sliding — it is an object. */
.sv-js .sv-proof[data-reveal].is-in{transition-duration:520ms}


/* 15.5  REVEAL — display type travels further than body type, so the
         hierarchy is legible in motion as well as at rest.                 */
.sv-js .sv-display[data-reveal]{transform:translateY(20px)}
.sv-js .sv-display[data-reveal].is-in{transform:none}
.sv-js .sv-steps > li[data-reveal]:nth-of-type(2).is-in{transition-delay:110ms}
.sv-js .sv-steps > li[data-reveal]:nth-of-type(3).is-in{transition-delay:220ms}


/* 15.6  SURFACE CHANGE — deliberately a hard cut.
         A gradient bridge was tried and removed: at full-bleed width it
         reads as a rendering artifact rather than as cinema. The reference
         set (Apple, OpenAI, Linear) all cut. So do we. The only softening
         is a single hairline where two sections share a surface — see 04. */


/* 15.7  RADIO — pause state, and a stroke that does not distort under
         preserveAspectRatio="none".                                        */
.sv-radio__wave path{vector-effect:non-scaling-stroke}
.sv-radio__play svg .sv-pause{display:none}
.sv-radio[data-playing="true"] .sv-radio__play svg .sv-play{display:none}
.sv-radio[data-playing="true"] .sv-radio__play svg .sv-pause{display:block}
.sv-radio__play{transition:border-color var(--sv-t-fast) linear,
                           background var(--sv-t-fast) linear}
.sv-radio__play:hover{background:rgba(237,235,231,.05)}
.sv-radio__play:active{transform:scale(.96)}
.sv-radio__channel{position:relative}
.sv-radio__channel::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--sv-signal);transform:scaleX(0);
  transition:transform 380ms var(--sv-ease);
}
.sv-radio__channel[aria-pressed="true"]::after{transform:scaleX(1)}
.sv-radio__wave{transition:opacity var(--sv-t-base) linear;opacity:.45}
.sv-radio[data-playing="true"] .sv-radio__wave{opacity:1}


/* 15.8  FORMS — the label acknowledges focus. Errors never rely on colour. */
.sv-field{position:relative}
.sv-field label{transition:color var(--sv-t-fast) linear}
.sv-field:focus-within label{color:var(--sv-signal)}
.sv-field input{transition:border-color var(--sv-t-fast) linear,
                           background var(--sv-t-fast) linear}
.sv-field input:hover{border-color:rgba(237,235,231,.42)}
.sv-field input[aria-invalid="true"]{border-color:var(--sv-signal)}
.sv-form__error::before{content:"↳ ";opacity:.6}


/* 15.9  IMAGE DIRECTION
         Photography is not yet shot. This is the container it drops into.
         Fixed aspect ratio prevents layout shift; the treatment layer keeps
         any photograph inside the brand's temperature. See README.         */
.sv-figure{
  position:relative;margin:2.5rem 0 0;overflow:hidden;
  border-radius:var(--sv-radius);
  background:var(--sv-ink-3);
  isolation:isolate;
}
.sv-figure--wide  {aspect-ratio:16/9}
.sv-figure--frame {aspect-ratio:3/2}
.sv-figure--portrait{aspect-ratio:4/5;max-width:26rem}
.sv-figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Brand temperature: pulled slightly cool and desaturated so a photograph
     sits with the palette instead of fighting it. */
  filter:saturate(.82) contrast(1.04) brightness(.94);
}
/* Vignette + grain, so the still reads as a frame rather than a stock plate. */
.sv-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 100% at 50% 45%,rgba(0,0,0,0) 42%,rgba(0,0,0,.42) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:cover,100px 100px;
}
.sv-figure figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:1rem 1.25rem;
  font-family:var(--sv-mono);font-size:var(--sv-t-eyebrow);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(237,235,231,.8);
}


/* 15.10  TABLES on small screens — scroll rather than crush.               */
.sv-table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:1.5rem 0 2rem;
  scrollbar-width:thin;
  /* Fades the right edge only while there is more content to reach. */
  background:linear-gradient(90deg,var(--sv-bone) 30%,rgba(201,197,188,0)),
             linear-gradient(90deg,rgba(201,197,188,0),var(--sv-bone) 70%) 100% 0,
             radial-gradient(farthest-side at 100% 50%,rgba(20,20,15,.18),rgba(20,20,15,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:40px 100%,40px 100%,14px 100%;
  background-attachment:local,local,scroll;
}
.sv-table-scroll .sv-table{margin:0;min-width:34rem}
.sv-table-scroll:focus-visible{outline:2px solid var(--sv-signal);outline-offset:2px}


/* 15.11  PIXEL WORK                                                        */
.sv-nav__brand svg{transform:translateY(-.5px)}        /* optical centring   */
.sv-nav__wordmark sup{letter-spacing:0}
.sv-flow__node{display:flex;align-items:center;justify-content:center;line-height:1.35}
.sv-proof__head{align-items:baseline}
.sv-cell h3{text-wrap:balance}
.sv-footer__tag sup{letter-spacing:0}
.sv-actions{align-items:center}
hr.sv-rule{border:0}                                    /* Safari default    */

/* Scroll-margin so anchor jumps clear the fixed nav. */
:target{scroll-margin-top:calc(var(--sv-nav-h) + 2rem)}
[id]{scroll-margin-top:calc(var(--sv-nav-h) + 2rem)}


/* 15.12  RESPONSIVE REFINEMENT                                             */
@media (max-width:560px){
  :root{--sv-section-y:clamp(4rem,14vw,6rem)}
  .sv-statement{min-height:auto}
  .sv-hero{min-height:88svh}
  .sv-proof__row{gap:.15rem}
  .sv-proof__k{flex:0 0 100%}
  .sv-proof__v{padding-bottom:.5rem}
  .sv-steps > li{padding:1.5rem 0}
  .sv-radio__channel{flex:1 1 45%}
}
@media (min-width:1800px){
  :root{--sv-measure:42rem;--sv-wide:80rem}
}

/* Coarse pointers get larger hit targets. */
@media (pointer:coarse){
  .sv-nav__links a{padding-block:.75rem}
  .sv-btn{padding:.85rem 1.5rem}
  .sv-radio__channel{padding:1.1rem .75rem}
}


/* 15.13  REDUCED MOTION — everything above resolves instantly.             */
@media (prefers-reduced-motion:reduce){
  .sv-js .sv-proof__row,
  .sv-js .sv-proof__ok,
  .sv-js .sv-display[data-reveal]{opacity:1;transform:none;transition:none}
  .sv-link{background-size:100% 1px}
  .sv-nav__links a::after{transition:none}
  .sv-radio__wave{opacity:1}
  .sv-btn:active{transform:none}
}

/* Forced-colours (Windows high contrast): keep structure, drop decoration. */
@media (forced-colors:active){
  .sv-chip,.sv-btn,.sv-field input,.sv-proof{border:1px solid CanvasText}
  .sv-surface--dark::after,.sv-surface--void::after,
  .sv-surface--dark-2::after,.sv-figure::after{display:none}
  .sv-nav__links a::after,.sv-radio__channel::after{background:CanvasText}
}