/* =========================================================
   Wisemelon — homepage hero
   Built from Figma "Weisemelon redesign" node 578:4131.
   Reference frame: 1728px wide, 1470px content box between
   the two hairline rules.  All desktop metrics below are the
   design's px values, scaled proportionally by --k.
   ========================================================= */

:root {
  --ink:        #242424;
  --lime:       #c7f368;
  --lime-soft:  #f9ffd9;
  --lime-ico:   #a5cd4e;
  --muted:      #767676;
  --nav-link:   #636363;
  --rule:       #eaeaea;
  --grid-line:  #f4f4f4;
  --divider:    #d3d3d3;
  --paper:      #ffffff;
  --prose:      #4d4d4d;    /* long-form body copy on the legal pages */

  --font-head: "Geist", "Geist Fallback", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;

  /* The design frame is 1728 wide: a 1470 content box between the hairline
     rules, with an intentional 129px white gutter on each side.
     The gutter tracks the viewport (129/1728 = 7.465%) but never grows past
     130px, so on a large screen the composition scales up to fill the width
     instead of stranding a fixed-width frame in the middle. */
  --content: 1470px;
  --gutter: min(130px, calc(100vw * 0.0746527));
  /* one design pixel. A LENGTH, so sizes read calc(<design px> * var(--u)).
     Exactly 1px at a 1728 viewport; smaller below, larger above. */
  --u: calc((100vw - 2 * var(--gutter)) / 1470);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;                 /* full-bleed rules must never add scroll */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* legacy Edge */
}
html::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.02em;          /* measured from the Figma export */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
ul  { list-style: none; margin: 0; padding: 0; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* ---------- the framed page ---------- */
.frame {
  /* 1470 content + the two 1px rules; the 129px gutters are the auto margins */
  width: calc(1470 * var(--u) + 2px);
  max-width: 100%;
  margin: 0 auto;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

/* =========================================================
   NAV
   ========================================================= */
.navshell {
  position: relative;
  z-index: 30;
  height: calc(129 * var(--u));
  border-bottom: 1px solid var(--rule);
}

.navcard {
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 16px;
  transition: box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

/* when a mega-menu is open the bar lifts into a floating card */
.navshell.is-open .navcard {
  top: calc(14 * var(--u));
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  bottom: auto;
  background: var(--paper);
  border-color: var(--rule);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .07);
}

.nav {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 calc(33 * var(--u)) 0 calc(43 * var(--u));
}
.navshell.is-open .nav {
  height: calc(100 * var(--u));
  padding-left: calc(27 * var(--u));
  padding-right: calc(17 * var(--u));
  border-bottom: 1px solid var(--divider);
}

.brand img {
  height: calc(50 * var(--u));
  width: auto;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: calc(33 * var(--u));
  margin-left: calc(26 * var(--u));
  /* CSS centres the line box; the design centres the cap height */
  transform: translateY(calc(2.2 * var(--u)));
}

.navlink {
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: 0;
  font-family: var(--font-body);
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--nav-link);
  cursor: pointer;
  transition: color .15s ease;
}
.navlink:hover,
.navlink[aria-expanded="true"] { color: var(--ink); }

.chev {
  width: calc(12 * var(--u));
  height: calc(7 * var(--u));
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.navlink[aria-expanded="true"] .chev { transform: rotate(180deg); }

.navactions {
  display: flex;
  align-items: center;
  gap: calc(19 * var(--u));
  margin-left: auto;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  height: calc(54 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-radius: calc(12 * var(--u));
  font-family: var(--font-body);
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--dark { background: var(--ink);  color: var(--lime); }
.btn--dark:hover { box-shadow: 0 8px 20px rgba(36, 36, 36, .22); }

.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { box-shadow: 0 8px 22px rgba(199, 243, 104, .55); }

.btn--lg {
  height: calc(65 * var(--u));
  padding: 0 calc(26 * var(--u));
  gap: calc(16 * var(--u));
  font-size: calc(24 * var(--u));
}

.ico {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn--lg .ico { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.ico .sparkle { fill: currentColor; stroke: none; }

/* ---------- mega menu ---------- */
.mega {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  padding: calc(21 * var(--u)) 0 calc(20.6 * var(--u));
}
.mega[hidden] { display: none; }

.mega__col {
  padding: 0 calc(40 * var(--u));
  border-left: 1px solid var(--divider);
}
.mega__col:first-child { border-left: 0; }

.mega__title {
  position: relative;
  margin: 0 0 calc(20 * var(--u));
  padding-bottom: calc(15 * var(--u) + 3px);
  font-family: var(--font-head);
  font-size: calc(24 * var(--u));
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
/* The column being pointed at is underlined in brand green. The rule is drawn
   rather than switched on: it sweeps out from the left on the way in, and the
   left end runs off to the right on the way out, so the motion reads as one
   direction of travel both times. */
.mega__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
.mega__col:hover .mega__title::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* The group title is a button so it can collapse on touch. On desktop it is
   pure text: no chrome, no chevron. */
.mega__toggle {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: default;
}
.mega__chev,
.mega__back,
.navgo { display: none; }

.mega__list { display: grid; }

/* An item rests in grey and resolves to black with an arrow on hover, so the
   one being pointed at is the only thing reading at full strength. */
.mega__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  padding: calc(11 * var(--u)) 0;
}
.mi__text { min-width: 0; }
.mi__name {
  display: block;
  font-size: calc(19 * var(--u));
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #8e8e8e;
  transition: color .16s ease;
}
.mi__desc {
  display: block;
  margin-top: calc(4 * var(--u));
  font-size: calc(13.5 * var(--u));
  line-height: calc(18 * var(--u));
  letter-spacing: -0.01em;
  color: #a3a3a3;
  transition: color .16s ease;
}
.mega__item .arr {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  margin-top: calc(5 * var(--u));
  opacity: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink);
  transform: translateX(calc(-6 * var(--u)));
  transition: opacity .16s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}
.mega__item:hover .mi__name { color: var(--ink); }
.mega__item:hover .mi__desc { color: var(--muted); }
.mega__item:hover .arr { opacity: 1; transform: none; }
.mega__item:focus-visible { outline: 2px solid var(--lime-ico); outline-offset: calc(4 * var(--u)); border-radius: calc(6 * var(--u)); }
.mega__item:focus-visible .mi__name { color: var(--ink); }
.mega__item:focus-visible .arr { opacity: 1; transform: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: calc(799 * var(--u));
  border-bottom: 1px solid var(--rule);
  overflow: hidden;                  /* the helix bleeds past the top, bottom and frame edge */
}

/* 11 × 6 hairline grid */
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: calc(100% / 11) calc(100% / 6);
  background-position: -1px -1px;
}

.hero__copy {
  position: relative;
  z-index: 1;
  padding-left: calc(100% / 11);
  padding-top: calc(154.4 * var(--u));
}

.hero__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: calc(64 * var(--u));
  line-height: calc(77 * var(--u));
  font-weight: 500;
  letter-spacing: -0.03em;           /* brand: headings tracking -3% */
  color: var(--ink);
}

.hero__sub {
  margin: calc(15.1 * var(--u)) 0 0;
  font-size: calc(32 * var(--u));
  line-height: calc(45 * var(--u));
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.hero__copy .btn--lg { margin-top: calc(47.5 * var(--u)); }

.apps { margin-top: calc(124.9 * var(--u)); }

.apps__label {
  margin: 0;
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.apps__row {
  display: flex;
  gap: calc(14 * var(--u));
  margin-top: calc(17 * var(--u));
}
.apps__row img {
  height: calc(45 * var(--u));
  width: auto;
}
.apps__row a { transition: transform .15s ease; }
.apps__row a:hover { transform: translateY(-2px); }

/* illustration */
/* ---- visual: a rotated helix with four frosted cards over it ----
   Placement fitted to the design export: 821 design px square, turned 12.5deg,
   centred at (1154, 402) within the hero. */
.hero__visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__dna {
  position: absolute;
  left: calc(743.5 * var(--u));
  top: calc(-8.5 * var(--u));
  width: calc(821 * var(--u));
  height: calc(821 * var(--u));
  max-width: none;
  rotate: 12.5deg;
  animation: dnaFloat 9s ease-in-out infinite;
  will-change: translate;
}
@keyframes dnaFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-10 * var(--u)); }
}

.hero__cards {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hcard {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(88 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(33 * var(--u));
  padding-left: calc(35 * var(--u));
  border: 1px solid #eaeaea;
  border-radius: 999px;
  background: rgba(255, 255, 255, .56);
  -webkit-backdrop-filter: blur(calc(12 * var(--u)));
  backdrop-filter: blur(calc(12 * var(--u)));
}
.hcard__ico {
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  fill: none;
  stroke: #000;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hcard__text { display: flex; flex-direction: column; min-width: 0; }
.hcard__title {
  font-family: var(--font-head);
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  font-weight: 500;
  letter-spacing: 0;
  color: #000;
}
.hcard__desc {
  margin-top: calc(5 * var(--u));
  font-family: var(--font-body);
  font-size: calc(10.5 * var(--u));
  line-height: calc(13 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
  color: #5a5a5a;
}

/* =========================================================
   CLIENT MARQUEE
   ========================================================= */
.clients {
  height: calc(175 * var(--u));
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  /* logos fade in on the left and out on the right */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 calc(90 * var(--u)), #000 calc(100% - 90 * var(--u)), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 calc(90 * var(--u)), #000 calc(100% - 90 * var(--u)), transparent 100%);
}

.clients__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.clients:hover .clients__track { animation-play-state: paused; }

.clients__row {
  display: flex;
  align-items: center;
  gap: calc(96 * var(--u));
  padding-right: calc(96 * var(--u));
}

.clients__row img {
  height: calc(var(--h, 52) * var(--u));
  width: auto;
  /* the track is max-content sized; a percentage max-width collapses these
     intrinsically-sized SVGs to zero width in Chromium */
  max-width: none;
  flex: none;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* =========================================================
   THE MODERN ENGINE  (markup + internals come from engine.css)
   Only the outer placement is adjusted so the section sits on the
   same gutters and vertical rhythm as the rest of the page.
   ========================================================= */
/* closing hairline, the same treatment the marquee uses above it */
.ps { border-bottom: 1px solid var(--rule); }
.ps-wrap { max-width: none; }

/* These sizes were measured at a 1728 viewport, where one design px is one
   CSS px and each card's stage carries a known scale. Below the section's own
   980px breakpoint the engine gives every card a different scale, so a fixed
   px size set here lands at the wrong size and overflows — which is what
   clipped "Build the Workspace" and "Complete the Experience" on a phone.
   Above 980 the measurements hold; below it, the engine's own type stands. */
@media (min-width: 981px) {
  /* Bento card type: every heading lands at 32 design px, every subheading at 20.
     Each card is a design-space stage the engine scales to fit its column, so a
     size set here is multiplied by that card's own scale before it reaches the
     screen. These are the stage sizes that produce 32 / 20, measured at a 1728
     viewport where one design px is one CSS px:
       Experience and Workspace stages   x0.904   32 -> 35.4,  20 -> 22.1
       Automation stage                  x1.850   32 -> 17.3
       Communication stage               x0.923   32 -> 34.7
     If a card's stage width changes, these need re-measuring. */
  .ps .xp-title      { font-size: 35.4px; }
  .ps .xp-sub        { font-size: 22.1px; }
  .ps .ws-top h3     { font-size: 35.4px; }
  .ps .ws-top p      { font-size: 22.1px; }
  .ps .af-headline   { font-size: 17.3px; }
  .ps .cl-heading    { font-size: 34.7px; }

  /* headings and subheadings are both semibold */
  .ps .xp-title,
  .ps .xp-sub,
  .ps .ws-top h3,
  .ps .ws-top p,
  .ps .af-headline,
  .ps .cl-heading { font-weight: 600; }

  /* The Experience card's title block was a fixed 62px, sized for the engine's
     original 24/16 regular type. At 32/20 semibold that text overflowed it and
     ran into the card stack. The subheading now uses the block's full width
     (the engine capped it at 320 of 365), which keeps all three rotating
     subheadings on two lines, and the block is tall enough that the stack keeps
     the original 17px of clearance even when its back cards lift into view.
     Measured: gap 17px in every state, front card 11px inside the card bottom. */
  .ps .xp-sub    { max-width: none; }
  .ps .xp-titles { height: 95px; }

  /* the automation card's subheading sits inside its headline so the two fade
     together; in em it stays at 20/32 of the heading at any scale */
  .ps .af-hsub {
    display: block;
    margin-top: 0.4em;
    font-size: 0.625em;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: #6d6d6d;
  }          /* the frame already sets the width */
}

/* only above the section's own 980px breakpoint — below it, its rules stand */
@media (min-width: 981px) {
  .ps {
    padding: calc(103 * var(--u)) calc(67 * var(--u)) calc(96 * var(--u));
  }
  .ps-head { padding-left: calc(16 * var(--u)); }
}

/* =========================================================
   SECTION 2 — AI-FIRST / INDUSTRIES
   Measured from "section 2.png" (same 1728 frame as the hero).
   Container: 1336 wide, inset 67 from each hairline rule.
   ========================================================= */
.scale {
  padding: calc(87 * var(--u)) calc(67 * var(--u)) calc(145 * var(--u));
}

.scale__intro { padding-left: calc(16 * var(--u)); }

.scale__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: calc(64 * var(--u));
  line-height: calc(77 * var(--u));
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #000;
}

.scale__sub {
  margin: calc(10 * var(--u)) 0 0;
  font-size: calc(25 * var(--u));
  line-height: calc(33 * var(--u));
  letter-spacing: -0.01em;
  color: #7d808f;
}

/* ---------- featured card chrome ---------- */
.feature {
  position: relative;
  overflow: hidden;
  border-radius: calc(12 * var(--u));
  isolation: isolate;
}

.feature__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* crop position solved against "section 2.png" */
.feature__bg { object-position: 50% 27%; }

.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* the quiet second CTA, for use on the dark photo card.
   Doubled class: .btn--cta below sets colour and would otherwise win on order. */
.btn.btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.btn.btn--ghost:hover {
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px #fff;
}

/* small CTA used inside the cards */
.btn--cta {
  height: calc(54 * var(--u));
  padding: 0 calc(30 * var(--u));
  gap: calc(10 * var(--u));
  font-size: calc(18 * var(--u));
  color: #000;
}
.cta-arr {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- featured healthcare card ---------- */
.feature {
  height: calc(637 * var(--u));
  margin-top: calc(60 * var(--u));
}
.feature::after {
  background: linear-gradient(90deg,
    rgba(8, 11, 11, .94) 0%,
    rgba(8, 11, 11, .90) 22%,
    rgba(8, 11, 11, .62) 42%,
    rgba(8, 11, 11, .22) 60%,
    rgba(8, 11, 11, 0)  76%);
}

.feature__body { padding: calc(64.6 * var(--u)) calc(66 * var(--u)); }

.feature__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: calc(48 * var(--u));
  line-height: calc(57 * var(--u));
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #fff;
}
.feature__accent { color: var(--lime); }

.feature__stages {
  width: calc(505 * var(--u));
  height: auto;
  margin-top: calc(51.4 * var(--u));
}

.feature__ctas {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin-top: calc(52 * var(--u));
}

/* =========================================================
   INTERACTIVE VIDEO — EXECUTION LAYER
   Measured from "interactive video section.png". Two self-contained
   HTML animations stacked in one rounded panel; each loops on its own
   and is only loaded once the section scrolls into view.
   ========================================================= */
.reel {
  position: relative;
  padding: calc(121 * var(--u)) calc(67 * var(--u)) calc(50 * var(--u));
  /* same 145 of air below the band as above it */
  margin-bottom: calc(145 * var(--u));
  color: #fff;
}
.reel::before {                       /* full-bleed dark ground */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  /* the same black the two animations paint, so the panel has no seam */
  background: #000;
}
.reel__head,
.reel__stage { position: relative; }

.reel__head { padding-left: calc(15 * var(--u)); }

.reel__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: calc(56 * var(--u));
  line-height: calc(77 * var(--u));
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #fff;
}
.reel__sub {
  margin: calc(14.6 * var(--u)) 0 0;
  font-size: calc(23.8 * var(--u));
  line-height: calc(33 * var(--u));
  letter-spacing: -0.01em;
  color: #8f8f8f;
}

/* ---------- the two animations ---------- */
.reel__stage {
  margin-top: calc(96 * var(--u));
  /* edge to edge: break out of the frame and its gutters */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  background: #000;
  /* the frames paint their own black, so the seam between them is invisible */
  font-size: 0;
}
/* Each animation is a fixed-size stage (2200x1240 and 1728x1331) that scales
   itself with window.innerWidth/innerHeight inside a position:fixed box. On
   iOS Safari that is unreliable — an iframe there is sized by its content and
   fixed positioning inside one does not behave — so the animations came up
   blank on iPhone.

   So the iframe is given its authored pixel size and the ELEMENT is scaled
   from out here. Inside, innerWidth/innerHeight now equal the design size,
   the stage's own fit() resolves to 1, and nothing depends on how the browser
   reports an iframe viewport. The wrapper holds the aspect with a padding
   percentage rather than aspect-ratio, which older Safari does not apply to
   replaced elements. */
.reel__embed {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.reel__embed--flow    { padding-top: 56.3636%; }   /* 1240 / 2200 */
.reel__embed--context { padding-top: 77.0255%; }   /* 1331 / 1728 */
.reel__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   SECTION 3 — PROOF / STATS
   Measured from "section 3.png" (same 1728 frame).
   Full-bleed hairlines top and bottom; a 4-card bento grid.
   ========================================================= */
.stats {
  position: relative;
  padding: 0 calc(67 * var(--u));
  /* no rules of its own: the 145 above comes from the video band's
     margin-bottom and the 145 below carries into the insights band */
  margin-top: 0;
  margin-bottom: calc(145 * var(--u));
}
.stats__grid {
  display: grid;
  /* columns and gutters as fr so the whole bento scales as one unit */
  grid-template-columns: 754fr 29fr 265.5fr 25fr 265.5fr;
  grid-template-rows: calc(266 * var(--u)) calc(28 * var(--u)) calc(296 * var(--u));
}

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: calc(12 * var(--u));
  overflow: hidden;
}

.card--growth    { grid-column: 1; grid-row: 1 / 4; display: flex; flex-direction: column; }
.card--retention { grid-column: 3; grid-row: 1; }
.card--badge     { grid-column: 5; grid-row: 1; }
.card--revenue   { grid-column: 3 / 6; grid-row: 3; position: relative; }

/* ---------- growth card ---------- */
.growth__head {
  display: flex;
  align-items: flex-start;
  padding: calc(36.6 * var(--u)) calc(37 * var(--u)) calc(30 * var(--u));
  border-bottom: 1px solid var(--rule);
}
.growth__figure { flex: none; width: calc(291 * var(--u)); }

.growth__label {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: var(--ink);
}
.growth__value {
  margin: calc(8 * var(--u)) 0 0;
  font-family: var(--font-head);
  font-size: calc(41 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.growth__note {
  margin: calc(10 * var(--u)) 0 0;
  font-size: calc(18.7 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: -0.01em;
  color: #7d808f;
}

.growth__chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 calc(37 * var(--u)) calc(39.7 * var(--u));
}

/* dot matrix: 248 dots, 10px on an 18 x 18.333 pitch — positions taken
   straight from the reference export, so it is an exact reproduction */
.dm {
  display: block;
  width: calc(676 * var(--u));
  height: calc(322 * var(--u));
}

.dm__labels { display: flex; margin-top: calc(23.8 * var(--u)); }
.dm__label {
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: #000;
}
.dm__label--muted { color: #7d808f; width: calc(347 * var(--u)); }

/* ---------- retention card ---------- */
.card--retention { position: relative; padding: calc(25.3 * var(--u)) calc(26.5 * var(--u)); }
.retention__value {
  margin: 0;
  font-family: var(--font-head);
  font-size: calc(36 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.retention__note {
  margin: calc(3.3 * var(--u)) 0 0;
  font-size: calc(14.6 * var(--u));
  line-height: calc(18 * var(--u));
  letter-spacing: -0.01em;
  color: #7d808f;
}
.bars {
  position: absolute;
  left: calc(32.5 * var(--u));
  bottom: calc(13 * var(--u));
  display: flex;
  align-items: flex-end;
  gap: calc(15 * var(--u));
}
.bars__b {
  display: block;
  width: calc(38 * var(--u));
  height: var(--h);
  background:
    linear-gradient(#bdbdbd 0 calc(4 * var(--u)), transparent 0),
    linear-gradient(#ececec, #ffffff);
}
.bars__b--lime {
  background:
    linear-gradient(var(--lime) 0 calc(4 * var(--u)), transparent 0),
    linear-gradient(#f4fde2, #ffffff);
}

/* ---------- platform badge card ---------- */
.card--badge { position: relative; padding: calc(23.3 * var(--u)) calc(26.5 * var(--u)); }
.badge__title {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: calc(176 * var(--u));
  font-size: calc(14.6 * var(--u));
  line-height: calc(18 * var(--u));
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.badge__muted { color: #7d808f; font-weight: 400; }

.badge__halo {
  position: absolute;
  left: 50%;
  top: calc(214 * var(--u));
  width: calc(230 * var(--u));
  height: calc(230 * var(--u));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle closest-side,
    var(--lime) 0 57.4%,
    #e7fabf   57.4% 73.0%,
    #f2fcdc   73.0% 86.1%,
    #f9fef0   86.1% 100%);
}
.badge__halo img { width: calc(109 * var(--u)); height: auto; }

/* ---------- revenue card ---------- */
.card--revenue { padding: calc(21.2 * var(--u)) calc(28.5 * var(--u)); }
.revenue__title {
  margin: 0;
  font-size: calc(16.5 * var(--u));
  line-height: calc(21 * var(--u));
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.legend {
  display: grid;
  gap: calc(10 * var(--u));
  margin: calc(19 * var(--u)) 0 0;
  font-size: calc(10 * var(--u));
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #7d808f;
}
.legend li { display: flex; align-items: center; gap: calc(9 * var(--u)); }
.legend__dot {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #e2e2e2;
}
.legend__dot--lime { background: var(--lime); }

.revenue__chart {
  position: absolute;
  left: calc(29.5 * var(--u));
  top: calc(83 * var(--u));
  /* explicit width: the SVG has an intrinsic ratio, so left+right alone
     would let it size itself from the height and overflow the card */
  width: calc(506 * var(--u));
  height: calc(150 * var(--u));
}
.revenue__months {
  position: absolute;
  left: calc(30 * var(--u));
  right: calc(24 * var(--u));
  bottom: calc(28.8 * var(--u));
  display: flex;
  justify-content: space-between;
  font-size: calc(12 * var(--u));
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #7d808f;
}

/* =========================================================
   ANALYTICS — reveal
   .stats--anim is set by the script, so with JS off (or reduced motion)
   nothing is ever hidden; .is-live plays the reveal once, on entry.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* dot matrix: pops in column by column, left to right */
  .stats--anim .dm circle {
    opacity: 0;
    transform: scale(.3);
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }
  .stats--anim.is-live .dm circle {
    animation: dmPop .44s cubic-bezier(.2, .9, .3, 1.5) both;
    animation-delay: var(--d, 0s);
  }
  @keyframes dmPop { to { opacity: 1; transform: scale(1); } }

  /* bars grow off the baseline */
  .stats--anim .bars__b { height: 0; }
  .stats--anim.is-live .bars__b {
    height: var(--h);
    transition: height .95s cubic-bezier(.2, .85, .25, 1) var(--d, 0s);
  }

  /* halo blooms out of the centre */
  .stats--anim .badge__halo {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.62);
  }
  .stats--anim.is-live .badge__halo {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity .7s ease .1s, transform 1s cubic-bezier(.2, .9, .3, 1.25) .1s;
  }

  /* revenue chart: lines draw, fills follow, markers land last */
  .stats--anim .revenue__chart path[stroke] {
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
  }
  .stats--anim.is-live .revenue__chart path[stroke] {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.5s cubic-bezier(.35, .75, .3, 1) .15s;
  }
  .stats--anim .revenue__chart path[fill^="url"] { opacity: 0; }
  .stats--anim.is-live .revenue__chart path[fill^="url"] {
    opacity: 1;
    transition: opacity .9s ease .45s;
  }
  .stats--anim .revenue__chart g circle { opacity: 0; }
  .stats--anim.is-live .revenue__chart g circle {
    opacity: 1;
    transition: opacity .35s ease var(--d, 0s);
  }
}

/* =========================================================
   SECTION 4 — INSIGHTS
   Measured from "section 4.png". A full-bleed dark band; the card
   rail scrolls horizontally and is clipped by the frame edge.
   ========================================================= */
.insights {
  position: relative;
  padding: calc(122.2 * var(--u)) 0 calc(161.1 * var(--u));
  color: #fff;
}
/* dark ground, painted past the frame edges to the viewport */
.insights::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--ink);
}
/* the frame's hairlines read lighter over the dark ground */
.insights::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  right: -1px;
  pointer-events: none;
  background:
    linear-gradient(#464646, #464646) left  / 1px 100% no-repeat,
    linear-gradient(#464646, #464646) right / 1px 100% no-repeat;
}
.insights__head,
.insights__rail { position: relative; }

.insights__head { position: relative; padding: 0 calc(74 * var(--u)); }

.insights__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: calc(64 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #fff;
}
.insights__meta { margin-top: calc(26 * var(--u)); }

/* "View all" sits out of flow so it cannot alter the header rhythm;
   its baseline lines up with the subtext, flush with the container edge */
.insights__all {
  position: absolute;
  right: calc(74 * var(--u));
  bottom: calc(1 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
.insights__all span {
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--u));
  text-decoration-thickness: 1px;
}
.insights__arrow {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.insights__all:hover .insights__arrow { transform: translateX(calc(3 * var(--u))); }

.insights__sub {
  margin: 0;
  font-size: calc(25 * var(--u));
  line-height: 1;
  letter-spacing: -0.01em;
  color: #8f8f8f;
}

/* ---------- rail ---------- */
.insights__rail {
  display: flex;
  gap: calc(16 * var(--u));
  margin-top: calc(47.8 * var(--u));
  padding: 0 calc(74 * var(--u));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.insights__rail::-webkit-scrollbar { display: none; }

.icard {
  position: relative;
  flex: 0 0 calc(358 * var(--u));
  height: calc(454 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));
  background: #2e2e2e;
  border-radius: calc(12 * var(--u));
}

.icard__img {
  width: 100%;
  height: calc(206 * var(--u));
  object-fit: cover;
  border-radius: calc(6 * var(--u));
}

.icard__tag {
  margin: calc(18.1 * var(--u)) calc(8 * var(--u)) 0;
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}

.icard__title {
  margin: calc(16 * var(--u)) calc(8 * var(--u)) 0;
  font-family: var(--font-head);
  font-size: calc(24 * var(--u));
  line-height: calc(28 * var(--u));
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}

.icard__desc {
  margin: calc(6.7 * var(--u)) calc(8 * var(--u)) 0;
  font-size: calc(14.6 * var(--u));
  line-height: calc(19 * var(--u));
  letter-spacing: -0.01em;
  color: #7f7f7f;
}

.icard__btn {
  position: absolute;
  left: calc(20 * var(--u));
  bottom: calc(20 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(13 * var(--u));
  gap: calc(6 * var(--u));
  border-radius: calc(8 * var(--u));
  font-size: calc(13.5 * var(--u));
  color: #000;
}
.icard__btn .cta-arr { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }

/* =========================================================
   SECTION 5 — TESTIMONIALS
   Measured from "section 5.png". Two columns: intro on the left,
   a one-at-a-time quote carousel on the right.
   ========================================================= */
.voices {
  display: grid;
  grid-template-columns: 1fr calc(640 * var(--u));
  column-gap: calc(85 * var(--u));
  padding: calc(127.1 * var(--u)) calc(73 * var(--u)) calc(130.7 * var(--u)) calc(68 * var(--u));
}

/* ---------- intro ---------- */
.voices__title {
  margin: calc(4.7 * var(--u)) 0 0;
  font-family: var(--font-head);
  font-size: calc(48 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #000;
}
.voices__sub {
  margin: calc(20.1 * var(--u)) 0 0;
  font-size: calc(19 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: -0.01em;
  color: #7d808f;
}
.voices__all {
  margin-top: calc(42.9 * var(--u));
  height: calc(54 * var(--u));
  padding: 0 calc(34 * var(--u));
  gap: calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  font-size: calc(19 * var(--u));
  color: #000;
}
.voices__all .cta-arr { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* ---------- quote stage ---------- */
.voices__stage { position: relative; }

.voice { margin: 0; }
.voice[hidden] { display: none; }

.voice__quote {
  margin: 0;
  /* fixed so the rule and the attribution stay put as quotes change */
  min-height: calc(246 * var(--u));
  font-family: var(--font-head);
  font-size: calc(30 * var(--u));
  line-height: calc(41 * var(--u));
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #000;
}

.voice__foot {
  margin-top: calc(46.5 * var(--u));
  padding-top: calc(56.8 * var(--u));
  border-top: 1px solid #dedede;
}
.voice__name {
  margin: 0;
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #000;
}
.voice__role {
  margin: calc(12.9 * var(--u)) 0 0;
  font-size: calc(18 * var(--u));
  line-height: 1;
  letter-spacing: -0.01em;
  color: #7d808f;
}

/* ---------- prev / next ---------- */
.voices__nav {
  position: absolute;
  right: 0;
  bottom: calc(-1.3 * var(--u));
  display: flex;
  gap: calc(16 * var(--u));
}
.vbtn {
  display: grid;
  place-items: center;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  border: 1px solid #e8e8e8;
  border-radius: calc(12 * var(--u));
  background: var(--paper);
  color: #7e7e7e;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vbtn svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vbtn--next {
  border-color: var(--lime);
  background: #f8fdeb;
  color: #1e1e1e;
}
.vbtn:hover { border-color: var(--lime); background: #f8fdeb; color: #1e1e1e; }
.vbtn:disabled { opacity: .45; cursor: default; }

/* =========================================================
   FOOTER
   Measured from "footer.png": a white certification strip, then a
   full-bleed dark block whose column rules sit on the frame grid.
   ========================================================= */
.site-foot { position: relative; }
.site-foot::before {                  /* rule that closes the section above */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: 1px;
  background: var(--rule);
}

/* ---------- certification strip ---------- */
.certs {
  position: relative;
  height: calc(175 * var(--u));
}
/* each badge is placed by its own ink position — the SVGs carry very
   different amounts of internal padding, so even spacing does not line up */
.certs img {
  position: absolute;
  top: 50%;
  left: calc(var(--x) * var(--u));
  transform: translateY(-50%);
  height: calc(var(--h) * var(--u));
  width: auto;
  max-width: none;
}

/* ---------- dark block ---------- */
.foot {
  position: relative;
  padding: 0 calc(79 * var(--u));
  color: #dcdcdc;
}
.foot::before {                       /* full-bleed ground */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--ink);
  z-index: -1;
}
.foot::after {                        /* frame hairlines, lighter over the dark */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;                         /* sit exactly on the frame's borders */
  right: -1px;
  pointer-events: none;
  background:
    linear-gradient(#464646, #464646) left  / 1px 100% no-repeat,
    linear-gradient(#464646, #464646) right / 1px 100% no-repeat;
}

/* ---------- community ---------- */
.foot__community {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: calc(334 * var(--u));
  padding-top: calc(90.8 * var(--u));
  border-bottom: 1px solid #464646;
  /* the rule spans the frame, not the padded container */
  margin: 0 calc(-79 * var(--u));
  padding-left: calc(79 * var(--u));
  padding-right: calc(79 * var(--u));
}
.foot__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: calc(48 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #dcdcdc;
}
.foot__sub {
  margin: calc(21.2 * var(--u)) 0 0;
  font-size: calc(22.7 * var(--u));
  line-height: calc(29 * var(--u));
  letter-spacing: -0.01em;
  color: #767676;
}

.foot__social {
  display: flex;
  gap: calc(28 * var(--u));
  margin-top: calc(8.5 * var(--u));
}
.soc {
  display: grid;
  place-items: center;
  width: calc(108 * var(--u));
  height: calc(108 * var(--u));
  border: 2px solid #464646;
  border-radius: calc(14 * var(--u));
  color: #dcdcdc;
  transition: border-color .15s ease, color .15s ease;
}
.soc svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.soc.is-active,
.soc:hover { border-color: var(--lime); color: var(--lime); }

/* ---------- link columns ---------- */
.foot__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(233 * var(--u));
  margin: 0 calc(-79 * var(--u));
  border-bottom: 1px solid #464646;
}
.fcol {
  padding: calc(26.9 * var(--u)) calc(61 * var(--u)) 0;
  border-left: 1px solid #464646;
}
.fcol:first-child { border-left: 0; }

.fcol__title {
  margin: 0 0 calc(19 * var(--u));
  font-family: var(--font-head);
  font-size: calc(24 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #dcdcdc;
}
.fcol__list { display: grid; gap: calc(14 * var(--u)); }
.fcol__list a {
  display: block;
  font-size: calc(17 * var(--u));
  line-height: 1;
  letter-spacing: -0.01em;
  color: #767676;
  transition: color .15s ease;
}
.fcol__list a:hover { color: #dcdcdc; }

/* ---------- bottom ---------- */
.foot__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: calc(333 * var(--u));
  padding-bottom: calc(72.6 * var(--u));
}
.foot__mark {
  margin: 0;
  font-family: var(--font-head);
  font-size: calc(102.9 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  background: linear-gradient(90deg, #a6a6a6 0%, #8a8a8a 34%, #5d5d5d 66%, #303030 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foot__copy {
  margin: calc(26 * var(--u)) 0 0;
  font-size: calc(23.4 * var(--u));
  line-height: 1;
  letter-spacing: -0.01em;
  color: #767676;
}

.foot__stores { display: flex; gap: calc(11 * var(--u)); margin-bottom: calc(-5.6 * var(--u)); }
.store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  width: calc(184 * var(--u));
  height: calc(45 * var(--u));
  border: 1px solid #969696;
  border-radius: calc(8 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  transition: border-color .15s ease;
}
.store:hover { border-color: #dcdcdc; }
.store__ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; }

/* =========================================================
   MOBILE NAV BITS
   ========================================================= */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  padding: 8px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   RESPONSIVE
   Scale the whole composition down with the viewport, then
   switch to a stacked layout on small screens.
   ========================================================= */
@media (max-width: 1179px) {
  :root { --u: 1px; }

  .frame { border: 0; }

  .navshell { height: 76px; }
  .navcard {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: auto;
    background: var(--paper);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav {
    flex-wrap: wrap;
    height: 76px;
    padding: 0 20px;
    border: 0;
  }
  .brand img { height: 34px; }
  .burger { display: flex; }

  .navlinks, .navactions { display: none; }

  /* ---------------------------------------------------------------
     Open menu: a full-height sheet with a fixed header, a scrolling
     body and the two calls to action pinned at the foot. Tapping a
     top-level item drills into its panel rather than expanding in
     place, so only one level is on screen at a time.
     --------------------------------------------------------------- */
  .navshell.is-nav-open { z-index: 60; }
  .navshell.is-nav-open .navcard {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 0;
    box-shadow: none;
    overflow: hidden;
  }
  .navshell.is-nav-open .nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    height: auto;
    padding: 0;
  }
  .navshell.is-nav-open .brand {
    order: 1;
    flex: none;
    display: flex;
    align-items: center;
    height: 76px;
    padding: 0 20px;
    border-bottom: 1px solid var(--rule);
  }
  .navshell.is-nav-open .burger { position: absolute; top: 26px; right: 20px; z-index: 2; }

  /* level one */
  .navshell.is-nav-open .navlinks {
    order: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 14px 20px 24px;
    overflow-y: auto;
    transform: none;
  }
  .navshell.is-nav-open .navlinks li { display: block; width: 100%; }
  .navshell.is-nav-open .navlink {
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    border: 0;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .navlink .chev { display: none; }
  .navgo {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .navshell.is-drilled .navlinks { display: none; }

  /* level two */
  .mega {
    order: 3;
    display: block;
    flex: 1;
    min-height: 0;
    padding: 14px 20px 24px;
    overflow-y: auto;
  }
  .mega__back {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 0 14px;
    border: 0;
    background: none;
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    cursor: pointer;
  }
  .mega__back svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mega__col { padding: 0; border-left: 0; }
  .mega__title { margin: 0; padding: 0; }
  .mega__title::after { display: none; }
  .mega__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    cursor: pointer;
  }
  .mega__chev {
    display: block;
    width: 13px;
    height: 8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #8e8e8e;
    transition: transform .25s ease;
  }
  .mega__col.is-open .mega__chev { transform: rotate(180deg); }

  .mega__list {
    display: none;
    padding: 4px 14px;
    border-radius: 12px;
    background: #f4f4f2;
  }
  .mega__col.is-open .mega__list { display: block; }

  .mega__item { padding: 11px 0; gap: 12px; }
  .mi__name { font-size: 15px; font-weight: 500; color: var(--muted); }
  .mi__desc { display: none; }
  .mega__item .arr {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    opacity: 1;
    transform: none;
    color: var(--muted);
  }

  /* pinned actions */
  .navshell.is-nav-open .navactions {
    order: 4;
    flex: none;
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: 0;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--rule);
  }
  .navshell.is-nav-open .navactions .btn { flex: 1; width: auto; height: 52px; font-size: 16px; }

  .hero {
    height: auto;
    padding: 40px 20px 48px;
  }
  .hero__grid { display: none; }
  .hero__copy { padding: 0; }

  .hero__title {
    margin-top: 20px;
    font-size: clamp(32px, 7.4vw, 52px);
    line-height: 1.16;
  }
  .hero__title br { display: none; }
  .hero__sub {
    margin-top: 16px;
    font-size: clamp(17px, 4.4vw, 22px);
    line-height: 1.45;
  }
  .hero__sub br { display: none; }
  .hero__copy .btn--lg {
    margin-top: 28px;
    height: 54px;
    font-size: 18px;
    padding: 0 22px;
  }
  .btn--lg .ico { width: 20px; height: 20px; }

  /* the visual follows the copy: helix behind, cards stacked with a stagger */
  .hero__visual {
    position: relative;
    inset: auto;
    margin: 36px -20px 0;
    padding: 34px 20px;
    overflow: hidden;              /* keep the helix out of the app-store row above */
  }
  .hero__dna {
    left: auto;
    right: -170px;
    top: -40px;
    width: 560px;
    height: 560px;
  }
  .hero__cards {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .hcard {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 66px;
    gap: 14px;
    padding: 12px 24px 12px 18px;
  }
  .hcard:nth-child(even) { margin-left: 26px; max-width: calc(100% - 26px); }
  .hcard__ico { width: 30px; height: 30px; }
  .hcard__title { font-size: 16px; line-height: 20px; }
  .hcard__desc { margin-top: 2px; font-size: 12.5px; line-height: 16px; }
  .hcard__desc br { display: none; }

  .apps { margin-top: 36px; }
  .apps__label { font-size: 15px; line-height: 1.4; }
  .apps__row { margin-top: 14px; gap: 12px; }
  .apps__row img { height: 42px; }

  /* ---- section 2 ---- */
  .scale { padding: 48px 20px 56px; }
  .scale__intro { padding-left: 0; }
  .scale__title {
    font-size: clamp(28px, 6.6vw, 44px);
    line-height: 1.16;
  }
  .scale__sub {
    margin-top: 14px;
    font-size: clamp(15px, 3.9vw, 19px);
    line-height: 1.5;
  }
  .scale__title br,
  .scale__sub br { display: none; }

  .btn--cta {
    height: 46px;
    padding: 0 20px;
    gap: 8px;
    font-size: 15px;
  }
  .cta-arr { width: 14px; height: 14px; }

  .feature {
    height: auto;
    min-height: 440px;
    margin-top: 28px;
  }
  .feature::after {
    background: linear-gradient(180deg,
      rgba(8, 11, 11, .90) 0%,
      rgba(8, 11, 11, .78) 55%,
      rgba(8, 11, 11, .70) 100%);
  }
  .feature__body { padding: 28px 24px 32px; }
  .feature__title { font-size: clamp(24px, 5.6vw, 34px); line-height: 1.2; }
  .feature__stages { width: 100%; max-width: 505px; margin-top: 26px; }
  .feature__ctas { margin-top: 28px; gap: 10px; flex-wrap: wrap; }

  /* ---- section 3 ---- */
  .stats {
    padding: 40px 20px 48px;
    margin: 0 0 56px;
  }
  .stats__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }
  .card--growth, .card--retention, .card--badge, .card--revenue {
    grid-column: 1;
    grid-row: auto;
  }

  .growth__head { display: block; padding: 24px 20px 22px; }
  .growth__figure { width: auto; }
  .growth__label { font-size: 12px; }
  .growth__value { margin-top: 6px; font-size: 34px; }
  .growth__note { margin-top: 12px; font-size: 15px; line-height: 22px; }
  .growth__chart { padding: 22px 20px 24px; }
  .dm { width: 100%; height: auto; }
  .dm__labels { margin-top: 16px; }
  .dm__label { font-size: 12px; }
  .dm__label--muted { width: 52%; }

  .card--retention { padding: 20px; min-height: 260px; }
  .retention__value { font-size: 30px; }
  .retention__note { font-size: 14px; line-height: 18px; }
  .bars { left: 20px; bottom: 20px; gap: 12px; }
  .bars__b { width: 32px; height: calc(var(--h) * 0.8); }

  .card--badge { padding: 20px; min-height: 260px; overflow: hidden; }
  .badge__title { font-size: 15px; line-height: 19px; max-width: 200px; }
  .badge__halo { width: 200px; height: 200px; top: auto; bottom: -40px; transform: translateX(-50%); }
  .badge__halo img { width: 92px; }

  .card--revenue { padding: 20px; height: 280px; }
  .revenue__title { font-size: 16px; line-height: 20px; }
  .legend { margin-top: 14px; }
  .revenue__chart { left: 20px; width: calc(100% - 36px); top: 108px; height: 118px; }
  .revenue__months { left: 20px; right: 18px; bottom: 18px; font-size: 10px; }

  /* ---- section 4 ---- */
  .insights { padding: 48px 0 52px; }
  .insights::after { display: none; }
  .insights__head { padding: 0 20px; }
  .insights__title { font-size: clamp(28px, 6.6vw, 44px); line-height: 1.14; }
  .insights__meta { margin-top: 12px; }
  .insights__sub {
    font-size: clamp(15px, 3.9vw, 19px);
    line-height: 1.45;
  }
  .insights__all {
    position: static;
    margin-top: 16px;
    font-size: 15px;
  }
  .insights__arrow { width: 14px; height: 14px; }
  .insights__rail {
    margin-top: 26px;
    padding: 0 20px;
    gap: 14px;
  }
  .icard {
    flex: 0 0 270px;
    height: 400px;
    padding: 10px 10px 18px;
    border-radius: 12px;
  }
  .icard__img { height: 158px; }
  .icard__tag { margin: 16px 6px 0; font-size: 11px; }
  .icard__title { margin: 14px 6px 0; font-size: 20px; line-height: 25px; }
  .icard__desc { margin: 8px 6px 0; font-size: 13.5px; line-height: 18px; }
  .icard__btn { left: 16px; bottom: 18px; height: 38px; font-size: 13px; }

  /* ---- section 5 ---- */
  .voices {
    grid-template-columns: 1fr;
    row-gap: 34px;
    padding: 52px 20px 56px;
  }
  .voices__title { font-size: clamp(28px, 6.6vw, 42px); line-height: 1.14; }
  .voices__sub {
    margin-top: 14px;
    font-size: clamp(15px, 3.9vw, 18px);
    line-height: 1.5;
  }
  .voices__sub br { display: none; }
  .voices__all {
    margin-top: 24px;
    height: 48px;
    padding: 0 24px;
    gap: 10px;
    font-size: 16px;
  }
  .voice__quote {
    min-height: 0;
    font-size: clamp(19px, 4.9vw, 26px);
    line-height: 1.38;
  }
  .voice__foot {
    margin-top: 28px;
    padding-top: 24px;
    padding-right: 116px;      /* clear of the arrows */
    min-height: 74px;
  }
  .voice__name { font-size: 17px; }
  .voice__role { margin-top: 8px; font-size: 15px; line-height: 1.35; }
  .voices__nav { bottom: 0; gap: 12px; }
  .vbtn { width: 48px; height: 48px; border-radius: 10px; }
  .vbtn svg { width: 17px; height: 17px; }

  /* ---- footer ---- */
  .certs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 26px 34px;
    height: auto;
    padding: 34px 20px;
  }
  .certs img {
    position: static;
    transform: none;
    height: calc(var(--h) * 0.62px);
    flex: none;
  }

  .foot { padding: 0 20px; }
  .foot::after { display: none; }

  .foot__community {
    display: block;
    height: auto;
    padding: 34px 20px 30px;
    margin: 0 -20px;
  }
  .foot__title { font-size: clamp(26px, 6.2vw, 38px); }
  .foot__sub {
    margin-top: 12px;
    font-size: clamp(15px, 3.9vw, 18px);
    line-height: 1.5;
  }
  .foot__sub br { display: none; }
  .foot__social { margin-top: 24px; gap: 12px; }
  .soc { width: 58px; height: 58px; border-radius: 12px; }
  .soc svg { width: 26px; height: 26px; }

  .foot__cols {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    margin: 0 -20px;
  }
  .fcol {
    padding: 26px 20px 24px;
    border-left: 0;
    border-top: 1px solid #464646;
  }
  .fcol:nth-child(odd) { border-right: 1px solid #464646; }
  .fcol:nth-child(-n+2) { border-top: 0; }
  .fcol__title { margin-bottom: 14px; font-size: 18px; }
  .fcol__list { gap: 11px; }
  .fcol__list a { font-size: 15px; }

  .foot__bottom {
    display: block;
    height: auto;
    padding: 34px 0 36px;
  }
  .foot__mark { font-size: clamp(40px, 12.8vw, 84px); }
  .foot__copy { margin-top: 14px; font-size: 14px; line-height: 1.5; }
  .foot__stores { margin: 24px 0 0; gap: 10px; }
  .store { width: 152px; height: 42px; font-size: 13px; }

  /* ---- interactive video ---- */
  .reel { padding: 48px 20px 40px; margin-bottom: 56px; }
  .reel__head { padding-left: 0; }
  .reel__title {
    font-size: clamp(26px, 6.2vw, 40px);
    line-height: 1.16;
  }
  .reel__title br { display: none; }
  .reel__sub {
    margin-top: 14px;
    font-size: clamp(15px, 3.9vw, 19px);
    line-height: 1.5;
  }
  .reel__sub br { display: none; }
  /* the animations do not run down here — see index.js */
  .reel__stage { display: none; }
  .reel { padding-bottom: 48px; }

  .clients {
    height: 120px;
    border-top: 1px solid var(--rule);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  .clients__row { gap: 52px; padding-right: 52px; }
  .clients__row img { height: calc(var(--h, 52) * 0.72px); }
}

@media (prefers-reduced-motion: reduce) {
  .clients__track,
  .hero__dna { animation: none; }
  * { transition-duration: .01ms !important; }
}