/* Photold web funnel — intro → onboarding deck → reviews → paywall.
   Mirrors the in-app onboarding (dark slate surfaces, amber CTA). */

:root {
  /* Brand amber, warm cream surfaces. The onboarding deck is the one
     exception — it is a full-bleed video and stays dark. */
  --pq-bg: #fffbeb;
  --pq-surface: #ffffff;
  --pq-surface-2: #fff7de;
  --pq-border: rgba(120, 53, 15, 0.14);
  --pq-text: #1c1917;
  --pq-text-dim: #57534e;
  --pq-text-faint: #8b7c66;
  --pq-primary: #facc15;
  --pq-primary-2: #fbbf24;
  --pq-accent: #fde047;
  /* Amber that stays amber on a cream ground, for highlighted words. */
  --pq-accent-ink: #b45309;
  --pq-ink-on-amber: #1c1917;
  --pq-shell-max: 520px;
  --pq-font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --pq-safe-top: env(safe-area-inset-top, 0px);
  --pq-safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--pq-font);
  /* Same cream as the column, so on wide screens the page reads as one
     surface instead of a card on a darker wash. */
  background: var(--pq-bg);
  color: var(--pq-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

img,
video {
  max-width: 100%;
  display: block;
}

.pq-shell {
  position: relative;
  width: 100%;
  max-width: var(--pq-shell-max);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--pq-bg);
  overflow: hidden;
}

.pq-screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  height: 100dvh;
  animation: pq-fade-in 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  transition: opacity 0.26s ease-in;
}

/* Set by show() while the previous screen fades out, before the swap. */
.pq-screen.is-leaving {
  opacity: 0;
}

@keyframes pq-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The deck headline eases in with each slide's clip. */
.pq-deck-title.is-entering {
  animation: pq-fade-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

/* ── Shared CTA ────────────────────────────────────────────────── */

.pq-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 60px;
  border-radius: 30px;
  background: linear-gradient(90deg, var(--pq-primary) 0%, var(--pq-primary-2) 100%);
  color: var(--pq-ink-on-amber);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 24px rgba(250, 204, 21, 0.5);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.pq-cta:active {
  transform: scale(0.98);
  box-shadow: 0 5px 14px rgba(250, 204, 21, 0.4);
}

.pq-cta-label {
  position: relative;
  z-index: 1;
}

.pq-cta--compact {
  width: auto;
  height: 46px;
  padding: 0 22px;
  font-size: 16px;
  border-radius: 23px;
  flex: 0 0 auto;
}

/* ── 1. Intro ──────────────────────────────────────────────────── */

.pq-intro {
  justify-content: space-between;
  padding: calc(var(--pq-safe-top) + 12px) 24px calc(var(--pq-safe-bottom) + 24px);
  background:
    radial-gradient(120% 70% at 50% 8%, rgba(251, 191, 36, 0.42) 0%, rgba(255, 251, 235, 0) 62%),
    linear-gradient(180deg, #fff8e1 0%, var(--pq-bg) 55%);
}

.pq-intro-hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pq-intro-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.32) 0%, rgba(245, 158, 11, 0) 70%);
  filter: blur(6px);
}

.pq-photo {
  position: absolute;
  width: 50%;
  max-width: 200px;
  padding: 9px 9px 30px;
  background: #fffdf7;
  border-radius: 6px;
  box-shadow: 0 20px 42px rgba(120, 53, 15, 0.28);
}

.pq-photo img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.pq-photo--back {
  transform: translate(-30%, -8%) rotate(-9deg);
  filter: grayscale(1) contrast(0.95);
}

.pq-photo--front {
  transform: translate(20%, 10%) rotate(5deg);
}

.pq-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  color: #b45309;
}

.pq-intro-icon {
  position: absolute;
  top: 0;
  width: 30%;
  max-width: 116px;
  height: auto;
  border-radius: 24%;
  box-shadow: 0 16px 32px rgba(120, 53, 15, 0.3);
}

.pq-spark {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #f59e0b;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  opacity: 0.85;
  animation: pq-twinkle 2.8s ease-in-out infinite;
}

.pq-spark--1 { top: 8%; left: 12%; width: 22px; height: 22px; }
.pq-spark--2 { top: 20%; left: 26%; animation-delay: 0.6s; }
.pq-spark--3 { top: 4%; right: 18%; width: 18px; height: 18px; animation-delay: 1.1s; }
.pq-spark--4 { bottom: 12%; right: 24%; animation-delay: 1.7s; }

@keyframes pq-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 0.95; transform: scale(1); }
}

.pq-intro-copy {
  flex: 0 0 auto;
  padding-top: 8px;
}

.pq-intro-title {
  font-size: clamp(26px, 7.2vw, 34px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.6px;
  text-align: center;
  margin-bottom: 26px;
}

.pq-intro-title em {
  font-style: normal;
  color: var(--pq-accent-ink);
}

.pq-legal {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pq-text-faint);
}

.pq-legal a {
  color: var(--pq-text-dim);
  text-decoration: underline;
}

/* ── 2. Onboarding deck ────────────────────────────────────────── */

.pq-deck {
  position: relative;
  justify-content: flex-end;
  background: #000;
  /* Always white over the video, whatever the page theme's ink is. */
  color: #ffffff;
}

.pq-deck-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pq-deck-stage video,
.pq-deck-stage .pq-deck-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.9s ease;
  transform: scale(1.015);
}

.pq-deck-stage video.is-active,
.pq-deck-stage .pq-deck-fallback.is-active {
  opacity: 1;
  transform: scale(1);
}

.pq-deck-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.4) 22%,
      rgba(0, 0, 0, 0.3) 45%,
      rgba(0, 0, 0, 0.2) 70%,
      rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

.pq-deck-head {
  position: absolute;
  left: 28px;
  right: 28px;
  top: calc(var(--pq-safe-top) + 48px);
  text-align: center;
  pointer-events: none;
}

.pq-deck-title {
  font-size: clamp(32px, 11vw, 46px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6);
}

.pq-deck-title .pq-hl,
.pq-deck-title .pq-line {
  display: block;
  white-space: nowrap;
}

.pq-deck-title .pq-hl {
  color: var(--pq-slide-accent, var(--pq-accent));
}

.pq-deck-desc {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.pq-deck-desc:empty {
  display: none;
}

.pq-deck-foot {
  position: relative;
  padding: 0 24px calc(var(--pq-safe-bottom) + 24px);
}

.pq-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.pq-dots span {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.3s ease, background 0.3s ease;
}

.pq-dots span.is-active {
  width: 24px;
  background: var(--pq-primary-2);
}

/* ── 3. Reviews ────────────────────────────────────────────────── */

.pq-reviews {
  padding-top: calc(var(--pq-safe-top) + 24px);
  background:
    radial-gradient(110% 50% at 50% 0%, rgba(251, 191, 36, 0.35) 0%, rgba(255, 251, 235, 0) 60%),
    var(--pq-bg);
}

.pq-reviews-head {
  flex: 0 0 auto;
  padding: 0 24px 16px;
  text-align: center;
}

.pq-reviews-title {
  font-size: clamp(24px, 7vw, 30px);
  font-weight: 900;
  letter-spacing: -0.4px;
}

.pq-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.pq-stars {
  color: #f59e0b;
  font-size: 20px;
  letter-spacing: 2px;
}

.pq-rating-score {
  font-size: 16px;
  font-weight: 800;
}

.pq-reviews-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--pq-text-faint);
}

.pq-reviews-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.pq-reviews-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px;
  will-change: transform;
}

.pq-review {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid var(--pq-border);
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: 0 8px 20px rgba(120, 53, 15, 0.12);
}

.pq-review h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.pq-review-stars {
  display: block;
  margin: 6px 0 10px;
  color: #f59e0b;
  font-size: 16px;
  letter-spacing: 2px;
}

.pq-review p {
  font-size: 15px;
  line-height: 1.5;
  color: #334155;
}

.pq-review-author {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.pq-reviews-foot {
  flex: 0 0 auto;
  padding: 14px 24px calc(var(--pq-safe-bottom) + 20px);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0) 0%, var(--pq-bg) 34%);
}

/* ── 4. Paywall ────────────────────────────────────────────────── */

.pq-paywall {
  background: var(--pq-bg);
}

.pq-timerbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(var(--pq-safe-top) + 12px) 16px 12px;
  background: rgba(255, 251, 235, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pq-border);
  z-index: 3;
}

.pq-timerbar-label {
  font-size: 14px;
  color: var(--pq-text-dim);
}

.pq-timerbar-label strong {
  color: var(--pq-text);
  font-weight: 800;
}

.pq-timerbar-clock {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.pq-timerbar.is-expired .pq-timerbar-clock {
  font-size: 20px;
  color: var(--pq-text-faint);
}

.pq-paywall-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pq-paywall-hero {
  position: relative;
  aspect-ratio: 16 / 11;
  background: #f3e3bd;
  overflow: hidden;
}

.pq-paywall-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pq-paywall-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 251, 235, 0) 0%, var(--pq-bg) 100%);
}

.pq-paywall-body {
  padding: 4px 20px calc(var(--pq-safe-bottom) + 32px);
}

.pq-paywall-title {
  font-size: clamp(26px, 7.6vw, 34px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.5px;
  text-align: center;
}

.pq-paywall-title em {
  font-style: normal;
  color: var(--pq-accent-ink);
}

.pq-features {
  list-style: none;
  margin: 22px 0 30px;
  display: grid;
  gap: 12px;
}

.pq-features li {
  position: relative;
  padding-left: 36px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--pq-text-dim);
}

.pq-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pq-primary-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230f172a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

.pq-plans-title {
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  letter-spacing: -0.3px;
  scroll-margin-top: 16px;
}

.pq-plans {
  display: grid;
  gap: 14px;
  margin: 18px 0 24px;
}

.pq-plan {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--pq-surface);
  border: 2px solid var(--pq-border);
  box-shadow: 0 6px 16px rgba(120, 53, 15, 0.08);
  border-radius: 18px;
  padding: 16px 18px;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.pq-plan.is-selected {
  border-color: var(--pq-primary-2);
  background: var(--pq-surface-2);
  box-shadow: 0 10px 28px rgba(251, 191, 36, 0.4);
}

.pq-plan--badged {
  margin-top: 18px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.pq-plan-badge {
  position: absolute;
  left: -2px;
  right: -2px;
  top: -30px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--pq-primary) 0%, var(--pq-primary-2) 100%);
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.pq-plan-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pq-radio {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--pq-text-faint);
  display: grid;
  place-items: center;
}

.pq-plan.is-selected .pq-radio {
  border-color: var(--pq-primary);
}

.pq-plan.is-selected .pq-radio::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pq-primary);
}

.pq-plan-main {
  flex: 1 1 auto;
  min-width: 0;
}

.pq-plan-name {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.pq-plan-note {
  display: inline-block;
  margin: 6px 8px 2px 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(180, 83, 9, 0.12);
  color: var(--pq-accent-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.pq-plan-prices {
  margin-top: 6px;
  font-size: 16px;
  color: var(--pq-text-dim);
}

.pq-plan-strike {
  margin-right: 8px;
  color: var(--pq-text-faint);
  text-decoration: line-through;
}

.pq-plan-strike[hidden] {
  display: none !important;
}

.pq-plan-now {
  font-weight: 700;
  color: var(--pq-text);
}

.pq-plan-daily {
  flex: 0 0 auto;
  text-align: right;
}

.pq-plan-daily b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.pq-plan-daily span {
  display: block;
  font-size: 13px;
  color: var(--pq-text-faint);
}

.pq-cta--wide {
  margin-top: 4px;
}

.pq-secure {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--pq-text-faint);
}

.pq-disclaimer {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--pq-text-faint);
  text-align: center;
}

.pq-disclaimer a {
  color: var(--pq-text-dim);
}

.pq-paywall-links {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
  font-size: 13px;
}

.pq-paywall-links a {
  color: var(--pq-text-dim);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {

  .pq-screen,
  .pq-deck-title,
  .pq-spark,
  .pq-deck-stage video,
  .pq-deck-stage .pq-deck-fallback {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Large screens ─────────────────────────────────────────────────
   The column widens and every element scales with it, so a desktop
   viewport gets a full-size funnel instead of a phone strip. Reading
   columns (reviews, paywall body) keep their own measure inside the
   wider shell. */

@media (min-width: 700px) {
  :root {
    --pq-shell-max: 840px;
  }

  .pq-cta {
    height: 68px;
    font-size: 20px;
    border-radius: 34px;
  }

  .pq-cta--compact {
    height: 52px;
    padding: 0 28px;
    font-size: 18px;
    border-radius: 26px;
  }

  .pq-intro {
    padding-left: 48px;
    padding-right: 48px;
  }

  .pq-intro-copy {
    max-width: 640px;
    margin: 0 auto;
  }

  .pq-intro-title {
    font-size: 46px;
    margin-bottom: 32px;
  }

  .pq-photo {
    max-width: 290px;
  }

  .pq-intro-icon {
    max-width: 168px;
  }

  .pq-legal {
    font-size: 14px;
  }

  .pq-deck-head {
    left: 48px;
    right: 48px;
    top: calc(var(--pq-safe-top) + 64px);
  }

  .pq-deck-title {
    font-size: 66px;
  }

  .pq-deck-desc {
    font-size: 19px;
  }

  .pq-deck-foot {
    padding: 0 48px calc(var(--pq-safe-bottom) + 32px);
  }

  .pq-deck-foot .pq-cta,
  .pq-reviews-foot .pq-cta {
    max-width: 560px;
    margin: 0 auto;
  }

  .pq-reviews-title {
    font-size: 34px;
  }

  .pq-stars {
    font-size: 24px;
  }

  .pq-rating-score {
    font-size: 18px;
  }

  .pq-reviews-sub {
    font-size: 15px;
  }

  .pq-reviews-viewport {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }

  .pq-reviews-foot {
    padding-left: 48px;
    padding-right: 48px;
  }

  .pq-review {
    border-radius: 22px;
    padding: 22px 24px 24px;
  }

  .pq-review h3 {
    font-size: 19px;
  }

  .pq-review p {
    font-size: 16px;
  }

  .pq-timerbar {
    padding-left: 32px;
    padding-right: 32px;
  }

  .pq-timerbar-label {
    font-size: 16px;
  }

  .pq-timerbar-clock {
    font-size: 34px;
  }

  .pq-paywall-hero {
    /* Full-width band of a fixed height instead of a ratio box, so the
       hero never eats the fold on a short laptop screen. */
    aspect-ratio: auto;
    height: 40dvh;
  }

  .pq-paywall-body {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
  }

  .pq-paywall-title {
    font-size: 40px;
  }

  .pq-features li {
    font-size: 18px;
    padding-left: 42px;
  }

  .pq-features li::before {
    width: 28px;
    height: 28px;
    background-size: 17px 17px;
  }

  .pq-plans-title {
    font-size: 28px;
  }

  .pq-plan {
    padding: 20px 22px;
  }

  .pq-plan-name {
    font-size: 20px;
  }

  .pq-plan-prices {
    font-size: 18px;
  }

  .pq-plan-daily b {
    font-size: 30px;
  }

  .pq-disclaimer,
  .pq-secure,
  .pq-paywall-links {
    font-size: 14px;
  }
}

@media (min-width: 1100px) {
  :root {
    --pq-shell-max: 1100px;
  }

  .pq-cta {
    height: 74px;
    font-size: 22px;
    border-radius: 37px;
  }

  .pq-intro-title {
    font-size: 54px;
  }

  .pq-photo {
    max-width: 330px;
  }

  .pq-intro-icon {
    max-width: 195px;
  }

  .pq-deck-title {
    font-size: 80px;
  }

  .pq-reviews-title {
    font-size: 38px;
  }

  .pq-paywall-title {
    font-size: 46px;
  }

  .pq-paywall-hero {
    height: 38dvh;
  }
}

@media (min-width: 1500px) {
  :root {
    --pq-shell-max: 1280px;
  }
}

/* ── Paywall close × + second-chance offer ─────────────────────── */

.pq-paywall-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(28, 25, 23, 0.45);
  color: #ffffff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pq-fade-in 0.3s ease both;
}

.pq-paywall-close:hover {
  background: rgba(28, 25, 23, 0.65);
}

.pq-title-extra {
  font-style: normal;
  color: var(--pq-accent-ink);
}

.pq-promo {
  margin: 22px 0 6px;
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.22) 0%, rgba(253, 224, 71, 0.16) 100%);
  overflow: hidden;
}

.pq-promo-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

/* Dashed rule reads like a torn-off coupon between the offer and the code. */
.pq-promo-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-top: 2px dashed rgba(180, 83, 9, 0.28);
}

.pq-promo-badge {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 12px 12px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--pq-primary) 0%, #f59e0b 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  color: var(--pq-ink-on-amber);
  line-height: 1.1;
}

.pq-promo-badge s {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.6;
}

.pq-promo-badge b {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.pq-promo-text {
  font-size: 16px;
  font-weight: 800;
  color: var(--pq-text);
}

.pq-promo-code {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--pq-surface);
  font-size: 16px;
  font-weight: 700;
  color: var(--pq-text);
}

.pq-promo-code svg {
  flex: 0 0 auto;
}

.pq-promo-clock {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  padding: 8px 14px;
  border: 1.5px solid rgba(180, 83, 9, 0.35);
  border-radius: 12px;
  background: var(--pq-surface);
}

.pq-promo-clock b {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--pq-text);
}

.pq-promo-clock span {
  font-size: 11px;
  color: var(--pq-text-faint);
}

@media (min-width: 700px) {
  .pq-paywall-close {
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
  }

  .pq-promo-text {
    font-size: 18px;
  }

  .pq-promo-code {
    font-size: 18px;
  }
}

/* ── Post-checkout pages (upsell, thank-you) ───────────────────── */

.pq-page {
  background:
    radial-gradient(110% 45% at 50% 0%, rgba(251, 191, 36, 0.35) 0%, rgba(255, 251, 235, 0) 60%),
    var(--pq-bg);
}

.pq-page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pq-page-body {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--pq-safe-top) + 32px) 20px calc(var(--pq-safe-bottom) + 40px);
}

.pq-eyebrow {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pq-accent-ink);
}

.pq-page-title {
  margin-top: 10px;
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.5px;
  text-align: center;
}

.pq-page-title em {
  font-style: normal;
  color: var(--pq-accent-ink);
}

.pq-page-lead {
  margin: 14px auto 0;
  max-width: 460px;
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
  color: var(--pq-text-dim);
}

.pq-account {
  margin: 16px auto 0;
  padding: 10px 14px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--pq-border);
  border-radius: 12px;
  background: var(--pq-surface);
  font-size: 15px;
  color: var(--pq-text-dim);
  word-break: break-all;
}

.pq-account b {
  color: var(--pq-text);
}

.pq-packs {
  display: grid;
  gap: 14px;
  margin: 26px 0 22px;
}

.pq-skip {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--pq-text-dim);
  text-decoration: underline;
}

.pq-checkout-error {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(180, 83, 9, 0.3);
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.16);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pq-text);
}

.pq-checkout-error a {
  color: var(--pq-accent-ink);
  font-weight: 700;
}

.pq-cta[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* Thank-you */

.pq-tick {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--pq-primary) 0%, #f59e0b 100%);
  color: var(--pq-ink-on-amber);
  box-shadow: 0 12px 28px rgba(251, 191, 36, 0.45);
}

.pq-stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 26px 0 8px;
}

/* One store leads on a phone; the desktop visitor gets both. */
.pq-stores[data-platform="ios"] .pq-store--android,
.pq-stores[data-platform="android"] .pq-store--ios {
  opacity: 0.55;
}

.pq-store img {
  height: 52px;
  width: auto;
}

.pq-desktop-hint {
  margin-top: 10px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pq-text-dim);
}

.pq-steps-title {
  margin: 30px 0 12px;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}

.pq-steps {
  margin: 0 0 0 20px;
  display: grid;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pq-text-dim);
}

.pq-steps b {
  color: var(--pq-text);
}

.pq-fallback {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--pq-border);
  border-radius: 14px;
  background: var(--pq-surface);
  font-size: 15px;
  line-height: 1.55;
  color: var(--pq-text-dim);
}

.pq-fallback b {
  color: var(--pq-text);
}

@media (min-width: 700px) {
  .pq-page-title {
    font-size: 44px;
  }

  .pq-page-lead,
  .pq-steps,
  .pq-fallback {
    font-size: 17px;
  }
}

/* ── Full-bleed page wash ──────────────────────────────────────── */

/* The light screens' amber glow is painted behind the whole page rather
   than on the column, so it spreads edge to edge on wide screens. Each
   glow is its own fixed layer and cross-fades by opacity (gradients can't
   be transitioned), so switching screens never snaps the background.
   Browsers without :has() keep the per-screen backgrounds above. */
@supports selector(body:has(a)) {
  .pq-shell,
  .pq-intro,
  .pq-reviews,
  .pq-page,
  .pq-paywall {
    background: transparent;
  }

  body {
    transition: background-color 0.6s ease;
  }

  body::before,
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  body::before {
    background:
      radial-gradient(120% 70% at 50% 8%, rgba(251, 191, 36, 0.42) 0%, rgba(255, 251, 235, 0) 62%),
      linear-gradient(180deg, #fff8e1 0%, var(--pq-bg) 55%);
  }

  body::after {
    background:
      radial-gradient(110% 50% at 50% 0%, rgba(251, 191, 36, 0.35) 0%, rgba(255, 251, 235, 0) 60%),
      var(--pq-bg);
  }

  body:has(.pq-intro:not([hidden]))::before,
  body:has(.pq-reviews:not([hidden]))::after,
  body:has(.pq-page)::after {
    opacity: 1;
  }

  /* The deck is a full-bleed video; black gutters extend it. */
  body:has(.pq-deck:not([hidden])) {
    background-color: #000;
  }
}

/* Visible whenever the tab is in FastSpring test mode (?test=<key>). */
.pq-test-badge {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pq-safe-bottom) + 10px);
  z-index: 50;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4);
  pointer-events: none;
}

/* ── 5. Checkout sheet ─────────────────────────────────────────── */

/* FastSpring's embedded checkout, over the paywall. Same column width as
   the funnel so the page doesn't jump on desktop. The checkout iframe
   fills everything under the header and scrolls on its own; its look
   comes from checkout-theme/fastspring-checkout.css in the FastSpring
   dashboard, since no CSS here reaches inside it. */
.pq-checkout-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--pq-shell-max);
  margin: 0 auto;
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(251, 191, 36, 0.22) 0%, rgba(255, 251, 235, 0) 70%),
    var(--pq-bg);
  animation: pq-fade-in 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

body.is-checkout-open {
  overflow: hidden;
}

.pq-checkout-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--pq-safe-top) + 12px) 60px 12px;
}

.pq-checkout-back {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pq-border);
  border-radius: 50%;
  background: var(--pq-surface);
  color: var(--pq-text);
  box-shadow: 0 4px 12px rgba(120, 53, 15, 0.08);
  cursor: pointer;
}

.pq-checkout-back:focus-visible {
  outline: 2px solid var(--pq-accent-ink);
  outline-offset: 2px;
}

.pq-checkout-heading {
  text-align: center;
}

.pq-checkout-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 800;
}

.pq-checkout-title svg {
  color: var(--pq-accent-ink);
}

.pq-checkout-sub {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pq-text-faint);
}

/* SBL sizes the checkout iframe to its content, so the sheet body is
   what scrolls; the iframe is pulled back into the flow to give the
   container its height. */
.pq-checkout-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#fsc-embedded-checkout-container {
  position: relative;
  min-height: 100%;
  padding-bottom: calc(var(--pq-safe-bottom) + 12px);
}

#fsc-embedded-checkout-container > #fsc-popup-frame {
  position: relative !important;
  display: block;
}

/* FastSpring shows its own TEST MODE label inside the checkout. */
body.is-checkout-open .pq-test-badge {
  display: none;
}