/* ==========================================================================
   Blockcircle Indonesia — Coinfest Sale landing page
   Campaign: id-coinfest-2026

   Token names match the production site exactly, so dropping this markup into
   the existing app shell inherits correct styling. Mobile first, base 380px.
   No pill geometry anywhere: buttons and badges are rounded rectangles.
   ========================================================================== */

/* ------------------------------------------------------------- TOKENS ---- */

:root, .dark {
  --bg:            #0a0e17;
  --bg-deep:       #090406;   /* hero ground. Warm black: the photograph's
                                 shadows are red-lit, not blue-lit. */
  --bg-elev:       #0a0d14;
  --card:          #111827;
  --card2:         #1a2035;
  --bdr:           #1e293b;
  --bdr2:          #334155;
  --txt:           #e2e8f0;
  --mut:           #94a3b8;
  --cy:            #26dbd6;
  --cy-bright:     #3fe5e0;
  --cy-deep:       #14a89b;
  --cy-line:       #26dbd62e;
  --cy-line-strong:#26dbd666;
  --cy-mute:       #26dbd614;
  --cy-glow:       #26dbd640;
  --grn:           #34d399;
  --red:           #f87171;
  --bc-blue:       #0071bc;
  --bc-blue-mute:  #0071bc1a;
}

.light, :root.light, [data-theme="light"] {
  --bg:            #f3efe6;
  --bg-deep:       #0a0e17;   /* the hero stays night, in both themes */
  --bg-elev:       #ebe6da;
  --card:          #ebe6da;
  --card2:         #f0ebde;
  --bdr:           #0a143024;
  --bdr2:          #0a143052;
  --txt:           #0a1430;
  --mut:           #7a8092;
  --cy:            #0aa39e;
  --cy-line:       #0aa39e57;
  --cy-mute:       #0aa39e1f;
  --cy-glow:       #0aa39e33;
  --red:           #d33b3b;
}

:root {
  --font-sans:    -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
  --font-code:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-card:  14px;
  --r-btn:   10px;
  --r-tile:  10px;
  --r-badge:  6px;

  --bc-shadow-card:       0 1px 2px #00000040, 0 8px 16px #0000002e, 0 24px 48px #0000001f;
  --bc-shadow-card-hover: 0 1px 2px #0000004d, 0 12px 24px #00000038, 0 28px 56px #00000029, 0 0 24px var(--cy-mute);
  --bc-shadow-cy:         0 0 24px #26dbd626;
  --bc-shadow-cy-strong:  0 0 32px #26dbd647;
  --blur-sm: 8px;

  --bc-gradient-primary:        linear-gradient(135deg, #26dbd6 0%, #14a89b 100%);
  --bc-gradient-primary-bright: linear-gradient(135deg, #3fe5e0 0%, #1fc9c4 100%);
  --bc-gradient-card:           linear-gradient(180deg, #26dbd60a 0%, #26dbd600 100%);
  --bc-gradient-divider:        linear-gradient(90deg, #26dbd600 0%, #26dbd640 50%, #26dbd600 100%);

  --sec-y: 64px;
}

/* --------------------------------------------------------- RESET/BASE ---- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--txt);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  overflow-x: hidden;
}
/* Declared on main as well as on body. Dropped into the site shell this markup
   inherits whatever ground that shell sets, and every block below the hero is
   meant to read as one flat dark surface with nothing behind the copy. */
main { background: var(--bg); }
h1, h2, h3, p, dl, dd, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--font-code); font-variant-numeric: tabular-nums; }

:where(a, button, summary):focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; border-radius: 4px; }

.lg-fg { fill: currentColor; }
.lg-cy { fill: #26dbd6; }
.lg-bl { fill: #0071bc; }
.logo { color: var(--txt); }
.logo--sm { width: 152px; height: 41px; }
.logo--xs { width: 104px; height: 28px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 720px; }
.sec { padding: var(--sec-y) 0; }
.sec > .wrap > h2 { margin-bottom: 20px; }

h2 {
  font-size: clamp(24px, 6vw, 34px); line-height: 1.12;
  letter-spacing: -0.025em; font-weight: 700; text-wrap: balance;
}
.eyebrow {
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cy); margin-bottom: 10px;
}
.lede { color: var(--mut); font-size: 17px; max-width: 60ch; }
.micro { color: var(--mut); font-size: 13px; margin-top: 16px; max-width: 72ch; }
.link { color: var(--cy); text-decoration: underline; text-underline-offset: 3px; }
/* Standalone links get a 44px touch target; the negative margin cancels the
   padding so the visual rhythm is unchanged. */
.micro > .link, .tier__micro > .link, .tiers__foot > .link { display: inline-block; padding: 13px 0; margin: -13px 0; }

/* ------------------------------------------------------------ BUTTONS ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 26px;
  border: 1px solid var(--bdr2); border-radius: var(--r-btn);
  background: var(--card2); color: var(--txt);
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--primary {
  background: var(--bc-gradient-primary); border-color: transparent;
  color: #04141a; box-shadow: var(--bc-shadow-cy);
}
.btn--primary:hover { background: var(--bc-gradient-primary-bright); box-shadow: var(--bc-shadow-cy-strong); }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 56px; font-size: 17px; padding: 15px 34px; }
.btn--sm { min-height: 38px; padding: 8px 16px; font-size: 13px; position: relative; }
/* The sticky bar is 48px tall, so its button keeps a 44px touch target via an
   overlay rather than by growing past the bar. */
.btn--sm::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 44px; transform: translateY(-50%); }
.btn:active { transform: translateY(1px); }

/* --------------------------------------------------------- STICKY BAR ---- */

.stickybar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm));
  border-bottom: 1px solid var(--bdr);
  transform: translateY(-100%); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.stickybar[data-hidden="false"] { transform: none; opacity: 1; }
.stickybar[data-hidden="true"] { pointer-events: none; }
.stickybar__in {
  max-width: 1120px; margin: 0 auto; padding: 0 16px; height: 48px;
  display: flex; align-items: center; gap: 14px;
}
.stickybar__brand { display: none; position: relative; }
.stickybar__brand::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 44px; transform: translateY(-50%); }
.stickybar__val { flex: 1; font-size: 15px; color: var(--cy); letter-spacing: 0.04em; }

/* --------------------------------------------------------------- HERO ---- */

.hero {
  position: relative;
  /* Its own stacking context, so the scrim, the bloom and the copy order
     against each other and not against the rest of the page. */
  isolation: isolate;
  background-color: var(--bg-deep);
  /* Declared once and inherited by the mirror, so the two copies cannot drift
     apart, and so the inliner emits each photograph as one data URI rather
     than base64ing it again for the second reference. */
  --hero-img:  url("assets/hero-monster-sm.jpg");
  --hero-pos:  right -54px top 40px;
  --hero-size: auto 60%;
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-position: var(--hero-pos);
  background-size: var(--hero-size);
  padding: 28px 20px 56px;
  text-align: center;
  overflow: hidden;
}
/* Scrim: guarantees type contrast over the photograph in every viewport.
   Angled on mobile so the figure keeps the upper right while the headline
   sits on solid black, then bottom-fades into the page ground. */
/* The same photograph flipped, so the pair face each other across the copy.
   Screen blending rather than a second asset: the source's empty half is black
   and screen leaves black untouched, which reuses the 81 KB already loaded
   instead of pushing the page past its weight budget for a mirror image. */
.hero__mir {
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-position: var(--hero-pos);
  background-size: var(--hero-size);
  transform: scaleX(-1);
  mix-blend-mode: screen;
}
/* Symmetric now that a figure holds each side: the scrim is heaviest through
   the middle, where the headline sits, and lifts toward both edges. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, #090406d9 0%, #09040673 24%, #09040640 46%, #090406eb 76%, var(--bg) 100%),
    linear-gradient(90deg, #09040633 0%, #09040680 22%, #090406e6 46%,
                           #090406e6 54%, #09040680 78%, #09040633 100%);
}
/* The bloom. Painted over the scrim, under the copy: the scrim's job is
   contrast and it would otherwise flatten this back to black.

   The warm light on this page begins and ends inside the hero, which is where
   the photograph puts it. The lower lobe therefore has to reach zero before the
   hero's bottom edge. Carried to the edge it would end on a hard horizontal cut
   against the flat ground below, which reads as a band rather than as light. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 30% at 82% 26%,
      #ff6a3a5e 0%, #e8241c3d 30%, #8c0f1c1f 56%, #8c0f1c00 78%),
    radial-gradient(ellipse 44% 30% at 18% 26%,
      #ff6a3a5e 0%, #e8241c3d 30%, #8c0f1c1f 56%, #8c0f1c00 78%),
    radial-gradient(ellipse 74% 22% at 50% 72%,
      #c4121f30 0%, #6d0a1e1c 38%, #6d0a1e00 74%);
}
.hero__in { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }

.lockup { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 34px; }
.lockup__x { color: var(--mut); font-size: 17px; }
.lockup__cf { width: 132px; height: auto; }

h1 {
  font-size: clamp(46px, 15vw, 108px);
  line-height: 0.94; letter-spacing: -0.045em; font-weight: 900;
  margin-bottom: 14px; text-wrap: balance;
}
.hero__accent {
  background: linear-gradient(100deg, var(--cy) 0%, var(--cy-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--cy);
}
.hero__offer { font-size: clamp(21px, 5.4vw, 30px); font-weight: 700; letter-spacing: -0.015em; }
.hero__bonus { color: var(--cy); font-size: clamp(15px, 3.6vw, 18px); font-weight: 600; margin-top: 4px; }
.hero__micro { color: var(--mut); font-size: 13px; margin-top: 14px; }
.hero .btn--lg { margin-top: 26px; min-width: 260px; }

/* ---------------------------------------------------------- COUNTDOWN ---- */

.cd { margin-top: 30px; }
.cd__label {
  font-family: var(--font-code); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mut); margin-bottom: 10px;
}
.cd__tiles { display: flex; justify-content: center; gap: 8px; }
.cd__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 68px; padding: 10px 6px 8px;
  background: #0d1420cc; border: 1px solid var(--bdr);
  border-radius: var(--r-tile);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cd__n { font-size: 27px; font-weight: 700; line-height: 1.05; color: var(--txt); }
.cd__u { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); margin-top: 3px; }
.cd__expired { display: none; font-size: 17px; font-weight: 700; color: var(--red); }

[data-campaign-phase="final"] .cd__tile { border-color: var(--cy-line-strong); box-shadow: var(--bc-shadow-cy); }
[data-campaign-phase="final"] .cd__n { color: var(--cy); }
[data-campaign-phase="final"] .cd__label { color: var(--cy); }

[data-campaign-phase="expired"] .cd__tiles,
[data-campaign-phase="expired"] .cd__label,
[data-campaign-phase="expired"] .hero__offer,
[data-campaign-phase="expired"] .hero__bonus,
[data-campaign-phase="expired"] .hero__micro,
[data-campaign-phase="expired"] .cl__price,
[data-campaign-phase="expired"] .cl__deadline,
[data-campaign-phase="expired"] .stickybar { display: none; }
[data-campaign-phase="expired"] .cd__expired { display: block; }

/* -------------------------------------------------------- PRICE BLOCK ---- */

.sec--price { padding-top: 0; margin-top: -28px; position: relative; z-index: 1; }

/* Below 1000px the three tiers are a snap rail with the offer leading and the
   next card peeking, so the swipe is self-evident. From 1000px they become
   three columns whose six bands share row tracks through subgrid: the name,
   the price, the button and every feature row line up across all three.
   Without subgrid it degrades to flex columns of equal height. */
.tiers {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -20px; padding: 2px 20px 10px;
}
.tiers::-webkit-scrollbar { display: none; }

.tier {
  flex: 0 0 88%; max-width: 400px;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-card);
  overflow: hidden;
}
.tier--offer {
  order: -1;
  background: var(--bc-gradient-card), var(--card);
  border-color: var(--cy-line-strong);
  box-shadow: var(--bc-shadow-cy);
}

.tier__flag {
  min-height: 26px; padding: 6px 12px;
  font-family: var(--font-code); font-size: 10px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; text-align: center;
  color: #04141a; background: var(--bc-gradient-primary);
}
.tier__flag:empty { background: none; }

.tier__meta    { padding: 22px 20px 0; }
.tier__pricing { padding: 12px 20px 0; }
.tier__cta     { padding: 18px 20px 20px; }
.tier__cta--foot { padding: 4px 20px 20px; margin-top: auto; }

.tier__name { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }

/* The struck list price takes its own line above the headline figure. Set side
   by side, "Rp 349.000 Rp 244.300 /mo" overruns a 350px column and wraps. */
.tier__was { font-size: 14px; color: var(--mut); }
.tier__was s { text-decoration-thickness: 1px; }
.tier__price { display: flex; align-items: baseline; gap: 0 7px; margin-top: 2px; }
.tier__price b { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.tier--offer .tier__price b { color: var(--cy); }
.tier__per { font-size: 13px; color: var(--mut); }
.tier__micro { font-size: 11.5px; color: var(--mut); line-height: 1.5; margin-top: 8px; }

.feat { display: block; padding: 0 20px; }
.feat__row {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 0; font-size: 13.5px; line-height: 1.45;
  border-top: 1px dashed var(--bdr);
}
.feat__row:first-child { border-top: 1px solid var(--bdr); }
.feat__i { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--cy); }
.feat__l { min-width: 0; }
/* Dimmed, not unreadable: TradingView greys these out to about 2.7:1, which
   fails AA. --mut at full strength still reads as excluded next to --txt. */
.feat__row.is-off { color: var(--mut); }
.feat__row.is-off .feat__i { color: var(--bdr2); }

.tiers__foot { font-size: 12.5px; color: var(--mut); margin-top: 16px; }

.tier__expired { display: none; color: var(--txt); }
[data-campaign-phase="expired"] .tier__expired { display: block; }
/* visibility, not display: the cards keep the same geometry once the sale
   closes, so nothing jumps when the page crosses the deadline mid-visit. */
[data-campaign-phase="expired"] .tier__was,
[data-campaign-phase="expired"] .tier--offer .tier__flag { visibility: hidden; }
[data-campaign-phase="expired"] .tier--offer .tier__price b { color: var(--txt); }

/* ----------------------------------------------------------- COINFEST ---- */

.cf { display: grid; gap: 26px; margin-top: 28px; }
.datablock {
  display: grid; gap: 12px; font-size: 14px;
  border-top: 1px solid var(--bdr); padding-top: 18px;
}
.datablock > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.datablock dt { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
.datablock dd { color: var(--txt); text-align: right; }
.cf__partners-h { font-size: 13px; color: var(--mut); margin-bottom: 14px; }
.partners { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.partnerlogo { background: #0a0e17; border-radius: 8px; padding: 8px 12px; }
.partnerwordmark { font-family: var(--font-code); font-size: 13px; color: var(--txt); }
.cf__note { font-size: 14px; color: var(--mut); margin-top: 16px; }
.cf__speaker { font-size: 14px; color: var(--cy); margin-top: 12px; }

/* ------------------------------------------------------------ MODULES ---- */

/* The 1px gap between cells is the separator, so the container carries the
   line colour and the cells sit on it. */
.mods { display: grid; gap: 1px; background: var(--bdr); border: 1px solid var(--bdr);
        border-radius: var(--r-card); overflow: hidden; margin-top: 8px; }
.mod { background: var(--bg); padding: 22px 20px; }
.mod--prem { background: linear-gradient(180deg, var(--cy-mute) 0%, transparent 70%), var(--bg); }
.mod__name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.mod__desc { font-size: 14px; color: var(--mut); }
.mod__stat { margin-top: 12px; font-size: 17px; font-weight: 700; color: var(--cy); }
.mod__stat span { font-size: 11px; color: var(--mut); font-weight: 400; letter-spacing: 0.04em; margin-left: 6px; }

/* -------------------------------------------------------------- PROOF ---- */

.quotes { display: grid; gap: 20px; margin-top: 8px; }
.quote { border-left: 2px solid var(--cy-line-strong); padding-left: 16px; }
.quote blockquote { font-size: 15px; color: var(--txt); }
.quote__by { margin-top: 10px; font-size: 13px; font-weight: 700; }
.quote__by span { display: block; font-family: var(--font-code); font-size: 11px; font-weight: 400; color: var(--mut); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
         margin-top: 34px; background: var(--bdr); border: 1px solid var(--bdr);
         border-radius: var(--r-card); overflow: hidden; }
.stats li { background: var(--bg); padding: 16px 12px; text-align: center; }
.stats b { display: block; font-size: 20px; color: var(--cy); letter-spacing: -0.02em; }
.stats span { font-family: var(--font-sans); font-size: 11px; color: var(--mut); }
.stats li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 22px; }
/* De-emphasised by colour, not by opacity. At the old .55 this row was already
   under AA against the page ground. --mut on its own is quiet enough. */
.logos li { font-family: var(--font-code); font-size: 12px; letter-spacing: 0.06em; color: var(--mut); transition: color .15s ease; }
.logos li:hover { color: var(--txt); }

/* ---------------------------------------------------------- PAYMENTS ----- */

.paygrid { display: grid; gap: 14px; }
.pay { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-card); padding: 20px; }
.pay__name { font-family: var(--font-code); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; margin: 10px 0 4px; }
.pay__desc { font-size: 13px; color: var(--mut); }
.ico { width: 16px; height: 16px; color: var(--cy); }
.ico--lg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- FAQ ---- */

.faq { border-bottom: 1px solid var(--bdr); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 32px 18px 0; min-height: 48px;
  font-size: 16px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-code); font-size: 19px; color: var(--cy);
}
.faq[open] summary::after { content: "–"; }
.faq__a { padding-bottom: 18px; font-size: 15px; color: var(--mut); }

/* ------------------------------------------------- CLOSING / DISCLAIMER -- */

/* One step down from the page ground, framed top and bottom, so the last CTA
   sits in a band of its own without any colour being used to mark it out. */
.sec--closing { text-align: center; background: var(--bg-elev);
                border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr); }
.cl__price { font-size: 30px; margin-top: 16px; }
.cl__price s { color: var(--mut); font-size: 19px; }
.cl__price b { color: var(--cy); }
/* renderExpired rewrites the headline figure back to list. Without this the
   line would read "Rp 349.000 Rp 349.000" once the sale closes. */
[data-campaign-phase="expired"] .cl__price s { display: none; }
[data-campaign-phase="expired"] .cl__price b { color: var(--txt); }
.cl__per { font-size: 15px; color: var(--mut); }
.cl__deadline { font-size: 13px; color: var(--mut); margin: 6px 0 24px; }
.sec--disc { padding: 40px 0; background: var(--bg); }
.disc__h { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.16em;
           text-transform: uppercase; color: var(--mut); font-weight: 400; margin-bottom: 10px; }
.disc { font-size: 12.5px; color: var(--mut); line-height: 1.6; }

/* ------------------------------------------------------------- FOOTER ---- */

.foot { border-top: 1px solid var(--bdr); padding: 32px 0 48px; background: var(--bg-elev); }
.foot .logo { margin-bottom: 18px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.foot__nav a { color: var(--mut); text-decoration: none; min-height: 44px; min-width: 44px;
               padding: 0 6px; margin: 0 -6px; display: inline-flex; align-items: center; }
.foot__nav a:hover { color: var(--txt); }
.foot__legal { margin-top: 14px; font-size: 12px; color: var(--mut); max-width: 70ch; }

/* --------------------------------------------------------- RESPONSIVE ---- */

@media (min-width: 701px) {
  /* The mirror inherits all three, so it needs no override of its own. */
  .hero {
    --hero-img:  url("assets/hero-monster.jpg");
    --hero-pos:  center right;
    --hero-size: cover;
    padding: 40px 20px 80px;
  }
  .hero::before {
    background:
      linear-gradient(90deg, #09040640 0%, #090406a6 20%, #090406e6 42%,
                             #090406e6 58%, #090406a6 80%, #09040640 100%),
      linear-gradient(180deg, #09040699 0%, #09040600 30%, #090406d9 88%, var(--bg) 100%);
  }
  /* Both figures fill the frame at this width, so each gets its own key light
     and the lower lobe centres between them. */
  .hero::after {
    background:
      radial-gradient(ellipse 32% 58% at 83% 46%,
        #ff6a3a66 0%, #e8241c42 28%, #8c0f1c24 54%, #8c0f1c00 76%),
      radial-gradient(ellipse 32% 58% at 17% 46%,
        #ff6a3a66 0%, #e8241c42 28%, #8c0f1c24 54%, #8c0f1c00 76%),
      radial-gradient(ellipse 70% 40% at 50% 96%,
        #c4121f3d 0%, #6d0a1e26 38%, #6d0a1e00 72%);
  }
}

@media (min-width: 640px) {
  .paygrid { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(5, 1fr); }
  .stats li:last-child:nth-child(odd) { grid-column: auto; }
  .mods { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: repeat(3, 1fr); }
  .stickybar__brand { display: block; }
  .cd__tile { min-width: 82px; padding: 12px 10px 10px; }
  .cd__n { font-size: 34px; }
  .lockup__cf { width: 158px; }
}

@media (min-width: 900px) {
  :root { --sec-y: 88px; }
  .mods { grid-template-columns: repeat(3, 1fr); }
  .cf { grid-template-columns: 1fr 1fr; align-items: start; }
  .cd__tile { min-width: 92px; }
  .cd__n { font-size: 38px; }
  .sec--price { margin-top: -44px; }
  .hero { padding: 48px 20px 104px; }
}

@media (min-width: 1200px) {
  .lede { font-size: 18px; }
}

/* 1000px, not 900: the widest feature label needs a 298px column, so three
   columns plus gaps and page padding need 962px before any row wraps. Below
   that the rail is the honest layout. */
@media (min-width: 1000px) {
  .tiers {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; overflow: visible; margin: 0; padding: 0;
    scroll-snap-type: none;
  }
  .tier { flex: none; max-width: none; }
  .tier--offer { order: 0; }
  .tiers__foot { text-align: center; }
}

/* Six shared row tracks, so the price line, the button and every feature row
   sit on the same baseline in all three columns. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1000px) {
    .tiers { grid-template-rows: repeat(6, auto); }
    .tier {
      display: grid; grid-row: span 6;
      grid-template-rows: subgrid;
    }
    .tier__cta--foot { margin-top: 0; align-self: end; }
  }
}

/* ----------------------------------------------------- MOTION/CONTRAST --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print { .stickybar { display: none; } body { background: #fff; color: #000; } }