/* ===== Tokens (from Meridian Design System) =====
   Earth-tone palette: a muted forest green replaces the old purple
   throughout (buttons, links, active states, tags), paired with warm
   neutral canvas tones instead of cool blue-grays. */
:root{
  /* Apollo yellow — --primary/-deep/-press are darker steps of the same hue
     (kept dark enough for text/border contrast on white). */
  --primary:#7a6900;--primary-deep:#5c4f00;--primary-press:#453b00;--primary-soft:#b39b00;--primary-subdued:#f7f1cf;
  --accent-bright:#ebf212;--accent-bright-hover:oklch(83% 0.19 105);--accent-bright-press:oklch(77% 0.18 105);
  --brand-dark-900:#1f2b23;
  --ink:#1d1d1f;--ink-secondary:#333336;--ink-mute:#6e6e73;--ink-mute-2:#6e6e73;--on-primary:#ffffff;
  /* One consistent light bone background for the whole page — cards/panels
     use this same tone too, so they're set apart by their hairline border
     alone, not by a different fill color (that's what caused the visible
     banding between sections before: white vs. gray vs. tan side by side). */
  --canvas:#fdfcfa;--canvas-soft:#fdfcfa;--canvas-cream:#fdfcfa;
  --hairline:#ece9e0;--hairline-input:#b9c3ae;
  --lemon:#9b6829;

  /* Apple.com's real stack: -apple-system resolves to SF Pro Display/Text on
     Apple platforms (the two are switched automatically by the OS at ~20px),
     and falls back to Helvetica Neue/Arial elsewhere — see apple-typography.md,
     measured directly off apple.com's computed styles. No web-font file: SF
     Pro isn't licensed for embedding, and this is how Apple's own site ships it. */
  --font-display:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;

  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:9999px;
  /* Shadows tint toward ink (neutral), not the old palette's leftover blue. */
  --shadow-1:0 1px 3px rgba(29,29,31,.08);--shadow-2:0 8px 24px rgba(29,29,31,.08),0 2px 6px rgba(29,29,31,.04);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-body);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-deep);text-decoration:underline;}
img,video{max-width:100%;}

/* ===== Typography — Apple.com's measured scale (apple-typography.md).
   Weight carries hierarchy (600 for headings, 400 for body); tracking tightens
   at large sizes and opens up at mid "editorial" sizes, per the reference. ===== */
.text-display-xxl{font-family:var(--font-display);font-size:48px;font-weight:600;line-height:1.083;letter-spacing:-0.096px;}
.text-display-xl{font-family:var(--font-display);font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-0.02px;}
.text-display-lg{font-family:var(--font-display);font-size:32px;font-weight:600;line-height:1.125;letter-spacing:0.128px;}
.text-display-md{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.14;letter-spacing:0.1px;}
.text-heading-lg{font-family:var(--font-display);font-size:24px;font-weight:400;line-height:1.17;letter-spacing:0.216px;}
.text-heading-md{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.211;letter-spacing:0.228px;}
.text-heading-sm{font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1.24;letter-spacing:-0.374px;}
.text-body-lg{font-family:var(--font-body);font-size:19px;font-weight:400;line-height:1.21;letter-spacing:0.228px;}
.text-body-md{font-family:var(--font-body);font-size:17px;font-weight:400;line-height:1.47;letter-spacing:-0.374px;}
.text-body-tabular{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.29;letter-spacing:-0.224px;font-feature-settings:"tnum";}
.text-caption{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.29;letter-spacing:-0.224px;}
.text-micro-cap{font-family:var(--font-body);font-size:12px;font-weight:600;line-height:1.333;letter-spacing:.06em;text-transform:uppercase;}

/* ===== Buttons ===== */
/* Apollo button shape: flat fill, 8px radius, no shadow/blur/gradient —
   typography stays Apple's per earlier instruction. */
.btn{
  font-family:var(--font-body);font-weight:400;line-height:1;letter-spacing:0;
  border-radius:8px;cursor:pointer;border:1px solid transparent;box-shadow:none;
  transition:background .15s cubic-bezier(0.4,0,0.2,1),border-color .15s cubic-bezier(0.4,0,0.2,1),color .15s cubic-bezier(0.4,0,0.2,1);
  display:inline-flex;align-items:center;justify-content:center;
  width:fit-content;white-space:nowrap;
}
.btn-md{height:48px;padding:0 20px;font-size:16px;}
.btn-sm{height:40px;padding:0 16px;font-size:14px;}
.btn-primary{background:rgba(127,127,127,0.14);color:var(--ink);border:1px solid rgba(29,29,31,0.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.btn-primary:hover{background:rgba(127,127,127,0.22);}
.btn-primary:active{background:rgba(127,127,127,0.3);}
.btn-secondary{background:transparent;color:#000;border-color:#000;}
.btn-secondary:hover{background:rgba(0,0,0,.05);}


/* ===== Input ===== */
.field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body);}
.field label{font-size:13px;color:var(--ink-secondary);letter-spacing:-0.39px;}
.field input{
  background:var(--canvas);color:var(--ink);font-size:15px;line-height:1.4;font-family:var(--font-body);
  padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--hairline-input);outline:none;
  transition:border-color .15s ease;
}
.field input:focus{border-color:var(--primary);}

/* ===== Hero scene =====
   script.js ("Hero scene") draws the hero in one WebGL canvas: the grassland
   photo (original truck painted out), the truck cut from that photo driving
   along its road, and the tagline as glass letters that bend the scene
   behind them. The plain layers below (photo, scrim, parked truck, white
   headline) are the fallback when WebGL is unavailable. The whole scene
   keeps the .gradient-mesh class so the existing parallax moves it as one. */
.hero{overflow:hidden;}
.gradient-mesh{position:absolute;left:0;right:0;top:-100px;height:calc(100% + 200px);overflow:hidden;background:#21261c;}
.hero-photo{position:absolute;left:0;top:0;width:100%;height:100%;}
.hero-photo img{display:block;width:100%;height:100%;max-width:none;}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,24,16,0.10) 0%, rgba(20,24,16,0.22) 30%, rgba(20,24,16,0.34) 55%, rgba(20,24,16,0.16) 78%, rgba(20,24,16,0.62) 90%, rgba(20,24,16,0.80) 100%);
}
.hero-gl{position:absolute;left:0;top:0;width:100%;height:100%;display:none;}
.hero-scene.gl-on .hero-gl{display:block;}
.hero-scene.gl-on .hero-photo,
.hero-scene.gl-on .hero-scrim,
.hero-scene.gl-on .hero-truck-rig{visibility:hidden;}

.hero-giant{
  position:absolute;left:0;right:0;margin:0;padding:0 64px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(44px, min(6.2vw, 10.5vh), 120px);line-height:1.05;letter-spacing:-0.045em;
  color:#fff;text-wrap:balance;
}
/* Plain white tagline: shown when WebGL is unavailable. With WebGL on, it
   stays in the page for screen readers and the letter spans are used only
   to measure where each glass glyph goes. */
.hero-giant-src{display:block;text-shadow:0 4px 40px rgba(0,0,0,0.25);}
.hero-giant-glass{display:none;}
.hero-giant.is-gl .hero-giant-src{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.hero-giant.is-gl .hero-giant-glass{display:block;visibility:hidden;}
.hg-word{display:inline-block;white-space:nowrap;}
.hg-l{display:inline-block;}

.hero-truck-rig{position:absolute;left:0;top:0;}
.hero-truck{display:block;width:100%;height:auto;filter:brightness(0.8) contrast(0.88) saturate(0.82);}
.hero-truck-shadow{
  position:absolute;left:-2%;right:-6%;bottom:-7%;height:22%;
  background:radial-gradient(ellipse at 55% 50%, rgba(10,12,8,0.3) 0%, rgba(10,12,8,0) 70%);
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* ===== Nav ===== */
.nav{
  display:flex;align-items:center;justify-content:space-between;padding:16px 24px;
  position:sticky;top:0;z-index:10;background:transparent;transition:background .2s ease,border-color .2s ease;
}
.nav.scrolled{background:var(--canvas);border-bottom:1px solid var(--hairline);}

/* Anchor targets scroll-clear the sticky nav (~75px tall) instead of tucking under it. */
#pain-points,#how-it-works,#calculator,#apart,#faq,#team,#specs{scroll-margin-top:76px;}
.nav-logo{color:var(--ink);font-weight:600;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a:not(.btn){color:var(--ink-mute-2);font-size:15px;text-decoration:none;}
.nav-links a:not(.btn):hover{color:var(--ink);text-decoration:none;}

.nav .btn-primary{background:var(--accent-bright);color:var(--ink);border-color:transparent;}
.nav .btn-primary:hover{background:var(--accent-bright-hover);}
.nav .btn-primary:active{background:var(--accent-bright-press);}

/* Hamburger toggle — hidden on desktop, shown at the .nav-links collapse breakpoint below. */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:36px;height:36px;padding:0;border:none;background:transparent;cursor:pointer;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:1px;transition:transform .2s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ===== Language switch ===== */
.lang-switch{
  display:flex;align-items:center;gap:2px;padding:3px;
  background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--radius-sm);
}
.lang-btn{
  font-family:var(--font-body);font-size:13px;font-weight:400;line-height:1;color:var(--ink-mute-2);
  background:transparent;border:none;border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.lang-btn:hover{color:var(--ink);}
.lang-btn.active{background:var(--accent-bright);color:var(--ink);}

/* ===== Sections ===== */
.section{padding:112px 24px;}
.section-narrow{max-width:720px;margin:0 auto;padding:80px 24px;text-align:center;}
.section-inner{max-width:1120px;margin:0 auto;}
.eyebrow{color:var(--ink-mute);}
.muted{color:var(--ink-secondary);}

/* Section-header rhythm — replaces a hand-tuned inline margin per heading
   (previously 24px/40px/12px/0 depending on the section, with no pattern).
   Two variants, chosen by what follows the heading, not by section identity:
   .section-heading for a heading that introduces a whole content block
   (a list, grid, or table); .section-heading-tight for a heading that's
   immediately followed by a short one-line subhead paragraph and should
   read as grouped with it. */
.section-eyebrow{display:block;margin:0 0 12px 0;}
.section-heading{margin:0 0 24px 0;}
.section-heading-tight{margin:0 0 12px 0;}

/* ===== Hero layout =====
   The hero fills the first screen under the sticky nav. svh (small viewport
   height) is used instead of dvh so the hero does not resize while a phone's
   browser bar slides in and out during scrolling. */
.hero{position:relative;min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);}
.hero-content{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px 64px 44px 64px;min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);pointer-events:none;
}
.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:32px;pointer-events:auto;}
.hero-h1-sub{margin:0;text-wrap:pretty;max-width:620px;font-family:var(--font-display);font-size:24px;font-weight:500;line-height:1.25;letter-spacing:0.1px;color:rgba(255,255,255,0.88);text-shadow:0 1px 12px rgba(0,0,0,0.35);}
.hero-content .btn-primary{flex:none;background:var(--accent-bright);color:var(--ink);border-color:transparent;}
.hero-content .btn-primary:hover{background:var(--accent-bright-hover);}


/* ===== How it works =====
   Organized 3x2 card grid, six equal-size, equal-color cards (one still
      identically to the other five so the pattern reads correctly before
   real copy lands). Single color family throughout: every card uses the
   same pale-lemon tint (--primary-subdued) with the bright accent yellow
   (--accent-bright) reserved for the icon badge — deliberately one hue,
   not a multi-color bento. The whole grid is one .reveal-group (see
   script.js) so all six cards fade/rise/sharpen in as a staggered
   cascade on scroll, the same mechanism driving every other section. */
.steps-grid{display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:20px;}
/* Five cards: three across, then two wider ones, so no empty slot. */
.steps-grid > .step-card{grid-column:span 2;}
.steps-grid > .step-card:nth-child(n+4){grid-column:span 3;}
.step-card{border-radius:var(--radius-lg);padding:32px;background:var(--primary-subdued);}
.step-card h3{margin:0 0 10px 0;font-size:20px;line-height:1.25;}
.step-card p{margin:0;}
.step-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;margin-bottom:20px;
  background:var(--accent-bright);color:var(--primary-deep);
}
.step-icon svg{width:22px;height:22px;}

@media (max-width: 900px){
  .steps-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .steps-grid > .step-card,.steps-grid > .step-card:nth-child(n+4){grid-column:span 1;}
  .steps-grid > .step-card:nth-child(5){grid-column:span 2;}
}
@media (max-width: 640px){
  .steps-grid{grid-template-columns:1fr;}
  .steps-grid > .step-card,.steps-grid > .step-card:nth-child(n+4),.steps-grid > .step-card:nth-child(5){grid-column:auto;}
}


form{display:flex;flex-direction:column;gap:20px;}


/* Below 900px the nav links, language switch, and CTA collapse into a dropdown
   panel behind the hamburger toggle — this is also the calculator's own
   stacking breakpoint (see .calc-grid below), so the whole page settles into
   its "narrow" layout at one consistent width instead of nav breaking earlier
   than everything else. */
@media (max-width: 1180px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;z-index:9;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--canvas);border-bottom:1px solid var(--hairline);
    padding:12px 24px 20px 24px;box-shadow:var(--shadow-2);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .18s ease;}
  .nav-links a:not(.btn){display:block;padding:10px 4px;}
  .nav-links .lang-switch{align-self:flex-start;margin:6px 0;}
  .nav-links .btn{width:100%;margin-top:4px;}
}

@media (max-width: 640px){
  .text-display-xxl{font-size:36px;line-height:1.11;letter-spacing:0;}
  .text-display-xl{font-size:32px;}
  .text-display-lg{font-size:26px;}
  .hero-h1-sub{font-size:17px;}
  .section{padding:72px 20px;}
  .hero-content{padding:56px 20px 24px 20px;}
  .hero-giant{padding:0 20px;line-height:1.1;}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:12px;}
}

/* Short screens: a slightly smaller sub line. */
@media (max-height: 700px){
  .hero-content{padding-bottom:24px;}
  .hero-h1-sub{font-size:19px;}
}

/* ================================================================
   Container calculator (part of the "Calculator" section on the
   main scrolling page — see #calculator in index.html)
   ================================================================ */

.calc-eyebrow-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:24px;}

.calc-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start;}

.calc-panel{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:32px;}
.calc-panel + .calc-panel{margin-top:24px;}

.calc-price{font-feature-settings:"tnum";color:var(--ink);margin:8px 0 4px 0;}

.calc-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius-md);overflow:hidden;margin-top:20px;}
.calc-tile{background:var(--canvas);padding:16px;}
.calc-tile .calc-tile-value{font-feature-settings:"tnum";margin-top:4px;}

.calc-lock-box{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:20px;text-align:center;}
.calc-lock-box .btn{width:100%;}
.calc-lock-box p{margin:12px 0 0 0;}

.callout{border-radius:var(--radius-md);padding:14px 16px;border:1px solid var(--hairline);}
.callout + .callout{margin-top:12px;}
.callout-label{display:block;margin-bottom:4px;}
.callout-warn{background:rgba(155,104,41,0.07);border-color:rgba(155,104,41,0.35);}
.callout-warn .callout-label{color:var(--lemon);}
.callout-note{background:var(--canvas-soft);border-color:var(--hairline);}
.callout-note .callout-label{color:var(--ink-mute);}

.segmented{display:inline-flex;align-items:center;gap:2px;padding:3px;background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--radius-sm);}
.segmented-btn{
  font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1;color:var(--ink-mute-2);
  background:transparent;border:none;border-radius:var(--radius-sm);padding:8px 16px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.segmented-btn:hover{color:var(--ink);}
.segmented-btn.active{background:var(--accent-bright);color:var(--ink);}

.gauge-row{margin-bottom:20px;}
.gauge-row:last-of-type{margin-bottom:0;}
.gauge-label-line{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.gauge-track{height:8px;border-radius:var(--radius-sm);background:var(--canvas-soft);border:1px solid var(--hairline);overflow:hidden;}
.gauge-fill{height:100%;background:var(--accent-bright);border-radius:var(--radius-sm);transition:width .5s cubic-bezier(.16,.8,.24,1);}
.gauge-fill.binding{background:var(--primary-deep);}

.calc-stepper{display:flex;align-items:center;gap:6px;}
.calc-stepper button{
  width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--hairline-input);background:var(--canvas);
  color:var(--ink);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.calc-stepper button:hover{border-color:var(--primary);color:var(--primary);}
.calc-stepper input{width:84px;text-align:center;font-feature-settings:"tnum";}

.calc-table{margin-top:20px;border:1px solid var(--hairline);border-radius:var(--radius-md);overflow:hidden;}
.calc-table-head{display:grid;grid-template-columns:2fr 1.3fr 0.8fr 0.8fr 1fr;gap:12px;background:var(--canvas-soft);padding:12px 20px;}
.calc-table-row{display:grid;grid-template-columns:2fr 1.3fr 0.8fr 0.8fr 1fr;gap:12px;padding:20px;border-top:1px solid var(--hairline);align-items:start;}
.calc-table-row .calc-item-name{margin:0 0 4px 0;}
.calc-table-row .calc-item-desc{margin:0;color:var(--ink-secondary);}
.calc-table-row .calc-num{font-feature-settings:"tnum";}
.calc-moq-note{margin-top:8px;color:var(--lemon);}

@media (max-width: 900px){
  .calc-grid{grid-template-columns:1fr;}
  .calc-tiles{grid-template-columns:repeat(2,1fr);}
  .calc-table-head{display:none;}
  .calc-table-row{grid-template-columns:1fr;gap:6px;}
  .calc-table-row .calc-num{display:flex;justify-content:space-between;}
  .calc-table-row .calc-num::before{content:attr(data-label);color:var(--ink-mute);font-size:13px;}
}

/* Chinese tagline: CJK glyphs need normal tracking and a bit more line height. */
html[lang="zh-Hans"] .hero-giant{letter-spacing:0;line-height:1.14;font-size:clamp(40px, 5.6vw, 108px);}

/* Visible keyboard focus on every link and button. */
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.hero a:focus-visible{outline-color:#fff;}
.hero-scene.gl-on .hero-gl{animation:heroGlIn .4s ease both;}
@keyframes heroGlIn{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion: reduce){.hero-scene.gl-on .hero-gl{animation:none;}}


/* =====================================================================
   Sections 3 onward: How it works, Calculator, What sets us apart,
   Common questions, Team, Send us your specs, Footer.
   Same tokens as the hero and pain points; no extra typefaces: every
   label uses the same system font as the rest of the page.
   ===================================================================== */
:root{--route:#d8d3c2;--forest:var(--brand-dark-900);}
[hidden]{display:none !important;}
.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;}
.btn-accent{background:var(--accent-bright);color:var(--ink);border-color:transparent;}
.btn-accent:hover{background:var(--accent-bright-hover);color:var(--ink);text-decoration:none;}
.btn-accent:active{background:var(--accent-bright-press);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline-input);}
.btn-ghost:hover{background:rgba(29,29,31,.05);text-decoration:none;}
a.btn:hover{text-decoration:none;}
/* Placeholder copy still to be supplied: visible on purpose. */
.ph{font:inherit;font-size:.92em;background:var(--primary-subdued);color:var(--primary-deep);padding:2px 8px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

/* ---------- How it works: a route from spec sheet to door ---------- */
.flow{padding:112px 24px;background:var(--canvas);}
.flow-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start;}
.flow-head{position:sticky;top:120px;}
.flow-lede{margin:0 0 28px 0;max-width:420px;}
.route{list-style:none;margin:0;padding:8px 0 0 0;position:relative;}
.route-line{position:absolute;left:11px;top:14px;bottom:40px;width:2px;background:var(--route);border-radius:2px;}
.route-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--ink);border-radius:2px;}
.route:not(.is-live) .route-box{display:none;}
.route:not(.is-live) .route-fill{height:100%;}
.route-box{position:absolute;left:50%;top:0;will-change:transform;width:18px;height:12px;margin:-6px 0 0 -9px;border-radius:2px;background:var(--accent-bright);box-shadow:0 0 0 2px var(--ink);transition:opacity .3s;}
.stop{position:relative;padding:0 0 64px 56px;transition:opacity .5s ease;}
.stop:last-child{padding-bottom:0;}
.stop-title{transition:color .4s ease;}
.route.is-live .stop:not(.is-on) .stop-title{color:var(--ink-mute);}
.stop-dot{position:absolute;left:4px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--canvas);border:2px solid var(--route);transition:border-color .4s,background .4s,transform .4s;}
.route:not(.is-live) .stop .stop-dot,.stop.is-on .stop-dot{border-color:var(--ink);background:var(--ink);transform:scale(1.1);}
.route:not(.is-live) .stop[data-who="you"] .stop-dot,.stop[data-who="you"].is-on .stop-dot{background:var(--accent-bright);}
.stop-meta{display:flex;align-items:center;gap:10px;margin:0 0 10px 0;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-mute);font-feature-settings:"tnum";}
.stop-sep{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;}
.stop-who{font-weight:500;}
.stop[data-who="you"] .stop-who{color:var(--primary-deep);font-weight:600;}
.stop-title{font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.01em;margin:0 0 10px 0;text-wrap:balance;}
.stop-body{font-size:17px;line-height:1.5;color:var(--ink-secondary);margin:0;max-width:520px;}
.stop-stat{margin:12px 0 0 0;}
.stop-link{display:inline-block;margin-top:14px;font-weight:600;color:var(--ink);border-bottom:2px solid var(--accent-bright);}
.stop-link:hover{text-decoration:none;color:var(--ink);border-color:var(--ink);}
.stop-link::after{content:" \2192";}

/* ---------- Calculator section ---------- */
.calc-section{background:var(--canvas-soft);border-top:1px solid var(--hairline);}
.calc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px;}
.ph-note{font-size:13px;padding:6px 10px;}

/* ---------- What sets us apart ---------- */
.apart{background:var(--forest);color:#fff;padding:112px 24px;}
.apart-inner{max-width:1120px;margin:0 auto;}
.apart-eyebrow{color:var(--accent-bright);display:block;margin-bottom:12px;}
.apart-h2{margin:0 0 56px 0;color:#fff;max-width:720px;}
.apart-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start;}
.apart-tabs{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.14);}
.apart-tab{position:relative;display:block;text-align:left;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55);font:inherit;font-size:18px;line-height:1.3;padding:18px 0 18px 20px;cursor:pointer;transition:color .2s;}
.apart-tab:hover{color:#fff;}
.apart-tab[aria-selected="true"]{color:#fff;}
.apart-tab-bar{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;}
.apart-tab-bar::after{content:"";position:absolute;left:0;top:0;width:100%;height:var(--p,0%);background:var(--accent-bright);}
.apart-tab[aria-selected="true"] .apart-tab-bar::after{height:var(--p,100%);}
.apart-tab:focus-visible{outline:2px solid var(--accent-bright);outline-offset:-2px;}
.apart-panels{min-height:340px;}
.apart-text{font-size:28px;line-height:1.3;font-weight:500;letter-spacing:-.005em;margin:0 0 36px 0;color:#fff;text-wrap:pretty;}
.apart-vis{margin:0;padding:0;}
.vis-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.vis-flow span,.vis-chips span{font-size:14px;padding:8px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);}
.vis-flow span.hl{background:var(--accent-bright);color:var(--ink);border-color:transparent;}
.vis-flow i{width:28px;height:1px;background:rgba(255,255,255,.4);position:relative;}
.vis-flow i::after{content:"";position:absolute;right:0;top:-3px;border-left:6px solid rgba(255,255,255,.6);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;}
.vis-chips{display:flex;flex-wrap:wrap;gap:10px;}
.vis-compare{display:grid;gap:14px;max-width:560px;}
.cmp-row{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;}
.cmp-label{font-size:14px;color:rgba(255,255,255,.75);}
.cmp-track{display:flex;gap:3px;height:14px;}
.cmp-track b{display:block;height:100%;border-radius:3px;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1);}
.apart-panel.is-shown .cmp-track b{width:var(--w);}
.cmp-a,.cmp-c{background:var(--accent-bright);}
.cmp-b{background:rgba(255,255,255,.28);transition-delay:.25s !important;}
.cmp-key{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:rgba(255,255,255,.6);padding-left:166px;}
.k::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--accent-bright);}
.k-b::before{background:rgba(255,255,255,.28);}
.k-a{display:none;}
.vis-checks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;}
.vis-checks li{position:relative;padding:14px 14px 14px 44px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:15px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;}
.vis-checks li::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--accent-bright);}
.vis-checks li::after{content:"";position:absolute;left:20px;top:50%;width:5px;height:9px;margin-top:-6px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg);}
.apart-panel.is-shown .vis-checks li{opacity:1;transform:none;}
.apart-panel.is-shown .vis-checks li:nth-child(2){transition-delay:.12s;}
.apart-panel.is-shown .vis-checks li:nth-child(3){transition-delay:.24s;}
.apart-panel.is-shown .vis-checks li:nth-child(4){transition-delay:.36s;}
.vis-terms{display:grid;gap:0;max-width:560px;border-top:1px solid rgba(255,255,255,.14);}
.vis-terms div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);}
.vis-terms dt{color:rgba(255,255,255,.7);font-size:15px;}
.vis-terms dd{margin:0;font-weight:600;color:var(--accent-bright);font-size:15px;}
.apart-panel{animation:panelIn .45s ease both;}
@keyframes panelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.apart-cta{margin-top:56px;}

/* ---------- Common questions ---------- */
.faq{background:var(--canvas);}
.faq-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start;}
.faq-side{position:sticky;top:120px;}
.faq-filters{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 32px 0;}
.chip{font:inherit;font-size:14px;padding:8px 14px;border-radius:8px;border:1px solid var(--hairline-input);background:transparent;color:var(--ink-secondary);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.chip:hover{color:var(--ink);border-color:var(--ink);}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink);}
.faq-list{border-top:1px solid var(--hairline);}
.qa{border-bottom:1px solid var(--hairline);}
.qa.is-filtered{display:none;}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.005em;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary:hover{color:var(--primary-deep);}
.qa summary:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:4px;}
.qa summary i{flex:none;position:relative;width:28px;height:28px;border-radius:50%;border:1px solid var(--hairline-input);transition:background .2s,border-color .2s,transform .3s;}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--ink);transition:transform .3s;}
.qa summary i::after{transform:rotate(90deg);}
.qa[open] summary i{background:var(--accent-bright);border-color:transparent;}
.qa[open] summary i::after{transform:rotate(0deg);}
.qa-a{overflow:hidden;}
.qa-a > *:first-child{margin-top:0;}
.qa-a p{margin:0 0 24px 0;font-size:17px;line-height:1.55;color:var(--ink-secondary);max-width:640px;}
.qa-warn{margin:0 0 24px 0;max-width:640px;}
.qa-warn p{margin:0;font-size:15px;}
.pay-bar{display:flex;height:40px;border-radius:8px;overflow:hidden;max-width:520px;font-size:13px;font-weight:600;}
.pay-dep{flex:0 0 30%;background:var(--accent-bright);display:flex;align-items:center;padding-left:12px;}
.pay-bal{flex:1;background:var(--primary-subdued);display:flex;align-items:center;padding-left:12px;color:var(--primary-deep);}
.pay-key{display:flex;max-width:520px;font-size:13px;color:var(--ink-mute);margin:8px 0 24px 0;}
.pay-key span:first-child{flex:0 0 30%;}

/* ---------- Team ---------- */
.team{background:var(--canvas-soft);border-top:1px solid var(--hairline);}
.team-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
/* Text-led cards: only Diego has a photo, so every card leads with the same
   round avatar slot (photo for Diego, an initial for Erica and Jason) and
   the cards stay identical in structure. */
.person{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--radius-lg);background:var(--canvas);border:1px solid var(--hairline);}
.person-top{display:flex;align-items:center;gap:16px;}
.person-avatar{flex:none;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--forest);color:var(--accent-bright);font-size:24px;font-weight:600;letter-spacing:-.01em;overflow:hidden;}
.person-avatar img{width:100%;height:100%;object-fit:cover;}
.person-avatar-photo{background:var(--primary-subdued);color:var(--primary-deep);font-size:11px;font-weight:500;border:1px dashed rgba(122,105,0,.4);}
.person-head{display:flex;flex-direction:column;gap:2px;}
.person-head h3{margin:0;}
.person-role{font-size:14px;color:var(--ink-mute);}
.person-where{display:flex;flex-wrap:wrap;gap:6px;}
.person-where span{font-size:12px;padding:3px 8px;border-radius:4px;background:var(--canvas-soft);border:1px solid var(--hairline);color:var(--ink-secondary);}
.person-where span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary-soft);margin-right:6px;vertical-align:1px;}
.person-bio{margin:0;font-size:15px;line-height:1.55;color:var(--ink-secondary);}
.person-leads{margin:auto 0 0 0;padding-top:14px;border-top:1px solid var(--hairline);font-size:14px;color:var(--ink-mute);}
.person-leads strong{color:var(--ink);font-weight:600;margin-left:4px;}

/* ---------- Send us your specs ---------- */
.specs{background:var(--forest);color:#fff;padding:112px 24px;}
.specs-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start;}
.specs-eyebrow{color:var(--accent-bright);display:block;margin-bottom:12px;}
.specs-h2{color:#fff;margin:0 0 32px 0;text-wrap:balance;}
.specs-promises{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.14);}
.specs-promises li{padding:16px 0 16px 32px;border-bottom:1px solid rgba(255,255,255,.14);position:relative;color:rgba(255,255,255,.7);font-size:16px;line-height:1.45;}
.specs-promises li::before{content:"";position:absolute;left:0;top:20px;width:14px;height:14px;border-radius:50%;background:var(--accent-bright);}
.specs-promises strong{color:#fff;font-weight:600;}
.specs-card{background:var(--canvas);color:var(--ink);border-radius:var(--radius-lg);padding:36px;box-shadow:0 30px 60px rgba(0,0,0,.25);}
.form-steps{list-style:none;margin:0 0 28px 0;padding:0;display:flex;gap:8px;}
.form-steps li{flex:1;display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:3px solid var(--hairline);font-size:13px;color:var(--ink-mute);transition:border-color .3s,color .3s;}
.form-steps li span{width:22px;height:22px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--hairline);color:var(--ink-secondary);transition:background .3s;}
.form-steps li em{font-style:normal;}
.form-steps li.is-on,.form-steps li.is-done{border-color:var(--ink);color:var(--ink);}
.form-steps li.is-on span{background:var(--accent-bright);color:var(--ink);}
.form-steps li.is-done span{background:var(--ink);color:#fff;}
#specs-form{display:block;}
.site-foot a{color:var(--ink-mute);}
.form-page{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;animation:panelIn .35s ease both;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field-label{font-size:13px;color:var(--ink-secondary);letter-spacing:-0.39px;}
.field input.is-bad{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12);}
.field input{padding:12px 14px;font-size:16px;}
.drop{display:flex;align-items:center;gap:14px;padding:20px;border:1.5px dashed var(--hairline-input);border-radius:10px;cursor:pointer;transition:border-color .2s,background .2s;}
.drop:hover,.drop.is-over{border-color:var(--ink);background:var(--primary-subdued);}
.drop:focus-within{outline:2px solid var(--primary);outline-offset:2px;}
.drop-icon{flex:none;width:36px;height:36px;border-radius:8px;background:var(--accent-bright);position:relative;}
.drop-icon::before{content:"";position:absolute;left:17px;top:10px;width:2px;height:14px;background:var(--ink);}
.drop-icon::after{content:"";position:absolute;left:13px;top:10px;width:8px;height:8px;border:solid var(--ink);border-width:2px 0 0 2px;transform:rotate(45deg);}
.drop-text{font-size:14px;color:var(--ink-secondary);line-height:1.4;}
.drop-text strong{color:var(--ink);}
.drop-list{list-style:none;margin:8px 0 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.drop-list li{display:flex;align-items:center;gap:6px;font-size:13px;padding:4px 4px 4px 10px;border-radius:4px;background:var(--canvas-soft);border:1px solid var(--hairline);}
.seg-pick{display:flex;flex-wrap:wrap;gap:8px;}
.seg-pick label{cursor:pointer;}
.seg-pick input{position:absolute;opacity:0;width:1px;height:1px;}
.seg-pick span{display:inline-block;font-size:14px;padding:10px 14px;border-radius:8px;border:1px solid var(--hairline-input);transition:background .15s,border-color .15s;}
.seg-pick input:checked + span{background:var(--accent-bright);border-color:transparent;}
.seg-pick input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px;}
.form-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;}
.form-error{margin:16px 0 0 0;font-size:14px;color:#b3261e;}
.form-done{text-align:left;padding:12px 0;}
.form-done:focus{outline:none;}
.done-tick{display:block;width:48px;height:48px;border-radius:50%;background:var(--accent-bright);position:relative;margin-bottom:20px;}
.done-tick::after{content:"";position:absolute;left:18px;top:12px;width:10px;height:18px;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg);}
.form-done h3{margin:0 0 8px 0;}

/* ---------- Footer ---------- */
.site-foot{padding:64px 24px 32px 24px;background:var(--canvas);border-top:1px solid var(--hairline);}
.foot-inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.foot-brand p{margin:8px 0 0 0;font-size:14px;max-width:300px;}
.foot-cols{display:flex;gap:48px;flex-wrap:wrap;}
.foot-cols div{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:14px;}
.foot-h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--ink-mute);margin-bottom:4px;}
.foot-base{max-width:1120px;margin:48px auto 0 auto;padding-top:20px;border-top:1px solid var(--hairline);font-size:13px;color:var(--ink-mute);}

@media (max-width: 900px){
  .flow,.apart,.specs{padding:72px 20px;}
  .flow-inner,.apart-body,.faq-grid,.specs-grid{grid-template-columns:1fr;gap:40px;}
  .flow-head,.faq-side{position:static;}
  .apart-tabs{flex-direction:row;overflow-x:auto;border-top:0;gap:8px;padding-bottom:4px;scrollbar-width:none;}
  .apart-tab{flex:none;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:10px 14px;font-size:15px;}
  .apart-tab[aria-selected="true"]{background:rgba(255,255,255,.1);border-color:var(--accent-bright);}
  .apart-tab-bar{display:none;}
  .apart-text{font-size:22px;}
  .apart-panels{min-height:0;}
  .team-cards{grid-template-columns:1fr;gap:16px;}
  .specs-card{padding:24px;}
}
@media (max-width: 640px){
  .stop{padding-left:44px;padding-bottom:48px;}
  .stop-title{font-size:22px;}
  .cmp-row{grid-template-columns:1fr;gap:6px;}
  .cmp-key{padding-left:0;}
  .vis-checks{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .qa summary{font-size:17px;}
  .form-steps li em{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .apart-panel,.form-page{animation:none;}
  .cmp-track b,.vis-checks li,.stop{transition:none;}
}

/* Review pass additions */
.drop-list button{border:0;background:none;cursor:pointer;width:22px;height:22px;border-radius:4px;color:var(--ink-mute);font-size:16px;line-height:1;}
.drop-list button:hover{background:var(--hairline);color:var(--ink);}
.held-note{display:flex;flex-direction:column;gap:2px;margin:0 0 20px 0;padding:12px 14px;border-radius:8px;background:var(--primary-subdued);font-size:14px;color:var(--primary-deep);}
.held-note strong{color:var(--ink);}
.done-summary{margin:20px 0 24px 0;border-top:1px solid var(--hairline);font-size:14px;}
.done-summary div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--hairline);}
.done-summary dt{color:var(--ink-mute);}
.done-summary dd{margin:0;text-align:right;color:var(--ink);}
.nav-links a.is-current:not(.btn){color:var(--ink);}
@media (max-width: 640px){
  .vis-flow{flex-direction:column;align-items:flex-start;gap:6px;}
  .vis-flow i{width:1px;height:14px;margin-left:16px;}
  .vis-flow i::after{right:-3px;top:auto;bottom:0;border-top:6px solid rgba(255,255,255,.6);border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-bottom:0;}
}

/* Polish pass */
.callout-next{background:var(--primary-subdued);border-color:rgba(122,105,0,.25);}
.callout-next .callout-label{color:var(--primary-deep);}
.k-note{flex-basis:100%;font-size:12px;color:rgba(255,255,255,.45);}
.btn-accent,.nav .btn-primary,.hero-content .btn-primary{transition:background .2s ease,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;}
.btn-accent:hover,.nav .btn-primary:hover,.hero-content .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(92,79,0,.18);}
.btn-accent:active,.nav .btn-primary:active,.hero-content .btn-primary:active{transform:translateY(0);box-shadow:none;}
@media (prefers-reduced-motion: reduce){.btn-accent:hover,.nav .btn-primary:hover,.hero-content .btn-primary:hover{transform:none;}}
.calc-panel-wide{margin:0 0 24px 0;}
.calc-grid .calc-panel + .calc-panel{margin-top:24px;}

/* ===== Hero: "Did you know?" as a smoked-glass panel in the scene =====
   Desktop: top right, above the road, clear of the tagline (which is held
   to the left 58% of the hero). Phones: it follows the button, still on the
   photo, so the first screen stays uncluttered. */
@media (min-width: 901px){ .hero-giant{right:auto;width:58%;} }
.hero-content{display:flex;flex-direction:column;justify-content:space-between;padding:56px 64px 72px 64px;}
.hero-dyk{
  align-self:flex-end;width:min(440px, 36vw);pointer-events:auto;
  padding:26px 28px;border-radius:var(--radius-lg);color:#fff;
  background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 45%), rgba(16,20,12,.34);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(8,10,6,.28);
}
.hero-dyk-eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:12px;}
.hero-dyk-stat{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.78);text-wrap:pretty;}
.hero-dyk-pitch{margin:16px 0 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:19px;line-height:1.38;font-weight:600;letter-spacing:-.005em;color:#fff;text-wrap:pretty;}
@media (max-width: 900px){
  .hero-content{justify-content:flex-start;gap:28px;padding:var(--below-road, 60vh) 20px 32px 20px;}
  .hero-dyk{order:2;align-self:stretch;width:auto;padding:22px;}
  .hero-dyk-pitch{font-size:17px;}
}
@media (max-height: 760px) and (min-width: 901px){
  .hero-dyk{padding:20px 22px;}
  .hero-dyk-stat{font-size:14px;}
  .hero-dyk-pitch{font-size:17px;margin-top:12px;padding-top:12px;}
}

/* ===== Review pass 2 ===== */
/* Logo returns to the top. */
a.nav-logo{color:var(--ink);text-decoration:none;}
a.nav-logo:hover{color:var(--ink);text-decoration:none;}
/* Tablets in portrait use the phone layout; give the tagline more presence there. */
@media (min-width: 641px) and (max-width: 900px){
  .hero-giant{font-size:clamp(56px, 8.4vw, 96px);padding:0 40px;}
  .hero-content{padding-left:40px;padding-right:40px;}
}
/* Phones: the tab strip fades at the right edge so it reads as scrollable. */
@media (max-width: 900px){
  .apart-tabs{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:32px;}
}
/* Consent line under the form's send button. */
.form-consent{margin:4px 0 0 0;font-size:13px;line-height:1.45;color:var(--ink-mute);}
.form-consent a{color:var(--ink-secondary);text-decoration:underline;}
/* Phones: a send-your-specs bar appears once the hero has scrolled away and
   hides again when the form itself (or the footer) is on screen. */
.mobile-cta{display:none;}
@media (max-width: 900px){
  .mobile-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
    background:rgba(253,252,250,.86);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
    border-top:1px solid var(--hairline);
    transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .mobile-cta.is-shown{transform:none;}
  .mobile-cta .btn{width:100%;}
}
@media (prefers-reduced-motion: reduce){ .mobile-cta{transition:none;} }

/* Sections focused by in-page links show no outline box. */
section[tabindex="-1"]:focus,div[tabindex="-1"]:focus{outline:none;}