:root {
  --black: #050505;
  --ink: #0a0518;
  --cream: #f5f1db;
  --green: #1ed760;
  --acid: #d7ff35;
  --pink: #ed1652;
  --blue: #2f67ff;
  --cyan: #00a7fa;
  --magenta: #b900f4;
  --orange: #ff7a1a;
  --white: #ffffff;
  --surface: #fff7f3;
  --line: rgba(5, 5, 5, 0.18);
  /* logo mark: red dot diameter is locked to the bar thickness */
  --mark-bar-w: 3.9vw;
  --mark-bar-w: clamp(52px, 3.9vw, 70px);
  --mark-bar-h: 1.7vw;
  --mark-bar-h: clamp(16px, 1.7vw, 26px);
  --glass: rgba(13, 7, 32, 0.52);
  --glass-line: rgba(255, 255, 255, 0.14);
}

@font-face {
  font-family: "Alternate Gothic No1";
  src: url("./assets/alternategothicno1.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Forma DJR Display";
  src: url("./assets/FormaDJRDisplay-Bold-Testing.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

/* Lock the document so the home-screen (standalone PWA) app never rubber-bands.
   Scrolling happens inside .app-shell instead, so the fixed artwork layers can
   never be pulled away to reveal the flat colour behind them on iPad. */
html {
  height: 100%;
  background: #2a12c8;
  overscroll-behavior: none;
}

body {
  margin: 0;
  height: 100%;
  background: #2a12c8;
  color: var(--cream);
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

/* Living canvas: the wavy artwork, slowly breathing (Ken Burns drift) */
body::before {
  content: "";
  position: fixed;
  top: -8%;
  right: -8%;
  bottom: -8%;
  left: -8%;
  inset: -8%;
  z-index: -3;
  background: url("./assets/hero-bg.png") center / cover no-repeat, #2a12c8;
  animation: bgBreathe 34s ease-in-out infinite alternate;
  will-change: transform;
}

/* Soft colour orbs that drift over the artwork so the waves feel alive */
body::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 16% 22%, rgba(108, 92, 255, 0.3), transparent 72%),
    radial-gradient(40% 48% at 84% 80%, rgba(214, 40, 170, 0.22), transparent 72%),
    radial-gradient(36% 42% at 62% 46%, rgba(60, 110, 255, 0.2), transparent 74%);
  background-size: 150% 150%;
  mix-blend-mode: screen;
  animation: orbDrift 28s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes bgBreathe {
  0% {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.16) translate3d(-1.5%, 1.5%, 0);
  }
}

@keyframes orbDrift {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
  }
  100% {
    background-position: 26% 18%, 74% 82%, 60% 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

button,
input {
  font: inherit;
}

button,
a,
input,
label {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.22);
}

.app-shell {
  height: 100%;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.is-hidden {
  display: none !important;
}

.opening-screen {
  position: relative;
  display: grid;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  place-items: stretch;
}

.opening-card {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 8vh 7vw 7vh;
  padding: clamp(52px, 8vh, 104px) clamp(36px, 7vw, 132px) clamp(48px, 7vh, 84px);
  overflow: hidden;
  color: var(--white);
  background: transparent;
  align-content: center;
  justify-items: start;
  gap: 3vh;
  gap: clamp(20px, 3vh, 34px);
}

.poster-title {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1vh;
  gap: clamp(6px, 1.1vh, 14px);
  margin: 1vh 0 1.4vh;
  margin: clamp(4px, 1vh, 12px) 0 clamp(6px, 1.4vh, 16px);
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.86;
}

.poster-title .pt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1vw;
  gap: clamp(8px, 1vw, 16px);
}

.poster-title .pt-box {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--white);
  line-height: 0.92;
  font-size: 4.8vw;
  font-size: clamp(2.4rem, 4.8vw, 5rem);
  letter-spacing: 0.012em;
}

.poster-title .pt-wrapped {
  display: block;
  color: var(--white);
  font-size: 12vw;
  font-size: clamp(5rem, 12vw, 13rem);
  line-height: 0.78;
  letter-spacing: 0.012em;
}

.opening-prompt {
  position: relative;
  z-index: 2;
  margin: 1.4vh 0 0.8vh;
  margin: clamp(6px, 1.4vh, 16px) 0 clamp(2px, 0.8vh, 8px);
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.8vw;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.opening-hint {
  position: relative;
  z-index: 2;
  margin: 1vh 0 0;
  margin: clamp(4px, 1vh, 10px) 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.2vw;
  font-size: clamp(0.92rem, 1.2vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.opening-brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2vh;
  margin-bottom: clamp(8px, 2vh, 22px);
  width: fit-content;
  color: var(--white);
  font-size: 1.45vw;
  font-size: clamp(1rem, 1.45vw, 1.45rem);
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.opening-brand::before {
  content: "";
  width: var(--mark-bar-w);
  height: var(--mark-bar-h);
  margin-left: 0;
  background: var(--white);
}

.opening-dot {
  width: var(--mark-bar-h);
  height: var(--mark-bar-h);
  flex: 0 0 auto;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--pink);
}

.opening-shape {
  position: absolute;
  z-index: 1;
  display: none;
  pointer-events: none;
  opacity: 0.72;
}

.opening-shape-one {
  top: -11%;
  left: -2%;
  width: 52%;
  height: 24%;
  background: #eb55ff;
  border-radius: 0 0 48% 52% / 0 0 72% 84%;
  transform: rotate(-2deg);
}

.opening-shape-two {
  top: 12%;
  left: -13%;
  width: 28%;
  height: 58%;
  background: rgba(99, 197, 255, 0.72);
  border-radius: 44% 56% 64% 36%;
}

.opening-shape-three {
  right: -12%;
  bottom: 9%;
  width: 38%;
  height: 34%;
  background: rgba(138, 211, 255, 0.58);
  border-radius: 54% 46% 38% 62%;
}

.opening-shape-four {
  right: 16%;
  bottom: -18%;
  width: 35%;
  height: 38%;
  background: rgba(201, 49, 244, 0.62);
  border-radius: 55% 45% 58% 42%;
}

.audience-picker {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4vw;
  gap: clamp(12px, 1.4vw, 18px);
  width: 100%;
  max-width: 980px;
  margin-top: 1.2vh;
  margin-top: clamp(6px, 1.2vh, 14px);
}

.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4vw;
  gap: clamp(28px, 4vw, 48px);
  min-height: 15vw;
  min-height: clamp(150px, 15vw, 200px);
  padding: 2vw;
  padding: clamp(18px, 2vw, 26px);
  color: var(--white);
  background: #514ff2;
  border: 0;
  border-radius: 0;
  box-shadow: 0 18px 40px -18px rgba(5, 0, 20, 0.85);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transform: translateY(0);
  transition:
    box-shadow 200ms ease,
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.audience-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), transparent 58%);
  opacity: 0;
  transition: opacity 200ms ease;
}

.audience-card:nth-child(2) {
  background: #ff6a42;
}

.audience-card:nth-child(3) {
  background: #ec1c8f;
}

.audience-card:hover,
.audience-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 30px 54px -20px rgba(5, 0, 20, 0.95);
  outline: none;
}

.audience-card:hover::before,
.audience-card:focus-visible::before {
  opacity: 1;
}

.audience-card:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

.audience-card > span:first-child {
  position: relative;
  z-index: 1;
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-size: 3.4vw;
  font-size: clamp(2.4rem, 3.4vw, 3.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.audience-go {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 3.4vw;
  width: clamp(40px, 3.4vw, 52px);
  height: 3.4vw;
  height: clamp(40px, 3.4vw, 52px);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), background 200ms ease, color 200ms ease;
}

.audience-go svg {
  width: 58%;
  height: 58%;
}

.audience-card:hover .audience-go,
.audience-card:focus-visible .audience-go {
  background: var(--white);
  color: #1a0b3a;
  transform: translate(3px, -3px);
}

.audience-card.is-selected {
  transform: scale(0.97);
}

.audience-card.is-selected .audience-go {
  background: #1a0b3a;
  color: var(--white);
}

.primary-button,
.back-button {
  position: relative;
  z-index: 1;
  min-height: 50px;
  color: var(--cream);
  background: var(--black);
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.primary-button {
  position: relative;
  z-index: 2;
  justify-self: stretch;
  min-height: 7vw;
  min-height: clamp(68px, 7vw, 86px);
  margin-top: -6px;
  padding: 0 22px;
  color: var(--white);
  background: #ff7250;
  border-radius: 0;
  box-shadow: 9px 10px 0 rgba(79, 32, 92, 0.78);
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-size: 3.3vw;
  font-size: clamp(2.4rem, 3.3vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  transition:
    box-shadow 140ms ease,
    transform 140ms ease,
    background 160ms ease;
}

.primary-button:hover:not(:disabled),
.primary-button:focus-visible:not(:disabled) {
  background: #ff815f;
  outline: 3px solid rgba(255, 255, 255, 0.48);
  outline-offset: 4px;
}

.primary-button:disabled {
  color: var(--white);
  background: #ff7250;
  box-shadow: 9px 10px 0 rgba(79, 32, 92, 0.78);
  cursor: not-allowed;
}

.back-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: var(--black);
  background: var(--white);
  border: 2px solid var(--black);
}

.hero-panel {
  position: relative;
  min-height: 100vh;
  padding: 3.4vw;
  padding: clamp(18px, 3.4vw, 46px);
  background: var(--black);
  isolation: isolate;
}

.hero-panel::before {
  display: none;
}

.hero-panel::after {
  display: none;
}

.poster-noise {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(245, 241, 219, 0.28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(5, 5, 5, 0.34) 0 1px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode: overlay;
  z-index: -1;
}

.orbit {
  display: none;
}

.orbit-one {
  width: 28vw;
  height: 14vw;
  right: 5vw;
  top: 24vh;
  border-color: rgba(245, 241, 219, 0.56);
}

.orbit-two {
  width: 24vw;
  height: 44vw;
  left: -12vw;
  top: 28vh;
  border-color: rgba(30, 215, 96, 0.62);
}

.orbit-three {
  width: 19vw;
  height: 19vw;
  right: 18vw;
  bottom: -9vw;
  background: var(--blue);
  border-radius: 46% 54% 62% 38%;
  border-color: var(--black);
}

.brand-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: fit-content;
  min-height: 42px;
  padding: 0 0 12px;
  color: var(--black);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  max-width: 100%;
  text-shadow: none;
}

.pulse-dot {
  position: relative;
  z-index: 2;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pink);
  border: 0;
  box-shadow: 0 0 0 0 rgba(237, 22, 82, 0.32);
  animation: pulse 1.65s infinite;
}

.brand-line {
  position: absolute;
  left: 10px;
  right: 0;
  bottom: 2px;
  height: 14px;
  border-bottom: 11px solid var(--black);
  border-left: 11px solid var(--black);
  border-radius: 0 0 0 22px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(330px, 0.72fr) minmax(380px, 520px);
  gap: 6vw;
  gap: clamp(32px, 6vw, 92px);
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 6.8vw);
  min-height: calc(100vh - clamp(36px, 6.8vw, 92px));
}

.intro-copy {
  color: var(--black);
  max-width: 640px;
  text-shadow: none;
}

.story-card {
  position: relative;
  min-height: auto;
  padding: 4vw;
  padding: clamp(26px, 4vw, 46px);
  overflow: visible;
  border: 2px solid var(--black);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.story-card::before,
.story-card::after {
  display: none;
}

.kicker,
.card-label {
  margin: 0 0 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.kicker {
  display: inline-flex;
  padding: 8px 12px;
  color: var(--black);
  background: var(--acid);
  border: 2px solid var(--black);
  box-shadow: 5px 5px 0 var(--black);
}

h1 {
  position: relative;
  z-index: 1;
  margin: 6.5vh 0 0;
  margin: clamp(34px, 6.5vh, 58px) 0 0;
  max-width: 520px;
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-size: 4.8vw;
  font-size: clamp(3.1rem, 4.8vw, 5.15rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: auto;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

h1 span {
  display: block;
}

h1 span:nth-child(1) {
  color: var(--black);
}

h1 span:nth-child(2) {
  color: var(--black);
}

h1 span:nth-child(3) {
  margin-top: 0.08em;
  color: var(--black);
}

.hero-rule {
  position: relative;
  z-index: 1;
  display: block;
  width: min(300px, 72%);
  height: 11px;
  margin-top: 3.5vh;
  margin-top: clamp(24px, 3.5vh, 34px);
  background: var(--black);
  border-radius: 999px;
}

.hero-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 24px;
  height: 24px;
  background: var(--pink);
  border-radius: 50%;
  transform: translateY(-50%);
}

.lede {
  position: relative;
  z-index: 1;
  max-width: 420px;
  margin: 3.4vh 0 0;
  margin: clamp(24px, 3.4vh, 32px) 0 0;
  color: var(--black);
  font-size: 2.2vw;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.12;
}

.lede strong {
  display: inline-block;
  padding: 0 0.18em;
  color: var(--cream);
  background: var(--pink);
  font-weight: 900;
}

.calculator {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  color: var(--black);
  border: 3px solid var(--black);
  box-shadow: 12px 12px 0 var(--black);
  transform: rotate(0.5deg);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

.control-block {
  padding: 16px;
  background: #fff8;
  border: 2px solid var(--black);
}

.control-block label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-weight: 900;
}

.control-block strong {
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-size: 2rem;
}

input[type="range"] {
  appearance: none;
  width: 100%;
  accent-color: var(--black);
}

.identity-check {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 14px;
  border: 2px solid var(--black);
}

.identity-check legend {
  padding: 0 8px;
  font-weight: 900;
}

.identity-check label {
  display: flex;
  align-items: center;
  gap: 0;
  font-weight: 800;
}

.identity-check input[type="radio"] {
  appearance: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  background: var(--cream);
  border: 2px solid var(--black);
  border-radius: 50%;
}

.identity-check input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--black);
  transform: scale(0);
}

.identity-check input[type="radio"]:checked::before {
  transform: scale(1);
}

.identity-check input[type="radio"]:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

.results-panel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  padding: 4vw;
  padding: clamp(20px, 4vw, 54px);
  background: var(--black);
}

.wrapped-card {
  position: relative;
  container-type: inline-size;
  min-height: 310px;
  padding: 3.1vw;
  padding: clamp(26px, 3.1vw, 40px);
  overflow: hidden;
  color: var(--black);
  border-radius: 8px;
}

.wrapped-card::after {
  content: "";
  position: absolute;
  top: auto;
  right: -20%;
  bottom: -45%;
  left: auto;
  inset: auto -20% -45% auto;
  width: 64%;
  aspect-ratio: 1;
  border: 3px solid currentColor;
  border-radius: 50%;
  opacity: 0.4;
}

.main-card::after {
  top: -18%;
  right: -9%;
  bottom: auto;
  left: auto;
  inset: -18% -9% auto auto;
  width: 44%;
  border-radius: 48% 52% 42% 58%;
  transform: rotate(-12deg);
}

.borrowed-card::after {
  top: auto;
  right: auto;
  bottom: -26%;
  left: -18%;
  inset: auto auto -26% -18%;
  width: 78%;
  transform: rotate(18deg);
}

.pack-card::after {
  top: 18px;
  right: -24%;
  bottom: auto;
  left: auto;
  inset: 18px -24% auto auto;
  width: 72%;
  border-radius: 0;
  transform: rotate(8deg);
}

.money-card::after {
  top: auto;
  right: -16%;
  bottom: -20%;
  left: auto;
  inset: auto -16% -20% auto;
  width: 54%;
  border-color: rgba(5, 5, 5, 0.32);
  border-radius: 44% 56% 38% 62%;
  transform: rotate(24deg);
}

.minutes-card::after {
  top: -22%;
  right: auto;
  bottom: auto;
  left: -18%;
  inset: -22% auto auto -18%;
  width: 70%;
  transform: rotate(-18deg);
}

.lifetime-card::after {
  top: auto;
  right: -16%;
  bottom: -30%;
  left: auto;
  inset: auto -16% -30% auto;
  width: 58%;
  border-radius: 0;
  transform: rotate(10deg);
}

.closer-card::after {
  top: auto;
  right: 7%;
  bottom: -45%;
  left: auto;
  inset: auto 7% -45% auto;
  width: 34%;
  border-radius: 0 999px 999px 0;
  transform: rotate(-7deg);
}

.main-card {
  grid-column: span 7;
  background: var(--green);
}

.borrowed-card {
  grid-column: span 5;
  background: var(--pink);
}

.pack-card {
  grid-column: span 5;
  background: var(--acid);
}

.money-card {
  grid-column: span 4;
  background: var(--blue);
  color: var(--black);
}

.minutes-card {
  grid-column: span 3;
  background: var(--orange);
}

.lifetime-card {
  grid-column: span 5;
  background: var(--pink);
}

.closer-card {
  grid-column: span 12;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--cream);
}

.big-number {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow-wrap: normal;
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-size: 36vw;
  font-size: clamp(7rem, 36vw, 18rem);
  line-height: 0.74;
  letter-spacing: 0;
}

.big-number[data-digits="5"] {
  font-size: 27vw;
  font-size: clamp(5.8rem, 27vw, 14rem);
}

.big-number[data-digits="6"],
.big-number[data-digits="7"],
.big-number[data-digits="8"] {
  font-size: 22vw;
  font-size: clamp(4.6rem, 22vw, 11rem);
}

.big-line {
  max-width: 560px;
  margin: 20px 0 0;
  font-size: 2.6vw;
  font-size: clamp(1.3rem, 2.6vw, 2.6rem);
  font-weight: 900;
  line-height: 0.98;
}

.stat-pair strong {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow-wrap: normal;
  display: block;
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-size: 38vw;
  font-size: clamp(5.2rem, 38vw, 10rem);
  line-height: 0.86;
}

.stat-pair strong[data-digits="4"],
.stat-pair strong[data-digits="5"] {
  font-size: 27vw;
  font-size: clamp(4.4rem, 27vw, 8rem);
}

.stat-pair strong[data-digits="6"],
.stat-pair strong[data-digits="7"],
.stat-pair strong[data-digits="8"] {
  font-size: 22vw;
  font-size: clamp(3.8rem, 22vw, 7.4rem);
}

.money-card .stat-pair strong,
.lifetime-card .stat-pair strong {
  font-size: 29vw;
  font-size: clamp(4.2rem, 29vw, 8rem);
}

.money-card .stat-pair strong[data-digits="4"],
.money-card .stat-pair strong[data-digits="5"],
.lifetime-card .stat-pair strong[data-digits="4"],
.lifetime-card .stat-pair strong[data-digits="5"] {
  font-size: 23vw;
  font-size: clamp(3.8rem, 23vw, 7rem);
}

.money-card .stat-pair strong[data-digits="6"],
.money-card .stat-pair strong[data-digits="7"],
.money-card .stat-pair strong[data-digits="8"],
.lifetime-card .stat-pair strong[data-digits="6"],
.lifetime-card .stat-pair strong[data-digits="7"],
.lifetime-card .stat-pair strong[data-digits="8"] {
  font-size: 18vw;
  font-size: clamp(3.2rem, 18vw, 6.2rem);
}

.stat-pair span,
.wrapped-card p,
.wrapped-card h2 {
  position: relative;
  z-index: 1;
}

.stat-pair {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5vw;
  gap: clamp(12px, 2.5vw, 22px);
}

.stat-pair span,
.wrapped-card p {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.05;
}

.pack-stack {
  display: grid;
  grid-template-columns: repeat(5, 34px);
  gap: 8px;
  margin: 26px 0;
}

.pack {
  height: 52px;
  background: var(--black);
  border: 2px solid var(--black);
  box-shadow: inset 0 18px 0 var(--cream);
}

.closer-card h2 {
  max-width: 900px;
  margin: 0 0 2.2vw;
  margin: 0 0 clamp(16px, 2.2vw, 28px);
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-size: 8vw;
  font-size: clamp(3rem, 8vw, 8.5rem);
  line-height: 0.82;
  text-transform: uppercase;
}

.closer-copy {
  max-width: 760px;
  margin: 0 0 10px;
}

.site-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 14px;
  padding: 0 22px;
  color: var(--white);
  background: var(--pink);
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
}

.site-cta:hover,
.site-cta:focus-visible {
  background: var(--black);
  outline: 3px solid rgba(237, 22, 82, 0.28);
  outline-offset: 3px;
}

.reset-button {
  align-self: flex-start;
  min-height: 48px;
  padding: 0 18px;
  color: var(--cream);
  background: var(--black);
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.reset-button:hover {
  transform: translateY(-2px);
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 18px rgba(237, 22, 82, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(5, 5, 5, 0);
  }
}

@media (max-width: 880px) {
  .hero-panel {
    min-height: auto;
  }

  .opening-card {
    min-height: calc(100vh - 40px);
    gap: 30px;
  }

  .audience-picker {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: center;
    min-height: auto;
  }

  .story-card {
    width: 100%;
    max-width: 620px;
    min-height: auto;
  }

  .calculator {
    transform: none;
    width: 100%;
    max-width: 620px;
  }

  .brand-row {
    justify-content: flex-start;
  }

  .main-card,
  .borrowed-card,
  .pack-card,
  .money-card,
  .minutes-card,
  .lifetime-card,
  .closer-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .app-shell {
    overflow-x: hidden;
  }

  .hero-panel {
    min-height: auto;
    padding: 22px 18px 30px;
  }

  .opening-screen {
    padding: 0;
    place-items: stretch;
  }

  .opening-card {
    min-height: 100vh;
    padding: 34px 24px 42px;
    gap: 24px;
    align-content: center;
  }

  .opening-card h1 {
    margin-top: 6px;
    font-size: 14vw;
    font-size: clamp(3rem, 14vw, 5rem);
    line-height: 0.84;
  }

  .opening-brand {
    gap: 4px;
    font-size: 1.08rem;
  }

  .opening-brand::before {
    width: 44px;
    height: 18px;
  }

  .opening-dot {
    /* dot diameter locked to the white bar's thickness (18px here) */
    width: 18px;
    height: 18px;
  }

  .audience-card {
    min-height: 82px;
    padding: 16px 18px;
    box-shadow: 7px 8px 0 rgba(21, 15, 137, 0.78);
  }

  .audience-card span {
    font-size: 10.5vw;
    font-size: clamp(2.05rem, 10.5vw, 2.9rem);
  }

  .primary-button {
    width: 100%;
    min-height: 66px;
    margin-top: 0;
    box-shadow: 7px 8px 0 rgba(79, 32, 92, 0.78);
    font-size: 8.5vw;
    font-size: clamp(1.95rem, 8.5vw, 2.7rem);
    line-height: 1.05;
  }

  .opening-shape-one {
    width: 82%;
    height: 16%;
  }

  .opening-shape-two {
    left: -34%;
    width: 62%;
    height: 44%;
  }

  .opening-shape-three {
    right: -38%;
    bottom: 12%;
    width: 72%;
    height: 28%;
  }

  .opening-shape-four {
    right: -8%;
    bottom: -16%;
    width: 72%;
    height: 28%;
  }

  .back-button {
    position: relative;
    top: auto;
    right: auto;
    min-height: 40px;
    margin: 0;
  }

  .brand-row {
    max-width: 100%;
    gap: 4px;
    min-height: 34px;
    padding-bottom: 10px;
    font-size: 4vw;
    font-size: clamp(0.86rem, 4vw, 1rem);
    line-height: 1;
  }

  .pulse-dot {
    /* match the white bar thickness (mark-bar-h) so the dot never exceeds it */
    width: var(--mark-bar-h);
    height: var(--mark-bar-h);
    flex: 0 0 auto;
  }

  .brand-line {
    left: 9px;
    height: 12px;
    border-bottom-width: 9px;
    border-left-width: 9px;
  }

  .hero-grid {
    gap: 18px;
    padding-top: 0;
  }

  .intro-copy {
    max-width: 100%;
  }

  .story-card {
    min-height: auto;
    padding: 30px 26px 34px;
    border-radius: 8px;
    box-shadow: none;
  }

  h1 {
    max-width: 330px;
    margin-top: 44px;
    font-size: 14.2vw;
    font-size: clamp(3rem, 14.2vw, 4.7rem);
    line-height: 1.02;
    overflow-wrap: normal;
  }

  h1 span:nth-child(3) {
    margin-top: 0.08em;
  }

  .lede {
    max-width: 310px;
    margin-top: 24px;
    font-size: 1.12rem;
    line-height: 1.15;
  }

  .hero-rule {
    width: min(220px, 78%);
    height: 9px;
    margin-top: 24px;
  }

  .hero-rule::after {
    right: -10px;
    width: 20px;
    height: 20px;
  }

  .calculator {
    gap: 12px;
    width: 100%;
    padding: 12px;
    border-width: 3px;
    box-shadow: 8px 8px 0 var(--black);
  }

  .control-block {
    padding: 15px 12px;
  }

  .control-block label {
    align-items: flex-start;
    gap: 12px;
  }

  .control-block label span {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.05;
  }

  .control-block strong {
    font-size: 2.1rem;
    line-height: 0.86;
  }

  .identity-check {
    padding: 12px;
  }

  .identity-check legend {
    max-width: calc(100% - 20px);
    font-size: 1rem;
    line-height: 1.05;
  }

  .results-panel {
    gap: 12px;
    padding: 18px;
  }

  .wrapped-card {
    min-height: 260px;
    padding: 24px 20px;
  }

  .big-number {
    font-size: 34vw;
    font-size: clamp(6.4rem, 34vw, 10.5rem);
  }

  .stat-pair strong {
    font-size: 27vw;
    font-size: clamp(5rem, 27vw, 8rem);
    line-height: 0.9;
  }

  .money-card .stat-pair strong,
  .lifetime-card .stat-pair strong {
    font-size: 24vw;
    font-size: clamp(4.6rem, 24vw, 7.2rem);
  }

  .big-number[data-digits="5"],
  .big-number[data-digits="6"],
  .big-number[data-digits="7"],
  .big-number[data-digits="8"] {
    font-size: 24vw;
    font-size: clamp(4.4rem, 24vw, 8.2rem);
  }

  .stat-pair strong[data-digits="4"],
  .stat-pair strong[data-digits="5"],
  .stat-pair strong[data-digits="6"],
  .stat-pair strong[data-digits="7"],
  .stat-pair strong[data-digits="8"] {
    font-size: 24vw;
    font-size: clamp(3.6rem, 24vw, 6.8rem);
  }

  .money-card .stat-pair strong[data-digits="4"],
  .money-card .stat-pair strong[data-digits="5"],
  .money-card .stat-pair strong[data-digits="6"],
  .money-card .stat-pair strong[data-digits="7"],
  .money-card .stat-pair strong[data-digits="8"],
  .lifetime-card .stat-pair strong[data-digits="4"],
  .lifetime-card .stat-pair strong[data-digits="5"],
  .lifetime-card .stat-pair strong[data-digits="6"],
  .lifetime-card .stat-pair strong[data-digits="7"],
  .lifetime-card .stat-pair strong[data-digits="8"] {
    font-size: 20vw;
    font-size: clamp(3rem, 20vw, 6rem);
  }

  .closer-card h2 {
    font-size: 15vw;
    font-size: clamp(2.75rem, 15vw, 5.2rem);
  }
}

/* Smoking Wrapped v2 redesign */
.calculator-screen {
  position: relative;
  min-height: 100vh;
  background: transparent;
  isolation: isolate;
}

/* Richer variant for the main section: artwork mirrored + a contrast vignette */
.calculator-screen::before {
  content: "";
  position: fixed;
  top: -8%;
  right: -8%;
  bottom: -8%;
  left: -8%;
  inset: -8%;
  z-index: -1;
  background:
    radial-gradient(120% 95% at 50% 50%, transparent 38%, rgba(8, 3, 40, 0.62) 100%),
    url("./assets/hero-bg.png") center / cover no-repeat,
    #2a12c8;
  transform: scale(1.12) rotate(180deg);
  animation: bgBreatheAlt 40s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

@keyframes bgBreatheAlt {
  0% {
    transform: scale(1.12) rotate(180deg) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.22) rotate(180deg) translate3d(1.5%, -1.5%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calculator-screen::before {
    animation: none;
  }
}

.hero-panel {
  min-height: auto;
  padding: 5vw 5vw 4vw;
  padding: clamp(32px, 5vw, 68px) clamp(22px, 5vw, 64px) clamp(24px, 4vw, 42px);
  background: transparent;
}

.poster-noise,
.brand-line,
.hero-rule {
  display: none;
}

.hero-grid {
  width: min(1180px, 100%);
  min-height: auto;
  margin: 0 auto;
  grid-template-columns: minmax(360px, 1.08fr) minmax(300px, 0.78fr);
  align-items: start;
  gap: 3vw;
  gap: clamp(24px, 3vw, 38px);
}

.story-card {
  min-height: 270px;
  padding: 1.2vw 0;
  padding: clamp(8px, 1.2vw, 20px) 0;
  overflow: visible;
  color: var(--white);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.brand-row {
  gap: 6px;
  min-height: auto;
  width: fit-content;
  margin: 0 0 4vh;
  margin: 0 0 clamp(26px, 4vh, 44px);
  padding: 0;
  color: var(--white);
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-size: 1.1vw;
  font-size: clamp(0.98rem, 1.1vw, 1.16rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}

.brand-row:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: 6px;
}

.pulse-dot {
  width: var(--mark-bar-h);
  height: var(--mark-bar-h);
  margin-right: 12px;
  background: var(--pink);
  box-shadow: none;
  animation: none;
}

.brand-row::before {
  content: "";
  order: -1;
  width: var(--mark-bar-w);
  height: var(--mark-bar-h);
  margin-left: 0;
  background: var(--white);
}

#audience-label {
  color: var(--white);
}

.story-card h1,
.closer-card h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--white);
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-size: 7.8vw;
  font-size: clamp(5.2rem, 7.8vw, 8.6rem);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.story-card h1 span {
  display: inline;
  color: var(--white);
}

.story-card h1 #audience-word {
  color: var(--white);
}

.lede {
  max-width: 460px;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.82);
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-size: 2vw;
  font-size: clamp(1.38rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.calculator {
  gap: 1vw;
  gap: clamp(9px, 1vw, 13px);
  padding: 0;
  color: var(--white);
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}

.form-actions {
  order: 10;
  justify-content: flex-end;
}

.back-button,
.submit-answers,
.question-link {
  min-height: 36px;
  padding: 0 14px;
  color: var(--white);
  background: var(--pink);
  border: 0;
  border-radius: 0;
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.control-block {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5vw;
  grid-template-columns: minmax(0, 1fr) clamp(68px, 8.5vw, 100px);
  grid-template-areas:
    "label  number"
    "slider number";
  align-items: center;
  overflow: hidden;
  padding: 0;
  color: var(--white);
  background: #514ff2;
  border: 0;
}

.control-block::after {
  display: none;
}

.control-block label {
  display: contents;
}

.control-block label > span {
  grid-area: label;
  align-self: end;
  margin: 18px 20px 0;
  color: var(--white);
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.55vw;
  font-size: clamp(1.08rem, 1.55vw, 1.32rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
}

.control-block strong {
  grid-area: number;
  align-self: stretch;
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--white);
  background: #211d6b;
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 3.7vw;
  font-size: clamp(2.7rem, 3.7vw, 3.5rem);
  line-height: 1;
}

.control-block input[type="range"] {
  grid-area: slider;
  align-self: start;
  width: auto;
  height: 22px;
  margin: 14px 20px 20px;
  background: transparent;
  accent-color: var(--pink);
  cursor: pointer;
  touch-action: pan-y;
}

.control-block input[type="range"]::-webkit-slider-runnable-track {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--white) 0 var(--range-fill, 50%),
    #211d6b var(--range-fill, 50%) 100%
  );
}

.control-block input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -7.5px;
  background: var(--pink);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(5, 5, 5, 0.28);
}

.control-block input[type="range"]::-moz-range-track {
  height: 9px;
  background: #211d6b;
  border-radius: 999px;
}

.control-block input[type="range"]::-moz-range-progress {
  height: 9px;
  background: var(--white);
  border-radius: 999px;
}

.control-block input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--pink);
  border: 0;
  border-radius: 50%;
}

.results-panel {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 4vw 5vw 5vw;
  padding: clamp(22px, 4vw, 42px) clamp(22px, 5vw, 64px) clamp(34px, 5vw, 58px);
  background: transparent;
  gap: 2.2vw;
  gap: clamp(16px, 2.2vw, 24px);
}

.wrapped-card {
  min-height: 178px;
  padding: 2.8vw;
  padding: clamp(20px, 2.8vw, 32px);
  color: var(--white);
  border-radius: 0;
}

.wrapped-card::after {
  top: auto;
  right: -8%;
  bottom: -28%;
  left: auto;
  inset: auto -8% -28% auto;
  width: 34%;
  background: rgba(189, 78, 240, 0.42);
  border: 0;
  border-radius: 50%;
  opacity: 1;
}

.main-card::after {
  top: -18%;
  right: -10%;
  bottom: auto;
  left: auto;
  inset: -18% -10% auto auto;
  width: 30%;
  background: rgba(107, 105, 255, 0.38);
}

.pack-card::after {
  top: auto;
  right: auto;
  bottom: -24%;
  left: -10%;
  inset: auto auto -24% -10%;
  width: 42%;
  background: rgba(255, 255, 255, 0.22);
}

.minutes-card::after {
  top: auto;
  right: -12%;
  bottom: -20%;
  left: auto;
  inset: auto -12% -20% auto;
  width: 42%;
  background: rgba(237, 22, 82, 0.32);
}

.money-card::after {
  top: -18%;
  right: auto;
  bottom: auto;
  left: -12%;
  inset: -18% auto auto -12%;
  width: 48%;
  background: rgba(255, 114, 80, 0.34);
}

.lifetime-card::after {
  top: 18%;
  right: -18%;
  bottom: auto;
  left: auto;
  inset: 18% -18% auto auto;
  width: 36%;
  background: rgba(30, 215, 96, 0.28);
}

.main-card {
  grid-column: span 6;
  min-height: 235px;
  background: var(--pink);
}

.pack-card {
  grid-column: span 6;
  min-height: 235px;
  background: var(--blue);
}

.minutes-card {
  grid-column: span 4;
  min-height: 228px;
  background: var(--magenta);
}

.money-card {
  grid-column: span 4;
  min-height: 228px;
  background: var(--pink);
  color: var(--white);
}

.lifetime-card {
  grid-column: span 4;
  min-height: 228px;
  background: var(--blue);
  color: var(--white);
}

.closer-card {
  grid-column: span 12;
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(240px, 0.9fr);
  gap: 4vw;
  gap: clamp(22px, 4vw, 54px);
  min-height: 180px;
  background: var(--white);
  color: var(--black);
}

.closer-card h2 {
  color: var(--ink);
}

.closer-card::after {
  display: none;
}

.card-label,
.big-line,
.wrapped-card p,
.stat-pair span,
.closer-copy {
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.card-label {
  margin-bottom: 12px;
  color: inherit;
  text-transform: none;
}

.big-number,
.stat-pair strong {
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

.big-number {
  font-size: 32vw;
  font-size: clamp(8.6rem, 32vw, 17rem);
  line-height: 0.66;
}

.big-line {
  max-width: 260px;
  margin-top: 12px;
  font-size: 2.1vw;
  font-size: clamp(1rem, 2.1vw, 1.45rem);
  line-height: 1.05;
}

.stat-pair strong {
  font-size: 48vw;
  font-size: clamp(6.6rem, 48vw, 12.4rem);
  line-height: 0.78;
}

.stat-pair span,
.wrapped-card p {
  font-size: 1.75vw;
  font-size: clamp(1rem, 1.75vw, 1.36rem);
  line-height: 1.12;
}

.pack-stack {
  grid-template-columns: repeat(10, 22px);
  gap: 5px;
  margin: 20px 0;
}

.pack {
  height: 32px;
  background: var(--black);
  border: 2px solid var(--black);
  box-shadow: inset 0 10px 0 var(--white);
}

.closer-body {
  display: grid;
  align-content: center;
  gap: 16px;
}

.closer-copy {
  max-width: 420px;
  margin: 0;
}

.question-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  max-width: 230px;
  min-height: 54px;
  padding: 0 18px;
  font-size: 1rem;
  line-height: 1.12;
}

.questions-panel {
  padding: 0;
  background: transparent;
}

/* ============================================================
   GUIDED QUESTIONS FLOW  (prefix .gq-)
   One question per screen, tap to answer, auto-advance.
   Same Supabase payload as the old radio form. Lime accent.
   ============================================================ */

.gq-stage {
  --gq-accent: var(--acid);
  --gq-accent-ink: #0a0518;
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 880px;
  margin: 0 auto;
  padding: 4vh 6vw 5vh;
  padding: clamp(20px, 4vh, 40px) clamp(20px, 6vw, 56px) clamp(28px, 5vh, 56px);
  color: var(--white);
}

.gq-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;
}

/* ---- top bar: back + segmented progress ---- */
.gq-top {
  display: flex;
  align-items: center;
  gap: 3vw;
  gap: clamp(14px, 3vw, 26px);
  min-height: 48px;
}
.gq-back {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  cursor: pointer;
  transition: background 180ms ease, opacity 180ms ease, transform 180ms ease;
}
.gq-back svg { width: 42%; height: 42%; }
.gq-back:hover { background: rgba(255, 255, 255, 0.24); }
.gq-back:disabled { opacity: 0; pointer-events: none; }

.gq-progress {
  flex: 1 1 auto;
  display: flex;
  gap: 6px;
}
.gq-seg {
  flex: 1 1 0;
  height: 6px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.gq-seg::after {
  content: "";
  display: block;
  height: 100%;
  width: 0;
  background: var(--acid);
  transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gq-seg.is-done::after { width: 100%; background: var(--gq-accent); }
.gq-seg.is-active::after { width: 100%; background: var(--white); }

.gq-count {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
  font-family: "Alternate Gothic No1", "Arial Narrow", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

.gq-count:disabled {
  opacity: 1;
}

.gq-count.is-action {
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.gq-count.is-action:hover,
.gq-count.is-action:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

/* ---- middle: the question card ---- */
.gq-body {
  display: grid;
  align-content: center;
  padding: 5vh 0;
  padding: clamp(22px, 5vh, 60px) 0;
}

.gq-card { display: none; }
.gq-card.is-current { display: block; }

.gq-card.is-current .gq-kicker,
.gq-card.is-current .gq-prompt,
.gq-card.is-current .gq-options > *,
.gq-card.is-current .gq-text-wrap,
.gq-card.is-current .gq-finish {
  opacity: 0;
  transform: translateY(14px);
  animation: gqRise 520ms cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}
.gq-card.is-current .gq-prompt { animation-delay: 60ms; }
.gq-card.is-current .gq-options > *:nth-child(1) { animation-delay: 150ms; }
.gq-card.is-current .gq-options > *:nth-child(2) { animation-delay: 210ms; }
.gq-card.is-current .gq-options > *:nth-child(3) { animation-delay: 270ms; }
.gq-card.is-current .gq-options > *:nth-child(4) { animation-delay: 330ms; }
.gq-card.is-current .gq-options > *:nth-child(5) { animation-delay: 390ms; }
.gq-card.is-current .gq-text-wrap { animation-delay: 180ms; }

@keyframes gqRise {
  to { opacity: 1; transform: translateY(0); }
}

.gq-kicker {
  font-family: "Alternate Gothic No1", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.6vw;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--gq-accent);
  margin: 0 0 2vh;
  margin: 0 0 clamp(12px, 2vh, 20px);
}
.gq-prompt {
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-size: 5vw;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  margin: 0 0 4.5vh;
  margin: 0 0 clamp(26px, 4.5vh, 46px);
  max-width: 100%;
}

/* ---- answer options ---- */
.gq-options {
  display: grid;
  gap: 1.6vh;
  gap: clamp(10px, 1.6vh, 14px);
}
.gq-options.is-binary {
  grid-template-columns: 1fr 1fr;
}

.gq-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 2.4vh 2.4vw;
  padding: clamp(16px, 2.4vh, 24px) clamp(18px, 2.4vw, 28px);
  text-align: left;
  color: var(--white);
  background: #514ff2;
  border: 0;
  box-shadow: 0 16px 36px -20px rgba(5, 0, 20, 0.85);
  cursor: pointer;
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 2vw;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  overflow: hidden;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease,
    box-shadow 200ms ease;
}
.gq-opt::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: var(--gq-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 0;
}
.gq-opt > * { position: relative; z-index: 1; }
.gq-opt:hover {
  transform: translateY(-2px);
  background: #5f5dff;
  box-shadow: 0 22px 44px -20px rgba(5, 0, 20, 0.9);
}
.gq-opt:focus-visible {
  outline: 3px solid var(--gq-accent);
  outline-offset: 3px;
}
.gq-opt.is-chosen { color: var(--gq-accent-ink); }
.gq-opt.is-chosen::before { transform: scaleX(1); }
.gq-opt.is-binary-opt {
  justify-content: center;
  min-height: 18vh;
  min-height: clamp(120px, 18vh, 180px);
  font-size: 3.2vw;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
}

.gq-go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), background 180ms ease, color 180ms ease;
}
.gq-go svg { width: 56%; height: 56%; }
.gq-opt:hover .gq-go { background: var(--white); color: var(--ink); transform: translate(3px, -3px); }
.gq-opt.is-chosen .gq-go { background: var(--gq-accent-ink); color: var(--gq-accent); }

/* ---- postcode text step ---- */
.gq-text-wrap { display: grid; gap: 16px; max-width: 520px; }
.gq-text-wrap { display: grid; gap: clamp(16px, 2.4vh, 22px); max-width: 520px; }
.gq-text-input {
  width: 100%;
  padding: 2vh 2vw;
  padding: clamp(14px, 2vh, 20px) clamp(16px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  font-family: "Alternate Gothic No1", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: 5vw;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: 0.08em;
  text-transform: none;
  text-shadow: none;
  -webkit-text-fill-color: var(--white);
  -webkit-font-smoothing: antialiased;
  outline: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.gq-text-input::placeholder {
  color: rgba(255, 255, 255, 0.32);
  opacity: 1;
  text-shadow: none;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.32);
}
.gq-text-input:focus { border-color: var(--gq-accent); background: rgba(255, 255, 255, 0.12); }
.gq-helper { color: rgba(255, 255, 255, 0.6); font-size: 0.98rem; font-weight: 700; margin: 0; }

.gq-continue {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 1.8vh 3vw;
  padding: clamp(12px, 1.8vh, 16px) clamp(24px, 3vw, 34px);
  background: var(--gq-accent);
  color: var(--gq-accent-ink);
  border: 0;
  cursor: pointer;
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: transform 160ms ease, filter 160ms ease;
}
.gq-continue:hover { transform: translateY(-2px); filter: brightness(1.05); }
.gq-continue:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
  filter: none;
}

/* ---- footer hint ---- */
.gq-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-height: 24px;
}

.gq-stage.is-finished .gq-foot {
  visibility: hidden;
}

/* ---- finish / thank-you screen ---- */
.gq-finish { text-align: left; }
.gq-finish-grid {
  display: grid;
  grid-template-columns: minmax(0, 34rem);
  justify-content: start;
  align-items: center;
  gap: 6vw;
  gap: clamp(26px, 6vw, 64px);
}

.gq-finish-main {
  min-width: 0;
}

.gq-finish .gq-prompt { color: var(--gq-accent); }
.gq-finish-copy { color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; max-width: 30ch; margin: 0 0 20px; line-height: 1.35; }
.gq-finish-copy { color: rgba(255, 255, 255, 0.82); font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 30ch; margin: 0 0 clamp(20px, 3vh, 30px); line-height: 1.35; }
.gq-save-status { color: rgba(255, 255, 255, 0.78); font-size: clamp(0.78rem, 1.05vw, 1rem); font-weight: 700; line-height: 1.35; margin: 0 0 clamp(18px, 2.5vh, 26px); max-width: 31rem; }

.gq-support-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 18px 0 24px;
  background: var(--gq-accent);
  color: var(--gq-accent-ink);
  border: 0;
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-size: 2vw;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms ease, filter 160ms ease;
}

.gq-support-button .gq-go {
  background: var(--gq-accent-ink);
  color: var(--gq-accent);
}

.gq-support-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.gq-qr-panel {
  display: none;
  justify-items: center;
  gap: 12px;
  padding: 2.2vw;
  padding: clamp(14px, 2.2vw, 20px);
  background: var(--white);
  color: var(--gq-accent-ink);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 28px 54px -30px rgba(5, 0, 20, 0.9);
}

.gq-qr-panel img {
  width: min(100%, 270px);
  aspect-ratio: 1;
  display: block;
}

.gq-qr-label,
.gq-qr-url {
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
}

.gq-qr-label {
  font-size: 2.4vw;
  font-size: clamp(1.08rem, 2.4vw, 1.45rem);
  line-height: 1;
  text-transform: uppercase;
}

.gq-qr-url {
  font-size: 0.95rem;
  line-height: 1;
  color: rgba(10, 5, 24, 0.68);
}

@media (orientation: landscape) and (min-width: 900px) and (max-width: 1366px) and (min-height: 650px) and (max-height: 1024px) and (pointer: coarse) {
  .gq-finish-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
    justify-content: normal;
  }

  .gq-qr-panel {
    display: grid;
  }
}

.gq-done-tick {
  display: grid;
  place-items: center;
  width: 10vw;
  width: clamp(64px, 10vw, 92px);
  height: 10vw;
  height: clamp(64px, 10vw, 92px);
  background: var(--gq-accent);
  color: var(--gq-accent-ink);
  margin: 0 0 3vh;
  margin: 0 0 clamp(20px, 3vh, 30px);
  animation: gqPop 480ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.gq-done-tick svg { width: 52%; height: 52%; }
@keyframes gqPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 600px) {
  .gq-foot { display: none; }

  .gq-finish-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .gq-qr-panel {
    justify-self: start;
    width: min(100%, 280px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gq-card.is-current * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .gq-opt::before { transition: none; }
}

.questions-form {
  position: relative;
  display: grid;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 6vw 7vw;
  padding: clamp(34px, 6vw, 70px) clamp(36px, 7vw, 84px);
  overflow: hidden;
  color: var(--white);
  background: #514ff2;
  border: 0;
  border-radius: 0;
  box-shadow: 0 40px 80px -40px rgba(5, 0, 20, 0.85);
  gap: 34px;
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
}

.questions-form::before,
.questions-form::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.16), transparent 70%);
}

.questions-form::before {
  top: -10%;
  right: -7%;
  width: 36%;
  aspect-ratio: 1;
}

.questions-form::after {
  left: -11%;
  bottom: -13%;
  width: 29%;
  aspect-ratio: 1;
}

.form-brand,
.questions-form fieldset,
.text-question,
.submit-answers,
.submission-status {
  position: relative;
  z-index: 1;
}

.form-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 0;
}

.form-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.form-mark::before {
  content: "";
  width: 52px;
  height: 18px;
  background: var(--white);
}

.form-mark::after {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: var(--pink);
  border-radius: 50%;
}

.questions-form h2 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.08;
  text-transform: uppercase;
}

.questions-form fieldset,
.text-question {
  display: grid;
  gap: 11px;
  max-width: 620px;
  margin: 0;
  padding: 0;
  border: 0;
}

.questions-form legend,
.text-question span {
  margin-bottom: 10px;
  font-size: 1.6vw;
  font-size: clamp(1.08rem, 1.6vw, 1.24rem);
  line-height: 1.16;
}

.questions-form label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: 1rem;
  line-height: 1.18;
}

.questions-form .text-question {
  display: grid;
  width: min(620px, 100%);
}

.questions-form input[type="radio"] {
  appearance: none;
  width: 13px;
  height: 13px;
  margin: 0;
  background: transparent;
  border: 2px solid var(--white);
  border-radius: 0;
}

.questions-form input[type="radio"]:checked {
  background: var(--white);
}

.questions-form input[type="text"] {
  min-height: 36px;
  color: var(--white);
  background: transparent;
  border: 3px solid var(--white);
}

.inline-other input[type="text"] {
  width: 180px;
}

.text-question input {
  width: min(560px, 100%);
}

.submit-answers {
  justify-self: end;
  min-height: 48px;
  padding: 0 24px;
  background: var(--pink);
  transition: transform 160ms ease, background 160ms ease;
}

.submit-answers:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #ff2d66;
}

.submit-answers:disabled {
  cursor: wait;
  opacity: 0.72;
}

.submission-status {
  justify-self: end;
  max-width: 420px;
  margin: -14px 0 0;
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.2;
  text-align: right;
}

@media (hover: none) and (pointer: coarse) {
  .audience-card,
  .primary-button,
  .back-button,
  .submit-answers,
  .question-link {
    min-height: 48px;
  }

  .control-block input[type="range"] {
    height: 44px;
  }

  .control-block input[type="range"]::-webkit-slider-runnable-track {
    height: 12px;
  }

  .control-block input[type="range"]::-webkit-slider-thumb {
    width: 36px;
    height: 36px;
    margin-top: -12px;
  }

  .control-block input[type="range"]::-moz-range-thumb {
    width: 36px;
    height: 36px;
  }

  .questions-form label {
    min-height: 34px;
  }

  .questions-form input[type="radio"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .opening-card {
    min-height: 100svh;
    padding: 7vh 6vw;
    padding: clamp(46px, 7vh, 72px) clamp(42px, 6vw, 72px);
    gap: 4vh;
    gap: clamp(24px, 4vh, 42px);
  }

  .opening-card h1 {
    font-size: 11vw;
    font-size: clamp(6.8rem, 11vw, 8.4rem);
  }

  .audience-card {
    min-height: 116px;
  }

  .audience-card span {
    font-size: 4.5vw;
    font-size: clamp(3rem, 4.5vw, 3.65rem);
  }

  .hero-panel {
    padding: 30px 28px 20px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 0.96fr) minmax(330px, 0.82fr);
    gap: 22px;
  }

  .story-card {
    min-height: 0;
    padding: 34px 38px;
  }

  .brand-row {
    margin-bottom: 28px;
    margin-left: -38px;
  }

  .story-card h1 {
    font-size: 8.1vw;
    font-size: clamp(4.8rem, 8.1vw, 6.4rem);
    line-height: 0.8;
  }

  .lede {
    margin-top: 22px;
    font-size: 1.35rem;
  }

  .calculator {
    gap: 8px;
    padding: 16px;
  }

  .control-block {
    grid-template-columns: minmax(0, 1fr) 82px;
  }

  .control-block label > span {
    margin: 15px 16px 0;
    font-size: 1.08rem;
  }

  .control-block strong {
    font-size: 2.75rem;
  }

  .control-block input[type="range"] {
    margin: 10px 16px 16px;
  }

  .results-panel {
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    padding: 22px 28px 38px;
  }

  .main-card,
  .pack-card {
    grid-column: span 6;
    min-height: 266px;
  }

  .minutes-card,
  .money-card,
  .lifetime-card {
    grid-column: span 12;
    min-height: 220px;
  }

  .closer-card {
    grid-column: span 12;
  }

  .card-label {
    margin-bottom: 10px;
    font-size: 1.34rem;
  }

  .big-number {
    font-size: 18vw;
    font-size: clamp(10rem, 18vw, 13.4rem);
  }

  .big-number[data-digits="5"] {
    font-size: 14vw;
    font-size: clamp(7.6rem, 14vw, 10.8rem);
  }

  .big-number[data-digits="6"],
  .big-number[data-digits="7"],
  .big-number[data-digits="8"] {
    font-size: 11.5vw;
    font-size: clamp(6.8rem, 11.5vw, 9.4rem);
  }

  .big-line {
    max-width: 340px;
    font-size: 2.7vw;
    font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  }

  .stat-pair strong {
    font-size: 13vw;
    font-size: clamp(6.2rem, 13vw, 9rem);
  }

  .stat-pair strong[data-digits="4"],
  .stat-pair strong[data-digits="5"],
  .stat-pair strong[data-digits="6"],
  .stat-pair strong[data-digits="7"],
  .stat-pair strong[data-digits="8"],
  .money-card .stat-pair strong,
  .lifetime-card .stat-pair strong,
  .money-card .stat-pair strong[data-digits],
  .lifetime-card .stat-pair strong[data-digits] {
    font-size: 11vw;
    font-size: clamp(5.4rem, 11vw, 7.6rem);
  }

  .stat-pair span,
  .wrapped-card p {
    font-size: 2.5vw;
    font-size: clamp(1.32rem, 2.5vw, 1.9rem);
  }

  .minutes-card .stat-pair,
  .money-card .stat-pair,
  .lifetime-card .stat-pair {
    display: flex;
    max-width: 520px;
    gap: 10px;
  }

  .minutes-card .stat-pair span,
  .money-card .stat-pair span,
  .lifetime-card .stat-pair span {
    max-width: 520px;
  }

  .pack-stack {
    grid-template-columns: repeat(10, 30px);
    gap: 7px;
    margin: 24px 0;
  }

  .pack {
    height: 46px;
    box-shadow: inset 0 14px 0 var(--white);
  }
}

@media (min-width: 980px) and (max-width: 1180px) {
  .minutes-card,
  .money-card,
  .lifetime-card {
    grid-column: span 4;
    min-height: 270px;
  }

  .minutes-card .stat-pair,
  .money-card .stat-pair,
  .lifetime-card .stat-pair {
    max-width: none;
  }

  .money-card .stat-pair strong,
  .lifetime-card .stat-pair strong,
  .money-card .stat-pair strong[data-digits],
  .lifetime-card .stat-pair strong[data-digits] {
    font-size: 8.4vw;
    font-size: clamp(5.2rem, 8.4vw, 6.8rem);
  }

  .minutes-card .stat-pair span,
  .money-card .stat-pair span,
  .lifetime-card .stat-pair span {
    font-size: 1.9vw;
    font-size: clamp(1.22rem, 1.9vw, 1.52rem);
    line-height: 1.08;
  }
}

@media (min-width: 761px) and (max-width: 850px) {
  .results-panel {
    gap: 14px;
  }

  .main-card,
  .pack-card {
    min-height: 310px;
    padding: 22px;
  }

  .pack-stack {
    grid-template-columns: repeat(8, 24px);
    gap: 6px;
  }

  .pack {
    height: 38px;
    box-shadow: inset 0 12px 0 var(--white);
  }

  .pack-card p {
    font-size: 1.42rem;
  }
}

@media (max-width: 760px) {
  .hero-grid,
  .closer-card {
    grid-template-columns: 1fr;
  }

  .main-card,
  .pack-card,
  .minutes-card,
  .money-card,
  .lifetime-card,
  .closer-card {
    grid-column: 1 / -1;
  }

  .story-card h1,
  .closer-card h2 {
    font-size: 17vw;
    font-size: clamp(4rem, 17vw, 6.6rem);
  }

  .calculator {
    width: 100%;
    max-width: none;
  }

  .pack-stack {
    grid-template-columns: repeat(8, 22px);
  }
}

@media (max-width: 520px) {
  .hero-panel,
  .results-panel,
  .questions-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .story-card {
    padding: 30px 28px;
  }

  .brand-row {
    margin: 0 0 28px -46px;
    gap: 4px;
  }

  .story-card h1 {
    font-size: 18.6vw;
    font-size: clamp(4.15rem, 18.6vw, 5.85rem);
  }

  .brand-row::before {
    width: 44px;
    height: 16px;
  }

  .pulse-dot {
    /* dot matches the 16px white bar thickness above */
    width: 16px;
    height: 16px;
  }

  .control-block {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .control-block label > span {
    margin: 15px 16px 0;
  }

  .control-block input[type="range"] {
    margin: 12px 16px 16px;
  }

  .control-block strong {
    font-size: 2.35rem;
  }

  .wrapped-card {
    min-height: 180px;
  }

  .main-card,
  .pack-card {
    min-height: 220px;
  }

  .big-number {
    font-size: 43vw;
    font-size: clamp(8rem, 43vw, 11.4rem);
  }

  .questions-form {
    padding: 34px 28px;
    gap: 30px;
  }

  .form-brand {
    margin-left: 0;
  }

  .inline-other {
    flex-wrap: wrap;
  }
}

.pack-stack {
  --pack-width: 22px;
  --pack-height: 32px;
  --pack-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pack-width), var(--pack-width)));
  align-content: start;
  gap: 5px;
  width: min(100%, calc((var(--pack-width) * 10) + (5px * 9)));
  max-width: 100%;
}

.pack-stack.is-dense {
  --pack-width: 18px;
  --pack-height: 28px;
  --pack-top: 8px;
  gap: 4px;
  width: min(100%, calc((var(--pack-width) * 12) + (4px * 11)));
}

.pack-stack.is-ultra-dense {
  --pack-width: 14px;
  --pack-height: 22px;
  --pack-top: 6px;
  gap: 3px;
  width: min(100%, calc((var(--pack-width) * 16) + (3px * 15)));
}

.pack-stack.is-empty {
  min-height: var(--pack-height);
}

.pack-stack .pack {
  width: var(--pack-width);
  height: var(--pack-height);
  box-shadow: inset 0 var(--pack-top) 0 var(--white);
}

@media (min-width: 761px) and (max-width: 1180px) {
  .pack-stack {
    --pack-width: 30px;
    --pack-height: 46px;
    --pack-top: 14px;
    gap: 7px;
    width: min(100%, calc((var(--pack-width) * 10) + (7px * 9)));
  }

  .pack-stack.is-dense {
    --pack-width: 22px;
    --pack-height: 34px;
    --pack-top: 10px;
    gap: 5px;
    width: min(100%, calc((var(--pack-width) * 14) + (5px * 13)));
  }

  .pack-stack.is-ultra-dense {
    --pack-width: 16px;
    --pack-height: 25px;
    --pack-top: 7px;
    gap: 3px;
    width: min(100%, calc((var(--pack-width) * 18) + (3px * 17)));
  }
}

@media (min-width: 761px) and (max-width: 850px) {
  .pack-stack {
    --pack-width: 24px;
    --pack-height: 38px;
    --pack-top: 12px;
    gap: 6px;
    width: min(100%, calc((var(--pack-width) * 8) + (6px * 7)));
  }

  .pack-stack.is-dense {
    --pack-width: 18px;
    --pack-height: 28px;
    --pack-top: 8px;
    gap: 4px;
    width: min(100%, calc((var(--pack-width) * 12) + (4px * 11)));
  }

  .pack-stack.is-ultra-dense {
    --pack-width: 14px;
    --pack-height: 22px;
    --pack-top: 6px;
    gap: 3px;
    width: min(100%, calc((var(--pack-width) * 14) + (3px * 13)));
  }
}

/* ===== v3: living canvas + opening rebuild — responsive + motion ===== */

/* Stacked opening: cards become compact rows so the whole screen fits */
@media (max-width: 880px) {
  .opening-screen {
    min-height: 100vh;
    height: auto;
  }

  .opening-card {
    justify-items: stretch;
    min-height: 100vh;
    overflow: visible;
    gap: 2.2vh;
    gap: clamp(14px, 2.2vh, 24px);
  }

  .opening-card h1 {
    max-width: none;
  }

  .audience-picker {
    grid-template-columns: 1fr;
    max-width: 540px;
  }

  .audience-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    gap: 16px;
    padding: 16px 18px;
  }

  .audience-card > span:first-child {
    font-size: 8.5vw;
    font-size: clamp(2rem, 8.5vw, 2.85rem);
  }

  .audience-card .audience-go {
    align-self: center;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

@media (max-width: 520px) {
  .audience-card .audience-go {
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
  }
}

/* Opening entrance choreography (one orchestrated page-load reveal) */
@media (prefers-reduced-motion: no-preference) {
  .opening-brand,
  .opening-kicker,
  .opening-card h1,
  .opening-prompt,
  .opening-hint {
    opacity: 0;
    transform: translateY(20px);
    animation: riseIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  /* cards animate opacity only, leaving transform free for hover/press */
  .audience-picker .audience-card {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
  }

  .opening-brand { animation-delay: 0.05s; }
  .opening-kicker { animation-delay: 0.16s; }
  .opening-card h1 { animation-delay: 0.26s; }
  .opening-prompt { animation-delay: 0.42s; }
  .audience-picker .audience-card:nth-child(1) { animation-delay: 0.52s; }
  .audience-picker .audience-card:nth-child(2) { animation-delay: 0.62s; }
  .audience-picker .audience-card:nth-child(3) { animation-delay: 0.72s; }
  .opening-hint { animation-delay: 0.86s; }
}

@keyframes riseIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* ===== v4: poster look — results reveal choreography ===== */
@media (prefers-reduced-motion: no-preference) {
  .calculator-screen .story-card,
  .calculator-screen .calculator {
    animation: riseIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .calculator-screen .calculator {
    animation-delay: 0.08s;
  }

  .results-panel .wrapped-card {
    animation: cardIn 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .results-panel .wrapped-card:nth-child(1) { animation-delay: 0.06s; }
  .results-panel .wrapped-card:nth-child(2) { animation-delay: 0.14s; }
  .results-panel .wrapped-card:nth-child(3) { animation-delay: 0.22s; }
  .results-panel .wrapped-card:nth-child(4) { animation-delay: 0.30s; }
  .results-panel .wrapped-card:nth-child(5) { animation-delay: 0.38s; }
  .results-panel .wrapped-card:nth-child(6) { animation-delay: 0.46s; }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== v5: stat cards glow-up — gradients, texture, drifting shapes ===== */
.main-card {
  background: linear-gradient(145deg, #ff4d7d 0%, #d4145a 58%, #a8104c 100%);
}
.pack-card {
  background: linear-gradient(145deg, #4a7bff 0%, #2f2be6 72%);
}
.minutes-card {
  background: linear-gradient(145deg, #ef45d6 0%, #7d18d6 78%);
}
.money-card {
  background: linear-gradient(145deg, #ff7a45 0%, #ec1c8f 82%);
}
.lifetime-card {
  background: linear-gradient(150deg, #2fa3ff 0%, #2c39e6 82%);
}

.wrapped-card:not(.closer-card) {
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 22px 48px -24px rgba(6, 2, 30, 0.72);
}

/* print-dot texture sits above the gradient, below the type */
.wrapped-card:not(.closer-card)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.3px, transparent 1.5px);
  background-size: 15px 15px;
  opacity: 0.5;
}

/* big drifting decorative shape, distinct per card */
.wrapped-card:not(.closer-card)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  border: 0;
  animation: floatBlob 11s ease-in-out infinite alternate;
}

.main-card::after {
  right: -14%;
  bottom: -26%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 15px, rgba(255, 255, 255, 0.16) 15px 18px);
}
.pack-card::after {
  right: -16%;
  top: -20%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 46% 54% 60% 40%;
  background: radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.26), transparent 68%);
  animation-direction: alternate-reverse;
}
.minutes-card::after {
  left: -18%;
  bottom: -24%;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 56%, rgba(255, 255, 255, 0.2) 57% 62%, transparent 63%);
}
.money-card::after {
  right: -12%;
  top: -22%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 58% 42% 50% 50%;
  background: repeating-linear-gradient(125deg, transparent 0 12px, rgba(255, 255, 255, 0.12) 12px 20px);
  animation-direction: alternate-reverse;
}
.lifetime-card::after {
  right: -16%;
  bottom: -28%;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 16px, rgba(255, 255, 255, 0.15) 16px 19px);
}

@keyframes floatBlob {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(4%, -4%, 0) rotate(7deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wrapped-card:not(.closer-card)::after {
    animation: none;
  }
}

/* =====================================================================
   v6: living backgrounds, touch-first opening cards,
       Wrapped-grade stat boxes, dark finale card
   ===================================================================== */

/* ---- 1. Backgrounds that breathe -------------------------------- */
/* Richer drifting orb field over the artwork (shared across screens) */
body::after {
  background:
    radial-gradient(38% 46% at 12% 16%, rgba(123, 24, 214, 0.46), transparent 70%),
    radial-gradient(34% 42% at 88% 26%, rgba(47, 103, 255, 0.4), transparent 72%),
    radial-gradient(44% 52% at 80% 84%, rgba(237, 22, 82, 0.34), transparent 70%),
    radial-gradient(36% 44% at 24% 88%, rgba(0, 167, 250, 0.34), transparent 72%),
    radial-gradient(30% 38% at 54% 48%, rgba(185, 0, 244, 0.28), transparent 74%);
  background-size: 190% 190%;
  mix-blend-mode: screen;
  animation: orbDrift 24s ease-in-out infinite alternate;
}

/* A second, slower blob layer so the colour never sits still */
.app-shell::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(30% 32% at 18% 32%, rgba(0, 167, 250, 0.32), transparent 70%),
    radial-gradient(28% 30% at 84% 64%, rgba(237, 22, 82, 0.3), transparent 72%),
    radial-gradient(26% 30% at 60% 12%, rgba(255, 122, 26, 0.22), transparent 74%);
  background-size: 210% 210%;
  mix-blend-mode: screen;
  animation: orbDrift2 36s ease-in-out infinite alternate;
}

@keyframes orbDrift2 {
  0% {
    background-position: 100% 0%, 0% 100%, 50% 0%;
  }
  100% {
    background-position: 64% 30%, 26% 70%, 40% 60%;
  }
}

/* Re-enable a couple of soft floating shapes behind the opening copy */
@media (min-width: 881px) {
  .opening-shape {
    display: block;
    opacity: 0.5;
    mix-blend-mode: screen;
    filter: blur(2px);
    animation: shapeFloat 16s ease-in-out infinite alternate;
  }
  .opening-shape-two { animation-duration: 21s; animation-direction: alternate-reverse; }
  .opening-shape-three { animation-duration: 19s; }
  .opening-shape-four { animation-duration: 24s; animation-direction: alternate-reverse; }
}

@keyframes shapeFloat {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(3%, -4%, 0) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell::after,
  .opening-shape {
    animation: none;
  }
}

/* ---- 2. Opening cards: touch-first ------------------------------ */
.audience-card {
  min-height: 17vw;
  min-height: clamp(186px, 17vw, 232px);
  padding: 2.2vw;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 18px;
  background:
    radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.5px) 0 0 / 15px 15px,
    linear-gradient(150deg, #4a7bff 0%, #2f2be6 78%);
  box-shadow: 0 20px 44px -20px rgba(5, 0, 22, 0.9);
}

.audience-card:nth-child(2) {
  background:
    radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.5px) 0 0 / 15px 15px,
    linear-gradient(150deg, #ff8a3d 0%, #ec1c8f 84%);
}

.audience-card:nth-child(3) {
  background:
    radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.5px) 0 0 / 15px 15px,
    linear-gradient(150deg, #ff4d8e 0%, #b1106a 86%);
}

/* big watermark index sitting behind the label */
.audience-card::before {
  content: "";
  position: absolute;
  top: auto;
  right: 14px;
  bottom: auto;
  left: auto;
  inset: auto 14px auto auto;
  top: -6px;
  z-index: 0;
  background: none;
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-size: 9vw;
  font-size: clamp(5.5rem, 9vw, 8.5rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  opacity: 1;
  pointer-events: none;
}

.audience-card[data-audience="social"]::before { content: "01"; }
.audience-card[data-audience="occasional"]::before { content: "02"; }
.audience-card[data-audience="few"]::before { content: "03"; }

/* hover sheen moves to ::after so ::before can be the index */
.audience-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.26), transparent 56%);
  opacity: 0;
  transition: opacity 200ms ease;
}

.audience-card:hover::after,
.audience-card:focus-visible::after {
  opacity: 1;
}

.audience-card > span:first-child {
  font-size: 3.5vw;
  font-size: clamp(2.5rem, 3.5vw, 3.55rem);
}

/* arrow becomes a clear, tappable circular button */
.audience-go {
  width: 4.4vw;
  width: clamp(56px, 4.4vw, 64px);
  height: 4.4vw;
  height: clamp(56px, 4.4vw, 64px);
  border-radius: 50%;
  background: var(--white);
  color: #1a0b3a;
  box-shadow: 0 8px 18px -8px rgba(5, 0, 22, 0.7);
}

.audience-card:hover .audience-go,
.audience-card:focus-visible .audience-go {
  background: var(--white);
  color: #1a0b3a;
  transform: translate(4px, -4px) scale(1.04);
}

.audience-card:active {
  transform: translateY(-2px) scale(0.985);
  box-shadow: 0 12px 26px -16px rgba(5, 0, 22, 0.9);
}

/* ---- 3. Stat boxes: cleaner Wrapped hierarchy ------------------- */
/* lead-in label reads as a quiet eyebrow */
.wrapped-card:not(.closer-card) .card-label {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.3vw;
  font-size: clamp(0.95rem, 1.3vw, 1.12rem);
  letter-spacing: 0.012em;
}

/* short descriptors get a hairline + uppercase tracking, like Wrapped */
.big-line,
.stat-pair span,
.pack-card p {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 2px solid rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.94);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1.16;
}

.big-line {
  display: inline-block;
  max-width: 18ch;
}

.pack-card p {
  display: inline-block;
}

.stat-pair {
  gap: 0;
}

/* on the wide three-up row, keep number + caption as a tidy stack */
@media (min-width: 1181px) {
  .minutes-card .stat-pair span,
  .money-card .stat-pair span,
  .lifetime-card .stat-pair span {
    max-width: 16ch;
  }
}

/* slightly deeper, more dimensional gradients */
.main-card {
  background: linear-gradient(150deg, #ff5c86 0%, #d4145a 56%, #9c0e48 100%);
}
.pack-card {
  background: linear-gradient(150deg, #5a86ff 0%, #2f2be6 70%, #211d9e 100%);
}
.minutes-card {
  background: linear-gradient(150deg, #f655dd 0%, #7d18d6 80%);
}
.money-card {
  background: linear-gradient(150deg, #ff8a3d 0%, #ec1c8f 82%);
}
.lifetime-card {
  background: linear-gradient(150deg, #36abff 0%, #2c39e6 80%, #1f1fae 100%);
}

/* a soft top-edge highlight gives the cards real depth */
.wrapped-card:not(.closer-card) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 26px 52px -26px rgba(6, 2, 30, 0.78);
}

/* ---- 4. The white box becomes a dark finale -------------------- */
.closer-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #1a0a3e 0%, #2a12c8 64%, #3a1bd6 100%);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 30px 60px -30px rgba(6, 2, 30, 0.8);
}

.closer-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1.3px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.6;
}

/* glowing accent blob, re-enabled for the finale */
.closer-card::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  right: -8%;
  bottom: -42%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(237, 22, 82, 0.55), transparent 66%);
  pointer-events: none;
  animation: floatBlob 12s ease-in-out infinite alternate;
}

.closer-card h2,
.closer-card .closer-body {
  position: relative;
  z-index: 1;
}

.closer-card h2 {
  color: var(--white);
}

/* a bright rule under the headline ties it to the brand */
.closer-card h2::after {
  content: "";
  display: block;
  width: 18vw;
  width: clamp(96px, 18vw, 168px);
  height: 9px;
  margin-top: 1.6vw;
  margin-top: clamp(14px, 1.6vw, 22px);
  background: var(--pink);
  border-radius: 999px;
}

.closer-card .closer-copy {
  color: rgba(255, 255, 255, 0.86);
}

@media (prefers-reduced-motion: reduce) {
  .closer-card::after {
    animation: none;
  }
}

/* ---- 5. Touch sizing tweaks ------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  .audience-go {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 880px) {
  .audience-card {
    min-height: 0;
    border-radius: 16px;
    padding: 18px 20px;
  }
  /* index watermark crowds the compact row layout, so retire it here */
  .audience-card::before {
    display: none;
  }
  /* let the label shrink and keep the arrow from being clipped */
  .audience-card > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .audience-card .audience-go {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 520px) {
  .audience-card > span:first-child {
    font-size: 7.6vw;
    font-size: clamp(1.72rem, 7.6vw, 2.4rem);
  }
  .audience-card .audience-go {
    width: 50px;
    height: 50px;
  }
}

/* =====================================================================
   v7: Wrapped-grade stat cards — bold flat colour blocks
   Each stat is a single saturated brand colour with maximum contrast,
   like a real Spotify Wrapped card. Replaces the muddy dark-fade
   gradients with punchy, confident blocks.
   ===================================================================== */

/* Solid, saturated colour blocks — a faint same-hue top sheen keeps them
   alive without diluting the colour. */
.main-card {
  background: linear-gradient(170deg, #ff2e6b 0%, #ed1652 38%, #ed1652 100%);
}
.pack-card {
  background: linear-gradient(170deg, #4f86ff 0%, #2f67ff 40%, #2f67ff 100%);
}
.minutes-card {
  background: linear-gradient(170deg, #ce2bff 0%, #b900f4 42%, #b900f4 100%);
}
.money-card {
  background: linear-gradient(170deg, #e4ff5a 0%, #d7ff35 42%, #d7ff35 100%);
}
.lifetime-card {
  background: linear-gradient(170deg, #2cc0ff 0%, #00a7fa 42%, #00a7fa 100%);
}

/* Cleaner shadow — drop the inset white line that muddied the flat colour,
   keep a confident floating shadow. */
.wrapped-card:not(.closer-card) {
  box-shadow: 0 28px 56px -28px rgba(6, 2, 30, 0.8);
}

/* Texture: a touch crisper so it reads as intentional halftone, not noise. */
.wrapped-card:not(.closer-card)::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.4px, transparent 1.6px);
  background-size: 16px 16px;
  opacity: 0.55;
}

/* ---- Light card (money / acid) flips to dark ink for contrast -------- */
.money-card .card-label {
  color: rgba(5, 5, 5, 0.66);
}
.money-card .big-number,
.money-card .stat-pair strong {
  color: #0a0518;
}
.money-card .big-line,
.money-card .stat-pair span,
.money-card p {
  color: rgba(5, 5, 5, 0.86);
  border-top-color: rgba(5, 5, 5, 0.3);
}
/* dark texture + decorative shape so they show on the bright block */
.money-card::before {
  background-image: radial-gradient(rgba(5, 5, 5, 0.16) 1.4px, transparent 1.6px);
  opacity: 0.4;
}
.money-card::after {
  background: repeating-linear-gradient(125deg, transparent 0 12px, rgba(5, 5, 5, 0.12) 12px 20px);
}

/* =====================================================================
   v8: cleaner Wrapped pass
   - stat palette: 5 deep, vivid hues that all hold WHITE text and stay
     clear of the indigo background (no light/acid card, no black text)
   - drop the busy halftone dots + concentric-ring/stripe patterns;
     replace with one soft organic, slowly-morphing wave blob per card
   - flatten the "it all adds up" finale
   - landing buttons: flat, squared, in line with the stat cards
   - questions logo mark sits flush to the left edge
   ===================================================================== */

/* ---- 1. Stat colours -------------------------------------------- */
.main-card     { background: #ed1652; } /* red    */
.pack-card     { background: #ff6a1a; } /* orange */
.minutes-card  { background: #0a9d6e; } /* emerald*/
.money-card    { background: #0098e8; } /* azure  */
.lifetime-card { background: #c026d3; } /* fuchsia*/

/* every stat card now carries white text again */
.money-card .card-label { color: rgba(255, 255, 255, 0.82); }
.money-card .big-number,
.money-card .stat-pair strong { color: var(--white); }
.money-card .big-line,
.money-card .stat-pair span,
.money-card p {
  color: rgba(255, 255, 255, 0.94);
  border-top-color: rgba(255, 255, 255, 0.34);
}

/* ---- 2. Patterns -> one soft organic wave blob ------------------ */
/* kill the halftone dot layer entirely */
.wrapped-card:not(.closer-card)::before { display: none !important; }

/* a single soft, blurred, slowly-morphing organic shape per card */
.wrapped-card:not(.closer-card)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 84%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.06) 58%,
    transparent 74%);
  border-radius: 42% 58% 63% 37% / 46% 41% 59% 54%;
  filter: blur(3px);
  opacity: 1;
  border: 0;
  animation: waveMorph 18s ease-in-out infinite alternate;
}

.main-card::after     { right: -20%; bottom: -26%; }
.pack-card::after     { left: -22%;  top: -22%;  animation-direction: alternate-reverse; }
.minutes-card::after  { right: -18%; bottom: -28%; }
.money-card::after    { left: -20%;  bottom: -24%; animation-direction: alternate-reverse;
  background: radial-gradient(closest-side, rgba(255,255,255,0.16), rgba(255,255,255,0.06) 58%, transparent 74%); }
.lifetime-card::after { right: -20%; top: -24%; }

@keyframes waveMorph {
  0%   { border-radius: 42% 58% 63% 37% / 46% 41% 59% 54%; transform: translate(0, 0) rotate(0deg); }
  50%  { border-radius: 58% 42% 38% 62% / 55% 56% 44% 45%; transform: translate(3%, -2%) rotate(7deg); }
  100% { border-radius: 40% 60% 52% 48% / 49% 38% 62% 51%; transform: translate(-2%, 2%) rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wrapped-card:not(.closer-card)::after { animation: none; }
}

/* ---- 3. Flatter finale ------------------------------------------ */
.closer-card {
  background: #170a3a;               /* flat, no gradient */
  box-shadow: 0 28px 56px -30px rgba(6, 2, 30, 0.78);
}
.closer-card::before { display: none !important; }  /* drop dot texture  */
.closer-card::after  { display: none !important; }  /* drop the glow blob */

/* ---- 4. Landing buttons: flat + squared, like the stat cards ---- */
.audience-card {
  border-radius: 0;
  background: #ed1652;
  box-shadow: 0 18px 40px -20px rgba(5, 0, 22, 0.85);
}
.audience-card:nth-child(2) { background: #ff6a1a; }
.audience-card:nth-child(3) { background: #c026d3; }
.audience-card::before { display: none !important; }  /* drop 01/02/03 watermark */
.audience-card::after  { background: linear-gradient(150deg, rgba(255,255,255,0.16), transparent 60%); }

/* arrow: simple flat square, not a glossy circle */
.audience-go {
  width: 4vw;
  width: clamp(46px, 4vw, 56px);
  height: 4vw;
  height: clamp(46px, 4vw, 56px);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  box-shadow: none;
}
.audience-card:hover .audience-go,
.audience-card:focus-visible .audience-go {
  background: var(--white);
  color: #1a0b3a;
  transform: translate(3px, -3px);
}
.audience-card.is-selected .audience-go { background: var(--white); color: #1a0b3a; }

/* ---- 5. Questions logo mark flush to the left edge -------------- */
.form-brand {
  margin-left: calc(7vw * -1);
  margin-left: calc(clamp(36px, 7vw, 84px) * -1);
}

/* ---- 6. Landing artwork ----------------------------------------- */
.opening-screen::before {
  content: "";
  position: absolute;
  top: -8%;
  right: -8%;
  bottom: -8%;
  left: -8%;
  inset: -8%;
  z-index: 0;
  background: url("./assets/hero-bg.png") center / cover no-repeat, #2a12c8;
  animation: bgBreathe 34s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}

.opening-card {
  z-index: 1;
}

.opening-screen .opening-shape {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .opening-screen::before {
    animation: none;
  }
}

/* =====================================================================
   v9: prominent copy uses the condensed display face (Alternate Gothic),
   small + form copy stays on Forma DJR for readability.
   ===================================================================== */
.lede,
.opening-prompt {
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.012em;
}
/* Alternate Gothic runs taller/narrower — nudge size + line-height so the
   lede and prompt read as confident display copy, not shrunken body text. */
.lede {
  font-size: 4.6vw;
  font-size: clamp(1.5rem, 4.6vw, 2.1rem);
  line-height: 1.02;
}
.opening-prompt {
  font-size: 5vw;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.02;
}

/* =====================================================================
   v10: review pass (Shea, 2026-06-24)
   1. Opening title on a single line, sized to the audience-card row
   2. (reverted) logo mark keeps its white bar + red dot — the cigarette
   3. Closer card: drop the red underline, re-flow the right-hand copy
   4. Stat cards: remove the hairline rules above the captions
   ===================================================================== */

/* ---- 1. "YOUR SMOKING WRAPPED" — one confident line ---------------- */
.poster-title {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
  gap: 1.3vw;
  gap: clamp(10px, 1.3vw, 22px);
}
.poster-title .pt-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 1.3vw;
  gap: clamp(10px, 1.3vw, 22px);
}
.poster-title .pt-box,
.poster-title .pt-wrapped {
  font-size: 11.4vw;
  font-size: clamp(2.4rem, 11.4vw, 9.1rem);
  line-height: 0.84;
  letter-spacing: 0.01em;
}

/* ---- 2. Logo mark: KEEP the white bar + red dot (the cigarette) --- */
/* (Reverted: an earlier pass wrongly stripped the white bar. The bar
   is the cigarette body, the red dot the lit tip — it stays on every
   lockup exactly as the original design had it.) */

/* ---- 3a. Closer card: full stop becomes a red dot ---------------- */
/* The headline text now ends without a "." (set in script.js); this
   pseudo-element renders the stop as a round red dot — the same red dot
   as the logo mark / lit cigarette tip. Sits inline after the last word. */
.closer-card h2::after {
  content: "";
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.04em;
  vertical-align: baseline;
  background: var(--pink);
  border-radius: 50%;
}

/* ---- 3b. Closer card: re-flow the right-hand copy ---------------- */
.closer-card {
  align-items: center;
}
.closer-card .closer-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* lead line: the warning, quieter and tighter */
.closer-card .closer-copy:first-child {
  margin: 0 0 1.6vw;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  max-width: 34ch;
  font-size: 1.25vw;
  font-size: clamp(1.02rem, 1.25vw, 1.28rem);
  line-height: 1.34;
  color: rgba(255, 255, 255, 0.78);
}
/* punchline: the good news, bigger and full white */
.closer-card .closer-copy:last-child {
  margin: 0;
  max-width: 24ch;
  font-size: 2.1vw;
  font-size: clamp(1.45rem, 2.1vw, 2.05rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--white);
}

/* ---- 4. Stat cards: drop the hairline rules above captions ------- */
.results-panel .big-line,
.results-panel .stat-pair span,
.results-panel .pack-card p {
  margin-top: 1vw;
  margin-top: clamp(8px, 1vw, 14px);
  padding-top: 0;
  border-top: 0;
}

/* QA hardening: 4-digit yearly totals with commas need their own tier.
   The comma descender can visually collide with the caption even when the
   layout boxes do not overlap, so keep this card a touch calmer. */
.main-card .big-number[data-digits="4"] {
  font-size: 19vw;
  font-size: clamp(6.6rem, 19vw, 12.2rem);
  line-height: 0.76;
}

.main-card .big-line {
  margin-top: 2.2vw;
  margin-top: clamp(18px, 2.2vw, 30px);
}

@media (min-width: 761px) and (max-width: 1180px) {
  .main-card .big-number[data-digits="4"] {
    font-size: 15vw;
    font-size: clamp(7.4rem, 15vw, 10.6rem);
  }
}

@media (max-width: 520px) {
  .main-card .big-number[data-digits="4"] {
    font-size: 34vw;
    font-size: clamp(6.2rem, 34vw, 9.2rem);
  }
}

/* ---- 5. Font consistency: every big number uses the display face -- */
/* The slider readouts (4, 6, 3) were the only big numbers still on
   Forma; move them onto Alternate Gothic so all numbers match the
   stat numbers (288, 29, £212, 864). Rule: condensed display = head-
   lines + numbers; Forma = anything read as a sentence or a label. */
.control-block strong {
  font-family: "Alternate Gothic No1", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-size: 4.3vw;
  font-size: clamp(3.1rem, 4.3vw, 4rem);
  line-height: 1;
}

/* ---- 6. Lead-in sentences move to Forma (sentences = Forma) ------- */
/* "You might be surprised…" and "Which one sounds like you?" were on the
   display face; the strict rule keeps the display face for headlines +
   numbers only, so these read in Forma like the rest of the copy. */
.lede {
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.9vw;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.22;
  letter-spacing: 0.01em;
}
.opening-prompt {
  font-family: "Forma DJR Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.7vw;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* ---- 7. Questions form: two columns so it fits on one page ------- */
/* An extra question (sexual orientation) made the single stack too tall.
   Pack the fieldsets into two columns; header, submit and status span
   the full width. Collapses to one column on narrow screens. */
.questions-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(960px, 100%);
  column-gap: 4vw;
  column-gap: clamp(30px, 4vw, 56px);
  row-gap: 2.4vw;
  row-gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}
.questions-form .form-brand,
.questions-form .submit-answers,
.questions-form .submission-status {
  grid-column: 1 / -1;
}
.questions-form .submit-answers {
  justify-self: end;
}
@media (max-width: 640px) {
  .questions-form {
    grid-template-columns: 1fr;
  }
}

/* Extend the calculator logo bar to the screen edge without moving the red dot. */
.calculator-screen .brand-row::before {
  width: calc(100vw + var(--mark-bar-w));
  margin-left: -100vw;
}

/* Safari 12 supports grid gap but not flex gap. Keep the opening lockup
   separated on older campaign iPads where clamp() is also unavailable. */
@supports not (font-size: clamp(1rem, 2vw, 2rem)) {
  .poster-title .pt-box + .pt-box {
    margin-left: 12px;
  }

  .poster-title .pt-wrapped {
    margin-top: 10px;
  }

  .opening-brand::before {
    margin-right: 6px;
  }

  .audience-card > * + * {
    margin-left: 0;
  }

  .audience-card .audience-go {
    position: absolute;
    right: 2.2vw;
    bottom: 2.2vw;
    margin: 0;
  }

  .audience-card:hover,
  .audience-card:focus,
  .audience-card:focus-visible,
  .audience-card.is-selected {
    transform: none;
    outline: none;
  }

  .audience-card:hover::after,
  .audience-card:focus::after,
  .audience-card:focus-visible::after {
    opacity: 0;
  }

  .audience-card:hover .audience-go,
  .audience-card:focus .audience-go,
  .audience-card:focus-visible .audience-go,
  .audience-card.is-selected .audience-go {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
    transform: none;
  }

  .gq-support-button > * + *,
  .gq-opt > * + * {
    margin-left: 12px;
  }
}

/* Safari 12 can incorrectly report clamp() support and keeps touch hover
   active. The script adds this class from the iPad OS user agent. */
.is-legacy-safari .audience-card .audience-go {
  position: absolute;
  right: 2.2vw;
  bottom: 2.2vw;
  margin: 0;
}

.is-legacy-safari .audience-card:hover,
.is-legacy-safari .audience-card:focus,
.is-legacy-safari .audience-card:focus-visible,
.is-legacy-safari .audience-card.is-selected {
  transform: none;
  outline: none;
}

.is-legacy-safari .audience-card:hover::after,
.is-legacy-safari .audience-card:focus::after,
.is-legacy-safari .audience-card:focus-visible::after {
  opacity: 0;
}

.is-legacy-safari .audience-card:hover .audience-go,
.is-legacy-safari .audience-card:focus .audience-go,
.is-legacy-safari .audience-card:focus-visible .audience-go,
.is-legacy-safari .audience-card.is-selected .audience-go {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  transform: none;
}

/* Touchscreens can retain :hover or focus after a tap. Keep those visual
   states exclusive to mouse/keyboard input while preserving tap feedback. */
@media (hover: none), (pointer: coarse) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100vh;
    min-height: 100lvh;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }

  .opening-screen,
  .opening-card,
  .gq-stage {
    min-height: 100%;
    min-height: 100svh;
  }

  .control-block input[type="range"] {
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }

  .control-block input[type="range"]:focus,
  .control-block input[type="range"]:active {
    background: transparent;
    outline: 0;
    box-shadow: none;
  }

  body::before,
  body::after,
  .app-shell::after,
  .opening-screen::before,
  .calculator-screen::before,
  .wrapped-card:not(.closer-card)::after,
  .opening-brand,
  .opening-kicker,
  .opening-card h1,
  .opening-prompt,
  .opening-hint,
  .audience-picker .audience-card,
  .calculator-screen .story-card,
  .calculator-screen .calculator,
  .results-panel .wrapped-card,
  .gq-card.is-current .gq-kicker,
  .gq-card.is-current .gq-prompt,
  .gq-card.is-current .gq-options > *,
  .gq-card.is-current .gq-text-wrap,
  .gq-card.is-current .gq-finish {
    animation: none !important;
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .audience-card:hover,
  .audience-card:focus:not(:focus-visible) {
    transform: none;
    box-shadow: 0 18px 40px -20px rgba(5, 0, 22, 0.85);
    outline: none;
  }

  .audience-card:hover::after,
  .audience-card:focus:not(:focus-visible)::after {
    opacity: 0;
  }

  .audience-card:hover .audience-go,
  .audience-card:focus:not(:focus-visible) .audience-go {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
    transform: none;
  }

  .gq-opt:hover {
    transform: none;
    background: #514ff2;
    box-shadow: 0 16px 36px -20px rgba(5, 0, 20, 0.85);
  }

  .gq-opt:hover .gq-go {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
    transform: none;
  }

  .gq-back:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .gq-continue:hover {
    transform: none;
    filter: none;
  }
}