/* pages-quiz.css — Quiz card carousel (quiz1/quiz3), quiz2 heart grid, large-format kiosk scaling for quiz */

/* ═══════════════════════════════════════════════════
   QUIZ PAGES (quiz1 / quiz3 — card carousel)
════════════════════════════════════════════════════ */
.quiz-page {
  background: var(--page-bg);
  justify-content: flex-start;
  /* Do NOT set overflow:hidden here — cards must be able to drag up past the track boundary */
}

#page-quiz1,
#page-quiz3 {
  background: url('../assets/bg/BG5.jpg') center -40% / 110% auto no-repeat;
}

#page-quiz2 {
  background: url('../assets/bg/BG5.jpg') center calc(50% - 5cqw) / cover no-repeat;
}

/* Quiz1 & quiz3 bottom padding */
.quiz-page .page-cta-bar {
  padding-bottom: clamp(44px, 18cqw, 512px);
}

/* Quiz2 & hobby bottom padding */
.quiz2-page .page-cta-bar {
  padding-bottom: clamp(48px, 22cqw, 563px);
}

/* Question block */
.quiz-question-block {
  width: 100%;
  padding: clamp(8px, 2cqw, 51px) clamp(24px, 6cqw, 154px) 0;
  flex-shrink: 0;
  text-align: center;
}

.quiz-question-text {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(15px, 3.6cqw, 28px);
  font-weight: 350;
  color: var(--page-text);
  line-height: 1.4;
}

.quiz-question-text strong {
  font-size: clamp(16px, 4.2cqw, 32px);
  font-weight: 700;
  line-height: 1.2;
}

/* Red bold — larger emphasis, matches story-intro2-highlight style */
.quiz-question-text .quiz-question-highlight {
  color: var(--page-red);
}

/* Inline bold at same font-size as surrounding text — no size bump */
.quiz-question-text .quiz-question-bold {
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}

.quiz-question-sub {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(11px, 2.6cqw, 67px);
  font-weight: 400;
  color: var(--page-muted);
  margin-top: clamp(4px, 1cqw, 26px);
  padding-top: clamp(8px, 2cqw, 51px);
}

/* Blink red 3× when user hits the selection cap */
@keyframes quiz-sub-overlimit {
  0%,  24%, 58%, 100% { color: var(--page-muted); }
  8%,  41%, 75%        { color: var(--page-red);   }
}
.quiz-question-sub--overlimit {
  animation: quiz-sub-overlimit 1.2s ease both;
}

/* Drop zone — horizontally aligned to the berikutnya button (same side padding as .page-cta-bar) */
.quiz-dropzone {
  width: calc(100% - 2 * clamp(54px, 13.5cqw, 346px));
  height: clamp(74px, 18cqw, 460px);
  margin: clamp(8px, 2cqw, 51px) auto 0;
  border: clamp(2px, 0.5cqw, 13px) dashed rgba(0,0,0,0.18);
  border-radius: clamp(12px, 3cqw, 77px);
  background: transparent;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1cqw, 26px);
  padding: clamp(6px, 1.5cqw, 38px);
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}

.quiz-dropzone--armed {
  border-color: var(--page-red);
  background: rgba(255, 0, 0, 0.04);
}

@keyframes quiz-dropzone-overlimit {
  0%,  24%, 58%, 100% { border-color: rgba(0,0,0,0.18);  background: transparent; }
  8%,  41%, 75%        { border-color: var(--page-red);   background: rgba(227,6,19,0.08); }
}

.quiz-dropzone--overlimit {
  animation: quiz-dropzone-overlimit 1.2s ease both;
  transition: none;
}

.quiz-dropzone-hint {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(10px, 2.4cqw, 61px);
  font-weight: 600;
  color: rgba(0,0,0,0.25);
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
}

/* Collected mini-cards in the drop zone */
.quiz-collected-card {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: clamp(52px, 13cqw, 333px);
  height: 100%;
  border-radius: clamp(6px, 1.5cqw, 38px);
  background: var(--page-card-bg);
  border: 1.5px solid rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 1cqw, 26px);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
  animation: quiz-pop-in 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  flex-shrink: 1;
  -webkit-tap-highlight-color: transparent;
}

.quiz-collected-card-img {
  width: 100%;
  flex: 1;
  border-radius: clamp(4px, 1cqw, 26px);
  background: var(--page-red-gradient);
  margin-bottom: clamp(3px, 0.8cqw, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.quiz-collected-card-icon {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
}

.quiz-collected-card-label {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(7px, 1.7cqw, 44px);
  font-weight: 600;
  color: var(--page-text);
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.quiz-collected-card-remove {
  position: absolute;
  top: clamp(-6px, -1.5cqw, -38px);
  right: clamp(-6px, -1.5cqw, -38px);
  width: clamp(16px, 4cqw, 102px);
  height: clamp(16px, 4cqw, 102px);
  border-radius: 50%;
  background: var(--page-red-gradient);
  color: #fff;
  font-size: clamp(9px, 2.2cqw, 56px);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

@keyframes quiz-pop-in {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* Swipe hint text */
.quiz-swipe-hint {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(10px, 2.4cqw, 61px);
  font-weight: 400;
  color: var(--page-muted);
  text-align: center;
  line-height: 1.4;
  margin: clamp(6px, 1.5cqw, 38px) 0 0;
  flex-shrink: 0;
  padding: 0 clamp(16px, 4cqw, 102px);
}

/* Card track area */
.quiz-track-wrap {
  flex: 1;
  width: 100%;
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  /* overflow must be visible so dragged cards can travel up into the drop zone */
  overflow: visible;
  /* z-index above the dropzone so dragged cards appear on top when pulled upward */
  z-index: 10;
}


.quiz-track {
  position: absolute;
  inset: 0;
}

/* Nav arrows — injected by JS into .quiz-track-wrap */
/* Carousel mode: arrows float at card mid-height.
   Grid mode: arrows are vertically centred inside the track-wrap. */
@keyframes arrow-pulse {
  0%, 100% { opacity: 1;   transform: translateY(-50%) scale(1);    }
  50%       { opacity: 0.7; transform: translateY(-50%) scale(0.92); }
}

.quiz-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(53px, 13.2cqw, 106px);
  height: clamp(53px, 13.2cqw, 106px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* carousel default; grid JS overrides to auto */
  z-index: 20;
  cursor: pointer;
  /* animation: arrow-pulse 1.6s ease-in-out infinite; */  /* ← uncomment to re-enable pulse */
  -webkit-tap-highlight-color: transparent;
}
.quiz-nav-arrow--prev {
  left: clamp(6px, 1.5cqw, 20px);
  /* animation-delay: 0s; */
}
.quiz-nav-arrow--next {
  right: clamp(6px, 1.5cqw, 20px);
  /* animation-delay: 0.8s; */
}
.quiz-nav-arrow:active { /* animation: none; */ opacity: 0.75; }
.quiz-nav-arrow--disabled {
  pointer-events: none !important;
  opacity: 0.3;
}

/* Circle button: white outer ring + red filled inner circle */
.quiz-nav-arrow__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--page-red);
  border: clamp(5px, 1.5cqw, 14px) solid #fff;
  box-shadow: 0 0 0 clamp(3px, 0.7cqw, 7px) var(--page-red), 0 2px 12px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Arrow SVG inside the circle */
.quiz-nav-arrow__svg {
  width: 65%;
  height: auto;
  display: block;
}

/* Flip prev arrow to point left */
.quiz-nav-arrow__svg--flip {
  transform: scaleX(-1);
}

/* quiz1 & quiz3: nav arrows scaled down to 70% */
#page-quiz1 .quiz-nav-arrow,
#page-quiz3 .quiz-nav-arrow {
  transform: translateY(-35%) scale(0.7);
  transform-origin: center top;
}

/* ── Grid mode: 3×2 card grid with pagination ────────────────────────── */
.quiz-track--grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(12px, 3cqw, 77px);
  padding: clamp(12px, 3cqw, 77px) clamp(32px, 8cqw, 205px); /* side padding matches quiz-question-block */
  box-sizing: border-box;
}

/* Peek overlay — sits inside quiz-track-wrap, pointer-events:none.
   Peek cards are sized and positioned by JS to exactly match the rendered grid cards. */
.quiz-peek-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.quiz-peek-card {
  position: absolute;
  border-radius: clamp(10px, 2.5cqw, 64px);
  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);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1px, 0.2cqw, 5px);
  overflow: hidden;
  opacity: 0.5;
}

/* Top row clamps to bottom; bottom row clamps to top — keeps gap consistent */
.quiz-track--grid .quiz-grid-card:nth-child(-n+3) { align-self: end; }
.quiz-track--grid .quiz-grid-card:nth-child(n+4)  { align-self: start; }

.quiz-grid-card {
  border-radius: clamp(10px, 2.5cqw, 64px);
  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);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1px, 0.2cqw, 5px);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.18s, transform 0.18s;
  will-change: transform;
}
.quiz-grid-card--empty {
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
}
.quiz-grid-card--dragging {
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  z-index: 20;
  cursor: grabbing;
  transition: box-shadow 0.18s; /* kill transform transition while dragging */
}

/* Image area at bottom of grid card — fixed size so icon doesn't stretch */
.quiz-grid-card .quiz-card-img {
  width: 100%;
  background: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: clamp(4px, 1cqw, 26px);
  margin-bottom: 2cqw;
}

.quiz-card-icon {
  width: clamp(32px, 12.8cqw, 328px);
  height: clamp(32px, 12.8cqw, 328px);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transform: scale(1.3);
}

/* Label at the top of each grid card */
.quiz-grid-card .quiz-card-label {
  flex-shrink: 0;
  padding: 0 clamp(6px, 1.5cqw, 38px);
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(8px, 2.4cqw, 50px);
  font-weight: 700;
  color: var(--page-text);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  overflow: visible;
}

/* Pagination dots */
.quiz-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(6px, 1.5cqw, 38px);
  padding: clamp(6px, 1.5cqw, 38px) 0 0;
  margin-bottom: 4cqw;
  flex-shrink: 0;
}
.quiz-dot {
  cursor: pointer;
  width: clamp(7px, 1.8cqw, 46px);
  height: clamp(7px, 1.8cqw, 46px);
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  transition: background 0.2s, transform 0.2s;
}
.quiz-dot--active {
  background: var(--page-red);
  transform: scale(1.25);
}

/* Individual swipeable card */
.quiz-card {
  position: absolute;
  /* centred horizontally; vertical position set by JS */
  left: 50%;
  bottom: clamp(8px, 2cqw, 51px);
  width: clamp(140px, 42cqw, 1075px);
  height: clamp(180px, 54cqw, 1382px);
  border-radius: clamp(12px, 3cqw, 77px);
  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);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

.quiz-card-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.5cqw, 64px) clamp(10px, 2.5cqw, 64px) 0;
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(11px, 2.8cqw, 72px);
  font-weight: 700;
  color: var(--page-text);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

.quiz-card-img {
  flex-shrink: 0;
  margin: 0;
  padding-bottom: clamp(10px, 2.5cqw, 64px);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════
   QUIZ 2 — Heart Card Grid
════════════════════════════════════════════════════ */
.quiz2-page {
  background: var(--page-bg);
  justify-content: flex-start;
}

/* Arena: the heart + two card columns fill remaining space */
.quiz2-arena {
  flex: 1;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2cqw, 51px) clamp(12px, 3cqw, 77px);
  gap: 0;
  overflow: visible;  /* ropes must be able to draw outside padding bounds */
  min-height: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* SVG lines layer — fills arena exactly */
.quiz2-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Card columns */
.quiz2-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(8px, 2cqw, 51px);
  position: relative;
  z-index: 2;
}

.quiz2-col--left  { align-items: center; padding-left: clamp(4px, 1cqw, 26px); }
.quiz2-col--right { align-items: center; padding-right: clamp(4px, 1cqw, 26px); }

/* Individual lifestyle card */
.quiz2-card {
  width: clamp(80px, 24cqw, 360px);
  height: clamp(80px, 24cqw, 360px);
  flex-shrink: 0;
  align-self: center;
  border-radius: clamp(10px, 2.5cqw, 64px);
  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);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(8px, 2cqw, 51px) clamp(8px, 2cqw, 51px);
  cursor: pointer;
  transition: background 0.08s, border-color 0.08s, box-shadow 0.08s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  gap: clamp(4px, 1cqw, 8px);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.quiz2-card:active {
  transform: scale(0.96);
}

.quiz2-card--selected {
  background: var(--page-red-gradient);
  border-color: var(--page-red);
  box-shadow: 0 6px 20px rgba(227,6,19,0.28);
  transform: translateY(-2px);
}

/* Hover state while dragging a rope toward this card */
.quiz2-card--hover {
  border: clamp(2px, 0.5cqw, 13px) dashed #E30613;
  box-shadow: 0 6px 16px rgba(227,6,19,0.18);
}

/* .quiz2-card-emoji {
  font-size: clamp(22px, 6cqw, 44px);
  line-height: 1;
} */

.quiz2-card-img {
  width: clamp(58px, 15.84cqw, 262px);
  height: clamp(58px, 15.84cqw, 262px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: clamp(1px, 0.2cqw, 5px);
}

.quiz2-card-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.quiz2-card-label {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(8px, 2.16cqw, 56px);
  font-weight: 700;
  color: var(--page-text);
  line-height: 1.25;
  text-align: center;
}

.quiz2-card--selected .quiz2-card-label {
  color: #fff;
}

/* Heart in the centre */
.quiz2-heart-wrap {
  flex: 0 0 auto;
  width: clamp(115px, 32.4cqw, 830px);
  height: clamp(115px, 32.4cqw, 830px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

.quiz2-dna-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#dna-clip-rect {
  transition: y 0.2s ease, height 0.2s ease;
}

@keyframes quiz2-dna-overlimit {
  0%,  24%, 58%, 100% { opacity: 1; }
  8%,  41%, 75%        { opacity: 0; }
}

.quiz2-dna--overlimit {
  animation: quiz2-dna-overlimit 1.2s ease both;
}

/* Hint text */
.quiz2-hint {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(10px, 2.4cqw, 61px);
  font-weight: 400;
  color: var(--page-muted);
  text-align: center;
  line-height: 1.4;
  padding: 0 clamp(16px, 4cqw, 102px);
  flex-shrink: 0;
  margin-bottom: clamp(4px, 1cqw, 26px);
}

/* ── Large-format kiosk scaling (≥450px column width) ── */
@media (min-width: 450px) {
  .page-title-text      { font-size: clamp(36px, 8cqw, 160px); }

  .page-topbar-badge-num { font-size: clamp(36px, 9cqw, 120px); }
  .page-topbar-badge-text { font-size: clamp(9px, 2cqw, 28px); }
  .page-topbar-logo img  { height: clamp(36px, 8cqw, 100px); }

  .page-question-title  { font-size: clamp(26px, 6cqw, 110px); }

  .btn-back,
  .btn-next             { padding: clamp(12px, 2.5cqw, 52px) clamp(32px, 8cqw, 180px); font-size: clamp(16px, 3cqw, 66px); border-radius: clamp(8px, 1.5cqw, 32px); }

  .btn-berikutnya       { font-size: clamp(18px, 4cqw, 80px); padding: 0.8cqw 0.8cqw 0.8cqw clamp(24px, 6cqw, 120px); }
  .btn-berikutnya-arrow { width: 8cqw; height: 8cqw; }
  .btn-sebelumnya       { font-size: clamp(18px, 4cqw, 80px); padding: 0.8cqw clamp(24px, 6cqw, 120px) 0.8cqw 0.8cqw; }
  .btn-sebelumnya-arrow { width: 8cqw; height: 8cqw; }

  .gender-card          { font-size: clamp(20px, 5cqw, 100px); max-height: clamp(120px, 28cqw, 380px); }
  .gender-card .choice-icon { font-size: clamp(36px, 9cqw, 180px); }

  .age-card             { font-size: clamp(12px, 2.8cqw, 56px); min-height: calc(8cqw + 2 * 0.8cqw); padding: 0.8cqw clamp(8px, 2cqw, 40px); }
  .carplan-card         { font-size: clamp(14px, 3.2cqw, 64px); aspect-ratio: 1; }
  .carplan-card strong  { font-size: clamp(16px, 3.6cqw, 72px); }

  .title-headline       { font-size: clamp(34px, 8.6cqw, 124px); }

  .hobby-card           { font-size: 2.6cqw; height: 9.6cqw; padding: 0 2.5cqw; }
  .hobby-category-label { font-size: clamp(11px, 2.5cqw, 50px); }
  .hobby-scroll-arrow   { width: clamp(36px, 9cqw, 144px); height: clamp(36px, 9cqw, 144px); font-size: clamp(28px, 7cqw, 112px); }

  .quiz-question-text         { font-size: clamp(19px, 3.6cqw, 92px); }
  .quiz-question-text strong  { font-size: clamp(21px, 4.2cqw, 107px); }
  .quiz-question-sub          { font-size: clamp(14px, 3cqw, 77px); }

  .story-intro-text          { font-size: clamp(20px, 4cqw, 58px); }
  .story-intro2-text         { font-size: clamp(20px, 4cqw, 58px); }
  .story-narrative           { font-size: clamp(19px, 3.6cqw, 92px); }
  .story-narrative strong    { font-size: clamp(22px, 4.4cqw, 112px); }
  .thankyou-title       { font-size: clamp(24px, 4.9cqw, 70px); }
  .thankyou-keychain-pill { font-size: clamp(11px, 2.8cqw, 33px); border-radius: clamp(20px, 6cqw, 72px); padding: clamp(10px, 2.5cqw, 30px) clamp(16px, 4cqw, 48px); }

  .thankyou-body        { padding: clamp(8px, 2cqw, 16px) clamp(54px, 13.5cqw, 346px) clamp(20px, 5cqw, 36px); gap: clamp(14px, 3.5cqw, 40px); }
  .thankyou-card        { border-radius: clamp(16px, 4cqw, 56px); padding: clamp(8px, 6cqw, 96px) clamp(20px, 5cqw, 72px) clamp(20px, 15cqw, 240px); gap: clamp(10px, 2.5cqw, 36px); }
  .thankyou-card-label  { font-size: clamp(9px, 2.8cqw, 56px); }
  .thankyou-card-sub    { font-size: clamp(12px, 3cqw, 77px); }
  .thankyou-qr-box      { width: clamp(80px, 30.4cqw, 776px); }
  .thankyou-qr-placeholder { font-size: clamp(14px, 3.5cqw, 48px); }

  .thankyou-mascot      { width: clamp(135px, 45cqw, 600px); }

  .thankyou-cta-bar     { padding: clamp(12px, 3cqw, 40px) clamp(54px, 13.5cqw, 173px) clamp(90px, 34cqw, 472px); gap: clamp(8px, 2cqw, 24px); }
  .thankyou-reset-btn   { padding: 0.8cqw 0.8cqw 0.8cqw clamp(24px, 6cqw, 120px); border-radius: clamp(40px, 12cqw, 160px); }
  .thankyou-reset-btn-text { font-size: clamp(18px, 4cqw, 80px); }
  .thankyou-reset-btn-icon { width: 8cqw; height: 8cqw; }
  .thankyou-auto        { font-size: clamp(10px, 2.5cqw, 52px); }
}