/* pages-title-forms.css — Shared question header, title, gender, age, car-plan, hobby, name-fill, thank-you */

/* ═══════════════════════════════════════════════════
   SHARED: PAGE TOP BAR (all pages)
════════════════════════════════════════════════════ */
.page-topbar {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(19px, 7.0cqw, 90px) clamp(30px, 7.5cqw, 96px) clamp(11px, 2.5cqw, 32px);
  min-height: clamp(60px, 28cqw, 718px);
  flex-shrink: 0;
}

.page-topbar-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-topbar-progress-slot {
  width: 100%;
}

.page-topbar-progress-slot:empty {
  display: none;
}

/* Progress wraps inside topbar: align to content/CTA padding, not topbar logo padding */
.page-topbar-progress-slot .story-progress-wrap,
.page-topbar-progress-slot .light-progress-wrap {
  padding-left: clamp(54px, 13.5cqw, 346px);
  padding-right: clamp(54px, 13.5cqw, 346px);
  padding-top: clamp(8px, 2cqw, 51px);
  /* Offset the topbar's own side padding so net = content padding */
  margin-left: calc(-1 * clamp(30px, 7.5cqw, 192px));
  margin-right: calc(-1 * clamp(30px, 7.5cqw, 192px));
  width: calc(100% + 2 * clamp(30px, 7.5cqw, 192px));
}

.page-topbar-logo img {
  height: clamp(28px, 7cqw, 96px);
  width: auto;
}


.page-topbar-badge {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1cqw, 7px);
  text-align: right;
}

.page-topbar-badge-num {
  font-family: var(--font-headline, sans-serif);
  font-size: clamp(28px, 8cqw, 56px);
  font-weight: 900;
  color: var(--page-text);
  line-height: 1;
}

.page-topbar-badge-text {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(7px, 1.7cqw, 11px);
  font-weight: 600;
  color: var(--page-text);
  text-transform: uppercase;
  line-height: 1.3;
  letter-spacing: 0.3px;
}

/* Version badge — bottom-left of title page */
.version-badge {
  position: absolute;
  bottom: clamp(8px, 2cqw, 14px);
  left: clamp(10px, 2.5cqw, 18px);
  z-index: 10;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(8px, 1.8cqw, 11px);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  pointer-events: none;
  user-select: none;
}


/* All animated content sits above the z-index:0 gradient pseudo-element */
[data-ani-step] {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════
   SHARED: PAGE QUESTION HEADER (Age / Hobby / CarPlan)
════════════════════════════════════════════════════ */
.page-question {
  width: 100%;
  padding: clamp(4px, 1cqw, 10px) clamp(54px, 13.5cqw, 346px) clamp(10px, 2.5cqw, 18px);
  flex-shrink: 0;
}

#page-age-choose,
#page-car-plan {
  background: url('../assets/bg/BG2.jpg') center / cover no-repeat;
}

#page-age-choose .page-question,
#page-car-plan .page-question {
  padding-top: 4cqw;
}

.page-question-title {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(22px, 6cqw, 42px);
  font-weight: 350;
  line-height: 1.3;
  color: var(--page-text);
}

.page-question-title strong {
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════
   SHARED: CTA BOTTOM BAR (berikutnya / mulai)
════════════════════════════════════════════════════ */
.page-cta-bar {
  width: 100%;
  padding: clamp(12px, 3cqw, 40px) clamp(54px, 13.5cqw, 173px) clamp(90px, 34cqw, 472px);
  flex-shrink: 0;
  margin-top: auto;
}

/* Row wrapper — single line containing back icon + berikutnya button */
.cta-bar-row {
  display: flex;
  align-items: center;
  gap: 2cqw;
}

/* When back button is present the berikutnya fills remaining width */
.cta-bar-row .btn-berikutnya {
  flex: 1;
  min-width: 0;
  width: auto;
}

.btn-berikutnya {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8cqw 0.8cqw 0.8cqw clamp(20px, 5cqw, 32px);
  background: var(--page-red-gradient);
  color: var(--page-card-bg);
  border: none;
  border-radius: clamp(40px, 12cqw, 80px);
  font-family: var(--font-body, sans-serif);
  font-size: clamp(14px, 3.5cqw, 22px);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.btn-berikutnya:active {
  opacity: 0.75;
  transform: scale(0.98);
}

.btn-berikutnya--disabled {
  opacity: 0.35;
  pointer-events: none;
}

.btn-berikutnya.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Centered text label inside the button */
.btn-berikutnya-text {
  flex: 1;
  text-align: center;
}

/* White circle arrow badge on the right of the button */
.btn-berikutnya-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cta-badge-size);
  height: var(--cta-badge-size);
  border-radius: 50%;
  background: var(--page-card-bg);
  flex-shrink: 0;
}

.btn-berikutnya-arrow img {
  width: 45%;
  height: auto;
  display: block;
  /* Recolor white SVG to Toyota red (#FF0000) */
  filter: brightness(0) saturate(100%) invert(11%) sepia(100%) saturate(7490%) hue-rotate(3deg) brightness(103%) contrast(115%);
}

/* Sebelumnya (back) button — circle, height matches berikutnya exactly */
.btn-sebelumnya {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width:  var(--cta-btn-height);
  height: var(--cta-btn-height);
  padding: 0;
  background: var(--page-card-bg);
  border: 1.5px solid var(--page-red);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.btn-sebelumnya-icon {
  /* Size relative to the circle: width = 57% of diameter, height follows aspect ratio (35/44) */
  width:  calc(var(--cta-btn-height) * 0.57);
  height: calc(var(--cta-btn-height) * 0.57 * 35 / 44);
  transform: translateX(45%);
  pointer-events: none;
  flex-shrink: 0;
}

.btn-sebelumnya:active {
  opacity: 0.75;
  transform: scale(0.95);
}

/* Dark-page variant: btn-berikutnya becomes white bg / red text / red arrow container */
.story-page .btn-berikutnya {
  background: var(--page-card-bg);
  color: var(--page-red);
}

.story-page .btn-berikutnya-arrow {
  background: var(--page-red);
}

.story-page .btn-berikutnya-arrow img {
  /* Recolor red SVG arrow to white */
  filter: brightness(0) invert(1);
}

/* .title-cta-bar and .berikutnya-bar are now unified as .page-cta-bar */


/* ═══════════════════════════════════════════════════
   TITLE PAGE
════════════════════════════════════════════════════ */
#page-title {
  justify-content: flex-start;
  overflow: hidden;
  background: url('../assets/bg/BG1.jpg') center / cover no-repeat;
}

/* CTA bar is transparent — mascot (z-index: 1) bleeds over it.
   Button is raised above the mascot so it stays clickable. */
#page-title .page-cta-bar {
  position: relative;
  z-index: 2;
  background: transparent;
}

.title-body {
  flex: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.title-headline {
  position: relative;
  z-index: 2;
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(34px, 8.6cqw, 172px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--page-text);
  padding: 0 clamp(54px, 13.5cqw, 173px) 0;
}

/* "Discover Your" — smaller top line */
.title-headline__top {
  font-size: clamp(24px, 6.2cqw, 124px);
  font-weight: 700;
  color: var(--page-text);
}

/* "Toyota's DNA!" — larger bottom line, inherits .title-headline font-size */
.title-headline strong {
  font-size: clamp(34px, 8.6cqw, 172px);
  font-weight: 700;
  color: var(--page-text);
}

.title-headline--red {
  color: var(--page-red);
}

.title-subtitle {
  position: relative;
  z-index: 2;
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(14px, 3.5cqw, 56px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--page-text);
  padding: clamp(8px, 2cqw, 24px) clamp(54px, 13.5cqw, 173px) 0;
}

.title-subtitle strong {
  font-weight: 700;
}

.title-mascot {
  position: absolute;
  right: clamp(-201px, -14cqw, -56px);
  bottom: clamp(90px, 26cqw, 375px);
  height: clamp(300px, 61svh, 1495px);
  width: auto;
  z-index: 1;
}

.title-mascot img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  transition: opacity 1s ease, transform 1s ease;
}

.title-mascot img.mascot-exit {
  opacity: 0;
  transform: translateX(-40px);
}

.title-mascot img.mascot-enter {
  opacity: 0;
  transform: translateX(40px);
}

.title-mascot img.mascot-visible {
  opacity: 1;
  transform: translateX(0);
}


/* ═══════════════════════════════════════════════════
   GENDER PAGE
════════════════════════════════════════════════════ */
.gender-grid {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.5cqw, 18px);
  padding: clamp(8px, 2cqw, 16px) clamp(24px, 6cqw, 48px);
  justify-content: center;
}

.gender-card {
  flex: 1;
  max-height: clamp(100px, 28cqw, 200px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 3cqw, 24px);
  padding: 0 clamp(20px, 5cqw, 40px);
  border-radius: clamp(12px, 3cqw, 20px);
  border: none;
  cursor: pointer;
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(16px, 4.5cqw, 32px);
  font-weight: 800;
  color: var(--page-text);
  letter-spacing: 0.5px;
  transition: transform 0.12s, opacity 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.gender-card[data-value="laki-laki"]  { background: var(--gender-male-bg); }
.gender-card[data-value="perempuan"]  { background: var(--gender-female-bg); }

.gender-card--selected,
.gender-card:active { transform: scale(0.97); opacity: 0.85; }

.gender-card .choice-icon {
  font-size: clamp(28px, 8cqw, 56px);
}


/* ═══════════════════════════════════════════════════
   AGE PAGE
════════════════════════════════════════════════════ */
.age-grid {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4cqw 3cqw;
  padding: clamp(4px, 1cqw, 8px) clamp(54px, 13.5cqw, 173px);
  align-content: center;
  overflow-y: auto;
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.age-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(8cqw + 2 * 0.8cqw);
  padding: 0.8cqw clamp(8px, 2cqw, 14px);
  border-radius: clamp(40px, 12cqw, 80px);
  background: var(--page-card-bg);
  border: 2px solid rgba(255, 0, 0, 0.35);
  box-shadow: 0 4px 18px rgba(255, 0, 0, 0.18);
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(10px, 2.6cqw, 18px);
  font-weight: 350;
  line-height: 1;
  color: var(--page-text);
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}

/* Last item — stays same size, does NOT span full width */
.age-card:last-child:nth-child(odd) {
  grid-column: auto;
}

.age-card--selected {
  background: var(--page-red-gradient);
  border-color: var(--page-red);
  color: #fff;
  font-weight: 600;
}

.age-card:active {
  opacity: 0.75;
}


/* ═══════════════════════════════════════════════════
   CAR PLAN PAGE
════════════════════════════════════════════════════ */
.carplan-grid {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 3.4cqw, 49px);
  padding: clamp(4px, 1cqw, 8px) clamp(54px, 13.5cqw, 173px);
  align-content: center;
}

.carplan-card {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: clamp(16px, 5cqw, 40px);
  background: var(--page-card-bg);
  border: 2px solid rgba(255, 0, 0, 0.35);
  box-shadow: 0 4px 18px rgba(255, 0, 0, 0.18);
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(12px, 3cqw, 20px);
  font-weight: 350;
  color: var(--page-text);
  cursor: pointer;
  text-align: center;
  padding: clamp(12px, 3cqw, 20px);
  line-height: 1.3;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.carplan-card strong {
  font-size: clamp(14px, 3.4cqw, 23px);
  font-weight: 700;
  display: block;
}

.carplan-card--selected {
  background: var(--page-red-gradient);
  border-color: var(--page-red);
  color: #fff;
  font-weight: 600;
}

.carplan-card:active {
  opacity: 0.75;
}


/* ═══════════════════════════════════════════════════
   HOBBY PAGE
════════════════════════════════════════════════════ */
#page-hobby-choose {
  background: url('../assets/bg/BG2-red.jpg') center / cover no-repeat;
  color: var(--page-text);
  justify-content: flex-start;
}

/* Match quiz1/quiz3 bottom padding */
#page-hobby-choose .page-cta-bar,
#page-car-choose .page-cta-bar {
  padding-bottom: clamp(44px, 18cqw, 512px);
}

/* Hobby question block — side padding matches .page-cta-bar / .btn-berikutnya */
/* Scoped override — higher specificity than .quiz-question-block so source order doesn't matter */
#page-hobby-choose .quiz-question-block {
  padding-top:   0;
  padding-left:  clamp(54px, 13.5cqw, 173px);
  padding-right: clamp(54px, 13.5cqw, 173px);
}

/* Scrollable hobby list container */
.hobby-list {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  padding: 0 clamp(16px, 13.5cqw, 173px);
  display: flex;
  flex-direction: column;
  gap: 0;
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.hobby-list.is-dragging {
  user-select: none;
}

/* Scroll arrow — same pulse style as quiz nav arrows */
.hobby-scroll-arrow {
  flex-shrink: 0;
  align-self: center;
  width: clamp(36px, 9cqw, 56px);
  height: clamp(36px, 9cqw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 7cqw, 44px);
  line-height: 1;
  color: var(--page-red);
  cursor: pointer;
  animation: arrow-pulse 1.6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.hobby-scroll-arrow.is-hidden {
  display: none;
}

/* Category section */
.hobby-category-section {
  display: flex;
  flex-direction: column;
  gap: 4cqw;
  margin-bottom: 4cqw;
}

.hobby-category-label {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(9px, 2.2cqw, 13px);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--hobby-category-color);
  text-transform: uppercase;
  padding: 1.5cqw 0 0.8cqw;
}

/* Hobby card row — 2-column pill grid */
.hobby-card-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2cqw 2cqw;
}

.hobby-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1cqw;
  height: 9.6cqw;
  padding: 0 2.5cqw;
  border-radius: 12cqw;
  border: 2px solid rgba(255, 0, 0, 0.35);
  box-shadow: 0 4px 18px rgba(255, 0, 0, 0.18);
  background: var(--page-card-bg);
  font-family: var(--font-solid, sans-serif);
  font-size: 2.4cqw;
  font-weight: 700;
  line-height: 1;
  color: var(--page-text);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}

/* Icon wrapper — sized relative to card height so it never overflows */
.hobby-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* ~70% of card height */
  width: 8cqw;
  height: 8cqw;
}

/* Default: white SVG icons tinted to black via invert */
.hobby-card-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
  transition: filter 0.12s;
}

/* Label centred between icon and its mirror spacer */
.hobby-card-label-text {
  flex: 1;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Invisible right spacer — half width of .hobby-card-icon */
.hobby-card-spacer {
  visibility: hidden;
  width: 3cqw;
}

/* Selected: red background, white text, icon stays white (no invert) */
.hobby-card--selected {
  background: var(--page-red-gradient);
  border-color: var(--page-red);
  color: #fff;
  font-weight: 600;
}

.hobby-card--selected .hobby-card-icon-img {
  filter: none;
}

.hobby-card:active { opacity: 0.75; }

/* Legacy — no longer used */
.hobby-card .choice-icon { display: none; }


/* ═══════════════════════════════════════════════════
   NAME FILL PAGE
════════════════════════════════════════════════════ */

/* Name display field */
.namefill-field-wrap {
  width: 100%;
  padding: 0 clamp(16px, 4cqw, 32px);
  margin-bottom: clamp(8px, 2cqw, 16px);
  flex-shrink: 0;
}

.namefill-display {
  width: 100%;
  min-height: clamp(44px, 11cqw, 72px);
  padding: clamp(8px, 2cqw, 14px) clamp(12px, 3cqw, 20px);
  background: var(--page-card-bg);
  border: 2px solid rgba(0,0,0,0.15);
  border-radius: clamp(8px, 2cqw, 12px);
  display: flex;
  align-items: center;
  gap: 2px;
}

.namefill-text {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(18px, 5cqw, 36px);
  font-weight: 700;
  color: var(--page-text);
  letter-spacing: 0.02em;
  word-break: break-all;
}

.namefill-cursor {
  font-size: clamp(18px, 5cqw, 36px);
  font-weight: 300;
  color: var(--page-red);
  animation: cursor-blink 1s step-end infinite;
  line-height: 1;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.namefill-hint {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(9px, 2.2cqw, 14px);
  color: var(--page-muted);
  margin-top: clamp(4px, 1cqw, 8px);
  padding: 0 clamp(2px, 0.5cqw, 4px);
}

/* Virtual keyboard */
.vkb {
  width: 100%;
  padding: clamp(4px, 1cqw, 8px) clamp(6px, 1.5cqw, 12px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1cqw, 7px);
  flex-shrink: 0;
}

/* ── Virtual keyboard sizing tokens ──────────────────
   --vkb-key : base key width (one unit)
   --vkb-gap : gap between keys
   All special keys are derived from these two values.
──────────────────────────────────────────────────── */
.ngp-keyboard {
  --vkb-key: clamp(28px, 7.8cqw, 62px);
  --vkb-gap: clamp(4px, 1cqw, 8px);
}

.vkb-row {
  display: flex;
  justify-content: center;
  gap: var(--vkb-gap);
}

.vkb-key {
  flex: none;
  width: var(--vkb-key);
  height: clamp(44px, 11cqw, 80px);
  background: var(--page-card-bg);
  border: 1.5px solid rgba(211, 60, 60, 0.5);
  border-radius: clamp(6px, 1.5cqw, 12px);
  font-family: var(--font-body, sans-serif);
  font-size: clamp(12px, 3cqw, 22px);
  font-weight: 500;
  color: var(--page-text);
  cursor: pointer;
  transition: background 0.05s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.vkb-key:active {
  background: rgba(0,0,0,0.1);
  transform: scale(0.92);
}

/* Shift & backspace: 1.5× key width */
.vkb-key--backspace {
  width: calc(var(--vkb-key) * 1.5 + var(--vkb-gap) * 0.5);
  background: var(--page-card-bg);
  font-size: clamp(14px, 3.5cqw, 26px);
}

.vkb-row--bottom {
  gap: var(--vkb-gap);
  justify-content: center;
}

/* Space: same total width as Z through M (8 keys + 7 gaps) */
.vkb-key--space {
  width: calc(var(--vkb-key) * 8 + var(--vkb-gap) * 7);
  height: clamp(44px, 11cqw, 80px);
  font-size: clamp(10px, 2.5cqw, 16px);
  letter-spacing: 1px;
}

.vkb-key--done {
  width: calc(var(--vkb-key) * 2 + var(--vkb-gap));
  background: var(--page-red-gradient);
  border-color: var(--page-red);
  color: #fff;
  font-size: clamp(10px, 2.5cqw, 16px);
  letter-spacing: 1px;
}

.vkb-key--done:active {
  background: #c00;
}

/* Bottom bar: two buttons side by side */
.kembali-bar--row {
  display: flex;
  flex-direction: row;
  gap: clamp(8px, 2cqw, 14px);
}

.btn-kembali--half {
  flex: 1;
}

.btn-lanjut {
  flex: 2;
  padding: clamp(10px, 2.5cqw, 16px);
  background: var(--page-red-gradient);
  border: none;
  border-radius: clamp(8px, 2cqw, 14px);
  font-family: var(--font-body, sans-serif);
  font-size: clamp(12px, 3cqw, 20px);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: opacity 0.15s;
  opacity: 0.35;
  pointer-events: none;
}

.btn-lanjut.is-active {
  opacity: 1;
  pointer-events: auto;
}

.btn-lanjut:active { opacity: 0.75; }


/* ═══════════════════════════════════════════════════
   THANK YOU PAGE
════════════════════════════════════════════════════ */
.thankyou-page {
  background: url('../assets/bg/BG1-red.jpg') center / cover no-repeat;
}

.thankyou-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: clamp(8px, 2cqw, 16px) clamp(54px, 13.5cqw, 173px) clamp(20px, 5cqw, 36px);
  gap: clamp(14px, 3.5cqw, 24px);
}

/* Headline */
.thankyou-title {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(19px, 4.9cqw, 38px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--page-text);
  text-align: left;
}

/* Keychain promo pill */
.thankyou-keychain-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(11px, 2.8cqw, 22px);
  font-weight: 400;
  color: var(--page-text);
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid var(--page-red);
  border-radius: clamp(20px, 6cqw, 48px);
  padding: clamp(10px, 2.5cqw, 20px) clamp(16px, 4cqw, 32px);
  white-space: nowrap;
}

.thankyou-keychain-highlight {
  color: var(--page-red);
  font-weight: 700;
  margin-left: 0.3em;
}

.thankyou-title strong {
  font-weight: 700;
}

/* Card + mascot wrapper */
.thankyou-card-wrap {
  position: relative;
  width: 80%;
  align-self: center;
  margin: auto 0;
}

/* White card with red border glow */
.thankyou-card {
  width: 100%;
  background: #fff;
  border: 1.5px solid rgba(227, 6, 19, 0.25);
  border-radius: clamp(16px, 4cqw, 28px);
  box-shadow:
    0 0 0 3px rgba(227, 6, 19, 0.07),
    0 4px 24px rgba(227, 6, 19, 0.08);
  padding: clamp(8px, 6cqw, 48px) clamp(20px, 5cqw, 36px) clamp(20px, 15cqw, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.5cqw, 18px);
  text-align: center;
}

.thankyou-card-label {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(9px, 2.8cqw, 16px);
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--page-red);
  text-transform: uppercase;
}

.thankyou-card-sub {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(12px, 3cqw, 18px);
  color: var(--page-text);
  line-height: 1.5;
}

/* QR box */
.thankyou-qr-box {
  width: clamp(80px, 30.4cqw, 437px);
  aspect-ratio: 1;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.thankyou-qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thankyou-qr-placeholder {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(14px, 3.5cqw, 24px);
  font-weight: 700;
  color: rgba(0,0,0,0.2);
  letter-spacing: 2px;
}

/* Mascot — center-x at right edge, 2/3-y at bottom edge of card-wrap */
.thankyou-mascot {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 40%);
  width: clamp(135px, 45cqw, 240px);
  pointer-events: none;
}

.thankyou-mascot .title-mascot-placeholder {
  width: clamp(80px, 26cqw, 140px);
  height: clamp(80px, 26cqw, 140px);
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: clamp(2px, 0.5cqw, 13px) dashed rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(32px, 10cqw, 64px);
}

.thankyou-mascot img {
  width: 100%;
  object-fit: contain;
}

/* Reset button — pill, white fill, red text + icon */
.thankyou-reset-btn {
  align-self: stretch;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8cqw 0.8cqw 0.8cqw clamp(20px, 5cqw, 32px);
  background: var(--page-red-gradient);
  border: none;
  border-radius: clamp(40px, 12cqw, 80px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.thankyou-reset-btn:active { opacity: 0.75; }

.thankyou-reset-btn-text {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(14px, 3.5cqw, 22px);
  font-weight: 700;
  color: var(--page-card-bg);
  flex: 1;
  text-align: center;
}

.thankyou-reset-btn-icon {
  width: clamp(28px, 8cqw, 48px);
  height: clamp(28px, 8cqw, 48px);
  border-radius: 50%;
  background: var(--page-card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.thankyou-reset-btn-icon img {
  width: 55%;
  filter: brightness(0) saturate(100%) invert(11%) sepia(100%) saturate(7490%) hue-rotate(3deg) brightness(103%) contrast(115%);
}

/* Bottom CTA bar — matches .page-cta-bar bottom spacing */
.thankyou-cta-bar {
  width: 100%;
  padding: clamp(12px, 3cqw, 40px) clamp(54px, 13.5cqw, 173px) clamp(90px, 34cqw, 472px);
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2cqw, 12px);
}

/* Auto-reset countdown */
.thankyou-auto {
  align-self: center;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(10px, 2.5cqw, 26px);
  font-weight: 400;
  color: var(--page-text);
  text-align: center;
}