/* Koi Pond — paywall design system ("The room is watching")
 *
 * ONE stylesheet shared by both purchase surfaces: the quiz plan slide
 * (quiz.html buildPlan) and checkout.html. They previously shared nothing —
 * quiz.html does not even load koi.css and declares its own :root — so this
 * file is deliberately SELF-CONTAINED: its own @font-face, its own tokens,
 * no dependency on koi.css or Tailwind.
 *
 * Everything is namespaced under .pw and every token is prefixed --pw-* so it
 * cannot collide with quiz.html's --orange / --text / --faint.
 *
 * Colour thinking: the old paywall was one hue (orange on cream), which is why
 * it read flat. The base here is the brand's own water palette from koi.css
 * ("koi ponds aren't blue"), which finally gives orange some darkness to burn
 * against. Orange is reserved for ACTION — the button and nothing else. Gold
 * marks Pro (the koi levels are literally Jewel/Champion/Legendary Koi). Mint
 * carries "included" ticks so they stop competing with the CTA.
 */

/* The pixel face — declared here too, because quiz.html never loads koi.css.
   Used only for live/countdown readouts, where it reads as instrumentation
   rather than marketing. */
@font-face {
  font-family: 'PF Tempesta Seven';
  src: url('/assets/fonts/pf_tempesta_seven.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.pw {
  --pw-abyss:    #05100E;
  --pw-water:    #0E241E;
  --pw-water-2:  #14332B;
  --pw-water-3:  #1F4A3E;

  --pw-koi:      #FF6B1E;
  --pw-koi-hot:  #FF8F4A;
  --pw-koi-deep: #B53D08;

  --pw-gold:     #F5C542;
  --pw-gold-dim: #A8842B;
  --pw-mint:     #5FE3B0;

  --pw-cream:    #FAF7EE;
  --pw-mute:     rgba(250, 247, 238, .68);
  /* .46 measured 3.93:1 on --pw-water-2, under the 4.5:1 AA floor for the
     small trust/caption labels that use it. .58 measures ~5.2:1. */
  --pw-faint:    rgba(250, 247, 238, .58);
  --pw-hair:     rgba(250, 247, 238, .12);

  --pw-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --pw-r:        12px;

  position: relative;
  isolation: isolate;
  background: var(--pw-abyss);
  color: var(--pw-cream);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Caustics — two slow radial washes so the dark base has depth instead of
   reading as a flat black rectangle. Sits behind everything. */
.pw::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 26% at 22% 8%,  rgba(31, 74, 62, .38), transparent 70%),
    radial-gradient(52% 34% at 50% 96%, rgba(20, 51, 43, .55), transparent 76%);
}
@keyframes pw-caustics {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -2.5%, 0) scale(1.06); }
}

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

.pw-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 1.75rem;
}

/* ── Live readout ─────────────────────────────────────────────────── */
.pw-readout {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pw-faint);
}
.pw-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pw-koi);
}
.pw-live-label { color: var(--pw-koi-hot); }
@keyframes pw-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.pw-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.pw-eq span {
  width: 2px; border-radius: 1px; height: 5px;
  background: var(--pw-koi-hot);
  animation: pw-eq 1s ease-in-out infinite;
}
.pw-eq span:nth-child(2) { animation-delay: .15s; }
.pw-eq span:nth-child(3) { animation-delay: .30s; }
.pw-eq span:nth-child(4) { animation-delay: .45s; }
@keyframes pw-eq { 0%, 100% { height: 5px; } 50% { height: 13px; } }

.pw-brand { margin-left: auto; color: var(--pw-faint); }

/* ── The cast — the signature element ─────────────────────────────── */
/* The room's real members, lit and facing the reader. This is the most
   characteristic thing the product has, and the honest answer to "no real
   photos": these are actual personas from lib/rooms.js, not stock faces. */
.pw-cast {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: .5rem;
  margin: 1.5rem 0 .25rem;
}
.pw-cast-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  flex: 0 1 74px;
  min-width: 0;
}
/* Outer members sit lower so the row reads as an arc facing the reader. */
.pw-cast-member:first-child,
.pw-cast-member:last-child { transform: translateY(9px); }
.pw-cast-member:nth-child(2),
.pw-cast-member:nth-last-child(2) { transform: translateY(3px); }

.pw-cast-face {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--pw-water-2);
  border: 1.5px solid var(--pw-water-3);
  overflow: hidden;
  /* warm rim light from the front-left, as if lit by the room */
  box-shadow:
    inset 0 1px 0 rgba(250, 247, 238, .14),
    0 0 0 3px rgba(5, 16, 14, .6),
    0 8px 22px -8px rgba(0, 0, 0, .9);
}
.pw-cast-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-cast-face::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(255, 143, 74, .22), transparent 55%);
  pointer-events: none;
}
.pw-cast-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--pw-mute);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pw-cast-role {
  font-size: 9.5px;
  color: var(--pw-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Headline ─────────────────────────────────────────────────────── */
/* colour is set EXPLICITLY, not inherited: checkout.html loads koi.css, whose
   `h1 { color:#0A0A06 }` element rule beats an inherited value and rendered
   this headline black-on-black. Same reason the other text elements below all
   name their own colour. */
.pw-headline {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 7vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-align: center;
  color: var(--pw-cream);
  margin: 1.25rem 0 .5rem;
  text-wrap: balance;
}
.pw-sub {
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pw-mute);
  margin: 0 auto 1.25rem;
  max-width: 30ch;
  text-wrap: balance;
}
/* Hero illustration slot (drop assets/paywall-hero.png; hides itself if absent). */
.pw-hero { text-align: center; margin: .5rem auto .25rem; max-width: 240px; }
.pw-hero img { display: block; width: 100%; height: auto; }

/* ── Card ─────────────────────────────────────────────────────────── */
.pw-card {
  background: var(--pw-water);
  border: 1px solid var(--pw-hair);
  border-radius: var(--pw-r);
  padding: 1.15rem 1.15rem 1.25rem;
}
.pw-card + .pw-card { margin-top: .75rem; }

/* ── Offer strip (badge + countdown) ──────────────────────────────── */
.pw-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.pw-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(255, 107, 30, .14);
  border: 1px solid rgba(255, 107, 30, .38);
  color: var(--pw-koi-hot);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.pw-badge svg { flex-shrink: 0; }

.pw-countdown {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pw-faint);
}
.pw-cd-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pw-faint);
}
@keyframes pw-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.72); }
}
.pw-cd-time {
  color: var(--pw-cream);
  font-size: 13px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
/* Expired: the row is removed entirely rather than freezing at 00:00. */
.pw-countdown[hidden] { display: none !important; }

/* The ONE quiet deadline line (the paywall's entire urgency budget):
   small Inter, centered, no badge, no dot, no pulse. */
.pw-quiet-deadline {
  text-align: center;
  font-size: 12px;
  color: var(--pw-faint);
  margin: .2rem 0 .3rem;
  font-variant-numeric: tabular-nums;
}
.pw-quiet-deadline .pw-cd-time { font-size: 12px; color: var(--pw-mute); letter-spacing: .02em; }
.pw-quiet-deadline[hidden] { display: none !important; }

/* ── Price ────────────────────────────────────────────────────────── */
.pw-price {
  text-align: center;
  padding: 1.1rem 0 .35rem;
}
.pw-price-was {
  font-size: 15px;
  color: var(--pw-faint);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 107, 30, .7);
  text-decoration-thickness: 2px;
  margin-right: .45rem;
  vertical-align: middle;
}
/* The hero numeral. IMPORTANT: the amount stays ONE text node — assets/price.js
   swaps the literal string "€4.99" for "$4.99" for US visitors, so splitting the
   currency symbol away from the digits silently breaks USD pricing. */
.pw-price-now {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.9rem, 13vw, 4rem);
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--pw-cream);
  vertical-align: middle;
  display: inline-block;
  position: relative;
}
.pw-price-now::after {
  content: '';
  position: absolute;
  left: 4%; right: 4%; bottom: -.28rem;
  height: 3px;
  border-radius: 2px;
  background: var(--pw-koi);
  transform: scaleX(0);
  transform-origin: center;
  animation: pw-underline 900ms var(--pw-ease) 420ms both;
}
@keyframes pw-underline { to { transform: scaleX(1); } }

.pw-price-unit {
  display: block;
  margin-top: .7rem;
  font-size: 13px;
  color: var(--pw-mute);
}
.pw-price-daily { color: var(--pw-faint); }

/* ── Timeline ─────────────────────────────────────────────────────── */
.pw-timeline { position: relative; margin-top: .35rem; }
.pw-timeline::before {
  content: '';
  position: absolute;
  left: 15px; top: 12px; bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 107, 30, .45);
  transform-origin: top;
  animation: pw-spine 700ms var(--pw-ease) 260ms both;
}
@keyframes pw-spine { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.pw-tl-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0 .8rem;
  align-items: start;
  padding: .5rem 0;
}
.pw-tl-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pw-water-2);
  border: 1.5px solid var(--pw-hair);
  color: var(--pw-koi-hot);
  position: relative;
  z-index: 1;
}
.pw-tl-text { min-width: 0; }
.pw-tl-day {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--pw-cream);
}
.pw-tl-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--pw-mute);
  margin-top: .12rem;
}

/* ── Benefit ticks ────────────────────────────────────────────────── */
/* Mint, not orange: the old page used an off-token orange (#FF9A5C) here,
   which put four small orange marks in direct competition with the button. */
.pw-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pw-benefit {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 13.5px;
  color: var(--pw-mute);
}
.pw-benefit svg { flex-shrink: 0; color: var(--pw-mute); }

/* ── CTA ──────────────────────────────────────────────────────────── */
/* The hard-shadow press is this codebase's signature control (.btn3d on the
   landing page) and neither paywall used it. Size, glow and shimmer are the
   answer to "the CTA is not big enough". */
.pw-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 56px;
  margin-top: 1.1rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #171410;
  text-decoration: none;
  background: var(--pw-koi);
  transition: background 80ms, transform 80ms;
}
.pw-cta:hover { background: #E85A10; }
.pw-cta:active { transform: scale(.98); background: #E85A10; }
.pw-cta:focus-visible {
  outline: 3px solid var(--pw-cream);
  outline-offset: 3px;
}
.pw-cta[disabled] { opacity: .65; cursor: not-allowed; }
/* The label carries the due-now price ("… · €0 today") — step the size down on
   narrow phones so it stays one line instead of wrapping inside the button. */
@media (max-width: 400px) { .pw-cta { font-size: 14px; } }

/* Sticky variant — checkout.html keeps the button reachable while scrolling. */
.pw-cta-dock {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: .75rem 0 max(.25rem, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--pw-abyss) 62%, transparent);
}

/* ── Trust row ────────────────────────────────────────────────────── */
.pw-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem .9rem;
  margin-top: .8rem;
  font-size: 11.5px;
  color: var(--pw-faint);
}
.pw-trust-item { display: inline-flex; align-items: center; gap: .3rem; }
.pw-trust-item svg { flex-shrink: 0; opacity: .8; }

.pw-note {
  margin-top: .7rem;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pw-faint);
}
.pw-secondary {
  display: block;
  margin-top: 1rem;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--pw-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pw-secondary:hover { color: var(--pw-cream); }

/* ── Product proof panel ──────────────────────────────────────────── */
.pw-proof {
  margin-top: .9rem;
  border-radius: var(--pw-r);
  overflow: hidden;
  border: 1px solid var(--pw-hair);
  background: var(--pw-water);
}
.pw-proof img { width: 100%; display: block; }
.pw-proof-cap {
  padding: .55rem .8rem .7rem;
  font-size: 11.5px;
  color: var(--pw-faint);
  text-align: center;
}

/* ── Entrance orchestration ───────────────────────────────────────── */
.pw-rise { animation: pw-rise 620ms var(--pw-ease) both; }
.pw-d1 { animation-delay:  60ms; }
.pw-d2 { animation-delay: 130ms; }
.pw-d3 { animation-delay: 200ms; }
.pw-d4 { animation-delay: 270ms; }
@keyframes pw-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The cast assembles outside-in, so the room appears to gather. */
.pw-cast-member { animation: pw-gather 560ms var(--pw-ease) both; }
.pw-cast-member:nth-child(1) { animation-delay: 340ms; }
.pw-cast-member:nth-child(2) { animation-delay: 250ms; }
.pw-cast-member:nth-child(3) { animation-delay: 160ms; }
.pw-cast-member:nth-child(4) { animation-delay: 250ms; }
.pw-cast-member:nth-child(5) { animation-delay: 340ms; }
@keyframes pw-gather {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
/* The pre-existing .rise and urgency-pulse on both pages were unguarded;
   everything introduced here is. */
@media (prefers-reduced-motion: reduce) {
  .pw::before,
  .pw-live-dot,
  .pw-eq span,
  .pw-cd-dot,
  .pw-cta::after,
  .pw-price-now::after,
  .pw-timeline::before,
  .pw-rise,
  .pw-cast-member {
    animation: none !important;
  }
  .pw-price-now::after,
  .pw-timeline::before { transform: none !important; }
  .pw-rise, .pw-cast-member { opacity: 1 !important; transform: none !important; }
  .pw-cta { transition: none; }
}

/* ── Wider viewports ──────────────────────────────────────────────── */
@media (min-width: 640px) {
  .pw-inner { padding: 2rem 1.5rem 2.25rem; }
  .pw-cast { gap: .85rem; }
  .pw-cast-face { width: 64px; height: 64px; }
  .pw-cast-name { font-size: 12px; }
  .pw-cast-role { font-size: 10.5px; }
}

/* ── MULTI-TIER PLAN SELECTOR (Headway tariffs 1:1) ───────────────────── */
.pw-offer-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.pw-plans .pw-headline { font-size: clamp(1.7rem, 6.5vw, 2.3rem); margin-bottom: .4rem; }
.pw-planlist { display: flex; flex-direction: column; gap: .625rem; margin: 1.25rem 0 1rem; }
.pw-plan {
  position: relative; display: block; cursor: pointer;
  background: var(--pw-water-2); border: 1.5px solid var(--pw-hair);
  border-radius: 12px; padding: .95rem 1.05rem; transition: border-color .15s var(--pw-ease), background .15s;
  -webkit-tap-highlight-color: transparent;
}
.pw-plan:hover { border-color: rgba(255,143,74,.5); }
.pw-plan-on { border-color: var(--pw-koi); background: rgba(255,107,30,.10); }
/* The recommended tier is the visual anchor: taller, a step wider than its
   siblings, bigger price. Horizontal padding grows by the same .45rem the
   margins extend, so the text columns stay aligned across all three cards
   while the recommended card's edges break the row. Selection (.pw-plan-on
   ring) is unchanged and stays the strongest cue when another tier is picked. */
.pw-plan-rec {
  margin: .55rem 0 .15rem;
  padding: 1.2rem 1.05rem;
}
.pw-plan-rec .pw-plan-perday { font-size: 1.6rem; }
.pw-plan-rec .pw-plan-name { font-size: 16px; }
.pw-plan-flag {
  position: absolute; top: -.62rem; left: 1rem;
  background: var(--pw-abyss); color: var(--pw-koi-hot); font-size: 10px; font-weight: 600;
  border: 1px solid rgba(255,107,30,.5);
  letter-spacing: .06em; text-transform: uppercase; padding: .18rem .6rem; border-radius: 9999px;
}
.pw-plan-row { display: flex; align-items: center; gap: .85rem; }
.pw-plan-radio { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pw-faint); position: relative; transition: border-color .15s; }
.pw-plan-on .pw-plan-radio { border-color: var(--pw-koi); }
.pw-plan-on .pw-plan-radio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--pw-koi); }
.pw-plan-info { flex: 1; min-width: 0; }
.pw-plan-name { display: block; font-size: 15.5px; font-weight: 600; color: var(--pw-cream); }
.pw-plan-save { display: inline-block; margin-left: .4rem; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--pw-mute); background: transparent; border: 1px solid var(--pw-hair); padding: .1rem .45rem; border-radius: 9999px; vertical-align: middle; }
.pw-plan-billed { display: block; font-size: 11.5px; color: var(--pw-faint); margin-top: .15rem; }
.pw-plan-price { flex-shrink: 0; text-align: right; }
.pw-plan-perday { display: block; font-size: 1.45rem; font-weight: 700; font-family: 'Inter', system-ui, sans-serif; color: var(--pw-cream); line-height: 1; letter-spacing: -.02em; }
.pw-plan-perday-lbl { display: block; font-size: 10.5px; font-weight: 700; color: var(--pw-faint); margin-top: .15rem; }
.pw-plan-then { display: block; font-size: 10.5px; font-weight: 500; color: var(--pw-faint); margin-top: .3rem; white-space: nowrap; }
/* Endowment strip + tier label + trial timeline (added for the emotion-first
   reframe). All use existing .pw tokens, so the quiz's .pw--light remap carries. */
.pw-endow {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .25rem .55rem; max-width: 34ch; margin: 0 auto 1rem;
  padding: .5rem .85rem; border: 1px solid var(--pw-hair); border-radius: var(--pw-r);
  background: var(--pw-water); text-align: center;
}
.pw-endow-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-koi-hot); }
.pw-endow-body { font-size: 12px; line-height: 1.35; color: var(--pw-mute); }
.pw-planlist-lbl { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pw-faint); margin: .25rem 0 .55rem; }
.pw-tl-trial { margin: .35rem 0 .1rem; }
.pw-tl-desc b { color: var(--pw-cream); font-weight: 700; }
.pw-paylogos { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .75rem 0 .1rem; }
.pw-paylogo { font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--pw-faint); border: 1px solid var(--pw-hair); border-radius: .35rem; padding: .18rem .5rem; }
.pw-inside { margin-top: 1.25rem; }
.pw-inside-lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pw-faint); margin-bottom: .7rem; }

/* ── Reviews + FAQ (below the plan selector — Headway tariffs structure) ── */
.pw-reviews { display: flex; flex-direction: column; gap: .625rem; margin-top: .75rem; }
.pw-review {
  background: var(--pw-water);
  border: 1px solid var(--pw-hair);
  border-radius: var(--pw-r);
  padding: .95rem 1.1rem;
}
.pw-review-stars { color: var(--pw-koi-hot); font-size: .8rem; letter-spacing: .12em; margin-bottom: .45rem; }
.pw-review-q { font-size: 13.5px; color: var(--pw-cream); line-height: 1.55; font-style: italic; margin: 0 0 .55rem; }
.pw-review-a { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pw-faint); margin: 0; }

.pw-faq { margin-top: 1rem; }
.pw-faq .pw-inside-lbl { margin-bottom: .5rem; }
.pw-faq-item {
  background: var(--pw-water);
  border: 1px solid var(--pw-hair);
  border-radius: .8rem;
  margin-bottom: .5rem;
  overflow: hidden;
}
.pw-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  list-style: none; cursor: pointer;
  padding: .85rem 1rem;
  font-size: 13.5px; font-weight: 700; color: var(--pw-cream);
  -webkit-tap-highlight-color: transparent;
}
.pw-faq-item summary::-webkit-details-marker { display: none; }
.pw-faq-chev { flex-shrink: 0; color: var(--pw-faint); transition: transform .22s var(--pw-ease); display: flex; }
.pw-faq-item[open] .pw-faq-chev { transform: rotate(180deg); }
.pw-faq-a {
  font-size: 13px; color: var(--pw-mute); line-height: 1.6;
  padding: 0 1rem .9rem; margin: 0;
}

/* ── LIGHT VARIANT — the quiz opts in via .pw--light: one warm surface end to
   end (user call: "one colour only, like Headway"). Pure token remap so
   checkout/welcome/thanks keep the default dark theme untouched. ── */
.pw.pw--light{
  --pw-abyss:#FAF7EE;
  --pw-water:#FFFFFF;
  --pw-water-2:#FFFFFF;
  --pw-water-3:rgba(23,20,16,.12);
  --pw-koi-hot:#B53D08;
  --pw-cream:#171410;
  --pw-mute:rgba(23,20,16,.62);
  --pw-faint:rgba(23,20,16,.46);
  --pw-hair:rgba(23,20,16,.14);
}
.pw.pw--light::before{display:none}
.pw.pw--light .pw-cast-face{box-shadow:none;border-color:rgba(23,20,16,.12);background:#FFF1E8}
.pw.pw--light .pw-cast-face::after{display:none}
.pw.pw--light .pw-plan-flag{background:#FAF7EE}
.pw.pw--light .pw-review-stars{color:#FF6B1E}
.pw.pw--light .pw-cta:focus-visible{outline-color:#171410}

/* ── TRIAL-TIMELINE PLAN LAYOUT (.pw-tt) — Waking Up pattern ─────────────
   Scoped to .pw-tt so it only reshapes the multi-tier plan selector
   (plansMarkup); the single-plan paywallMarkup, welcome and thanks are
   untouched. Uses .pw tokens throughout, so it still honours the .pw--light
   remap if it is ever applied. */
.pw-tt .pw-headline{text-align:left;font-size:clamp(1.55rem,6.4vw,1.9rem);letter-spacing:-.035em;line-height:1.16;margin:.25rem 0 .35rem}
.pw-tt .pw-sub{text-align:left;max-width:none;margin:0 0 1rem;font-size:13px}

/* Timeline — larger nodes; spine warms toward the gold "charge" node. */
.pw-tt .pw-timeline{margin:.4rem 0 .2rem}
.pw-tt .pw-tl-row{grid-template-columns:40px 1fr;padding:.55rem 0}
.pw-tt .pw-tl-icon{width:40px;height:40px}
.pw-tt .pw-timeline::before{left:19px;background:linear-gradient(180deg,var(--pw-hair),rgba(245,197,66,.5))}
.pw-tt .pw-tl-day{font-size:15.5px}
.pw-tl-icon-gold{background:linear-gradient(160deg,#FCE39A,var(--pw-gold));border-color:rgba(245,197,66,.6);color:#3A2C05;box-shadow:0 8px 22px -8px rgba(245,197,66,.45)}

/* Aspiration ticker (subtle live FOMO).
   FIXED height (2 lines' worth) and the fade covers BOTH children via a class
   on the row: the row is flex-centered, so a swap to a different-length line
   re-centers the dot — it must reposition while fully invisible, and the row
   height must never change, or everything below twitches on each rotation. */
.pw-aspire{display:flex;align-items:center;justify-content:center;gap:8px;margin:.9rem 0 .2rem;height:36px;font-size:12.5px;line-height:1.35;font-weight:500;color:var(--pw-mute);text-align:center}
.pw-aspire-dot{width:7px;height:7px;border-radius:50%;background:var(--pw-mint);flex:0 0 auto;animation:pw-aspire-pulse 2s ease-out infinite}
@keyframes pw-aspire-pulse{0%{box-shadow:0 0 0 0 rgba(95,227,176,.5)}70%{box-shadow:0 0 0 7px rgba(95,227,176,0)}100%{box-shadow:0 0 0 0 rgba(95,227,176,0)}}
.pw-aspire-dot,.pw-aspire-text{transition:opacity .38s var(--pw-ease)}
.pw-aspire.pw-aspire-fade .pw-aspire-dot,.pw-aspire.pw-aspire-fade .pw-aspire-text{opacity:0}

/* Plan header + laikrodukas countdown. */
.pw-pickhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:1.1rem 0 .6rem}
.pw-picklbl{margin:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pw-faint)}
.pw-deadline{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--pw-koi-hot);font-variant-numeric:tabular-nums}
.pw-deadline svg{opacity:.9}
.pw-deadline[hidden]{display:none !important}

/* Bigger tiers; recommended breaks past its siblings. */
.pw-tt .pw-planlist{gap:.7rem;margin:0}
.pw-tt .pw-plan{padding:1.05rem 1rem}
.pw-tt .pw-plan-name{font-size:16.5px}
.pw-tt .pw-plan-billed{font-size:13px}
.pw-tt .pw-plan-perday{font-size:1.55rem}
.pw-tt .pw-plan-rec{margin:.55rem -6px .15rem;padding:1.35rem}
.pw-tt .pw-plan-rec .pw-plan-name{font-size:18.5px}
.pw-tt .pw-plan-rec .pw-plan-perday{font-size:2rem}
.pw-tt .pw-plan-flag{color:var(--pw-gold);border-color:rgba(245,197,66,.5)}

/* Social proof. */
.pw-proof{border:1px solid var(--pw-hair);background:rgba(250,247,238,.035);border-radius:var(--pw-r);padding:.75rem .9rem;margin:1.15rem 0 .55rem;display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center}
.pw-proof-title{margin:0;font-size:13px;font-weight:700;color:var(--pw-cream);letter-spacing:-.01em}
.pw-proof-title b{color:var(--pw-gold)}
.pw-proof-stars{color:var(--pw-gold);font-size:13px;letter-spacing:2px;line-height:1}
.pw-avatars{display:flex;align-items:center;justify-content:center}
.pw-avatars img,.pw-avatars-more{width:29px;height:29px;border-radius:50%;margin-left:-8px;border:2px solid var(--pw-water);background:var(--pw-water-2);object-fit:cover;display:block}
.pw-avatars img:first-child{margin-left:0}
.pw-avatars-more{display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--pw-cream);background:var(--pw-water-3)}

/* Guarantee + no-payment reassurance. */
.pw-guarantee{display:flex;align-items:center;justify-content:center;gap:7px;margin:.2rem 0 .1rem;font-size:13px;font-weight:600;color:var(--pw-mute)}
.pw-guarantee svg{color:var(--pw-mint);flex:0 0 auto}
.pw-nopay{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 .5rem;font-size:13.5px;font-weight:600;color:var(--pw-cream)}
.pw-nopay svg{color:var(--pw-mint);flex:0 0 auto}

@media (prefers-reduced-motion:reduce){.pw-aspire-dot{animation:none}}

/* Lead block — the quiz mounts its generated-plan reveal here (leadHtml), so
   the paywall opens as the payoff of the loader, not a sales page. A hairline
   divider separates the plan from the offer; the offer header right after a
   lead steps down a size so the reveal title stays the screen's h-anchor. */
.pw-lead{padding-bottom:1.15rem;border-bottom:1px solid var(--pw-hair);margin-bottom:1.2rem}
.pw-lead .pw-headline{margin:.25rem 0 .9rem}
.pw-lead em{font-style:normal;color:var(--pw-koi-hot)}
.pw-lead+.pw-headline{font-size:clamp(1.3rem,5.4vw,1.55rem)}

/* Light variant of the trial-timeline layout — the funnel's ACTIVE theme
   (quiz + checkout opt in via .pw--light; continuity with the light quiz is
   why: the paywall must read as the next quiz step, not a different place).
   Every selector is gated on tt-only class names, so welcome/thanks — which
   use only the old .pw classes — can never match. */
.pw.pw--light .pw-avatars img,.pw.pw--light .pw-avatars-more{border-color:#FFF;background:#FFF1E8}
.pw.pw--light .pw-proof{background:rgba(23,20,16,.03)}
.pw.pw--light .pw-tl-icon-gold{color:#3A2C05}
/* gold-on-cream → dark gold (raw gold #F5C542 is unreadable on cream) */
.pw.pw--light .pw-proof-title b{color:var(--pw-gold-dim)}
.pw.pw--light .pw-proof-stars{color:var(--pw-gold-dim)}
.pw.pw--light .pw-plan-flag{color:var(--pw-gold-dim);border-color:rgba(168,132,43,.5)}
.pw.pw--light.pw-tt .pw-timeline::before{background:linear-gradient(180deg,var(--pw-hair),rgba(168,132,43,.5))}
/* mint-on-cream → dark mint */
.pw.pw--light .pw-guarantee svg,
.pw.pw--light .pw-nopay svg{color:#1F7A57}
/* The pulse needs its own keyframe: keyframes can't be re-colored per scope. */
.pw.pw--light .pw-aspire-dot{background:#1F7A57;animation-name:pw-aspire-pulse-light}
@keyframes pw-aspire-pulse-light{0%{box-shadow:0 0 0 0 rgba(31,122,87,.45)}70%{box-shadow:0 0 0 7px rgba(31,122,87,0)}100%{box-shadow:0 0 0 0 rgba(31,122,87,0)}}
/* MANDATORY companion: the animation-name above (0,3,0) would otherwise beat
   the base reduced-motion animation:none (0,1,0) and resurrect the pulse. */
@media (prefers-reduced-motion:reduce){.pw.pw--light .pw-aspire-dot{animation:none}}