/* ==========================================================================
   TecBlitz — design system v3

   One type scale, one spacing scale, a 12-column grid and three section
   tones (near-black, cream, cyan) built from the existing palette. Every
   component reads its colours from the tone it sits in, so the same card,
   button or numbers strip works on any section.
   ========================================================================== */

@font-face{font-family:'Syne';src:url('/assets/fonts/syne-var.woff2') format('woff2-variations');font-weight:400 800;font-style:normal;font-display:optional}
@font-face{font-family:'Inter Tight';src:url('/assets/fonts/intertight-var.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Syne Mono';src:url('/assets/fonts/synemono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('/assets/fonts/dmserif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:optional}

/* Metric-matched fallbacks. The two heading faces are preloaded and use
   font-display:optional: a late font is skipped for that page view rather
   than swapped in, because Syne's width differs too much from any system
   face to swap without rewrapping headings. */
@font-face{font-family:'Syne Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arimo Bold'),local('Roboto Bold');font-weight:400 700;size-adjust:114.2%;ascent-override:80.9%;descent-override:24.1%;line-gap-override:0%}
@font-face{font-family:'Syne Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arimo Bold'),local('Roboto Bold');font-weight:701 900;size-adjust:164.2%;ascent-override:56.3%;descent-override:16.8%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';src:local('Arial'),local('ArialMT'),local('Arimo'),local('Roboto');font-weight:100 500;size-adjust:96%;ascent-override:100.9%;descent-override:25.1%;line-gap-override:0%}
@font-face{font-family:'Inter Tight Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arimo Bold'),local('Roboto Bold');font-weight:600 900;size-adjust:96%;ascent-override:100.9%;descent-override:25.1%;line-gap-override:0%}
@font-face{font-family:'DM Serif Fallback';src:local('Georgia Italic'),local('Georgia-Italic');font-style:italic;font-weight:400;size-adjust:95.6%;ascent-override:108.4%;descent-override:35%;line-gap-override:0%}

/* ---------- Tokens -------------------------------------------------------- */

:root{
  /* Palette (unchanged) */
  --ink:#050507;
  --deep:#0a0a0e;
  --panel:#101015;
  --cream:#f7f7f2;
  --cyan:#00e5ff;
  --ink-2:#04141a;

  /* Fonts (unchanged) */
  --f-display:'Syne','Syne Fallback',system-ui,sans-serif;
  --f-body:'Inter Tight','Inter Tight Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Syne Mono',ui-monospace,monospace;
  --f-accent:'DM Serif Display','DM Serif Fallback',Georgia,serif;

  /* Type scale */
  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-base:clamp(1rem,.96rem + .2vw,1.0625rem);
  --fs-md:clamp(1.125rem,1rem + .45vw,1.25rem);
  --fs-lg:clamp(1.3125rem,1.1rem + .8vw,1.625rem);
  --fs-xl:clamp(1.625rem,1.2rem + 1.6vw,2.25rem);
  --fs-2xl:clamp(2rem,1rem + 3.4vw,3.75rem);
  --fs-3xl:clamp(2.375rem,min(1rem + 4.2vw,10.5vh),6.25rem);

  /* Spacing scale */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;

  --gutter:clamp(16px,2.4vw,32px);
  --pad:clamp(20px,5vw,48px);
  --maxw:1280px;
  --head-h:68px;
  --radius:16px;
  --radius-sm:10px;
  --skew:-8deg;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Tones --------------------------------------------------------- */

.tone-dark,.head,.drawer{
  --bg:var(--ink);--fg:var(--cream);--muted:rgba(247,247,242,.72);
  --line:rgba(247,247,242,.12);--line-2:rgba(247,247,242,.26);
  --surface:var(--panel);--accent:var(--cyan);--accent-fg:var(--cyan);--focus:var(--cyan);
}
.tone-light{
  --bg:var(--cream);--fg:var(--ink);--muted:rgba(5,5,7,.72);
  --line:rgba(5,5,7,.12);--line-2:rgba(5,5,7,.28);
  --surface:rgba(5,5,7,.035);--accent:var(--cyan);--accent-fg:var(--ink);--focus:var(--ink);
}
.tone-cyan{
  --bg:var(--cyan);--fg:var(--ink-2);--muted:rgba(4,20,26,.8);
  --line:rgba(4,20,26,.18);--line-2:rgba(4,20,26,.4);
  --surface:rgba(4,20,26,.06);--accent:var(--ink-2);--accent-fg:var(--ink-2);--focus:var(--ink-2);
}
.tone-dark,.tone-light,.tone-cyan{background:var(--bg);color:var(--fg)}

/* ---------- Base ---------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--f-body);font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.1;letter-spacing:-.03em}
::selection{background:var(--cyan);color:var(--ink-2)}
:focus-visible{outline:2px solid var(--focus,var(--cyan));outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:var(--head-h)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip{position:absolute;left:var(--sp-4);top:-100px;z-index:100;padding:var(--sp-3) var(--sp-4);background:var(--cyan);color:var(--ink-2);font-weight:600;border-radius:var(--radius-sm)}
.skip:focus{top:var(--sp-4)}

/* ---------- Type ---------------------------------------------------------- */

.h1{font-size:var(--fs-3xl);font-weight:800;line-height:.98;letter-spacing:-.045em}
.h2{font-size:var(--fs-2xl);font-weight:800;line-height:1.02;letter-spacing:-.04em}
.h3{font-size:var(--fs-xl);font-weight:800;line-height:1.08;letter-spacing:-.035em}
.h4{font-size:var(--fs-lg);font-weight:700;line-height:1.15;letter-spacing:-.025em}
.h5{font-size:var(--fs-md);font-weight:700;line-height:1.25;letter-spacing:-.015em}
.h1,.h2,.h3,.h4,.h5{text-wrap:balance}
.lede{font-size:var(--fs-md);line-height:1.55;color:var(--muted);max-width:60ch;text-wrap:pretty}
.body{color:var(--muted);max-width:62ch}
.body p + p{margin-top:var(--sp-4)}
.body a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;transition:text-decoration-color .2s var(--ease)}
.body a:hover{text-decoration-color:var(--fg)}

.accent{font-family:var(--f-accent);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--accent-fg)}
.tone-light .accent{background:linear-gradient(transparent 78%,rgba(0,229,255,.55) 78%,rgba(0,229,255,.55) 94%,transparent 94%);padding-inline:.04em}

.eyebrow{
  display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-fg);
}
.tone-light .eyebrow{color:var(--muted)}
.eyebrow span{text-wrap:balance}
.eyebrow::before{content:"";flex:0 0 24px;height:2px;background:var(--accent);transform:skewX(var(--skew))}

/* ---------- Layout -------------------------------------------------------- */

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{position:relative;padding-block:clamp(var(--sp-8),9vw,var(--sp-10))}
.sec-head{max-width:760px;margin-bottom:var(--sp-7)}
.sec-head .lede{margin-top:var(--sp-5)}
.g12 .sec-head{margin-bottom:var(--sp-6)}

.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp-7)}
.g12 > *{grid-column:1 / -1;min-width:0}
.align-center{align-items:center}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

@media(min-width:1024px){
  .col-lg-4{grid-column:auto / span 4}
  .col-lg-5{grid-column:auto / span 5}
  .col-lg-6{grid-column:auto / span 6}
  .col-lg-7{grid-column:auto / span 7}
  .col-lg-start-1{grid-column-start:1}
  .col-lg-start-6{grid-column-start:6}
  .col-lg-start-7{grid-column-start:7}
  .col-lg-start-8{grid-column-start:8}
  .col-lg-start-9{grid-column-start:9}
  .order-lg-first{order:-1}
  .art-col{position:sticky;top:calc(var(--head-h) + var(--sp-6));align-self:start}
}

/* ---------- Header + nav -------------------------------------------------- */

.head{position:sticky;top:0;z-index:50;color:var(--fg);isolation:isolate}
.head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(5,5,7,.9);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);min-height:var(--head-h)}
.brand{display:inline-flex;align-items:center;gap:var(--sp-2);flex-shrink:0;color:var(--cream)}
.bolt{width:12px;height:21px;color:var(--cyan)}
.wordmark{font-family:var(--f-display);font-weight:800;font-size:1.25rem;letter-spacing:-.045em;line-height:1;transition:color .2s var(--ease)}
.brand:hover .wordmark{color:var(--cyan)}

.nav ul{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sp-1)}
.nav-link{
  position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-3);
  font-size:.9375rem;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .2s var(--ease);
}
.nav-link:hover{color:var(--fg)}
.nav-link[aria-current="page"]{color:var(--fg)}
.nav-link[aria-current="page"]::after{
  content:"";position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:4px;height:2px;
  background:var(--cyan);transform:skewX(var(--skew));
}
.nav li:has(.btn){margin-left:var(--sp-3)}
.nav .btn[aria-current="page"]{box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--cyan)}

.burger{display:none;position:relative;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--radius-sm);align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--fg);transition:transform .25s var(--ease),background .2s var(--ease)}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"]{border-color:var(--cyan)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;left:0;right:0;top:var(--head-h);bottom:0;z-index:49;
  background:var(--ink);color:var(--fg);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-6) var(--pad) var(--sp-8);
  visibility:hidden;opacity:0;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
}
.drawer.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.drawer-link{
  display:flex;align-items:center;min-height:60px;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:800;font-size:var(--fs-xl);letter-spacing:-.04em;
}
.drawer-link[aria-current="page"]{color:var(--cyan)}
.drawer li:has(.drawer-cta){padding-block:var(--sp-4);border-bottom:1px solid var(--line)}
.drawer-cta{width:100%}

@media(max-width:1023px){
  .js .nav{display:none}
  .js .burger{display:inline-flex}
  html:not(.js) .head-inner{flex-wrap:wrap;padding-block:var(--sp-3)}
  html:not(.js) .nav ul{flex-wrap:wrap}
}
@media(min-width:1024px){.drawer{display:none}}
html.menu-open,html.menu-open body{overflow:hidden}

/* ---------- Buttons ------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;padding:0 var(--sp-5);border-radius:999px;border:1px solid transparent;
  font-family:var(--f-body);font-size:.9375rem;font-weight:600;line-height:1;white-space:nowrap;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn .icon{width:18px;height:18px;flex:0 0 auto}
.btn-arrow{transition:transform .2s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:40px;padding:0 var(--sp-4);font-size:.875rem}
.btn-lg{min-height:56px;padding:0 var(--sp-6);font-size:1rem}

.btn-primary{background:var(--cyan);color:var(--ink-2)}
.btn-primary:hover{background:var(--cream)}
.tone-light .btn-primary:hover{background:var(--ink);color:var(--cyan)}
.tone-cyan .btn-primary{background:var(--ink-2);color:var(--cyan)}
.tone-cyan .btn-primary:hover{background:var(--ink)}

.btn-ghost{border-color:var(--line-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg)}

.link-arrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:600;color:var(--fg)}
.link-arrow span{border-bottom:1px solid var(--line-2);transition:border-color .2s var(--ease)}
.link-arrow .icon{width:18px;height:18px;transition:transform .2s var(--ease)}
.link-arrow:hover span{border-color:var(--fg)}
.link-arrow:hover .icon{transform:translateX(3px)}

.icon{width:24px;height:24px}
.icon-lg{width:32px;height:32px}

/* ---------- Hero ---------------------------------------------------------- */

/* One frame: the hero fills the viewport below the sticky nav and centres its
   content. On very short screens it grows instead of clipping. */
.hero{
  position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:calc(100vh - var(--head-h));min-height:calc(100svh - var(--head-h));
  padding-block:clamp(var(--sp-6),7vh,var(--sp-9));
}
.hero > .wrap{width:100%}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 420px at 82% 0%,rgba(0,229,255,.12),transparent 70%),
    radial-gradient(520px 380px at 0% 100%,rgba(0,229,255,.05),transparent 70%);
}
.hero-inner{position:relative}
.hero .h1{max-width:17em}
.hero-home .h1{max-width:13.9em}
.lede-lg{margin-top:var(--sp-5);max-width:58ch;font-size:clamp(var(--fs-md),.6rem + .75vw,1.5rem)}
.hero .actions{margin-top:var(--sp-6)}

/* Tablet portrait: a full-frame hero leaves a tall empty band under the copy,
   so it sizes to its content with the standard section padding. Phones and
   every landscape screen keep the one-frame hero. */
@media(orientation:portrait) and (min-width:600px){
  .hero{display:block;min-height:0;padding-block:clamp(var(--sp-8),9vw,var(--sp-10))}
}

/* Compact header for reference pages (privacy, terms). */
.page-head{position:relative;overflow:hidden;padding-block:clamp(var(--sp-7),6vw,var(--sp-9)) clamp(var(--sp-6),5vw,var(--sp-8));border-bottom:1px solid var(--line)}
.page-head::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px 360px at 85% 0%,rgba(0,229,255,.1),transparent 70%)}
.page-head .wrap{position:relative}
.page-head .h2{max-width:17em}
.page-head .lede{margin-top:var(--sp-5)}

.jump{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.jump a{
  display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-4);
  border:1px solid var(--line-2);border-radius:999px;font-weight:500;font-size:.9375rem;
  transition:border-color .2s var(--ease);
}
.jump a:hover{border-color:var(--cyan)}
.jump .icon{width:18px;height:18px;color:var(--cyan)}

/* ---------- Numbers strip ------------------------------------------------- */

.sec-numbers{padding-top:0}
.num-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.num{padding:var(--sp-5) var(--sp-4) var(--sp-5) 0;border-bottom:1px solid var(--line)}
.num:nth-child(2n){padding-left:var(--sp-4);border-left:1px solid var(--line)}
.num-n{display:block;font-family:var(--f-display);font-weight:800;font-size:var(--fs-2xl);line-height:1;letter-spacing:-.05em;color:var(--accent-fg)}
.num-l{display:block;margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:1.45;color:var(--muted);max-width:24ch}
.num-note{margin-top:var(--sp-5);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(min-width:768px){
  .num-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .num,.num:nth-child(2n){padding:var(--sp-6) var(--sp-5);border-left:1px solid var(--line)}
  .num:first-child{border-left:0;padding-left:0}
}
.sec-head + .numbers,.features + .numbers{margin-top:var(--sp-8)}

/* ---------- Product cards ------------------------------------------------- */

.pcards{display:grid;gap:var(--gutter)}
@media(min-width:640px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.pcards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pcard,.card,.division,.channel,.quote-card,.quote-link{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.pcard{display:flex;flex-direction:column;padding:var(--sp-6);overflow:hidden;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.pcard::after,.division::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.pcard:hover,.division:hover{border-color:var(--line-2);transform:translateY(-3px)}
.pcard:hover::after,.division:hover::after{transform:scaleX(1)}
.pcard-top{display:flex;align-items:center;justify-content:space-between;color:var(--fg)}
.pcard-idx{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--muted)}
.pcard-name{margin-top:var(--sp-6);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--fg)}
.pcard-name span{margin-left:var(--sp-2);color:var(--muted)}
.pcard .h4{margin-top:var(--sp-3)}
.pcard-body{margin-top:var(--sp-4);color:var(--muted)}
.pcard .link-arrow{margin-top:auto;padding-top:var(--sp-6)}

/* ---------- Cards, features, checklists ----------------------------------- */

.cards-2{display:grid;gap:var(--gutter)}
@media(min-width:768px){.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{padding:var(--sp-6)}
.card p{margin-top:var(--sp-3);color:var(--muted)}

.features{display:grid;gap:var(--sp-6) var(--gutter);margin-top:var(--sp-7)}
.sec-head + .features{margin-top:0}
@media(min-width:768px){
  .features-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .features-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1200px){.features-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.feature{padding-top:var(--sp-5);border-top:1px solid var(--line-2)}
.feature > .icon{width:28px;height:28px;color:var(--accent-fg)}
.feature .h5{margin-top:var(--sp-4)}
.feature p{margin-top:var(--sp-2);color:var(--muted)}
.feature p a,.clause a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;overflow-wrap:anywhere;transition:text-decoration-color .2s var(--ease)}
.feature p a:hover,.clause a:hover{text-decoration-color:var(--fg)}
.enterprise-foot{margin-top:var(--sp-7);align-items:center}
.enterprise-foot .actions{margin-top:0}
@media(min-width:1024px){.enterprise-foot .actions{justify-content:flex-end}}

/* ---------- Policy clauses ------------------------------------------------ */

.sec-legal{padding-top:clamp(var(--sp-7),6vw,var(--sp-9))}
.clause{display:grid;grid-template-columns:calc(var(--fs-lg) * 2.2) minmax(0,1fr);gap:var(--sp-4);padding-block:var(--sp-6);border-top:1px solid var(--line)}
.clause:last-child{border-bottom:1px solid var(--line)}
.clause-n{padding-top:.45em;font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--muted)}
.clause p{margin-top:var(--sp-3);max-width:62ch;color:var(--muted)}
.clause-updated{margin-top:var(--sp-6);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(min-width:768px){.clause{grid-template-columns:88px minmax(0,1fr);gap:var(--sp-5)}}

.checklist{display:grid;gap:var(--sp-4)}
.checklist li{display:flex;gap:var(--sp-3);align-items:flex-start}
.checklist .icon{width:20px;height:20px;flex:0 0 20px;margin-top:.2em;color:var(--accent-fg)}
@media(min-width:768px){.checklist-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-6)}}
.list-h{margin-bottom:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line)}

.starts{display:flex;gap:var(--sp-4);margin-top:var(--sp-7);padding:var(--sp-5);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:var(--radius-sm)}
.starts > .icon{flex:0 0 24px;color:var(--accent-fg)}
.starts p{margin-top:var(--sp-2);color:var(--muted)}
.starts .link-arrow{margin-top:var(--sp-4)}

.path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--sp-8);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden}
.path li{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.path li:nth-child(2n){border-right:0}
.path li:nth-child(n+3){border-bottom:0}
@media(min-width:768px){
  .path{grid-template-columns:repeat(4,minmax(0,1fr))}
  .path li{border-bottom:0;border-right:1px solid var(--line-2)}
  .path li:nth-child(2n){border-right:1px solid var(--line-2)}
  .path li:last-child{border-right:0}
}
.path-n{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--muted)}
.path-name{font-family:var(--f-display);font-weight:800;font-size:var(--fs-lg);letter-spacing:-.03em}
@media(max-width:1023px){.path li{padding:var(--sp-4)}.path-name{font-size:var(--fs-md)}}

.note,.callout{display:flex;align-items:center;gap:var(--sp-3)}
.note{margin-top:var(--sp-6);color:var(--muted)}
.note .icon{flex:0 0 20px;width:20px;height:20px;color:var(--accent-fg)}
.callout{margin-top:var(--sp-6);padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:var(--radius-sm);font-weight:600}
.callout .icon{flex:0 0 22px;width:22px;height:22px}

/* ---------- Steps --------------------------------------------------------- */

.steps{counter-reset:none}
.step{display:grid;grid-template-columns:calc(var(--fs-lg) * 2.2) minmax(0,1fr);gap:var(--sp-4);padding-block:var(--sp-5);border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step-n{font-family:var(--f-display);font-weight:800;font-size:var(--fs-lg);line-height:1.15;letter-spacing:-.04em;color:var(--accent-fg)}
.step-body p{margin-top:var(--sp-2);color:var(--muted)}
.tag{
  display:inline-block;margin-top:var(--sp-3);padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);
}
@media(min-width:480px){.tag{letter-spacing:.12em}}
@media(min-width:768px){.step{grid-template-columns:88px minmax(0,1fr);gap:var(--sp-5)}}

/* ---------- Artwork ------------------------------------------------------- */

.art{margin:0 auto;max-width:440px;width:100%}
.art img{width:100%;border-radius:var(--radius-sm);border:1px solid var(--line)}
@media(min-width:1024px){.art{max-width:none}}

/* ---------- Quote --------------------------------------------------------- */

.quote-card{padding:clamp(var(--sp-5),4vw,var(--sp-7))}
.quote-card.tone-dark{background:var(--deep);border-color:transparent}
.q{border:0;margin:0 0 var(--sp-6);padding:0;min-width:0}
.q legend{display:block;width:100%;padding:0;font-family:var(--f-display);font-weight:700;font-size:var(--fs-md);letter-spacing:-.015em}
.q-n{margin-right:var(--sp-3);font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:400;letter-spacing:.14em;color:var(--accent-fg)}
.q-hint{margin-left:var(--sp-3);font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;
  min-height:44px;padding:0 var(--sp-4);border:1px solid var(--line-2);border-radius:999px;
  font-size:.9375rem;font-weight:500;line-height:1.2;color:var(--fg);pointer-events:none;
  transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.chip:hover span{border-color:var(--cyan)}
.chip-check{display:none;width:16px;height:16px}
.chip input:checked + span{background:var(--cyan);border-color:var(--cyan);color:var(--ink-2)}
.chip input:checked + span .chip-check{display:block}
.chip input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:519px){.chip{flex:1 1 calc(50% - var(--sp-2))}}

.q-fields{display:grid;gap:var(--sp-4)}
@media(min-width:640px){.q-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field label{display:block;margin-bottom:var(--sp-2);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field label span{text-transform:none;letter-spacing:.04em}
.field input{
  width:100%;min-height:48px;padding:0 var(--sp-4);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--fg);font:inherit;font-size:1rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.18)}
.q-micro{margin-top:var(--sp-4);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
noscript .q-micro{text-transform:none;letter-spacing:.02em}
.aside .h4{margin-bottom:var(--sp-5)}
.aside .step{grid-template-columns:calc(var(--fs-md) * 2.3) minmax(0,1fr)}
.aside .step-n{font-size:var(--fs-md)}
.aside .step .h4{font-size:var(--fs-md)}

/* ---------- Company + contact --------------------------------------------- */

.divisions{display:grid;gap:var(--gutter)}
@media(min-width:640px){.divisions{grid-template-columns:repeat(2,minmax(0,1fr))}}
.division{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);overflow:hidden;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.division-name{margin-top:var(--sp-4);font-family:var(--f-display);font-weight:800;font-size:var(--fs-md);letter-spacing:-.03em}
.division-line{color:var(--muted)}
@media(max-width:767px){.division-name{font-size:var(--fs-base)}}
.division-go{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-5);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase}
.division-go .icon{width:16px;height:16px}

.facts{display:grid}
.facts div{padding-block:var(--sp-4);border-top:1px solid var(--line)}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:var(--sp-1) 0 0;font-size:var(--fs-md)}

.channels{display:grid;gap:var(--sp-4)}
.channel{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--sp-4);row-gap:var(--sp-1);padding:var(--sp-5);transition:border-color .2s var(--ease)}
.channel:hover{border-color:var(--cyan)}
.channel > .icon{grid-row:1 / span 3;color:var(--accent-fg)}
.channel-k{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.channel-v{font-size:var(--fs-md);font-weight:600;overflow-wrap:anywhere}
.channel-d{color:var(--muted);font-size:var(--fs-sm)}
.quote-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-5);margin-top:var(--sp-6);padding:var(--sp-6)}
.quote-link p{margin-top:var(--sp-2);color:var(--muted);max-width:44ch}

/* ---------- CTA band ------------------------------------------------------ */

.cta-band{overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:-40% -10%;pointer-events:none;
  background:repeating-linear-gradient(102deg,rgba(4,20,26,.05) 0 2px,transparent 2px 34px);
}
.cta{position:relative;text-align:center}
.cta .h2{max-width:17em;margin-inline:auto}
.cta .lede{margin:var(--sp-5) auto 0}
.cta .actions{justify-content:center}

/* ---------- Footer -------------------------------------------------------- */

.foot{background:var(--deep);border-top:1px solid var(--line);padding-block:var(--sp-9) var(--sp-6)}
.foot-grid{display:grid;gap:var(--sp-7)}
@media(min-width:640px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-brand{grid-column:1 / -1}}
@media(min-width:1024px){.foot-grid{grid-template-columns:5fr 2fr 2fr 3fr}.foot-brand{grid-column:auto}}
.foot-brand p{margin-block:var(--sp-4) var(--sp-5);max-width:36ch;color:var(--muted)}
.foot-h{margin-bottom:var(--sp-4);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.foot-col ul{display:grid;gap:var(--sp-1)}
.foot-col a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);overflow-wrap:anywhere;transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--fg)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3) var(--sp-6);margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
.foot-bottom a{text-decoration:underline;text-underline-offset:3px}
.foot-bottom a:hover{color:var(--fg)}

/* ---------- Motion -------------------------------------------------------- */

@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

@media print{
  .head,.drawer,.skip{display:none}
  .tone-dark,.tone-cyan,.foot{background:#fff;color:#000}
}