/* ==========================================================================
   Spade — remake
   Tokens, fonts, type scale, layout, components
   ========================================================================== */

@font-face {
  font-family: "naNSuperX";
  src: url("../assets/fonts/NaNSuperXSansDisplay_VF_TRIAL-s.p.55b41e97.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "polar";
  src: url("../assets/fonts/FTPolar_Regular-s.p.61d92bfa.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "polarMono";
  src: url("../assets/fonts/FTPolarMono_Regular-s.p.23bb8712.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "polarMono";
  src: url("../assets/fonts/FTPolarMono_Medium-s.p.119f14b6.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #090f05;
  --white: #fff;
  --forest: #18280e;
  --moss: #3f7308;
  --lemongrass: #b2eb76;
  --sage-1: #f4faed;
  --sage-2: #f0fae6;
  --sage-3: #d8e5ca;
  --sage-4: #b3c5a0;
  --sage-5: #4a5b38;
  --gold: #333109;
  --earth: #331b09;
  --soil: #29261f;
  --sun: #ebe46a;
  --sand: #f2dfac;
  --sea: #093328;

  --font-display: "naNSuperX", ui-sans-serif, system-ui, sans-serif;
  --font-body: "polar", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "polarMono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --header-height: 4.4375rem;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur: 0.25s;

  --container: 82.5rem; /* 1320px */
  --gutter: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  color: var(--black);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Fluid type scale — interpolates --m (mobile px) to --d (desktop px)
   between 480px and 1280px viewports, exactly like the original utilities.
   -------------------------------------------------------------------------- */
.fl {
  font-size: clamp(
    min(var(--m) * 1px, var(--d) * 1px),
    calc(var(--m) * 1px + (var(--d) - var(--m)) * (100vw - 480px) / 800),
    max(var(--m) * 1px, var(--d) * 1px)
  );
}
.t-display { font-family: var(--font-display); font-synthesis: none; font-variation-settings: "slnt" 0, "ital" 0; }

.t-84 { --m: 34; --d: 84; font-weight: 560; line-height: 1.05; letter-spacing: -0.01em; }
.t-78 { --m: 36; --d: 78; font-weight: 560; line-height: 1.05; letter-spacing: -0.01em; }
.t-64-stat { --m: 42; --d: 64; font-weight: 520; line-height: 1; }
.t-48 { --m: 28; --d: 48; font-weight: 560; line-height: 1.1; letter-spacing: -0.01em; }
.t-40 { --m: 26; --d: 40; font-weight: 560; line-height: 1.1; letter-spacing: -0.01em; }
.t-40-thin { --m: 26; --d: 40; font-weight: 520; line-height: 1.15; }
.t-28 { --m: 22; --d: 28; font-weight: 520; line-height: 1.2; }
.t-24 { --m: 20; --d: 24; font-weight: 520; line-height: 1.3; }
.t-20 { --m: 18; --d: 20; font-weight: 520; line-height: 1.25; }
.t-20-stat { font-family: var(--font-display); font-size: 20px; font-weight: 520; line-height: 1.1; }

.t-body-18 { --m: 16; --d: 18; font-family: var(--font-body); line-height: 1.4; }
.t-body-16 { --m: 15; --d: 16; font-family: var(--font-body); line-height: 1.4; }
.t-body-14 { --m: 13; --d: 14; font-family: var(--font-body); line-height: 1.3; }
.t-legal { --m: 12; --d: 12; font-family: var(--font-body); line-height: 1.1; letter-spacing: -0.01em; }

.t-btn { --m: 14; --d: 15; font-family: var(--font-mono); font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.t-eyebrow-14 { --m: 14; --d: 14; font-family: var(--font-mono); font-weight: 500; line-height: 1.4; letter-spacing: -0.05em; }
.t-caps-13 { --m: 12; --d: 13; font-family: var(--font-mono); font-weight: 500; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
.t-caps-11 { --m: 10; --d: 11; font-family: var(--font-mono); font-weight: 500; line-height: 1.45; letter-spacing: 0.12em; text-transform: uppercase; }
.t-caps-10 { --m: 9; --d: 10; font-family: var(--font-mono); font-weight: 500; line-height: 1.45; letter-spacing: 0.12em; text-transform: uppercase; }
.t-stat-desc { --m: 10; --d: 11; font-family: var(--font-mono); font-weight: 500; line-height: 1.25; letter-spacing: 0.12em; text-transform: uppercase; }
.t-nav-10 { font-family: var(--font-mono); font-size: 10px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; }

.o-80 { opacity: 0.8; }
.o-70 { opacity: 0.7; }
.o-60 { opacity: 0.6; }
.text-center { text-align: center; }
.text-white { color: var(--white); }
.text-black { color: var(--black); }
.text-lemongrass { color: var(--lemongrass); }
.text-sun { color: var(--sun); }
.text-sand { color: var(--sand); }
.text-moss { color: var(--moss); }
.text-balance { text-wrap: balance; }
@media (max-width: 639px) { .text-balance-sm { text-wrap: balance; } }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 1024px) {
  :root { --gutter: 3.75rem; }
}

section { position: relative; background: var(--white); }
.section--clip { overflow: hidden; }
.section--sage { background: var(--sage-1); }

/* Spacing utilities mirroring the CMS spacing map */
.pt-80 { padding-top: 3rem; }
.pt-128 { padding-top: 3.5rem; }
.pt-164 { padding-top: 5rem; }
.pb-80 { padding-bottom: 3rem; }
.pb-128 { padding-bottom: 3.5rem; }
.pb-144 { padding-bottom: 4rem; }
.pb-164 { padding-bottom: 5rem; }
@media (min-width: 768px) {
  .pt-80 { padding-top: 4rem; } .pb-80 { padding-bottom: 4rem; }
  .pt-128 { padding-top: 5rem; } .pb-128 { padding-bottom: 5rem; }
  .pb-144 { padding-bottom: 6rem; }
  .pt-164 { padding-top: 7rem; } .pb-164 { padding-bottom: 7rem; }
}
@media (min-width: 1024px) {
  .pt-80 { padding-top: 5rem; } .pb-80 { padding-bottom: 5rem; }
  .pt-128 { padding-top: 8rem; } .pb-128 { padding-bottom: 8rem; }
  .pb-144 { padding-bottom: 9rem; }
  .pt-164 { padding-top: 10.25rem; } .pb-164 { padding-bottom: 10.25rem; }
}
.stack-164 > * + * { margin-top: 5rem; }
.stack-96 > * + * { margin-top: 4.5rem; }
@media (min-width: 768px) { .stack-164 > * + * { margin-top: 7rem; } }
@media (min-width: 1024px) { .stack-164 > * + * { margin-top: 10.25rem; } .stack-96 > * + * { margin-top: 6rem; } }

/* Cut corners: four white (or colored) triangles clipped over the corners */
.cut { position: relative; }
.cut > .corners { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.cut > .corners > i {
  position: absolute; display: block;
  width: var(--corner, 17px); height: var(--corner, 17px);
  background: var(--corner-color, var(--white));
}
.cut > .corners > i:nth-child(1) { top: -1px; left: -1px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.cut > .corners > i:nth-child(2) { top: -1px; right: -1px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cut > .corners > i:nth-child(3) { bottom: -1px; left: -1px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.cut > .corners > i:nth-child(4) { bottom: -1px; right: -1px; clip-path: polygon(100% 0, 0 100%, 100% 100%); }
@media (max-width: 767px) { .cut { --corner: var(--corner-m, 13px); } }

/* Bracket corners (the stat cards / inputs): small filled squares clipped to triangles */
.brackets { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.brackets > i { position: absolute; width: var(--bk, 12px); height: var(--bk, 12px); background: var(--bk-color, var(--black)); }
.brackets > i:nth-child(1) { top: var(--bk-off, 0); left: var(--bk-off, 0); clip-path: polygon(0 0, 100% 0, 0 100%); }
.brackets > i:nth-child(2) { top: var(--bk-off, 0); right: var(--bk-off, 0); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.brackets > i:nth-child(3) { bottom: var(--bk-off, 0); left: var(--bk-off, 0); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.brackets > i:nth-child(4) { bottom: var(--bk-off, 0); right: var(--bk-off, 0); clip-path: polygon(100% 0, 0 100%, 100% 100%); }

/* Rulers (tick marks along the page edges) */
.rules { position: absolute; top: 0.5rem; bottom: 0; width: 1.125rem; display: none; flex-direction: column; gap: 1.75rem; overflow: clip; pointer-events: none; }
.rules--left { left: 0; align-items: flex-start; }
.rules--right { right: 0; align-items: flex-end; }
.rules > i { display: block; height: 1px; width: 0.625rem; background: currentColor; flex-shrink: 0; }
.rules > i:nth-child(5n + 1) { width: 1.125rem; }
@media (min-width: 1024px) { .rules { display: flex; } }

/* Triangle glyph used everywhere (▸) */
.tri { display: block; width: 100%; height: 100%; }

/* Side arrows (sticky at 50% of viewport in the hero; static at top of footer) */
.side-arrows { pointer-events: none; display: none; justify-content: space-between; left: 0; right: 0; z-index: 10; }
.side-arrows > span { display: block; width: 1.375rem; height: 1rem; color: currentColor; }
.side-arrows > span:last-child { transform: rotate(180deg); }
@media (min-width: 1024px) { .side-arrows { display: flex; } }

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 0.625rem 1.125rem; min-height: 2.6875rem;
  user-select: none; transition: color var(--dur) var(--ease); white-space: nowrap;
}
.btn--sm { padding: 0.625rem 1rem; min-height: 2.4375rem; }
.btn__bg {
  position: absolute; inset: 0; border-radius: 0.375rem; transform-origin: center;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover .btn__bg { transform: scale(0.98); }
.btn__label { position: relative; z-index: 1; }
.btn--forest { color: var(--lemongrass); }
.btn--forest .btn__bg { background: var(--forest); }
.btn--forest:hover .btn__bg { background: rgba(24, 40, 14, 0.9); }
.btn--gray { color: var(--black); }
.btn--gray .btn__bg { background: rgba(9, 15, 5, 0.05); }
.btn--gray:hover .btn__bg { background: rgba(9, 15, 5, 0.08); }
.btn--white-gray { color: var(--black); }
.btn--white-gray .btn__bg { background: var(--white); border: 1px solid rgba(9, 15, 5, 0.15); }
.btn--white-gray:hover .btn__bg { background: var(--lemongrass); border-color: var(--lemongrass); }
.btn--white-border { color: var(--white); }
.btn--white-border .btn__bg { background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); }
.btn--white-border:hover .btn__bg { background: var(--lemongrass); border-color: var(--lemongrass); }
.btn--white-border:hover { color: var(--forest); }
.btn--lemongrass { color: var(--forest); }
.btn--lemongrass .btn__bg { background: var(--lemongrass); }
.btn--lemongrass:hover .btn__bg { background: #c2f28c; }

/* Text link with the sliding ▸ */
.tlink { display: inline-flex; align-items: center; gap: 0.3125rem; }
.tlink__arrow { position: relative; display: inline-block; width: 0.4375rem; height: 0.3125rem; margin-top: 0.125rem; flex-shrink: 0; overflow: visible; }
.tlink__arrow > span { position: absolute; inset: 0; display: block; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.tlink__arrow > span:last-child { opacity: 0; transform: translateY(200%); }
.tlink:hover .tlink__arrow > span:first-child { opacity: 0; transform: translateY(-200%); }
.tlink:hover .tlink__arrow > span:last-child { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-height); width: 100%; background: var(--white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header.is-scrolled { box-shadow: 0 1px 3px 0 rgba(9, 15, 5, 0.05), 0 1px 2px -1px rgba(9, 15, 5, 0.05); }
.header.is-hidden { transform: translateY(-100%); box-shadow: none; }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 100%; }
.header__logo { display: inline-block; color: var(--forest); }
.header__logo svg { width: 133px; height: 22px; }
.nav { display: none; }
.nav__list { display: flex; gap: 2.5rem; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: flex-start; gap: 0.3125rem; transition: color var(--dur) var(--ease); }
.nav__link:hover, .nav__item.is-open .nav__link { color: var(--moss); }
.nav__caret { display: block; width: 0.4375rem; height: 0.3125rem; margin-top: 0.4375rem; transform: rotate(90deg); flex-shrink: 0; }
.header__cta { display: none; gap: 1rem; }
@media (min-width: 1024px) { .nav, .header__cta { display: flex; } }

.menu {
  position: absolute; top: 100%; left: -1.75rem; padding-top: 0.75rem; width: max-content;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav__item.is-open .menu { opacity: 1; transform: none; pointer-events: auto; }
.menu__panel {
  display: flex; gap: 2rem; border-radius: 0.375rem; background: var(--white); color: var(--black);
  padding: 1.5rem 1.5rem 1.5rem 1rem; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
}
.menu__col { min-width: max-content; max-width: 19.375rem; }
.menu__col h3 { padding: 0 0.75rem; margin-bottom: 1.25rem; }
.menu__col ul > li + li { margin-top: 0.125rem; }
.menu__link { position: relative; display: block; width: 100%; border-radius: 0.375rem; transition: background-color var(--dur) var(--ease); }
.menu__link:hover { background: var(--sage-1); }
.menu__link > span { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0.875rem 0.75rem 0.75rem; }
.menu__icon { width: 2rem; height: 2rem; flex-shrink: 0; }
.menu__text { display: block; flex: 1; }
.menu__text b { display: block; font-weight: 400; line-height: 1 !important; }
.menu__text small { display: block; margin-top: 0.375rem; opacity: 0.6; }
.menu__link:hover .menu__text b { color: var(--moss); }

.burger { display: grid; cursor: pointer; }
.burger__lines { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; width: 38px; height: 22px; }
.burger__lines span { display: block; height: 2px; width: 1.5rem; background: rgba(9, 15, 5, 0.1); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), width 0.3s var(--ease), background-color 0.3s var(--ease); }
.burger__lines span:first-child { width: 100%; background: var(--black); }
.burger.is-open .burger__lines span { background: var(--black); width: 100%; }
.burger.is-open .burger__lines span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.burger.is-open .burger__lines span:nth-child(2) { opacity: 0; }
.burger.is-open .burger__lines span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

.mobile-nav {
  position: fixed; inset: var(--header-height) 0 0 0; z-index: 40; background: var(--white);
  padding: 1.5rem var(--gutter) 2.5rem; overflow-y: auto;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.mobile-nav.is-open { opacity: 1; pointer-events: auto; transform: none; }
.mobile-nav h3 { margin: 1.5rem 0 0.75rem; opacity: 0.6; }
.mobile-nav a { display: block; padding: 0.625rem 0; }
.mobile-nav .btn { margin-top: 2rem; width: 100%; }
@media (min-width: 1024px) { .mobile-nav { display: none; } }

/* --------------------------------------------------------------------------
   Hero (split_stacked_masthead)
   -------------------------------------------------------------------------- */
.hero { padding: 0 var(--gutter); overflow: hidden; color: var(--black); }
@media (min-width: 1024px) { .hero { padding: 0 2rem; } }
.hero .side-arrows { position: sticky; top: calc(50% - 0.6875rem); }
.hero__panel { position: relative; background: var(--sage-1); padding: 3.5rem 1.25rem; margin: 0 calc(-1 * var(--gutter)); }
@media (min-width: 768px) { .hero__panel { padding: 5rem 2rem; margin: 0; } }
@media (min-width: 1024px) { .hero__panel { padding: 6.5rem 2rem 8rem; margin-top: -1.375rem; } }
.hero__inner { position: relative; margin: 0 auto; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 66.75rem; }
.hero__title { text-align: center; max-width: 60.75rem; }
.hero__visual { position: relative; width: 100%; max-width: 56.25rem; aspect-ratio: 900 / 435; pointer-events: none; margin-top: -0.75rem; }
@media (min-width: 640px) { .hero__visual { margin-top: -2rem; } }
.hero__copy { width: 100%; max-width: 27.75rem; margin-top: 1.5rem; text-align: center; }
.hero__actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .hero__actions { margin-top: 1.75rem; } }

/* Rive canvases */
.rive { position: absolute; inset: 0; width: 100%; height: 100%; }
.rive canvas { width: 100% !important; height: 100% !important; }
.rive-box { position: relative; width: 100%; }

/* --------------------------------------------------------------------------
   Logos
   -------------------------------------------------------------------------- */
.logos__inner { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.logos__grid { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .logos__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .logos__grid { grid-template-columns: repeat(7, 1fr); gap: 1.5rem; } }
.logo-cell { position: relative; display: flex; flex-direction: column; align-items: center; height: 66px; }
.logo-cell > div { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 136px; height: 1.75rem; }
@media (min-width: 1024px) { .logo-cell > div { height: 2.5rem; width: 136px; } }
.logo-cell img { max-height: 100%; width: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   Progress scroller (dark statement → light statement, Rive driven by scroll)
   -------------------------------------------------------------------------- */
.scroller { padding: 0 var(--gutter); overflow: visible; }
@media (min-width: 1024px) { .scroller { padding: 0 2rem; } }
.scroller__track { height: 380vh; margin: 1rem calc(-1 * var(--gutter)) 0; }
@media (min-width: 768px) { .scroller__track { margin: 0; } }
.scroller__sticky { position: sticky; top: 0; display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.scroller__bg { position: absolute; inset: 0; will-change: opacity; }
@media (min-width: 768px) { .scroller__bg { top: 4rem; bottom: 4rem; } }
.scroller__bg > .fill { position: relative; width: 100%; height: 100%; background: var(--forest); }
.scroller__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; will-change: transform, opacity; }
@media (min-width: 768px) { .scroller__text { padding: 3rem; } }
.scroller__text--z1 { z-index: 1; }
.scroller__text--z3 { z-index: 3; }
.scroller__text > div { position: relative; width: 100%; text-align: center; will-change: transform; }
.scroller__text { z-index: 3; }
.scroller__text--z1 { z-index: 3; }
.scroller__text--last > div { transform: translateY(calc(var(--slide-progress, 0) * (50vh - 50%))); }
.scroller__rive { position: absolute; inset: 0; z-index: 2; }
.scroller__rive > div { position: relative; width: 100%; height: 108%; }

/* --------------------------------------------------------------------------
   Two-column features
   -------------------------------------------------------------------------- */
.two-col { display: flex; flex-direction: column-reverse; justify-content: space-between; gap: 2.25rem; }
@media (min-width: 768px) { .two-col { flex-direction: row; gap: 2rem; align-items: flex-end; } .two-col--center { align-items: center; } .two-col--reverse { flex-direction: row-reverse; } }
.two-col__text { width: 100%; flex-shrink: 0; }
@media (min-width: 768px) { .two-col__text { width: 50%; max-width: 28rem; } }
.two-col__asset { position: relative; width: 100%; flex: 1; }
@media (min-width: 768px) { .two-col__asset { max-width: 47.5rem; } }

.text-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; }
.text-card--center { align-items: center; text-align: center; margin: 0 auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 0.875rem; }
.eyebrow--lg { margin-bottom: 1rem; }
@media (min-width: 640px) { .eyebrow { gap: 1rem; } }
.eyebrow img { width: 1.625rem; height: 1.625rem; flex-shrink: 0; }
@media (min-width: 640px) { .eyebrow img { width: 1.875rem; height: 1.875rem; } }
.text-card .copy { margin-top: 0.625rem; }
.text-card .copy--lg { margin-top: 0.75rem; }
@media (min-width: 640px) { .text-card .copy { margin-top: 0.75rem; } .text-card .copy--lg { margin-top: 1rem; } }
.text-card .actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .text-card .actions { margin-top: 2rem; } .text-card .actions--sm { margin-top: 1.75rem; } }

.accent {
  position: relative; display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 2.5rem;
  padding: 0.875rem 0.875rem 0.875rem 0.75rem; background: var(--sage-1); --corner: 9px; --corner-m: 13px;
  width: 100%;
}
@media (min-width: 640px) { .accent { margin-top: 3.5rem; } }
@media (min-width: 768px) { .accent { max-width: 22.625rem; text-wrap: balance; } }
@media (min-width: 1024px) { .accent { width: auto; } }
@media (min-width: 1280px) { .accent { margin-top: 5rem; } }
.accent__num { position: relative; display: inline-grid; flex-shrink: 0; }

.asset-frame { position: relative; width: 100%; flex-shrink: 0; --corner: 33px; --corner-m: 13px; }
.asset-frame > .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.asset-frame > .layer img { width: 100%; height: 100%; object-fit: cover; }
.asset-frame > .base { position: relative; width: 100%; height: 100%; }
.asset-frame > .base img { width: 100%; height: auto; }

/* Feature card (Analytics & AI) */
.feature-card { position: relative; width: 100%; background: var(--forest); color: var(--white); --corner: 17px; --corner-m: 1px; margin: 0 calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); }
@media (min-width: 768px) { .feature-card { margin: 0; width: 100%; } }
.feature-card__bg { position: absolute; inset: 0; opacity: 0.6; overflow: hidden; }
.feature-card__bg img { width: 100%; height: 100%; object-fit: cover; }
.feature-card__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem 1.25rem; }
@media (min-width: 768px) { .feature-card__inner { flex-direction: row; padding: 2.5rem; } }
.feature-card__text { width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 768px) { .feature-card__text { width: 40%; max-width: 27.875rem; } .feature-card__text h2 { margin-top: auto; } }
.feature-card__asset { display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) { .feature-card__asset { flex: 1; align-self: center; padding: 0 1rem; } }
.feature-card__asset > .rive-box { max-width: 39rem; aspect-ratio: 612 / 492; }

/* --------------------------------------------------------------------------
   Layers (drawer_scroll_reveal_content) — scroll-scrubbed video + cards
   -------------------------------------------------------------------------- */
.layers { overflow-x: clip; }
.layers__track { padding: 5rem 0 4rem; }
@media (min-width: 640px) { .layers__track { padding: 5rem 0; } }
@media (min-width: 1024px) { .layers__track { height: 400vh; padding: 0; } }
.layers__sticky { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .layers__sticky { position: sticky; top: 0; height: 100vh; } }
.layers__title { width: 100%; max-width: 27rem; margin: 0 auto; text-align: center; }
.layers__video { position: relative; z-index: 100; display: none; margin: 0 auto; width: 100%; max-width: 21.25rem; aspect-ratio: 340 / 360; }
.layers__video video { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 1024px) { .layers__video { display: block; } }
.layers__cards { position: relative; display: none; margin: -1.5rem auto 0; width: 100%; max-width: 68.5rem; }
@media (min-width: 1024px) { .layers__cards { display: block; } }
.layers__cards > div { position: absolute; inset: 0; width: 100%; pointer-events: auto; }
.lcard { position: absolute; bottom: 3rem; width: 17.125rem; will-change: transform, opacity; }
.lcard--left { left: 0; }
.lcard--right { right: 0; width: 16.375rem; }
.lcard__inner { position: relative; display: flex; flex-direction: column; }
.lcard__connector { display: none; margin-bottom: 0.5rem; }
.lcard__line { display: none; position: absolute; top: 2.625rem; right: calc(100% + 1rem); }
@media (min-width: 1280px) { .lcard__connector, .lcard__line { display: block; } }
.lcard__eyebrow { position: relative; display: flex; margin-bottom: 0.875rem; }
.lcard__eyebrow > i { position: absolute; top: 0.3125rem; right: calc(100% + 1rem); width: 0.75rem; height: 0.5625rem; display: block; }
.lcard__body { display: flex; flex-direction: column; gap: 0.25rem; }
.lcard__link { margin-top: 0.25rem; }

.layers__mobile { display: flex; flex-direction: column; gap: 2rem; margin-top: 3.5rem; }
@media (min-width: 1024px) { .layers__mobile { display: none; } }
.mcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; border: 1px solid var(--sage-3); padding: 1.25rem 1.5rem 1.75rem; text-align: center; --bk: 12px; --bk-off: -1px; }
.mcard h3 { margin-bottom: 0.125rem; }
.mcard .tlink { margin-top: 0.875rem; }
.mcard > a.cover { position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   Proven (customer slider)
   -------------------------------------------------------------------------- */
.proven__head { width: 100%; max-width: 26.625rem; }
.proven__head .tlink { margin-top: 0.625rem; }
.proven__body { display: flex; align-items: flex-start; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 640px) { .proven__body { margin-top: 3.5rem; } }
@media (min-width: 768px) { .proven__body { margin-top: 5.75rem; } }
.snav { display: none; width: 2.875rem; flex-shrink: 0; margin-top: -0.3125rem; }
@media (min-width: 768px) { .snav { display: block; } }
.snav__btn { position: relative; display: block; width: 1.625rem; padding: 0.3125rem 0; transition: width var(--dur) var(--ease-out); }
.snav__btn.is-active { width: 100%; }
.snav__bar { position: relative; display: block; width: 100%; height: 3px; overflow: hidden; background: rgba(9, 15, 5, 0.1); transition: background-color var(--dur) var(--ease); }
.snav__btn:hover .snav__bar { background: rgba(9, 15, 5, 0.2); }
.snav__fill { position: absolute; inset: 0; z-index: 1; display: block; width: 0; background: var(--black); }
.snav__arrow { position: absolute; top: 0.115rem; left: 0; display: none; align-items: center; width: 0.75rem; height: 0.6rem; transform: translateX(-200%); opacity: 0; transition: opacity var(--dur) var(--ease); }
.snav__btn.is-active .snav__arrow { opacity: 1; }
@media (min-width: 1024px) { .snav__arrow { display: flex; } }

.slider { flex: 1; min-width: 0; position: relative; overflow: hidden; }
@media (max-width: 767px) { .slider { overflow: visible; } }
.slider__track { display: flex; gap: 3rem; transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: transform; }
.slide { flex-shrink: 0; width: 100%; }
.slide__row { display: flex; gap: 1.5rem; }
.qcard { position: relative; display: flex; flex: 1; flex-direction: column; gap: 2.5rem; padding: 1.5rem; color: var(--white); --corner: 13px; --corner-m: 13px; --corner-color: var(--sage-1); min-height: 23.75rem; }
@media (min-width: 640px) { .qcard { padding: 2rem; } }
.qcard--gold { background: var(--gold); }
.qcard--earth { background: var(--earth); }
.qcard--forest { background: var(--forest); }
.qcard blockquote { width: 100%; max-width: 26.375rem; }
.qcard blockquote p { position: relative; }
.qcard blockquote p .q-open { position: absolute; right: 100%; }
.qcard cite { display: block; margin-top: 0.875rem; font-style: normal; }
.qcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: auto; }
.qcard__logo { display: block; width: 7.5rem; height: 2.25rem; }
.qcard__logo img { width: 100%; height: 100%; object-fit: contain; object-position: right; }
.scard { position: relative; display: none; flex-direction: column; justify-content: space-between; gap: 3rem; width: 33.333%; flex-shrink: 0; padding: 1rem; --bk: 12px; }
@media (min-width: 768px) { .scard { display: flex; padding: 1.25rem 1.5rem; } }
@media (min-width: 1024px) { .scard { width: 25%; } }
.scard__head { max-width: 10rem; }
.scard__head > * + * { margin-top: 0.125rem; }
.scard__label { display: flex; align-items: center; gap: 0.375rem; }
.scard__label > i { display: block; width: 0.375rem; height: 0.3rem; color: var(--moss); flex-shrink: 0; }

/* Number flow (rolling digits) */
.nf { display: inline-flex; align-items: baseline; white-space: nowrap; }
.nf__digit { position: relative; display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: baseline; }
.nf__digit > b { visibility: hidden; font-weight: inherit; }
.nf__digit > span { position: absolute; top: 0; left: 0; display: block; height: 1em; line-height: 1; will-change: transform; transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
.nf__digit > span > i { display: block; height: 1em; line-height: 1; font-style: normal; }
.nf__digit, .nf__sym { font-variant-numeric: tabular-nums; }
.nf.is-static .nf__digit > span { transition: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { position: relative; overflow: hidden; background: var(--forest); color: var(--white); }
.footer .rules { color: var(--lemongrass); }
.footer .side-arrows { position: absolute; top: 0; color: var(--lemongrass); }
.footer__cta { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; width: 100%; max-width: 960px; margin: 0 auto; }
@media (min-width: 640px) { .footer__cta { gap: 2.5rem; } }
.footer__cta p { text-align: center; }
.footer__cta .word { display: inline-block; white-space: nowrap; }
.footer__cta .ch { display: inline; color: var(--lemongrass); }
@media (min-width: 1024px) { .footer__cta .ch { color: var(--ch, var(--white)); } }
.coin { position: absolute; width: 150px; opacity: 0.4; will-change: transform; pointer-events: none; }
.coin--a { top: -5rem; left: -7.5rem; }
.coin--b { right: -8rem; bottom: -3.5rem; }
@media (min-width: 1024px) { .coin { width: 219px; opacity: 1; } .coin--b { right: -10rem; } }
.footer__body { padding: 5rem 0 2.75rem; }
@media (min-width: 768px) { .footer__body { padding-top: 7rem; } }
@media (min-width: 1024px) { .footer__body { padding-top: 10.25rem; } }
.footer__grid { display: flex; flex-direction: column; align-items: flex-start; gap: 4rem; }
@media (min-width: 1024px) { .footer__grid { flex-direction: row; gap: 3rem; } }
.footer__nav { width: 100%; flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
@media (min-width: 480px) { .footer__nav { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 640px) { .footer__nav { gap: 2rem; } }
.footer__nav h3 { margin-bottom: 1.25rem; }
@media (min-width: 640px) { .footer__nav h3 { margin-bottom: 1rem; } }
.footer__nav li + li { margin-top: 0.875rem; }
@media (min-width: 640px) { .footer__nav li + li { margin-top: 0.75rem; } }
.footer__nav a { position: relative; display: inline-block; }
.footer__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.footer__nav a:hover::after { transform: scaleX(1); }
.footer__side { width: 100%; flex-shrink: 0; }
@media (min-width: 1024px) { .footer__side { width: 41.666%; max-width: 26rem; } }
.footer__side > * + * { margin-top: 5rem; }
.footer__block > * + * { margin-top: 1.25rem; }
.nl-form { display: flex; width: 100%; gap: 0.75rem; }
.nl-field { position: relative; flex: 1; height: 3rem; border: 1px solid rgba(255, 255, 255, 0.1); --bk: 7px; --bk-off: -1px; --bk-color: var(--white); }
.nl-field input { width: 100%; height: 100%; padding: 0 1rem; border: 0; background: transparent; color: var(--white); outline: none; }
.nl-field input::placeholder { color: rgba(255, 255, 255, 0.5); }
.nl-submit { position: relative; width: 3rem; height: 3rem; flex-shrink: 0; border: 1px solid var(--white); --bk: 7px; --bk-off: -1px; --bk-color: var(--white); }
.nl-submit button { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.nl-submit svg { transition: transform var(--dur) var(--ease); will-change: transform; }
.nl-submit button:hover svg { transform: scale(0.9); }
.social { display: flex; align-items: center; gap: 1rem; }
.social a { display: flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; background: var(--white); }
.social img { width: 100%; height: 100%; object-fit: contain; }
.legal { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; width: 100%; }
@media (min-width: 640px) { .legal { flex-direction: row; } }
.legal ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; flex: 1; }
.legal a { display: inline-block; opacity: 0.5; transition: opacity var(--dur) var(--ease); }
.legal a:hover { opacity: 1; }
.legal .copy { opacity: 0.5; margin-left: auto; }
.footer__mark { width: 5.5rem; margin-top: 1rem; color: var(--sage-4); }
.footer__mark svg { width: 100%; height: auto; }


/* ==========================================================================
   Ultracomputation adaptation — new components
   ========================================================================== */

/* wordmark */
.wordmark { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--forest); }
.wordmark svg { width: 34px; height: 12.6px; flex-shrink: 0; }
.wordmark span { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; }
.header__logo .wordmark svg { width: 38px; height: 14px; }

/* sheet rails: UC / 001 and the bus frequency */
.rail { position: absolute; top: 50%; z-index: 11; display: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-5); white-space: nowrap; pointer-events: none; }
.rail--l { left: 0.375rem; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
.rail--r { right: 0.375rem; transform: translateY(-50%) rotate(90deg); transform-origin: center; }
@media (min-width: 1024px) { .rail { display: block; } }
.hero .rail { top: 30%; }
.footer .rail { color: var(--sage-4); }

/* hero canvas */
#shell-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* hardware tiles (replaces the logo grid) */
.hw-grid { display: grid; width: 100%; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .hw-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .hw-grid { grid-template-columns: repeat(7, 1fr); gap: 1.5rem; } }
.hw-tile { position: relative; display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 0.875rem 0.875rem; min-height: 6.5rem; --bk: 9px; --bk-color: var(--sage-3); transition: background-color var(--dur) var(--ease); }
.hw-tile:hover { background: var(--sage-1); }
.hw-tile__name { color: var(--black); }
.hw-tile__kw { color: var(--moss); margin-top: auto; }

/* figure cards (SVG line-work in a sage panel) */
.figcard { position: relative; width: 100%; background: var(--sage-1); overflow: hidden; --corner: 17px; --corner-m: 13px; }
.figcard > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.figcard .fig-line { fill: none; stroke: var(--forest); stroke-width: 1.5; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.figcard .fig-line--bus { stroke-width: 4; }
.figcard .fig-line--dim { stroke: var(--sage-4); stroke-dasharray: 3 6; }
.figcard .fig-line--hi { stroke: var(--moss); }
.figcard .fig-fill { fill: var(--forest); }
.figcard .fig-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--sage-5); font-weight: 500; }
.figcard .fig-text--hi { fill: var(--forest); }
.figcard .fig-text--big { font-family: var(--font-display); font-size: 17px; letter-spacing: 0; text-transform: none; fill: var(--black); font-weight: 520; }
.figcard .fig-draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.figcard.is-on .fig-draw { animation: figdraw 2.2s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
.figcard .fig-fade { opacity: 0; transition: opacity 0.6s var(--ease); transition-delay: var(--d, 0.8s); }
.figcard.is-on .fig-fade { opacity: 1; }
@keyframes figdraw { to { stroke-dashoffset: 0; } }
.figcard .pulse { fill: var(--lemongrass); opacity: 0; }
.figcard.is-on .pulse { animation: pulsemove 3.2s linear infinite; animation-delay: var(--pd, 2.2s); }
@keyframes pulsemove { 0% { opacity: 0; offset-distance: 0%; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
.figcard .annot { position: absolute; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.875rem; background: var(--white); border: 1px solid var(--forest); opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: var(--d, 1.2s); }
.figcard.is-on .annot { opacity: 1; transform: none; }
.figcard .annot--dark { background: var(--forest); color: var(--white); border-color: var(--forest); }
.figcard .annot .k { display: inline-flex; align-items: center; gap: 0.375rem; }
.figcard .annot .k i { display: inline-block; width: 0.375rem; height: 0.3rem; color: var(--moss); }
.figcard .annot--dark .k i { color: var(--lemongrass); }
.figcard.figcard--dark { background: transparent; }
.figcard--dark .fig-line { stroke: var(--lemongrass); }
.figcard--dark .fig-line--dim { stroke: rgba(178, 235, 118, 0.35); }
.figcard--dark .fig-line--hi { stroke: var(--white); }
.figcard--dark .fig-text { fill: var(--sage-4); }
.figcard--dark .fig-text--hi, .figcard--dark .fig-text--big { fill: var(--white); }
.figcard--dark .fig-fill { fill: var(--lemongrass); }

/* eyebrow icon tiles (mirror the coloured icon squares) */
.ico { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: 6px; flex-shrink: 0; color: var(--white); overflow: hidden; }
@media (min-width: 640px) { .eyebrow .ico { width: 1.875rem; height: 1.875rem; } }
.ico svg { width: 60%; height: 60%; display: block; }
.ico--clay { background: #c9753d; } .ico--lagoon { background: #4fa68f; } .ico--sun { background: #ebe46a; color: var(--forest) !important; } .ico--moss { background: var(--moss); }

/* scroller schematic canvas */
.scroller__schem { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.scroller__schem canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 42% 26% at 50% 50%, transparent 0%, transparent 48%, #000 100%);
  mask-image: radial-gradient(ellipse 42% 26% at 50% 50%, transparent 0%, transparent 48%, #000 100%); }

/* Fig. 01 sheet */
.sheet { position: relative; width: 100%; aspect-ratio: 1520 / 760; background: var(--sage-1); --corner: 17px; --corner-m: 13px; }
.sheet canvas { position: absolute; left: 0; right: 0; top: 2.75rem; bottom: 2.75rem; width: 100%; height: calc(100% - 5.5rem); }
.sheet__head, .sheet__foot { position: absolute; left: 1.25rem; right: 1.25rem; display: flex; justify-content: space-between; }
.sheet__head { top: 1rem; } .sheet__foot { bottom: 1rem; }

/* --------------------------------------------------------------------------
   Time to power calculator
   -------------------------------------------------------------------------- */
.calc { width: 100%; }
.calc__head { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
@media (min-width: 1024px) { .calc__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; } }
.calc__headline { max-width: 52rem; }
.calc__tools { display: flex; gap: 0.75rem; flex-shrink: 0; }
.calc__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .calc__grid { grid-template-columns: 23.5rem 1fr; gap: 2rem; } }
.calc__inputs, .calc__outputs { display: flex; flex-direction: column; gap: 1.5rem; }
.cpanel { position: relative; background: var(--white); border: 1px solid rgba(9, 15, 5, 0.12); --bk: 10px; --bk-off: -1px; }
.calc__inputs .cpanel { background: var(--sage-1); border-color: var(--sage-3); --bk-color: var(--forest); }
.cpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid rgba(9, 15, 5, 0.1); }
.calc__inputs .cpanel__head { border-color: var(--sage-3); }
.cpanel__head h3 { color: var(--moss); }
.cpanel__right { display: flex; align-items: center; gap: 1rem; }
.cpanel__body { padding: 1rem 1.25rem 1.25rem; }
.cpanel__toggle { width: 100%; text-align: left; border-bottom: 0; }
.cpanel--drawer .cpanel__body { border-top: 1px solid var(--sage-3); }
.cpanel__why { border-top: 1px solid rgba(9, 15, 5, 0.1); background: var(--sage-1); padding: 1rem 1.25rem 1.25rem; }
.why { border: 1px solid rgba(9, 15, 5, 0.15); padding: 0.375rem 0.625rem; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.why:hover, .why.is-on { background: var(--forest); color: var(--lemongrass); border-color: var(--forest); }
.wstep { display: grid; gap: 0.25rem; padding: 0.625rem 0; border-bottom: 1px solid rgba(9, 15, 5, 0.08); }
.wstep:last-child { border-bottom: 0; }
.wstep__expr { color: var(--black); }
.wstep__expr b { color: var(--moss); font-weight: 500; }
.wnote { margin-top: 0.75rem; max-width: 74ch; }

.cf { display: grid; gap: 0.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--sage-3); }
.cf:last-child { border-bottom: 0; }
.cf__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.cf__label { display: inline-flex; align-items: center; gap: 0.375rem; }
.cf__val { color: var(--black); white-space: nowrap; }
.cf__note { margin-top: 0.375rem; }
.help { position: relative; width: 14px; height: 14px; border: 1px solid rgba(9, 15, 5, 0.25); font-family: var(--font-mono); font-size: 10px; line-height: 1; color: var(--sage-5); display: inline-flex; align-items: center; justify-content: center; transition: color var(--dur), border-color var(--dur), background-color var(--dur); }
.help:hover, .help.is-on { background: var(--forest); color: var(--lemongrass); border-color: var(--forest); }
.help__pop { position: absolute; z-index: 30; left: 0; top: calc(100% + 0.5rem); width: 17rem; max-width: 80vw; padding: 0.75rem; background: var(--white); color: var(--black); border: 1px solid var(--forest); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); text-transform: none; letter-spacing: 0; font-weight: 400; }
.cf__label { position: relative; }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
.range::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(to right, var(--forest) var(--p), rgba(9, 15, 5, 0.12) var(--p)); }
.range::-moz-range-track { height: 3px; background: rgba(9, 15, 5, 0.12); }
.range::-moz-range-progress { height: 3px; background: var(--forest); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; background: var(--forest); border: 0; border-radius: 0; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.range::-moz-range-thumb { width: 12px; height: 12px; background: var(--forest); border: 0; border-radius: 0; }
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb { transform: scale(1.25); background: var(--moss); }
.range:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }

.seg { display: flex; }
.seg__btn { flex: 1; padding: 0.625rem 0.75rem; border: 1px solid rgba(9, 15, 5, 0.15); margin-left: -1px; background: var(--white); color: var(--black); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.seg__btn:first-child { margin-left: 0; }
.seg__btn:hover { color: var(--moss); }
.seg__btn.is-on { background: var(--forest); color: var(--lemongrass); border-color: var(--forest); position: relative; z-index: 1; }
.sel { width: 100%; padding: 0.625rem 2rem 0.625rem 0.75rem; border: 1px solid rgba(9, 15, 5, 0.15); background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'><path d='M2.0326 15.6442L5.93597e-07 13.5799L9.02336e-08 2.0643L2.0326 -8.88478e-08L21.48 7.27606L21.48 8.36816L2.0326 15.6442Z' fill='%23090f05'/></svg>") no-repeat right 0.75rem center / 7px 5px; color: var(--black); appearance: none; -webkit-appearance: none; }
.sel:focus-visible { outline: 2px solid var(--moss); }
.numin { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.numin input { width: 8rem; padding: 0.5rem 0.625rem; border: 1px solid rgba(9, 15, 5, 0.15); background: var(--white); color: var(--black); }
.tog { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--sage-3); cursor: pointer; }
.tog__sw { position: relative; width: 36px; height: 18px; border: 1px solid rgba(9, 15, 5, 0.25); background: var(--white); flex-shrink: 0; transition: background-color var(--dur), border-color var(--dur); }
.tog__sw i { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; background: var(--sage-4); transition: transform var(--dur) var(--ease), background-color var(--dur); }
.tog__sw.is-on { background: var(--forest); border-color: var(--forest); }
.tog__sw.is-on i { transform: translateX(18px); background: var(--lemongrass); }

.stack { display: flex; height: 2.75rem; width: 100%; overflow: hidden; background: var(--sage-1); }
.stack__seg { display: block; height: 100%; transition: width 0.4s var(--ease); }
.stack__seg--forest, .sw--forest { background: var(--forest); }
.stack__seg--moss, .sw--moss { background: var(--moss); }
.stack__seg--lemon, .sw--lemon { background: var(--lemongrass); }
.stack__seg--sage, .sw--sage { background: var(--sage-4); }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.875rem 0 1.25rem; }
.legend b { font-weight: 500; color: var(--black); margin-left: 0.25rem; }
.sw { display: inline-block; width: 10px; height: 10px; margin-right: 0.5rem; vertical-align: middle; }
.ctable { width: 100%; border-collapse: collapse; }
.ctable th { text-align: right; font-weight: 500; padding: 0.5rem 0; border-bottom: 1px solid rgba(9, 15, 5, 0.12); }
.ctable th:first-child, .ctable td:first-child { text-align: left; }
.ctable td { padding: 0.75rem 0; border-bottom: 1px solid rgba(9, 15, 5, 0.08); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctable td:first-child { white-space: normal; }
.ctable tr.is-total td { font-weight: 500; color: var(--black); border-bottom: 1px solid rgba(9, 15, 5, 0.2); }
.ctable tbody tr:last-child td { border-bottom: 0; }
.sens { display: grid; gap: 1rem; }
.sens__row { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: baseline; }
.sens__val { color: var(--black); }
.sens__bar { grid-column: 1 / -1; height: 6px; background: var(--sage-1); overflow: hidden; }
.sens__bar i { display: block; height: 100%; background: var(--lemongrass); transition: width 0.5s var(--ease-out); }
.sens__row:first-child .sens__bar i { background: var(--moss); }
.tiles { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid rgba(9, 15, 5, 0.12); }
.tile__v { color: var(--black); }

/* customer slider → fleet slides: mono label instead of a logo */
.qcard__tag { display: inline-block; text-align: right; opacity: 0.8; }

/* footer ornaments (wing marks, replacing the coins) */
.coin svg { width: 100%; height: auto; color: var(--lemongrass); opacity: 0.9; }
.footer .coin { pointer-events: none; }
.mails { display: flex; flex-direction: column; gap: 0.5rem; }

/* menu icon squares reuse the eyebrow tile */
.menu__icon.ico { width: 2rem; height: 2rem; }
.footer .tlink.text-lemongrass { color: var(--lemongrass); }

/* stacked figures with text beside them */
.two-col--stack { align-items: stretch; }
.two-col--stack .two-col__text { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
@media (min-width: 768px) { .two-col--stack .two-col__text { width: 50%; max-width: 28rem; } }
.two-col__asset--stack { display: flex; flex-direction: column; gap: 1.5rem; }
.two-col--stack .accent { margin-top: 2.5rem; }

/* hero: Nvidia mark laid over the Rive card's logo tile */
.hero__mark { position: absolute; left: 64.55%; top: 28.4%; width: 4.55%; aspect-ratio: 1; background: #76b900; border-radius: 15%; display: flex; align-items: center; justify-content: center; opacity: 0; animation: heromark 0.5s var(--ease) 2.4s forwards; }
.hero__mark svg { width: 82%; height: auto; display: block; }
@keyframes heromark { to { opacity: 1; } }