/* ── bundles.css — the bundle builder (js/bundles.js?v=19) ─────────────────────────────────────────
   Left: plugin tiles (big italic verb, cropped UI, price). Right, sticky: the savings STAIRCASE and the
   receipt. The staircase is the old savings ladder as a diagram of blocks: each step is a bundle size and
   is built from that many blocks. The step that matches how many plugins you picked lights up, its blocks
   take the plugins' colours, a chip flies in from the tile, a level marker slides to it.

   Selector note: base.css puts a colour-only `transition` on `.sheet *:not(img):not(video)` (specificity
   0,1,2), which would swallow any transform transition declared with one class. Everything here that needs
   a transition is written `.bd .x` (0,2,0) and lists the properties it needs. Colours are tokens only;
   the per-plugin colour is --p from the `.plugin--<slug>` class (tokens.css). */

.bd { --bd-r: var(--r-card); --bd-bs: clamp(2.8rem, 3.4vw, 4.6rem); --bd-ease: cubic-bezier(.65, 0, .25, 1); display: grid; gap: var(--s7); padding: 0 var(--gutter) var(--s8); }

/* ── hero ──────────────────────────────────────────────────────────────────────────────────── */
.bd-hero { display: grid; gap: var(--s3); padding-top: var(--s7); }
.bd-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(6.4rem, 13vw, 16rem); line-height: .86; letter-spacing: var(--track-display); }
.bd-title b { font-weight: 400; color: var(--accent); }
.bd-sub { margin: 0; max-width: 40ch; font-size: var(--fs-lead); color: var(--fg-muted); }

/* ── layout: tiles + sticky side ──────────────────────────────────────────────────────────── */
.bd-main { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 64em) {
  .bd-main { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s7); }
  .bd-side { position: sticky; top: calc(var(--head-h, 15rem) + var(--s4)); display: grid; gap: var(--s4); }
}
/* Phones: tiles first; the savings steps and the receipt are ONE compact bar docked to the bottom edge (see the
   phone block at the end of this file). */
@media (max-width: 63.99em) {
  .bd-main { display: flex; flex-direction: column; }
}

/* ── tiles ────────────────────────────────────────────────────────────────────────────────── */
.bd-tiles { display: grid; gap: var(--s4); }
@media (min-width: 48em) { .bd-tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 48em) { .bd-tile:nth-child(even) { margin-top: var(--s7); } } /* uneven rows on purpose */

.bd .bd-tile {
  position: relative; display: grid; gap: var(--s3); padding: var(--s4); cursor: pointer; overflow: hidden; isolation: isolate;
  border: 1px solid var(--rule); border-radius: var(--bd-r); background: var(--ground); color: var(--fg);
  transition: border-color var(--hover-dur) var(--hover-ease), background-color var(--hover-dur) var(--hover-ease);
}
@media (hover: hover) { .bd .bd-tile:hover { border-color: var(--rule-strong); } }
.bd .bd-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bd .bd-tile[aria-checked="true"] {
  border-color: var(--p); background-color: color-mix(in srgb, var(--p) 9%, var(--ground));
}
.bd-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.bd .bd-verb { font-family: var(--font-display); font-style: italic; font-size: clamp(5.4rem, 8vw, 9rem); line-height: .9; letter-spacing: var(--track-display); transition: color 500ms ease; }
.bd .bd-verb b { font-weight: 400; color: var(--p); }
.bd .bd-tile[aria-checked="true"] .bd-verb { color: var(--p); }

/* the round tick: ring always, fill + stroke-drawn tick when picked */
.bd-check { flex: none; width: 3.2rem; height: 3.2rem; color: var(--fg-faint); }
.bd-check svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bd-check circle { fill: transparent; stroke: currentColor; stroke-width: 1.4; }
.bd-check path { fill: none; stroke: var(--ground); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bd .bd-check circle { transition: fill 400ms ease, stroke 400ms ease; }
.bd .bd-check path { transition: stroke-dashoffset 500ms var(--bd-ease) 120ms; }
.bd .bd-tile[aria-checked="true"] .bd-check circle { fill: var(--p); stroke: var(--p); }
.bd .bd-tile[aria-checked="true"] .bd-check path { stroke-dashoffset: 0; }

/* the UI, cropped: only the top of the plugin shows, like a window cut off by the card */
.bd-shot-wrap { position: relative; overflow: hidden; border-radius: var(--r-ctl); aspect-ratio: 16 / 8; }
.bd .bd-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: saturate(var(--fin-sat, 1.15)); }
.bd-tile-info { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s1) var(--s3); }
.bd-name { font-family: var(--font-display); letter-spacing: var(--track-display); font-size: var(--fs-h2); line-height: 1; }
.bd-tag { grid-column: 1; color: var(--fg-muted); }
.bd-price { grid-row: 1 / span 2; grid-column: 2; font-family: var(--font-data); font-size: var(--fs-text); }

/* ── the staircase ────────────────────────────────────────────────────────────────────────── */
.bd-stair { position: relative; margin: 0; padding: var(--s4) var(--s4) var(--s6); border: 1px solid var(--rule); border-radius: var(--bd-r); }
.bd-stair-cap { display: flex; justify-content: space-between; gap: var(--s3); color: var(--fg-faint); }
.bd-steps { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s2); align-items: end; }
.bd-step { display: grid; align-content: end; gap: var(--s2); text-align: center; min-width: 0; }
.bd-step-save { display: grid; gap: .2rem; min-height: 4.4rem; align-content: end; font-family: var(--font-data); }
.bd-step-save em { font-style: normal; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.bd-step-save b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; letter-spacing: var(--track-display); }
.bd-step:first-child .bd-step-save b { font-family: var(--font-data); font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.bd .bd-step.is-active .bd-step-save b { color: var(--accent); }
.bd-stack { display: flex; flex-direction: column-reverse; gap: .4rem; }
.bd-block { display: block; height: var(--bd-bs); border: 1px solid var(--rule-strong); border-radius: var(--r-ctl); background: transparent; }
.bd .bd-block { transition: background-color 700ms ease, border-color 700ms ease; }
.bd .bd-step.is-past .bd-block { background: color-mix(in srgb, var(--fg) 9%, transparent); }
.bd .bd-block.is-on { background: var(--p); border-color: var(--p); }
.bd-step-n { display: flex; align-items: baseline; justify-content: center; gap: .5rem; font-family: var(--font-data); color: var(--fg-muted); }
.bd-step-n b { font-weight: 500; font-size: var(--fs-text); color: var(--fg); }
.bd-step-n small { font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 29.99em) { .bd-step-n small { display: none; } }

/* the level marker: a rule along the bottom, filled up to the lit step, with an LED that slides there */
.bd-level { position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s4); height: 1px; background: var(--rule); }
.bd-level::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: calc((var(--act, -1) + 1) / var(--cols) * 100%); background: var(--accent); }
.bd-level i { position: absolute; top: -.45rem; left: calc((var(--act, -1) + .5) / var(--cols) * 100%); width: 1rem; height: 1rem; margin-left: -.5rem; border-radius: 50%; background: var(--accent); opacity: 0; }
.bd .bd-level::before { transition: width 800ms var(--bd-ease); }
.bd .bd-level i { transition: left 800ms var(--bd-ease), opacity 500ms ease; }
.bd[data-motion="still"] .bd-level::before, .bd[data-motion="still"] .bd-level i { transition: none; }
.bd[data-motion="still"] .bd-block { transition: none; }
.bd-stair.has-active .bd-level i { opacity: 1; }
.bd-stair.is-full { border-color: var(--accent); }

/* ── receipt ──────────────────────────────────────────────────────────────────────────────── */
.bd-receipt { display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid var(--rule-strong); border-radius: var(--bd-r); background: var(--ground); }
.bd-chosen { display: flex; flex-wrap: wrap; gap: var(--s2); min-height: 2.8rem; align-items: center; color: var(--fg-faint); }
.bd-pill { display: inline-flex; align-items: center; gap: .7rem; padding: .5rem 1.2rem .5rem 1rem; border: 1px solid var(--rule-strong); border-radius: var(--r-ctl); font-family: var(--font-data); font-size: var(--fs-data); color: var(--fg); animation: bd-fade 500ms ease both; }
.bd-pill i { width: .9rem; height: .9rem; border-radius: 50%; background: var(--p); }
.bd-lines { display: grid; gap: var(--s2); }
.bd-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: 0; font-family: var(--font-data); font-size: var(--fs-text); color: var(--fg-muted); }
.bd-num { font-variant-numeric: tabular-nums; color: var(--fg); }
.bd-line--save .bd-num { color: var(--accent); font-weight: 600; }
.bd-line--total { padding-top: var(--s3); border-top: 1px solid var(--rule); font-family: var(--font-display); font-size: var(--fs-h3); color: var(--fg); letter-spacing: var(--track-display); }
.bd-line--total .bd-num { font-size: clamp(3.2rem, 4vw, 4.4rem); line-height: 1; }
.bd-buy .p-buy-row { margin-top: var(--s2); }
.bd-promo { margin: 0; }
/* ── All-Access: the closer ───────────────────────────────────────────────────────────────── */
.bd-all { display: grid; gap: var(--s3); padding: var(--s6) var(--s5); border-radius: var(--bd-r); background: var(--fg); color: var(--ground); }
.bd-all-kicker { margin: 0; color: color-mix(in srgb, var(--ground) 62%, transparent); }
.bd-all-word { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(12rem, 26vw, 24rem); line-height: .8; letter-spacing: var(--track-display); }
.bd-all-word b { font-weight: 400; }
.bd-all-text { margin: 0; max-width: 40ch; font-size: var(--fs-lead); }
.bd-all-text span { display: block; margin-top: var(--s2); font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: color-mix(in srgb, var(--ground) 70%, transparent); }
.bd-all-btn { justify-self: start; display: inline-flex; align-items: center; gap: var(--s3); margin-top: var(--s3); padding: var(--s4) var(--s6); border-radius: var(--r-ctl); background: var(--ground); color: var(--fg); border: 1px solid var(--ground); transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease); font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; text-decoration: none; }
@media (min-width: 64em) { .bd-all { grid-template-columns: auto 1fr auto; align-items: end; gap: var(--s3) var(--s7); padding: var(--s7) var(--s7); } .bd-all-kicker { grid-column: 1 / -1; } .bd-all-btn { margin: 0; } }

@media (hover: hover) { .bd-all-btn:hover { background: transparent; color: var(--ground); } }
@keyframes bd-fade { from { opacity: 0; } to { opacity: 1; } }
.bd[data-motion="still"] .bd-pill { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .bd .bd-tile, .bd .bd-block, .bd .bd-level::before, .bd .bd-level i, .bd .bd-check path { transition: none; }
  .bd-pill { animation: none; }
}

/* ── v2 pass: one product box, flatter and less "app-like" ─────────────────────────────────────────
   The savings ladder and the receipt are now ONE bordered box (desktop); no glows, no LED, small radii,
   hairlines and mono labels instead of soft shadows and pills. Phones keep the docked receipt. */
.bd { --bd-bs: clamp(1.8rem, 2vw, 2.6rem); }
.bd .bd-tile[aria-checked="true"] { box-shadow: none; background-color: color-mix(in srgb, var(--p) 7%, var(--ground)); }
.bd .bd-block.is-on { box-shadow: none; }
.bd-level i { display: none; }
/* Desktop: the side is the same object as the product-page buy box: a separate, inverted surface (ink on the
   dark theme, cream on the light one), big radius, mono kickers, serif figures, a total row and the button.
   The inversion is done by swapping the page tokens locally, so there are no literal colours here. */
.bd { --bd-page-bg: var(--ground); --bd-page-fg: var(--fg); }
@media (min-width: 64em) {
  .bd-side {
    --ground: var(--bd-page-fg); --fg: var(--bd-page-bg);
    --fg-muted: color-mix(in srgb, var(--bd-page-bg) 66%, transparent); --fg-faint: color-mix(in srgb, var(--bd-page-bg) 46%, transparent);
    --rule: color-mix(in srgb, var(--bd-page-bg) 16%, transparent); --rule-strong: color-mix(in srgb, var(--bd-page-bg) 28%, transparent);
    gap: var(--s4); padding: var(--s5) var(--s4); border: 0; border-radius: var(--r-tray); background: var(--ground); color: var(--fg);
  }
  .bd-side .bd-stair { border: 0; border-radius: 0; padding: 0 0 var(--s5); background: none; }
  .bd-side .bd-stair.is-full { border: 0; }
  .bd-side .bd-stair-cap { letter-spacing: .26em; }
  .bd-side .bd-level { left: 0; right: 0; bottom: 0; }
  .bd-side .bd-level::before { background: var(--fg); }
  .bd-side .bd-step.is-active .bd-step-save b { color: var(--fg); }
  .bd-side .bd-receipt { border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; padding: var(--s4) 0 0; }
  .bd-side .bd-chosen { gap: var(--s2); }
  .bd-side .bd-pill { padding: .8rem 1.4rem; border: 1px solid var(--rule-strong); border-radius: var(--r-ctl); font-size: 1.1rem; letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg); }
  .bd-side .bd-line--save .bd-num { color: var(--fg); }
  .bd-side .p-buy { background: var(--fg); color: var(--ground); }
  .bd-side .bd-line--total { border-top-color: var(--rule); }
  .bd-side .bd-line--total > span:first-child { font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-muted); }
}

/* the "[ Bundles ]" kicker sits in the empty right of the hero, level with the sub line (desktop) */
@media (min-width: 64em) {
  .bd-hero { position: relative; }
  .bd-hero .page-kicker { position: absolute; right: 0; bottom: .4rem; margin: 0; }
}

.bd-lbl-m { display: none; }
/* ── Phones (<64em): a compact picker + one docked bundle bar ─────────────────────────────────────
   Type ladder (page-local, tokens only): title 4.4rem > tile verb 2.8rem > name --fs-h3 > price/mono labels
   --fs-data. Tiles are a 2-column grid of small cards (verb, a cropped UI strip, name + price on one line).
   .bd-side becomes the dock: a slim steps strip on top (just the size and what it saves; the block diagram is
   desktop only) over one row with count / savings / total and the buy button. position: sticky keeps it on the
   bottom edge while the tiles are on screen and lets it rest above the All-Access closer after. */
@media (max-width: 63.99em) {
  .bd { gap: var(--s5); padding-bottom: var(--s6); }
  .bd-hero { gap: var(--s2); padding-top: var(--s5); }
  .bd-title { font-size: 4.4rem; line-height: .9; }
  .bd-sub { font-size: var(--fs-text); max-width: 34ch; }
  .bd-main { gap: var(--s4); }

  .bd-tiles { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .bd-tile:nth-child(even) { margin-top: 0; }
  .bd .bd-tile { gap: var(--s2); padding: var(--s3); }
  .bd-tile-top { align-items: center; gap: var(--s2); }
  .bd .bd-verb { font-size: 2.8rem; line-height: 1; }
  .bd-check { width: 2rem; height: 2rem; }
  .bd-shot-wrap { aspect-ratio: 16 / 6; }
  .bd-tile-info { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s2); }
  .bd-name { font-size: var(--fs-h3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bd-tag { display: none; }
  .bd-price { grid-row: 1; grid-column: 2; font-size: var(--fs-data); color: var(--fg-muted); }

  /* the dock */
  .bd-side {
    align-self: stretch; position: sticky; bottom: 0; z-index: 6; display: grid; gap: 0;
    margin: 0 calc(-1 * var(--gutter)); background: var(--ground);
    border-top: 1px solid var(--rule-strong);
  }
  /* steps strip: size + saving per cell, lit cell takes the accent */
  .bd-stair { padding: var(--s2) var(--gutter) 0; border: 0; border-radius: 0; }
  .bd-stair.is-full { border: 0; }
  .bd-stair-cap, .bd-stack, .bd-level { display: none; }
  .bd-steps { margin: 0; gap: var(--s1); align-items: stretch; }
  .bd-step { display: flex; align-items: baseline; justify-content: center; gap: var(--s2); padding: var(--s2) 0 var(--s1); border-top: 2px solid var(--rule); }
  .bd .bd-step { transition: border-color var(--hover-dur) var(--hover-ease); }
  .bd-step-save, .bd-step-n { display: contents; }
  .bd-step-n b { order: -1; }
  .bd-step-save em, .bd-step-n small { display: none; }
  .bd-step-n b { font-family: var(--font-data); font-size: var(--fs-data); font-weight: 500; color: var(--fg-faint); }
  .bd-step-save { min-height: 0; }
  .bd-step-save b { font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: 0; color: var(--fg-muted); }
  .bd-step:first-child .bd-step-save b { display: none; }
  .bd-step.is-past { border-top-color: var(--fg-faint); }
  .bd .bd-step.is-active { border-top-color: var(--accent); }
  .bd .bd-step.is-active .bd-step-n b, .bd .bd-step.is-active .bd-step-save b { color: var(--fg); }

  /* receipt row: count + savings + total on the left, the buy button on the right */
  .bd-receipt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); margin: 0; padding: var(--s2) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 0; background: none; }
  .bd-chosen, .bd-promo, .bd-line:not(.bd-line--total):not(.bd-line--save), .bd-buy .p-buy-note { display: none; }
  .bd-lines { gap: .2rem; min-width: 0; }
  .bd-line { gap: var(--s2); justify-content: flex-start; white-space: nowrap; font-size: var(--fs-data); }
  .bd-line--save .bd-num { font-weight: 500; }
  .bd-line--total { padding-top: 0; border-top: 0; align-items: baseline; font-size: var(--fs-data); }
  .bd-lbl-d { display: none; }
  .bd-lbl-m { display: inline; }
  .bd-line--total > span:first-child { font-family: var(--font-data); color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--track-data); }
  .bd-line--total .bd-num { font-size: 2.4rem; line-height: 1; }
  .bd-buy .p-buy-row { margin: 0; padding: 0; grid-template-columns: auto; }
  .bd-buy .p-buy { width: auto; padding: var(--s3) var(--s4); }
  .bd-buy .p-buy-label { white-space: nowrap; }
  .bd-buy .p-buy-legal { display: none; }
  .bd-buy .form-submit { padding: var(--s3) var(--s4); max-width: 15rem; text-align: center; justify-content: center; line-height: 1.25; }

  .bd-all { padding: var(--s5) var(--s4); gap: var(--s2); }
  .bd-all-word { font-size: 8rem; }
  .bd-all-text { font-size: var(--fs-text); }
}
@media (max-width: 23.99em) { .bd-title { font-size: 3.8rem; } .bd .bd-verb { font-size: 2.4rem; } }

/* ── Buy button: same minimal language as the product-page buy box ────────────────────────────────
   Squared (--r-ctl), fill <-> outline colour shift on hover, no lift/shadow. Inside the inverted desktop
   box the tokens are swapped locally, so --fg is the light fill there. Disabled = quiet outline, no hover. */
.bd-buy .p-buy, .bd-buy .form-submit {
  border: 1px solid var(--bd-btn, var(--accent)); border-radius: var(--r-ctl); box-shadow: none; transform: none;
  background: var(--bd-btn, var(--accent)); color: var(--bd-btn-fg, var(--accent-fg));
  transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease), opacity var(--hover-dur) var(--hover-ease);
}
.bd-side .bd-buy { --bd-btn: var(--fg); --bd-btn-fg: var(--ground); }
.bd-side .p-buy { background: var(--bd-btn); color: var(--bd-btn-fg); }
.bd-buy .p-buy, .bd-buy .form-submit { width: 100%; }
.bd-buy .p-buy { align-items: center; text-align: center; }
.bd-buy .p-buy:focus-visible, .bd-buy .form-submit:focus-visible { outline: 2px solid var(--bd-btn, var(--accent)); outline-offset: 3px; background: transparent; color: var(--bd-btn, var(--accent)); }
@media (hover: hover) {
  .bd-buy .p-buy:not(:disabled):hover, .bd-buy .form-submit:not(:disabled):hover { background: transparent; color: var(--bd-btn, var(--accent)); }
}
.bd-buy .form-submit:disabled {
  background: transparent; color: var(--bd-btn, var(--accent)); border-color: color-mix(in srgb, var(--bd-btn, var(--accent)) 35%, transparent);
  opacity: .55; cursor: not-allowed;
}
@media (max-width: 63.99em) {
  .bd-buy .p-buy, .bd-buy .form-submit { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .bd-buy .p-buy, .bd-buy .form-submit { transition: none; } }