/* Child-only presentation uses the shared homepage design tokens. */
.marketing-child-demo {
  --child-session-width: 900px;
  --child-frame-border: clamp(9px, 3.3cqw, 18px);
  --child-choice-border: 3px;
  --child-token-size: 32px;
  --child-picture-minimum: 120px;
  --child-prompt-size: 28px;
  --child-feedback-height: 3rem;
  --child-star-size: 72px;
  --child-star-outset: -24px;
  --child-star-stroke: 5;
  --child-caption-size: 14px;
  --child-lead-size: 20px;
}
.marketing-child-demo h2 { font-size: var(--child-prompt-size); font-weight: 600; line-height: 1.15; }
.marketing-child-demo .child-intro { background: var(--sky); }
.marketing-child-demo :is(h2,a)[id], .marketing-child-demo h2[tabindex] { scroll-margin-top: var(--header-clearance); }
.marketing-child-demo .child-device-stage { max-width: var(--child-session-width); margin-inline: auto; container-type: inline-size; }
.marketing-child-demo .child-lead { max-width: var(--copy-width); margin-top: var(--space-lg); font-size: var(--child-lead-size); }
.marketing-child-demo .demo-notice { max-width: var(--child-session-width); margin-top: var(--space-xl); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--surface); }
.marketing-child-demo .demo-notice p { margin-top: var(--space-xs); }
.marketing-child-demo .child-session { position: relative; max-width: var(--child-session-width); margin-inline: auto; padding: clamp(var(--space-md), 4vw, var(--space-xl)); border: var(--child-frame-border) solid var(--navy); border-radius: var(--radius-tablet); background: var(--paper); box-shadow: var(--shadow-tablet); text-align: center; }
.marketing-child-demo .child-tablet-star { position: absolute; top: var(--child-star-outset); right: var(--child-star-outset); width: var(--child-star-size); height: var(--child-star-size); fill: var(--yellow); stroke: var(--navy); stroke-width: var(--child-star-stroke); stroke-linejoin: round; pointer-events: none; }
.marketing-child-demo .child-token-board { margin-bottom: var(--space-lg); }
.marketing-child-demo .child-tokens { display: flex; justify-content: center; gap: var(--space-xs); }
.marketing-child-demo .child-token { color: var(--token-empty); font-size: var(--child-token-size); line-height: 1; }
.marketing-child-demo .child-token.is-earned { color: var(--yellow); }
.marketing-child-demo #child-token-status { margin-top: var(--space-xs); color: var(--ink-muted); font-size: var(--child-caption-size); }
.marketing-child-demo #child-activity > p:not(.eyebrow) { margin-top: var(--space-sm); }
.marketing-child-demo .child-speech { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); margin-block: var(--space-md); }
.marketing-child-demo #child-speech-fallback { max-width: var(--copy-width); color: var(--ink-muted); font-size: var(--child-caption-size); }
.marketing-child-demo .child-speech [aria-pressed="true"] { border-color: var(--teal); background: var(--teal-tint); }
.marketing-child-demo .child-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-block: var(--space-lg); }
.marketing-child-demo .child-choice { min-width: 0; min-height: var(--child-picture-minimum); padding: var(--space-xs); border: var(--child-choice-border) solid transparent; border-radius: var(--radius-choice-card); background: var(--surface); cursor: pointer; }
.marketing-child-demo .child-choice img { display: block; width: 100%; aspect-ratio: 11 / 9; object-fit: cover; border-radius: var(--radius-choice); }
.marketing-child-demo .child-choice:hover:not(:disabled):not(.is-prompted) { border-color: var(--hairline); }
.marketing-child-demo .child-choice:disabled { cursor: default; opacity: 1; }
.marketing-child-demo .child-choice.is-prompted { border-color: var(--teal); background: var(--teal-tint); }
.marketing-child-demo .child-feedback { min-height: var(--child-feedback-height); font-weight: 800; }
.marketing-child-demo .child-reward { display: grid; gap: var(--space-lg); padding-block: var(--space-xl); }
.marketing-child-demo .child-reward .eyebrow { color: var(--yellow-deep); }
.marketing-child-demo .child-reward .button { justify-self: center; }
.marketing-child-demo .child-demo-note { max-width: var(--child-session-width); margin: var(--space-xl) auto 0; color: var(--ink-muted); font-size: var(--child-caption-size); }
.marketing-child-demo .demo-audience { max-width: var(--child-session-width); margin: var(--space-xl) auto 0; }
.marketing-child-demo .demo-audience a { color: var(--blue-deep); font-weight: 800; text-decoration: underline; }
.marketing-child-demo .demo-contact { background: var(--teal-tint); }
.marketing-child-demo .demo-contact p { margin-top: var(--space-md); }
.marketing-child-demo .demo-contact .button { margin-top: var(--space-lg); }
@media (max-width: 800px) { .marketing-child-demo .child-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .marketing-child-demo .child-tablet-star { display: none; } .marketing-child-demo .child-choices { gap: var(--space-sm); } }