/**
 * SPBC layered-depth atmosphere — organic biophilic dark forest + gold.
 * Brand tokens + shell shared by index / calculator / coaching / qr.
 * v12 — reveal animation progressive enhancement (never hide content without html.spbc-anim)
 */
:root {
  /* Design tokens (ui-ux-pro-max curated) */
  --bg: #0B120E;
  --surface: #131C16;
  --surface-2: #1B2820;
  --brand: #16A34A;
  --brand-deep: #006600;
  --accent-gold: #EAB308;
  --text: #F2F7F3;
  --text-muted: #A8B8AC;
  --border: #263A2C;
  --destructive: #DC2626;

  /* Legacy aliases (keep continuity for existing selectors) */
  --spbc-green: var(--brand);
  --spbc-green-mid: #0d3d1f;
  --spbc-green-deep: var(--bg);
  --spbc-gold: var(--accent-gold);
  --spbc-gold-legacy: #FDD700;
  --spbc-glass: rgba(19, 28, 22, 0.78);
  --spbc-glass-border: rgba(234, 179, 8, 0.22);
  --spbc-surface: var(--surface);
  --spbc-t-micro: 200ms ease-out;
  --spbc-t-macro: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --spbc-radius: 1rem;
  --spbc-radius-lg: 1.25rem;
  --spbc-radius-xl: 1.5rem;
  --spbc-shadow-layer:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.25);
  --spbc-shadow-lift:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(234, 179, 8, 0.2),
    0 0 24px rgba(22, 163, 74, 0.12);
  /* z-index scale */
  --spbc-z-atmosphere: 0;
  --spbc-z-content: 1;
  --spbc-z-header: 50;
  --spbc-z-sticky: 60;
  --spbc-z-gate: 100;
  --spbc-z-modal: 110;
}

html {
  background: var(--bg);
  color: var(--text);
  font-size: 100%;
  scroll-behavior: smooth;
}

/* ── Full-page atmosphere ─────────────────────────────────── */
body.atmosphere {
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(22, 163, 74, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 90%, rgba(234, 179, 8, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 45% 35% at 0% 60%, rgba(0, 102, 0, 0.22) 0%, transparent 48%),
    linear-gradient(165deg, #0f1a13 0%, var(--bg) 42%, #070c09 100%);
  background-color: var(--bg);
  background-attachment: scroll;
  color: var(--text);
  min-height: 100%;
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 769px) {
  body.atmosphere { background-attachment: fixed; }
}

body.atmosphere::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--spbc-z-atmosphere);
  pointer-events: none;
  opacity: 0.4;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

#atmosphere-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--spbc-z-atmosphere);
  pointer-events: none;
  opacity: 0.35;
}

body.atmosphere > main,
body.atmosphere > section,
body.atmosphere > footer,
body.atmosphere > #mainContent,
body.atmosphere > .skip-link {
  position: relative;
  z-index: var(--spbc-z-content);
}

body.atmosphere .site-header { z-index: var(--spbc-z-header); }
body.atmosphere .sticky-order-bar,
body.atmosphere .modal-backdrop { z-index: var(--spbc-z-sticky); }
body.atmosphere #ageGate { z-index: var(--spbc-z-gate); }
body.atmosphere .modal-sheet { z-index: var(--spbc-z-modal); position: relative; }

/* ── 21+ / research-use age gate (solid black, no blur/particles) ── */
#ageGate {
  position: fixed;
  inset: 0;
  z-index: var(--spbc-z-gate);
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  overflow: auto;
}
.age-gate__inner {
  width: 100%;
  max-width: 28rem;
  text-align: center;
  color: #F2F7F3;
}
.age-gate__brand {
  font-size: 2rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.age-gate__brand-gold { color: #FDD700; }
.age-gate__brand-white { color: #fff; }
.age-gate__title {
  font-family: 'Bebas Neue', 'Inter', system-ui, sans-serif;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FDD700;
  margin: 0 0 1rem;
  line-height: 1.2;
}
.age-gate__body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #c8d4cc;
  margin: 0 0 1.5rem;
}
.age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}
.age-gate__enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 0.85rem;
  background: #FDD700;
  color: #0B120E;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.age-gate__enter:hover,
.age-gate__enter:focus-visible {
  background: #fff;
  outline: none;
}
.age-gate__leave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.85rem;
  background: transparent;
  color: #F2F7F3;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.age-gate__leave:hover,
.age-gate__leave:focus-visible {
  border-color: #FDD700;
  color: #FDD700;
  outline: none;
}

/* Content shell */
.spbc-main {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .spbc-main { padding-inline: 1.5rem; }
}
.spbc-section {
  padding-block: 2.5rem;
}
@media (min-width: 768px) {
  .spbc-section { padding-block: 4rem; }
}

/* ── Typography ───────────────────────────────────────────── */
.page-hero-title,
h1.ducks-font,
h2.ducks-font {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
h3.ducks-font {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.15;
}
body.atmosphere,
body.atmosphere p,
body.atmosphere li,
body.atmosphere label {
  font-size: max(1rem, 16px);
  line-height: 1.5;
}

/* ── Shared page hero ─────────────────────────────────────── */
/* Every page hero is the SAME height regardless of how much copy it holds — the
   padding was already identical, but shorter headings/subtitles gave four different
   heights (desktop 413–485px, mobile 395–508px). The floor sits just above the
   tallest current hero at each breakpoint so all pages match exactly instead of only
   the short ones being padded out; content is centred in the resulting box. Any new
   page using .page-hero inherits this automatically.
   Mobile's floor is the larger of the two because copy wraps to more lines there. */
.page-hero {
  position: relative;
  overflow: hidden;
  /* border-box so min-height is the TOTAL hero height (padding included).
     Without this, content-box would stack padding on top of the rem floor
     and every hero would be ~8–10.5rem taller than the measured targets. */
  box-sizing: border-box;
  padding: 4.5rem 1rem 3.5rem;
  min-height: var(--spbc-hero-min, 32rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(22, 163, 74, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 80%, rgba(234, 179, 8, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(11, 18, 14, 0.2) 0%, rgba(11, 18, 14, 0.85) 100%);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) {
  .page-hero {
    padding: 6rem 1.5rem 4.5rem;
    /* Above the tallest desktop hero (coaching + badges). */
    --spbc-hero-min: 34rem;
  }
}

/* Organic SVG blob layer */
.page-hero-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.page-hero-blobs svg {
  position: absolute;
  width: min(90vw, 720px);
  height: auto;
  opacity: 0.55;
  will-change: transform;
}
.page-hero-blobs .blob-a {
  top: -18%;
  right: -12%;
  filter: blur(2px);
}
.page-hero-blobs .blob-b {
  bottom: -22%;
  left: -16%;
  width: min(70vw, 520px);
  opacity: 0.4;
}

.page-hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
  z-index: 1;
}

.page-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
  z-index: 0;
}
.page-hero-orb--green {
  width: min(55vw, 420px);
  height: min(55vw, 420px);
  top: -12%;
  right: -8%;
  background: radial-gradient(circle, rgba(22, 163, 74, 0.45) 0%, transparent 70%);
  filter: blur(28px);
  opacity: 0.85;
}
.page-hero-orb--gold {
  width: min(40vw, 280px);
  height: min(40vw, 280px);
  bottom: 5%;
  left: -5%;
  border: 2px solid rgba(234, 179, 8, 0.16);
  background: radial-gradient(circle, rgba(234, 179, 8, 0.1) 0%, transparent 65%);
  filter: blur(2px);
  opacity: 0.7;
}

/* Ambient hero video: poster always; video sources attached after load (see site-atmosphere.js) */
.page-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  /* poster as LCP-friendly paint while sources wait */
  background: #0B120E center / cover no-repeat;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .page-hero-video {
    /* Mobile / reduced-motion: poster only via CSS background; never autoplay video */
  }
}

/* NOTE the selector: `body.atmosphere p` (mobile legibility floor above)
   out-specifies a bare `.page-hero-eyebrow`, so the eyebrow was rendering at 16px
   instead of 12px on every page — wrapping to two lines and inflating the hero.
   Keep it qualified so the intended size actually wins. */
body.atmosphere p.page-hero-eyebrow,
.page-hero-eyebrow {
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0.75rem;
}

.page-hero-title {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.1;
  margin: 0 0 0.85rem;
  position: relative;
  display: inline-block;
}

/* Gold accent underline under Bebas headlines */
.page-hero-title::after,
.hero-gold-underline::after {
  content: "";
  display: block;
  width: min(8rem, 42%);
  height: 3px;
  margin: 0.65rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.45);
}

.page-hero-sub {
  max-width: 42rem;
  margin: 0 auto 1.5rem;
  color: var(--text-muted);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.55;
}

.page-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Glass trust badges (hero) */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(19, 28, 22, 0.55);
  border: 1px solid rgba(234, 179, 8, 0.22);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.trust-badge svg {
  width: 14px;
  height: 14px;
  color: var(--accent-gold);
  flex-shrink: 0;
}

/* Phone-width hero trim. All public heroes share CTA + 3 trust badges; tighten
   spacing so the shared --spbc-hero-min floor still fits without clipping.
   Must follow base .trust-badge rules so min-height/padding/font-size overrides win. */
@media (max-width: 767px) {
  .page-hero {
    /* Tallest mobile hero after badges on all tabs (coaching + price lines). */
    --spbc-hero-min: 34rem;
  }
  .page-hero-sub { margin-bottom: 1rem; }
  .page-hero-cta { gap: 0.5rem; }
  .trust-badges { margin-top: 0.85rem; gap: 0.4rem; }
  .trust-badge { min-height: 2.1rem; padding: 0.3rem 0.6rem; font-size: 0.68rem; }
}

/* ── Depth cards ──────────────────────────────────────────── */
.depth-card {
  border-radius: var(--spbc-radius-lg);
  background: var(--spbc-glass);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--spbc-glass-border);
  box-shadow: var(--spbc-shadow-layer);
  transition:
    transform var(--spbc-t-micro),
    box-shadow var(--spbc-t-micro),
    border-color var(--spbc-t-micro),
    background var(--spbc-t-micro);
}

/* Product + pillar cards: hover lift + gold border glow */
.price-card,
.price-card.depth-card,
.pillar-card,
.pillar-card.depth-card,
.grid-item {
  border-radius: var(--spbc-radius-lg);
  transition:
    transform var(--spbc-t-micro),
    box-shadow var(--spbc-t-micro),
    border-color var(--spbc-t-micro),
    background var(--spbc-t-micro);
}

@media (hover: hover) and (pointer: fine) {
  .depth-card:hover:not(.flat-panel):not(#orderForm) {
    box-shadow: var(--spbc-shadow-lift);
    border-color: rgba(234, 179, 8, 0.38);
  }

  .price-card:hover,
  .price-card.depth-card:hover,
  .pillar-card:hover,
  .pillar-card.depth-card:hover,
  .grid-item:hover {
    transform: translateY(-3px);
    border-color: rgba(234, 179, 8, 0.65);
    background: rgba(27, 40, 32, 0.92) !important;
    box-shadow:
      0 0 0 1px rgba(234, 179, 8, 0.28),
      0 12px 32px rgba(0, 0, 0, 0.4),
      0 0 20px rgba(234, 179, 8, 0.18),
      inset 0 0 0 1px rgba(234, 179, 8, 0.08);
  }
}

/* Glass panels (legacy aliases) */
.glass-panel,
.price-card,
.result-card,
.pillar-card {
  background: var(--spbc-glass) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-color: var(--spbc-glass-border) !important;
  border-radius: var(--spbc-radius-lg);
  box-shadow: var(--spbc-shadow-layer);
}

/* Flat form panels — solid surface, no glass blur */
.flat-panel,
#orderForm {
  background: rgba(19, 28, 22, 0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--spbc-radius-xl);
  box-shadow: var(--spbc-shadow-layer);
  transform: none !important;
}

/* Nested form inside .flat-panel: no second outer border */
.flat-panel #coachForm,
.flat-panel #orderForm,
#book #coachForm {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

section.bg-zinc-950,
section.bg-black,
.bg-black:not(#ageGate),
main.bg-black {
  background: transparent !important;
}

footer {
  background: rgba(11, 18, 14, 0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

/* ── Button system: primary / secondary / ghost (8 states) ── */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.7rem 1.35rem;
  border-radius: 0.85rem;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
  touch-action: manipulation;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--spbc-t-micro),
    filter var(--spbc-t-micro),
    box-shadow var(--spbc-t-micro),
    background var(--spbc-t-micro),
    border-color var(--spbc-t-micro),
    color var(--spbc-t-micro),
    opacity var(--spbc-t-micro);
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible {
  outline: 3px solid rgba(234, 179, 8, 0.95);
  outline-offset: 3px;
}
.btn-primary:active:not(:disabled):not(.is-loading),
.btn-secondary:active:not(:disabled):not(.is-loading),
.btn-ghost:active:not(:disabled):not(.is-loading) {
  transform: scale(0.97);
}

.btn-primary {
  color: #0B120E !important;
  background: linear-gradient(180deg, #f5d76e 0%, var(--accent-gold) 48%, #ca8a04 100%);
  border: 0;
  box-shadow:
    0 4px 18px rgba(234, 179, 8, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover:not(:disabled):not(.is-loading) {
  filter: brightness(1.07);
  box-shadow:
    0 6px 24px rgba(234, 179, 8, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary:disabled,
.btn-primary.is-loading {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.25);
  box-shadow: none;
  pointer-events: none;
}
.btn-primary.is-error {
  background: linear-gradient(180deg, #fca5a5 0%, #ef4444 50%, #b91c1c 100%);
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
}
.btn-primary.is-success {
  background: linear-gradient(180deg, #86efac 0%, #22c55e 50%, #15803d 100%);
  color: #052e16 !important;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
}

.btn-secondary {
  color: var(--text) !important;
  background: rgba(19, 28, 22, 0.5);
  border: 1px solid rgba(234, 179, 8, 0.4);
  font-weight: 700;
}
.btn-secondary:hover:not(:disabled):not(.is-loading) {
  background: rgba(234, 179, 8, 0.1);
  border-color: var(--accent-gold);
}
.btn-secondary:disabled,
.btn-secondary.is-loading {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-secondary.is-error {
  border-color: #f87171;
  color: #fecaca !important;
  background: rgba(127, 29, 29, 0.35);
}
.btn-secondary.is-success {
  border-color: #4ade80;
  color: #bbf7d0 !important;
  background: rgba(20, 83, 45, 0.35);
}

.btn-ghost {
  color: #A8B8AC !important;
  background: transparent;
  border: 1px solid transparent;
  font-weight: 700;
}
.btn-ghost:hover:not(:disabled):not(.is-loading) {
  color: #F2F7F3 !important;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(234, 179, 8, 0.25);
}
.btn-ghost:disabled,
.btn-ghost.is-loading {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-ghost.is-error { color: #fca5a5 !important; }
.btn-ghost.is-success { color: #86efac !important; }

.btn-primary.is-loading::after,
.btn-secondary.is-loading::after,
.btn-ghost.is-loading::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spbc-btn-spin 0.7s linear infinite;
  margin-left: 0.35rem;
}
@keyframes spbc-btn-spin {
  to { transform: rotate(360deg); }
}

.field-error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #fca5a5;
  line-height: 1.35;
}
.field-error[hidden] { display: none !important; }
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.35);
}
input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: rgba(74, 222, 128, 0.55) !important;
}

.spbc-undo-toast {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(120%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.85rem;
  background: rgba(19, 28, 22, 0.96);
  border: 1px solid rgba(234, 179, 8, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  color: #F2F7F3;
  font-size: 0.875rem;
  max-width: min(24rem, calc(100vw - 1.5rem));
  transition: transform 0.25s ease;
}
.spbc-undo-toast.is-visible {
  transform: translateX(-50%) translateY(0);
}
.spbc-undo-toast button {
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 0.85rem;
  border-radius: 0.6rem;
  font-weight: 800;
  color: #0B120E;
  background: linear-gradient(180deg, #f5d76e 0%, #EAB308 50%, #ca8a04 100%);
  border: 0;
  cursor: pointer;
}
.spbc-sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Press-scale micro for interactive controls */
button:not(:disabled),
a.btn-primary,
a.btn-secondary,
a.btn-ghost,
.nav-link,
.filter-chip,
.copy-btn {
  cursor: pointer;
}
button:not(:disabled):active,
a.btn-primary:active,
a.btn-secondary:active,
a.btn-ghost:active {
  transform: scale(0.97);
}

/* Tilt disabled — hover lift only via depth-card rules */
.tilt-3d {
  transform-style: flat;
  will-change: auto;
}
.tilt-3d.is-tilting {
  transition: none;
}

.perspective-root { perspective: none; }

/* ── Sticky cart / modals ─────────────────────────────────── */
.sticky-order-inner {
  background: linear-gradient(180deg, rgba(27, 40, 32, 0.94) 0%, rgba(11, 18, 14, 0.97) 100%) !important;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-color: rgba(234, 179, 8, 0.35) !important;
}
.modal-sheet {
  background: rgba(19, 28, 22, 0.97) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(234, 179, 8, 0.3) !important;
  position: relative;
  z-index: var(--spbc-z-modal);
}

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: var(--accent-gold);
  color: #0B120E;
  font-size: 0.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  transition: transform var(--spbc-t-micro);
}
.cart-badge.pulse {
  animation: cart-badge-pulse 300ms ease-out;
}
@keyframes cart-badge-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ── Scroll reveal (CSS + IntersectionObserver only) ─ */
/* Content is VISIBLE by default. The hidden start state applies only after JS has
   confirmed it can actually run the reveal (html.spbc-anim). A blocked CDN, a JS
   error, or an observer that never fires must never leave the price list invisible. */
.reveal {
  transition: opacity var(--spbc-t-macro), transform var(--spbc-t-macro);
}
html.spbc-anim .reveal {
  opacity: 0;
  transform: translateY(20px);
}
html.spbc-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Price/stack cards: never animate opacity. Entrance is CSS hover-lift only. */

/* ── Section divider ──────────────────────────────────────── */
.section-rule {
  height: 1px;
  border: 0;
  margin: 0 auto;
  max-width: 72rem;
  background: linear-gradient(90deg, transparent, rgba(234, 179, 8, 0.28), transparent);
}

/* ── Focus rings (visible, gold) ──────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}

/* ── Search glass pill ────────────────────────────────────── */
.search-glass {
  background: rgba(11, 18, 14, 0.65) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text) !important;
}

/* ── Result number flash ──────────────────────────────────── */
.num-flash {
  animation: num-flash 150ms ease-out;
}
@keyframes num-flash {
  0% { color: #fff; text-shadow: 0 0 12px rgba(234, 179, 8, 0.8); }
  100% { color: var(--accent-gold); text-shadow: none; }
}

.tabular-gold {
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Filter chips polish */
.filter-chip {
  min-height: 44px;
  cursor: pointer;
}
.filter-chip.active {
  background: var(--accent-gold) !important;
  color: #0B120E !important;
  border-color: var(--accent-gold) !important;
}

/* Gold price highlights (shared) */
.price-amount,
.tabular-gold,
.text-gold,
[data-price] {
  color: var(--accent-gold);
}

/* Muted text utility via tokens */
body.atmosphere .text-zinc-400,
body.atmosphere .text-zinc-500 {
  color: var(--text-muted) !important;
}
body.atmosphere .text-zinc-300 {
  color: #c5d0c8 !important;
}

/* Brand emerald accents → brand green */
body.atmosphere .text-emerald-400,
body.atmosphere .text-emerald-300 {
  color: #4ade80 !important;
}

/* Cursor on clickables */
a,
button,
label[for],
select,
summary,
[role="button"],
.price-card,
.filter-chip {
  cursor: pointer;
}

/* Tap targets */
.nav-link,
.filter-chip,
.btn-primary,
.btn-secondary,
.copy-btn,
.qty-stepper .qty-btn {
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tilt-3d,
  .tilt-3d.is-tilting,
  .depth-card,
  .price-card,
  .pillar-card,
  .grid-item,
  .reveal,
  .btn-primary,
  .btn-secondary,
  .cart-badge {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
  .price-card:hover,
  .price-card.depth-card:hover,
  .pillar-card:hover,
  .grid-item:hover {
    transform: none !important;
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .cart-badge.pulse { animation: none !important; }
  .num-flash { animation: none !important; }
  #atmosphere-canvas { display: none !important; }
  body.atmosphere { background-attachment: scroll !important; }
  .page-hero-orb { display: none; }
  .page-hero-blobs svg { transform: none !important; }
}


/* ═══ Migrated page styles (Unit B) — single stylesheet, tokens only ═══ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.atmosphere {
  font-family: 'Inter', system-ui, sans-serif;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.ducks-font {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: calc(var(--spbc-z-modal) + 10);
  background: var(--accent-gold);
  color: var(--bg);
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  min-height: 44px;
}
.skip-link:focus {
  left: 0.5rem;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
input, textarea, select, button {
  font-size: 16px;
  touch-action: manipulation;
}
.break-word { overflow-wrap: anywhere; word-break: break-word; }
#contact { scroll-margin-top: 88px; }

/* from index.page.css */



h2
.terms-scroll {
max-height: min(40vh, 280px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.qty-select {
background: #000;
border: 1px solid #52525b;
border-radius: 0.5rem;
padding: 0.5rem 0.65rem;
font-size: 1rem; /* 16px avoids iOS focus zoom */
min-width: 3.5rem;
min-height: 2.75rem;
color: #fff;
touch-action: manipulation;
}
/* Stack price rows cleanly on narrow phones */
.price-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.35rem 0.5rem;
}
.price-row .price-label {
flex: 1 1 auto;
min-width: 0;
font-size: 0.8125rem;
color: var(--text-muted);
}
.price-row .price-controls {
display: flex;
align-items: center;
gap: 0.55rem;
flex-shrink: 0;
margin-left: auto;
}
.price-amount {
font-weight: 700;
color: var(--accent-gold);
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
}
.break-word { overflow-wrap: anywhere; word-break: break-word; }
/* Inputs: 16px+ prevents iOS auto-zoom */

@media (max-width: 380px) {
.price-row .price-controls { gap: 0.4rem; }
.qty-select { min-width: 3.25rem; padding: 0.45rem 0.5rem; }
}

/* ── Price list: responsive grid + sticky category groups ── */
/* Shell uses shared .spbc-main 72rem; rules/filter stay readable width */
.prices-shell .prices-rules-card,
.prices-shell .prices-filter-panel {
  max-width: 36rem;
  margin-inline: auto;
}
/* Stick category subheaders below site header (z:50). Offset set from measured header
   height in site-header.js; fallback covers typical brand+nav row (~78px). */
:root {
  --spbc-header-sticky-offset: 5rem;
}
#priceTable.price-table,
.price-table {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
@media (min-width: 640px) {
  #priceTable.price-table,
  .price-table {
    gap: 1.1rem;
  }
}
.price-table-loading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
}
@media (min-width: 640px) {
  .price-table-loading {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .price-table-loading {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.price-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
/* Filtering adds `.hidden` (Tailwind, one class) which TIES with `.price-group`'s
   own `display` and loses on source order — so a filtered-out group stayed visible
   as an empty sticky heading. Qualify these so hiding actually wins. Cards are
   included defensively in case a future rule gives them a `display`. */
#priceTable .price-group.hidden,
#priceTable .price-card.hidden {
  display: none;
}

/* ── Schedule planner (titration.html) ────────────────────── */
.plan-disclaimer {
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.plan-disclaimer strong { color: var(--accent-gold); }
.plan-block { padding: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .plan-block { padding: 1.35rem 1.5rem; } }
.plan-head {
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  letter-spacing: 0.05em;
  color: var(--accent-gold);
  margin: 0 0 0.75rem;
}
.plan-head-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: baseline; justify-content: space-between;
}
.plan-head-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.field-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.field-hint { display: block; font-size: 0.72rem; font-weight: 400; color: var(--text-muted); margin-top: 0.2rem; }
.plan-steps-hint { margin: 0 0 0.75rem; }
.plan-conc {
  margin: 0.85rem 0 0; font-size: 0.9rem; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums;
}
/* Table scrolls inside its own box so the page never scrolls sideways. */
.plan-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan-table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.plan-table th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
  padding: 0 0.35rem 0.4rem; font-weight: 700; white-space: nowrap;
}
.plan-table td { padding: 0.22rem 0.35rem; vertical-align: middle; }
.plan-cell-idx { width: 2rem; }
.plan-idx {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: rgba(234, 179, 8, 0.15); border: 1px solid var(--spbc-glass-border);
  color: var(--accent-gold); font-size: 0.78rem; font-weight: 700;
}
.field-sm { min-height: 44px; font-size: 0.9rem; }
.plan-out {
  font-size: 0.88rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plan-out.is-over { color: var(--destructive); }
.plan-empty { font-size: 0.85rem; color: var(--text-muted); margin: 0.5rem 0 0; }
.plan-figure { margin: 0 0 1.1rem; }
.plan-figure figcaption { margin-bottom: 0.3rem; }
.plan-chart, .plan-syringe, .plan-timeline { width: 100%; height: auto; display: block; }
.plan-step-pick { max-width: 16rem; margin-top: 0.5rem; }
.plan-results {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; margin: 0 0 0.9rem;
}
@media (min-width: 640px) { .plan-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plan-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan-results > div {
  border: 1px solid var(--border); border-radius: var(--spbc-radius);
  padding: 0.6rem 0.75rem; background: rgba(19, 28, 22, 0.5);
}
.plan-results dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.plan-results dd {
  margin: 0.15rem 0 0; font-size: 1.05rem; font-weight: 700;
  color: var(--accent-gold); font-variant-numeric: tabular-nums;
}
.plan-buy-note { font-size: 0.85rem; line-height: 1.5; color: var(--text); margin: 0 0 0.85rem; }
.plan-buy-note:empty { display: none; }
.plan-buy-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plan-cart-msg { font-size: 0.85rem; color: var(--accent-gold); margin: 0.7rem 0 0; min-height: 1.2em; }
.plan-link { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 2px; }
.plan-footnote {
  font-size: 0.75rem; line-height: 1.55; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: 0.8rem; margin: 0;
}
.btn-sm { min-height: 40px; padding: 0.4rem 0.75rem; font-size: 0.8rem; }
.btn-xs { min-height: 36px; padding: 0.3rem 0.55rem; font-size: 0.72rem; }
.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;
}
.price-group-heading {
  position: sticky;
  top: var(--spbc-header-sticky-offset);
  z-index: var(--spbc-z-content); /* below header (50) — never covers nav */
  margin: 0;
  padding: 0.35rem 0.55rem;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(11, 18, 14, 0.96);
  border: 1px solid var(--border);
  border-radius: var(--spbc-radius);
  box-shadow: 0 1px 0 rgba(234, 179, 8, 0.12);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.price-group-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  min-width: 0;
}
@media (min-width: 640px) {
  .price-group {
    gap: 0.6rem;
  }
  .price-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
}
@media (min-width: 1024px) {
  .price-group-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
  }
}
/* Density: tighter card chrome, keep 44px qty targets */
.price-card.depth-card,
#priceTable .price-card {
  padding: 0.55rem 0.65rem;
  min-width: 0;
}
@media (min-width: 640px) {
  .price-card.depth-card,
  #priceTable .price-card {
    padding: 0.65rem 0.75rem;
  }
}
.price-card-title {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.25;
  margin: 0 0 0.35rem;
}
@media (min-width: 640px) {
  .price-card-title {
    font-size: 0.95rem;
    margin-bottom: 0.45rem;
  }
}
.price-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
/* Hard rule: product cards never use reveal opacity hide (hover-lift transform still OK) */
html.spbc-anim #priceTable .price-card,
html.spbc-anim #priceTable .price-card.reveal {
  opacity: 1;
}
.filter-result-count {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}
.filter-result-count[hidden] {
  display: none !important;
}


.search-field {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--spbc-radius);
padding: 0.75rem 1rem 0.75rem 2.75rem;
color: var(--text);
font-size: 16px;
min-height: 2.75rem;
}
.search-field:focus {
outline: none;
border-color: var(--accent-gold);
box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.35);
}
.filter-chip {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.5rem 0.9rem;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--text-muted);
background: transparent;
min-height: 44px;
cursor: pointer;
transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.filter-chip.active {
background: var(--accent-gold);
color: var(--bg);
border-color: var(--accent-gold);
}
.filter-chip:hover:not(.active) {
border-color: rgba(234, 179, 8, 0.5);
color: var(--text);
}
.filter-chip[hidden] {
display: none !important;
}
.price-card {
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
border-radius: var(--spbc-radius-lg);
cursor: pointer;
}
.price-card.qty-flash {
border-color: rgba(234, 179, 8, 0.85);
box-shadow:
0 0 0 1px rgba(234, 179, 8, 0.4),
0 0 16px rgba(234, 179, 8, 0.35);
}
.sticky-order-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--spbc-z-sticky);
transform: translateY(110%);
transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
padding: 0 0.75rem max(0.75rem, env(safe-area-inset-bottom));
pointer-events: none;
}
.sticky-order-bar.visible {
transform: translateY(0);
pointer-events: auto;
}
.sticky-order-inner {
max-width: 28rem;
margin: 0 auto;
background: linear-gradient(180deg, rgba(27, 40, 32, 0.96) 0%, rgba(11, 18, 14, 0.98) 100%);
border: 1px solid rgba(234, 179, 8, 0.4);
border-radius: var(--spbc-radius-lg);
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
padding: 0.75rem 1rem;
}
.sticky-order-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
margin-bottom: 0.5rem;
cursor: pointer;
background: none;
border: 0;
padding: 0.15rem 0;
color: inherit;
font: inherit;
text-align: left;
min-height: 44px;
}
.sticky-lines {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.25s ease;
margin: 0;
}
.sticky-order-bar.expanded .sticky-lines {
max-height: 11rem;
opacity: 1;
margin: 0.35rem 0 0.65rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.sticky-line {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.7rem;
color: rgba(255,255,255,0.85);
padding: 0.25rem 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sticky-line:last-child { border-bottom: 0; }
.sticky-count-btn {
background: none;
border: 0;
padding: 0;
text-align: left;
cursor: pointer;
color: inherit;
font: inherit;
pointer-events: auto;
}
.sticky-count-btn:hover { color: var(--accent-gold); }
.sticky-expand-hint {
display: block;
font-size: 0.625rem;
font-weight: 600;
color: rgba(167, 243, 208, 0.8);
margin-top: 0.15rem;
pointer-events: none;
}
.sticky-actions {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem;
}
.btn-clear-cart {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fca5a5;
border: 1px solid rgba(248, 113, 113, 0.45);
background: rgba(0, 0, 0, 0.25);
border-radius: 0.75rem;
padding: 0.65rem 0.75rem;
min-height: 2.75rem;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-clear-cart:hover {
background: rgba(127, 29, 29, 0.45);
border-color: #f87171;
color: #fecaca;
}
.btn-clear-cart-form {
width: 100%;
margin-top: 0.25rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #fca5a5;
border: 1px dashed rgba(248, 113, 113, 0.4);
background: transparent;
border-radius: var(--spbc-radius);
padding: 0.7rem 1rem;
min-height: 2.75rem;
}
.btn-clear-cart-form:hover {
border-style: solid;
background: rgba(127, 29, 29, 0.25);
}
.progress-track {
height: 6px;
background: rgba(0, 0, 0, 0.45);
border-radius: 999px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-gold), #4ade80);
border-radius: 999px;
width: 0%;
transition: width 0.35s ease;
}
.progress-track.celebrate {
box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7);
animation: progress-celebrate 0.7s ease 2;
}
@keyframes progress-celebrate {
0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
50% { box-shadow: 0 0 14px 3px rgba(234, 179, 8, 0.55); }
}
.qty-stepper {
display: inline-flex;
align-items: center;
gap: 0;
border: 1px solid #52525b;
border-radius: 0.65rem;
background: #000;
overflow: hidden;
min-height: 2.75rem; /* 44px touch target floor */
}
.qty-stepper .qty-btn {
width: 2.75rem; /* ≥44px hit target */
min-width: 2.75rem;
min-height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
font-weight: 700;
color: var(--accent-gold);
background: transparent;
border: 0;
touch-action: manipulation;
user-select: none;
cursor: pointer;
}
.qty-stepper .qty-btn:active { background: rgba(253, 215, 0, 0.12); }
.qty-stepper .qty-btn:disabled { opacity: 0.35; color: #71717a; }
.qty-stepper .qty-display {
min-width: 1.75rem;
text-align: center;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff;
font-size: 0.95rem;
}
.qty-stepper select.qty-select {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.price-controls { position: relative; }
.qty-float {
position: absolute;
right: 0.25rem;
top: -0.35rem;
font-size: 0.75rem;
font-weight: 800;
color: var(--accent-gold);
pointer-events: none;
animation: qty-float-up 0.55s ease forwards;
z-index: 5;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.qty-float.down { color: #a1a1aa; }
@keyframes qty-float-up {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-18px); }
}
/* In-cart: gold accent so qty>0 cards stay findable in a multi-column grid */
.price-card.in-cart {
border-color: rgba(234, 179, 8, 0.7);
box-shadow:
  0 0 0 1px rgba(234, 179, 8, 0.22),
  0 0 18px rgba(234, 179, 8, 0.12);
background: rgba(27, 40, 32, 0.96) !important;
}
.price-card.in-cart::before {
content: '';
position: absolute;
left: 0;
top: 0.55rem;
bottom: 0.55rem;
width: 3px;
border-radius: 0 2px 2px 0;
background: var(--accent-gold);
pointer-events: none;
}
.price-card {
position: relative;
}
.review-remove {
color: #f87171;
background: none;
border: 0;
font-size: 1.1rem;
line-height: 1;
padding: 0.15rem 0.4rem;
min-width: 2rem;
min-height: 2rem;
cursor: pointer;
}
.review-remove:hover { color: #fecaca; }
.sticky-progress-hint.unlocked {
color: #6ee7b7 !important;
font-weight: 600;
}
.skeleton-card {
border-radius: var(--spbc-radius-lg);
border: 1px solid rgba(38, 58, 44, 0.9);
background: var(--surface);
padding: 1rem;
min-height: 5.5rem;
position: relative;
overflow: hidden;
}
.skeleton-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(234, 179, 8, 0.08), transparent);
animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.modal-backdrop {
position: fixed;
inset: 0;
z-index: var(--spbc-z-modal);
background: rgba(0, 0, 0, 0.75);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
}
/* .modal-backdrop { display:flex } beats Tailwind .hidden without this */
.modal-backdrop.hidden,
.modal-backdrop[hidden] {
display: none !important;
pointer-events: none !important;
}
@media (min-width: 640px) {
.modal-backdrop {
align-items: center;
padding: 1rem;
}
}
.modal-sheet {
width: 100%;
max-width: 28rem;
max-height: min(88vh, 640px);
overflow-y: auto;
background: var(--surface);
border: 1px solid rgba(234, 179, 8, 0.3);
border-radius: var(--spbc-radius-xl) 1.5rem 0 0;
padding: 1.25rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
-webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
.modal-sheet { border-radius: var(--spbc-radius-xl); }
}
.copy-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--accent-gold);
border: 1px solid rgba(234, 179, 8, 0.4);
border-radius: 0.75rem;
padding: 0.5rem 0.85rem;
background: rgba(11, 18, 14, 0.55);
min-height: 44px;
cursor: pointer;
}
.copy-btn:hover { background: rgba(234, 179, 8, 0.12); }
html { scroll-padding-bottom: 11rem; }
#orderForm,
#message {
  scroll-margin-bottom: 12.5rem;
}
body.has-cart-bar { padding-bottom: 12.5rem; }
body.has-cart-bar.sticky-expanded { padding-bottom: 18rem; }
body.has-cart-bar.cart-over-form { padding-bottom: 7.5rem; }
body.has-cart-bar.cart-over-form .sticky-order-bar .progress-track,
body.has-cart-bar.cart-over-form .sticky-order-bar .sticky-progress-hint,
body.has-cart-bar.cart-over-form .sticky-order-bar .sticky-lines {
  display: none;
}
body.has-cart-bar.cart-over-form .sticky-order-bar {
  /* Keep the bar as a thin dock so the order-summary textarea stays readable */
  padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: reduce) {
.sticky-order-bar, .sticky-lines, .progress-fill, .price-card, .filter-chip, .skeleton-card::after, .qty-float {
transition: none !important;
animation: none !important;
}
.price-card.qty-flash { transform: none; }
.progress-track.celebrate { animation: none !important; box-shadow: none; }
.sticky-order-bar { transition: none !important; }
}

/* from calculator.page.css */



.field {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--spbc-radius);
padding: 0.85rem 1.1rem;
color: var(--text);
font-size: 16px; /* avoids iOS focus zoom */
min-height: 2.75rem;
touch-action: manipulation;
}
.field:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.55);
border-color: var(--accent-gold);
}
.field:focus-visible {
outline: 2px solid var(--accent-gold);
outline-offset: 2px;
}
.result-card {
background: var(--spbc-glass);
border: 1px solid var(--spbc-glass-border);
border-radius: var(--spbc-radius-lg);
}
.syringe-wrap {
background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 45%, var(--bg) 100%);
border: 1px solid rgba(234, 179, 8, 0.28);
border-radius: var(--spbc-radius-lg);
padding: 1.25rem 1rem 1rem;
}
.syringe-svg {
width: 100%;
max-width: 420px;
height: auto;
display: block;
margin: 0 auto;
}
.syringe-fill { transition: width var(--spbc-t-macro), x var(--spbc-t-macro); }
@media (prefers-reduced-motion: reduce) {
.syringe-fill { transition: none !important; }
}
.tick-label {
font-family: 'Inter', system-ui, sans-serif;
font-size: 8px;
fill: rgba(255, 255, 255, 0.45);
}



@media (prefers-reduced-motion: reduce) {
.syringe-fill, button { transition: none !important; }
}

/* from stacks.page.css */





body.atmosphere p.stacks-cart-strip {
font-size: 0.875rem;
margin: 0 0 1rem;
}
.stacks-cart-strip__link {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.75rem;
min-height: 44px;
padding: 0.65rem 0.9rem;
border-radius: var(--spbc-radius);
border: 1px solid rgba(234, 179, 8, 0.4);
background: rgba(234, 179, 8, 0.08);
color: var(--text);
text-decoration: none;
font-weight: 700;
}
.stacks-cart-strip__hint {
font-weight: 500;
color: var(--text-muted);
font-size: 0.75rem;
}
.spbc-undo-toast .spbc-toast-link,
.spbc-undo-toast a.spbc-toast-link {
min-height: 44px;
min-width: 44px;
padding: 0.4rem 0.85rem;
border-radius: 0.6rem;
font-weight: 800;
color: #0B120E;
background: linear-gradient(180deg, #f5d76e 0%, #EAB308 50%, #ca8a04 100%);
border: 0;
display: inline-flex;
align-items: center;
text-decoration: none;
}

.stack-card {
border: 1px solid var(--spbc-glass-border);
border-radius: var(--spbc-radius-lg);
padding: 1.25rem 1.35rem;
background: var(--spbc-glass);
}
.stack-card.is-unavailable {
opacity: 0.72;
border-color: rgba(113, 113, 122, 0.45);
}
.stack-item-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.35rem 0.75rem;
padding: 0.55rem 0;
border-bottom: 1px solid rgba(39, 58, 44, 0.65);
}
.stack-item-row:last-child { border-bottom: none; }
.stack-cat {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid rgba(234, 179, 8, 0.3);
color: var(--accent-gold);
background: rgba(234, 179, 8, 0.08);
}
.stack-total {
font-variant-numeric: tabular-nums;
color: var(--accent-gold);
font-weight: 800;
font-size: 1.25rem;
}
.bac-check {
display: flex;
align-items: flex-start;
gap: 0.55rem;
cursor: pointer;
user-select: none;
}
.bac-check input {
width: 1.15rem;
height: 1.15rem;
margin-top: 0.15rem;
accent-color: var(--accent-gold);
flex-shrink: 0;
}
.btn-add-stack {
width: 100%;
min-height: 2.75rem;
border-radius: 0.85rem;
font-weight: 800;
font-size: 0.95rem;
background: linear-gradient(180deg, #f5d76e 0%, var(--accent-gold) 48%, #ca8a04 100%);
color: var(--bg);
border: none;
box-shadow: 0 4px 18px rgba(234, 179, 8, 0.3);
touch-action: manipulation;
cursor: pointer;
}
.btn-add-stack:hover:not(:disabled) { filter: brightness(1.05); }
.btn-add-stack:disabled {
opacity: 0.45;
cursor: not-allowed;
filter: grayscale(0.4);
}

@media (prefers-reduced-motion: reduce) {
.btn-add-stack { transition: none !important; }
}

/* from coaching.page.css */





.pillar-card {
border: 1px solid var(--spbc-glass-border);
border-radius: var(--spbc-radius-lg);
padding: 1.25rem 1.35rem;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
cursor: default;
}
.pillar-icon {
width: 2.75rem;
height: 2.75rem;
border-radius: 0.85rem;
background: linear-gradient(145deg, var(--surface-2), var(--bg));
border: 1px solid rgba(234, 179, 8, 0.35);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.85rem;
color: var(--accent-gold);
}
.pillar-icon svg { width: 1.15rem; height: 1.15rem; }
.price-pill {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
background: linear-gradient(180deg, #f5d76e 0%, var(--accent-gold) 48%, #ca8a04 100%);
color: var(--bg);
font-weight: 800;
padding: 0.55rem 1.1rem;
border-radius: 999px;
box-shadow: 0 4px 18px rgba(234, 179, 8, 0.35);
}
.field {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 0.85rem;
padding: 0.85rem 1.1rem;
color: var(--text);
font-size: 16px;
min-height: 2.75rem;
touch-action: manipulation;
box-shadow: none;
outline: none;
appearance: none;
-webkit-appearance: none;
}
select.field {
background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 2.25rem;
}
.field:focus {
outline: none;
border-color: var(--accent-gold);
box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.45);
}
/* Kill browser / double-ring on focus inside coaching book panel */
#book .field:focus-visible {
outline: none;
box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.45);
}
.chip {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
padding: 0.4rem 0.8rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid rgba(234, 179, 8, 0.3);
color: var(--accent-gold);
background: rgba(234, 179, 8, 0.08);
backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
.pillar-card { transition: none !important; }
.pillar-card:hover { transform: none; }
}

/* State code field — uppercase without inline style */
#shipState { text-transform: uppercase; }