/* Shared preview-kit styles for the Pricing & Plans preview:
   the pricing cards (Personal + Business), the FAQ accordion, and the notify toast.
   design-1.css layers art direction on top.
   Tokens only — never hardcode hex (on-gold ink #1A0F00 excepted). */

/* ============================== pricing cards ============================== */
.pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 880px) { .pv-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
/* Business is "launching soon" — a single card. Center it (like the mobile grid)
   so the 3-up desktop grid doesn't leave two empty columns beside it. */
.cn-main[data-view="business"] .pv-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
.pv-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 22px; padding: 28px 24px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 26px 56px -34px rgba(0,0,0,.6);
  transition: transform .42s var(--ease-smooth), box-shadow .42s var(--ease-smooth), border-color .3s var(--ease-smooth);
}
/* keep card content above the hover sheen */
.pv-card > * { position: relative; z-index: 1; }
/* a faint diagonal light sweeps across on hover — the "alive" cue */
.pv-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 22px; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 48%, transparent 58%);
  background-size: 220% 100%; background-position: 150% 0;
  opacity: 0; transition: opacity .35s var(--ease-smooth), background-position .85s var(--ease-smooth);
}
@media (hover: hover) {
  .pv-card:hover { transform: translateY(-6px); box-shadow: 0 40px 78px -34px rgba(0,0,0,.66), 0 18px 50px -28px var(--gold-glow); }
  .pv-card:not(.feat):hover { border-color: var(--stroke-strong); }
  .pv-card:hover::before { opacity: 1; background-position: -40% 0; }
}
.pv-card.feat {
  border-color: transparent;
  background: radial-gradient(130% 90% at 50% 0%, rgba(230,184,97,0.16), transparent 56%), linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 34px 80px -34px rgba(0,0,0,.72), 0 18px 54px -32px var(--gold-glow);
}
/* gold gradient border ring on the best-value card */
.pv-card.feat::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1.4px; pointer-events: none;
  background: linear-gradient(180deg, var(--gold-2), rgba(230,184,97,0.25) 42%, transparent 60%, var(--gold-deep));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (min-width: 881px) { .pv-card.feat { transform: translateY(-14px) scale(1.035); } }
@media (min-width: 881px) and (hover: hover) { .pv-card.feat:hover { transform: translateY(-20px) scale(1.05); } }
.pv-ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 2;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #1A0F00;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 5px 13px; border-radius: 999px;
  box-shadow: 0 8px 20px -7px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.pv-name { font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--cream); margin: 0 0 12px; line-height: 1.1; }
/* the interactive e-books, a small fanned add-on that sits BELOW the outcome
   bullets — a quiet "and it comes with these" bonus, not the hero. Each cover
   shares a bottom-centre pivot and both rotates out AND shifts sideways (--dx)
   so the spines separate; hover lifts one clear. Geometry comes in as custom
   props from fanCovers(). */
.pv-fan { position: relative; width: 100%; height: 88px; margin: 4px 0 8px; overflow: visible; }
.pv-fan::before { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); width: 150px; height: 84px; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, var(--gold-glow), transparent 64%); opacity: .32; z-index: 0; pointer-events: none; }
.pv-fan-c {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
  width: 46px; height: auto; border-radius: 3px; transform-origin: center bottom;
  transform: translateX(var(--dx, 0)) rotate(var(--ang, 0)); z-index: var(--z, 1);
  box-shadow: 0 8px 14px -7px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.32);
  transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth), opacity .25s var(--ease-smooth);
}
/* hover a single volume: it lifts, straightens upright, scales up and comes to
   the front — like pulling one book out of the fanned stack; the rest recede.
   Desktop-pointer only, so touch devices never get a stuck-hover state. */
@media (hover: hover) {
  .pv-fan:hover .pv-fan-c { opacity: .8; }
  .pv-fan .pv-fan-c:hover {
    opacity: 1; z-index: 40;
    transform: translateX(var(--dx, 0)) translateY(-16px) rotate(0deg) scale(1.32);
    box-shadow: 0 18px 28px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4);
  }
}
.pv-fan-tag { align-self: center; font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1A0F00; background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 3px 11px; border-radius: 999px; box-shadow: 0 5px 12px -4px var(--gold-glow); margin: 0 0 16px; }
/* single-column cards are wider — nudge the covers up so the fan still reads */
@media (max-width: 880px) { .pv-fan { height: 96px; } .pv-fan-c { width: 50px; } }
.pv-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pv-price .now { font-family: var(--f-display); font-weight: 700; font-size: 30px; color: var(--gold); }
.pv-price .pv-now-custom { font-size: 26px; }
.pv-from { font-family: var(--f-body); font-size: 12.5px; font-weight: 600; color: var(--cream-muted); }
.pv-unit { font-family: var(--f-body); font-size: 13px; color: var(--cream-muted); }
/* honest regular-price anchor: struck list price next to today's price */
.pv-reg { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: center; }
.pv-was { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; opacity: .85; }
.pv-card.feat .pv-price .now {
  font-size: 34px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-2);
}
.pv-tabby { font-family: var(--f-body); font-size: 12.5px; color: var(--accent-cool); margin: 7px 0 12px; }
/* "Best if…" self-selection strip */
.pv-bestfor { font-family: var(--f-body); font-size: 13px; font-style: italic; color: var(--cream); line-height: 1.45; margin: 0 0 16px; padding-top: 14px; border-top: 1px solid var(--stroke); }
/* Lifetime reassurance — a quiet gold-check label, not a loud green pill. */
.pv-life {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream-muted); margin: 0 0 18px;
}
.pv-life svg { width: 13px; height: 13px; color: var(--gold); }
.pv-feats { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pv-feat { display: flex; align-items: flex-start; gap: 9px; font-family: var(--f-body); font-size: 13.5px; color: var(--cream-muted); line-height: 1.45; }
.pv-feat svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--gold); }
/* checkmarks draw themselves on, staggered down the list, as a card renders */
.pv-feat svg polyline { stroke-dasharray: 26; stroke-dashoffset: 26; animation: pv-check-draw .5s var(--ease-smooth) forwards; }
@keyframes pv-check-draw { to { stroke-dashoffset: 0; } }
.pv-feats .pv-feat:nth-child(1) svg polyline { animation-delay: .04s; }
.pv-feats .pv-feat:nth-child(2) svg polyline { animation-delay: .12s; }
.pv-feats .pv-feat:nth-child(3) svg polyline { animation-delay: .20s; }
.pv-feats .pv-feat:nth-child(4) svg polyline { animation-delay: .28s; }
.pv-feats .pv-feat:nth-child(5) svg polyline { animation-delay: .36s; }
.pv-feats .pv-feat:nth-child(n+6) svg polyline { animation-delay: .44s; }
.pv-cta { width: 100%; justify-content: center; }
.pv-cta { margin-top: auto; }
/* Saqr's Promise — 14-day guarantee reassurance under each plan's CTA */
.pv-promise { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.pv-promise svg { flex: none; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .pv-card.feat { transition: none; } }

/* ================================== FAQ =================================== */
.kit-fq {
  border: 1px solid var(--stroke); border-radius: 14px; margin-bottom: 10px;
  background: var(--chip-bg); overflow: hidden;
}
.kit-fq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 20px; font-family: var(--f-body); font-weight: 600; font-size: 15.5px; color: var(--cream);
}
.kit-fq summary::-webkit-details-marker { display: none; }
.kit-fq-ico { flex: none; width: 18px; height: 18px; color: var(--gold); transition: transform .22s var(--ease-smooth); }
.kit-fq[open] .kit-fq-ico { transform: rotate(180deg); }
.kit-fq-a { box-sizing: border-box; overflow: hidden; padding: 0 20px 18px; font-family: var(--f-body); font-size: 14px; line-height: 1.6; color: var(--secondary); transition: height .34s var(--ease-smooth); }

/* ================================ toast ================================== */
.kit-toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(16px);
  z-index: 120; max-width: 88vw; padding: 13px 20px; border-radius: 14px;
  border: 1px solid var(--stroke-strong); background: var(--bg-2); color: var(--cream);
  font-family: var(--f-body); font-size: 14px; box-shadow: 0 22px 50px -26px rgba(0,0,0,.8);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease-bounce);
}
.kit-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .kit-fq-ico, .kit-toast, .pv-card, .pv-card::before, .kit-fq-a, .pv-fan-c { transition: none !important; }
  .pv-feat svg polyline { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ===================== The interactive workbook (3D book render) =====================
   The real book cover (book/1/canva-assets/cover.webp) tilted in 3D with a gilded
   spine + page edges (restored from the original storefront), now with Saqr beside it,
   a real scannable QR, and the four things the book + app actually do. Shared by the
   homepage + storefront. Tokens only; the only literals are paper/ink tones (cream
   page edges, #1A0F00 on-gold ink) which are physical-object colours, not theme chrome. */
.cn-book-hero { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(30px, 6vw, 70px); align-items: center; max-width: 980px; margin: clamp(26px, 4vw, 44px) auto 0; }
@media (max-width: 860px) { .cn-book-hero { grid-template-columns: 1fr; gap: 46px; text-align: center; } }

/* ---- left: the 3D book + QR ---- */
/* book sits left of centre so the right-anchored QR badge clears its face */
.cn-book-obj { position: relative; display: flex; align-items: center; justify-content: flex-start; padding-left: clamp(4px, 7%, 54px); perspective: 1200px; min-height: clamp(300px, 42vw, 430px); }
@media (max-width: 860px) { .cn-book-obj { justify-content: center; padding-left: 0; } }
.cn-book-3d { position: relative; transform: rotateY(-17deg) rotateX(4deg); transform-style: preserve-3d; border-radius: 3px 7px 7px 3px; box-shadow: 26px 34px 64px -26px rgba(0,0,0,.78); transition: transform .55s var(--ease-smooth); will-change: transform; animation: cn-book-float 7s ease-in-out infinite; }
@media (hover: hover) { .cn-book-obj:hover .cn-book-3d { animation-play-state: paused; transform: rotateY(-7deg) rotateX(2deg) translateY(-6px); box-shadow: 30px 42px 74px -24px rgba(0,0,0,.82); } }
@keyframes cn-book-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }
.cn-book-3d img { display: block; width: 100%; max-width: 244px; height: auto; border-radius: 3px 7px 7px 3px; }
/* page edges on the right (the book's fore-edge) */
.cn-book-3d::after { content: ""; position: absolute; top: 2.5%; bottom: 2.5%; right: -11px; width: 12px; transform: rotateY(34deg); transform-origin: left center; border-radius: 0 2px 2px 0; background: repeating-linear-gradient(180deg, var(--cream) 0 1px, var(--cream-muted) 1px 2px, #cdbf9a 2px 3px); box-shadow: inset -2px 0 4px rgba(0,0,0,.35); }
/* spine shadow on the left */
.cn-book-3d::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 8px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, rgba(0,0,0,.42), transparent); z-index: 3; }

/* the scannable QR badge, floating at the book's lower-right corner.
   It is a real link/QR: tap or scan -> the plans page (/courses/#plans). */
.cn-book-qr { position: absolute; right: clamp(-2px, 1%, 12px); bottom: 6px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 15px; background: var(--bg-2); border: 1px solid var(--stroke-strong); box-shadow: 0 22px 44px -20px rgba(0,0,0,.8); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease-smooth), border-color .2s ease, box-shadow .2s ease; }
.cn-book-qr:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 26px 50px -20px rgba(0,0,0,.85); }
.cn-book-qr img { width: 66px; height: 66px; border-radius: 9px; display: block; background: #fff; }
.cn-book-qr-label { font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--cream); text-align: left; }
.cn-book-qr-label b { color: var(--gold); }
@media (max-width: 420px) { .cn-book-qr img { width: 54px; height: 54px; } }

/* ---- right: copy + the four capabilities ---- */
.cn-book-copy { max-width: 46ch; text-align: left; }
@media (max-width: 860px) { .cn-book-copy { max-width: none; } .cn-book-feat { text-align: left; } }
.cn-book-lead { font-family: var(--f-body); font-size: 15.5px; color: var(--secondary); line-height: 1.6; margin: 14px 0 20px; }
.cn-book-feats { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.cn-book-feat { display: flex; align-items: flex-start; gap: 13px; text-align: left; }
/* no card behind the icons — they sit free in the row, a touch bigger */
.cn-book-feat-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--gold); }
.cn-book-feat-ico svg { width: 33px; height: 33px; }
.cn-book-feat-tx b { display: block; font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cream); margin-bottom: 2px; }
.cn-book-feat-tx > span { display: block; font-family: var(--f-body); font-size: 13px; color: var(--secondary); line-height: 1.5; }
.cn-book-note { font-family: var(--f-body); font-size: 13px; color: var(--green); margin: 2px 0 18px; }

/* live mini-animations for the workbook capabilities — each one moves so the icon shows what it does */
/* 1 · say it: the equaliser bars from the pronunciation demo, shrunk */
.fx-eq { display: flex; align-items: center; gap: 2.5px; height: 24px; }
.fx-eq i { display: block; width: 3px; height: 30%; border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--green)); animation: fxEq 1.1s ease-in-out infinite; }
.fx-eq i:nth-child(1) { --h: 45%; animation-delay: -.20s; }
.fx-eq i:nth-child(2) { --h: 80%; animation-delay: -.55s; }
.fx-eq i:nth-child(3) { --h: 100%; animation-delay: 0s; }
.fx-eq i:nth-child(4) { --h: 70%; animation-delay: -.35s; }
.fx-eq i:nth-child(5) { --h: 50%; animation-delay: -.15s; }
@keyframes fxEq { 0%,100% { height: 25%; } 50% { height: var(--h, 90%); } }
/* 2 · trace: the real letter ب writes itself, exactly like "watch it written" */
.fx-write { width: 34px; height: 34px; overflow: visible; }
.fx-write-guide { fill: var(--gold); fill-opacity: .16; stroke: none; }
.fx-write-ink { fill: none; stroke: var(--gold); stroke-width: 42; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 1px 3px var(--gold-glow)); animation: fxWrite 3s ease-in-out infinite; }
@keyframes fxWrite {
  0% { stroke-dashoffset: 100; }
  48% { stroke-dashoffset: 0; }
  74% { stroke-dashoffset: 0; opacity: 1; }
  88% { stroke-dashoffset: 0; opacity: 0; }
  89% { stroke-dashoffset: 100; opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 1; }
}
/* 3 · flashcards: a deck whose top card flips from the letter to its gold back */
.fx-cards { position: relative; width: 26px; height: 31px; perspective: 220px; }
.fx-cards-back { position: absolute; inset: 0; border: 1.6px solid var(--gold); border-radius: 4px; transform: translate(4px, 3px) rotate(5deg); opacity: .34; }
.fx-cards-flip { position: absolute; inset: 0; transform-style: preserve-3d; animation: fxFlip 3.8s ease-in-out infinite; }
.fx-cards-flip b { position: absolute; inset: 0; border: 1.6px solid var(--gold); border-radius: 4px; backface-visibility: hidden; display: grid; place-items: center; }
.fx-cards-flip .ff-front { font-family: var(--f-arabic); font-size: 17px; font-weight: 700; color: var(--gold); line-height: 1; }
.fx-cards-flip .ff-back { transform: rotateY(180deg); background: linear-gradient(180deg, rgba(230,184,97,.24), rgba(230,184,97,.08)); }
@keyframes fxFlip { 0%,30% { transform: rotateY(0); } 58%,84% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
/* 4 · scan: a beam that sweeps a page, like pointing a camera at it */
.fx-scan { position: relative; width: 20px; height: 26px; border-radius: 4px; border: 1.6px solid currentColor; overflow: hidden; }
.fx-scan::before { content: ''; position: absolute; left: 4px; right: 4px; top: 5px; height: 1.5px; border-radius: 9px; background: currentColor; opacity: .4; box-shadow: 0 5px 0 -.25px currentColor, 0 10px 0 -.25px currentColor; }
.fx-scan b { position: absolute; left: -1px; right: -1px; top: 1px; height: 2px; background: linear-gradient(90deg, transparent, var(--green), transparent); box-shadow: 0 0 6px var(--green); animation: fxScan 1.9s ease-in-out infinite; }
@keyframes fxScan { 0% { top: 1px; } 50% { top: calc(100% - 4px); } 100% { top: 1px; } }

@media (prefers-reduced-motion: reduce) {
  .cn-book-3d { animation: none !important; transition: none !important; }
  .fx-eq i, .fx-write-ink, .fx-cards-flip, .fx-scan b { animation: none !important; }
  .fx-eq i { height: 65%; }
  .fx-write-ink { stroke-dashoffset: 0; }
}

/* ---- Testimonials slideshow (real early testers) ---- */
.tm-view { display: flex; align-items: stretch; gap: 12px; max-width: 1040px; margin-inline: auto; }
.tm-stage { position: relative; display: grid; flex: 1 1 auto; min-width: 0; }
/* Sequential crossfade: the outgoing card fades OUT fast (.2s, base rule below),
   the incoming waits a beat then fades IN (.is-on rule). Simultaneous fades left
   both quotes ~50% legible at the midpoint — messy double-vision. */
.tm-card { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; min-height: 290px; padding: 32px 38px 28px; border: 1px solid var(--stroke); border-radius: 18px; background: var(--surface); transition: opacity .2s var(--ease-smooth, ease); }
.tm-card:not(.is-on) { opacity: 0; pointer-events: none; }
.tm-card.is-on { opacity: 1; transition: opacity .4s var(--ease-smooth, ease) .16s; }
.tm-stars { display: flex; gap: 3px; color: var(--gold); }
.tm-stars svg { width: 16px; height: 16px; }
.tm-quote { margin: 0; font-family: var(--f-body); font-size: 17px; line-height: 1.58; color: var(--cream); }
.tm-quote::before { content: "\201C"; color: var(--gold); }
.tm-quote::after { content: "\201D"; color: var(--gold); }
.tm-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tm-ava { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(230,184,97,0.14); border: 1px solid var(--gold-deep); color: var(--gold); font-family: var(--f-display); font-weight: 700; font-size: 18px; }
.tm-meta { display: flex; flex-direction: column; min-width: 0; }
.tm-name { font-family: var(--f-body); font-weight: 700; font-size: 15px; color: var(--cream); }
.tm-role { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.tm-arrow { flex: none; align-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--stroke); color: var(--cream); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.tm-arrow svg { width: 20px; height: 20px; }
.tm-arrow:hover { border-color: var(--gold-deep); color: var(--gold); }
.tm-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tm-dots { display: flex; justify-content: center; gap: 8px; margin: 26px 0 36px; }
.tm-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--stroke); cursor: pointer; transition: background .15s, transform .15s; }
.tm-dot.is-on { background: var(--gold); transform: scale(1.3); }
.tm-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tm-view.is-single .tm-arrow { display: none; }
/* A phone has no room for arrows either side of a full-width card, but hiding
   them is not the answer: swipe is invisible, so a reader who does not think to
   try it has no way forward but to wait. So the card takes the whole first line
   and the two arrows wrap onto their own row beneath it. Same markup, same
   buttons, no duplicate controls for a screen reader to read out twice. */
@media (max-width: 620px) {
  .tm-view { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .tm-stage { flex: 1 0 100%; order: -1; }
  .tm-card { min-height: 330px; padding: 26px 24px; }
  .tm-quote { font-size: 15.5px; }
  .tm-dots { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .tm-card { transition: none; } }

/* ============================== early-bird countdown ============================== */
/* HIGH-URGENCY launch-window band. Time-pressure state: red pulsing live dot,
   hot gold-filled digit tiles (dark numerals), a slow breathing shadow. Prices do
   NOT change — it only times the window and hides itself (host[hidden]) on expiry.
   Bottom margin clears the featured card, which pops up ~30px on desktop. */
.eb-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 9px 14px; max-width: 680px; margin: 0 auto clamp(34px, 5vw, 58px);
  padding: 14px 22px; border-radius: 15px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(230,184,97,0.12), rgba(230,184,97,0.04)), var(--surface-2);
  box-shadow: 0 0 0 1px rgba(230,184,97,0.10), 0 20px 50px -28px var(--gold-glow);
  animation: eb-breathe 2.8s ease-in-out infinite;
}
@keyframes eb-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(230,184,97,0.08), 0 18px 44px -30px var(--gold-glow); }
  50%      { box-shadow: 0 0 0 1px rgba(230,184,97,0.30), 0 24px 62px -26px var(--gold-glow); }
}
.eb-live { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #FF5A3C; animation: eb-pulse 1.15s ease-out infinite; }
@keyframes eb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,90,60,0.55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 9px rgba(255,90,60,0); transform: scale(1.18); }
  100% { box-shadow: 0 0 0 0 rgba(255,90,60,0); transform: scale(1); }
}
.eb-banner-label { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }
.eb-banner-tail { font-family: var(--f-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); }
.eb-banner-clock { display: inline-flex; gap: 7px; }
.eb-u {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 46px;
  padding: 6px 8px 5px; border-radius: 10px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: 0 6px 16px -8px var(--gold-glow);
}
.eb-u b { font-family: var(--f-mono); font-weight: 700; font-size: 20px; line-height: 1; color: #1A0F00; font-variant-numeric: tabular-nums; }
.eb-u i { font-family: var(--f-mono); font-style: normal; font-weight: 700; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: rgba(26,15,0,0.62); margin-top: 4px; }
@media (max-width: 520px) {
  .eb-banner { gap: 7px 9px; padding: 12px 14px; }
  .eb-banner-tail { width: 100%; text-align: center; }
  .eb-u { min-width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .eb-banner { animation: none; }
  .eb-live { animation: none; }
}