/* ─────────────────────────────────────────────────────────────────────────────
   VectorMe landing v7 — video hero, console as a side prop.
   SELF-CONTAINED: index.html loads ONLY this file (styles.css still serves the
   legal/account pages and is untouched). Bump ?v= in index.html on any edit.

   Structure: a video plate hero with the operations console entering from the
   right edge (cropped by the viewport, so it reads as a detail of a bigger
   workspace rather than the subject), then a tour that highlights one item at
   a time as it passes the read line. No stock photography, no invented section
   labels — the console's own vocabulary (< > prompts, dashed rule, mono values)
   is the structural device.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#08090b;
  --panel:#101217;
  --line:rgba(255,255,255,.09);
  --gold:#C9984E;
  --gold-hi:#E2B96D;
  --ice:#EDE7DE;
  --mu:#9C9081;
  --wh:#FFFFFF;
  --maxw:min(94vw,1720px);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Vertical room per tour section. This IS the scroll distance a section owns:
     at the old ~2.4rem a single flick crossed two or three of them before any
     could play its beat. */
  --ti-pad:clamp(5rem,13vw,11rem);
  /* the console's own screen palette */
  --scr-wh:#F4F8FB;
  --scr-dim:#98A3AC;
  --scr-amb:#F2A02C;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ice);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--gold-hi);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{margin:0;line-height:1.05;}
p{margin:0;}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px;}

.dsp{
  font-family:'Archivo Black','Barlow Condensed',sans-serif;
  /* ONE weight only — 800 here would faux-bold an already-black face. */
  font-weight:400;letter-spacing:-.012em;text-transform:uppercase;text-wrap:balance;
}

/* ── Chrome ──────────────────────────────────────────────────────────────── */
.prog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  transform:scaleX(0);transform-origin:0 50%;
  box-shadow:0 0 12px rgba(226,185,109,.5);
}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:110;
  display:flex;align-items:center;gap:2rem;
  padding:.9rem clamp(1.1rem,4vw,2.6rem);
  transition:background .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(8,9,11,.82);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--wh);flex-shrink:0;}
.brand:hover{text-decoration:none;}
.brand img{height:34px;width:auto;}
.brand span{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.5rem;
  letter-spacing:.06em;text-transform:uppercase;line-height:1;
}
.brand i{font-style:normal;color:var(--gold);}
/* Beta tag. Barlow Condensed keeps it in the placard voice, and it rides high
   against the wordmark rather than sitting on the baseline. */
.brand .beta{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.12em;line-height:1;
  color:var(--gold-hi);background:rgba(226,185,109,.10);
  border:1px solid rgba(226,185,109,.40);border-radius:5px;
  padding:.2rem .38rem .14rem;
  align-self:center;margin-top:-.5rem;margin-left:.1rem;
}
.nav-links{display:flex;gap:1.9rem;margin-left:auto;}
.nav-links a{color:var(--mu);font-size:.92rem;font-weight:500;transition:color .2s;}
.nav-links a:hover{color:var(--ice);text-decoration:none;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:.92rem;font-weight:600;
  padding:.62rem 1.15rem;border-radius:9px;border:1px solid transparent;
  cursor:pointer;transition:transform .16s var(--ease),box-shadow .2s,background .2s,border-color .2s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-gold{background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:#14100a;box-shadow:0 6px 20px rgba(201,152,78,.26);}
.btn-gold:hover{box-shadow:0 10px 30px rgba(226,185,109,.4);}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--ice);border-color:rgba(255,255,255,.18);backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,.1);}
.btn-lg{font-size:1rem;padding:.85rem 1.6rem;}
.btn-sm{font-size:.84rem;padding:.5rem .95rem;}
.btn-block{width:100%;}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  overflow:hidden;                     /* crops the console at the right edge */
  isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 55%;
  /* Push the footage BACK into atmosphere. The blur is what buys depth
     separation — without it the video is a second sharp photograph competing
     with the console. scale(1.06) overscans so the blur cannot soften the frame
     edges into visible haze. */
  filter:saturate(.55) contrast(.95) brightness(.62) blur(3px);
  transform:scale(1.06);
}
body.no-video .hero-video{display:none;}

/* Composed fallback plate — a lit horizon, not an empty box. Also sits UNDER
   the video as its base colour so a video with transparent letterboxing or a
   slow first frame never flashes white. */
.hero-media::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 72% 6%,rgba(201,152,78,.20) 0%,transparent 58%),
    radial-gradient(90% 60% at 18% 96%,rgba(64,86,120,.22) 0%,transparent 62%),
    linear-gradient(178deg,#0d1016 0%,#08090b 52%,#06070a 100%);
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,7,10,.94) 0%,rgba(6,7,10,.78) 38%,rgba(6,7,10,.36) 68%,rgba(6,7,10,.6) 100%),
    linear-gradient(0deg,rgba(6,7,10,.92) 0%,transparent 34%,transparent 62%,rgba(6,7,10,.72) 100%);
}
/* Faint instrument grid — the subject's own vernacular, kept very quiet. */
.hero-grid{
  position:absolute;inset:0;opacity:.16;
  background-image:
    linear-gradient(rgba(226,185,109,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(226,185,109,.16) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(76% 66% at 26% 46%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(76% 66% at 26% 46%,#000 0%,transparent 72%);
}

.hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:6.5rem clamp(1.2rem,4vw,2.6rem) 4rem;
}
/* Copy sits LEFT in the hero because the console RESTS on the right. The first
   scroll then sends the console left and the tour text takes the right — they
   trade sides from there on. Keep this in step with cduScroll's resting side. */
.hero-copy{max-width:min(44rem,60%);}
.hero-copy .dsp{
  /* 4.6rem, not 5.6: the career headline's longest line ("Your aircraft.")
     is ~14 wide Archivo Black glyphs and needs ~792px at 5.6rem against a
     704px column -- it wrapped mid-phrase. A wide black face wants short
     lines; when the copy cannot shorten, the size gives. */
  font-size:clamp(2.1rem,7vw,4.6rem);
  margin-bottom:1.1rem;
  text-shadow:0 4px 40px rgba(0,0,0,.6);
}
.lede{font-size:clamp(1rem,1.4vw,1.18rem);color:#CFC5B6;max-width:44ch;}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem;}
.hero-nums{
  display:flex;flex-wrap:wrap;gap:1rem 2.2rem;margin-top:2.4rem;padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-size:.84rem;color:var(--mu);max-width:40rem;
}
.hero-nums b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.75rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;
}

/* The console as a SIDE PROP: enters from the right, deliberately cropped by
   the hero's overflow so it reads as part of a wider desk. */
/* FIXED full-viewport rail: the console has to survive past the hero so its
   screen and keys are still on screen while the tour is read. The wrapper only
   centres vertically; ALL horizontal travel and scale live on .cdu's transform,
   driven by cduScroll. body has overflow-x:hidden so an overhanging edge is
   cropped rather than adding scroll. */
.hero-cdu{
  position:fixed;z-index:1;inset:0;
  display:flex;align-items:center;
  pointer-events:none;
  transition:opacity .5s var(--ease);
}
.hero-cdu.gone{opacity:0;}
.cdu{
  position:relative;
  height:min(62svh,600px);            /* smaller from the outset — always whole */
  aspect-ratio:556/846;
  /* Travel is set by cduScroll. Origin is LEFT-centre so x IS the left edge.
     The transition is what turns each discrete target into a glide. */
  transform-origin:0 50%;
  transform:rotate(3.5deg);
  transition:transform 1.05s cubic-bezier(.65,.02,.28,1);
  will-change:transform;
  /* Two shadows: a broad one for the drop, a tighter one so the unit reads as
     resting in the scene rather than hovering over a flat backdrop. */
  filter:drop-shadow(0 40px 74px rgba(0,0,0,.72)) drop-shadow(0 10px 18px rgba(0,0,0,.45));
  /* Required: the screen's font-size is expressed in cqh against THIS box.
     Without it, cqh falls back to the viewport and the text overflows the glass. */
  container-type:size;
}
.cdu-shell{width:100%;height:100%;object-fit:contain;}
/* Measured off the artwork: screen glass at x79 y39 w394 h327 of 556x846. */
.cdu-shell{filter:brightness(.86) contrast(.93) saturate(.88);}
.cdu-screen{
  position:absolute;
  left:14.209%;top:4.610%;width:70.863%;height:38.652%;
  background:#03060a;border-radius:.6%;
  display:flex;flex-direction:column;
  padding:1.6% 2.6%;
  font-family:'Chivo Mono',monospace;font-variant-ligatures:none;
  overflow:hidden;
  transition:opacity .1s linear;
  /* CONTAINER-QUERY TRAP: cqh here resolves against the nearest ANCESTOR
     container (.cdu), never against .cdu-screen itself. The screen is a fixed
     38.652% of the unit's height and the page needs ~15 text lines at
     line-height 1.18, so the safe coefficient is
     0.38652 * 0.93 / (15 * 1.18) ≈ 0.0182 of the UNIT height. */
  font-size:clamp(5px,1.82cqh,11px);
}
.cdu-screen.swap{opacity:.15;}

/* Refresh sweep — a single pass of light down the glass as a page paints in. */
.scr-sweep{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 0%,rgba(244,248,251,.16) 46%,rgba(244,248,251,.03) 58%,transparent 100%);
}
.scr-sweep.go{animation:scrSweep .55s var(--ease) 1;}
@keyframes scrSweep{
  0%{opacity:0;transform:translateY(-100%);}
  22%{opacity:1;}
  100%{opacity:0;transform:translateY(100%);}
}

/* Line-select keys. Deliberately UNDERSTATED: a soft bloom on the key itself
   (no hard plate, no screen blend), and the actual mark is the pen circle
   below. Positioned inline from the measured _CDU_GEO rects. */
.cdu-keys{position:absolute;inset:0;pointer-events:none;}
.cdu-key{
  position:absolute;display:block;border-radius:3px;opacity:0;
  background:radial-gradient(60% 120% at 50% 50%,rgba(255,236,205,.30),transparent 76%);
}
.cdu-key.lit{animation:lskBloom 1.5s var(--ease) 1;}
@keyframes lskBloom{
  0%{opacity:0;}
  18%{opacity:1;}
  62%{opacity:.85;}
  100%{opacity:0;}
}

/* The pen circle — the app's own annotation idiom (the dispatch clipboard
   circles its toggles the same way). Draws itself on, holds, then lifts. */
.cdu-circle{
  position:absolute;overflow:visible;pointer-events:none;
  opacity:0;
}
.cdu-circle path{
  fill:none;stroke:#e2503c;stroke-width:2.4;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 4px rgba(226,80,60,.5));
  stroke-dasharray:340;stroke-dashoffset:340;
}
.cdu-circle.draw{animation:penHold 1.9s linear 1;}
.cdu-circle.draw path{animation:penDraw .62s cubic-bezier(.4,.05,.35,1) 1 forwards;}
@keyframes penHold{0%,88%{opacity:1;}100%{opacity:0;}}
@keyframes penDraw{to{stroke-dashoffset:0;}}

.scr-hd{
  display:flex;justify-content:space-between;align-items:baseline;
  color:var(--scr-wh);font-weight:700;letter-spacing:.06em;
  padding-bottom:.25em;
}
.scr-rows{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:0;}
.scr-row{
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-areas:"lv rv" "lp rp";
  column-gap:.6em;line-height:1.18;
}
.sv{font-size:.86em;color:var(--scr-dim);letter-spacing:.02em;}
.sv.l{grid-area:lv;} .sv.r{grid-area:rv;text-align:right;}
.sp{color:var(--scr-wh);font-weight:700;letter-spacing:.03em;}
.sp.l{grid-area:lp;} .sp.r{grid-area:rp;text-align:right;}
.scr-ft{color:var(--scr-amb);letter-spacing:.04em;}
.scr-ft .dash{
  display:block;height:1px;margin:.35em 0 .3em;
  background:repeating-linear-gradient(90deg,var(--scr-dim) 0 5px,transparent 5px 10px);
  opacity:.65;
}

/* ── TOUR — one item lit at a time ───────────────────────────────────────── */
.tour{position:relative;background:var(--bg);}
.tour-inner{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(3.5rem,8vw,7rem) clamp(1.2rem,4vw,2.6rem);
}
.tour-list{list-style:none;margin:0;padding:0;counter-reset:none;}
/* Text always sits OPPOSITE the console, so the two trade sides as you scroll:
   odd items sit right (console left), even items sit left (console right).
   Each is brought in from its own outer edge as it becomes the one being read. */
.ti{
  position:relative;
  width:min(48%,38rem);
  padding:var(--ti-pad) 0;
  /* Held well back ONCE UNCOVERED: the console is fixed, so already-read items
     on whichever side it currently occupies pass BEHIND it. At .3 that read as
     broken text; this low it reads as depth. The ACTIVE item is always on the
     opposite side, so it is never occluded. An item that has NOT been uncovered
     yet is clipped away entirely (below) — dimming alone still left every
     heading legible before the console had swept, which killed the reveal. */
  opacity:.16;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
/* Start CONCEALED, clipped toward the edge the console will sweep away from.
   Driven by custom properties rather than competing selectors: only the VALUE
   changes, so .seen below needs no specificity escalation. The hiding values
   are set by html.tour-armed, which the script adds — without JS (or under
   reduced motion) the properties are unset and every item paints normally. */
.ti:nth-child(odd){ margin-left:auto;  transform:translateX(26px);  clip-path:var(--ti-hide-r,none); }
.ti:nth-child(even){ margin-right:auto; transform:translateX(-26px); clip-path:var(--ti-hide-l,none); }
html.tour-armed{ --ti-hide-r:inset(0 0 0 100%); --ti-hide-l:inset(0 100% 0 0); }
/* Lit state: a gold edge marks the item being read — the same left-anchored
   marker the app uses on an active rail item. */
.ti.on,.ti:nth-child(odd).on,.ti:nth-child(even).on{opacity:1;transform:none;}

/* The console UNCOVERS the text. It vacates one side as it glides to the other,
   so the item is wiped in from the edge that is freed FIRST: text on the right
   is revealed right→left (the console's trailing edge sweeps left), text on the
   left is revealed left→right. The .28s delay lets the unit get moving before
   anything appears, so the swipe reads as the cause. */
/* .seen is added on first uncover and NEVER removed, so an item stays readable
   once the console has passed it (including scrolling back up). */
.ti.seen{ --ti-hide-r:inset(0); --ti-hide-l:inset(0); }
/* Belt and braces: an un-uncovered item has no visible ink either. .seen lands
   in the same frame as .on, so the colour returns exactly as the wipe starts —
   behind the clip edge, so the two never fight each other on screen. */
html.tour-armed .ti:not(.seen) h2,
html.tour-armed .ti:not(.seen) p,
html.tour-armed .ti:not(.seen) .ti-meta{ color:transparent; }
/* On the swept layout this is invisible (it happens behind the clip edge); on
   the narrow one it IS the reveal. */
html.tour-armed .ti p,
html.tour-armed .ti .ti-meta{ transition:color .55s var(--ease); }
@keyframes revealFromRight{ from{clip-path:inset(0 0 0 100%);} to{clip-path:inset(0 0 0 0);} }
@keyframes revealFromLeft { from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }
.ti:nth-child(odd).on { animation:revealFromRight .62s var(--ease) .28s both; }
.ti:nth-child(even).on{ animation:revealFromLeft  .62s var(--ease) .28s both; }
.ti h2{
  font-family:'Archivo Black','Barlow Condensed',sans-serif;font-weight:400;text-transform:uppercase;
  /* Wider face, so a step down from the condensed sizing still reads larger. */
  font-size:clamp(1.6rem,3.1vw,2.5rem);letter-spacing:-.012em;line-height:1.12;
  color:var(--ice);margin-bottom:1.05rem;
  transition:color .5s var(--ease);
}
.ti.on h2{color:var(--gold-hi);}
.ti p{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.62;color:#B9AE9F;max-width:52ch;}
.ti-meta{
  display:block;margin-top:1.35rem;
  font-family:'Chivo Mono',monospace;font-variant-ligatures:none;font-size:.84rem;letter-spacing:.05em;
  color:var(--mu);
}
.tour-rail{
  position:absolute;left:clamp(-.4rem,0vw,0rem);top:clamp(3.5rem,8vw,7rem);bottom:clamp(3.5rem,8vw,7rem);
  width:2px;background:var(--line);display:none;
}

/* ── Bands ───────────────────────────────────────────────────────────────── */
.band{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(3.4rem,7vw,5.6rem) clamp(1.2rem,4vw,2.6rem);
}
.band .dsp{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:2rem;}
/* The wordmark inside a heading. Archivo Black has no italic, so <i> MUST be
   reset to normal or the browser shears one -- same reason as .brand i. */
.dsp i{font-style:normal;color:var(--gold);}

.pricing{display:block;}
.price-pitch{
  max-width:min(var(--maxw),1320px);margin:0 auto clamp(2.2rem,4vw,3.4rem);
  text-align:center;
}
.price-wrap{
  max-width:min(var(--maxw),1320px);margin:0 auto;
  display:grid;grid-template-columns:minmax(340px,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,4vw,4rem);align-items:stretch;
}
.price-pitch .dsp{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:1rem;}
.price-pitch>p{color:#B9AE9F;font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.62;max-width:52ch;margin:0 auto;}
/* One list, two columns once there is room for them — the same principle as
   the lanes: spend extra width on more columns, not longer lines. */
.price-inc{
  list-style:none;margin:1.6rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem clamp(1.2rem,2.5vw,2.4rem);
  text-align:left;
}
@media (min-width:1100px){
  /* 8 items, so 4 columns is two even rows. An explicit count, not auto-fit,
     which would leave a ragged 5+3. */
  .price-inc{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.price-inc li{
  position:relative;padding-left:1.5rem;font-size:.95rem;line-height:1.5;color:#B9AE9F;
}
.price-inc li::before{
  content:"";position:absolute;left:.1rem;top:.42em;width:11px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
}
@media (max-width:1000px){
  /* The two BOXES need width and stack early; the LIST does not -- it is short
     items, so it holds two columns well below the point the boxes give up. */
  .price-wrap{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:700px){
  .price-inc{grid-template-columns:minmax(0,1fr);}
}
.price-card{
  width:100%;text-align:center;
  background:linear-gradient(170deg,rgba(201,152,78,.09),rgba(16,18,23,.9) 42%);
  border:1px solid rgba(201,152,78,.34);border-radius:16px;
  padding:2rem 1.8rem;box-shadow:0 26px 70px rgba(0,0,0,.55);
}
.plan-toggle{display:inline-flex;background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:1.4rem;}
.plan-toggle button{
  background:none;border:0;color:var(--mu);cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.86rem;font-weight:600;
  padding:.45rem 1.15rem;border-radius:999px;transition:background .2s,color .2s;
}
.plan-toggle button.active{background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:#14100a;}
.price-num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;color:var(--wh);}
.price-num small{font-family:'Inter',sans-serif;font-size:1rem;font-weight:500;color:var(--mu);}
.price-sub{font-size:.84rem;color:var(--mu);margin:.55rem 0 1.5rem;}
.price-list{list-style:none;margin:0 0 1.6rem;padding:0;text-align:left;display:flex;flex-direction:column;gap:.7rem;}
.price-list li{position:relative;padding-left:1.6rem;font-size:.92rem;color:#C4B9AA;}
.price-list li::before{
  content:"";position:absolute;left:.15rem;top:.36em;width:9px;height:5px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);
}
.pfine{font-size:.78rem;color:var(--mu);margin-top:.9rem;}

/* ── Download ─────────────────────────────────────────────────────────────
   Lives as the second column of .price-wrap: buy on the left, get the client on
   the right, in the order you do them. It stacks rather than running
   [text | button] across, because it no longer has the page width to do that. */
.dl-card{
  height:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:clamp(1.6rem,3vw,2.4rem);
  display:flex;flex-direction:column;gap:1.4rem;
}
.dl-title{
  font-family:'Archivo Black','Barlow Condensed',sans-serif;font-weight:400;
  text-transform:uppercase;font-size:clamp(1.5rem,2.2vw,1.9rem);
  letter-spacing:-.01em;line-height:1.12;color:var(--ice);margin-bottom:.7rem;
}
.dl-lede{color:var(--mu);font-size:clamp(.95rem,1.2vw,1.05rem);margin-bottom:1.3rem;}
.dl-main{flex:1;min-width:0;}
.dl-plat{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:1.5rem;letter-spacing:.02em;color:var(--ice);
}
.dl-meta{
  font-family:'Chivo Mono',monospace;font-variant-ligatures:none;font-size:.84rem;letter-spacing:.04em;
  color:var(--gold);margin-top:.25rem;
}
.dl-req{margin-top:.9rem;font-size:.92rem;color:#B0A597;}
.dl-act{display:flex;flex-direction:column;align-items:stretch;gap:.6rem;flex-shrink:0;}
.dl-note{font-size:.82rem;color:var(--mu);text-align:center;}
/* Unavailable state: still visible, plainly not pressable. */
.btn-off{
  background:rgba(255,255,255,.06);color:var(--mu);border-color:var(--line);
  box-shadow:none;cursor:not-allowed;pointer-events:none;
}
.faq-list{
  max-width:min(var(--maxw),1120px);margin:0 auto;
  /* Two columns of five. A grid would force pairs to share a row height and
     jump as items open; columns let each side flow independently. */
  column-count:2;column-gap:1.4rem;
}
/* Ten items. Two columns of five is right at 1120; past that the container is
   allowed to grow and the count with it, so the answers stay a comfortable
   measure instead of running long. */
@media (min-width:1560px){
  .faq-list{max-width:var(--maxw);column-count:3;column-gap:1.8rem;}
}
@media (min-width:2000px){
  .faq-list{column-count:4;}
}
.faq-list details{break-inside:avoid;margin-bottom:.55rem;}
.faq-list details{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:.95rem 1.25rem;transition:border-color .2s;}
.faq-list details[open]{border-color:rgba(201,152,78,.36);}
.faq-list summary{cursor:pointer;font-weight:600;font-size:.98rem;color:var(--ice);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1;flex-shrink:0;transition:transform .25s var(--ease);}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list p{margin-top:.8rem;font-size:.92rem;color:#B0A597;}


/* ── Legal + cookie ──────────────────────────────────────────────────────── */
/* ── Lanes: the breadth grid ─────────────────────────────────────────────
   Deliberately quiet. This section's job is coverage, not drama — the tour is
   where the page raises its voice, and two loud sections back to back flatten
   each other. Hairline top rules rather than cards, so it reads as a manifest. */
.lanes-head{text-align:center;max-width:44rem;margin:0 auto clamp(2.4rem,5vw,3.6rem);}
.lanes-head .dsp{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:.8rem;}
.lanes-lede{color:var(--mu);font-size:clamp(.95rem,1.2vw,1.05rem);}
.lane-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,3vw,2.6rem) clamp(2rem,4vw,3.4rem);
}
/* THE COLUMN COUNT FOLLOWS THE WIDTH, BUT THE MEASURE SETS THE FLOOR.
   Six columns was tried first and gave 241px cells at a 2200px viewport, about
   32 characters a line for a 40-word paragraph. The 330px minimum is what a
   readable measure costs; auto-fit then takes as many of those as fit, which is
   4 at 1637 and 3 at 1240. Spending width on more columns is right, spending it
   on columns too thin to read is not. */
@media (min-width:1001px){
  .lane-grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));}
}
.lane{border-top:1px solid var(--line);padding-top:1.1rem;}
.lane h3{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:1.15rem;letter-spacing:.02em;color:var(--gold-hi);margin-bottom:.55rem;
}
.lane p{color:#B9AE9F;font-size:.95rem;line-height:1.6;}

.legalbar{
  border-top:1px solid var(--line);background:#050608;
  padding:1.8rem clamp(1.2rem,4vw,2.6rem);
  display:flex;flex-wrap:wrap;gap:.9rem 2rem;align-items:center;justify-content:space-between;
  font-size:.82rem;color:var(--mu);
}
.legal-n{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;}
.legal-n a{color:var(--mu);transition:color .2s;}
.legal-n a:hover{color:var(--gold-hi);text-decoration:none;}
/* Required attribution — full-width row so it is never crowded out by the nav. */
.legal-credit{flex-basis:100%;color:var(--mu);}
.legal-credit a{color:var(--gold);}
.legal-credit a:hover{color:var(--gold-hi);}

.cookie{
  position:fixed;z-index:130;left:1rem;right:1rem;bottom:1rem;
  max-width:640px;margin:0 auto;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  background:rgba(14,16,20,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(201,152,78,.3);border-radius:13px;
  padding:1rem 1.2rem;box-shadow:0 22px 60px rgba(0,0,0,.6);
  transform:translateY(140%);opacity:0;
  transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.cookie.on{transform:translateY(0);opacity:1;}
.cookie p{font-size:.84rem;color:#B7ADA0;flex:1 1 280px;line-height:1.55;}
.cookie-btns{display:flex;gap:.55rem;margin-left:auto;}

.rv{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease);}
.rv.in{opacity:1;transform:none;}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Short desktop windows: keep the hero copy inside 100svh. */
@media (min-width:1001px) and (max-height:780px){
  .hero-inner{padding-top:5.2rem;padding-bottom:2.4rem;}
  .hero-copy .dsp{font-size:clamp(2.4rem,5vw,3.6rem);}
  .hero-nums{margin-top:1.5rem;padding-top:1rem;}
  .hero-nums b{font-size:1.4rem;}
}

@media (max-width:1200px){
  .hero-copy{max-width:min(44rem,52%);}
}
@media (max-width:1000px){
  .lane-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .faq-list{column-count:1;max-width:760px;}
  .dl-card{flex-direction:column;align-items:stretch;text-align:center;}
  .dl-act .btn{width:100%;}
  /* The console stops being a side prop and becomes a small artefact under
     the copy — it must never crowd the headline on a narrow screen.
     .hero is a ROW flex container, so taking .hero-cdu out of absolute
     positioning would otherwise make it a sibling BESIDE the copy. Block
     layout is what actually stacks them. */
  .hero{min-height:auto;display:block;}
  .hero-inner{padding-top:6.5rem;padding-bottom:0;}
  /* Back into normal flow, between the hero copy and the tour. */
  .hero-cdu{
    position:static;right:auto;top:auto;margin:2.6rem auto 0;
    transform:none!important;opacity:1!important;display:flex;justify-content:center;
    padding:0 clamp(1.2rem,4vw,2.6rem) 3rem;
  }
  .cdu{height:auto;width:min(330px,72vw);transform:rotate(-4deg);}
  /* The bring-in slide is a desktop flourish: at this width the 22px offset
     pushes dimmed items past the left edge. Keep the opacity highlight only. */
  /* nth-child is (0,2,0) — a bare .ti reset (0,1,0) LOSES to it, so the
     mobile override must match the specificity or the desktop offset survives
     and pushes items off the left edge. */
  /* nth-child is (0,2,0) — a bare .ti reset (0,1,0) LOSES to it, so the
     mobile override must match the specificity or the desktop offset survives
     and pushes items off the left edge. The clip-path REVEAL must be killed
     here too: it is tied to the console sweeping sideways, which does not
     happen at this width, and it otherwise leaves the text clipped away. */
  .ti,.ti.on,.ti:nth-child(odd),.ti:nth-child(even),.ti:nth-child(odd).on,.ti:nth-child(even).on{
    transform:none;width:auto;margin-left:0;margin-right:0;
    animation:none;clip-path:none;}
  .hero-copy{max-width:none;}
  .tour-rail{display:none;}
  :root{--ti-pad:clamp(1.6rem,6vw,2.6rem);}
}
@media (max-width:720px){
  body{font-size:16px;}
  .nav-links{display:none;}
  .nav{gap:1rem;}
  /* PRE-EXISTING: the brand lockup and the CTA together needed 412px of a
     375px phone, so the button was cut off by the viewport edge. The mark IS
     the logo, so below 480 the wordmark goes and the mark plus the Beta badge
     carry the identity. Measured 224px of brand back to ~100. */
  .nav{padding-left:1rem;padding-right:1rem;}
}
@media (max-width:480px){
  .brand span{display:none;}
  .nav-cta{font-size:.82rem;padding-left:.9rem;padding-right:.9rem;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
  .hero-nums{gap:1.4rem;}
  .hero-nums b{font-size:1.45rem;}
  .cdu{width:min(300px,82vw);}
  .cookie{flex-direction:column;align-items:stretch;}
  /* PRE-EXISTING: .cookie p carries flex:1 1 280px, a basis written for the
     ROW layout. Once the container turns into a column that 280px is a HEIGHT,
     and the paragraph needs about 130 -- so the banner stood 367px tall with
     ~150px of empty box under the text. Basis auto, and it sizes to its words. */
  .cookie p{flex:0 0 auto;}
  .cookie-btns{margin-left:0;}
  .cookie-btns .btn{flex:1;}
  .lane-grid{grid-template-columns:1fr;}
  .legalbar{flex-direction:column;align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .rv{opacity:1;transform:none;}
  .cookie{transform:none;opacity:1;}
  .ti{opacity:1;}
  /* never leave an item clipped when animations are off */
  .ti,.ti.on,.ti:nth-child(odd),.ti:nth-child(even),.ti:nth-child(odd).on,.ti:nth-child(even).on{
    animation:none;clip-path:none;}
}


/* ── Inline checkout ──────────────────────────────────────────────────────
   Mounts inside .price-card. [hidden] is stated explicitly because the card
   sets display on its children and would otherwise override the attribute. */
.co-mount[hidden],#price-body[hidden]{display:none;}
.co-mount{margin-top:1.4rem;}
.checkout-container{min-height:450px;}
.co-back{
  display:block;margin:.9rem auto 0;background:none;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.86rem;color:var(--mu);
  text-decoration:underline;text-underline-offset:3px;
}
.co-back:hover{color:var(--gold);}