/* Marker strokes, confident colour blocks and annotations over charcoal and cyan. */
.ink-highlight {
  --highlight: #087f91;
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding: 0 .12em .02em;
  margin-inline: -.02em;
  white-space: nowrap;
}
.ink-highlight-cyan { --highlight: #087f91; }
.ink-highlight-red { --highlight: #C4364B; }
.ink-highlight-yellow { --highlight: #f3d466; }
.highlight-swash {
  position: absolute;
  z-index: -1;
  inset: .05em -.015em .005em;
  background: var(--highlight);
  clip-path: polygon(1% 7%, 35% 0, 73% 4%, 99% 1%, 98% 92%, 58% 100%, 24% 96%, 0 99%);
  transform: rotate(-2deg);
  transform-origin: left center;
}
.ink-highlight-yellow .highlight-swash { transform: rotate(.8deg); }
.highlight-copy { color: #ffffff; position: relative; }
.ink-highlight-yellow .highlight-copy { color: #30270d; }
.ink-underline {
  background: linear-gradient(#2ab7cc, #2ab7cc) left 95% / 100% 3px no-repeat;
  padding-bottom: .06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ink-underline-small {
  color: #e4edf2;
  background-size: 100% 2px;
  background-position: left 100%;
}
.motion-heading-line {
  /* Leave a little room for the angled strokes at either edge. */
  padding-inline: .07em;
  margin-inline: -.07em;
}
.annotation-arrow {
  width: 57px;
  height: 35px;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: #82cbd3;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stage-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
}
.phone-caption { gap: 5px; font-size: 13px; font-style: italic; }
/* A second phone silhouette sits behind each interactive device. */
.sample-phone::before,
.phone-frame::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, #29474e, #192d34 65%, #13232a);
  opacity: .4;
  box-shadow: 0 16px 30px #0005, inset 0 0 0 3px #36555c66;
  transform: translate(13px, 7px) rotate(-5deg);
  transform-origin: center;
  pointer-events: none;
}
@media (max-width: 600px) {
  .sample-phone::before,
  .phone-frame::before { transform: translate(7px, 5px) rotate(-3deg); }
}

@media (max-width: 600px) {
  .stage-caption, .phone-caption { font-size: 12px; gap: 1px; }
  .annotation-arrow { width: 39px; height: 30px; }
}

/* Surface separation comes from colour and space, not fine outlines. */
.site-header,
.quiz-card,
.quiz-top,
.quiz-bottom,
.feature,
.step,
.occasion-strip,
.features-section,
.waitlist-section,
.signup-panel,
.retention-card,
.prompt-example,
.game-options button,
.pack-stack > span,
.format-pills > span,
.answer,
.answer > .answer-tab,
.site-footer .footer-bottom {
  border: 0;
}

.button { border: 0; box-shadow: 0 4px 12px #0003; }
.button:hover { box-shadow: 0 7px 20px #0004; }
.brand-mark { border: 0; box-shadow: 0 6px 14px #0004; }
.signup-panel input[type=email] { border: 0; box-shadow: none; }
.menu-toggle { border: 0; background: #30363b; }
.quiz-top { padding-bottom: 10px; }
.quiz-bottom { padding-top: 10px; }
.quiz-card { background: #222628; box-shadow: 0 25px 60px #0006; }
.answer { background: #171b1e; box-shadow: none; }
.answer:hover:not(:disabled) { background: #30383b; box-shadow: none; }
.answer.is-correct { background: #1c4439; box-shadow: none; }
.answer.is-wrong { background: #41272d; box-shadow: none; }
.answer:active:not(:disabled) { box-shadow: none; }
.signup-panel { background: #24292a; box-shadow: 0 20px 55px #0004; }
.retention-card {
  background: #22262b;
  box-shadow: 0 16px 40px #0005;
}
.retention-label { color: #b1c6cf; }
.retention-note { color: #b7c8cf; }
.retention-bars i { background: linear-gradient(#76d4df, #087f91); box-shadow: none; }
.retention-bars i:last-child { background: #f3d466; }

/* Fade the entire glow at its boundary, including the near edge of its box. */
.hero-stage::before,
.phone-stage::before {
  inset: -25px -8px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, #0480904d, #0480901c 38%, transparent 70%);
  mask-image: radial-gradient(ellipse closest-side, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 25%, transparent 100%);
  filter: blur(18px);
  pointer-events: none;
}
.stage-label {
  width: fit-content;
  max-width: none;
  margin-left: 0;
  margin-bottom: 19px;
  padding: 7px 11px;
  background: #f3d466;
  color: #202a22;
  font-size: 11px;
  letter-spacing: .045em;
  transform: rotate(-2deg);
  clip-path: polygon(1% 5%, 100% 0, 99% 94%, 0 100%);
}
.annotation-arrow { stroke-width: 2.5; stroke: #82cbd3; }
.stage-caption, .phone-caption {
  font-family: 'Segoe Print', 'Bradley Hand', cursive;
  color: #d2dce2;
  font-size: 14px;
}
.hero-actions .button {
  border: 0;
  border-radius: 5px;
  padding-inline: 28px;
  min-height: 58px;
  box-shadow: 4px 5px 0 #10262c;
}
.hero-actions .button:hover { box-shadow: 6px 8px 0 #10262c; }

/* A quiet dark strip lets the heading highlights carry the colour. */
.occasion-strip {
  background: #11121455;
  margin-block: 12px;
  transform: skewY(-.65deg);
  transform-origin: center;
}
.occasion-strip::before { content: none; }
.occasion-strip .container { padding-block: 27px; }
.occasion-strip p { color: #d0d6de; font-weight: 600; font-size: clamp(16px, 1.7vw, 19px); }
.occasion-strip i { color: #2ab7cc; font-size: 23px; }

.step-top { margin-bottom: 20px; }
.step-number {
  color: #2ab7cc;
  font-size: 62px;
  line-height: 1;
  letter-spacing: -.08em;
  font-weight: 800;
  transform: rotate(-4deg);
}
.step:nth-child(2) .step-number { color: #2ab7cc; transform: rotate(3deg); }
.step:nth-child(3) .step-number { color: #2ab7cc; }
.step-symbol,
.step:nth-child(2) .step-symbol,
.step:nth-child(3) .step-symbol {
  border: 0;
  background: transparent;
  box-shadow: none;
  width: 56px;
  height: 56px;
  font-size: 37px;
}
.feature {
  background: #252a2b;
  box-shadow: 0 18px 32px #0003;
  border-radius: 14px;
}
.feature:hover { box-shadow: 0 24px 40px #0004; }
.feature-label {
  display: inline-block;
  width: fit-content;
  padding: 5px 9px;
  background: #e9ddba;
  color: #27332c;
  font-size: 11px;
  transform: rotate(-2deg);
  clip-path: polygon(1% 6%, 98% 0, 100% 95%, 0 100%);
}
.feature-packs { background: #252a2b; color: #f7f7fb; }
.feature-packs .feature-top { color: #2ab7cc; }
.feature-packs .feature-label { background: #087f91; color: #ffffff; }
.feature-packs h3 { font-size: 39px; }
.feature-packs p { color: #b7bbc2; }
.feature-packs .ink-underline-small { color: #e4e8ed; background-image: linear-gradient(#2ab7cc, #2ab7cc); }
.feature-packs .pack-stack > span {
  border: 0;
  background: linear-gradient(145deg, #272b30, #151719);
  color: #e4e8ed;
  border-radius: 5px;
  box-shadow: 3px 5px 12px #0005;
}


.feature-questions .feature-label { background: #f3d466; }
.format-pills span,
.format-pills span:nth-child(2n) {
  border: 0;
  background: #131518;
  color: #c4ceda;
  border-radius: 5px;
  padding: 11px 18px;
  box-shadow: 2px 3px 0 #10121466;
}

.format-pills span:nth-child(1) { background: #C4364B; color: #fff; }
.format-pills span:nth-child(2) { background: #306DB4; color: #fff; }
.format-pills span:nth-child(3) { background: #A55A00; color: #fff; }
.format-pills span:nth-child(4) { background: #187A58; color: #fff; }
.format-pills span:last-child { background: #087f91; color: #fff; border: 0; }
.feature-ai .feature-label { background: #087f91; color: #ffffff; }
.prompt-example { background: #101214; box-shadow: none; }
.game-options button { background: #282e33; box-shadow: none; }
.game-options button[aria-pressed=true] { border: 0; background: #063f48; color: #b7f0f7; box-shadow: 3px 4px 0 #10262c; }

@media (max-width: 600px) {
  .stage-label { font-size: 9px; padding: 6px 8px; }
  .stage-caption, .phone-caption { font-size: 12px; }
  .occasion-strip p { font-size: 16px; gap: 8px 12px; }
  .occasion-strip i { font-size: 20px; }
  .step-number { font-size: 51px; }
  .feature-packs h3 { font-size: 33px; }
}

/* A real, playable quiz in a device frame; the stickers stay outside the controls. */
.sample-phone {
  position: relative;
  width: min(390px, 100%);
  margin-inline: auto;
  padding: 9px;
  border-radius: 45px;
  background: linear-gradient(135deg, #54595e, #101214 28%, #353a3e 80%, #60666b);
  box-shadow: 0 0 0 3px #090b0d, 0 30px 60px #0008;
}
.sample-phone .quiz-card {
  transform: none;
  border-radius: 36px;
  padding: 46px 22px 34px;
  background: #202428;
  box-shadow: none;
}
.sample-notch {
  position: absolute;
  z-index: 3;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 22px;
  background: #07090a;
  border-radius: 20px;
  pointer-events: none;
}
.sample-home {
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 94px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: #ffffff60;
  pointer-events: none;
}
.sample-phone .quiz-top { gap: 8px; flex-wrap: wrap; }
.sample-phone .demo-label { font-size: 10px; }
.sample-phone .quiz-card h2 { font-size: 30px; min-height: 102px; }
.sample-phone .question-hint { font-size: 12px; }
.sample-phone .quiz-bottom { flex-wrap: wrap; gap: 8px; }
.sample-phone .quiz-bottom button { font-size: 12px; padding: 8px 0; color: #fff; }
.sample-phone .demo-feedback { min-height: 90px; font-size: 12px; color: #fff; }
.sample-answer-area { position: relative; }
.sample-pointer {
  position: absolute;
  z-index: 4;
  right: -100px;
  bottom: -66px;
  width: 190px;
  height: auto;
  transform: none;
  filter: drop-shadow(3px 5px 0 #0005);
  pointer-events: none;
  transition: opacity .25s, translate .25s;
}
.sample-phone.has-played .sample-pointer { opacity: 0; translate: 8px 8px; }
.ink-highlight-ai { --highlight: #c81c72; }
.ai-sticker-group { display: inline-flex; align-items: center; vertical-align: middle; position: relative; white-space: nowrap; gap: 9px; }
.robot-sticker {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: auto;
  margin-block: 5px;
  transform: rotate(10deg);
  filter: drop-shadow(2px 3px 0 #0005);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .sample-phone:not(.has-played) .sample-pointer { animation: sample-pointer-float 3.8s ease-in-out infinite; }
  .sample-phone:not(.has-played) .play-cue-arrow { animation: play-arrow-bob 1.5s ease-in-out infinite; }
  .robot-sticker { transition: transform .45s var(--motion-ease); }
  .feature-ai:hover .robot-sticker { transform: translateY(-5px) rotate(-8deg); }
  .feature-ai:hover .highlight-swash { animation: ai-marker-pop .5s ease-out; }
}
@keyframes sample-pointer-float {
  0%, 100% { opacity: 0; translate: 16px 12px; }
  22%, 60% { opacity: 1; translate: 0 0; }
  75% { opacity: 1; translate: -4px -5px; }
}
@keyframes play-arrow-bob {
  0%, 100% { translate: 0 -2px; }
  50% { translate: 0 4px; }
}
.play-cue-arrow { display: inline-block; margin-left: 4px; }
@keyframes ai-marker-pop { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@media (max-width: 600px) {
  .sample-phone { width: min(370px, calc(100% - 18px)); }
  .sample-phone .quiz-card { padding-inline: 17px; }
  .sample-phone .quiz-card h2 { font-size: 28px; }
  .sample-pointer { width: 160px; right: -72px; bottom: -56px; }
}

/* Quiz packs echo the live game's coloured letter tabs and dark answer rows. */
.feature-packs .pack-stack > span {
  display: flex;
  align-items: stretch;
  padding: 0;
  min-height: 50px;
  overflow: hidden;
  background: #18191d;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 7px 16px #0004;
}
.pack-stack .pack-tab { display: grid; place-items: center; flex: 0 0 43px; color: white; font-size: 20px; font-weight: 700; background: #C4364B; }
.pack-stack > span:nth-child(2) .pack-tab { background: #306DB4; }
.pack-stack > span:nth-child(3) .pack-tab { background: #187A58; }
.pack-stack .pack-title { flex: 1; text-align: left; justify-content: flex-start; display: flex; align-items: center; padding: 12px 14px; color: #f7f8fb; font-size: 12px; font-weight: 600; }

/* A resting tilt that settles into place, like the reference's editorial card. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .feature-reports {
    rotate: 2.5deg;
    transform-origin: center;
    transition: rotate .55s var(--motion-ease), transform .55s var(--motion-ease), box-shadow .4s ease;
  }
  .feature-reports:hover,
  .feature-reports:focus-within {
    rotate: 0deg;
    transform: translateY(-3px);
  }
}

/* The play label stays attached to the phone; retention belongs with the copy. */
.hero-stage { padding-top: 32px; }
.sample-phone > .stage-label {
  position: absolute;
  z-index: 4;
  top: -17px;
  left: -12px;
  margin: 0;
  max-width: none;
}
.hero-copy > .retention-card {
  position: relative;
  inset: auto;
  display: block;
  width: 156px;
  padding: 0;
  margin: 0 0 16px -8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}
.hero-copy > .retention-card::before,
.hero-copy > .retention-card::after { content: none; }
.retention-note-art { display: block; width: 100%; height: auto; }
@media (max-width: 600px) {
  .hero-stage { padding-top: 30px; }
  .sample-phone > .stage-label { left: -5px; top: -14px; font-size: 9px; }
  .hero-copy > .retention-card { width: 128px; margin-bottom: 16px; }
}

/* Game choices are an invitation to play, with raised surfaces and clear states. */
.game-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.game-options button {
  --game-colour: #087f91;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 80px;
  padding: 15px 17px;
  border: 0;
  border-radius: 10px;
  background: var(--game-colour);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 0 #090d10, 0 10px 20px #0003;
}
.game-options button[data-game=orb] { --game-colour: #b72f4b; }
.game-options button[data-game=mole] { --game-colour: #965100; }
.game-options button[data-game=pong] { --game-colour: #306DB4; }
.game-options button[data-game=meltdown] { --game-colour: #187A58; }
.game-options button:last-child { grid-column: 1 / -1; }
.game-options button > .game-choice-copy { display: grid; gap: 5px; transform: none; }
.game-choice-copy small { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.game-choice-copy strong { font-size: 16px; font-weight: 750; line-height: 1.15; }
.game-choice-play { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #ffffff20; flex: 0 0 auto; }
.game-options button[aria-pressed=true] {
  background: var(--game-colour);
  color: #fff;
  box-shadow: 0 5px 0 #090d10, 0 10px 20px #0003;
}
.game-options button[aria-pressed=true] .game-choice-play { background: #fff; color: var(--game-colour); }
.game-options button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .game-options button { transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
  .game-options button:hover { transform: translateY(-4px); filter: brightness(1.13); }
  .game-options button:active { transform: translateY(2px); }
}
@media (max-width: 600px) {
  .game-options { gap: 12px; }
  .game-options button { min-height: 78px; padding: 13px 12px; gap: 6px; }
  .game-choice-copy strong { font-size: 14px; }
  .game-choice-play { width: 28px; height: 28px; padding: 5px; }
}

/* Put the invitation beside the action, inside the playable quiz. */
.sample-phone > .stage-label {
  font-size: 14px;
  letter-spacing: .025em;
  padding: 10px 16px;
  top: -24px;
}
.sample-phone .question-hint {
  color: #83e3ec;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}
.sample-phone .answer:not(:disabled) { cursor: pointer; }
.sample-phone .answer[hidden], .demo-question-image[hidden] { display: none; }
.demo-question-image { display: block; width: 100%; height: 116px; object-fit: cover; border-radius: 7px; margin: 0 0 12px; }
.sample-phone .quiz-card.has-question-image h2 { min-height: 0; font-size: 26px; margin-bottom: 14px; }
.sample-phone .quiz-card.has-question-image .question-hint { margin-top: 0; }
/* Reserve the same space for every format, including the two-choice round. */
.sample-phone { height: 700px; }
.sample-phone .quiz-card {
  height: 100%;
  display: grid;
  grid-template-rows: 24px 20px minmax(0, 1fr) 20px 218px 76px 32px;
  gap: 8px;
  padding-top: 46px;
  padding-bottom: 28px;
}
.sample-phone .quiz-top { padding: 0; }
.sample-phone .question-meta { margin: 0; }
.sample-question-content { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.sample-phone .sample-question-content h2,
.sample-phone .quiz-card.has-question-image h2 { min-height: 0; margin: 0; }
.sample-question-content .demo-question-image { height: 100px; min-height: 0; flex: 0 1 100px; margin: 0; }
.sample-phone .question-hint { margin: 0; line-height: 20px; }
.sample-phone .sample-answer-area { min-height: 0; }
.sample-phone .answers { height: 100%; grid-auto-rows: 48px; gap: 8px; align-content: center; }
.sample-phone .answer { min-height: 48px; }
.sample-phone .demo-feedback { min-height: 0; padding: 0; }
.sample-phone .quiz-bottom { margin: 0; padding: 0; align-items: center; }
@media (max-width: 380px) {
  .sample-phone .question-hint { font-size: 12px; }
  .sample-phone .sample-question-content h2 { font-size: 25px; }
  .sample-phone .quiz-bottom { font-size: 8px; gap: 4px; }
}
.sample-phone .answer:hover:not(:disabled) {
  background: #17414b;
  box-shadow: 0 5px 12px #0004;
}
@media (prefers-reduced-motion: no-preference) {
  .sample-phone .answer:hover:not(:disabled) { transform: translateX(3px); }
}
@media (max-width: 600px) {
  .sample-phone > .stage-label { font-size: 12px; padding: 9px 13px; top: -21px; }
  .sample-phone .question-hint { font-size: 13px; }
}

.occasion-strip p > span { white-space: nowrap; }
.occasion-strip .occasion-repeat,
.occasion-strip .occasion-end-star { display: none; }
.occasion-strip.is-scroll-strip { overflow: hidden; }
.occasion-strip.is-scroll-strip .container { display: block; width: 100%; max-width: none; }
.occasion-strip.is-scroll-strip .occasion-track { display: flex; width: max-content; }
.occasion-strip.is-scroll-strip .occasion-track p {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: max-content;
  min-width: 100vw;
  max-width: none;
  gap: clamp(30px, 4vw, 72px);
  padding-inline: 24px;
  margin: 0;
}
.occasion-strip.is-scroll-strip .occasion-track p > i { display: block; flex-shrink: 0; }
@media (max-width: 1100px) {
  .occasion-strip p { flex-wrap: wrap; justify-content: center; gap: 14px 22px; max-width: none; }
  .occasion-strip p > i { display: none; }
}

.feature-packs .pack-stack > span { justify-content: flex-start; }
.pack-count-highlight { padding: .08em .3em .12em; margin-right: .08em; font-weight: 700; }

/* A useful closing section, with the same charcoal surfaces and cyan accents. */
.site-footer {
  display: block;
  padding-block: 64px 24px;
  background: #191d1e;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.footer-intro .brand { font-size: 30px; }
.footer-intro > p { max-width: 340px; color: var(--muted); font-size: 14px; line-height: 1.7; margin: 16px 0 0; }
.footer-intro > .footer-tagline { color: #f6f6f8; font-size: 24px; font-weight: 750; line-height: 1.25; margin-top: 24px; }
.site-footer .footer-links { display: flex; flex-direction: column; margin: 0; gap: 0; font-size: 15px; }
.footer-links h2 { margin: 0 0 18px; color: #2ab7cc; font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.footer-links a { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 46px; padding: 10px 14px; margin-bottom: 8px; border-radius: 6px; background: #23292b; color: #f6f6f8; font-weight: 600; text-decoration: none; }
.footer-links a > span { color: #2ab7cc; }
.footer-links a:hover { background: #2b3437; }
.site-footer a:focus-visible { outline: 2px solid #60dcea; outline-offset: 5px; }
.site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(var(--container), calc(100% - 96px)); margin: 40px auto 0; padding-top: 0; font-size: 12px; }
.footer-bottom a { color: #f6f6f8; text-decoration: none; padding-block: 10px; }
.footer-bottom a > span { margin-left: 8px; color: #2ab7cc; }
@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer .footer-bottom { width: calc(100% - 64px); }
  .footer-intro { grid-column: 1 / -1; }
  .footer-intro > p { max-width: 460px; }
}
@media (max-width: 600px) {
  .site-footer { padding-block: 40px 20px; }
  .site-footer .footer-bottom { width: calc(100% - 40px); }
  .footer-main { gap: 30px 20px; }
  .site-footer .footer-links { font-size: 13px; }
  .footer-links a { padding-inline: 10px; gap: 8px; }
}
@media (max-width: 380px) {
  .footer-main { grid-template-columns: 1fr; }
}

/* Bring the invitation and playable answers into view sooner. */
.hero { padding-block: 36px 48px; align-items: start; }
.hero-copy { padding-top: 24px; }
.hero h1 { margin-block: 18px 20px; }
.hero-actions { margin-top: 22px; }
.audience-note { margin-top: 24px; }
.hero-stage { padding-top: 24px; }

/* Secondary copy should remain comfortable to read on charcoal surfaces. */
.hero-note { color: #bdc5ce; font-size: 13px; }
.sample-phone .question-meta { color: #c0cbd6; font-size: 11px; }
.sample-phone .quiz-bottom { color: #bdc8d3; font-size: 11px; }
.sample-phone .demo-feedback { font-size: 13px; }
.signup-panel > p, .signup-panel label, .signup-panel form > p { font-size: 14px; }
.report-preview > span { color: #c0cbd3; font-size: 12px; }
.report-preview > div, .report-preview b { font-size: 13px; }
.game-info .game-count, .game-choice-copy small { font-size: 12px; }
.site-footer .footer-bottom { color: #bdc5ce; font-size: 13px; }

@media (max-width: 900px) {
  .hero { gap: 28px; }
  .hero-copy { max-width: 580px; padding-top: 0; }
}
@media (max-width: 600px) {
  .hero { padding-block: 24px 36px; }
  .hero .eyebrow { font-size: 11px; }
  .hero h1 { margin-block: 16px 20px; }
  .hero-note { max-width: none; }
  .sample-phone .quiz-bottom { gap: 6px; }
  .sample-pointer { width: 120px; right: -30px; bottom: -45px; }
}
@media (max-width: 380px) {
  .sample-phone { height: 740px; }
  .sample-phone .quiz-card { grid-template-rows: 24px 20px minmax(0, 1fr) 40px 218px 90px 44px; }
  .sample-phone .quiz-bottom { font-size: 10px; }
}