/* =============================================================================
   X3WEB — DESIGN SYSTEM
   -----------------------------------------------------------------------------
   A proportional glass-and-video system. The hero of every page is a
   full-viewport "stage": that page's video runs edge to edge, and frosted glass
   panels float on top of it — a proof rail down the left, a row of navigation
   pills across the top, and a large rounded hero panel carrying the message.

   Everything inside the stage is expressed as a multiple of --k, one custom
   property that equals exactly 1px at 1280x853 and scales the whole
   composition proportionally at any other size. Nothing inside the stage is
   sized in px, so the composition never reflows — it scales.

   Below the stage the page scrolls normally and switches to a rem/px scale,
   but keeps the same vocabulary: 999px pills, rounded glass panels, the same
   two easings, the same single orange.
   ============================================================================= */

/* ---------- display face -------------------------------------------------- */
/* The display face is Archivo, variable, with its width axis pushed to 125. It
   stands in for 'Parsi' — the theme's own wide geometric grotesque — and is
   close in colour and proportion.
   TO SWITCH TO REAL PARSI: drop parsi-300/400/700.woff2 into /assets/fonts,
   uncomment the three @font-face rules below, and put 'Parsi' first in
   --font-display. Nothing else changes. The rules are commented out rather than
   left in place because a @font-face pointing at a missing file makes the
   browser fetch and fail to decode it on every page, for every weight.

@font-face{font-family:'Parsi';font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/parsi-300.woff2) format('woff2')}
@font-face{font-family:'Parsi';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/parsi-400.woff2) format('woff2')}
@font-face{font-family:'Parsi';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/parsi-700.woff2) format('woff2')}
*/

/* ---------- tokens -------------------------------------------------------- */
:root{
  /* the stage scale unit — exactly 1px at the 1280x853 reference */
  --k: max(0.5px, min(100vw / 1280, 100vh / 853));
  --k: max(0.5px, min(100vw / 1280, 100dvh / 853));

  /* X3WEB orange, the one accent in the system */
  --accent:#FF6B00;
  --accent-hot:#FF7A1A;
  --accent-deep:#E05E00;

  --navy:#041D36;
  --navy-deep:#02101F;
  --ink:#0B1220;
  --ink-soft:#5B667A;
  --ink-line:rgba(11,18,32,.10);
  --paper:#FFFFFF;
  --paper-alt:#F5F6F8;

  --glass-dark:rgba(4,12,24,.77);
  --glass-pill:rgba(8,18,32,.93);
  --glass-light:rgba(241,243,246,.60);
  --hairline:rgba(255,255,255,.62);

  --r-card:calc(33 * var(--k));
  --r-hero:calc(34 * var(--k));

  --font-ui:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-display:'Archivo','Inter',sans-serif;

  /* the page (below-stage) scale */
  --page-max:1320px;
  --page-gutter:clamp(20px,4vw,48px);
  --r-panel:28px;
  --r-tile:22px;

  --shadow-tile:0 2px 18px rgba(12,14,18,.07), 0 18px 44px rgba(11,18,32,.09);
  --shadow-lift:0 4px 22px rgba(12,14,18,.10), 0 28px 64px rgba(11,18,32,.16);
  --shadow-glass:0 calc(2 * var(--k)) calc(18 * var(--k)) rgba(12,14,18,.22);

  /* the system's only two easings */
  --expo:cubic-bezier(.16, 1, .3, 1);
  --soft:cubic-bezier(.33, 1, .68, 1);

  /* Names carried over from the previous build, re-pointed at the new palette.
     Two places still depend on them: the nine legal pages, whose clauses carry
     hundreds of per-element inline styles, and the package-detail layout in
     x3-package.css. Re-pointing the names restyles both without editing a word
     of the legal text or re-deriving a tested layout. */
  --grey:var(--ink-soft);
  --muted:var(--ink-soft);
  --text:var(--ink);
  --white:var(--paper);
  --off-white:var(--paper-alt);
  --brand:var(--navy);
  --brand-soft:rgba(4,29,54,.08);
  --border-light:var(--ink-line);
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:var(--r-tile);
  --radius-pill:999px;
  --shadow-xs:var(--shadow-tile);
  --shadow-md:var(--shadow-lift);
  --font-btn:var(--font-ui);
}

/* Archivo carries a width axis. Pushing it wide is what makes it read as a
   display face rather than as body copy set large — without it the stand-in
   loses the proportion that gives the theme its character. */
.x3-display{
  font-family:var(--font-display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
}

/* =============================================================================
   1. RESET + PAGE SHELL
   ============================================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.x3{
  font-family:var(--font-ui);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--navy-deep);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* The element reset is wrapped in :where() so it contributes no specificity of
   its own. Without it `.x3 button` (0,1,1) out-ranks every single-class
   component (0,1,0) — so `.btn` would set a background and a colour and the
   reset would quietly take both back. */
.x3 :where(img){max-width:100%;display:block}
.x3 :where(a){color:inherit;text-decoration:none}
.x3 :where(button){border:0;font:inherit;color:inherit;cursor:pointer;background:none}
.x3 :where(ul,ol){list-style:none}
.x3 :where(svg){display:block}
.x3 :where(h1,h2,h3,h4,h5){font-weight:400;line-height:1.14}

.x3 a:focus-visible,
.x3 button:focus-visible,
.x3 input:focus-visible,
.x3 select:focus-visible,
.x3 textarea:focus-visible,
.x3 summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

.x3-wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter)}
.x3-wrap--wide{max-width:1560px}
.x3-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.x3-skip{
  position:absolute;left:12px;top:-64px;z-index:9999;
  background:var(--accent);color:#fff;padding:12px 20px;border-radius:999px;
  font-size:14px;font-weight:600;transition:top .2s var(--soft);
}
.x3-skip:focus{top:12px}

/* =============================================================================
   2. THE STAGE — the full-viewport hero on every page
   ============================================================================= */
.x3-stage{
  position:relative;
  height:100vh;
  height:100dvh;
  min-height:560px;
  overflow:hidden;
  isolation:isolate;
  background:var(--navy-deep);
}

/* ---------- layer 1: the video, edge to edge ------------------------------ */
.scene{position:absolute;inset:0;overflow:hidden;z-index:0}
.scene__img{
  position:absolute;
  left:0;
  top:-0.2345%;
  width:100.3125%;
  height:100.5807%;
  object-fit:cover;
  object-position:50% 50%;
}
/* The video is footage, not a backdrop, so it needs grading before glass and
   type sit on it: a floor gradient so the bottom-left headline always has
   something dark behind it, a top gradient so the pale nav pills never land on
   a blown highlight, a left wash for the rail, and a navy tint to pull ten
   different clips into one colour. */
.scene__scrim{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg, rgba(2,10,20,.60) 0%, rgba(2,10,20,.15) 26%, rgba(2,10,20,0) 48%),
    linear-gradient(0deg,   rgba(2,10,20,.70) 0%, rgba(2,10,20,.22) 30%, rgba(2,10,20,0) 60%),
    linear-gradient(90deg,  rgba(2,10,20,.44) 0%, rgba(2,10,20,0) 44%),
    linear-gradient(180deg, rgba(4,29,54,.28) 0%, rgba(4,29,54,.28) 100%);
}

/* ---------- layer 2: the stage grid --------------------------------------- */
/* minmax(0, Nfr) rather than a bare fr on every track: an fr track's automatic
   minimum is its min-content, and the nav pills are white-space:nowrap, so the
   main column would otherwise claim more than its share and squeeze the rail
   out of its designed 265.5 units. Zeroing the minimum keeps the proportions
   exactly as measured and lets the pills shrink instead. */
.stage{
  position:absolute;inset:0;z-index:2;
  display:grid;
  /* 5.5 | 265.5 | 5 | 1002 | 2 = 1280 */
  grid-template-columns:minmax(0,55fr) minmax(0,2655fr) minmax(0,50fr) minmax(0,10020fr) minmax(0,20fr);
  /* 5.3 | 829.2 | 18.5 = 853 */
  grid-template-rows:minmax(0,53fr) minmax(0,8292fr) minmax(0,185fr);
}
.rail{
  grid-column:2;grid-row:2;
  display:grid;
  /* 265.2 | 3 | 264.5 | 4.5 | 292 = 829.2 */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,2652fr) minmax(0,30fr) minmax(0,2645fr) minmax(0,45fr) minmax(0,2920fr);
  min-width:0;min-height:0;
}
.main{
  grid-column:4;grid-row:2;
  display:grid;
  /* 5.2 | 70.5 | 9 | 743 | 1.5 = 829.2 */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,52fr) minmax(0,705fr) minmax(0,90fr) minmax(0,7430fr) minmax(0,15fr);
  min-width:0;min-height:0;
}

/* =============================================================================
   3. THE RAIL — three proof cards
   ============================================================================= */
.card{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:0}
.card--dark,.card--electric{
  background:var(--glass-dark);
  -webkit-backdrop-filter:blur(38px);backdrop-filter:blur(38px);
  box-shadow:var(--shadow-glass);
}
.card--dark{grid-row:1}
.card--electric{grid-row:5}
.card--gauge{
  grid-row:3;
  background:var(--glass-light);
  -webkit-backdrop-filter:blur(7px) saturate(1.02);backdrop-filter:blur(7px) saturate(1.02);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 calc(2 * var(--k)) calc(18 * var(--k)) rgba(12,14,18,.10);
}

/* ---- card 1 ---- */
.brand{position:absolute;left:17.137%;top:10.068%;display:flex;align-items:center}
.brand svg{width:calc(42 * var(--k));height:calc(30 * var(--k))}
.brand .word{
  margin-left:calc(13 * var(--k));
  font-family:var(--font-display);font-stretch:125%;font-variation-settings:'wdth' 125;
  font-weight:300;
  font-size:calc(29 * var(--k));
  letter-spacing:.03em;
  line-height:calc(19.1 * var(--k));
  color:#F3F4F5;
  position:relative;top:calc(1 * var(--k));
  transform-origin:left center;
}
.dots{position:absolute;left:8.851%;top:46.267%;display:flex;gap:calc(4 * var(--k))}
.dot{width:calc(24 * var(--k));height:calc(24 * var(--k));border-radius:50%;display:grid;place-items:center}
.dot--on{background:var(--accent)}
.dot--off{border:calc(1.3 * var(--k)) solid rgba(255,255,255,.62)}
.dot::after{content:"";width:calc(5 * var(--k));height:calc(5 * var(--k));border-radius:50%;background:rgba(255,255,255,.92)}

.stat__num{
  position:absolute;left:8.851%;top:71.041%;
  font-family:var(--font-display);font-stretch:125%;font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:calc(48 * var(--k));
  line-height:calc(37.2 * var(--k));
  letter-spacing:.005em;
  color:#F1F2F4;
  transform-origin:left top;
}
.stat__rule{position:absolute;left:51.035%;top:71.908%;width:1px;height:calc(33 * var(--k));background:rgba(255,255,255,.34)}
.stat__label{
  position:absolute;left:63.842%;top:68.552%;
  font-size:calc(13.5 * var(--k));font-weight:400;
  line-height:calc(16 * var(--k));letter-spacing:.005em;
  color:#E7E8EA;white-space:pre-line;
}

/* ---- card 2, the dotted gauge ---- */
.gauge__title{
  position:absolute;left:0;right:0;top:6.286%;text-align:center;
  font-size:calc(15.2 * var(--k));font-weight:500;letter-spacing:.012em;color:#26272B;
}
.gauge__ring{
  position:absolute;left:49.72%;top:52.00%;transform:translate(-50%,-50%);
  width:calc(200 * var(--k));height:calc(200 * var(--k));
}
.gauge__ring svg{width:100%;height:100%}
.gauge__value{
  position:absolute;left:0;right:0;top:53.88%;text-align:center;
  font-family:var(--font-display);font-stretch:125%;font-variation-settings:'wdth' 125;
  font-weight:300;font-size:calc(40.8 * var(--k));letter-spacing:.02em;
  color:#232427;transform:translateY(-50%);
}
.gauge__value .unit{font-size:.44em;letter-spacing:.04em;color:var(--accent)}
.gauge__foot{
  position:absolute;left:0;right:0;bottom:7%;text-align:center;
  font-size:calc(11.4 * var(--k));font-weight:400;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(35,36,39,.62);
}

/* ---- card 3 ---- */
.ej__title{
  position:absolute;left:17.891%;top:9.760%;
  font-size:calc(18.5 * var(--k));font-weight:400;
  line-height:calc(19.5 * var(--k));letter-spacing:.02em;
  transform:scaleX(1.06);transform-origin:left top;color:#EDEEF0;
}
.leaf{
  position:absolute;left:16.761%;top:31.336%;
  width:calc(53.5 * var(--k));height:calc(53.5 * var(--k));
  border-radius:50%;background:var(--accent);display:grid;place-items:center;
  box-shadow:0 calc(3 * var(--k)) calc(14 * var(--k)) rgba(255,107,0,.42);
}
.leaf svg{width:calc(25 * var(--k));height:calc(25 * var(--k))}
.ej__num{
  position:absolute;left:16.761%;top:58.048%;
  font-family:var(--font-display);font-stretch:125%;font-variation-settings:'wdth' 125;
  font-weight:700;font-size:calc(46 * var(--k));
  line-height:calc(33.6 * var(--k));letter-spacing:.004em;color:#F1F2F4;
  transform-origin:left top;
}
.bar{
  position:absolute;left:17.326%;top:79.966%;width:65.725%;
  height:calc(34 * var(--k));border-radius:calc(3 * var(--k));
  overflow:hidden;display:flex;
}
.bar__fill{
  background:linear-gradient(180deg,
    rgba(255,107,0,.02) 0%, rgba(255,107,0,.20) 26%, rgba(255,107,0,.62) 55%,
    rgba(255,107,0,.93) 82%, #FF7A1A 100%);
}
.bar__rest{
  flex:1;
  background:linear-gradient(180deg,
    rgba(190,190,186,.03) 0%, rgba(190,190,186,.18) 26%, rgba(190,190,186,.46) 55%,
    rgba(196,196,192,.68) 82%, rgba(206,206,202,.80) 100%);
}

/* =============================================================================
   4. THE NAV ROW
   ============================================================================= */
.nav{
  grid-row:2;
  display:flex;align-items:stretch;
  padding-left:calc(5 * var(--k));
  gap:calc(3.5 * var(--k));
  min-width:0;min-height:0;
}
.nav__links{display:contents}
.nav > .nav__burger{display:none}

/* The pills are elastic: each carries its designed width in reference px as
   --w and grows in proportion to it, so the row always reaches the hero's
   right edge instead of leaving a ragged gap on wide screens. */
.pill{
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;
  font-size:calc(13.4 * var(--k));
  font-weight:400;letter-spacing:.012em;
  flex-grow:var(--w,132);
  flex-shrink:0;
  flex-basis:calc(var(--w,132) * var(--k));
  max-width:calc(var(--w,132) * 1.35 * var(--k));
  transition:background .2s var(--soft), border-color .2s var(--soft), color .2s var(--soft);
}
.pill--solid{
  background:var(--glass-pill);color:#F2F3F5;
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
}
.pill--ghost{
  background:transparent;
  border:1px solid var(--hairline);
  color:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);
}
.pill--ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.85);color:#fff}
.pill--solid:hover{background:rgba(8,18,32,.99)}
.pill[aria-current="page"]{
  border-color:rgba(255,107,0,.9);
  color:#fff;
  box-shadow:inset 0 0 0 calc(1 * var(--k)) rgba(255,107,0,.55);
}
.pill--cta{
  --w:200;
  margin-left:calc(-2.8 * var(--k));
  justify-content:flex-start;
  padding-left:calc(30 * var(--k));
  font-size:calc(13.2 * var(--k));letter-spacing:.012em;
  position:relative;
  background:var(--accent);color:#fff;
  box-shadow:0 calc(3 * var(--k)) calc(16 * var(--k)) rgba(255,107,0,.36);
}
.pill--cta:hover{background:var(--accent-deep)}
.nav__gap{flex:1 0 calc(11 * var(--k));align-self:stretch}

.grid4{
  position:absolute;right:calc(20 * var(--k));top:50%;transform:translateY(-50%);
  width:calc(16 * var(--k));height:calc(16 * var(--k));
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:calc(4 * var(--k));
}
.grid4 i{background:#fff;border-radius:50%;display:block}

.iconbtn{
  flex:0 0 auto;
  width:calc(63.5 * var(--k));height:calc(63.5 * var(--k));
  aspect-ratio:1;border-radius:50%;
  background:var(--glass-pill);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  display:grid;place-items:center;align-self:center;
  transition:background .2s var(--soft), transform .2s var(--soft);
}
.x3-stage .iconbtn{color:var(--accent)}
.x3-stage .iconbtn:hover,.x3-stage .iconbtn:focus-visible{background:var(--accent);color:#fff;transform:translateY(calc(-2 * var(--k)))}
.iconbtn + .iconbtn{margin-left:calc(0.5 * var(--k))}
.iconbtn svg{width:calc(26 * var(--k));height:calc(26 * var(--k))}

/* the services pill opens a panel rather than navigating */
.nav__menu{position:relative}
.nav__panel{
  position:absolute;z-index:8;top:calc(100% + 8 * var(--k));left:0;
  width:calc(296 * var(--k));padding:calc(10 * var(--k));
  border-radius:var(--r-card);
  background:var(--glass-dark);
  -webkit-backdrop-filter:blur(38px);backdrop-filter:blur(38px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 calc(6 * var(--k)) calc(30 * var(--k)) rgba(2,8,18,.46);
  opacity:0;visibility:hidden;transform:translateY(calc(-6 * var(--k)));
  transition:opacity .22s var(--soft), transform .22s var(--soft), visibility .22s;
}
.nav__menu.is-open .nav__panel{opacity:1;visibility:visible;transform:none}
.nav__panel a{
  display:flex;align-items:center;gap:calc(11 * var(--k));
  padding:calc(11 * var(--k)) calc(14 * var(--k));
  border-radius:calc(16 * var(--k));
  font-size:calc(13.6 * var(--k));color:#E8EAEE;
  transition:background .16s var(--soft), color .16s var(--soft);
}
.nav__panel a:hover{background:rgba(255,255,255,.10);color:#fff}
.nav__panel svg{width:calc(17 * var(--k));height:calc(17 * var(--k));flex:0 0 auto;color:var(--accent)}

/* =============================================================================
   5. THE HERO PANEL
   ============================================================================= */
.hero{grid-row:4;position:relative;min-height:0}
.x3-stage--framed .scene__img{filter:blur(22px);transform:scale(1.08)}
.x3-stage--framed .hero{isolation:isolate;border-radius:var(--r-hero);overflow:hidden}
.hero__footage{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit}
.hero__footage video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* The panel edge is an overlay ring, so it costs no layout and the
   absolutely-positioned hero content keeps its measured coordinates. The hero
   itself carries no background and no backdrop-filter — the frosted look comes
   from the pills, cards, button, chip and controls only. */
.hero::after{
  content:"";position:absolute;inset:0;
  border-style:solid;border-color:rgba(255,255,255,.52);
  border-width:max(1px, calc(2 * var(--k)));
  border-radius:var(--r-hero);pointer-events:none;
}

/* ---- markers, pinned onto the video itself ---- */
.marker{position:absolute;z-index:3;display:block;filter:drop-shadow(0 calc(2 * var(--k)) calc(5 * var(--k)) rgba(0,0,0,.34))}
.marker svg{width:100%;height:100%}
.marker--1{left:28.4%;top:38.2%}
.marker--2{left:69.6%;top:31.4%}
.marker--3{left:86.2%;top:44.8%}
.marker{width:calc(27 * var(--k));height:calc(36.7 * var(--k))}

/* ---- headline + CTA, anchored bottom-left ---- */
.pitch{position:absolute;left:7.884%;bottom:3.432%;max-width:54%}
/* --h1 is the headline size in stage units. Pages with longer headlines set a
   smaller one through the stage config rather than restating the whole rule,
   so line-height and the mask slack stay locked to it. */
.pitch h1{
  font-family:var(--font-display);font-stretch:125%;font-variation-settings:'wdth' 125;
  font-weight:400;
  font-size:calc(var(--h1, 43) * var(--k));
  line-height:calc(var(--h1, 43) * .93 * var(--k));
  letter-spacing:-.004em;
  color:#fff;
  text-shadow:0 calc(2 * var(--k)) calc(24 * var(--k)) rgba(2,8,18,.42);
  margin-bottom:calc(19 * var(--k));
}
.pitch h1 em{font-style:normal;color:var(--accent)}
.ln,.ln__i{display:block}

.pitch__eyebrow{
  display:inline-flex;align-items:center;gap:calc(8 * var(--k));
  height:calc(30 * var(--k));padding:0;
  margin-bottom:calc(16 * var(--k));
  font-size:calc(11.6 * var(--k));font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);
}
.pitch__eyebrow svg{width:calc(13 * var(--k));height:calc(13 * var(--k));color:var(--accent)}

.btn{
  height:calc(53 * var(--k));min-width:calc(258 * var(--k));
  border-radius:999px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(186,188,192,.20);
  -webkit-backdrop-filter:blur(34px);backdrop-filter:blur(34px);
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:0 calc(26 * var(--k)) 0 calc(3.5 * var(--k));
  color:#fff;font-family:inherit;
  transition:background .2s var(--soft), border-color .2s var(--soft);
}
.btn:hover{background:rgba(255,107,0,.30);border-color:rgba(255,255,255,.92)}
.btn__disc{
  width:calc(43 * var(--k));height:calc(43 * var(--k));
  border-radius:50%;background:var(--accent);
  display:grid;place-items:center;flex:0 0 auto;
}
.btn__disc svg{width:calc(16 * var(--k));height:calc(16 * var(--k))}
.btn__label{
  margin-left:calc(18 * var(--k));
  font-size:calc(14 * var(--k));font-weight:500;letter-spacing:.006em;
}

.pitch__pair{display:flex;align-items:center;gap:calc(12 * var(--k));flex-wrap:wrap}
.btn--quiet{
  background:rgba(8,18,32,.44);border-color:rgba(255,255,255,.34);
  min-width:0;padding:0 calc(24 * var(--k));
}
.btn--quiet .btn__label{margin-left:0}
.btn--quiet:hover{background:rgba(8,18,32,.72)}

/* Legacy content buttons also use .btn, but have no stage arrow disc. */
.btn:not(:has(> .btn__disc)){
  padding-inline:calc(26 * var(--k));gap:8px;
}
.btn:not(:has(> .btn__disc)) .btn__label{margin-left:0}

/* Keep stage button labels centered independently of their left-hand disc. */
.btn:has(> .btn__disc){
  --btn-disc-size:calc(43 * var(--k));
  display:inline-grid;
  grid-template-columns:var(--btn-disc-size) minmax(0,1fr) var(--btn-disc-size);
  gap:0 calc(18 * var(--k));padding:calc(4 * var(--k));
  height:auto;min-height:calc(53 * var(--k));max-width:100%;
}
.btn:has(> .btn__disc) > .btn__label{margin:0}

/* ---- proof chip + paragraph, bottom right ---- */
.aside{position:absolute;left:62.076%;bottom:3.095%;width:32.136%}
.riders{
  position:relative;
  width:calc(150 * var(--k));height:calc(33 * var(--k));
  border-radius:999px;
  background:rgba(70,68,66,.24);
  border:1px solid rgba(255,255,255,.26);
  background-clip:padding-box;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  margin-bottom:calc(17.5 * var(--k));
}
.riders__pill{
  position:absolute;left:calc(46.5 * var(--k));top:calc(2 * var(--k));
  width:calc(101 * var(--k));height:calc(28 * var(--k));
  border-radius:999px;
  background:rgba(45,43,41,.245);
  box-shadow:inset 0 0 calc(3 * var(--k)) rgba(255,255,255,.30);
  display:flex;align-items:center;white-space:nowrap;
  padding-left:calc(11 * var(--k));
  font-size:calc(11.4 * var(--k));font-weight:500;letter-spacing:.012em;color:#F4F5F6;
}
.avatars{position:absolute;left:calc(-1 * var(--k));top:50%;transform:translateY(-50%);display:flex;z-index:2}
.av{
  width:calc(32 * var(--k));height:calc(32 * var(--k));
  border-radius:50%;
  border:calc(2 * var(--k)) solid rgba(255,255,255,.95);
  background:#c9ccd1 50% 28%/cover no-repeat;
  flex:0 0 auto;
}
.av + .av{margin-left:calc(-16 * var(--k))}
.aside p{
  font-size:calc(13.4 * var(--k));line-height:calc(17 * var(--k));
  font-weight:400;letter-spacing:.004em;color:rgba(255,255,255,.90);
  text-shadow:0 calc(1 * var(--k)) calc(14 * var(--k)) rgba(2,8,18,.52);
}

/* ---- the vertical control capsule ---- */
.fab{
  position:absolute;left:91.03%;top:3.59%;
  width:calc(71.5 * var(--k));height:calc(153 * var(--k));
  border-radius:999px;
  background:rgba(12,20,32,.66);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.fab__plus,.fab__layers{
  position:absolute;left:50%;transform:translateX(-50%);
  border-radius:50%;display:grid;place-items:center;
  transition:background .2s var(--soft), transform .2s var(--soft);
}
.fab__plus{top:calc(17 * var(--k));width:calc(38 * var(--k));height:calc(38 * var(--k));background:#FBFBFA}
.fab__plus:hover{background:var(--accent)}
.fab__plus svg{width:calc(16 * var(--k));height:calc(16 * var(--k));color:#141517}
.fab__plus:hover svg{color:#fff}
.fab__layers{top:calc(92 * var(--k));width:calc(49 * var(--k));height:calc(49 * var(--k))}
.x3-stage .fab__layers{background:#25D366;color:#fff}
.x3-stage .fab__layers:hover{background:#1DA851;color:#fff}
.fab__layers svg{width:calc(21 * var(--k));height:calc(21 * var(--k))}

/* the scroll cue lives on the stage floor, centred under the hero */
.x3-cue{
  position:absolute;z-index:3;left:50%;bottom:calc(6 * var(--k));
  transform:translateX(-50%);
  display:flex;align-items:center;gap:calc(9 * var(--k));
  font-size:calc(10.6 * var(--k));letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.x3-cue svg{width:calc(13 * var(--k));height:calc(13 * var(--k));animation:x3-bob 2.4s var(--soft) infinite}
@keyframes x3-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(4 * var(--k)))}}

/* =============================================================================
   6. THE ENTRANCE — initial states
   -----------------------------------------------------------------------------
   Two reveal primitives, chosen by what an element is made of.

   About two thirds of this design is backdrop-filter glass. Such an element
   cannot be revealed with opacity or transform:
     · opacity < 1 ON the element composites its filtered result against the
       UNfiltered backdrop and drops the border-radius clip while it does, so a
       999px pill renders as a blurred rectangle for the whole fade.
     · opacity < 1 on an ANCESTOR creates a backdrop root, so descendants
       sample an empty backdrop and the glass goes flat.
     · transform re-filters a 30-40px kernel at a new offset every frame.

   So SURFACES are revealed by clip-path, CONTENT by opacity and transform.
   And where the clip sits matters as much as which property it is: any
   grouping property makes its element a backdrop root for everything beneath,
   so every wipe sits ON the glass element, never on a container of it. That is
   why .hero, .rail and .nav never animate — each one wraps glass.
   ============================================================================= */
.rise{display:block}

.js-entrance .nav .pill,
.js-entrance .nav .iconbtn,
.js-entrance .rail > .card,
.js-entrance .btn,
.js-entrance .riders,
.js-entrance .fab{clip-path:inset(-25% 100% -25% -25%)}

.js-entrance .pitch h1{display:flex;flex-direction:column}
/* the h1 line-height is tighter than its em box, so descenders hang below the
   line box and a plain mask would shave them. Padding adds the slack and a
   negative margin takes it back — as flex items those margins cannot collapse. */
.js-entrance .pitch h1 .ln{overflow:hidden;padding-bottom:calc(5 * var(--k));margin-bottom:calc(-5 * var(--k))}
.js-entrance .pitch h1 .ln__i{transform:translateY(120%)}

.js-entrance .pitch__eyebrow{opacity:0;transform:translateY(calc(8 * var(--k)))}
.js-entrance .aside p{opacity:0;transform:translateY(calc(10 * var(--k)))}
.js-entrance .marker{opacity:0;transform:scale(.86)}
.js-entrance .x3-cue{opacity:0}

.js-entrance .stat__num,
.js-entrance .gauge__value,
.js-entrance .ej__num{overflow:hidden}
.js-entrance .stat__num,
.js-entrance .ej__num{padding-bottom:calc(2 * var(--k));margin-bottom:calc(-2 * var(--k))}
.js-entrance .rise{transform:translateY(130%)}

.js-entrance .brand,
.js-entrance .gauge__title,
.js-entrance .ej__title{opacity:0;transform:translateY(calc(-6 * var(--k)))}
.js-entrance .stat__label,
.js-entrance .gauge__foot,
.js-entrance .bar{opacity:0;transform:translateY(calc(8 * var(--k)))}
.js-entrance .dot{opacity:0;transform:scale(.4)}
.js-entrance .leaf{opacity:0;transform:scale(.8)}
.js-entrance .gauge__ring{opacity:0;transform:translate(-50%,-50%) scale(.92)}
.js-entrance .stat__rule{opacity:0;transform:scaleY(.08);transform-origin:top center}
.js-entrance .bar__fill{transform:scaleX(.04);transform-origin:left center}

/* Belt and braces: the class is never added under reduced motion, but if it
   somehow is, nothing may be left hidden. */
@media (prefers-reduced-motion:reduce){
  .js-entrance .nav .pill,.js-entrance .nav .iconbtn,.js-entrance .rail > .card,
  .js-entrance .btn,.js-entrance .riders,.js-entrance .fab{clip-path:none}
  .js-entrance .pitch h1 .ln__i,.js-entrance .rise{transform:none}
  .js-entrance .pitch__eyebrow,.js-entrance .aside p,.js-entrance .marker,
  .js-entrance .x3-cue,.js-entrance .brand,.js-entrance .gauge__title,
  .js-entrance .ej__title,.js-entrance .stat__label,.js-entrance .gauge__foot,
  .js-entrance .bar,.js-entrance .dot,.js-entrance .leaf,
  .js-entrance .stat__rule,.js-entrance .bar__fill{opacity:1;transform:none}
  .js-entrance .gauge__ring{opacity:1;transform:translate(-50%,-50%)}
}

/* =============================================================================
   7. STAGE RESPONSIVE — four tiers, by the shape of the space
   ============================================================================= */

/* TIER A — burger, for both tablet arrangements and phones */
@media (max-width:1119px), (max-height:520px){
  .nav > .nav__burger{display:grid}
  .nav__menu{display:none}
  .nav__links{
    display:flex;flex-direction:column;gap:calc(7 * var(--k));
    position:absolute;z-index:9;
    top:calc(100% + 9 * var(--k));left:calc(5 * var(--k));
    width:calc(292 * var(--k));padding:calc(11 * var(--k));
    border-radius:var(--r-card);
    background:var(--glass-dark);
    -webkit-backdrop-filter:blur(38px);backdrop-filter:blur(38px);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 calc(6 * var(--k)) calc(26 * var(--k)) rgba(2,8,18,.44);
    opacity:0;visibility:hidden;transform:translateY(calc(-6 * var(--k)));
    transition:opacity .22s var(--soft), transform .22s var(--soft), visibility .22s;
  }
  .nav.is-open .nav__links{opacity:1;visibility:visible;transform:none}
  .nav__links{max-height:calc(100dvh - 90px);overflow-y:auto}
  .nav__links > .nav__menu{flex:0 0 auto!important;max-width:none!important;width:100%;flex-direction:column}
  .nav__links .nav__panel{display:none;position:static;width:100%;margin-top:8px;padding:4px;background:transparent;box-shadow:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav__links .nav__menu.is-open .nav__panel{display:block}
  .nav__links .nav__panel a{min-height:44px;font-size:14px;padding:10px;line-height:1.4}
  .nav__links .pill{width:100%;max-width:none;flex:0 0 auto;height:calc(50 * var(--k));justify-content:flex-start;padding-left:calc(22 * var(--k))}
  .nav__links .pill--cta{margin-left:0;padding-left:calc(22 * var(--k))}
  .nav__links .grid4{right:calc(20 * var(--k))}
  .nav{position:relative;overflow:visible}
  .main{overflow:visible}
  .pitch{max-width:66%}
}

/* TIER B — landscape tablet: the desktop architecture on a tighter frame.
   Trimming the outer margins and the rail 265.5 -> 250 drops the design width
   1280 -> 1180, buying back ~9% of --k at the same viewport. */
@media (min-width:701px) and (max-width:1119px) and (min-height:521px) and (min-aspect-ratio:6/5){
  :root{
    --k: max(0.5px, min(100vw / 1180, 100vh / 800));
    --k: max(0.5px, min(100vw / 1180, 100dvh / 800));
  }
  .stage{grid-template-columns:minmax(0,8fr) minmax(0,250fr) minmax(0,8fr) minmax(0,906fr) minmax(0,8fr);grid-template-rows:minmax(0,8fr) minmax(0,776fr) minmax(0,16fr)}
  .rail{grid-template-rows:minmax(0,248fr) minmax(0,3fr) minmax(0,247fr) minmax(0,4fr) minmax(0,274fr)}
}

/* TIER C — portrait tablet: hero takes the height, rail becomes a row beneath.
   --k is solved so the three cards land back on their designed 265.5-unit
   width (3 x 265.5 + 2 x 10 gaps + 2 x 14 margins = 844.5 across the viewport). */
@media (min-width:701px) and (max-width:1119px) and (min-height:521px) and (max-aspect-ratio:6/5){
  :root{--k:clamp(.82px, 100vw / 845, 1.34px)}
  .stage{
    grid-template-columns:calc(14 * var(--k)) 1fr calc(14 * var(--k));
    grid-template-rows:calc(14 * var(--k)) auto calc(12 * var(--k)) 1fr calc(12 * var(--k)) auto calc(14 * var(--k));
  }
  .main{grid-column:2;grid-row:2 / span 3;display:contents}
  .nav{grid-column:2;grid-row:2;height:calc(64 * var(--k));padding-left:0}
  .nav__links{left:0}
  .hero{grid-column:2;grid-row:4;min-height:calc(330 * var(--k))}
  .fab{left:auto;right:calc(20 * var(--k));top:calc(20 * var(--k))}
  .pitch{max-width:62%}
  .pitch h1{font-size:calc(var(--h1, 43) * .88 * var(--k));line-height:calc(var(--h1, 43) * .82 * var(--k))}
  .rail{
    grid-column:2;grid-row:6;
    grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;
    gap:calc(10 * var(--k));height:calc(276 * var(--k));
  }
  .card--dark{grid-column:1;grid-row:1}
  .card--gauge{grid-column:2;grid-row:1}
  .card--electric{grid-column:3;grid-row:1}
  .x3-cue{display:none}
}

/* TIER D — phone and short landscape. The columns re-flow instead of
   shrinking the type to nothing, and the frame still fills the viewport. */
@media (max-width:700px), (max-height:520px){
  :root{--k:clamp(.62px, min(100vw / 430, 100vh / 900), 1.35px)}
  .stage{
    grid-template-columns:calc(8 * var(--k)) 1fr calc(8 * var(--k));
    grid-template-rows:calc(8 * var(--k)) auto calc(10 * var(--k)) 1fr calc(10 * var(--k)) auto calc(10 * var(--k));
  }
  .main{grid-column:2;grid-row:2 / span 3;display:contents}
  .rail{
    grid-column:2;grid-row:6;display:grid;
    grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;
    gap:calc(8 * var(--k));height:calc(186 * var(--k));
  }
  .card--dark,.card--gauge,.card--electric{grid-row:1}
  .card--dark{grid-column:1}
  .card--gauge{grid-column:2}
  .card--electric{grid-column:3}

  .nav{grid-column:2;grid-row:2;height:calc(56 * var(--k));padding-left:0}
  /* --k bottoms out at .62 on short phones, which would put menu labels under
     10px — these px floors hold the panel legible and tappable without
     touching how it renders anywhere wider. */
  .nav__links{left:0;width:max(250px, calc(292 * var(--k)));padding:max(9px, calc(11 * var(--k)))}
  .nav__links .pill{height:max(44px, calc(50 * var(--k)));font-size:max(14px, calc(15 * var(--k)))}
  .nav__links .pill--cta{font-size:max(15px, calc(16 * var(--k)))}
  .pill{font-size:calc(15 * var(--k));flex:0 0 auto;flex-basis:auto;max-width:none}
  .grid4{right:calc(20 * var(--k))}
  .iconbtn{width:calc(54 * var(--k));height:calc(54 * var(--k))}
  .iconbtn:first-of-type{margin-left:calc(10 * var(--k))}

  /* Hero: .pitch and .aside become bottom-anchored flex items that wrap only
     when the width genuinely runs out. A portrait phone stacks them; a
     landscape phone keeps the desktop two-column bottom row. Neither is ever
     hidden — the proof chip and the paragraph stay in every layout. */
  .hero{
    grid-column:2;grid-row:4;min-height:calc(200 * var(--k));
    display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-end;
    gap:calc(18 * var(--k)) calc(24 * var(--k));
    padding:0 calc(24 * var(--k)) calc(22 * var(--k));
  }
  .pitch{position:static;left:auto;right:auto;bottom:auto;max-width:none;flex:1 1 calc(300 * var(--k))}
  .pitch h1{font-size:calc(var(--h1, 43) * .80 * var(--k));line-height:calc(var(--h1, 43) * .74 * var(--k));margin-bottom:calc(14 * var(--k))}
  .pitch__eyebrow{height:calc(28 * var(--k));margin-bottom:calc(12 * var(--k))}
  .btn{min-width:calc(238 * var(--k));height:calc(48 * var(--k))}
  .btn__disc{width:calc(39 * var(--k));height:calc(39 * var(--k))}
  .btn__label{margin-left:calc(14 * var(--k));font-size:calc(14 * var(--k))}
  .btn:has(> .btn__disc){--btn-disc-size:calc(39 * var(--k));gap:0 calc(14 * var(--k));min-height:calc(48 * var(--k))}
  .pitch .btn--quiet{display:inline-flex;justify-content:center;width:100%;height:auto;min-height:48px;padding:12px 18px}
  .aside{position:static;left:auto;bottom:auto;flex:1 1 calc(300 * var(--k));width:auto;max-width:calc(400 * var(--k))}
  .fab{left:auto;right:0;top:calc(14 * var(--k));width:calc(60 * var(--k));height:calc(128 * var(--k))}
  .fab__plus{top:calc(12 * var(--k));width:calc(35 * var(--k));height:calc(35 * var(--k))}
  .fab__layers{top:calc(74 * var(--k));width:calc(43 * var(--k));height:calc(43 * var(--k))}
  .marker--1{left:24%;top:30%}
  .marker--2{left:66%;top:25%}
  .marker--3{left:84%;top:34%}
  .x3-cue{display:none}

  /* Compact proof cards. The desktop cards place every element absolutely at
     its measured pixel, and that does not survive being shrunk into a third of
     a phone screen — so the narrow layout switches them to real centred stacks. */
  .card--dark,.card--electric{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:calc(7 * var(--k));padding:calc(11 * var(--k));text-align:center;
  }
  .brand,.dots,.stat__num,.stat__rule,.stat__label,
  .ej__title,.leaf,.ej__num,.bar{position:static;left:auto;right:auto;top:auto;bottom:auto;margin:0}
  .stat__rule{width:calc(46 * var(--k));height:1px;flex:0 0 auto}
  .js-entrance .stat__rule{transform:scaleX(.08);transform-origin:center}
  .brand{justify-content:center}
  .brand svg{width:calc(24 * var(--k));height:calc(17 * var(--k))}
  .brand .word{font-size:calc(19 * var(--k));line-height:calc(11.9 * var(--k));margin-left:calc(6 * var(--k));top:0;transform:none}
  .dots{display:none}
  .stat__num{font-size:calc(40 * var(--k));line-height:calc(24.7 * var(--k));transform:none}
  .stat__label{font-size:calc(11 * var(--k));line-height:calc(13 * var(--k));letter-spacing:.01em;text-align:center}
  .gauge__title{top:calc(10 * var(--k));font-size:calc(12.4 * var(--k))}
  .gauge__ring{left:50%;top:calc(50% + 5 * var(--k));transform:translate(-50%,-50%);width:calc(92 * var(--k));height:calc(92 * var(--k))}
  .gauge__value{top:calc(50% + 5 * var(--k));transform:translateY(-50%);font-size:calc(26 * var(--k))}
  .gauge__foot{display:none}
  .ej__title{font-size:calc(12.4 * var(--k));line-height:calc(13.6 * var(--k));transform:none}
  .leaf{width:calc(28 * var(--k));height:calc(28 * var(--k))}
  .leaf svg{width:calc(14 * var(--k));height:calc(14 * var(--k))}
  .ej__num{font-size:calc(30 * var(--k));line-height:calc(18.7 * var(--k));transform:none}
  .bar{width:calc(100% - 4 * var(--k));height:calc(12 * var(--k));border-radius:calc(3 * var(--k));flex:0 0 auto}
}
/* Benefit slides retain the proof card's layout and reveal on demand. */
.card--benefits .benefit-panels,.card--benefits .benefit-slide{display:contents}
.card--benefits .benefit-slide[hidden]{display:none}
.card--benefits .dots{gap:0;top:40%}
.card--benefits .dot{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.card--benefits .dot::before{content:"";position:absolute;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.62);transition:background .18s,border-color .18s}
.card--benefits .dot--on::before{background:var(--accent);border-color:var(--accent)}
.card--benefits .dot::after{position:relative;width:5px;height:5px}
.card--benefits .dot:focus-visible{outline:2px solid #fff;outline-offset:0;border-radius:50%}
.card--benefits .dot:hover::before{border-color:var(--accent)}
@media(max-width:700px), (max-height:520px){
  .x3-stage .rail:has(.card--benefits){grid-template-columns:1fr 1fr;grid-template-rows:auto 186px;height:auto}
  .rail .card--benefits{grid-column:1 / -1;grid-row:1;min-height:190px;gap:6px;padding:18px}
  .rail:has(.card--benefits) .card--gauge{grid-column:1;grid-row:2}
  .rail:has(.card--benefits) .card--electric{grid-column:2;grid-row:2}
  .card--benefits .dots{display:flex;position:static}
  .card--benefits .benefit-slide:not([hidden]){display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;gap:24px;width:min(100%,280px)}
  .card--benefits .stat__rule{height:40px;width:1px}
  .card--benefits .stat__num{font-size:36px;line-height:1}
  .card--benefits .stat__label{font-size:13px;line-height:1.35;text-align:left}
}

/* Let phone heroes grow with their content instead of clipping them to a viewport. */
@media(min-width:701px) and (max-width:1119px) and (min-height:521px) and (max-aspect-ratio:6/5){
  .x3-stage{height:auto;min-height:100svh}
  .stage{position:relative;inset:auto;min-height:100svh}
  .hero{display:flex;flex-direction:column;justify-content:flex-end;gap:24px;min-height:600px;padding:100px 32px 32px}
  .pitch,.aside{position:static;max-width:100%;width:auto}
  .pitch h1{font-size:clamp(34px,5vw,48px);line-height:1.08}
  .aside p{font-size:15px;line-height:1.6}
}
@media(min-width:701px) and (max-width:1119px) and (min-height:521px) and (min-aspect-ratio:6/5){
  .pitch{max-width:50%}
}
@media(max-width:700px), (max-height:520px){
  .x3-stage{height:auto;min-height:100svh}
  .stage{position:relative;inset:auto;min-height:100svh;grid-template-columns:8px minmax(0,1fr) 8px;grid-template-rows:8px auto 10px auto 10px auto 10px}
  .nav{height:52px}
  .x3-stage .iconbtn{width:44px;height:44px;flex-shrink:0}
  .x3-stage .hero{min-height:500px;padding:86px 20px 26px;gap:22px}
  .pitch,.aside{min-width:0;flex-basis:100%;max-width:100%}
  .pitch h1{font-size:clamp(30px,8vw,42px);line-height:1.08;overflow-wrap:break-word}
  .pitch__eyebrow{height:auto;min-height:30px;max-width:100%;padding:7px 0;font-size:11px;line-height:1.4;letter-spacing:.06em}
  .pitch__eyebrow svg{width:14px;height:14px;flex-shrink:0}
  .pitch .x3-crumb{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:11px;line-height:1.5;margin-bottom:12px}
  .pitch .btn:has(> .btn__disc){--btn-disc-size:38px;min-height:48px;min-width:0;width:100%;gap:0 8px;padding:4px}
  .pitch .btn__disc{width:38px;height:38px}
  .pitch .btn__label{font-size:14px;line-height:1.4}
  .aside p{font-size:14px;line-height:1.6}
  .riders{width:max-content;max-width:100%;height:34px;padding-left:44px;margin-bottom:14px}
  .riders__pill{position:relative;left:auto;top:auto;width:auto;height:32px;padding:0 12px;font-size:11px}
  .av{width:32px;height:32px}
  .av + .av{margin-left:-16px}
  .fab{left:auto;right:14px;top:14px;width:104px;height:52px}
  .fab__plus,.fab__layers{top:4px;width:44px;height:44px;transform:none}
  .fab__plus{left:4px}
  .fab__layers{left:56px}
  .fab__plus svg,.fab__layers svg{width:20px;height:20px}
  .gauge__title{font-size:13px}
  .ej__title{font-size:14px;line-height:1.3}
}