/* ============================================================================
   SELECT COIN — Lagoon Nebula background, plan selection
   ============================================================================ */

/* ═══ HERO SCENE — nebula background ═══ */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Nebula image — fixed cover, always fills viewport */
.hero-nebula {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero-nebula img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
}

/* Overlay removed — nebula renders at full brightness */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Content — fills the viewport so the summary can pin to the bottom (always
   on screen); nebula sits fixed behind. */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Colin, 2026-09-01: "it needs to be in the same position as all other
       titles on the website" -- was a tighter custom top padding (reclaimed
       vertical room for the old multi-step wizard's cards); now the page is
       a single scrollable page (no more fit-on-one-screen constraint), so
       there's no longer a reason to diverge from the sitewide standard.
       Bottom padding used to reserve extra room for the fixed-position
       .summary-fixed-wrap (2026-09-02 -> 2026-09-05); superseded the same
       day it moved back into normal flow (see that rule's own comment) --
       plain 4rem now, same as every other flow step. */
    padding: var(--as-hero-padding-top) 2rem 4rem;
}

/* Colin, 2026-09-04: three-step reveal, driven entirely by #heroContent's
   data-flow-step -- CLEAN (deep clean only + its own CONTINUE button) ->
   PICK (deep clean collapsed, BASE+PRO expanded, comparing) -> CHOSEN (a
   package picked, all three collapse, summary box appears). JS toggles the
   attribute (select_plan.html's applyFlowStep()); these rules only ever
   hide/show, they never touch .plan-details' own .show state. */
#heroContent[data-flow-step="clean"] [data-plan="package_1"],
#heroContent[data-flow-step="clean"] [data-plan="package_2"] {
    display: none;
}
/* Colin, 2026-09-05: "remove the deep clean box from this page [PICK] ...
   DO NOT change the position of the 2 subscription boxes." visibility:
   hidden (not display:none) keeps DEEP CLEAN's card taking up its own
   space in the .plan-stack flex column, so BASE/PRO don't shift up to
   fill the gap -- they stay at the exact same pixel position PICK
   already had them at. DEEP CLEAN reappears (this rule doesn't apply)
   in both CLEAN and CHOSEN steps. */
#heroContent[data-flow-step="pick"] [data-plan="initial_clean"] {
    visibility: hidden;
}
/* One subtitle per flow step (W47/D4 resolved 2026-09-11: CLEAN = "A CLEAN
   DATABASE IS A HAPPY DATABASE", PICK = "PICK ONE" (unchanged), CHOSEN =
   "Almost there"). Same show/hide pattern for all three -- default hidden,
   shown only under their own data-flow-step value. */
.clean-step-subtitle, .pick-step-subtitle, .chosen-step-subtitle { display: none; }
#heroContent[data-flow-step="clean"] .clean-step-subtitle { display: block; }
#heroContent[data-flow-step="pick"] .pick-step-subtitle { display: block; }
#heroContent[data-flow-step="chosen"] .chosen-step-subtitle { display: block; }
#heroContent:not([data-flow-step="chosen"]) .summary-fixed-wrap {
    display: none;
}
#heroContent:not([data-flow-step="clean"]) .clean-continue-row {
    display: none;
}
/* Colin, 2026-09-05: "when they have selected a subscription, the price
   of the one they did not select is gone -- before it confuses clients."
   Once CHOSEN, the un-picked package's header still shows (name only) so
   it stays visible in the collapsed stack, but its price/pay-frequency
   is hidden -- nothing left implying they might be charged for it too. */
#heroContent[data-flow-step="chosen"] [data-plan="package_1"]:not(.selected) .plan-header-right,
#heroContent[data-flow-step="chosen"] [data-plan="package_2"]:not(.selected) .plan-header-right {
    display: none;
}
/* Colin, 2026-09-05: "make the subscription not selected, the title
   (BASE/PRO) greyed out" -- the un-picked package's name stays visible
   (above) but now reads muted, reinforcing it's not the active choice. */
#heroContent[data-flow-step="chosen"] [data-plan="package_1"]:not(.selected) .plan-label,
#heroContent[data-flow-step="chosen"] [data-plan="package_2"]:not(.selected) .plan-label {
    color: rgba(255, 255, 255, 0.35);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.35);
}

/* ═══ TITLE ═══ */
.coin-title {
    font-family: var(--as-title-font);
    font-size: var(--as-title-size);
    letter-spacing: var(--as-title-spacing);
    line-height: var(--as-title-line-height);
    white-space: nowrap;

    /* S-6: title gradient = navbar/MENU scheme (white→purple→pink). */
    background: var(--s6-title-gradient);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: var(--effect-titleCutout);
}

.coin-subtitle {
    font-family: var(--as-subtitle-font);
    font-weight: var(--as-subtitle-weight);
    font-size: var(--as-subtitle-size);
    letter-spacing: var(--as-subtitle-spacing);
    line-height: var(--as-subtitle-line-height);
    text-transform: uppercase;

    /* S-6: subtitle gradient = inverse of the title (pink→purple→white). */
    background: var(--s6-subtitle-gradient);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    margin-top: var(--as-subtitle-gap);
    filter: var(--effect-subtitleCutout);
}

/* ═══ SUBSCRIPTION CONTAINER ═══ */
.subs-container {
    font-family: var(--as-subtitle-font);
    /* 2026-07-22: widened 800→1040 to match the widened /pricing accordion.
       2026-07-25: margin-top 1.25→4rem — the top box read too close to the
       SELECT PLAN title; give it clear breathing room. */
    width: min(1040px, 94vw);
    margin-top: clamp(2.75rem, 6.5vh, 4.5rem);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* Colin, 2026-09-05: "move the totals element and CONTINUE up so it
       sits right below the PRO box" -- was space-between, a leftover from
       before .summary-fixed-wrap became position:fixed (2026-09-02): with
       .subs-container itself stretching (flex:1 1 auto) to fill the
       hero-content column, space-between would push the wrap all the way
       to the container's own bottom instead of sitting right under
       .plan-stack. flex-start + the gap below is what keeps them together. */
    justify-content: flex-start;
    /* Colin, 2026-09-05: "triple the space" between the PRO box and the
       totals box -- this gap is the only spacing between .plan-stack and
       .summary-fixed-wrap now that the wrap sits in normal flow (16px -> 48px). */
    gap: 48px;
}

/* ═══ WIZARD STEPS — CLEAN → PICK (BASE/PRO) → SECURE ═══
   The plan-stack holds the cards; the summary sits directly below it in
   normal flow (2026-09-05 -- previously pinned to the viewport bottom via
   position:fixed, see .summary-fixed-wrap's own comment for why that
   changed). All boxes keep their full comfortable size on every step (no
   compression).
   ONE flex `gap` on the column, not per-card margins -- a flex gap is a
   constant regardless of any individual card's expanded/collapsed height, so
   this is what keeps the three boxes evenly spaced in every state (Colin,
   2026-09-02: "equal spacing between the three boxes when they're expanded
   and when they're collapsed"). Bumped 12->20 for clearer, more deliberate
   separation now that the cards are glass rather than solid black. */
.plan-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Landing-step CONTINUE button, directly below DEEP CLEAN -- visibility
   gated by the data-flow-step rule above, not by this block. */
.clean-continue-row {
    display: flex;
    justify-content: center;
}

/* Colin, 2026-09-04: "the continue buttons should not be see through" --
   .btn is the sitewide canonical CTA (Colin's own 2026-06-19 rule:
   transparent fill, no gradients/solid fills by design), which is exactly
   why it read see-through here. Picked V4 out of a 5-candidate live
   review (opaque black fill, white border -- keeps the outline aesthetic's
   spirit, just backed solid). Used on both this page's CONTINUE buttons
   (the landing one and the summary box's real one), never the shared
   .btn class itself -- that stays untouched for the rest of the site. */
.plan-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 3.4rem;
    padding: 0 1.5rem;
    font-family: var(--as-title-font);
    font-size: 0.85rem;
    letter-spacing: var(--as-subtitle-spacing);
    text-transform: uppercase;
    cursor: pointer;
    /* Colin, 2026-09-04: "rounded edges, like we have everywhere on the
       site and in the app" -- matches .plan-card's own var(--r-xl) above. */
    border-radius: var(--r-xl);
    background: var(--as-black);
    border: 2px solid var(--as-white);
    color: var(--as-white) !important;
    -webkit-text-fill-color: var(--as-white) !important;
    transition: box-shadow 0.15s ease;
}
.plan-cta-btn:hover {
    box-shadow: 0 0 10px rgb(255 255 255 / 35%);
}

/* CLEAN: DEEP CLEAN only (expanded via markup). */
.subs-container[data-step="clean"] [data-plan="fix_enrich"],
.subs-container[data-step="clean"] [data-plan="agent_dj"],
.subs-container[data-step="clean"] [data-plan="backup"] { display: none; }

/* PICK: BASE + PRO both expanded; DEEP CLEAN + SECURE hidden. */
.subs-container[data-step="pick"] [data-plan="initial_clean"],
.subs-container[data-step="pick"] [data-plan="backup"] { display: none; }
.subs-container[data-step="pick"] [data-plan="fix_enrich"] .plan-details,
.subs-container[data-step="pick"] [data-plan="agent_dj"] .plan-details { display: block; }

/* SECURE: DEEP CLEAN collapsed + the picked tier collapsed + SECURE expanded;
   the unpicked BASE/PRO is hidden. */
.subs-container[data-step="secure"] [data-plan="initial_clean"] .plan-details { display: none; }
.subs-container[data-step="secure"] [data-plan="fix_enrich"]:not(.selected),
.subs-container[data-step="secure"] [data-plan="agent_dj"]:not(.selected) { display: none; }
.subs-container[data-step="secure"] [data-plan="backup"] .plan-details { display: block; }

/* ═══ PICK-ONE DIVIDER (placeholder) — vertical two-way arrow + label ═══
   Between the BASE and PRO boxes in the PICK step. Placeholder art until Colin
   supplies the final arcade arrow. */
.pick-one-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 2px 0;
}
.pick-one-arrow {
    position: relative;
    width: 6px;
    height: 30px;
    background: #fff;
    box-shadow: 0 0 6px rgb(255 255 255 / 60%);
    flex: 0 0 auto;
    margin: 11px 0;          /* room for the triangle caps */
}
.pick-one-arrow::before,
.pick-one-arrow::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    filter: drop-shadow(0 0 4px rgb(255 255 255 / 55%));
}
.pick-one-arrow::before { top: -15px; border-bottom: 15px solid #fff; }  /* points up  */
.pick-one-arrow::after  { bottom: -15px; border-top: 15px solid #fff; }  /* points down */
.pick-one-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    text-shadow: 0 0 6px rgb(255 255 255 / 40%);
}

/* (step-continue buttons removed — the single bottom CONTINUE drives the flow) */

/* ═══ SHARED GLASS RECIPE ═══
   Colin, 2026-09-05: "add a glass bar to the top of the total box ... use
   the same exact code ... a shared module so when we change it, it changes
   for all four boxes." This is that module: ONE definition of the glass
   look (see-through dark fill + blur) that DEEP CLEAN/BASE/PRO's whole card
   already used (extracted from .plan-card, values unchanged) and that
   .summary-header (below) now reuses for the totals box's own glass top
   strip. Change the look here once and all four boxes move together. */
.glass-panel {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ═══ PLAN CARD — glass: see-through body, dark vignette behind the text ═══
   Colin, 2026-09-02: "glass kinda see through, but behind the text, like,
   kinda darker vignette" for all three boxes. Page-scoped override of the
   shared --comp-card-bg (solid black) -- that token stays untouched for
   every OTHER surface that uses it. The vignette is a radial gradient on
   ::before, darkest at the center where the label/price/feature-list text
   sits, fading out toward the edges so the glass blur reads through at the
   border; header/details sit on their own stacking layer above it.
   Background/blur now come from .glass-panel (added in the HTML alongside
   this class) instead of being declared here -- see that rule's comment. */
.plan-card {
    /* S-6: uniform single-colour outline (page lavender), was old purple.
       border-width is 4px (plan-card design) vs --comp-card-borderWidth (1px) — left as literal. */
    border: 4px solid var(--comp-card-border);
    /* Colin, 2026-09-05: "shift [DEEP CLEAN/BASE/PRO and the summary rows
       it's supposed to align with] a little to the right, leave the box as
       it is" -- left-only bump (24px->32px); right stays 24px so the
       right-aligned price tags don't move. .summary-box's own padding
       (below) gets the identical left value so the shared column still
       lines up. */
    padding: 18px 24px 18px 32px;
    position: relative;
    cursor: pointer;
    box-shadow: none;
    transition: box-shadow 0.3s, border-image 0.3s;
    overflow: hidden;
    /* Colin, 2026-09-04: "rounded edges, like we have everywhere on the
       site and in the app" -- this page's cards were S-15 square (the
       sitewide default, --as-box-radius:0); --r-xl is the SAME token
       home.html/lobby.css already use for their own "box" surfaces
       (.demo-feature-box etc.), not an invented value. overflow:hidden
       above clips .plan-card::before's vignette and .plan-details' own
       bled-out black background to this same rounded shape for free. */
    border-radius: var(--r-xl);
}

/* Colin (background dispatch), 2026-09-05: "the purple outline of the 2
   subscription boxes to change to the purple/blueish color of the title
   gradient -- the top color in the gradient" -- BASE (package_1) and PRO
   (package_2) only, NOT DEEP CLEAN (initial_clean, which stays its own
   look and is always .selected.locked anyway, so the higher-specificity
   `.plan-card.selected, .plan-card.locked { border: 4px solid #fff; }`
   rule below correctly keeps winning for it). var(--signup-blue) (#707BF7)
   is the 0% stop of --onboarding-title-gradient (onboarding-tokens.css),
   the same gradient the SELECT PLAN title (.coin-title) itself uses.
   Page-scoped override of the shared --comp-card-border token above --
   that token is left untouched for every other surface that reads it. */
[data-plan="package_1"], [data-plan="package_2"] {
    border-color: var(--signup-blue);
}

.plan-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 80%);
    pointer-events: none;
    z-index: 0;
}

.plan-card > * {
    position: relative;
    z-index: 1;
}

.plan-card:hover {
    box-shadow:
        0 0 8px rgb(176 144 224 / 30%),
        0 0 20px rgb(176 144 224 / 15%);
}

.plan-card.selected,
.plan-card.locked {
    border: 4px solid #fff;
    border-image: none;
    box-shadow:
        0 0 12px rgb(255 245 210 / 65%),
        0 0 26px rgb(213 209 226 / 45%),
        0 0 50px rgb(213 209 226 / 22%);
}
.plan-card.locked { cursor: default; }

.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.plan-label {
    font-family: var(--as-title-font);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.plan-price-tag {
    font-family: var(--as-title-font);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    min-width: 7.5rem;
    color: #fff;
    -webkit-text-fill-color: #fff;
    /* € sits right next to the amount; the whole €N.00 unit right-aligns so the
       units digit + .00 decimals line up in one column across every card
       (Press Start 2P is monospace, so columns align cleanly). */
    display: inline-flex;
    justify-content: flex-end;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}
.ppt-cur { flex: 0 0 auto; }
.ppt-amt { flex: 0 0 auto; text-align: right; }
.plan-price-tag .period { display: none; }

/* Billing-frequency caption before the price (PAY ONCE / PAY PER MONTH). */
.plan-pay-label {
    font-family: var(--as-title-font);
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/* Discount on the DEEP CLEAN card: pink -N% pill left of a pink, lowered price
   (S-15 square corners; luminous-pink token — deliberately never red). */
.clean-discount-badge {
    display: inline-block;
    font-family: var(--as-title-font);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    padding: 3px 7px;
    background: rgba(var(--as-luminousPink-rgb), 0.16);
    border: 1px solid rgba(var(--as-luminousPink-rgb), 0.6);
    color: var(--as-luminousPink);
    -webkit-text-fill-color: var(--as-luminousPink);
    border-radius: 0;
    white-space: nowrap;
}
.plan-price-tag.discounted {
    color: var(--as-luminousPink);
    -webkit-text-fill-color: var(--as-luminousPink);
}

.plan-badge {
    display: inline-block;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    letter-spacing: 1px;
    padding: 3px 8px;
    margin-left: 10px;
    vertical-align: middle;
}
.plan-badge.recommended { color: rgba(var(--coin-accent-rgb), 0.9); border: 1px solid rgba(var(--coin-accent-rgb), 0.35); }
.plan-badge.coming-soon { color: rgb(192 132 252 / 60%); border: 1px solid rgb(192 132 252 / 20%); }
.plan-badge.free { color: rgba(var(--coin-accent-rgb), 0.9); border: 1px solid rgba(var(--coin-accent-rgb), 0.35); }

/* ═══ HEADER LAYOUT — label left, price + expand caret grouped right ═══ */
.plan-label-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.plan-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* ═══ CYCLING PIPELINE-DIMENSION TICKER — DEEP CLEAN feature list ═══
   5 bullets rotating through the ~47 dimensions the pipeline fixes/enriches.
   Each reads "CATEGORY — dimension"; the category label NEVER wraps and stays
   put while its own dimensions cycle (driven by pipeline_ticker.js). Shared
   look mirrored in pricing.css. */
.cycle-bullet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45em;
}
.cyc-cat {
    flex: 0 0 auto;
    white-space: nowrap;   /* category never splits across lines */
    color: rgba(var(--coin-accent-rgb), 1);
    -webkit-text-fill-color: rgba(var(--coin-accent-rgb), 1);
    transition: opacity 0.22s ease;
}
.cyc-sep { flex: 0 0 auto; opacity: 0.5; }
.cyc-dim {
    flex: 0 0 auto;
    white-space: nowrap;
    transition: opacity 0.22s ease;
}

/* BEFORE → AFTER example: BEFORE shows, then (revealed) it is struck and the
   AFTER value + arrow fade in — a live "we fixed this" beat. */
.cyc-ex {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0.15em;
    font-family: 'Share Tech Mono', monospace;
}
.cyc-before {
    white-space: nowrap;
    color: rgb(255 255 255 / 78%);
    -webkit-text-fill-color: rgb(255 255 255 / 78%);
    transition: opacity 0.25s ease;
}
.cyc-ex.revealed .cyc-before {
    text-decoration: line-through;
    opacity: 0.4;
}
.cyc-arrow {
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: rgb(255 255 255 / 55%);
    -webkit-text-fill-color: rgb(255 255 255 / 55%);
}
.cyc-after {
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: rgba(var(--coin-accent-rgb), 1);
    -webkit-text-fill-color: rgba(var(--coin-accent-rgb), 1);
}
.cyc-ex.revealed .cyc-arrow,
.cyc-ex.revealed .cyc-after { opacity: 1; }

/* Enrichment dimensions: additive (no meaningful BEFORE) — purple "+ value". */
.cyc-ex.enrich .cyc-before { display: none; }
.cyc-ex.enrich .cyc-arrow {
    color: rgb(185 140 255);
    -webkit-text-fill-color: rgb(185 140 255);
}
.cyc-ex.enrich .cyc-after {
    color: rgb(185 140 255);
    -webkit-text-fill-color: rgb(185 140 255);
}

/* ═══ EXPANDED FEATURE LIST — mirrors /pricing (.pricing-feature-list) ═══
   Colin, 2026-09-04: "the space of when the boxes are collapsed to remain
   with the glass bc it has now amd when expanded, that area stays that
   glass bg but everything below it goes to complete black bg" -- .plan-
   header (untouched) keeps showing .plan-card's own blur+vignette through
   it; this panel gets its OWN opaque background instead. Negative side/
   bottom margins matching .plan-card's own 18px/24px padding bleed it out
   to the card's border edges (not just its own content box), so the solid
   black actually reaches the card's outline on every side, not just under
   the text. Also: "deep clean box and the 2 subscription boxes [need to
   be] the exact same size" -- a shared max-height + internal scroll makes
   every card's expanded footprint identical regardless of how many bullets
   it holds (DEEP CLEAN's 10 vs BASE/PRO's 6), instead of each growing to
   fit its own content.
   2026-09-04, correction #1: 15rem was too tight for DEEP CLEAN's own
   10-item list (5 rows at 2 columns, vs BASE/PRO's 6 items / 3 rows) --
   it was clipping/scrolling DEEP CLEAN's real content rather than just
   equalizing size, which read as "the box got smaller." Raised to 19rem.
   2026-09-04, correction #2: max-height alone doesn't equalize anything
   when content is SHORTER than the cap -- it only clips what's taller.
   BASE/PRO's 6-item lists never reached 19rem, so they were still
   rendering at their own (shorter) natural height while only DEEP CLEAN
   sat at the cap -- the opposite of "exact same size." Switched to a
   fixed `height` so all three occupy exactly this much space regardless
   of content length; overflow-y:auto is the fallback for anything that
   doesn't fit.
   2026-09-04, correction #3: 19rem read as "too tall" on all three once
   they were actually equal (Colin: "make them all less tall but all the
   same size") -- dropped to 11rem, well under DEEP CLEAN's own ~16rem
   natural content height, so DEEP CLEAN's list is the one that scrolls
   internally; BASE/PRO's shorter lists should sit close to this height
   without much empty space.
   2026-09-04, correction #4: 11rem was cutting text off -- Colin's own
   number, 13rem.
   2026-09-04, correction #5: Colin's own number again, 14rem.
   2026-09-04, correction #6: Colin's own number again, 14.5rem.
   2026-09-05, correction #7: "make the texts all locked... no scrolling!"
   -- overflow-y:auto (the scroll fallback every correction above relied
   on) is gone, replaced with overflow:hidden. This just makes the box
   never scroll, full stop, per Colin's ask.
   2026-09-05, correction #8: 14.5rem left the final page too tall to fit
   on screen once BASE's 8-item/4-row list and DEEP CLEAN's now-9-item/
   3-column-3-row list were both accounted for -- dropped back to 13rem. */
.plan-details {
    display: none;
    margin: 12px -24px -18px;
    /* Colin, 2026-09-04: "that description text is too close to the line...
       make it the same amount of space that the last sentence has to the
       bullet points beneath it" -- top padding now matches .plan-intro's
       own 0.85rem bottom margin exactly, instead of the old flat 10px.
       Rounds 2-3, 2026-09-05: chased "grey line/sentences/bullets/bottom
       all equal" purely through padding math and it never converged --
       measured directly off a real screenshot (pixel-scanned, not
       eyeballed): 40px / 60px / 92px, nowhere close to equal.
       ⭐ ROOT CAUSE, found via that measurement: this box has a FIXED
       `height: 13rem` (so DEEP CLEAN/BASE/PRO stay the same size regardless
       of content) and plain block layout puts ALL of a fixed box's unused
       leftover space after the last child -- so the "bottom gap" was never
       controlled by padding-bottom at all, it was mostly leftover slack
       that dwarfed any padding value. No padding-only fix can equal that
       against a fixed height with variable content.
       ⭐ THE FIX: flex column + justify-content:center (see .show below).
       Centering splits whatever leftover slack exists EVENLY above and
       below the padding box -- so as long as padding-top == padding-bottom
       (both 0.85rem here), the two outer gaps come out equal BY
       CONSTRUCTION, regardless of how much slack any given card's content
       leaves. This is robust to DEEP CLEAN/BASE/PRO having different text
       lengths -- previous rounds were not. */
    padding: 0.85rem 24px 0.85rem;
    background: var(--as-black);
    border-top: 2px solid rgb(213 209 226 / 35%);
    text-align: left;
    animation: plan-slide-in 0.25s ease;
    height: 13rem;
    overflow: hidden;
}
.plan-details.show { display: flex; flex-direction: column; justify-content: center; }

@keyframes plan-slide-in {
    0%   { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2026-09-04: intro paragraph above the bullet list, one per card. No
   text-shadow (Colin, 2026-09-04: "the texts in the boxes do not need the
   black outline like they do now... only the titles") -- the card's own
   ::before vignette already gives it enough contrast against the nebula. */
.plan-intro {
    /* Colin, 2026-09-05: "I want them both to be Share Tech Mono" -- was
       var(--as-body-font), which already RESOLVES to 'Share Tech Mono',
       monospace (design-tokens.css:28), same as .feat-title's own literal
       value below. Zero visual change; hardcoded here to read the same as
       .feat-title at a glance instead of two different-looking
       declarations that happen to resolve identically. */
    font-family: 'Share Tech Mono', monospace;
    /* Colin, 2026-09-05: matched to the home page chat bubble's own size,
       then "take it down about 20%" (1.15rem -> 0.92rem) -- the
       short-viewport/narrow-width overrides below get the same 20% cut. */
    font-size: 0.92rem;
    line-height: 1.75;
    color: #fff;
    -webkit-text-fill-color: #fff;
    margin: 0 0 0.85rem;
    opacity: 0.92;
}

/* Colin, 2026-09-02: 2 columns so 6 short bullets don't run the box tall. */
.plan-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Colin (background dispatch), 2026-09-05: "remove the space bw the
       bulletpoints... theyre too far apart" -- row-gap 0.35rem -> 0.15rem.
       Column-gap (2rem, horizontal space between the 2-3 columns) is
       untouched -- that wasn't part of the ask.
       Colin, 2026-09-05 (round 2): "space bw the bullet points a little
       less than" the now-unified 0.85rem line/sentence/bottom gaps (see
       .plan-details and .plan-intro) -- row-gap 0.15rem -> 0.35rem, paired
       with .feat-item's padding below; together the stacked-row gap goes
       from ~0.51rem to ~0.65rem.
       Round 3: "the bullet point texts need to be closer together a bit
       more" -- row-gap 0.35rem -> 0.25rem, paired with .feat-item's padding
       below; net stacked gap ~0.65rem -> ~0.45rem. */
    gap: 0.25rem 2rem;
}

/* Colin, 2026-09-05: all three cards are now 9 items each -- DEEP CLEAN
   (dropped "DJ-Key & BPM Analysis"), BASE and PRO (padded out to 9 with
   placeholders) -- so 3 columns is the shared default, not a DEEP-CLEAN-
   only override anymore. Desktop-only (>680px): the mobile single-column
   override further down must still win on a phone. */
@media (width > 680px) {
    .plan-feature-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Colin, 2026-09-04: title-only bullets. The hover-to-reveal description
   overlay (dark radial vignette behind the text) is REMOVED FOR NOW, per
   Colin's direct ask -- the underlying pricing.f_*_d strings are still in
   en.json if this comes back later, just unreferenced by this template. */
.feat-item {
    position: relative;
    /* Colin (background dispatch), 2026-09-05: vertical padding 0.32rem ->
       0.18rem, paired with .plan-feature-list's row-gap cut above -- the
       bullets were reading too far apart, worse after the same session's
       earlier ~20% body-text size cut (.plan-intro/.feat-title).
       Round 2, same day: 0.18rem -> 0.15rem, paired with the row-gap going
       0.15rem -> 0.35rem above -- net stacked gap ~0.51rem -> ~0.65rem.
       Round 3: "closer together a bit more" -- 0.15rem -> 0.1rem, paired
       with the row-gap going 0.35rem -> 0.25rem above -- net stacked gap
       ~0.65rem -> ~0.45rem. This bottom padding also stacks underneath
       .plan-details' own bottom padding (see that rule's comment) --
       kept in sync there too. */
    padding: 0.1rem 0 0.1rem 1.2rem;
}

.feat-item::before {
    content: '';
    position: absolute;
    left: 0;
    /* Kept in lockstep with .feat-item's own top/bottom padding above so the
       bullet dot stays vertically centered on the row. */
    top: calc(0.1rem + 0.6em);
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgb(255 255 255 / 80%), 0 0 10px rgb(255 255 255 / 40%);
}

.feat-title {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    /* Colin, 2026-09-05: matched to the home page chat bubble, then "take it
       down about 20%" (1.15rem -> 0.92rem, same cut as .plan-intro above). */
    font-size: 0.92rem;
    line-height: 1.75;
    color: #fff;
    -webkit-text-fill-color: #fff;
    text-shadow: 0 0 3px rgba(var(--as-black-rgb), 0.9);
}

/* Colin, 2026-09-05: same short-viewport override home.html's
   .demo-welcome-lede/.demo-welcome-guide use -- max-HEIGHT, not width;
   on a short window these bodies shrink a step so a card's content
   doesn't force scrolling. Also cut ~20% the same round as the default
   size above (0.82rem -> 0.66rem). */
@media (max-height: 800px) {
    .plan-intro, .feat-title { font-size: 0.66rem; line-height: 1.5; }
}


/* ═══ SUMMARY BOX — white outline + dark interior gradient + subtle glow ═══
   Colin, 2026-09-02: "that box is locked to the position and doesn't jump
   when boxes are expanded and collapsed" -- pinned via position:fixed so
   it stayed on screen regardless of how tall the cards above it got.
   ⛔ SUPERSEDED 2026-09-05: "move the totals element and CONTINUE up so it
   sits right below the PRO box" -- back to normal document flow, a plain
   flex-column sibling of .plan-stack inside .subs-container. It reads
   directly below the (now-collapsed) PRO card in the CHOSEN step because
   that's simply where it sits in the DOM; .subs-container's own `gap`
   (48px as of the same day's "triple the space" round) is the only
   spacing between them, no separate value needed here. */
.summary-fixed-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Colin, 2026-09-05: "move the CONTINUE button more down in relation
       to the totals box" -- 14px -> 32px. */
    gap: 32px;
}

.summary-box {
    font-family: var(--as-subtitle-font);
    width: 100%;
    border: 4px solid #fff;
    /* Colin, 2026-09-04: "that bottom box also needs rounded corners on
       the outsides and the boxes on the inside" -- matches .plan-card's
       own var(--r-xl); .plan-discount-box below gets the same. */
    border-radius: var(--r-xl);
    /* Colin, 2026-09-05 (round 2): "glass bg is missing (all black now)" --
       was var(--as-box-bg-solid) (opaque) with .glass-panel applied to
       .summary-header alone; a translucent layer over an opaque one still
       reads opaque. The box itself is glass now (via the .glass-panel class
       in the HTML, same shared module DEEP CLEAN/BASE/PRO's cards use);
       .summary-body (below) is the solid-black EXCEPTION covering the rows,
       mirroring .plan-details' own "solid overlay on an otherwise-glass
       card" pattern. */
    /* Colin, 2026-09-05: "these numbers need to be 100% aligned" -- right
       padding matched to .plan-card's own 24px (was 28px). .summary-box
       and .subs-container share the identical width:min(1040px,94vw) and
       centering, so equal right padding is what actually puts the plan-
       card prices and these summary values in one true right-aligned
       column, not just each internally consistent.
       Round 6 (same day): "shift PAY ONCE/MONTHLY/NOW right, leave the box
       as it is" -- left-only bump to 32px, matching .plan-card's own new
       left padding so the PRO/BASE/DEEP CLEAN labels and these summary
       labels (plus the discount box nested below, via .bottom-row) stay
       in one shared left column. Right stays 24px -- the values don't move. */
    padding: 12px 24px 14px 32px;
    /* Colin, 2026-09-05: needed so .summary-header's bled-out glass bar
       (below) clips to this box's own rounded corners instead of poking out
       square -- same trick .plan-card already relies on for .plan-details. */
    overflow: hidden;
    box-shadow:
        0 0 12px rgb(255 245 210 / 60%),
        0 0 26px rgb(213 209 226 / 40%),
        0 0 50px rgb(213 209 226 / 20%);
    /* Colin, 2026-09-05: "size that box better" -- was min-height:140px, a
       leftover from when this box also stretched the CONTINUE button to
       match the discount box's height (align-items:stretch). CONTINUE has
       moved out (.summary-continue-row below); nothing left in here needs
       a tall floor, so the box now hugs its own (smaller) content. */
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ═══ TOTAL header bar — the totals box's own "glass bar top" ═══
   Colin, 2026-09-05: "add a glass bar to the top of the total box ...
   check how the other 3 boxes have this ... shared module." Unlike
   .plan-header (which needs no background of its own -- it just shows
   .plan-card's own glass through it), .summary-box's body is SOLID
   (var(--as-box-bg-solid)), so this bar carries its OWN .glass-panel
   background and bleeds out to the box's edges (negative margins cancel
   .summary-box's own 12px/24px/32px padding exactly) -- the same
   bleed-to-edge trick .plan-details already uses, just inverted (glass on
   top instead of solid below). .summary-box's own overflow:hidden clips
   this bar's square top corners to the box's rounded shape for free. */
.summary-header {
    /* Colin, 2026-09-05 (round 3): "the grey bar is too high up... it needs
       to be on the edge bw the glass and black bg" -- the line was this
       rule's own border-bottom, with a 12px margin-bottom AFTER it still
       showing glass before .summary-body's black actually started -- the
       line sat inside the glass area, not at its true edge. Moved the
       divider to .summary-body's border-top (below) so it draws exactly
       where black starts, by construction.
       Round 4 correction: round 3 ALSO zeroed this margin, on the wrong
       assumption that .plan-header has zero gap before its own divider.
       Measured against a real expanded BASE card: it doesn't -- the 12px
       gap comes from .plan-details' own `margin-top: 12px`. Restored the
       equivalent here as .summary-body's margin-top (below), not
       header's own margin, so the 12px stays genuinely glass-colored
       (nothing has painted a background over it yet) exactly like the
       plan-cards' own gap. */
    margin: -12px -24px 0 -32px;
    /* Colin, 2026-09-05 (round 2): "that space is also bigger than the 3
       other boxes" -- was 18px top AND 18px bottom (symmetric), but
       .plan-header has NO padding of its own at all -- just the card's
       shared 18px top inset. Top padding restores the box's own original
       12px inset (cancelled by this rule's own -12px margin above); bottom
       padding is 0 now, matching .plan-header's real 0 -- the round-3
       "6px breathing room" guess is gone, replaced by the real measured
       12px gap living on .summary-body's margin-top instead. */
    padding: 12px 24px 0 32px;
    /* Colin, 2026-09-05: "the title aligned left like the other 3 boxes" --
       was inheriting .hero-content's sitewide text-align:center (nothing in
       this box's own ancestry overrides it, unlike .plan-header, which is a
       flex row and positions its label via justify-content, never
       text-align, so it was never affected by the same inheritance). */
    text-align: left;
}

/* Colin, 2026-09-05 (round 2): the solid-black EXCEPTION over the box's now-
   glass background, covering everything below the header -- mirrors
   .plan-details' own bleed-to-edge technique exactly (negative margins
   cancel .summary-box's own padding, own padding restores the same visual
   inset for the row content). */
.summary-body {
    /* Colin, 2026-09-05 (round 4): margin-top 0 -> 12px, matching
       .plan-details' own real margin-top exactly (measured against an
       expanded BASE card) -- this is the "text to divider" gap, and it
       lives here (not on .summary-header) so it stays genuinely glass-
       colored, same as the plan-cards. */
    margin: 12px -24px -14px -32px;
    padding: 0 24px 14px 32px;
    background: var(--as-black);
    /* Colin, 2026-09-05 (round 3): moved here from .summary-header's own
       border-bottom -- this is the box's actual glass-to-black transition
       point, so the divider drawing exactly on it (rather than floating
       inside the glass area above it) is now true by construction, same
       reasoning as .plan-details' own border-top for the plan-cards. */
    border-top: 2px solid rgb(213 209 226 / 35%);
}

/* CONTINUE, moved out of .summary-box -- identical shape to
   .clean-continue-row below the DEEP CLEAN card: centered .plan-cta-btn,
   no stretching, no shared row with the discount box any more. */
.summary-continue-row {
    display: flex;
    justify-content: center;
    width: 100%;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    /* Colin, 2026-09-05: "give these elements more space, they're too close
       together" -- was 4px 0, read as one cramped block. */
    padding: 10px 0;
}

.summary-label {
    font-family: var(--as-title-font);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.summary-value {
    padding: 4px 12px;
    margin: -4px -12px;
    font-family: var(--as-title-font);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    min-width: 7.5rem;
    /* Colin, 2026-09-05: "these numbers need to be 100% aligned" -- was
       text-align:left, the opposite of .plan-price-tag's own right-align
       (which exists specifically so the units digit + .00 decimals line
       up in one column). Matched here so PAY ONCE/MONTHLY/NOW line up
       with each other AND with the plan-card prices above them. */
    text-align: right;
    white-space: nowrap;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.summary-row.total {
    margin-top: 4px;
    padding-top: 8px;
}
.summary-row.monthly { margin-top: 4px; }

.summary-row.pay-now {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 2px solid rgb(213 209 226 / 60%);
}

/* ═══ LABEL GROUP — keeps label + discount badge adjacent on the left ═══ */
.summary-label-group {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

/* ═══ DISCOUNT BADGE — inline -N% pill next to PAY ONCE label ═══ */
.summary-label-group .discount-badge {
    display: inline-block;
    font-family: var(--as-title-font);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    padding: 4px 8px;
    vertical-align: middle;
    background: rgba(var(--coin-accent-rgb), 0.18);
    border: 1px solid rgba(var(--coin-accent-rgb), 0.55);
    color: var(--as-primary-light);
    -webkit-text-fill-color: var(--as-primary-light);
    border-radius: 0;
    white-space: nowrap;
    background-clip: border-box;
    background-clip: border-box;
    filter: none;
}

.summary-label-group .discount-badge.special {
    background: rgb(213 209 226 / 25%);
    border-color: rgb(213 209 226 / 70%);
}

/* ═══ BOTTOM ROW — discount code only now (CONTINUE moved to
   .summary-continue-row, below .summary-box) ═══
   Colin, 2026-09-05 (round 2): "align to the left of the box" -- reverts
   the same-day round-1 centering now that .plan-discount-box itself is
   wider and reads as a deliberate row on its own, not a stray leftover. */
.bottom-row {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
    align-items: stretch;
}

/* ═══ DISCOUNT INPUT BOX ═══
   Colin, 2026-09-05 (round 2): "redo the discount box -- thinner outline,
   wider, aligned to the left." Was flex:0 1 220px / 4px border (matched
   .plan-card's own border-width back when CONTINUE shared this row and
   needed a bolder box to hold its own next to a big CTA); CONTINUE is gone
   now, so the box gets its own identity: thinner 2px outline, wider fixed
   basis so it reads as a real input row rather than a narrow leftover. */
.plan-discount-box {
    display: flex;
    align-items: stretch;
    gap: 0;
    /* Colin, 2026-09-05 (round 3): "bigger, even bit taller and wider" --
       420px -> 560px; the taller half comes from .plan-discount-input/
       .plan-discount-confirm's own padding, below. */
    flex: 0 1 560px;
    /* Rounds 4-5 (same day) chased a -Npx margin-left to compensate this
       box's own border and put "D" flush under "P" above. Round 6 replaces
       that hack: .summary-box's left padding itself now shifts to 32px (see
       that rule), which moves this whole box -- border included -- along
       with every other left-aligned label on the page (PRO/BASE/DEEP CLEAN,
       PAY ONCE/MONTHLY/NOW) as one shared column. No compensating margin
       needed any more; internal spacing is handled by
       .plan-discount-input's own left padding instead (see that rule). */

    /* S-6: uniform single-colour outline (page lavender), thinned from 4px. */
    border: 2px solid var(--s6-outline);
    /* Colin, 2026-09-04: "the boxes on the inside" of the summary box get
       rounded too, matching .summary-box's own var(--r-xl). overflow:hidden
       clips the input/OK-button's own edges to the rounded shape -- both
       are transparent-background already, so nothing square pokes out. */
    border-radius: var(--r-xl);
    overflow: hidden;
    background: #000;
    transition: box-shadow 0.3s;
}

.plan-discount-box:focus-within {
    box-shadow: 0 0 14px rgba(var(--page-c2-rgb), 0.3);
}

.plan-discount-input {
    flex: 1;
    font-family: var(--as-title-font);
    /* Colin, 2026-09-05: round 3 matched this to the summary rows' own
       1.1rem (was 0.72rem); round 7 "one size smaller" backs it off to
       0.95rem -- still much closer to 1.1rem than the original 0.72rem. */
    font-size: 0.95rem;
    background: transparent;
    border: none;
    /* Colin, 2026-09-05: round 3 went to 22px vertical ("bigger, taller");
       round 4 "a little less tall" backs it off to 18px.
       Round 6: "the discount code text should have the exact amount of
       space as between the sides of the OK button ... to the edges" --
       .plan-discount-confirm's own padding is 18px 18px (symmetric); left
       padding here matches that same 18px instead of the round-5 6px
       border-clearance hack (superseded -- see .plan-discount-box's
       comment on why that margin-left is gone). */
    padding: 18px 18px 18px 18px;
    outline: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-width: 0;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.plan-discount-input::placeholder {
    color: rgb(255 255 255 / 35%);
    font-size: 0.95rem;
    -webkit-text-fill-color: rgb(255 255 255 / 35%);
}

.plan-discount-confirm {
    font-family: var(--as-title-font);
    /* Round 7: "one size smaller", matching .plan-discount-input above. */
    font-size: 0.95rem;
    background: transparent;
    border: none;
    /* Colin, 2026-09-05 (round 4): "remove the purple line, make that the
       same as the rest of the outline of the box" -- this divider still
       read var(--s6-outline) (the old purple), while the box's OWN outline
       was already overridden to rgba(255,255,255,0.6) back in round 15
       (2026-09-02's "remove the purple from the discount code box").
       Matched here so nothing purple is left on this box. */
    border-left: 2px solid rgba(255, 255, 255, 0.6);
    padding: 18px 18px;
    cursor: pointer;
    letter-spacing: 0.08em;
    transition: background 0.15s;
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.plan-discount-confirm:hover { filter: brightness(1.3); }

.plan-discount-feedback {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    letter-spacing: 1px;
    margin-top: 8px;
    min-height: 14px;
    text-align: center;
}
.plan-discount-feedback.success { color: rgba(var(--coin-accent-rgb), 0.9); }
.plan-discount-feedback.error { color: rgb(255 45 120 / 70%); }
.plan-discount-feedback.scanning { color: rgba(var(--coin-accent-rgb), 0.5); }

/* ═══ NAV ARROWS — back (←) + next (→) flanking the discount box in the bottom
   row. Square arcade buttons, black + white outline; NEXT pulses (the way
   forward). BACK is hidden on the first (CLEAN) step. ═══ */
.nav-arrow {
    flex: 0 0 auto;
    width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border: 3px solid #fff;
    border-radius: 0;
    cursor: pointer;
    transition: box-shadow 0.3s, background 0.15s;
}
.nav-arrow:hover { background: #0b0b0b; }
.nav-next { animation: continue-pulse 1.7s ease-in-out infinite; }

/* BACK is hidden on the CLEAN step (nothing to go back to). */
.subs-container[data-step="clean"] .nav-back { display: none; }

/* Chevron triangles. */
.chev { width: 0; height: 0; display: block; }
.chev-right { border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 16px solid #fff; }
.chev-left  { border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 16px solid #fff; }

@keyframes continue-pulse {
    0%, 100% { box-shadow: 0 0 6px rgb(255 255 255 / 40%), 0 0 16px rgb(213 209 226 / 25%); }
    50%      { box-shadow: 0 0 15px rgb(255 255 255 / 85%), 0 0 34px rgb(213 209 226 / 55%); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-next { animation: none; box-shadow: 0 0 12px rgb(255 255 255 / 55%); }
}

/* ═══ GB CALCULATOR (SECURE box) — same widget as /pricing ═══ */
.box-gb-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.box-gb-label {
    font-family: var(--as-title-font);
    font-size: clamp(0.5rem, 1vw, 0.7rem);
    letter-spacing: var(--as-subtitle-spacing);
    color: var(--as-uhoh);
    -webkit-text-fill-color: var(--as-uhoh);
}
.box-gb-input {
    width: 5rem;
    padding: 0.3rem 0.5rem;
    font-family: var(--as-title-font);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: #000;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 0;
    outline: none;
    text-align: center;
    appearance: textfield;
}
.box-gb-input::-webkit-inner-spin-button,
.box-gb-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.box-gb-input:focus { border-color: rgb(255 255 255 / 50%); }
.box-gb-unit {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: #fff;
    -webkit-text-fill-color: #fff;
    opacity: 0.7;
}
.box-gb-cap {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    color: var(--as-magenta);
    -webkit-text-fill-color: var(--as-magenta);
    text-shadow: 0 0 4px rgba(var(--as-black-rgb), 0.9);
}

/* ═══ BELOW-FOLD CONTENT — after nebula image ends ═══ */
.below-fold {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 60px;
}

/* ═══ RESPONSIVE ═══ */
@media (width <= 680px) {
    .coin-title {
        white-space: normal;
    }

    /* Slop-audit fix #1 (2026-06-07): the DISCOUNT/OK/CONTINUE row forced
       712px of horizontal scroll at 375px — stack it instead. */
    .bottom-row {
        flex-direction: column;
    }

    .plan-discount-box,
    .nav-arrow {
        width: 100%;
    }
    .nav-arrow { min-height: 3rem; }

    .hero-content {
        padding-top: 5rem;
    }

    .subs-container {
        width: 100%;
    }

    .plan-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* 2 columns is too cramped once the card is full-width on a phone. */
    .plan-feature-list {
        grid-template-columns: 1fr;
    }
}

@media (width <= 540px) {
    /* Bottom-row fix: wrap discount box + CONTINUE onto separate lines so
       CONTINUE is never pushed off-screen. Each child takes full width when
       wrapped. Measured overflow: 712px → 375px after this fix. */
    .bottom-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .plan-discount-box {
        flex: 1 1 100%;
        width: 100%;
    }

    .nav-arrow {
        flex: 1 1 100%;
        width: 100%;
        min-height: 3rem;
    }

    /* Shrink the summary box padding on narrow screens */
    .summary-box {
        padding: 14px 16px 12px;
    }
    /* .summary-header's margin cancels .summary-box's own padding exactly
       (see that rule's comment) -- must be re-paired here since the padding
       above just changed. Bottom padding stays minimal (6px, matching the
       default rule's own "tight under TOTAL, not floating" fix) rather than
       symmetric with the top; bottom MARGIN is 0, matching the default
       rule's round-3 fix (the divider lives on .summary-body's border-top
       now, so no glass gap should exist between header and body). */
    .summary-header {
        margin: -14px -16px 0 -16px;
        padding: 14px 16px 0;
    }
    /* .summary-body's margin/padding re-paired the same way for this
       breakpoint's narrower .summary-box padding; margin-top 12px matches
       the default rule's own real (measured) gap. */
    .summary-body {
        margin: 12px -16px -12px -16px;
        padding: 0 16px 12px;
    }

    .plan-label,
    .plan-price-tag,
    .summary-label,
    .summary-value {
        font-size: 0.85rem;
    }

    .feat-title {
        /* Colin, 2026-09-05: kept in step with the max-height override above
           (0.66rem, after the same-day 20% cut) so a narrow-AND-short screen
           doesn't land between two different "small" values. */
        font-size: 0.66rem;
    }
}

/* ═══ VOLUNTARY DISCOUNT MODAL (ceiling codes) ═══ */
.disc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgb(var(--as-black-rgb) / 78%);
}

.disc-modal-overlay[hidden] { display: none; }

/* Colin, 2026-09-02: "try to make it look more like the other popups" --
   re-styled to match .consent-modal (sign_up.css)'s icy-purple border +
   glow + title treatment. Was S-6 lavender + plain #fff title + the old
   --coin-accent pink, none of which matched the rest of the redesign's
   popup family.
   Round 2 (same day): "the box is not big enough... the title is hitting
   all the way to the right edge" -- widened + more padding, dropped the
   title's white-space:nowrap so it can wrap instead of overflowing on a
   narrow viewport. "the box... don't have rounded corners" -- this one
   popup is deliberately rounded, unlike the sitewide square-corner
   convention (.consent-modal, .plan-card, .btn all border-radius:0) --
   Colin's explicit call for this specific modal, not a canon change. */
.disc-modal {
    width: min(680px, 94vw);
    background: var(--comp-card-bg);
    border: 2px solid var(--consent-icy-purple);
    border-radius: 18px;
    box-shadow: 0 0 30px rgba(var(--consent-icy-purple-rgb), 0.3), 0 0 60px rgba(var(--consent-icy-purple-rgb), 0.15);
    padding: clamp(36px, 6vw, 60px);
    text-align: center;
}

.disc-modal-title {
    font-family: var(--as-title-font);
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    letter-spacing: 0.08em;
    color: var(--consent-icy-purple);
    -webkit-text-fill-color: var(--consent-icy-purple);
    margin: 0 0 26px;
}

.disc-modal-body {
    font-family: var(--as-subtitle-font);
    font-size: 0.9rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: rgb(255 255 255 / 70%);
    margin: 0 0 30px;
}

/* Round 2: split apart -- % ABOVE the slider (unchanged), price now
   BELOW it (was sharing a row above the slider with %). Also smaller
   ("make their font size a little bit smaller": 1.3-1.6rem -> 1.1-1.3rem). */
.disc-modal-pct {
    display: block;
    font-family: var(--as-title-font);
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    letter-spacing: 0.06em;
    margin: 0 0 14px;
    color: var(--as-signupBlue);
    -webkit-text-fill-color: var(--as-signupBlue);
}

.disc-modal-price {
    display: block;
    font-family: var(--as-title-font);
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    letter-spacing: 0.06em;
    margin: 14px 0 0;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/* Pill track (Colin: "rounded edges... same shape as we have on progress
   screens" -- matches the lobby stats-bar's border-radius:999px pill
   treatment) and narrower than the full modal width ("a little bit less
   wide"), centered under the readout. */
.disc-modal-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 85%;
    max-width: 22rem;
    margin: 0 auto;
    display: block;
    height: 8px;
    background: linear-gradient(90deg, var(--as-signupBlue), var(--as-signupViolet));
    background-size: 100% 100%;
    opacity: 0.85;
    border: none;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.disc-modal-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--as-signupViolet);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(var(--as-signupBlue-rgb), 0.6);
    cursor: pointer;
}

.disc-modal-slider::-moz-range-track {
    height: 8px;
    background: linear-gradient(90deg, var(--as-signupBlue), var(--as-signupViolet));
    opacity: 0.85;
    border: none;
    border-radius: 999px;
}

.disc-modal-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid var(--as-signupViolet);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(var(--as-signupBlue-rgb), 0.6);
    cursor: pointer;
}

.disc-modal-actions {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* Round 2 (Colin): "make the apply button... with a really really
   colorful gradient... and black text" -- a solid vibrant gradient FILL
   (the same white/lavender/violet/pink sweep as --s6-title-gradient,
   sitewide on titles, just horizontal instead of vertical) with dark
   text for contrast against it, rounded to match the now-rounded modal
   box. This replaces round 1's gradient-BORDER/dark-fill treatment
   (#consentAgreeBtn's style) -- Colin's follow-up asked for the opposite
   contrast direction. */
#discModalApply.disc-modal-apply {
    flex: 0 1 auto;
    min-width: 200px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--as-title-font);
    font-size: 0.85rem;
    letter-spacing: var(--as-subtitle-spacing);
    white-space: nowrap;
    height: 2.8rem;
    padding: 0 1.5rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFFFFF 0%, var(--as-welcomeIcy) 35%, var(--as-agentAccent) 60%, var(--as-magenta) 100%);
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    text-shadow: none;
    box-shadow: 0 0 16px rgba(var(--page-c2-rgb), 0.35);
    transition: box-shadow 0.3s, transform 0.15s;
}

#discModalApply.disc-modal-apply:hover {
    box-shadow: 0 0 22px rgba(var(--page-c2-rgb), 0.55), 0 0 40px rgba(var(--page-c3-rgb), 0.3);
    transform: translateY(-1px);
}

/* .lib-inputs / .lib-field* / .lib-help* / .ppt-from rules removed 2026-10-04
   with the "YOUR LIBRARY" box itself (select_plan.html) — Colin: data comes
   from the uploaded DB, period, no manual entry box at all. */