/* ============================================================
   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 */
/* one line longer than 900px will hold at 60px; without this the six-questions
   headline orphans "Companies." onto a line of its own */
.head-2--long { max-width: 1040px; }
.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; }

/* ---------- the six questions ----------
   Deliberately unfilled. It sits directly above the bento, which is filled
   cards, so this one is hairlines only or the two sections read as one slab.
   Same construction language as the stat band on purpose. */
.qgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  list-style: none; border-top: 1px solid var(--edge);
}
.qq {
  padding: 34px 30px 40px;
  border-bottom: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
}
.qq:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.qq-n {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; color: var(--accent-lite);
}
.qq p {
  margin-top: 18px; max-width: 19ch;
  font-size: clamp(18px, 1.75vw, 23px); font-weight: 600;
  line-height: 1.26; letter-spacing: -0.032em; color: var(--ink-soft);
}
.qgrid-kick {
  margin-top: 30px; max-width: 640px;
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55;
  letter-spacing: -0.014em; color: var(--dim);
}
.qgrid-kick strong { color: var(--ink); font-weight: 600; }

@media (max-width: 1024px) {
  .qgrid { grid-template-columns: repeat(2, 1fr); }
  .qq:nth-child(3n+1) { border-left: 1px solid var(--edge); padding-left: 30px; }
  .qq:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .qgrid { grid-template-columns: 1fr; }
  .qq, .qq:nth-child(3n+1) { border-left: 0; padding: 24px 0 26px; }
  .qq p { max-width: none; margin-top: 12px; }
}

/* ---------- 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; }
/* the bento is now one lead card over three equal ones, so the lead takes the
   whole first row rather than leaving a two column hole beside the last third */
.bx-lead { grid-column: span 6; }
.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-tall { grid-column: span 2; grid-row: auto; }
  /* the bento is six equal cards now, so thirds go two-up on tablet instead of
     stacking into six full-width slabs */
  .bx-third { grid-column: span 1; 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; }
}


/* ---------- client profile grids ----------
   Replaces the old clip carousel where we explained our own cuts. Nobody needs
   our read on our own work; they need somewhere to go and check. So each client
   is an Instagram profile grid built from cuts we can prove ran on that account,
   and the whole card is one link to the real profile.

   The ring is Magnetic blue rather than Instagram's gradient. It reads as a
   profile without borrowing another company's identity. */
.ig-rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ig-card {
  display: block; padding: 22px; 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, box-shadow .24s ease;
}
a.ig-card:hover {
  border-color: rgba(47,107,255,.45); transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.ig-card.is-off { opacity: .82; }

.ig-prof { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ig-ring {
  flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%;
  padding: 2.5px; display: grid; place-items: center;
  background: conic-gradient(from 210deg, var(--accent), var(--accent-lite), #9FC4FF, var(--accent));
}
.ig-av {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 2.5px solid var(--panel); display: block;
}
.ig-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ig-handle {
  font-size: 16px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ig-name { font-size: 13px; color: var(--faint); letter-spacing: -0.012em; }

.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ig-tile {
  position: relative; display: block; overflow: hidden;
  /* 4:5, the crop Instagram actually uses on a profile grid. 9:16 made each
     card three screens tall on a phone. */
  aspect-ratio: 4 / 5; background: var(--feed-inset); border-radius: 3px;
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-reel {
  position: absolute; top: 7px; right: 7px; width: 15px; height: 15px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); opacity: .95;
}

.ig-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: var(--accent-lite);
}
.ig-go svg { width: 15px; height: 15px; transition: transform .2s ease; }
a.ig-card:hover .ig-go svg { transform: translate(2px, -2px); }
.ig-go--off { color: var(--faint); font-weight: 500; }

@media (max-width: 860px) {
  /* a swipe rail on a phone: two full cards side by side would be thumbnails */
  .ig-rail {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* -24px matches .wrap's gutter, so the rail bleeds to both screen edges */
    margin: 0 -24px; padding: 4px 24px 6px;
  }
  .ig-rail::-webkit-scrollbar { display: none; }
  .ig-card { flex: 0 0 86%; scroll-snap-align: center; padding: 18px; }
  .ig-ring { flex-basis: 52px; width: 52px; height: 52px; }
}


/* ---------- versus, without the photography ----------
   The two cards used to sit on stock-ish photos of a lonely truck and a busy
   one. They were decoration standing in for an argument, and they did not
   describe either future. Flat now: the difference is carried by the surface
   and the type, which is what the copy was doing anyway. */
.versus--flat .vs-card { min-height: 0; padding: 34px; justify-content: flex-start; }
.versus--flat .vs-tag { margin-bottom: 24px; }
.versus--flat .vs-card.cold {
  background: rgba(var(--tint),.025);
  border-color: var(--edge);
  box-shadow: none;
}
.versus--flat .vs-card.cold h3, .versus--flat .vs-card.cold p { color: var(--faint); }
.versus--flat .vs-card.warm {
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(47,107,255,.24) 0%, rgba(47,107,255,0) 58%),
    linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
}
.versus--flat .vs-card p { max-width: 460px; }
.versus--flat .vs-card .btn { margin-top: 28px; }
@media (max-width: 860px) {
  .versus--flat .vs-card.cold, .versus--flat .vs-card.warm { min-height: 0; padding: 28px 24px; }
}


/* ---------- hero to marquee seam ----------
   .hero shipped with `padding: 122px 0 0`, so the client line sat directly on
   the marquee's top hairline with only .social-proof's 20px margin between
   them. Everything else on the page is on the 58/96/136 rhythm; this puts the
   seam on it too. */
.hero { padding-bottom: 84px; }
.marquee { padding: 30px 0; }
@media (max-width: 780px) {
  .hero { padding-bottom: 58px; }
  .marquee { padding: 24px 0; }
  .marquee-item { font-size: 15px; padding: 0 20px; }
}


/* ---------- phone performance ----------
   The aura is nine elements, several of them 62vw wide with a 72px blur. On a
   desktop GPU that is free. On a phone it was most of the "laggy and glitchy"
   Andrew hit while scrolling: nine promoted layers, each one a large blurred
   surface being recomposited on every frame of a momentum scroll.

   will-change is removed outright because nothing animates these. It was
   promoting nine layers to buy an animation that does not exist. */
.ao { will-change: auto; }

@media (max-width: 780px) {
  /* half the field, half the blur radius. The look survives because they
     overlap heavily at this width anyway. */
  .ao-2, .ao-4, .ao-6, .ao-8 { display: none; }
  .ao-a { filter: blur(48px); min-width: 340px; width: 90vw; height: 60vw; }
  .ao-b { filter: blur(36px); min-width: 220px; width: 62vw; height: 44vw; }
  .ao-s { filter: blur(36px); height: 130px; }
  /* the blueprint grid and grain are two more fixed full-screen layers that
     repaint on every scroll frame for almost no visual gain at 390px */
  body::before { background-size: 44px 44px; opacity: .7; }
  /* a stacked backdrop-filter behind small chips is not worth a frame */
  .vs-tag { backdrop-filter: none; }
}


/* ---------- swept section ground ----------
   .section--raise lifts a section on a light wash. Under the "What we actually
   do" block that wash read as a bright band across the page, which Andrew
   called out. This is the alternative: the same crossed sweep gradient the
   heroes use, so the section sits in a pool of light instead of on a grey
   sheet. Content has to clear the backdrop, hence the z-index on .wrap. */
.section--sweep { position: relative; overflow: hidden; }
.section--sweep > .hero-bg .sweep { top: 50%; height: 200px; opacity: .6; }
.section--sweep > .wrap { position: relative; z-index: 3; }


/* ---------- accounts without a grid ----------
   Two of the four handles have no cuts in the proof manifest yet, so they get a
   link and a name and nothing else. Inventing nine tiles for them would break
   the one rule this whole section runs on: every tile is a post that ran. */
.ig-more {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--edge);
}
.ig-more-l {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); flex: 0 0 auto;
}
.ig-chips { display: flex; gap: 12px; flex-wrap: wrap; flex: 1 1 auto; }
.ig-chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px; border-radius: 999px;
  background: rgba(var(--tint),.04); border: 1px solid var(--edge);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.ig-chip:hover {
  border-color: rgba(47,107,255,.45); background: rgba(47,107,255,.08);
  transform: translateY(-2px);
}
.ig-chip-av {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: -0.02em;
}
.ig-chip-id { display: flex; flex-direction: column; gap: 1px; }
.ig-chip-h { font-size: 14.5px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.ig-chip-t { font-size: 12px; color: var(--faint); }
.ig-chip svg { width: 14px; height: 14px; color: var(--accent-lite); transition: transform .2s ease; }
.ig-chip:hover svg { transform: translate(2px, -2px); }

@media (max-width: 860px) {
  .ig-more { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 22px; }
  .ig-chips { width: 100%; }
  .ig-chip { flex: 1 1 100%; }
}


/* ---------- phone-only line break ----------
   A headline that fits on one line on a laptop wraps wherever the measure runs
   out on a phone, which is usually one word short of where it reads best. This
   puts the break on the word Andrew wants and gets out of the way above 780px. */
.br-m { display: none; }
@media (max-width: 780px) { .br-m { display: block; } }


/* ---------- offer stack, after the guarantee was cut ----------
   The right column used to hold the total panel plus a tall guarantee card.
   With the guarantee gone (2026-08-21, Andrew's call) a 179px panel sat beside
   a 558px list and left a hole. The panel now fills the column and centres its
   own content, so the two sides read as a pair again. */
.stack { align-items: stretch; }
.stack-side > .stack-total {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 34px 30px;
}
.stack-side > .stack-total .st-note { margin-top: 20px; }
@media (max-width: 900px) {
  /* stacked, so a full height panel would just be a tall empty box */
  .stack { align-items: start; }
  .stack-side > .stack-total { flex: 0 0 auto; padding: 24px 22px; }
}