/* Bundles page (build-bundles.py): tier ladder + pick-your-bottles builder + summary rail.
   Pairs with tokens.css / site.css. Inter only; VS red (--brand) carries the tier %.
   Motion (law relaxed 2026-09-29) lives ONLY in the prefers-reduced-motion: no-preference block at the end,
   so reduced-motion users get a static page and tools/fx-gate.py sees no hit. */

/* ── ladder ── */
.ladder{padding:var(--s5) var(--pad-x) var(--s6);max-width:calc(var(--max-w) + 2*var(--pad-x));margin:0 auto}
.ladder-head{text-align:center;max-width:42rem;margin:0 auto var(--s4)}
.ladder-head .fold-h2{font-size:var(--fs-h2);color:var(--head);letter-spacing:var(--track-h2)}
.ladder-head p{font-size:var(--fs-small);color:var(--ink-soft);margin-top:var(--s2)}
.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.tier{position:relative;display:flex;flex-direction:column;gap:.3rem;text-align:center;
  background:var(--surface);border:0.0625rem solid var(--line);padding:var(--s4) var(--s3) var(--s3)}
.tier:hover,.tier.reached{border-color:var(--brand)}
.tier.reached{box-shadow:inset 0 0 0 0.0625rem var(--brand)}
.tier-badge{position:absolute;top:-.65rem;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--brand);color:#fff;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;padding:.25rem .7rem}
.tier-name{font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.tier-off{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3vw,2.75rem);line-height:1;letter-spacing:-.03em;color:var(--brand)}
.tier-per{font-size:1.3rem;color:var(--ink-deep);margin-top:.5rem}
.tier-per s{font-size:.8rem}
.tier-lbl{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.tier-total{font-size:var(--fs-small);color:var(--ink);margin-top:.6rem}
.tier-save{font-size:var(--fs-small);font-weight:600;color:var(--ink-deep)}
.tier-save small{display:block;font-weight:400;font-size:.7rem;color:var(--ink-soft)}
.tier .cta{margin-top:var(--s2);padding:.8rem .75rem;width:100%;font-size:.65rem}

/* ── builder ── */
.builder{padding:var(--s6) var(--pad-x);border-top:0.0625rem solid var(--line);max-width:calc(var(--max-w) + 2*var(--pad-x));margin:0 auto}
.builder-head{max-width:42rem;margin:0 0 var(--s4)}
.builder-head .fold-h2{font-size:var(--fs-h2);color:var(--head)}
.builder-head p{font-size:var(--fs-small);color:var(--ink-soft);margin-top:var(--s1)}
.builder-grid{display:grid;grid-template-columns:1fr 19rem;gap:var(--s4);align-items:start}
.b-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.b-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem;
  background:var(--surface);border:0.0625rem solid var(--line);padding:var(--s3) var(--s2)}
.b-tile.on{border-color:var(--h2);box-shadow:inset 0 0 0 0.0625rem var(--h2)}
.b-tile img{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover}
.b-name{font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--ink-deep);margin-top:.6rem}
.b-role{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--h2)}
.stepper{display:flex;align-items:center;margin-top:.75rem;border:0.0625rem solid var(--ink)}
.step{width:2.75rem;min-height:44px;border:none;background:none;color:var(--ink-deep);font-size:1.25rem;line-height:1;cursor:pointer;font-family:var(--font-body)}
.step:hover{color:var(--brand)}
.stepper output{min-width:2.25rem;text-align:center;font-weight:600;font-size:1rem;color:var(--ink-deep)}

/* summary rail: sticky on desktop, bottom sheet on mobile */
.rail{position:sticky;top:6rem;display:flex;flex-direction:column;gap:.6rem;background:var(--bg);border:0.0625rem solid var(--ink);padding:var(--s3)}
.rail-rows{display:flex;flex-direction:column;gap:.45rem}
.rail-row,.rail-total{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-small);color:var(--ink)}
.rail b{display:inline-block;font-weight:600;color:var(--ink-deep);text-align:right}
.rail-total{border-top:0.0625rem solid var(--line);padding-top:.7rem;font-size:1rem;align-items:baseline}
.rail-total b{font-size:1.5rem}
.rail-next{font-size:var(--fs-small);color:var(--brand);min-height:1.6em;margin:0}
.rail .cta{width:100%;text-align:center;margin-top:.25rem}
.rail .cta[aria-disabled="true"]{background:var(--ink-soft);border-color:var(--ink-soft);cursor:not-allowed}

/* ── how it works · terms ── */
.how-steps{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:.6rem}
.how-steps li{position:relative;padding-left:1.7rem;font-size:.9375rem;line-height:1.95;color:var(--ink)}
.how-steps li::before{content:counter(step);counter-increment:step;position:absolute;left:0;color:var(--brand);font-weight:600}
.ps-terms li{font-size:.85rem;line-height:1.8;color:var(--ink-soft)}

/* ── tablet: 2-up ladder, 3-up tiles ── */
@media (max-width:64rem){
  .tiers{grid-template-columns:repeat(2,1fr)}
  .tier:last-child{grid-column:1 / -1}
  .b-tiles{grid-template-columns:repeat(3,1fr)}
  .builder-grid{grid-template-columns:1fr 16rem}
}
@media (max-width:53.75rem){
  .builder-grid{grid-template-columns:1fr}
  .b-tiles{grid-template-columns:repeat(2,1fr)}
  main.bundles{padding-bottom:12rem}   /* room under the fixed sheet so the footer stays reachable */
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;border:none;border-top:0.0625rem solid var(--line);
    padding:.75rem var(--pad-x) .9rem;gap:.4rem;box-shadow:var(--shadow-soft)}
  .rail-rows{flex-direction:row;justify-content:space-between;gap:.75rem}
  .rail-row{flex-direction:column;gap:0;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
  .rail-row b{text-align:left;font-size:.85rem;letter-spacing:0;text-transform:none}
  .rail-total{border:none;padding:0;font-size:.85rem}
  .rail-total b{font-size:1.25rem}
  .rail-next{min-height:0;font-size:.78rem}
  .rail .cta{margin:0;padding:.8rem 1rem}
}
/* ── phone: ladder as a horizontal scroll-snap row ── */
@media (max-width:40rem){
  .tiers{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s2);
    margin:0 calc(-1*var(--pad-x));padding:.9rem var(--pad-x) .5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tiers::-webkit-scrollbar{display:none}
  .tier{flex:0 0 76%;scroll-snap-align:center}
  .b-tiles{grid-template-columns:1fr 1fr;gap:.6rem}
  .b-tile img{height:6.5rem}
  .b-tile{padding:var(--s2) .5rem}
}

/* ── motion: only for people who have not asked for less ── */
@media (prefers-reduced-motion: no-preference){
  .tier{transition:transform .25s ease-out,border-color .25s ease-out}
  .tier:hover{transform:translateY(-.25rem)}
  .b-tile{transition:border-color .2s ease-out}   /* .step and .cta: motion.css */
  .bump{animation:bump .25s ease-out}
  @keyframes bump{from{transform:translateY(.35rem);opacity:.35}to{transform:none;opacity:1}}
}