/* ============================================================
   Magnetic v2 design layer

   Loaded after styles.css. This is where v2 stops being a reskin
   of v1 and becomes its own thing: blueprint ground, grain, a
   harder type ramp, and the section machinery (stat band, bento,
   pillar rail, marquee, carousel) the pages are built from.
   ============================================================ */

:root {
  --grid: rgba(255,255,255,.028);
  --edge: rgba(255,255,255,.09);
  --ink-2: #B9BDC6;
  --r-xl: 34px;
}

/* ---------- ground: blueprint grid + grain over the whole page ---------- */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* body carries the ground on ::before/::after at z-index -1, so nothing here
   needs to re-declare stacking. .nav keeps its own z-index from styles.css. */
/* position:relative is load-bearing: without it .aura resolves inset:0 against
   the initial containing block (viewport height) and the glow field only
   covers the first screen of a long page. */
body { isolation: isolate; position: relative; }

/* ---------- announcement bar ---------- */
.topbar {
  position: relative; z-index: 61;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 10px 20px; text-align: center;
  background: linear-gradient(90deg, #1E52DB 0%, #2F6BFF 50%, #1E52DB 100%);
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.012em; color: #fff;
}
.topbar svg { width: 14px; height: 14px; flex: 0 0 14px; }
.topbar a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.topbar a:hover { opacity: .85; }
.has-topbar .nav { top: 52px; }

/* ---------- type ramp ---------- */
.hl { color: var(--accent-lite); }
.eyebrow-2 {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-lite);
}
.eyebrow-2::before {
  content: ''; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.eyebrow-2::after {
  content: ''; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.head-2 { text-align: center; max-width: 900px; margin: 0 auto 52px; }
.head-2 h2 { margin: 20px 0 16px; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.05; }
.head-2 .lede { max-width: 560px; margin: 0 auto; }

/* Header modes. Six sections in a row used to open with the identical centered
   eyebrow / two-line headline / centered lede, which is what made the page read
   as one component repeated. These are the alternatives. */
.head-2--left { text-align: left; margin-left: 0; max-width: 720px; }
.head-2--left .eyebrow-2::after { display: none; }
.head-2--left .lede { margin-left: 0; }
/* a lead header sits tighter to the grid it introduces */
.head-2--lead { margin-bottom: 40px; }
.head-2--flush { margin-bottom: 0; }
/* one-line statement headline: no lede, more air under it */
.head-2--wide { max-width: 100%; margin-bottom: 44px; }
.head-2--wide h2 { font-size: clamp(34px, 5.4vw, 72px); margin-bottom: 0; }

/* header on the left, controls on the right */
.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 34px;
}
.rail-ctl { display: flex; gap: 10px; flex: 0 0 auto; padding-bottom: 4px; }
.rail-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--dim);
  display: grid; place-items: center;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .12s ease;
}
.rail-btn svg { width: 19px; height: 19px; }
.rail-btn:hover { color: var(--ink); border-color: rgba(47,107,255,.55); background: rgba(47,107,255,.12); }
.rail-btn:active { transform: scale(.94); }
.rail-btn[disabled] { opacity: .3; pointer-events: none; }
/* how far through the rail you are, so the horizontal scroll has an end in sight.
   kept short and left aligned: full width it read as a section divider rather
   than a position indicator */
.rail-progress {
  height: 3px; width: 170px; margin-top: 4px;
  border-radius: 3px; background: rgba(var(--tint),.08); overflow: hidden;
}
.rail-progress i {
  display: block; height: 100%; width: 30%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-lite));
  transition: width .18s ease, transform .18s ease;
}

/* ---------- trade marquee ---------- */
.marquee {
  position: relative; overflow: hidden; padding: 26px 0;
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  background: rgba(var(--tint),.015);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: slide 38s linear infinite; }
}
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-half { display: flex; align-items: center; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 12px; padding: 0 30px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--faint);
  white-space: nowrap;
}
.marquee-item i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 5px;
}

/* ---------- section rhythm ----------
   Every section used to be `padding: 84px 0` on the same transparent ground, so
   the whole page scrolled at one unvarying speed. Three spacing tiers plus one
   raised ground give it a pulse: tight for punctuation, tall for the moments
   that need air, raised where a block of panels needs a floor to sit on. */
.section { padding: 96px 0; }
.section--tight { padding: 58px 0; }
.section--tall { padding: 136px 0; }
.section--raise {
  background:
    linear-gradient(180deg, rgba(var(--tint),.028) 0%, rgba(var(--tint),.004) 42%, rgba(var(--tint),0) 100%);
  border-top: 1px solid rgba(var(--tint),.06);
  border-bottom: 1px solid rgba(var(--tint),.06);
}

/* ---------- stat band ----------
   The offer terms are the hardest, cleanest numbers on the page. They used to
   sit inside a small bordered box at 62px, which read as a widget. Now they are
   the page's first typographic extreme: no container, hairlines only. */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 0; border-radius: 0; overflow: visible; background: none;
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
}
.stat { padding: 46px 30px 42px; text-align: left; border-left: 1px solid var(--edge); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-n {
  font-size: clamp(58px, 8.4vw, 116px); font-weight: 700; letter-spacing: -0.062em;
  line-height: .84; color: var(--ink);
}
/* the one number that is not a zero is the whole point of the row */
.stat:last-child .stat-n { color: var(--accent-lite); }
.stat-n em { font-style: normal; color: var(--accent-lite); }
.stat-l { margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--ink-soft); letter-spacing: -0.02em; }
.stat-s { margin-top: 5px; font-size: 12.5px; color: var(--faint); }
.stats-note { margin-top: 20px; text-align: left; font-size: 12.5px; color: var(--faint); max-width: 620px; }

/* ---------- bento ---------- */
.bento {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.bx {
  position: relative; overflow: hidden;
  padding: 32px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--edge);
  transition: border-color .24s ease, transform .24s ease;
}
.bx:hover { border-color: rgba(47,107,255,.42); transform: translateY(-4px); }
/* the media card next to it sets the row height, which used to leave ~180px of
   dead space under this card's copy. flex + auto margin spends it on purpose. */
.bx-wide { grid-column: span 4; display: flex; flex-direction: column; }
.bx-wide .bx-list {
  margin-top: auto; padding-top: 26px; border-top: 1px solid var(--edge);
  flex-direction: row; flex-wrap: wrap; gap: 10px 28px;
}
.bx-half { grid-column: span 3; }
.bx-third { grid-column: span 2; }
.bx-tall { grid-column: span 2; grid-row: span 2; }
.bx h3 { font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.035em; margin-bottom: 11px; }
.bx p { color: var(--dim); font-size: 14.8px; line-height: 1.6; }
.bx-ico {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 22px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(47,107,255,.3), rgba(47,107,255,.07));
  border: 1px solid rgba(47,107,255,.35);
}
.bx-ico svg { width: 21px; height: 21px; color: var(--accent-lite); }
.bx-glow::before {
  content: ''; position: absolute; inset: -40% -10% auto -10%; height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(47,107,255,.3), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.bx-list { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.bx-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.bx-list svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--accent-lite); }
/* the clip is 9:16, and left unconstrained its intrinsic height set a ~650px
   grid row that the text card beside it could not fill. cropped to the portrait
   ratio the platforms actually use, the row lands near the copy's own height. */
.bx-media { padding: 0; aspect-ratio: 1 / 1; }
.bx-media video, .bx-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bx-cap {
  position: absolute; inset: auto 0 0 0; padding: 26px;
  background: linear-gradient(180deg, transparent, rgba(8,9,12,.95) 62%);
}

/* ---------- pillar rail ----------
   Was three dark panels in a column with a numbered dot beside each, which is
   the same card treatment as the bento, the clip rail and the offer stack. It is
   now an editorial list: outlined oversized numerals, hairline rules, no panels.
   The "PILLAR 1" eyebrow is gone because the numeral already says it. */
/* flush left, not centred: the header above it is left aligned, and a centred
   rail put the numerals 76px inboard of the headline they belong to */
.rail-wrap { max-width: 1000px; margin: 0; list-style: none; }
.pillar {
  display: grid; grid-template-columns: minmax(90px, 150px) 1fr; gap: 44px;
  align-items: start; padding: 46px 0; border-top: 1px solid var(--edge);
}
.pillar:first-child { padding-top: 6px; border-top: 0; }
.pillar:last-child { padding-bottom: 0; }
.pillar-rail { display: block; }
.pillar-node {
  display: block; width: auto; height: auto; border-radius: 0;
  background: none; box-shadow: none;
  font-size: clamp(58px, 7vw, 108px); font-weight: 700;
  line-height: .78; letter-spacing: -0.07em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(111,166,255,.6);
  transition: -webkit-text-stroke-color .3s ease, color .3s ease;
}
.pillar:hover .pillar-node { color: rgba(47,107,255,.14); -webkit-text-stroke-color: rgba(111,166,255,.95); }
.pillar-thread { display: none; }
.pillar-card {
  position: relative; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none;
}
.pillar-eyebrow { display: none; }
.pillar-card h3 { font-size: clamp(23px, 2.7vw, 34px); letter-spacing: -0.04em; margin-bottom: 14px; max-width: 20ch; }
.pillar-card p { color: var(--dim); font-size: 15.5px; line-height: 1.62; max-width: 62ch; }
.pillar-kick {
  margin-top: 20px !important; padding-left: 18px;
  border-left: 2px solid rgba(111,166,255,.5);
  color: var(--ink) !important; font-weight: 600; letter-spacing: -0.02em;
}

/* ---------- testimonial carousel ---------- */
.carousel {
  display: flex; gap: 18px; overflow-x: auto; padding: 4px 0 20px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.tcard {
  flex: 0 0 344px; scroll-snap-align: start;
  border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--edge);
  /* cards stretch to equal height, so the attribution row has to be pinned to
     the bottom or it steps up and down with each card's paragraph length */
  display: flex; flex-direction: column;
}
.tcard-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.tcard-media video { width: 100%; height: 100%; object-fit: cover; }
.tcard-play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.22); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.4);
  display: grid; place-items: center;
}
.tcard-play svg { width: 19px; height: 19px; margin-left: 3px; }
.tcard-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.tcard-loc { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tcard-body h4 { margin: 10px 0 12px; font-size: 17px; line-height: 1.3; letter-spacing: -0.03em; }
.tcard-body p { color: var(--dim); font-size: 14.5px; line-height: 1.55; }
.tcard-foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--edge);
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
}
.tcard-foot img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.tcard-foot .tag { margin-left: auto; font-size: 11.5px; color: var(--faint); }


/* ---------- cta band ---------- */
.band {
  position: relative; overflow: hidden; text-align: center;
  padding: 60px 40px; border-radius: var(--r-xl);
  background:
    radial-gradient(100% 160% at 50% 0%, rgba(47,107,255,.26) 0%, rgba(47,107,255,0) 62%),
    linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid rgba(47,107,255,.3);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.band h2 { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 16px; }
.band p { color: var(--dim); font-size: 16px; line-height: 1.6; max-width: 560px; margin: 0 auto; }
.band .btn { margin-top: 30px; }
.band-sub { margin-top: 16px; font-size: 13px; color: var(--faint); }

/* the slim variant closes the home page. the inline qualifier directly above is
   the real ask, so this one is a horizontal sign-off, not another tall panel. */
.band--slim {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; text-align: left; padding: 40px 44px;
  /* opaque enough to hold its own against the ambient glow field behind it */
  background:
    linear-gradient(120deg, rgba(47,107,255,.18) 0%, rgba(47,107,255,.04) 48%, rgba(var(--tint),.02) 100%),
    linear-gradient(180deg, rgba(12,13,17,.94), rgba(8,9,12,.94));
  border-color: rgba(47,107,255,.26);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.band--slim h2 { font-size: clamp(26px, 3vw, 38px); margin: 14px 0 0; }
.band--slim .band-act { flex: 0 0 auto; text-align: right; }
.band--slim .btn { margin-top: 0; }
.band--slim .band-sub { margin-top: 12px; max-width: 260px; margin-left: auto; }

@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--edge); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bx-wide, .bx-half, .bx-third, .bx-tall { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 720px) {
  /* the stat band and the pillar rail are no longer cards; their mobile rules
     live with the new components further down this file */
  .bento { grid-template-columns: 1fr; }
  .bx-wide, .bx-half, .bx-third, .bx-tall { grid-column: span 1; }
  .bx { padding: 24px; }
  .bx-wide .bx-list { flex-direction: column; gap: 9px; padding-top: 22px; }
  .band { padding: 38px 22px; }
  .tcard { flex-basis: 280px; }
  .topbar { font-size: 12px; padding: 9px 14px; gap: 8px; }
  .has-topbar .nav { top: 48px; }
  .marquee-item { font-size: 15px; padding: 0 20px; }
}

.has-topbar .hero { padding-top: 166px; }
@media (max-width: 720px) { .has-topbar .hero { padding-top: 150px; } }

/* ============================================================
   Ambient glow field

   The hero sweeps were trapped inside overflow:hidden sections,
   so every glow died at a section boundary. This layer lives at
   document level instead, so light carries across the seams and
   the page never reads as a stack of separate black boxes.

   Percentage tops mean the same markup adapts to any page length.
   ============================================================ */
.aura {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.ao {
  position: absolute; border-radius: 50%;
  will-change: transform;
}
/* soft round bloom */
.ao-a {
  width: 62vw; height: 34vw; min-width: 620px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(47,107,255,.85) 0%, rgba(47,107,255,0) 72%);
  filter: blur(72px);
}
/* tighter, brighter core */
.ao-b {
  width: 38vw; height: 22vw; min-width: 380px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(150,200,255,.95) 0%, rgba(47,107,255,0) 70%);
  filter: blur(54px);
}
/* wide horizontal streak, the one that reads as a light sweep */
.ao-s {
  width: 150%; height: 190px; left: -25%; border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(47,107,255,0) 0%, rgba(90,160,255,.72) 20%, rgba(215,235,255,1) 50%,
    rgba(90,160,255,.72) 80%, rgba(47,107,255,0) 100%);
  filter: blur(54px);
}

/* placement down the page. left/right alternate so the eye keeps moving */
.ao-1 { left: -18vw;  top: 6%;  }
.ao-2 { right: -16vw; top: 17%; }
.ao-3 { top: 27%; transform: rotate(-7deg); opacity: .95; }
.ao-4 { left: -20vw;  top: 38%; opacity: 1; }
.ao-5 { right: -14vw; top: 49%; opacity: 1; }
.ao-6 { top: 61%; transform: rotate(6deg); opacity: .92; }
.ao-7 { left: 12vw;   top: 72%; opacity: .95; }
.ao-8 { right: -18vw; top: 83%; }
/* at 93% the streak landed straight across the closing CTA and washed the
   headline out. pushed into the footer, which now has its own opaque ground, so
   it reads as a floor glow behind the last edge rather than a haze over copy. */
.ao-9 { top: 97%; transform: rotate(-4deg); opacity: .5; }

/* the footer is the page's floor: solid, so the ambient field stops here rather
   than fading the legal line and the link columns out */
.footer {
  position: relative;
  background: linear-gradient(180deg, rgba(8,9,12,.82) 0%, var(--bg) 120px);
}
/* space-between left ~700px of nothing between the tagline and the two link
   columns. a grid spreads them instead of clumping them against the right edge. */
.footer-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 48px; align-items: start;
}
.footer-cols { display: contents; }
@media (max-width: 720px) {
  .footer-row { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer-row > :first-child { grid-column: 1 / -1; }
}

/* a light seam on section edges: 1px rule that fades out at both ends */
.seam {
  position: relative; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(120,180,255,.45) 22%, rgba(200,228,255,.8) 50%, rgba(120,180,255,.45) 78%, transparent);
}
.seam::after {
  content: ''; position: absolute; left: 30%; right: 30%; top: -34px; height: 68px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(47,107,255,.5), transparent 70%);
  filter: blur(28px); pointer-events: none;
}

/* cards pick up a faint top sheen so panels stop looking flat. the pillars and
   the stat band are no longer panels, so they are no longer in this list. */
.bx::after, .tcard::after, .qual-card::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--tint),.16) 30%, rgba(var(--tint),.16) 70%, transparent);
}
.tcard, .qual-card { position: relative; }

@media (max-width: 720px) {
  .ao-a { filter: blur(54px); }
  .ao-b { filter: blur(44px); }
  .ao-s { height: 130px; filter: blur(48px); }
}
@media (prefers-reduced-transparency: reduce) { .aura { opacity: .5; } }

/* ---------- offer stack + guarantee ----------
   .guar used to be the third child of a two column grid, so it wrapped under the
   list and left the whole right column empty below the total. Total + guarantee
   now share one right hand column. */
.stack { display: grid; grid-template-columns: 1.12fr .88fr; gap: 20px; align-items: start; }
.stack-side { display: flex; flex-direction: column; gap: 20px; }
.stack-list {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
}
/* three columns on one baseline. the description used to be right aligned
   against the price, so any row that wrapped left a ragged edge floating in the
   middle of the table. */
.stack-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) auto;
  align-items: baseline; gap: 18px;
  padding: 17px 24px; border-top: 1px solid var(--edge);
  position: relative;
}
.stack-list li:first-child { border-top: 0; }
.stack-list li::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity .2s ease;
}
.stack-list li:hover::before { opacity: 1; }
.sk-i { font-size: 15.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.sk-d { text-align: left; font-size: 13.5px; line-height: 1.45; color: var(--faint); }

.guar {
  position: relative; overflow: hidden;
  padding: 34px 30px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(47,107,255,.26) 0%, rgba(47,107,255,0) 62%),
    linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid rgba(47,107,255,.38);
  box-shadow: 0 26px 60px rgba(0,0,0,.5), 0 0 60px rgba(47,107,255,.18);
}
.guar-badge {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 20px;
  display: grid; place-items: center; color: var(--accent-lite);
  background: linear-gradient(180deg, rgba(47,107,255,.32), rgba(47,107,255,.08));
  border: 1px solid rgba(47,107,255,.4);
}
.guar-badge svg { width: 24px; height: 24px; }
.guar h3 { font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -0.035em; margin-bottom: 13px; }
.guar p { color: var(--dim); font-size: 15px; line-height: 1.6; }
.guar-note {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(var(--tint),.08);
  font-size: 13.5px; color: var(--faint) !important;
}
.guar .btn { margin-top: 22px; }

@media (max-width: 900px) {
  .stack { grid-template-columns: 1fr; }
  .stack-side { gap: 16px; }
  /* the price stays on the first line beside the name; the description drops
     under both, so the row never becomes three stacked fragments */
  .stack-list li {
    grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px;
    padding: 15px 20px;
  }
  .sk-i { grid-column: 1; grid-row: 1; }
  .sk-v { grid-column: 2; grid-row: 1; }
  .sk-d { grid-column: 1 / -1; grid-row: 2; }
  .guar { padding: 26px 22px; }
}

/* ---------- stack values and total ---------- */
.sk-v {
  min-width: 66px; text-align: right;
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent-lite);
}
.stack-total {
  padding: 22px 24px; border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(47,107,255,.14), rgba(47,107,255,.05));
  border: 1px solid rgba(47,107,255,.32);
}
.st-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--dim);
}
.st-row + .st-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(var(--tint),.09); }
.st-v { font-size: 22px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); }
.st-v em { font-style: normal; font-size: 14px; color: var(--faint); }
.st-pay .st-v { font-size: 17px; color: var(--accent-lite); }
.st-note { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--faint); }

@media (max-width: 900px) {
  .st-row { flex-direction: column; gap: 4px; }
  .st-row + .st-row { align-items: flex-start; }
}

/* ============================================================
   Rhythm layer
   ============================================================ */

/* ---------- versus, weighted ----------
   Two identical cards side by side implied the two futures are equally
   plausible, which is the opposite of the argument the section makes. The
   "keep waiting" card is now shorter, quieter and bottom aligned so the eye
   lands on the other one first. */
.versus { grid-template-columns: .86fr 1.14fr; align-items: end; }
.vs-card.cold { min-height: 430px; padding: 30px; }
.vs-card.cold h3 { font-size: clamp(20px, 2.1vw, 26px); }
.vs-card.cold p { font-size: 14.5px; color: var(--faint); }
.vs-card.warm { min-height: 560px; }
.vs-card.warm h3 { font-size: clamp(26px, 3vw, 38px); }
.vs-card.warm .btn { font-size: 17px; padding: 16px 34px; }

/* ---------- staggered reveals ----------
   A grid of eight rows fading in as one block tells the eye nothing. Staggering
   them left to right gives the section a reading direction. */
.rv-stagger.in > *, .rv.in .rv-stagger > * { animation: rvUp .55s cubic-bezier(.22,.61,.36,1) both; }
/* the stagger target is sometimes the .rv element itself (.stats, .bento) and
   sometimes a child of it (.stack-list), so both forms have to carry the delays */
:is(.rv-stagger.in, .rv.in .rv-stagger) > *:nth-child(1) { animation-delay: .02s; }
:is(.rv-stagger.in, .rv.in .rv-stagger) > *:nth-child(2) { animation-delay: .07s; }
:is(.rv-stagger.in, .rv.in .rv-stagger) > *:nth-child(3) { animation-delay: .12s; }
:is(.rv-stagger.in, .rv.in .rv-stagger) > *:nth-child(4) { animation-delay: .17s; }
:is(.rv-stagger.in, .rv.in .rv-stagger) > *:nth-child(5) { animation-delay: .22s; }
:is(.rv-stagger.in, .rv.in .rv-stagger) > *:nth-child(6) { animation-delay: .27s; }
:is(.rv-stagger.in, .rv.in .rv-stagger) > *:nth-child(7) { animation-delay: .32s; }
:is(.rv-stagger.in, .rv.in .rv-stagger) > *:nth-child(8) { animation-delay: .37s; }
@keyframes rvUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- carousel, made draggable ----------
   The old copy said "drag to scroll" but nothing implemented drag and the
   scrollbar was hidden, so on a desktop mouse the rail looked frozen. It now
   drags, and the arrows and the progress bar say how far it goes. */
.carousel { cursor: grab; }
.carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carousel.is-dragging * { pointer-events: none; }
.tcard { transition: border-color .22s ease, transform .22s ease; }
.tcard:hover { border-color: rgba(47,107,255,.4); transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .rv-stagger.in > *, .rv.in .rv-stagger > * { animation: none; }
  .carousel { scroll-behavior: auto; }
}

@media (max-width: 1024px) {
  .stat-n { font-size: clamp(46px, 8vw, 74px); }
  .stat { padding: 34px 20px 30px; }
  .versus { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .vs-card.cold, .vs-card.warm { min-height: 480px; }
}
@media (max-width: 900px) {
  .head-row { flex-direction: column; align-items: flex-start; gap: 22px; }
  .rail-ctl { padding-bottom: 0; }
}
@media (max-width: 720px) {
  .section { padding: 76px 0; }
  .section--tight { padding: 48px 0; }
  .section--tall { padding: 92px 0; }
  /* two columns, not four: a single stacked column turns four short facts into
     four full screens of scrolling */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-left: 1px solid var(--edge); border-top: 0; padding: 28px 16px 26px; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--edge); }
  .stat-n { font-size: clamp(44px, 13vw, 64px); }
  .stat-l { margin-top: 14px; font-size: 13.5px; }
  .stat-s { font-size: 11.5px; }
  .pillar { grid-template-columns: 1fr; gap: 14px; padding: 34px 0; }
  .pillar-node { font-size: 54px; }
  .pillar-card h3 { max-width: none; }
  .versus { grid-template-columns: 1fr; }
  .vs-card.cold, .vs-card.warm { min-height: 400px; }
  .band--slim { flex-direction: column; align-items: flex-start; gap: 26px; padding: 30px 24px; }
  .band--slim .band-act { text-align: left; width: 100%; }
  .band--slim .btn { width: 100%; }
  .band--slim .band-sub { margin-left: 0; max-width: none; }
  .rail-btn { width: 42px; height: 42px; }
}