/* =====================================================================
   APP CSS - layout and design. Brand-neutral.
   Every color, font and radius here is a var() from brand.css.
   There is not one literal color value in this file, on purpose:
   if you find yourself typing "#" here, it belongs in brand.css.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);
  line-height:1.55;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;line-height:1.16;font-weight:var(--w-bold);font-family:var(--font-display);
  text-wrap:balance}          /* balance = no single word alone on the last line */
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent-dk);outline-offset:2px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.band{background:var(--bg-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--radius-sm);font-weight:700;font-size:1rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-align:center;min-height:46px}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent-lt);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-dk)}

/* ── header ──────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:14px;min-height:58px}
/* min-width:0 is load-bearing. A non-shrinking wordmark is what pushes a
   nav toggle off-screen at 320px. */
.brand{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto}
.brand-mark{width:30px;height:30px;flex:0 0 auto}
.brand-name{font-weight:800;font-size:1.06rem;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.brand-name em{font-style:normal;color:var(--accent-dk)}
.nav{display:none;gap:26px;align-items:center}
.nav a{font-size:.95rem;color:var(--text-2);font-weight:600}
.nav a:hover{color:var(--accent-dk)}
.head-cta{display:none}
.nav-toggle{display:inline-flex;flex:0 0 auto;width:42px;height:42px;
  align-items:center;justify-content:center;border-radius:var(--radius-sm);
  border:1px solid var(--line)}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text);
  position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;
  left:0;width:18px;height:2px;background:var(--text)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--bg);
  padding:10px 0 16px}
.mobile-nav.open{display:block}
/* Even item count laid out 2-up so no item is ever stranded alone. */
.mobile-nav ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:2px 14px}
.mobile-nav a{display:block;padding:11px 4px;font-weight:600;color:var(--text-2)}
.mobile-nav .btn{width:100%;margin-top:12px}

/* ── HERO ─────────────────────────────────────────────────────────────
   Mobile is product-first and in this exact order:
     headline -> phone -> vertical icon rail -> CTAs -> perks line.
   The rail sits BESIDE the phone (it is vertical, so it costs no
   height) which is what lets the whole phone stay inside the fold.
   ───────────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:18px 0 26px;overflow:hidden}
.hero-in{display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center}
.hero-block{min-width:0}
.hero-block h1{font-size:clamp(1.62rem,6.2vw,2.1rem);color:var(--ink);
  letter-spacing:-.015em}
.hero-sub{margin-top:10px;font-size:1rem;color:var(--text-2);max-width:44ch;
  margin-inline:auto}
.hero-sub b{color:var(--accent-dk);font-weight:700}

/* phone + rail live in one row, centred as a unit */
.stage{position:relative;display:flex;align-items:center;justify-content:center;
  gap:12px}

.hero-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.hero-cta .btn{flex:1 1 44%;max-width:230px}
/* Below 380px two side-by-side buttons are too narrow for a three-word
   label, so the label wraps and the last word sits alone in the button.
   Stack them instead: a full-width button is not a compromise on a
   360px screen, it is the normal pattern. */
@media (max-width:379px){
  .hero-cta{flex-direction:column;align-items:center}
  .hero-cta .btn{flex:none;width:100%;max-width:260px}
}

/* Perks are a statement, not controls. Plain muted text.
   The separator is bound to the word on BOTH sides at render time, so a
   line can never open or close on a bare dot. */
.perks{font-size:12.5px;line-height:1.75;color:var(--text-muted);
  margin-inline:auto}
.perks i{font-style:normal;opacity:.5;margin:0 .55em}
/* Wide enough for one line, the perks ARE one line: that is the
   reference design and it reads as a single muted statement.
   Once the line would wrap, a wrap could strand the fourth perk alone,
   so below 620px (and on landscape phones) it becomes a fixed 2 + 2
   grid instead. A grid cannot strand an item the way an inline line
   can, and the two separators stack into one visual centerline. */
@media (max-width:620px), (max-width:1000px) and (max-height:560px){
  .perks{display:grid;grid-template-columns:auto auto;justify-content:center;
    column-gap:0;row-gap:1px;max-width:none}
  .perks span:nth-child(odd){justify-self:end}
  .perks span:nth-child(even){justify-self:start}
  .perks span:nth-child(2) i{display:none}   /* no trailing dot on row 1 */
}

/* ── THE PHONE ────────────────────────────────────────────────────────
   ONE variable: --pw. Frame, bezel, both radii, island, status bar, tab
   bar, side buttons and home indicator are all fractions of it, so the
   mockup cannot distort at any size. The inner radius is written as
   OUTER MINUS BEZEL, which is why the corners stay concentric.
   Total rendered height = --pw * 2.0709 (used by the fold math below).
   ───────────────────────────────────────────────────────────────────── */
.iphone{--bz:calc(var(--pw)*.04104);--r:calc(var(--pw)*.17164);
  position:relative;flex:0 0 auto;width:var(--pw);max-width:100%;
  border-radius:var(--r);padding:var(--bz);
  background:linear-gradient(160deg,var(--ink-2),var(--ink));
  box-shadow:var(--shadow-lg)}
.iphone::before{content:'';position:absolute;inset:calc(var(--pw)*.02985);
  border-radius:calc(var(--r) - var(--pw)*.02985);
  border:1px solid rgba(255,255,255,.14);pointer-events:none;z-index:4}
/* Hardware side buttons: volume pair + silence switch left, power right.
   They protrude 0.746% of --pw beyond the frame, which is what makes the
   mockup read as a device. The vertical gradient matters: a flat fill
   reads as a stray dark nub against a light page, a graded one reads as
   machined metal. */
.btn-edge{position:absolute;width:calc(var(--pw)*.01119);
  border-radius:calc(var(--pw)*.01119);pointer-events:none;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2))}
.be-1{left:calc(var(--pw)*-.00746);top:calc(var(--pw)*.38806);height:calc(var(--pw)*.11194)}
.be-2{left:calc(var(--pw)*-.00746);top:calc(var(--pw)*.52985);height:calc(var(--pw)*.11194)}
.be-3{left:calc(var(--pw)*-.00746);top:calc(var(--pw)*.27612);height:calc(var(--pw)*.07090)}
.be-4{right:calc(var(--pw)*-.00746);top:calc(var(--pw)*.44030);height:calc(var(--pw)*.19403)}

.iphone-screen{position:relative;width:100%;aspect-ratio:9/19.5;
  font-size:calc(var(--pw)*.04851);
  border-radius:calc(var(--r) - var(--bz));overflow:hidden;background:var(--bg)}
.island{position:absolute;top:calc(var(--pw)*.03358);left:50%;
  transform:translateX(-50%);width:calc(var(--pw)*.29104);
  height:calc(var(--pw)*.08582);border-radius:calc(var(--pw)*.05);
  background:var(--ink);z-index:5;display:flex;align-items:center;
  justify-content:flex-end;padding-right:calc(var(--pw)*.03358)}
.island i{display:block;width:calc(var(--pw)*.02612);height:calc(var(--pw)*.02612);
  border-radius:50%;background:var(--ink-2)}
.p-status{position:absolute;top:0;left:0;right:0;height:calc(var(--pw)*.14925);
  z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--pw)*.07463) 0 calc(var(--pw)*.08209);
  font-size:calc(var(--pw)*.04664);font-weight:700;color:var(--ink);
  letter-spacing:.01em}
.p-status .st-r{display:flex;align-items:center;gap:calc(var(--pw)*.01493)}
.p-status svg{fill:var(--ink);height:calc(var(--pw)*.04104);width:auto}

.p-body{position:absolute;inset:0;overflow:hidden;
  padding:calc(var(--pw)*.16418) calc(var(--pw)*.04851) calc(var(--pw)*.23134);
  display:flex;flex-direction:column;gap:.55em}
.p-title{font-size:1.15em;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.p-kicker{font-size:.82em;font-weight:700;color:var(--accent-dk);
  text-transform:uppercase;letter-spacing:.06em}
.p-headline{font-size:1.05em;font-weight:800;color:var(--ink)}
.p-copy{font-size:.85em;color:var(--text-2);line-height:1.45}
.p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.35em}
.p-stat{background:var(--bg-3);border-radius:.5em;padding:.45em .35em;text-align:center}
.p-stat b{display:block;font-size:.86em;color:var(--ink)}
.p-stat span{display:block;font-size:.62em;color:var(--text-muted)}
.p-rows{display:flex;flex-direction:column;gap:.32em}
.p-row{display:flex;align-items:center;justify-content:space-between;gap:.4em;
  background:var(--bg-2);border-radius:.45em;padding:.45em .55em;font-size:.78em}
.p-row b{font-weight:700;color:var(--ink);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.p-row span{color:var(--text-muted);white-space:nowrap}
.p-row.ok span{color:var(--ok)}
.p-row.warn span{color:var(--warn)}
.p-act{margin-top:auto;background:var(--accent);color:var(--on-accent);
  border-radius:.5em;padding:.55em;text-align:center;font-weight:700;font-size:.85em}

.phone-tabs{position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--pw)*.23134);z-index:2;display:grid;
  grid-template-columns:repeat(4,1fr);align-items:center;
  padding-bottom:calc(var(--pw)*.02239);background:var(--bg);
  border-top:1px solid var(--line)}
.ptab{display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--pw)*.01119);font-size:calc(var(--pw)*.03918);font-weight:600;
  color:var(--text-muted)}
.ptab svg{width:calc(var(--pw)*.06343);height:auto;fill:currentColor}
.ptab.on{color:var(--accent-dk)}
.p-home{position:absolute;bottom:calc(var(--pw)*.02612);left:50%;
  transform:translateX(-50%);width:calc(var(--pw)*.38806);
  height:calc(var(--pw)*.01493);border-radius:99px;background:var(--ink);
  opacity:.28;z-index:6}

/* ── the icon rail (mobile) / chip row (desktop) ──────────────────────
   Rotation order, pin order and ARIA order all come from the DOM order
   of these buttons, which app.js reads. Reorder config.chips and every
   one of those follows by construction.
   ───────────────────────────────────────────────────────────────────── */
.rail{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.chip{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--bg-3);
  color:var(--text-muted);transition:background .25s ease,color .25s ease,
  transform .25s ease;flex:0 0 auto}
.chip svg{width:21px;height:21px;fill:currentColor}
.chip-label{display:none}
.chip.on{background:var(--accent);color:var(--on-accent);
  box-shadow:0 0 0 4px rgba(0,0,0,.04)}
@keyframes chipLand{0%{transform:scale(1)}38%{transform:scale(1.16)}100%{transform:scale(1)}}
.chip.on.landed{animation:chipLand .72s .42s ease-out}

/* ── notification + beam ──────────────────────────────────────────────
   The beam is MEASURED, never guessed: app.js reads the live rects of
   the notification and the active chip and writes the path. It redraws
   on resize and on rotation. Reduced motion draws it static.
   ───────────────────────────────────────────────────────────────────── */
.note{position:absolute;z-index:7;left:6%;right:6%;
  top:calc(var(--pw)*1.30);border-radius:.7em;padding:.6em .7em;
  font-size:calc(var(--pw)*.045);
  background:linear-gradient(150deg,rgba(36,51,74,.94),rgba(22,32,46,.97));
  color:var(--on-ink);box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.13);pointer-events:none}
.note b{display:block;font-size:.92em;font-weight:800}
.note p{font-size:.78em;opacity:.82;line-height:1.35;margin-top:.15em}
.note::after{content:'';position:absolute;top:50%;right:-.34em;
  width:.68em;height:.68em;transform:translateY(-50%) rotate(45deg);
  background:var(--ink);border-right:1px solid rgba(255,255,255,.13);
  border-top:1px solid rgba(255,255,255,.13)}
/* The beam is drawn ONLY in the layout where the rail sits BESIDE the
   phone. That is the reference behaviour and it is not arbitrary: once
   the chips move BELOW the phone, every route from the notification to a
   chip has to leave the frame, drop past the tab bar and come back, which
   reads as a wire tucked under the device. Hidden is better than clever. */
.beam{display:none;position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:8;overflow:visible}
.beam-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:0}
.beam-port{fill:var(--accent-lt)}
.beam-head{fill:var(--accent)}
.beam-spark{fill:none;stroke:var(--accent-lt);stroke-width:3.2;
  stroke-linecap:round;opacity:0}
.beam.draw .beam-line{animation:beamDraw .46s cubic-bezier(.65,0,.35,1) both}
@keyframes beamDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.beam.draw .beam-port{animation:beamPort .3s ease-out both}
@keyframes beamPort{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.beam.draw .beam-head{animation:beamHead .28s .40s ease-out both}
@keyframes beamHead{from{opacity:0}to{opacity:1}}
.beam.draw .beam-spark{animation:beamSpark .66s .5s cubic-bezier(.42,0,.5,1) both}
@keyframes beamSpark{
  0%{opacity:0;stroke-dashoffset:var(--len)}
  18%{opacity:.95}
  100%{opacity:0;stroke-dashoffset:calc(var(--len) * -1)}}

/* ── section furniture ───────────────────────────────────────────────── */
.sect{padding:52px 0}
.sect-head{max-width:60ch;margin:0 auto 26px;text-align:center}
.kicker{font-size:.78rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-dk);margin-bottom:9px}
.sect-head h2{font-size:clamp(1.5rem,4.4vw,2.05rem);color:var(--ink);
  letter-spacing:-.015em}
.sect-head p{margin-top:11px;color:var(--text-2);font-size:1.02rem}

/* PATTERN 1: swipeable snap card rail (from the portal lease-card rail).
   Its own scroll container, so wide content scrolls INSIDE the section
   and the page body never scrolls sideways. */
.rail-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:4px 20px 16px;margin:0 -20px;
  scrollbar-width:thin}
.rail-card{flex:0 0 clamp(232px,74vw,296px);scroll-snap-align:center;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px}
.rail-card h3{font-size:1.08rem;color:var(--ink)}
.rail-card p{color:var(--text-2);font-size:.94rem}
.rail-card .meta{margin-top:auto;font-size:.76rem;font-weight:700;
  color:var(--accent-dk);text-transform:uppercase;letter-spacing:.06em}
.rail-dots{display:flex;gap:7px;justify-content:center;margin-top:2px}
.rail-dots b{width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:background .2s ease,width .2s ease}
.rail-dots b.on{background:var(--accent);width:19px;border-radius:99px}

/* PATTERN 2: grouped timeline (from the portal login-activity timeline) */
.tl{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.tl-group>h3{font-size:.78rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.tl-items{list-style:none;margin:0;padding:0 0 0 24px;position:relative}
.tl-items::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;
  width:2px;background:var(--line)}
.tl-items li{position:relative;padding:0 0 16px}
.tl-items li:last-child{padding-bottom:0}
.tl-items li::before{content:'';position:absolute;left:-23px;top:6px;
  width:12px;height:12px;border-radius:50%;background:var(--accent);
  border:2px solid var(--bg)}
.tl-items b{display:block;color:var(--ink);font-size:1rem}
.tl-items p{color:var(--text-2);font-size:.93rem;margin-top:2px}

/* PATTERN 3: icon-chip tools grid (from the portal tools grid).
   auto-fit with a floor keeps every row full: no chip stranded alone. */
.chip-grid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));max-width:900px;
  margin:0 auto}
.chip-tile{display:flex;align-items:center;gap:10px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 14px;
  font-weight:700;font-size:.95rem;color:var(--text);min-width:0}
.chip-tile i{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  background:var(--bg-3);color:var(--accent-dk)}
.chip-tile i svg{width:18px;height:18px;fill:currentColor}
/* No ellipsis here: a truncated feature name is a clipped element,
   and clipping is a defect even when the page does not scroll. */
.chip-tile span{min-width:0;line-height:1.25}

/* PATTERN 4: stat tiles (from the portal stat cards) */
.stat-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);
  max-width:720px;margin:0 auto}
.stat{background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 14px;text-align:center;
  box-shadow:var(--shadow)}
.stat b{display:block;font-size:clamp(1.6rem,5vw,2.1rem);font-weight:800;
  color:var(--ink);letter-spacing:-.02em}
.stat span{display:block;font-size:.84rem;color:var(--text-muted);margin-top:3px}
.sect-cta{text-align:center;margin-top:26px;display:flex;
  flex-direction:column;align-items:center;gap:12px}

/* ── footer ──────────────────────────────────────────────────────────── */
.site-foot{background:var(--ink);color:var(--on-ink);padding:34px 0 26px;
  margin-top:10px}
.site-foot .foot-blurb{max-width:52ch;margin:0 auto;text-align:center;
  font-size:.92rem;opacity:.74;text-wrap:pretty}
.foot-links{display:flex;flex-wrap:wrap;gap:0;justify-content:center;
  margin:16px 0 12px;font-size:.9rem}
.foot-links i{font-style:normal;opacity:.4;margin:0 .55em}
.foot-legal{text-align:center;font-size:.8rem;opacity:.55}

/* ── reduced motion: the beam still draws, it just does not animate ───── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
  .beam .beam-line{stroke-dashoffset:0!important}
  .beam .beam-port,.beam .beam-head{opacity:1!important}
  .beam .beam-spark{display:none}
  .rail-scroll{scroll-behavior:auto}
}

/* =====================================================================
   FOLD GUARANTEE
   Phone height = --pw * 2.0709. Solving for --pw against the viewport
   height minus the hero chrome keeps the WHOLE phone inside the first
   screen. Verified by qa/fold_check.py at 320x568, 375x667, 390x844 and
   430x932. If you change hero spacing, re-run that check: the constants
   below are measured, not guessed.
   ===================================================================== */
@media (max-width:899px){
  .hero{padding-top:12px}
  .beam{display:block}      /* rail is beside the phone here: beam applies */
  /* Two constraints, both required:
       HEIGHT - the phone must finish inside the first screen.
       WIDTH  - the phone sits next to a 44px rail inside a padded wrap,
                so it cannot claim the full viewport width either. This
                term is what keeps a 320px screen from scrolling
                sideways, and it is easy to forget because the phone
                looks fine on a 390px test device without it. */
  :root{--pw:max(112px, min(240px, calc(90vw - 104px), calc((100svh - 344px) / 2.0709)))}
  /* Very short phones: drop the sub-headline rather than shrink the
     product. The product is the point of the fold. */
  @media (max-height:640px){
    .hero-sub{display:none}
    :root{--pw:max(108px, min(240px, calc(90vw - 104px), calc((100svh - 262px) / 2.0709)))}
  }
}

/* ── desktop: two-column hero, chips balance 3 + 3 ───────────────────── */
@media (min-width:900px){
  .nav{display:flex}
  .head-cta{display:inline-flex}
  .nav-toggle,.mobile-nav{display:none}
  .hero{padding:44px 0 56px}
  /* Two columns WITHOUT reordering the DOM. The markup stays in mobile
     reading order (headline, product, rail, CTAs, perks) and grid areas
     move the phone into its own full-height column. Doing this with flex
     made the CTAs and the perks siblings of the phone, which squeezed
     the perks into a 112px column and stranded its last word. */
  /* The phone column is much taller than the copy column. Without the
     two 1fr spacer rows the leftover height is shared out BETWEEN the
     headline, the buttons and the perks, which opens dead gaps down the
     middle of the hero. The spacers push that slack to the outside and
     centre the copy stack against the phone instead. */
  .hero-in{display:grid;align-items:center;text-align:left;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:1fr auto auto auto 1fr;
    grid-template-areas:". stage" "copy stage" "cta stage" "perks stage" ". stage";
    column-gap:46px;row-gap:16px}
  .hero-block{grid-area:copy;min-width:0}
  .stage{grid-area:stage;align-self:center}
  .hero-cta{grid-area:cta}
  .perks{grid-area:perks}
  .hero-block h1{font-size:clamp(2.1rem,4.2vw,2.92rem)}
  .hero-sub{margin-inline:0;font-size:1.06rem;max-width:46ch}
  .hero-cta{justify-content:flex-start}
  .hero-cta .btn{flex:0 0 auto}
  /* One inline muted line, flush with the left-aligned copy above it. */
  .perks{margin-inline:0;text-align:left}
  .stage{flex-direction:column;gap:20px}
  /* Six chips over a six-column track at two columns each is an exact
     3 + 3. Never auto-fit here: it produces a stranded chip. */
  .rail{flex-direction:row;display:grid;grid-template-columns:repeat(6,1fr);
    gap:7px;width:min(468px,100%)}
  .chip{grid-column:span 2;width:auto;height:auto;border-radius:99px;
    padding:8px 10px;gap:6px;font-size:.78rem;font-weight:700}
  .chip:nth-child(4){grid-column:2/span 2}
  .chip:nth-child(5){grid-column:4/span 2}
  .chip:nth-child(6){grid-column:6/span 2}
  .chip-label{display:block;white-space:nowrap;min-width:0}
  .chip svg{width:18px;height:18px}
  .sect{padding:74px 0}
  .rail-scroll{padding-inline:0;margin-inline:0;overflow-x:visible;
    display:grid;grid-template-columns:repeat(4,1fr);scroll-snap-type:none}
  .rail-card{flex:none}
  .rail-dots{display:none}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
}
/* Chips 4-6 need the offset track only when all six are present; with a
   3+3 grid the first row already fills columns 1-6. */
@media (min-width:900px){
  .rail{grid-auto-rows:auto}
  .chip:nth-child(1){grid-column:1/span 2}
  .chip:nth-child(2){grid-column:3/span 2}
  .chip:nth-child(3){grid-column:5/span 2}
  .chip:nth-child(4){grid-column:1/span 2}
  .chip:nth-child(5){grid-column:3/span 2}
  .chip:nth-child(6){grid-column:5/span 2}
}

/* Landscape phones intentionally use the two-column hero. The phone is
   allowed to continue past the fold there, exactly as the source design
   decided: a 390px-tall viewport cannot hold a phone and copy both. */
@media (max-height:520px) and (orientation:landscape){
  .hero-in{display:grid;align-items:center;text-align:left;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"copy stage" "cta stage" "perks stage";
    column-gap:28px;row-gap:10px}
  .hero-block{grid-area:copy;min-width:0}
  .stage{grid-area:stage;flex-direction:row}
  .hero-cta{grid-area:cta;justify-content:flex-start}
  .perks{grid-area:perks;justify-content:start}
  .hero-sub{display:block;font-size:.95rem}
  :root{--pw:172px}
  .rail{flex-direction:column}
}