/* ==========================================================================
   Storefront sections: nav, hero, VSL, pricing grid, proof, CTA band, footer.
   ========================================================================== */

/* Vertical rhythm is deliberately uneven - the pricing grid gets the most air,
   the VSL the least, so the page has hierarchy instead of symmetry. */
.section {
  padding-block: clamp(56px, 9vh, 104px);
}

.section__head {
  display: grid;
  gap: var(--sp-3);
  max-width: 64ch;
  margin-bottom: var(--sp-6);
}

.section__head--between {
  max-width: none;
}

@media (min-width: 900px) {
  .section__head--between {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-6);
  }

  .section__head--between > div:first-child {
    max-width: 58ch;
  }
}

/* ==================================== NAV ================================= */

.nav {
  position: fixed;
  top: var(--sp-3);
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-nav);
  width: min(calc(100% - 2 * var(--sp-3)), var(--container));
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 9px 10px 9px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    padding var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out);
}

.nav.is-scrolled .nav__inner {
  padding-block: 6px;
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-lift);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.nav__logo i {
  color: var(--accent);
}

.nav__links {
  display: none;
}

.nav__link {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  transition:
    color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}

.nav__link:hover {
  color: var(--text);
  background: var(--surface-glass-2);
}

.nav__link.is-active {
  color: var(--text);
  background: var(--surface-3);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav__burger {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  color: var(--text-2);
}

.nav__burger:hover {
  background: var(--surface-2);
}

.nav__drawer {
  display: grid;
  gap: 2px;
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background: var(--surface-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lift);
}

.nav__drawer[hidden] {
  display: none;
}

.nav__drawer .nav__link {
  padding: 11px 14px;
  border-radius: var(--r-md);
}

@media (min-width: 900px) {
  .nav__links {
    display: flex;
    gap: 2px;
  }

  .nav__burger,
  .nav__drawer {
    display: none !important;
  }
}

/* Below ~380px the pill's three items - logo, CTA, burger - are together 282px
   wide against 268px of inner space at 320px, and 228px on a folded Fold. There
   is no scrollbar to reveal it either, because body sets `overflow-x: clip`, so
   the label was simply sliced off. Dropping to the bolt alone brings it to
   192px; the anchor keeps an aria-label so the action stays named. */
@media (max-width: 379px) {
  .nav__inner {
    padding-inline: 13px 8px;
  }

  .nav__cta-label {
    display: none;
  }
}

/* =================================== HERO ================================= */

.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 84px));
  padding-bottom: clamp(48px, 8vh, 96px);
}

/* Light layer 1: the crystalline video.

   This is the layer whose absence made the hero read as "a flat box". In the
   Theme B design the glass panel sits directly on top of this footage, so its
   6% white fill refracts moving texture. With nothing behind it, that same fill
   over flat navy is just a slightly lighter navy rectangle - which is exactly
   what shipped. */
.hero__crystal {
  position: absolute;
  top: 0;
  right: 0;
  width: 66%;
  height: 100%;
  z-index: -2;
  opacity: 0.18;
  pointer-events: none;
  /* Dissolves the footage before it reaches the headline, so the copy keeps a
     plain dark backdrop and full contrast. */
  mask-image: radial-gradient(
    ellipse 68% 82% at 80% 24%,
    #000 6%,
    rgba(0, 0, 0, 0.4) 46%,
    transparent 76%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 68% 82% at 80% 24%,
    #000 6%,
    rgba(0, 0, 0, 0.4) 46%,
    transparent 76%
  );
}

.hero__crystal video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A tightly constrained crystalline light source in the top-left quadrant.
   Deliberately NOT a full-page aurora wash: it has to stop before it reaches
   the copy, so the page still reads as a dark void with one lit corner. */
.hero__beam {
  position: absolute;
  top: -16%;
  left: -12%;
  width: min(54vw, 660px);
  height: 96%;
  z-index: -2;
  background:
    radial-gradient(
      ellipse 66% 58% at 32% 30%,
      color-mix(in srgb, var(--accent) 13%, transparent),
      transparent 70%
    ),
    linear-gradient(
      158deg,
      color-mix(in srgb, var(--accent) 9%, transparent) 0%,
      color-mix(in srgb, var(--surface-3) 45%, transparent) 42%,
      transparent 72%
    );
  filter: blur(38px);
  pointer-events: none;
  /* The slow breath from the Theme B design. Opacity only: animating the
     gradient stops or the blur radius would repaint a 660px blurred layer on
     every frame, and the visible result is identical. */
  animation: drift 34s var(--ease-in-out) infinite alternate;
}

/* Both light layers are also parallaxed on scroll - see js/modules/hero.js,
   which writes translate3d() onto them. */
@keyframes drift {
  from {
    opacity: 0.68;
  }
  to {
    opacity: 1;
  }
}

.hero__pool {
  position: absolute;
  top: 30%;
  left: 0;
  width: min(44vw, 560px);
  height: 36vh;
  z-index: -2;
  background: radial-gradient(
    ellipse at 38% 50%,
    color-mix(in srgb, var(--surface-3) 55%, transparent),
    transparent 66%
  );
  filter: blur(52px);
  pointer-events: none;
}

.hero__lines {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--hairline-faint) 1px, transparent 1px),
    linear-gradient(var(--hairline-faint) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 70% at 20% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 20% 30%, #000 20%, transparent 75%);
}

.hero__layout {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}

.hero__copy {
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.hero__kicker b {
  color: var(--accent);
  font-weight: 700;
}

.hero__kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-wash);
  animation: dot-pulse 2.4s var(--ease-in-out) infinite;
}

.hero h1 {
  max-width: 20ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--text-muted);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Trust signals woven into one sentence instead of a row of badge cards. */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero__trust i {
  font-size: 12px;
  color: var(--accent);
}

.hero__trust b {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--text);
  letter-spacing: -0.02em;
}

/* ------------------------------- stock panel ------------------------------ */

.stock {
  width: 100%;
  padding: var(--sp-4);
}

.stock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--hairline);
}

.stock__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.stock__title i {
  color: var(--ok);
  font-size: 10px;
}

.stock__list {
  display: grid;
}

.stock__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 10px 8px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background-color var(--t-fast) var(--ease-out);
}

.stock__row:hover {
  background: var(--surface-2);
}

.stock__name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock__price {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
}

.stock__foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}

/* Stacked under the copy below 1024px. Left to stretch, the panel becomes an
   836px band holding five 34px rows, which reads as an empty strip rather than
   a card - so it is capped until it earns its own column. */
.hero__aside {
  width: 100%;
  max-width: 460px;
}

@media (min-width: 1024px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: var(--sp-8);
  }

  .hero__aside {
    max-width: none;
    padding-top: var(--sp-5);
  }
}

/* -------------------------------- marquee --------------------------------- */

/* Full-width band with faded edges so the scrolling logos read as a ticker
   rather than a hard-edged strip. */
.marquee {
  position: relative;
  width: 100%;
  padding-block: var(--sp-4);
  border-block: 1px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
  transform: none !important;
  rotate: 0deg !important;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none; /* Prevent any hover/focus from interfering */
}

.marquee__viewport {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.marquee__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-right: var(--sp-7);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Every item — including the last of a track — carries the same trailing gap.
   That uniformity is what makes the wrap invisible: the seam between the tail
   of one cycle and the head of the next is spaced exactly like every other
   pair, so the strip reads as one endless line rather than a repeating loop
   with a hole in it. */

.marquee__item .logo-glyph {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__viewport {
    transform: none !important;
  }

  .hero__beam {
    animation: none;
    opacity: 1;
  }

  .hero__kicker::before {
    animation: none;
  }

  .review:hover {
    transform: none;
  }

  .pcard:hover {
    transform: none;
  }

  .pcard:hover .logo-tile {
    transform: none;
  }

  .vsl__overlay:hover .vsl__btn {
    scale: 1;
  }
}

/* =================================== VSL ================================== */

.vsl {
  padding-block: clamp(44px, 7vh, 84px);
}

.vsl__layout {
  display: grid;
  gap: var(--sp-6);
}

.vsl__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--hairline-strong);
}

.vsl__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition:
    opacity var(--t-slow) var(--ease-out),
    scale var(--t-slow) var(--ease-out);
}

.vsl__frame:hover .vsl__poster {
  opacity: 0.9;
  scale: 1.04;
}

.vsl__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: linear-gradient(to top, rgba(12, 10, 9, 0.88) 0%, rgba(12, 10, 9, 0.16) 60%);
  cursor: pointer;
}

/* A frosted glass disc. The concentric neon "ripple" pings that used to sit
   behind it were the loudest motion on the page. */
.vsl__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--surface-glass-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  font-size: 20px;
  padding-left: 4px;
  box-shadow: var(--inset-top), var(--shadow-lift);
  transition:
    scale var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out);
}

.vsl__overlay:hover .vsl__btn {
  scale: 1.07;
  border-color: var(--accent-line);
}

.vsl__caption {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The headline and the nowrap view count need 337px side by side; the caption
     only has 224px inside a 320px screen. Without wrapping, the headline was
     compressed into three or four lines behind the play button. */
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.vsl__caption strong {
  font-family: var(--font-display);
}

/* Under 480px even a wrapped caption spends two of its lines on a vanity
   metric. The walkthrough's own headline is the thing worth reading. */
@media (max-width: 479px) {
  .vsl__caption .badge {
    display: none;
  }
}

.vsl__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------ how it works ------------------------------ */

/* A ladder: each step's number sits on a vertical hairline that threads the
   three together, so the sequence reads as one process rather than three
   unrelated blocks. */
.steps {
  display: grid;
  gap: var(--sp-5);
  counter-reset: step;
}

.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--sp-4);
  counter-increment: step;
}

.steps li::before {
  content: '0' counter(step);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  padding-top: 3px;
}

/* The connector, drawn from each number down to the next. */
.steps li::after {
  content: '';
  position: absolute;
  top: 26px;
  bottom: calc(-1 * var(--sp-5));
  left: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent-line), var(--hairline-faint));
}

.steps li:last-child::after {
  display: none;
}

.steps h3 {
  font-size: var(--fs-md);
  margin-bottom: 2px;
}

.steps p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (min-width: 1024px) {
  .vsl__layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: center;
  }
}

/* The video deliberately breaks out of the section's top edge - but that edge is
   `clamp(44px, 7vh, 84px)`, so the 64px pull only has room to go once the
   viewport is tall enough. On a 1024x600 window the padding clamps to 44px and
   the frame escaped 20px past it, into the rotated marquee above. The height
   guard is what the clamp already implies. */
@media (min-width: 1024px) and (min-height: 900px) {
  .vsl__frame {
    margin-top: calc(-1 * var(--sp-8));
  }
}

/* ================================= PRICING ================================ */

.pricing {
  padding-block: clamp(64px, 11vh, 128px);
}

.filters {
  display: flex;
  gap: var(--sp-2);
  /* Bleeds out to the viewport edges and pads itself back in, so a pill that is
     scrolled off runs to the edge of the screen instead of being clipped inside
     the container's padding - which reads as broken rather than scrollable. */
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar {
  display: none;
}

.grid-products {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .grid-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 860, not 940. Between the two the grid was still 2-up, which made each card
   410px wide - nearly double the 272px it gets on a desktop 4-up row - and a
   46px logo above four short feature lines cannot fill that. */
@media (min-width: 860px) {
  .grid-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .grid-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  transition:
    transform var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out);
}

.pcard {
  box-shadow: var(--inset-top), var(--inner-vignette);
}

.pcard:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow:
    var(--inset-top),
    var(--shadow-hover),
    0 0 28px -8px rgba(245, 158, 11, 0.18);
}

.pcard:hover .logo-tile {
  transform: scale(1.06) rotate(-4deg);
}

/* The logo and the stock status share the card's top row.

   The pill used to be position:absolute in the corner, with a fixed 64px
   reserve (padding-right) on .pcard__head to keep the title clear of it. That
   reserve was a guess: "Instant Access" renders ~115px wide, so the pill
   overhung it and printed over the product name. CSS cannot size a reserve to
   a variable-width absolute box, so the pill now participates in the layout
   and the overlap is structurally impossible rather than merely unlikely. */
.pcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  /* Trims the card's 16px flex gap to 8px under the logo row. */
  margin-bottom: calc(-1 * var(--sp-2));
}

.pcard__status {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pcard__status--warn {
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
  background: var(--warn-wash);
  color: var(--warn);
}

/* The title block now spans the full card width instead of sharing a row with
   the logo, so "GitHub Copilot Pro" and "1 Month · Private Account" get the
   whole 240px to lay out in rather than 60px beside a 46px tile. */
.pcard__head {
  display: grid;
  gap: 2px;
}

.pcard__name {
  font-size: var(--fs-lg);
  line-height: 1.15;
  /* Long single words (e.g. a future "Midjourney" tier) break instead of
     widening the grid track and forcing a horizontal scrollbar. */
  overflow-wrap: anywhere;
}

.pcard__plan {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.pcard__features {
  flex: 1;
}

.pcard__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--warn);
}

.pcard__foot {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline-faint);
}

.pcard__delivery {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.grid-products__empty {
  grid-column: 1 / -1;
}

/* ============================== PROOF (reviews + faq) ===================== */

.proof__layout {
  display: grid;
  gap: var(--sp-7);
}

/* Weighted towards the reviews, which are a two-column masonry wall and need
   the room. The FAQ is a list of single-line triggers and is comfortable in
   whatever is left. At 1fr / 1.04fr the wall only ever got half the container. */
@media (min-width: 1024px) {
  .proof__layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

/* The wall's column count has to follow the width of its own track, not the
   width of the window. Those are the same thing only until 1024px, where
   .proof__layout splits and the track becomes roughly half the container. */
.proof__col {
  container-type: inline-size;
}

.reviews {
  columns: 1;
  column-gap: var(--sp-3);
}

/* 600px is the point at which two columns still leave ~294px each - about 40
   characters of 13px body text per line. The old `@media (min-width: 560px)`
   asked the viewport instead, so a 1024px laptop got two 214px columns of
   28-character lines: narrower than the same wall on a phone. */
@container (min-width: 600px) {
  .reviews {
    columns: 2;
  }
}

.review {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--inset-top);
  transition:
    border-color var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out);
}

/* Two opposed corner dots. A drafted, technical marker that gives the wall
   texture without another border or another fill. */
.review::before,
.review::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}

.review::before {
  top: 7px;
  left: 7px;
}

.review::after {
  bottom: 7px;
  right: 7px;
}

.review:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}

.review__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.review__head img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.review__name {
  font-size: var(--fs-sm);
  font-weight: 650;
}

.review__meta {
  font-size: 11px;
  color: var(--text-faint);
}

.review p {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.review__amount {
  display: inline-block;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}

.review__verified {
  color: var(--ok);
  font-size: 11px;
}

/* ================================ CTA BAND ================================ */

.cta-band {
  padding-block: clamp(48px, 8vh, 88px);
}

.cta-band__inner {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--sp-5);
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--inset-top), var(--shadow-lift);
}

/* A contained accent bloom inside the panel. It sits behind the content and
   is clipped by the panel's own overflow, so it lights the box from within
   rather than haloing the page around it. */
.cta-band__inner::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 46%;
  height: 220%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--accent) 18%, transparent),
    transparent 66%
  );
  filter: blur(34px);
  pointer-events: none;
}

.cta-band__inner > * {
  position: relative;
}

@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-7);
  }
}

/* ================================= FOOTER ================================= */

.footer {
  padding-block: var(--sp-7) var(--sp-5);
  background: var(--bg-deep);
  border-top: 1px solid var(--hairline);
}

.footer__layout {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 760px) {
  .footer__layout {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
}

.footer h4 {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
  color: var(--text);
}

.footer__links {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.footer__links a:hover {
  color: var(--accent);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.footer__socials {
  display: flex;
  gap: var(--sp-2);
}

/* ============================ CHECKOUT MODAL BITS ========================= */

.summary {
  display: grid;
  gap: var(--sp-4);
}

.summary__product {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.summary__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 650;
}

.summary__plan {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.summary__rows {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--hairline);
  font-size: var(--fs-sm);
}

.summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--text-muted);
}

.summary__row b {
  color: var(--text);
}

.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.summary__total span {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.summary__total strong {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--accent);
}

.summary__perks {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.summary__perks li {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}

.summary__perks i {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ok);
}

.summary__divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.summary__divider::before,
.summary__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.pay-panel {
  display: grid;
  gap: var(--sp-3);
}

.pay-panel[hidden] {
  display: none;
}

.pay-panel__rows {
  display: grid;
  gap: var(--sp-2);
}

.checkout__form {
  display: grid;
  gap: var(--sp-5);
}

.checkout__section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text);
  margin-bottom: var(--sp-3);
}

.checkout__section-title span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}

/* ------------------------------ success state ----------------------------- */

.success {
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
}

.success__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ok-wash);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  color: var(--ok);
  font-size: 24px;
}

.success__ref {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.success__actions {
  display: grid;
  gap: var(--sp-3);
  width: 100%;
  max-width: 360px;
}