/* Frosted glass keeps the artwork visible while adapting contrast to each scene. */
.entry-header {
  color: #f5f9ff;
  background: radial-gradient(ellipse at 8% 0%, #d7edf52e, transparent 50%), linear-gradient(125deg, #bdd1e452, #839bb84a 54%, #b2c2d552);
  border-color: #e4f3ff80;
  box-shadow: 0 12px 30px #10264226, 0 2px 0 #8196ae33, inset 0 2px 3px #ffffff70, inset 0 -2px 5px #213a5b26;
  padding: 11px 24px;
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
}
.entry-header[data-tone="light"] { color: #18365a; background: radial-gradient(ellipse at 8% 0%, #d4eef538, transparent 50%), linear-gradient(125deg, #ffffffb8, #eaf2fba3 54%, #e2e8f2b3); border-color: #ffffffd9; box-shadow: 0 12px 30px #25477024, 0 2px 0 #8da7c333, inset 0 2px 3px #fff, inset 0 -2px 5px #8ca5c02e; }
.entry-header::before, .entry-header[data-tone="light"]::before { background: linear-gradient(125deg, #fff, #bfddeca6 28%, #ffffff33 52%, #d5d6e5b3 78%, #f1f8ff); }
.entry-header::after, .entry-header[data-tone="light"]::after { height: 20px; background: linear-gradient(180deg, #ffffff52, #ffffff00); }
.entry-header[data-tone="light"] .entry-logo, .entry-header[data-tone="light"] .entry-moon { opacity: 0; }
.entry-header[data-tone="light"] .entry-logo-light, .entry-header[data-tone="light"] .entry-moon-light { opacity: 1; }
.entry-header .audience-switch { background: #10294326; border-color: #d1e0ef4d; box-shadow: inset 0 2px 5px #19324c33, 0 1px 0 #ffffff3d; }
.entry-header[data-tone="light"] .audience-switch { background: #98b5d224; border-color: #8aa8c433; box-shadow: inset 0 2px 5px #6a8dad1a, 0 1px 0 #ffffffb3; }
.entry-header .audience-switch button { font-size: 14px; padding: 9px 22px; }
.entry-header .audience-switch button:not([aria-pressed="true"]) { color: #e1ecfa; }
.entry-header[data-tone="light"] .audience-switch button:not([aria-pressed="true"]) { color: #3b526d; }
.entry-header .audience-switch button[aria-pressed="true"] { font-weight: 700; box-shadow: 0 4px 10px #061a3c52, inset 0 2px 2px #fff, inset 0 -3px 5px #399b9866; }
.entry-header .motion-toggle { color: #ecf7ff; border-color: #e3efff66; background: #ffffff14; box-shadow: 0 3px 6px #17304e26, inset 0 1px 2px #ffffff66; }
.entry-header[data-tone="light"] .motion-toggle { color: #4c5f78; border-color: #8aa8c447; background: #ffffff52; box-shadow: 0 3px 6px #6a8dad1a, inset 0 1px 2px #fff; }
.entry-header .motion-toggle:hover, .entry-header[data-tone="light"] .motion-toggle:hover { background: #ffffff70; }
.entry-header :focus-visible { outline-color: #aff5ea; }
.entry-header[data-tone="light"] :focus-visible { outline-color: #24529b; }

/* A wider, inset content column gives the copy and form more visual weight. */
#top .intro-image { left: 0; width: 100%; object-position: center; }
#top[data-scene-tone="light"] { background: #e9f2fc; }
#top .intro-image:nth-child(2) { top: max(112px, calc(50% - 21.95vw + 53px)); left: 22%; width: 78%; height: auto; object-fit: contain; object-position: right center; mask-image: linear-gradient(180deg, transparent, #000 2%, #000 98%, transparent); }
#top .intro-shade { background: linear-gradient(90deg, #071b36f2, #0b2340cc 34%, #0b234026 56%, transparent 70%); }
#top[data-scene-tone="light"] .intro-shade { background: linear-gradient(90deg, #e8f1fcf5, #edf5fcde 34%, #e8f1fc4d 51%, transparent 65%); }
#top:has(#intro-crossroads.is-active) .intro-shade { background: linear-gradient(90deg, #e8f1fcf5, #edf5fcde 34%, #e8f1fc4d 44%, transparent 52%); }
#top .intro-frame {
  --intro-ink: #f6f8ff;
  --intro-muted: #c9d6e5;
  --intro-label: #dce8f1;
  --intro-accent: var(--ai-mint);
  --intro-border: #ffffff30;
  --intro-input: #091a2e70;
  --intro-placeholder: #bccfdd;
  display: grid;
  grid-template-columns: minmax(0, min(600px, 43vw)) 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 28px 0;
  padding: 132px max(72px, calc((100vw - 1440px) / 2 + 24px)) 44px;
  color: var(--intro-ink);
}
#top .intro-frame[data-tone="light"] {
  --intro-ink: #10233e;
  --intro-muted: #455a72;
  --intro-label: #334f68;
  --intro-accent: var(--ai-mint-text);
  --intro-border: #294e7226;
  --intro-input: #ffffffb3;
  --intro-placeholder: #66798d;
}
body[data-audience="parent"] #top .intro-frame { --intro-accent: var(--ai-pink); }
body[data-audience="parent"] #top .intro-frame[data-tone="light"] { --intro-accent: var(--ai-pink-text); }
#top .intro-copy { grid-column: 1; grid-row: 1; align-self: start; max-width: 100%; }
#top .intro-kicker { color: var(--intro-muted); font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
#top .intro-greeting { color: var(--intro-accent); font-size: 17px; min-height: 28px; margin-bottom: 12px; }
#top .intro-frame:not(:first-child) .intro-greeting { display: none; }
#top .intro-copy h1, #top .intro-copy h2 { font-size: clamp(48px, 3.7vw, 64px); line-height: 1.2; text-wrap: balance; }
#top .intro-copy h1 em, #top .intro-copy h2 em { display: inline-block; color: var(--intro-accent); }
#top .intro-tagline { font-size: 28px; color: var(--intro-ink); margin-top: 16px; }
#top .intro-tagline em { color: var(--ai-violet-text); }
#top .intro-description { color: var(--intro-muted); font-size: 17px; line-height: 1.75; margin-top: 16px; max-width: 560px; }
#top .intro-question-card {
  --intro-ink: #f6f9ff;
  --intro-muted: #c4d7ed;
  --intro-label: #e4eefb;
  --intro-border: #b5d4f766;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 28px;
  border-radius: 28px;
  color: var(--intro-ink);
  background: radial-gradient(ellipse at 0% 0%, #8bd8ec38, transparent 55%), radial-gradient(ellipse at 100% 100%, #b89bf826, transparent 50%), linear-gradient(140deg, #376a9fe8, #1a406ce8 48%, #173158ed);
  border-color: #b9dcff91;
  box-shadow: 0 28px 64px #102d553b, 0 6px 0 #102d556b, 0 10px 14px #102d552b, inset 0 2px 3px #e7f5ff99, inset 0 -3px 7px #061a3c66;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-color: #72cccb80 transparent;
}
#top .intro-question-card::before { padding: 1.5px; background: linear-gradient(130deg, #f3fcff, #86c9efb3 28%, #ffffff26 52%, #c5b4ffc9 77%, #d3ecff); }
#top .intro-question-card::after { left: 18px; right: 18px; height: 78px; background: linear-gradient(180deg, #e9f6ff26, transparent); }
#top .intro-question-card .card-eyebrow { color: #c2e1f4; margin-bottom: 10px; font-size: 10px; }
#top .intro-question-card h3 { font-size: 28px; line-height: 1.35; }
#top .intro-question-card > p { color: var(--intro-label); font-size: 15px; margin-top: 8px; }
#top .intro-fields { margin-top: 20px; gap: 16px; }
#top #intro-possibility .intro-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#top .intro-fields label { font-size: 14px; color: var(--intro-label); }
#top input[type="text"], #top input[type="number"], #top select {
  color: #15365b;
  background: linear-gradient(155deg, #f7fbfff5, #dceaf8f2);
  border-color: #bad4ef;
  box-shadow: inset 0 2px 5px #0b2c5c29, inset 0 -1px 0 #ffffffd9, 0 1px 0 #071b3c33;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 13px;
  margin-top: 8px;
  font-size: 17px;
}
#top input::placeholder { color: #526c87; }
#top .intro-note { color: var(--intro-muted) !important; font-size: 13px !important; }
#top .intro-card-actions { margin-top: 20px; }
#top .intro-card-actions .button, #top .profile-save { min-height: 50px; font-size: 16px; padding: 13px 22px; border-radius: 16px; }
#top .intro-question-card .button-mint { background: linear-gradient(160deg, #effff9, #b2e8df 50%, #72c8c8); box-shadow: 0 5px 0 #0a566866, 0 9px 16px #061a3c42, inset 0 2px 2px #fff, inset 0 -3px 5px #147e8647; }
#top .intro-skip { color: #d2e4f8; font-size: 14px; }
#top .intro-skip:hover { color: var(--intro-ink); }
#top .exam-options { margin-top: 18px; gap: 8px; }
#top .exam-options legend { color: var(--intro-label); font-size: 14px; padding-bottom: 10px; }
#top .exam-options span { color: var(--intro-label); border-color: var(--intro-border); background: linear-gradient(155deg, #5787b95c, #112f5859); font-size: 14px; padding: 10px 14px; min-height: 44px; box-shadow: inset 0 1px 2px #d9efff40, 0 2px 4px #071b3c26; }
#top .exam-options input:checked + span { color: #092e45; background: linear-gradient(160deg, #effff9, #bfece6 55%, #89d4cf); border-color: #cbfff4; box-shadow: 0 3px 0 #0c566966, 0 5px 9px #061a3c42, inset 0 2px 2px #fff; }
#top .interest-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
#top .interest-options legend { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
#top .interest-options label, #top .interest-options span { width: 100%; }
#top .interest-options span { border-radius: 13px; padding-inline: 8px; }
#top .intro-disclosure { color: var(--intro-label); border-color: var(--intro-border); margin-top: 16px; padding-top: 10px; }
#top .intro-disclosure summary { font-size: 14px; }
#top .profile-summary { margin-top: 16px; gap: 9px; }
#top .profile-summary span { font-size: 13px; padding: 7px 10px; color: #e4f9f8; background: #94dbe829; border-color: #acd8ed66; }
#top .profile-edit-links { margin-top: 16px; }
#top .profile-edit-links button { font-size: 13px; padding: 8px 12px; }
#top .remember-profile { color: var(--intro-label); font-size: 14px; margin-top: 18px; }
#top .profile-links { color: var(--intro-label); font-size: 13px; }
#top .profile-links button { color: var(--intro-muted); font-size: 12px; }
#top .profile-status { color: var(--intro-accent); }
#top:not(.is-stacked) .intro-stage { min-height: 0; }
#top:not(.is-stacked) .intro-card-actions { position: sticky; bottom: 0; z-index: 2; padding-top: 12px; border-radius: 14px; background: linear-gradient(180deg, #1d406b00, #1d406bdd 55%); }
#top:not(.is-stacked) .profile-save { position: sticky; bottom: 0; z-index: 2; }

@media (min-width: 1101px) {
  #top.is-stacked .intro-frame, body:not(.js-ready) #top .intro-frame {
    grid-template-rows: auto auto;
    min-height: max(940px, 100svh);
    height: auto;
    padding-bottom: 64px;
  }
  #top.is-stacked .intro-frame::before { background: linear-gradient(90deg, #071b36f2, #0b2340cc 34%, #0b234026 56%, transparent 70%); }
  #top.is-stacked .intro-frame[data-tone="light"]::before { background: linear-gradient(90deg, #e8f1fcf5, #edf5fcde 34%, #e8f1fc4d 51%, transparent 65%); }
  #top.is-stacked #intro-crossroads .intro-mobile-art { top: max(112px, calc(50% - 21.95vw + 53px)); left: 22%; width: 78%; height: auto; object-fit: contain; object-position: right center; mask-image: linear-gradient(180deg, transparent, #000 2%, #000 98%, transparent); }
  #top.is-stacked #intro-crossroads::before { background: linear-gradient(90deg, #e8f1fcf5, #edf5fcde 34%, #e8f1fc4d 44%, transparent 52%); }
  #top.is-stacked .intro-question-card { max-height: none; overflow: visible; }
}

@media (min-width: 1101px) and (max-height: 900px) {
  #top .intro-frame { gap: 20px 0; padding-top: 112px; padding-bottom: 28px; }
  #top .intro-copy h1, #top .intro-copy h2 { font-size: clamp(44px, 3.65vw, 56px); }
  #top .intro-kicker { font-size: 10px; margin-bottom: 10px; }
  #top .intro-greeting { font-size: 15px; min-height: 24px; margin-bottom: 8px; }
  #top .intro-tagline { font-size: 24px; margin-top: 12px; }
  #top .intro-description { font-size: 16px; line-height: 1.65; margin-top: 12px; }
  #top .intro-question-card { padding: 22px; }
  #top .intro-question-card h3 { font-size: 26px; }
  #top .intro-fields { margin-top: 16px; gap: 14px; }
  #top input[type="text"], #top input[type="number"], #top select { min-height: 48px; font-size: 16px; }
  #top .intro-card-actions .button, #top .profile-save { min-height: 48px; font-size: 15px; padding: 12px 20px; }
}

@media (max-width: 1100px) {
  .entry-header .audience-switch button { padding: 9px 16px; font-size: 13px; }
  #top.is-stacked .intro-frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 32px;
    padding: 128px 40px 64px;
    min-height: 0;
    background: #0b2240;
  }
  #top.is-stacked .intro-frame[data-tone="light"] { background: linear-gradient(150deg, #e8f2fd, #edf1fb); }
  #top.is-stacked .intro-frame::before { display: none; }
  #top.is-stacked .intro-mobile-art {
    display: block;
    position: relative;
    inset: auto;
    z-index: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 24px;
    box-shadow: 0 20px 40px #0b2c5c29, 0 4px 0 #7e9db440;
  }
  #top .intro-copy { grid-row: 2; width: min(640px, 100%); justify-self: center; }
  #top .intro-copy h1, #top .intro-copy h2 { font-size: clamp(40px, 5vw, 54px); }
  #top .intro-question-card { grid-row: 3; width: min(640px, 100%); justify-self: center; max-height: none; overflow: visible; }
  #top .intro-fields { gap: 16px; }
  #top .interest-options span { min-height: 44px; font-size: 13px; }
}

@media (max-width: 800px) {
  .entry-header, .entry-header[data-tone="light"] { padding: 8px 14px; }
}

@media (max-width: 640px) {
  .entry-header, .entry-header[data-tone="light"] { padding: 6px 12px 8px; }
  .entry-header .audience-switch button { padding: 6px 10px; font-size: 12px; }
  #top.is-stacked .intro-frame { padding: 140px 20px 46px; gap: 28px; }
  #top.is-stacked .intro-frame + .intro-frame { padding-top: 32px; border-top: 1px solid #7aa7d133; }
  #top.is-stacked .intro-mobile-art { border-radius: 18px; }
  #top .intro-copy h1, #top .intro-copy h2 { font-size: clamp(34px, 9.3vw, 44px); }
  #top .intro-description { font-size: 16px; }
  #top .intro-question-card { padding: 24px; border-radius: 24px; }
  #top .intro-question-card h3 { font-size: 25px; }
  #top #intro-possibility .intro-fields { grid-template-columns: 1fr; }
  #top .intro-kicker { font-size: 10px; letter-spacing: 1.5px; }
  #top .intro-greeting { font-size: 15px; }
  #top .intro-tagline { font-size: 24px; }
  #top .intro-description br { display: none; }
  #top .interest-options span { font-size: 13px; }
  #top .intro-card-actions .button { font-size: 14px; padding-inline: 16px; }
}