/* ==========================================================================
   TecBlitz — design system v3 (brand colours v2.4)

   One type scale, one spacing scale, a 12-column grid and three section
   tones (deep, cream, teal) built from the brand 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 — brand guidelines v2.4 (colours only) */
  --ink:#12333D;
  --deep:#0A1512;
  --teal-signal:#2EB7C2;
  --teal-light:#7ED5DD;
  --teal-ink:#12757D;
  --teal-brand:#288890; /* BLITZ colour; display type 24px+ only */
  --cream:#F2EDE3;
  --white:#FFFFFF;
  /* Surface slightly above deep (not a brand swatch) */
  --panel:#0F1C19;

  /* 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);
}
/* Small phones: headings end on two words joined by a no-break space, which
   at the base sizes is wider than a 280px column. */
@media(max-width:359px){
  :root{--fs-2xl:8.4vw;--fs-3xl:10.5vw}
}

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

.tone-dark,.head,.drawer{
  --bg:var(--deep);--fg:var(--cream);
  --muted:rgba(242,237,227,.88);--soft:rgba(242,237,227,.72);
  --line:rgba(242,237,227,.14);--line-2:rgba(242,237,227,.26);
  --surface:var(--panel);--accent:var(--teal-signal);--accent-fg:var(--teal-light);--focus:var(--teal-signal);
}
.tone-light{
  --bg:var(--cream);--fg:var(--ink);
  --muted:rgba(18,51,61,.88);--soft:rgba(18,51,61,.72);
  --line:rgba(18,51,61,.14);--line-2:rgba(18,51,61,.28);
  --surface:rgba(18,51,61,.035);--accent:var(--teal-signal);--accent-fg:var(--teal-ink);--focus:var(--ink);
}
.tone-teal{
  --bg:var(--teal-signal);--fg:var(--deep);--muted:rgba(10,21,18,.8);
  --line:rgba(10,21,18,.18);--line-2:rgba(10,21,18,.4);
  --surface:rgba(10,21,18,.06);--accent:var(--deep);--accent-fg:var(--deep);--focus:var(--deep);
}
.tone-dark,.tone-light,.tone-teal{background:var(--bg);color:var(--fg)}

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

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--deep)}
body{
  margin:0;background:var(--deep);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:clip;
}
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(--teal-signal);color:var(--deep)}
:focus-visible{outline:2px solid var(--focus,var(--teal-signal));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(--teal-signal);color:var(--deep);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)}
.body .link-arrow{text-decoration:none}

.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(46,183,194,.35) 78%,rgba(46,183,194,.35) 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(--teal-signal);
}
.tone-light .eyebrow{color:var(--teal-ink)}
.tone-light .num-n,.tone-light .jump .icon{color:var(--teal-ink)}
.eyebrow span{text-wrap:balance}
.eyebrow::before{content:"";flex:0 0 24px;height:2px;background:var(--teal-signal);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(10,21,18,.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;min-height:44px;color:var(--cream)}
.bolt{width:12px;height:21px;color:var(--teal-signal)}
.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(--teal-signal)}

.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:44px;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(--teal-signal);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(--deep),0 0 0 3px var(--teal-signal)}

.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(--teal-signal)}
.burger.quiet-focus:focus-visible{outline:none}
.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)}

/* The open menu is its own full-screen layer with its own header row, so it
   never depends on where the sticky header is. The background is opaque from
   the first frame; only the links animate. */
.drawer{
  position:fixed;inset:0;z-index:90;height:100vh;height:100dvh;
  display:flex;flex-direction:column;background:var(--deep);color:var(--fg);
  box-shadow:0 0 0 100vmax var(--deep);
  visibility:hidden;
}
.drawer.is-open{visibility:visible}
.drawer:focus{outline:none}
.drawer-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  min-height:calc(var(--head-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) max(var(--pad),env(safe-area-inset-right,0px)) 0 max(var(--pad),env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--line);
}
.drawer-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1px solid var(--teal-signal);border-radius:var(--radius-sm);color:var(--fg)}
.drawer-close .icon{width:22px;height:22px;stroke-width:2}
.drawer-nav{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:var(--sp-5) max(var(--pad),env(safe-area-inset-right,0px)) calc(var(--sp-7) + env(safe-area-inset-bottom,0px)) max(var(--pad),env(safe-area-inset-left,0px));
}
.drawer-nav ul{opacity:0;transform:translateY(-8px)}
.drawer.is-open .drawer-nav ul{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:clamp(1.375rem,.6rem + 4.4vw,2.25rem);
  line-height:1.1;letter-spacing:-.04em;white-space:nowrap;
}
.drawer-link[aria-current="page"]{color:var(--teal-signal)}
.drawer li:has(.drawer-cta){padding-block:var(--sp-4);border-bottom:1px solid var(--line)}
.drawer-cta{width:100%}
/* Phones in landscape: two columns, so every link fits without scrolling. */
@media(max-height:500px) and (orientation:landscape){
  .drawer-nav{padding-top:var(--sp-2);padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom,0px))}
  .drawer-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
  .drawer-link{min-height:48px;font-size:var(--fs-lg)}
  .drawer li:has(.drawer-cta){grid-column:1 / -1;padding-block:var(--sp-3)}
}

@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}}

/* Scroll lock. Only the root is clipped. The body must stay visible: if it
   kept its own overflow it would become the sticky header's scroll container
   and the header would leave the screen at any scroll position but the top. */
html.menu-open{overflow:hidden}
html.menu-open body{overflow:visible}

/* ---------- 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:44px;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(--teal-signal);color:var(--deep)}
.btn-primary:hover{background:var(--cream);color:var(--deep)}
.tone-light .btn-primary:hover{background:var(--ink);color:var(--cream)}
.tone-teal .btn-primary{background:var(--deep);color:var(--teal-signal)}
.tone-teal .btn-primary:hover{background:var(--ink);color:var(--cream)}

.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);min-height:44px;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(46,183,194,.06),transparent 70%),
    radial-gradient(520px 380px at 0% 100%,rgba(46,183,194,.04),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(46,183,194,.06),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(--teal-signal)}
.jump .icon{width:18px;height:18px;color:var(--teal-signal)}

/* ---------- 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(--teal-signal)}
.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(--soft,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(--teal-signal);
  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(--soft,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(--soft,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(--soft,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(--soft,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(--teal-signal);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(--soft,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)}}
@media(max-width:359px){.path li{padding:var(--sp-3)}.path-name{font-size:var(--fs-base)}}

.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(--teal-signal);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}}

/* Full-bleed band. Phones and portrait tablets: copy, then the artwork edge
   to edge. Landscape from 1024px: the copy sits on the artwork's open sky at
   the top left. The artwork slides up under the copy by at most 15% of its
   width and the copy stays in its left half: that corner of the crop is open
   sky (the plane, the figure and the spiral start lower, the planet further
   right). It never slides above the top of the band. */
.bleed{padding-top:clamp(var(--sp-8),9vw,var(--sp-10))}
.bleed-text{max-width:36rem}
.bleed-text .lede{margin-top:var(--sp-5)}
.bleed-text .link-arrow{margin-top:var(--sp-6)}
.bleed-art{margin:var(--sp-7) 0 0}
.bleed-art img{width:100%}

/* Home: plan-to-city band under the hero / numbers strip. Full-bleed, no
   motion. Edge fades into the dark hero above and the cream Products below. */
.bleed-plan{
  position:relative;margin:0;width:100%;overflow:hidden;background:var(--deep)
}
.bleed-plan img{
  display:block;width:100%;max-width:none;height:auto;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 50%
}
@media(min-width:768px){
  .bleed-plan img{aspect-ratio:16/9;max-height:92vh;object-position:50% 55%}
}
.bleed-plan::before{
  content:"";position:absolute;left:0;right:0;top:0;height:10%;
  pointer-events:none;z-index:1;
  background:linear-gradient(to bottom,var(--deep),transparent)
}

@media(min-width:1024px) and (orientation:landscape){
  .bleed{padding-top:0;overflow:hidden}
  .bleed-copy{position:relative;z-index:1;display:grid}
  .bleed-copy::before{content:"";grid-area:1 / 1;padding-top:15%}
  .bleed-copy > .wrap{grid-area:1 / 1;width:100%;padding-top:clamp(var(--sp-8),9vw,var(--sp-10))}
  .bleed-text{max-width:min(36rem,calc(50vw - max(var(--pad),(100vw - var(--maxw)) / 2 + var(--pad))))}
  .bleed-text{position:relative;isolation:isolate}
  .bleed-text::before{
    content:"";position:absolute;inset:-20% -30% -35% -25%;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(10,21,18,.7),rgba(10,21,18,.45) 60%,rgba(10,21,18,0));
  }
  .bleed-text .h2{font-size:clamp(var(--fs-xl),3.2vw,var(--fs-2xl))}
  .bleed-art{position:relative;margin-top:-15%}
  .bleed-art::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(var(--deep),rgba(10,21,18,0) 10%);
  }
}

/* ---------- 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(--soft,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(--teal-signal)}
.chip-check{display:none;width:16px;height:16px}
.chip input:checked + span{background:var(--teal-signal);border-color:var(--teal-signal);color:var(--deep)}
.chip input:checked + span .chip-check{display:block}
.chip input:focus-visible + span{outline:2px solid var(--teal-signal);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(--soft,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(--teal-signal);box-shadow:0 0 0 3px rgba(46,183,194,.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(--soft,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(--soft,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(--teal-signal)}
.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(--soft,var(--muted))}
.channel-v{font-size:var(--fs-md);font-weight:600;overflow-wrap:anywhere}
.channel-d{color:var(--soft,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(10,21,18,.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(--soft,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(--teal-signal)}
.foot-col ul{display:grid}
.foot-col a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--soft,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(--soft,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-teal,.foot{background:var(--cream);color:var(--ink)}
}