@font-face {
  font-family: Barlow;
  src: url("../../../barlow-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --ink: #192d29;
  --muted: #60716b;
  --green: #063f35;
  --bright: #137657;
  --mint: #e9f2eb;
  --bg: #f6f8f6;
  --line: #dce5df;
  --gold: #efd46b;
  --blue: #eaf1fc;
  --coral: #fbece7;
  --home-accent: #b71852;
  --header-height: 60px;
  /* ---- Semantic colour tokens: College Journey home + shared chrome ----------------------
     Introduced as a mechanical, visually neutral pass. Every value below is the literal that
     was previously inline, so this layer changes nothing on its own; the warm repaint changes
     these values. Only rules that actually paint the home surfaces were converted, so no
     unreviewed screen can shift when a value here changes. */
  --surface-page: #fdf8f5;
  --surface-card: #fdfdfb;
  --surface-sunken: #fdf1eb;
  --surface-feature: #feede4;
  --surface-notice: #e5f6eb;
  --surface-notice-action: #063f35;
  --surface-hero: #fdeae0;
  --surface-hero-narrow: #fdeae0;
  --surface-header: var(--green);
  --note-paper: #fdeee4;
  --note-paper-deep: #fbe0d0;
  --note-ink: #8c1f49;
  --note-hand: "Bradley Hand", "Segoe Script", "Snell Roundhand", "Noteworthy", "Apple Chancery", cursive;
  --action-primary: var(--green);
  --action-primary-hover: #0a5546;
  --surface-footer: #06100d;
  --surface-footer-logo: #020606;
  --surface-toast: #203d34;
  --surface-progress-track: #f3ddd4;
  --surface-hover: #9daaa31a;
  --text-strong: #0c3c34;
  --text-hero: #0c3c34;
  --text-notice: #063f35;
  /* Four near-identical secondary greys inherited from separate edits. Tokenised apart so this
     pass stays provably neutral; collapse them onto --text-secondary in the warm pass. */
  --text-secondary: #4a5f57;
  --text-secondary-note: #4a5f57;
  --text-secondary-card: #4a5f57;
  --text-secondary-quest: #4a5f57;
  --text-on-dark: #fff;
  --text-on-header: #e5f4ef;
  --text-on-header-dim: #d1e6df;
  --text-menu-signoff: #52685e;
  --text-footer: #dce9f4;
  --text-footer-strong: #f3f7f5;
  --text-feature-eyebrow: #7a3f2a;
  --text-feature-link: #7a3c26;
  --accent-action-default: #0c3c34;
  --accent-finder: #0c3c34;
  --accent-plan: #a71950;
  --accent-support: #087158;
  --accent-deep: #98204a;
  --accent-cta: #a41f55;
  --accent-gold-bright: #f9df78;
  --accent-nav-current: #0b6b50;
  --state-success: #087453;
  --icon-menu: #557468;
  --focus-quest: #126f9c;
  --border-card: #ecd9d0;
  --border-card-primary: #e6c1b0;
  --border-divider: #efddd5;
  --border-quest: #e2cec4;
  --border-milestone: #edd4c8;
  --border-brand: #719387;
  --border-pwa: #6b9587;
  --border-notice: #c3d8cf;
  --border-footer: rgba(255,255,255,.12);
  --shadow-card: #5a3a1c14;
  --shadow-card-hover: #5a3a1c2e;
  --shadow-dialog: #03271f38;
  --shadow-toast: #11362826;
  --shadow-notice: rgba(6,63,53,.08);
  --overlay-menu: #071c1966;
  --overlay-dialog: #061f1db3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  letter-spacing: 0;
}
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#main form :is(input,select,textarea) { scroll-margin-top:calc(var(--header-height) + env(safe-area-inset-top,0px) + 16px); }
h1, h2, h3 { font-family:Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.mission-page h1,.mission-page h2,.mission-page h3 { font-family:inherit; }
.mission-invite { background:#eaf3fa; color:#123d36; }
.mission-invite .mission-inner { padding:22px; }
.mission-invite .mission-inner h2 { font-size:22px; line-height:1.25; margin:0 0 10px; }
.mission-invite .mission-inner > p { font-size:15px; line-height:1.5; margin:0 0 18px; }
.mission-page .home-primary { display:flex; align-items:center; justify-content:center; gap:14px; min-height:48px; padding:12px 18px; width:100%; max-width:360px; border:0; border-radius:6px; background:var(--home-accent); color:white; font-size:15px; line-height:1.4; font-weight:700; text-decoration:none; }
.mission-page .home-primary:hover { background:#981343; }
.mission-page .home-primary:active { background:#81123b; }
.mission-page .home-primary:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.mission-invite svg { width:18px; height:18px; flex-shrink:0; }
.mission-home main { background:var(--surface-page); }
.mission-hero { --note-w:142px; position:relative; display:flex; flex-direction:column; padding-bottom:20px; background:var(--surface-hero); overflow:hidden; }
.mission-hero-copy { order:0; position:relative; z-index:2; padding:22px 22px 12px; color:var(--text-hero); }
.mission-eyebrow { margin:0 0 14px; font-size:11px; line-height:1.6; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--text-strong); }
.mission-hero h1 { margin:0; font-size:46px; line-height:1.02; letter-spacing:-.01em; max-width:12ch; }
.mission-subhead { margin:26px 0 0; padding-right:calc(var(--note-w) + 14px); max-width:520px; color:var(--text-strong); font-size:16px; line-height:1.5; font-weight:400; }
/* The photograph is delivered as two art-directed crops rather than one image scaled: a 3:1 desktop
   crop shows under half its own width at 320px, so phone and desktop would be looking at different
   photographs. The box is capped in svh as well as by aspect ratio, because a 4:5 photo on a short
   phone pushes the primary action off the first screen -- measured, not assumed. */
.mission-hero picture { order:1; position:relative; display:block; width:100%; aspect-ratio:4/5; max-height:min(45svh,470px); }
/* The picture box reserves the photographic area the reader sees; the image itself runs taller and
   upward out of it, behind the copy, so there is no horizontal edge where the photograph starts. */
/* REVERTED 2026-10-06: the reveal mask is removed. It faded a fixed 34% of the photographic band,
   and the band's height comes from svh -- which on a real iPhone is the viewport WITH browser
   chrome, roughly a fifth shorter than the device height the headless harness was using. A shorter
   band means a wider crop, which rides the athletes upward, straight into the fade. Measured: the
   fade crossed the focal line by 16px in the harness and by 53-90px on real Safari geometry, which
   is the milky haze over their faces. A visible seam is the better trade; the mask returns only
   when the fade is anchored to the athletes rather than to a share of the band. */
.mission-hero img { display:block; position:absolute; left:0; right:0; bottom:0; width:100%;
  height:100%; object-fit:cover; object-position:center 76%; }
/* On a very short screen the hero still has to leave the proof block visibly peeking, so the
   reader can see the page continues. Trimming the photograph here is the only lever that does
   not either push the primary action off the first screen or make the hero taller. */
@media (max-height:620px) { .mission-hero picture { max-height:34svh; } }
/* ---- Affirmation note --------------------------------------------------------------------------
   A piece of paper, not UI: warm stock, off-axis, soft contact shadow and a lifted corner. It is
   decorative in weight but real in content, so it stays in the accessibility tree and has to meet
   contrast like any other text. Its rect is asserted against the headline, the supporting lines and
   the primary action in the art suite -- "never obscures critical copy" is a measurable claim. */
.affirmation-note {
  position:absolute; right:14px; bottom:-14px; top:auto; z-index:3; width:var(--note-w); margin:0;
  padding:9px 12px 10px; transform:rotate(3.2deg);
  /* Solid paper under the gradient: the darker stop, so the ink/paper contrast is computable
     and still passes if the gradient never paints. */
  background-color:var(--note-paper-deep);
  background-image:linear-gradient(176deg, var(--note-paper) 0%, var(--note-paper-deep) 100%);
  color:var(--note-ink); font-family:var(--note-hand); font-size:15px; line-height:1.14;
  letter-spacing:.01em; text-wrap:balance;
  box-shadow:0 1px 1px #5a3a1c1f, 0 14px 20px -8px #5a3a1c59;
  border-radius:2px 3px 2px 3px;
}
.affirmation-note::after {
  content:""; position:absolute; right:0; bottom:0; width:22px; height:22px; pointer-events:none;
  background:linear-gradient(315deg, var(--surface-hero) 48%, #e8cdb8 50%, var(--note-paper-deep) 56%);
  border-radius:0 0 3px 0;
}
.affirmation-note b { display:block; font-weight:inherit; }
.affirmation-note i { display:block; margin-top:2px; font-style:normal; }
.affirmation-note span { margin-left:4px; font-size:.92em; }
@media (max-width:360px) {
  .mission-hero { --note-w:112px; }
  .affirmation-note { right:8px; padding:8px 9px 9px; font-size:13.5px; }
}
/* Declared after the narrow-width block on purpose: equal specificity, so source order decides.
   The bleed has to shrink as the viewport shortens: the crop tightens, which walks the athletes
   UP, and past a point the bleed would carry their faces behind the solid copy field. These
   values are measured against that, not chosen. The paper stops overlapping the seam at the
   same points, for the same reason. */
@media (max-height:700px) { .mission-hero picture { max-height:42svh; } .affirmation-note { bottom:4px; } }
/* A very shallow band crops from a tall portrait, so the 76% anchor walks the athletes' faces off
   the TOP of it. Anchor higher up the source here to keep the focal area framed. */
@media (max-height:620px) { .mission-hero picture { max-height:34svh; } .mission-hero img { object-position:center 56%; }
  .affirmation-note { bottom:4px; } }
/* An SE with Safari's chrome showing reports about 553px: the shallowest viewport we support.
   The proof block still has to peek, so the photographic band gives up the last of its height. */
@media (max-height:580px) { .mission-hero picture { max-height:27svh; } }
@media (min-width:700px) {
  /* At desktop the copy column is too narrow to hold both the supporting lines and the paper, and
     stacking it under the action collides with the action at short desktop heights. The photograph
     has open sky at its top-right, so the note anchors to the HERO there -- which needs the copy
     block unpositioned so the note resolves against the grid container rather than the column. The
     face check still guards it. */
  .mission-hero { --note-w: 158px; }
  .mission-hero-copy { position:static; }
  .mission-subhead { padding-right:0; }
  .affirmation-note { left:auto; right:34px; top:auto; bottom:30px; font-size:17px; padding:12px 14px 13px; }
}
.hero-cta { order:2; position:relative; z-index:1; display:flex; align-items:center; gap:14px; margin:-34px 22px 0; min-height:62px; padding:14px 24px; border-radius:999px; background:var(--action-primary); color:var(--text-on-dark); font-size:17px; font-weight:750; text-decoration:none; box-shadow:0 14px 30px #3a220e38; }
.hero-cta span { flex:1; }
.hero-cta svg { width:20px; height:20px; flex:none; }
.hero-cta:hover { background:var(--action-primary-hover); }
/* This button is the only control that sits ON the photograph, so a single-colour focus ring is
   not reliable: evergreen reads against bright sky and disappears against the dark palms. A
   light ring inside a dark one stays visible whatever the crop lands on. The transparent
   outline is what keeps it visible in forced-colours mode, where box-shadow is dropped. */
.hero-cta:focus-visible { outline:3px solid transparent; outline-offset:3px; box-shadow:0 0 0 3px var(--surface-card), 0 0 0 6px var(--action-primary); }
.mission-positioning { max-width:920px; margin:0 auto; padding:0 22px 18px; color:var(--text-strong); font-size:16px; line-height:1.5; font-weight:700; }
.mission-purpose { background:#fff; }
.mission-inner { max-width:920px; margin:auto; padding:30px 22px; }
.mission-inner > .eyebrow { font-size:10px; color:#31655b; }
.mission-inner h2 { font-size:29px; line-height:1.14; margin:10px 0 16px; }
.mission-inner > p { font-size:16px; line-height:1.6; color:var(--text-secondary); margin:0 0 24px; }
.mission-inner .intent-doors { margin-top:24px; }
.mission-inner .entry-reassurance { font-size:13px; margin:18px 0 0; }
.home-identity { margin:8px 0 16px; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.home-identity strong { margin-right:8px; }
.home-identity span { display:block; color:#476258; }
.home-step-note { font-size:14px; line-height:1.5; margin:0 0 16px; color:#476258; }
.home-progress { font-size:12px; line-height:1.5; margin:12px 0 0; color:#476258; }
.home-preview-note { margin:16px 0 0; color:var(--text-secondary-note); font-size:15px; line-height:1.55; }
.home-resume-actions { font-size:12px; color:#476258; margin-top:4px; }
.home-resume-actions summary { display:list-item; min-height:44px; padding:12px 0; cursor:pointer; }
.home-resume-actions a,.home-resume-actions .text-button { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0 18px 0 0; font-size:13px; }
.mission-momentum { background:var(--surface-card); color:var(--text-strong); border-bottom:1px solid var(--line); }
.mission-momentum .mission-inner { position:relative; padding-top:18px; padding-bottom:20px; }
.mission-momentum .mission-inner h2 { font-size:15px; line-height:1.4; margin:0 46px 16px 0; }
.mission-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; }
.mission-stats > div { display:flex; align-items:center; gap:10px; min-width:0; }
.mission-stats dt { color:var(--text-strong); font-size:30px; line-height:1.1; font-weight:750; font-variant-numeric:tabular-nums; margin:0; flex-shrink:0; }
.mission-stats dd { margin:0; min-width:0; }
.mission-stats strong { display:block; font-size:12px; line-height:1.4; }
.mission-stats dd span { display:block; margin-top:3px; font-size:12px; line-height:1.4; color:var(--text-secondary-note); }
.mission-stats dd .stat-period { display:inline-block; white-space:nowrap; margin:0; }
.mission-stat-date { margin:14px 46px 0 0; font-size:12px; line-height:1.5; color:var(--text-secondary-note); }
.mission-sources { font-size:13px; line-height:1.6; }
.mission-sources summary { position:absolute; top:4px; right:12px; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; border-radius:4px; list-style:none; }
.mission-sources summary::-webkit-details-marker { display:none; }
.mission-sources summary > svg { width:19px; height:19px; }
.mission-sources summary > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.mission-sources summary:hover,.mission-sources[open] summary { background:#eaf3fa; }
.mission-sources summary:focus-visible { outline:3px solid var(--home-accent); outline-offset:0; }
.growth-evidence { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.growth-evidence p { margin:0 0 12px; }
.mission-sources ul { padding-left:18px; margin:12px 0 0; }
.mission-sources li + li { margin-top:12px; }
.mission-sources a { text-underline-offset:3px; overflow-wrap:anywhere; }
.mission-future { background:var(--surface-feature); color:var(--text-strong); }
.mission-future .mission-inner { padding-top:8px; padding-bottom:8px; }
.future-disclosure > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; font-size:16px; font-weight:650; list-style:none; cursor:pointer; }
.future-disclosure > summary::-webkit-details-marker { display:none; }
.future-disclosure > summary svg { width:20px; height:20px; flex-shrink:0; }
.future-disclosure[open] > summary svg { transform:rotate(180deg); }
.future-content { padding:8px 0 20px; }
.future-content > p { font-size:14px; line-height:1.6; }
.mission-future .eyebrow,.mission-future .mission-inner > p { color:var(--text-feature-eyebrow); }
.mission-milestones { list-style:none; margin:0; padding:0; }
.mission-milestones li { display:grid; grid-template-columns:64px minmax(0,1fr); gap:18px; padding:24px 0; border-top:1px solid var(--border-milestone); }
.milestone-year { font-size:24px; line-height:1.2; font-weight:800; }
.milestone-status { display:block; font-size:10px; font-weight:700; line-height:1.5; }
.mission-milestones h3 { margin:8px 0; font-size:19px; line-height:1.25; }
.mission-milestones p { margin:0; font-size:14px; line-height:1.6; }
.mission-milestones a { display:inline-flex; align-items:center; gap:7px; min-height:44px; font-size:13px; font-weight:700; text-underline-offset:3px; }
.mission-milestones svg { width:16px; height:16px; }
.mission-future .mission-inner > .milestone-date { font-size:12px; margin:0; }
.mission-future .text-button { color:var(--text-feature-link); }
.mission-page .intent-secondary { padding-top:16px; }
.example-banner { display:flex; align-items:center; gap:10px; padding:10px 22px; background:#fff1bf; color:#594719; font-size:12px; }
.example-banner > svg { width:18px; height:18px; flex-shrink:0; }
.example-banner > span { flex:1; overflow-wrap:anywhere; }
.example-banner .text-button { min-height:44px; color:#594719; font-size:12px; }
@media (min-width:700px) {
  .mission-hero,.mission-returning .mission-hero { display:grid; grid-template-columns:minmax(320px,44%) 1fr; align-content:center; width:100%; height:auto; max-height:none; aspect-ratio:auto; padding:0; }
  /* Must stay positioned: the image inside is absolute, and a static picture would make it
     anchor to the hero and span both columns -- scaling the photograph to the full width and
     cropping it to the wrong frame. */
  .mission-hero picture { grid-column:2; grid-row:1 / span 2; position:relative; aspect-ratio:auto; max-height:none; height:100%; min-height:clamp(320px,44svh,470px); }
  /* No upward bleed at desktop: the copy sits BESIDE the photograph, so there is no seam to
     dissolve and a bleed would only mis-crop it. */
  .mission-hero img { height:100%; }
  .mission-hero-copy::after { display:none; }
  .mission-hero-copy { grid-column:1; grid-row:1; position:static; align-self:end; width:auto; padding:44px 40px 0; }
  .hero-cta { grid-column:1; grid-row:2; position:static; width:min(340px,100%); margin:28px 40px 44px; }
  .mission-invite .mission-inner { padding:24px 36px; }
  .mission-invite .mission-inner > h2 br,.home-copy-break { display:none; }
  .mission-inner { padding:36px; }
  .mission-inner h2 br { display:none; }
  .mission-stats { max-width:660px; gap:36px; }
  .mission-stats dt { font-size:34px; }
  .mission-sources summary { right:24px; }
}
@media (min-width:1000px) {
  .mission-hero h1 { font-size:62px; }
}
@media (max-width:360px) {
  .mission-hero h1 { font-size:36px; }
  /* left/right here dated from the copy being absolutely positioned over the photograph. It is
     a static block now and position:relative made these offsets live again, shifting the whole
     hero copy 17px right at <=360px. Padding is what sets the gutter. */
  .mission-invite .mission-inner { padding:20px 17px; }
  .mission-invite .mission-inner h2 { font-size:20px; }
  .mission-inner { padding:26px 17px; }
  .mission-stats { gap:14px; }
  .mission-stats > div { display:block; }
  .mission-stats dt { font-size:28px; margin-bottom:4px; }
  .home-copy-break { display:none; }
}
@media (max-width:699px) {
  .mission-hero { background:var(--surface-hero-narrow); }
}
@media (max-width:360px) {
  .mission-hero .mission-hero-copy { padding:18px 17px 14px; }
  .hero-cta { margin-left:17px; margin-right:17px; padding:14px 18px; font-size:16px; }
}
.intent-hero { position:relative; height:240px; overflow:hidden; background:#174d42; }
.intent-hero > img { width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.intent-hero:after { content:""; position:absolute; inset:0; background:rgba(0,25,18,.28); }
.intent-hero > div { position:absolute; bottom:24px; left:22px; right:22px; color:#fff; z-index:1; text-shadow:0 1px 8px #173d32; }
.intent-hero .eyebrow { color:#fff; margin-bottom:8px; }
.intent-hero h1 { font-size:32px; max-width:600px; }
.coach-athlete { padding:20px 0; border-bottom:1px solid #dbe4e0; }
.coach-athlete h1 { font-size:30px; line-height:1.15; margin:10px 0; overflow-wrap:anywhere; }
.coach-athlete p { color:#53645e; }
.coach-layout { display:grid; gap:28px; margin-top:22px; }
.coach-layout h2 { font-size:21px; }
.coach-layout h3 { font-size:18px; margin:0 0 12px; }
.coach-video.film-player { height:330px; max-height:48dvh; border-radius:8px 8px 0 0; }
.coach-context { padding:18px 0; border-bottom:1px solid #dbe4e0; }
.coach-context dl { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.coach-context dt { font-size:12px; color:#53645e; }
.coach-context dd { font-size:15px; font-weight:700; margin:4px 0 0; overflow-wrap:anywhere; }
.athlete-locator { display:flex; gap:10px; align-items:flex-start; font-size:15px; }
.athlete-locator svg { color:#096957; flex-shrink:0; }
.context-source { font-size:12px; line-height:1.5; color:#53645e; }
.context-source svg { height:15px; width:15px; vertical-align:middle; }
.coach-controls { display:flex; justify-content:space-between; align-items:center; padding:12px 0; }
.coach-controls span { font-size:13px; color:#53645e; }
.coach-controls button:disabled { opacity:.35; cursor:default; }
.coach-playlist { display:grid; gap:8px; }
.coach-playlist button { display:grid; grid-template-columns:32px minmax(0,1fr) 24px; align-items:center; gap:10px; text-align:left; background:#fff; color:#173a30; border:1px solid #dbe4e0; border-radius:8px; padding:14px; min-height:72px; }
.coach-playlist button[aria-pressed="true"] { background:#e8f4ee; border-color:#176c54; }
.coach-playlist strong { display:block; font-size:15px; overflow-wrap:anywhere; }
.coach-playlist small { display:block; margin-top:4px; font-size:12px; color:#53645e; }
.play-number { font-size:14px; color:#53645e; }
.coach-details { min-width:0; }
.coach-details > section { padding:20px 0; border-bottom:1px solid #dbe4e0; }
.coach-details > section:first-child { padding-top:0; }
.coach-details .quiet { font-size:14px; color:#53645e; line-height:1.6; }
.coach-contact { overflow-wrap:anywhere; font-weight:700; }
.coach-empty, .coach-linked-film { min-height:210px; background:#edf5fb; color:#153e59; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; border-radius:8px; text-decoration:none; }
.coach-linked-film > svg, .coach-empty > svg { height:38px; width:38px; }
.coach-linked-film span { font-size:13px; overflow-wrap:anywhere; }
.coach-linked-film span svg { width:14px; height:14px; vertical-align:middle; }
.coach-full-game { padding:14px 0; border-bottom:1px solid #dbe4e0; }
.coach-full-game summary { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; font-size:15px; font-weight:700; }
.coach-full-game summary span { flex:1; min-width:0; overflow-wrap:anywhere; }
.coach-full-game summary small { display:block; margin-top:4px; font-size:12px; font-weight:400; color:#53645e; }
.coach-full-game .coach-linked-film { margin-top:14px; min-height:150px; }
.coach-preview-action { margin:16px 0 24px; }
@media(min-width:1000px) { .coach-layout { grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); gap:36px; } .coach-video.film-player { height:420px; max-height:60dvh; } }
.intent-entry { padding:24px 20px 16px; max-width:960px; margin:auto; }
.intent-entry h2 { font-size:22px; margin-bottom:18px; }
.intent-doors { display:grid; gap:12px; }
.intent-door { display:grid; grid-template-columns:36px minmax(0,1fr) 22px; gap:12px; align-items:center; min-height:122px; padding:18px 16px; text-decoration:none; border-radius:8px; }
.intent-door strong { display:block; font-size:21px; line-height:1.2; }
.intent-door small { display:block; font-size:13px; line-height:1.5; margin-top:7px; }
.discover-door { background:#075342; color:#fff; }
.discover-door small { color:#daf1e6; }
.find-door { background:#e8f2ff; color:#143e62; border:1px solid #c8dbf0; }
.door-icon svg { width:30px; height:30px; }
.entry-reassurance { font-size:13px; color:var(--muted); margin:16px 0; }
.intent-secondary { max-width:920px; margin:0 auto; padding:0 20px; }
.intent-secondary > a { display:grid; grid-template-columns:24px minmax(0,1fr) 22px; gap:14px; padding:20px 0; border-top:1px solid var(--line); text-decoration:none; align-items:center; }
.intent-secondary strong,.intent-secondary small { display:block; }
.intent-secondary small { margin-top:6px; color:var(--muted); line-height:1.5; }
.preview-foot { max-width:920px; margin:auto; padding:18px 20px 30px; font-size:12px; color:var(--muted); }
.action-pair,.film-add { display:grid; gap:12px; margin:24px 0 18px; }
.athlete-start { margin-top:28px; padding:24px 0 8px; border-top:1px solid var(--line); }
.athlete-start > h2 { margin-bottom:20px; }
.profile-year { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-bottom:20px; }
#main { scroll-margin-top:100px; }
.btn-stack > label:focus-within { outline:3px solid var(--green); outline-offset:3px; }
.film-add > label { cursor:pointer; }
.film-add > label:focus-within,.film-placeholder label:focus-within { outline:3px solid #1768a6; outline-offset:3px; }
.film-item { padding:20px 0; border-bottom:1px solid var(--line); }
.film-item-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.film-item h2 { font-size:20px; margin:12px 0; overflow-wrap:anywhere; }
.clip-select { display:flex; align-items:center; gap:8px; min-height:44px; font-size:13px; }
.clip-select input { width:20px; height:20px; accent-color:var(--bright); }
.film-player { display:block; width:100%; height:320px; max-height:52dvh; object-fit:contain; background:#111916; border-radius:8px; }
.film-link { display:flex; align-items:center; gap:14px; padding:20px; background:#e9f2fb; color:#174f78; border-radius:8px; text-decoration:none; min-height:90px; }
.film-link > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.film-link > svg:first-child { width:36px; height:36px; }
.film-link small { display:block; margin-top:6px; }
.film-context { padding:14px 0; overflow-wrap:anywhere; }
.film-context p { font-size:14px; }
.film-context strong { display:block; }
.film-context small { color:var(--muted); }
.film-tools { display:flex; align-items:center; gap:12px; }
.film-tools > .button { margin-right:auto; }
.clip-actions,.clip-edit-actions,.upload-actions { flex-wrap:wrap; }
.clip-actions { justify-content:flex-start; }
.clip-actions > .button,.clip-edit-actions > .button,.upload-actions > .button { flex:0 0 auto; margin-right:0; white-space:nowrap; }
.clip-actions > .button { min-width:112px; }
.clip-actions .clip-select { flex:0 0 auto; }
.film-placeholder,.empty-film { padding:28px 18px; background:#f3f6f4; display:grid; justify-items:center; gap:14px; text-align:center; border-radius:8px; }
.film-placeholder span { font-size:14px; color:var(--muted); }
.empty-film { background:#e9f3fc; border-radius:0; border-bottom:4px solid #98c5e9; }
.empty-film > svg { box-sizing:content-box; width:38px; height:38px; padding:16px; color:#174b6d; background:#cde7fa; border-radius:50%; }
.empty-film h2 { font-size:27px; }
.presentation-status { display:flex; align-items:center; gap:8px; font-size:12px; color:#5c5741; padding:12px; background:#fff4ce; margin-bottom:24px; }
.athlete-heading { border-bottom:3px solid var(--gold); padding-bottom:24px; }
.athlete-heading h1 { margin:8px 0; overflow-wrap:anywhere; }
.athlete-heading p { color:var(--muted); }
.presentation-section { padding:26px 0; border-top:1px solid var(--line); margin-top:20px; }
.presentation-section > h2 { margin-bottom:16px; }
.presentation-facts { display:grid; gap:20px; margin:0; }
.presentation-facts dt { font-size:13px; color:var(--muted); }
.presentation-facts dd { margin:6px 0 0; font-weight:650; overflow-wrap:anywhere; }
.contact-result { font-size:14px; overflow-wrap:anywhere; }
.empty-message { padding:24px 0; color:var(--muted); }
.finder-band { display:grid; grid-template-columns:36px minmax(0,1fr) 22px; gap:12px; align-items:center; padding:24px 18px; margin:24px 0; text-decoration:none; background:#e8f2ff; color:#143e62; border-radius:8px; }
.finder-band h2 { font-size:20px; }
.finder-band p { margin-top:6px; font-size:14px; }
.saved-college { display:grid; grid-template-columns:42px minmax(0,1fr) 40px; gap:12px; padding:22px 0; border-bottom:1px solid var(--line); }
.school-monogram { display:grid; place-items:center; width:42px; height:42px; background:#fff0d6; color:#715017; border-radius:8px; font-weight:700; }
.saved-college h2 { font-size:20px; overflow-wrap:anywhere; }
.saved-college p { font-size:13px; margin:6px 0; color:var(--muted); }
.saved-college .text-button { display:flex; align-items:center; gap:8px; font-size:14px; margin-top:10px; }
.carry-list { list-style:none; padding:0; margin:0; }
.carry-list li { display:flex; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); }
.carry-list li > svg { color:var(--bright); }
.carry-list li > span { min-width:0; overflow-wrap:anywhere; }
.carry-list a { display:block; font-size:13px; margin-top:8px; }
button.task-row { width:100%; text-align:left; background:#fff; }
.video-error { padding:10px; background:#fff0d6; font-size:14px; }
.private-panel { margin:34px 0 0; padding:22px 0 0; border-top:1px solid var(--line); }
.private-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.private-panel h2 { font-size:22px; margin:0 0 10px; }
.private-panel p { color:var(--muted); line-height:1.55; }
.private-panel .connection-note { margin:16px 0; }
.private-auth { display:grid; gap:18px; max-width:520px; margin:20px 0; }
.account-success { display:flex; gap:12px; align-items:flex-start; max-width:620px; padding:16px; margin:18px 0; border:1px solid #b8dbc9; background:#eefaf3; border-radius:12px; color:var(--ink); }
.account-success svg { flex:0 0 auto; color:var(--green); margin-top:2px; }
.account-success p { margin:0; color:var(--ink); }
.account-types { display:grid; gap:12px; border:0; padding:0; margin:0; min-width:0; }
.account-types legend { font-weight:700; margin-bottom:12px; }
.account-types label { display:flex; align-items:center; gap:10px; min-height:44px; }
.private-auth .inline-check { align-items:start; line-height:1.5; margin:0; }
.private-panel .field-note { overflow-wrap:anywhere; }
.account-athlete { display:grid; gap:4px; padding:16px; margin:18px 0; background:#fff; border:1px solid var(--line); border-radius:8px; }
.account-athlete strong { font-size:18px; overflow-wrap:anywhere; }
.account-athlete span { font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.private-upload { display:grid; gap:14px; margin:18px 0 28px; }
.private-upload .section-head { margin:0; }
.private-file-preview { display:block; width:100%; max-height:320px; object-fit:contain; background:#111916; border-radius:8px; }
.private-clip { display:grid; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.private-clip h3 { font-size:18px; margin:0 0 6px; overflow-wrap:anywhere; }
.private-clip p { margin:0 0 6px; font-size:14px; overflow-wrap:anywhere; }
.private-clip small { color:var(--muted); }
.clip-edit { display:grid; gap:14px; padding:14px; background:#f7faf8; border:1px solid var(--line); border-radius:8px; }
.private-meter { display:grid; gap:10px; }
.private-meter progress { width:100%; height:10px; accent-color:var(--bright); }
.private-preview { margin:24px 0; }
.private-preview iframe { display:block; width:100%; min-height:280px; border:0; background:#111916; border-radius:8px; }
@media (min-width:800px) {
  .private-clip { grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:18px; }
  .private-clip > .private-meter { grid-column:1 / -1; }
  .private-clip > .clip-actions { justify-self:end; justify-content:flex-end; }
  .private-clip .clip-edit { grid-column:1 / -1; }
  .private-preview iframe { min-height:420px; }
}
@media (min-width:600px) {
  .intent-doors { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .intent-hero { height:310px; }
  .intent-hero > div { left:max(32px,calc((100% - 920px)/2)); }
  .intent-hero h1 { font-size:42px; }
  .intent-entry { padding:28px 32px 12px; }
  .intent-secondary,.preview-foot { padding-left:12px; padding-right:12px; }
  .intent-door { min-height:158px; }
  .action-pair,.film-add,.presentation-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:370px) {
  .intent-hero { height:210px; }
  .intent-hero h1 { font-size:28px; }
  .intent-entry { padding:20px 16px 8px; }
  .intent-door { padding:14px 12px; gap:10px; grid-template-columns:28px minmax(0,1fr) 20px; }
  .intent-door strong { font-size:19px; }
  .door-icon svg { width:26px; height:26px; }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
a {
  color: var(--green);
}
a,
button,
input,
select,
textarea,
summary {
  touch-action: manipulation;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid #229876;
  outline-offset: 4px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--bright);
  outline-offset: 2px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 30px;
  line-height: 1.16;
  font-weight: 750;
}
h2 {
  font-size: 23px;
  line-height: 1.25;
}
h3 {
  font-size: 17px;
  line-height: 1.4;
}
p {
  line-height: 1.6;
}
img {
  max-width: 100%;
  display: block;
}
svg {
  width: 22px;
  height: 22px;
  flex: none;
  stroke-width: 1.8;
}
button svg,
button span {
  pointer-events: none;
}
strong {
  font-weight: 700;
}
small {
  font-size: 12px;
}
::selection {
  background: #d0e8dd;
}
.skip-link {
  position: fixed;
  top: -70px;
  left: 15px;
  z-index: 100;
  background: white;
  padding: 14px;
}
.skip-link:focus {
  top: 10px;
}
[hidden] {
  display: none !important;
}
.app-shell {
  min-height: 100dvh;
  max-width: 1440px;
  margin: auto;
  background: white;
}
.app-header {
  min-height: var(--header-height);
  padding: 8px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--surface-header);
  color: white;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  text-decoration: none;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 22px;
  color: white;
}
.brand img {
  width: 113px;
  height: auto;
}
.brand > span {
  font-size: 10px;
  font-weight: 700;
  border-left: 1px solid var(--border-brand);
  padding-left: 22px;
}
.brand-finder-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--text-on-header);
  font-size:13px;
  font-weight:700;
  text-underline-offset:5px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:13px; font-weight:650; color:inherit; text-decoration:none; white-space:nowrap; }
.home-link svg { width:18px; height:18px; flex-shrink:0; }
.home-link[aria-current="page"] { text-decoration:underline; text-underline-offset:5px; }
.mission-home .app-header .home-link { display:none; }
.dialog-actions { display:flex; align-items:center; gap:16px; }
.preview-label {
  background: none;
  color: var(--text-on-header-dim);
  font-size: 12px;
  border: 0;
  border-radius: 4px;
  padding: 8px;
  min-height: 44px;
}
.icon-button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 50%;
  flex: none;
}
.icon-button:hover {
  background: var(--surface-hover);
}
.app-header .icon-button {
  color: white;
}
main {
  min-height: calc(100dvh - var(--header-height));
  padding-bottom: calc(94px + env(safe-area-inset-bottom));
  outline: none;
}
.desktop-nav {
  display: none;
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fffffff7;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  z-index: 30;
  backdrop-filter: blur(16px);
}
.nav-item {
  background: none;
  color: var(--muted);
  text-decoration: none;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  position: relative;
}
.nav-item.active {
  color: var(--green);
}
.nav-item.active:before {
  content: "";
  position: absolute;
  top: 0;
  width: 34px;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
}
.nav-item.active svg {
  stroke-width: 2.4;
}
.onboarding .bottom-nav,
.onboarding .desktop-nav {
  display: none;
}
.onboarding main {
  padding-bottom: 0;
}
.view {
  max-width: 800px;
  margin: auto;
  padding: 28px 22px 20px;
  animation: arrive 0.2s ease-out;
}
.eyebrow {
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  line-height: 1.6;
}
.subtle {
  color: var(--muted);
  font-size: 14px;
}
.lead {
  font-size: 16px;
  color: var(--muted);
  margin-top: 12px;
  max-width: 580px;
}
.view-head {
  margin-bottom: 27px;
}
.view-head .eyebrow {
  margin-bottom: 8px;
}
.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.head-row > div {
  min-width: 0;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0 13px;
  gap: 10px;
}
.section-head h2 {
  font-size: 18px;
}
.section-head a,
.text-button {
  border: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 13px;
  color: var(--green);
  padding: 8px 0;
  min-height: 40px;
}
.button {
  min-height: 52px;
  padding: 14px 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 6px;
  background: var(--green);
  color: white;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid var(--green);
  text-align: center;
  line-height: 1.35;
}
.button:hover {
  background: #0c5547;
}
.button.secondary {
  background: white;
  color: var(--green);
  border-color: #c5d4cb;
}
.button.text-button {
  background: transparent;
  color: var(--green);
  border: 0;
  padding: 8px 0;
  min-height: 44px;
  justify-content: flex-start;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.button.light {
  background: white;
  color: var(--green);
  border-color: white;
}
.button.gold {
  background: var(--gold);
  color: var(--green);
  border-color: var(--gold);
}
.button.full {
  width: 100%;
}
.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.button-row > * {
  flex: 1;
}
.btn-stack {
  display: grid;
  gap: 10px;
  margin-top: 25px;
}
.back-link {
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  min-height: 44px;
  margin-bottom: 13px;
  padding: 0;
  color: var(--muted);
}
.pill {
  font-size: 11px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: var(--mint);
  color: var(--green);
  border-radius: 4px;
  font-weight: 650;
}
.pill svg {
  width: 13px;
  height: 13px;
}
.pill.blue {
  background: var(--blue);
  color: #315585;
}
.pill.warm {
  background: #faf0cf;
  color: #775813;
}
.welcome {
  max-width: 1050px;
  margin: auto;
}
.welcome-photo {
  height: 390px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0b503d;
}
.welcome-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
.welcome-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #082d29e8 0%, transparent 62%);
  z-index: 1;
}
.welcome-copy {
  position: absolute;
  bottom: 28px;
  left: 24px;
  right: 24px;
  color: white;
  z-index: 2;
}
.welcome-copy .eyebrow {
  color: #e4f2db;
  margin-bottom: 9px;
}
.welcome-copy h1 {
  font-size: 35px;
  max-width: 450px;
}
.welcome-start {
  padding: 25px 24px 30px;
}
.welcome-start h2 {
  font-size: 22px;
}
.welcome-start > p {
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}
.role-options {
  display: grid;
  gap: 10px;
  margin-top: 21px;
}
.role-button {
  display: flex;
  align-items: center;
  gap: 13px;
  background: white;
  border: 1px solid #b6c8bc;
  border-radius: 6px;
  padding: 16px;
  text-align: left;
  min-height: 68px;
}
.role-button:first-child {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.role-button > svg:last-child {
  margin-left: auto;
  width: 18px;
}
.role-button strong {
  display: block;
  font-size: 15px;
}
.role-button small {
  font-size: 12px;
  display: block;
  margin-top: 4px;
  opacity: 0.75;
}
.welcome-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.welcome-footer small {
  font-size: 10px;
  color: var(--muted);
}
.onboarding-view {
  max-width: 590px;
  padding-top: 25px;
}
.step-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 27px;
  color: var(--muted);
  font-size: 12px;
}
.step-line progress {
  margin-left: auto;
  width: 80px;
  height: 5px;
  accent-color: var(--green);
}
.question-title {
  margin-bottom: 10px;
}
.question-sub {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 30px;
}
.field {
  display: block;
  margin: 19px 0;
}
.field > span {
  font-size: 13px;
  font-weight: 650;
  display: block;
  margin-bottom: 8px;
}
.field small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 400;
}
.field input,
.field textarea,
.field select,
.search-input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 13px;
  background: white;
  border: 1px solid #b9cbbf;
  color: var(--ink);
  border-radius: 6px;
  font-size: 16px;
}
.field textarea {
  min-height: 105px;
  resize: vertical;
  line-height: 1.6;
}
.field input:read-only {
  background: var(--bg);
}
.form-grid {
  display: grid;
  gap: 0 16px;
}
.grade-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}
.grade-choice {
  height: 79px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 700;
  font-size: 25px;
}
.grade-choice small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
}
.grade-choice[aria-pressed="true"],
.choice[aria-pressed="true"] {
  background: var(--mint);
  border-color: var(--bright);
  box-shadow: inset 0 0 0 1px var(--bright);
}
.choice-list {
  display: grid;
  gap: 12px;
  margin: 23px 0;
}
.choice {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 19px 16px;
  min-height: 82px;
}
.choice strong {
  font-size: 15px;
}
.choice small {
  display: block;
  margin-top: 6px;
  line-height: 1.5;
  color: var(--muted);
}
.choice .choice-check {
  margin-left: auto;
  color: var(--green);
  width: 19px;
}
.form-footer {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.save-note {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 13px;
}
.field-error {
  color: #a3312c;
  font-size: 13px;
  margin-top: 10px;
}
.field-note {
  display: block;
  padding: 14px 16px;
  background: var(--blue);
  color: #315585;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 6px;
  margin: 18px 0;
}
.inline-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  margin: 18px 0;
}
.inline-check input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--green);
}
.greeting {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.greeting svg {
  width: 16px;
  color: #8a6a12;
}
.today-title {
  font-size: 28px;
  max-width: 480px;
}
.today-title em {
  font-style: normal;
  color: var(--bright);
}
.grade-note {
  margin-top: 11px;
  font-size: 14px;
  color: var(--muted);
  max-width: 560px;
}
.next-step {
  background: var(--green);
  color: white;
  padding: 24px;
  margin: 25px -22px 0;
  position: relative;
}
.next-step .eyebrow {
  color: #c3dbcb;
}
.next-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.time {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.8;
}
.time svg {
  width: 13px;
  height: 13px;
}
.next-step h2 {
  font-size: 24px;
  max-width: 480px;
}
.next-step p {
  font-size: 14px;
  color: #d4e6db;
  margin: 8px 0 20px;
  max-width: 540px;
}
.next-step .button {
  min-height: 48px;
}
.progress-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.progress-strip > div {
  padding-left: 17px;
  border-left: 1px solid var(--line);
}
.progress-strip > div:first-child {
  border-left: 0;
  padding-left: 0;
}
.progress-strip strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
}
.progress-strip span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.task-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 19px 0;
  width: 100%;
  background: white;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  text-align: left;
}
.task-row > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.task-row strong {
  display: block;
  font-size: 14px;
}
.task-row small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}
.task-row > svg:last-child {
  width: 17px;
  color: #7c8b83;
}
.task-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mint);
  color: var(--green);
  border-radius: 8px;
  flex: none;
}
.task-icon.blue {
  background: var(--blue);
  color: #325e8b;
}
.task-icon.coral {
  background: var(--coral);
  color: #ab5040;
}
.task-icon.gold {
  background: #faf3d9;
  color: #8c6a10;
}
.task-icon.done {
  background: var(--mint);
  color: var(--bright);
}
.learn-band {
  margin: 28px -22px 0;
  padding: 24px 22px;
  background: #edf3f8;
  display: flex;
  align-items: center;
  gap: 17px;
}
.learn-band h3 {
  font-size: 17px;
  margin-bottom: 5px;
}
.learn-band p {
  font-size: 13px;
  color: #4d6473;
}
.learn-band .text-button {
  font-size: 13px;
}
.learn-band > svg {
  width: 36px;
  height: 36px;
  color: #345d82;
}
.footnote {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 24px;
}
.footnote a {
  color: inherit;
}
.section-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 15px;
}
.profile-banner {
  background: var(--green);
  margin: -28px -22px 24px;
  padding: 29px 22px;
  color: white;
  display: flex;
  align-items: center;
  gap: 16px;
}
.avatar {
  height: 70px;
  width: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--green);
  font:
    700 28px Barlow,
    sans-serif;
  flex: none;
}
.profile-banner h1 {
  font-size: 25px;
  overflow-wrap: anywhere;
}
.profile-banner .eyebrow {
  color: #c7dfd0;
  margin-bottom: 6px;
}
.profile-banner p {
  font-size: 13px;
  color: #d4e6db;
  margin-top: 6px;
}
.profile-banner button {
  color: white;
  margin-left: auto;
}
.profile-progress {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 13px;
}
.profile-progress progress {
  height: 8px;
  accent-color: var(--green);
  width: 110px;
  margin: auto 0;
}
.intro-preview {
  font-size: 15px;
  line-height: 1.75;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.reuse-note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--mint);
  padding: 16px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.65;
  margin: 20px 0;
}
.reuse-note svg {
  width: 19px;
  height: 19px;
  color: var(--bright);
  margin-top: 2px;
}
.empty-media {
  background: #edf3f8;
  text-align: center;
  padding: 30px 20px;
  margin: 20px 0;
  border-radius: 8px;
}
.empty-media > svg {
  width: 38px;
  height: 38px;
  color: #345d82;
  margin-bottom: 12px;
}
.empty-media h3 {
  font-size: 17px;
}
.empty-media p {
  font-size: 13px;
  color: #5c6f7c;
  margin-top: 7px;
}
.film-points {
  list-style: none;
  padding: 0;
  counter-reset: point;
}
.film-points li {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 17px 0;
  font-size: 14px;
  line-height: 1.6;
  counter-increment: point;
}
.film-points li:before {
  content: counter(point);
  width: 25px;
  height: 25px;
  background: var(--mint);
  color: var(--green);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 12px;
  font-weight: 700;
}
.resource-row {
  padding: 17px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  text-decoration: none;
}
.resource-row svg:last-child {
  width: 16px;
  margin-left: auto;
}
.sample-file {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13px;
}
.sample-file small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.sample-file > div {
  flex: 1;
}
.status-banner {
  padding: 15px 17px;
  background: var(--mint);
  color: var(--green);
  font-size: 13px;
  line-height: 1.6;
  margin: 20px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.status-banner svg {
  width: 19px;
  height: 19px;
  margin-top: 1px;
}
.school-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 18px;
}
.school-cover {
  background: #a71336;
  height: 128px;
  padding: 21px;
  color: white;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.school-cover .school-initial {
  font:
    700 51px Barlow,
    sans-serif;
  font-style: italic;
}
.school-cover span:last-child {
  font-size: 10px;
  line-height: 1.6;
  text-align: right;
  font-weight: 700;
}
.school-info {
  padding: 20px;
}
.school-info h2 {
  font-size: 21px;
  margin: 9px 0 5px;
}
.school-info p {
  font-size: 13px;
  color: var(--muted);
}
.school-info .button {
  margin-top: 18px;
  min-height: 47px;
}
.school-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
}
.school-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 20px;
  padding-left: 13px;
}
.school-search input {
  border: 0;
  background: transparent;
}
.school-search svg {
  color: var(--muted);
  width: 19px;
}
.empty-search {
  padding: 25px 0;
  color: var(--muted);
  font-size: 14px;
}
.school-title {
  margin-top: 14px;
  font-size: 29px;
}
.school-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.school-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.school-actions .button {
  min-height: 43px;
  font-size: 13px;
}
.school-intro {
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.75;
}
.three-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  margin-top: 25px;
  gap: 12px;
}
.lane-tab {
  background: white;
  padding: 14px 0;
  text-align: left;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.lane-tab[aria-selected="true"] {
  border-color: var(--green);
  color: var(--green);
  font-weight: 700;
}
.lane-tab svg {
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: 9px;
}
.lane-content {
  padding: 23px 0;
}
.lane-content > h2 {
  font-size: 21px;
  margin-bottom: 10px;
}
.lane-content > p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}
.stage-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 22px 0;
  font-size: 13px;
  line-height: 1.6;
}
.stage-line svg {
  color: var(--bright);
  width: 19px;
  margin-top: 2px;
}
.prepared-count {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--mint);
  padding: 20px;
  margin: 23px 0;
}
.prepared-count > strong {
  font-size: 34px;
  font-weight: 750;
}
.prepared-count > span {
  font-size: 13px;
  line-height: 1.5;
}
.answer-list {
  margin: 0;
}
.answer-item {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  align-items: center;
}
.answer-item > div {
  flex: 1;
  min-width: 0;
}
.answer-item dt {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 5px;
}
.answer-item dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.answer-item > svg {
  color: var(--bright);
  width: 16px;
}
.missing {
  color: #957437;
}
.connection-note {
  border-left: 3px solid #c79f35;
  background: #fcf8eb;
  padding: 15px 16px;
  font-size: 13px;
  line-height: 1.6;
  margin: 22px 0;
}
.connection-note strong {
  display: block;
  margin-bottom: 4px;
}
.details {
  border-bottom: 1px solid var(--line);
  padding: 17px 0;
}
.details summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  min-height: 30px;
}
.details p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.75;
}
.source-line {
  font-size: 11px;
  color: var(--muted);
  margin-top: 20px;
  line-height: 1.7;
}
.source-line a {
  color: inherit;
  text-underline-offset: 3px;
}
.checklist {
  list-style: none;
  margin: 22px 0;
  padding: 0;
}
.checklist li {
  display: flex;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
}
.checklist svg {
  color: var(--green);
  width: 19px;
  height: 19px;
  margin-top: 2px;
}
.checklist small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.timeline {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.timeline li {
  border-left: 1px solid #c8d9ce;
  padding: 0 0 24px 22px;
  margin-left: 8px;
  position: relative;
}
.timeline li:before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bright);
  position: absolute;
  left: -5px;
  top: 5px;
  border: 2px solid white;
}
.timeline strong {
  font-size: 14px;
  line-height: 1.5;
}
.timeline p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.timeline small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 5px;
}
.timeline-empty {
  padding: 22px 0;
  font-size: 14px;
  color: var(--muted);
}
.plan-stage {
  display: flex;
  gap: 14px;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
}
.plan-number {
  height: 30px;
  width: 30px;
  flex: none;
  background: var(--mint);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 750;
  border-radius: 50%;
}
.plan-stage h3 {
  font-size: 16px;
}
.plan-stage p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 7px;
}
.plan-stage .text-button {
  margin-top: 5px;
}
.plan-stage.active .plan-number {
  background: var(--green);
  color: white;
}
.scope-note {
  font-size: 12px;
  color: var(--muted);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.help-topic {
  margin: 28px 0;
}
.help-topic > h2 {
  font-size: 20px;
  margin-bottom: 8px;
}
.help-item p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.help-item {
  border-bottom: 1px solid var(--line);
}
.help-item > summary {
  cursor: pointer;
  padding: 16px 4px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.help-answer {
  padding: 0 4px 20px;
}
.help-sources {
  margin-top: 12px;
}
.help-sources small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.help-item a {
  font-size: 14px;
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  overflow-wrap: anywhere;
}
.help-item a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.account-recommendation {
  border-left: 3px solid var(--bright);
  padding: 18px 20px;
  background: var(--mint);
  margin: 22px 0;
}
.account-recommendation h2 {
  font-size: 20px;
  margin: 8px 0;
}
.account-recommendation p {
  font-size: 13px;
  line-height: 1.7;
}
.review-success {
  text-align: center;
  padding: 24px 0;
}
.success-icon {
  display: grid;
  place-items: center;
  background: var(--mint);
  color: var(--green);
  height: 64px;
  width: 64px;
  margin: 0 auto 19px;
  border-radius: 50%;
}
.success-icon svg {
  width: 30px;
  height: 30px;
}
.review-success h1 {
  font-size: 28px;
  margin-bottom: 13px;
}
.review-success p {
  font-size: 14px;
  color: var(--muted);
}
dialog {
  position: fixed;
  width: calc(100% - 24px);
  max-width: 550px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  border: 0;
  border-radius: 8px;
  padding: 0 24px 26px;
  box-shadow: 0 18px 80px var(--shadow-dialog);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-wrap: anywhere;
}
dialog::backdrop {
  background: var(--overlay-dialog);
  backdrop-filter: blur(3px);
}
.sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}
.sheet-top .eyebrow {
  font-size: 9px;
}
.sheet-top .icon-button {
  margin-right: -8px;
}
#sheet-title {
  font-size: 24px;
  line-height: 1.25;
  margin: 7px 0 15px;
}
#sheet-content > p {
  font-size: 14px;
  color: var(--muted);
  margin: 10px 0;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(93px + env(safe-area-inset-bottom));
  transform: translate(-50%, 15px);
  opacity: 0;
  pointer-events: none;
  padding: 13px 18px;
  background: var(--surface-toast);
  color: white;
  font-size: 13px;
  border-radius: 6px;
  box-shadow: 0 6px 20px var(--shadow-toast);
  z-index: 100;
  width: max-content;
  max-width: calc(100% - 32px);
  text-align: center;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast.has-undo { bottom:calc(16px + env(safe-area-inset-bottom)); width:460px; text-align:left; padding:14px 16px 8px; border-top:4px solid var(--accent-gold-bright); line-height:1.5; }
.toast.has-undo.show { pointer-events:auto; }
#toast-actions:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; }
#toast-actions button { min-width:44px; min-height:44px; color:var(--text-on-dark); background:none; font-size:14px; font-weight:700; }
#toast-actions [data-action="undo-checklist"] { text-decoration:underline; text-underline-offset:4px; }
#toast-actions [data-action="dismiss-toast"] { display:grid; place-items:center; }
#toast-actions svg { width:20px; height:20px; }
#toast-actions button:focus-visible { outline:2px solid var(--accent-gold-bright); outline-offset:1px; }
.noscript {
  padding: 24px;
}
.danger-button {
  color: #a3312c;
}
.storage-error {
  background: #fbece7;
  color: #922d24;
  font-size: 12px;
  padding: 12px 22px;
}
.offline-label {
  background: #faf0cf;
  color: #775813;
  font-size: 12px;
  padding: 10px 22px;
}
.copy-box {
  width: 100%;
  font-size: 13px;
  line-height: 1.7;
  min-height: 210px;
  resize: vertical;
  border: 1px solid var(--line);
  padding: 13px;
}
.welcome-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.source-line svg {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 3px;
}
.section-head a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.section-head a svg {
  width: 14px;
  height: 14px;
}
.back-link {
  display: flex;
  width: max-content;
}
.button {
  overflow-wrap: anywhere;
}
.theme-emerald {
  --class-bg: #00664d;
  --class-ink: #ffffff;
  --class-accent: #00664d;
  --class-soft: #e7f4ee;
}
.theme-sky {
  --class-bg: #cce9fa;
  --class-ink: #153c50;
  --class-accent: #236a8e;
  --class-soft: #edf7fd;
}
.theme-coral {
  --class-bg: #f6b6a6;
  --class-ink: #522c2c;
  --class-accent: #a44434;
  --class-soft: #fff0eb;
}
.theme-sunflower {
  --class-bg: #efda78;
  --class-ink: #39391e;
  --class-accent: #746017;
  --class-soft: #fcf8e7;
}
.class-welcome .welcome-photo {
  height: 188px;
}
.class-welcome .welcome-photo img {
  object-position: 50% 20%;
}
.class-welcome .welcome-photo:after {
  background: linear-gradient(0deg, #082d29e8, transparent 95%);
}
.class-welcome .welcome-copy {
  left: 22px;
  right: 22px;
  bottom: 20px;
}
.class-welcome .welcome-copy h1 {
  font-size: 28px;
  line-height: 1.12;
}
.class-welcome .welcome-copy .eyebrow {
  font-size: 9px;
}
.class-intro {
  padding: 23px 22px 15px;
}
.class-intro h2 {
  font-size: 22px;
}
.class-intro p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
}
.class-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 22px 17px;
  border-bottom: 1px solid var(--line);
}
.class-selector button {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 10px 0 12px;
  background: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
}
.class-selector strong {
  font-size: 17px;
}
.class-selector span {
  font-size: 10px;
}
.class-selector [aria-pressed="true"] {
  border-color: var(--green);
  color: var(--green);
}
.class-carousel {
  --card-width: calc(100% - 14px);
  display: flex;
  gap: 14px;
  padding: 0 22px;
  scroll-padding: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  position: relative;
}
.class-carousel:after {
  content: "";
  flex: 0 0 max(0px, calc(100% - var(--card-width) - 14px));
}
.class-carousel::-webkit-scrollbar {
  display: none;
}
.class-card {
  flex: 0 0 var(--card-width);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--class-bg);
  color: var(--class-ink);
  border-radius: 8px;
  padding: 21px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.class-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  font-size: 12px;
  font-weight: 650;
}
.class-card-top svg {
  width: 26px;
  height: 26px;
}
.class-card h3 {
  font-size: 27px;
  line-height: 1.13;
  min-height: 62px;
  max-width: 290px;
  font-weight: 750;
}
.class-card ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  display: grid;
  gap: 14px;
}
.class-card li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.class-card li svg {
  width: 20px;
  height: 20px;
}
.class-card .class-cta {
  background: white;
  border-color: transparent;
  color: #192d29;
  margin-top: auto;
  min-height: 50px;
}
.class-card .class-cta:hover {
  background: #f4f7f4;
}
.class-card > small {
  font-size: 10px;
  line-height: 1.5;
  margin-top: 12px;
  text-align: center;
}
.class-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 7px 22px 12px;
}
.class-pagination span {
  font-size: 11px;
  width: 135px;
  text-align: center;
  color: var(--muted);
}
.journey-promise {
  background: #f1f6f3;
  padding: 28px 22px;
}
.journey-promise h2 {
  font-size: 20px;
  text-align: center;
}
.promise-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px auto;
}
.promise-steps > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
}
.promise-steps svg {
  width: 32px;
  height: 32px;
  color: var(--bright);
  margin-bottom: 5px;
}
.promise-steps > div:nth-child(2) svg {
  color: #a44434;
}
.promise-steps > div:nth-child(3) svg {
  color: #236a8e;
}
.promise-steps strong {
  font-size: 12px;
}
.promise-steps span {
  font-size: 11px;
  color: var(--muted);
}
.journey-promise > p {
  font-size: 13px;
  text-align: center;
  max-width: 420px;
  margin: auto;
}
.class-welcome > .welcome-footer {
  padding: 5px 22px 30px;
}
.roadmap-view .back-link {
  margin-bottom: 18px;
}
.roadmap-banner {
  margin: 0 -22px;
  padding: 27px 22px 23px;
  background: var(--class-bg);
  color: var(--class-ink);
}
.roadmap-year {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 14px;
}
.roadmap-banner h1 {
  font-size: 31px;
  max-width: 450px;
}
.roadmap-banner > p {
  font-size: 15px;
  line-height: 1.5;
  margin: 13px 0 20px;
  max-width: 500px;
}
.roadmap-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  min-height: 24px;
}
.roadmap-meta button {
  background: transparent;
  color: inherit;
  text-decoration: underline;
  min-height: 44px;
  padding: 0 4px;
}
.roadmap-reassurance {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 22px 0;
}
.roadmap-reassurance svg {
  color: var(--class-accent);
  margin-top: 3px;
}
.roadmap-reassurance p {
  font-size: 13px;
  color: var(--muted);
}
.roadmap-timeline {
  margin-top: 10px;
}
.roadmap-group {
  position: relative;
  padding-bottom: 32px;
}
.roadmap-group:before {
  content: "";
  position: absolute;
  width: 2px;
  top: 38px;
  bottom: 0;
  left: 17px;
  background: var(--line);
}
.roadmap-group:last-child:before {
  bottom: 36px;
}
.roadmap-group-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.roadmap-marker {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--class-accent);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.roadmap-group-heading h2 {
  font-size: 20px;
  line-height: 1.3;
  padding-top: 4px;
}
.roadmap-group-heading p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.roadmap-milestones {
  margin-left: 50px;
}
.milestone {
  border-bottom: 1px solid var(--line);
}
.milestone summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  cursor: pointer;
}
.milestone summary::-webkit-details-marker {
  display: none;
}
.milestone summary > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.milestone summary strong {
  display: block;
  font-size: 15px;
  line-height: 1.4;
}
.milestone summary small {
  display: block;
  font-size: 10px;
  margin-top: 5px;
  color: var(--class-accent);
  font-weight: 650;
}
.milestone-icon {
  color: var(--class-accent);
}
.milestone summary > svg {
  width: 16px;
  height: 16px;
}
.milestone[open] summary > svg {
  transform: rotate(180deg);
}
.milestone-body {
  padding: 0 0 20px;
  display: grid;
  justify-items: start;
  gap: 15px;
}
.milestone-body p {
  font-size: 14px;
  color: var(--muted);
}
.milestone-body .button {
  width: 100%;
  font-size: 13px;
}
.milestone-source {
  font-size: 11px;
  line-height: 1.5;
}
.milestone-source svg {
  width: 12px;
  height: 12px;
  vertical-align: middle;
}
.deadline-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.deadline-link span {
  flex: 1;
}
.deadline-link strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
}
.deadline-link small {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 5px;
  color: var(--muted);
}
.roadmap-begin {
  margin: 0 0 20px;
}
.roadmap-begin p {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
}
.roadmap-shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--class-bg);
  color: var(--class-ink);
  margin: 22px 0 0;
  padding: 17px;
  text-decoration: none;
}
.roadmap-shortcut span {
  flex: 1;
}
.roadmap-shortcut strong,
.roadmap-shortcut small {
  display: block;
}
.roadmap-shortcut strong {
  font-size: 15px;
}
.roadmap-shortcut small {
  margin-top: 4px;
  font-size: 11px;
}
@keyframes arrive {
  from {
    opacity: 0.6;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 600px) {
  .view {
    padding: 38px 38px 30px;
  }
  .next-step {
    margin: 26px 0 0;
    border-radius: 8px;
    padding: 28px;
  }
  .learn-band {
    margin: 28px 0 0;
    border-radius: 6px;
  }
  .profile-banner {
    margin: -38px -38px 28px;
    padding: 38px;
  }
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .welcome-photo {
    height: 440px;
  }
  .welcome-photo img {
    object-position: 50% 43%;
  }
  .welcome-copy {
    left: 38px;
    bottom: 34px;
  }
  .welcome-copy h1 {
    font-size: 42px;
  }
  .welcome-start {
    padding: 30px 38px;
    max-width: 660px;
    margin: auto;
  }
  .role-options {
    grid-template-columns: 1fr 1fr;
  }
  .role-button {
    padding: 17px 13px;
  }
  .role-button small {
    font-size: 11px;
  }
  .welcome-start h2 {
    font-size: 25px;
  }
  .onboarding-view {
    padding-top: 32px;
  }
  .school-card {
    max-width: 570px;
  }
  .learn-band {
    padding: 22px;
  }
  .today-title {
    font-size: 33px;
  }
}
@media (min-width: 1000px) {
  .app-shell {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    grid-template-rows: 78px 1fr;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .app-header {
    grid-column: 1/-1;
    padding-left: 28px;
    padding-right: 33px;
  }
  .desktop-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 37px 20px;
    border-right: 1px solid var(--line);
    align-self: start;
    position: sticky;
    top: 78px;
    height: calc(100dvh - 78px);
  }
  .desktop-nav .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    padding: 15px;
    gap: 13px;
    border-radius: 6px;
    font-size: 14px;
    min-height: 53px;
  }
  .desktop-nav .nav-item.active {
    background: var(--mint);
  }
  .desktop-nav .nav-item.active:before {
    display: none;
  }
  .desktop-nav .nav-footer {
    margin-top: auto;
    padding: 20px 15px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--muted);
  }
  .bottom-nav {
    display: none;
  }
  main {
    padding-bottom: 35px;
  }
  .view {
    max-width: 820px;
    padding: 45px 48px;
  }
  .profile-banner {
    margin: -45px -48px 28px;
    padding: 35px 48px;
  }
  .onboarding.app-shell {
    display: block;
  }
  .onboarding .welcome {
    max-width: none;
  }
  .onboarding .welcome-photo {
    height: 420px;
  }
  .onboarding .welcome-photo img {
    object-position: 50% 42%;
  }
  .onboarding .welcome-copy {
    left: max(38px, calc((100% - 780px) / 2));
  }
  .welcome-start {
    max-width: 780px;
  }
  .onboarding-view {
    max-width: 610px;
    padding: 38px 36px;
  }
  .toast {
    bottom: 30px;
  }
  .next-step {
    padding: 29px;
  }
  .today-title {
    font-size: 35px;
  }
  .learn-band {
    margin-top: 33px;
  }
}
@media (max-width: 600px) {
  .brand > span {
    display: none;
  }
  .brand-finder-link {
    display: none;
  }
}
@media (max-width: 370px) {
  .view {
    padding-left: 17px;
    padding-right: 17px;
  }
  .welcome-copy h1 {
    font-size: 30px;
  }
  .welcome-copy {
    left: 20px;
    right: 20px;
    bottom: 23px;
  }
  .welcome-photo {
    height: 325px;
  }
  .welcome-start {
    padding: 22px 20px;
  }
  .welcome-start h2 {
    font-size: 20px;
  }
  .app-header {
    padding: 8px 14px;
  }
  .brand img { width:80px; }
  .header-actions { gap:2px; }
  .home-link { gap:4px; font-size:12px; }
  .next-step {
    margin-left: -17px;
    margin-right: -17px;
    padding: 22px 17px;
  }
  .profile-banner {
    margin-left: -17px;
    margin-right: -17px;
    padding-left: 17px;
    padding-right: 17px;
  }
  .learn-band {
    margin-left: -17px;
    margin-right: -17px;
  }
  .grade-options {
    gap: 7px;
  }
  .grade-choice {
    font-size: 23px;
  }
  .button-row {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
@media (min-width: 600px) {
  .class-welcome .welcome-photo {
    height: 250px;
  }
  .class-welcome .welcome-copy {
    left: 38px;
    bottom: 27px;
  }
  .class-welcome .welcome-copy h1 {
    font-size: 36px;
  }
  .class-entry {
    max-width: 900px;
    margin: auto;
  }
  .class-selector {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
  .class-intro {
    text-align: center;
  }
  .class-carousel {
    --card-width: 360px;
  }
  .class-card h3 {
    font-size: 30px;
    min-height: 68px;
  }
  .class-card {
    padding: 25px;
  }
  .class-card > small {
    font-size: 11px;
  }
  .promise-steps {
    max-width: 550px;
  }
  .roadmap-banner {
    margin: 0;
    padding: 30px;
  }
  .roadmap-group-heading {
    gap: 20px;
  }
  .roadmap-milestones {
    margin-left: 56px;
  }
  .roadmap-group-heading h2 {
    font-size: 22px;
  }
  .roadmap-reassurance {
    padding: 25px 0;
  }
  .milestone-body {
    padding-left: 32px;
  }
  .milestone-body .button {
    width: auto;
  }
  #sheet .role-options {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 370px) {
  .class-welcome .welcome-copy h1 {
    font-size: 25px;
  }
  .class-card {
    padding: 18px;
  }
  .class-card h3 {
    font-size: 24px;
  }
  .class-card li {
    font-size: 13px;
    gap: 9px;
  }
  .class-intro h2 {
    font-size: 21px;
  }
  .class-selector {
    margin-left: 17px;
    margin-right: 17px;
  }
  .class-selector span {
    font-size: 9px;
  }
  .roadmap-banner {
    margin-left: -17px;
    margin-right: -17px;
    padding-left: 17px;
    padding-right: 17px;
  }
  .roadmap-banner h1 {
    font-size: 28px;
  }
  .roadmap-milestones {
    margin-left: 40px;
  }
  .roadmap-group-heading {
    gap: 10px;
  }
  .roadmap-group-heading h2 {
    font-size: 19px;
  }
}
@media (min-width: 1000px) {
  .class-entry {
    max-width: 1200px;
  }
  .class-carousel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 28px;
  }
  .class-carousel:after {
    display: none;
  }
  .class-card {
    padding: 22px 18px;
  }
  .class-card h3 {
    font-size: 25px;
    min-height: 86px;
  }
  .class-card ul {
    flex: 1;
  }
  .class-card li {
    font-size: 13px;
  }
  .class-card[data-selected="true"] {
    outline: 2px solid var(--class-ink);
    outline-offset: -6px;
  }
  .class-pagination {
    display: none;
  }
}
.checklist-page { padding-bottom:32px; background:#fff; }
.checklist-heading { padding:24px 22px 18px; border-top:5px solid #f9df78; }
.checklist-heading .eyebrow { color:#47695f; font-size:11px; }
.checklist-heading h1 { font-size:34px; line-height:1.15; margin:10px 0; }
.checklist-heading p { font-size:14px; line-height:1.5; color:#52685e; margin:0 0 8px; }
.checklist-owner { display:flex; align-items:center; gap:6px; font-size:13px; color:#235b49; min-height:22px; }
.checklist-owner svg { width:18px; height:18px; }
.checklist-page .class-selector { max-width:none; margin:0 22px; }
.checklist-page .class-selector button { padding:8px 0; }
.checklist-page .class-selector small { display:block; height:14px; font-size:9px; line-height:14px; color:#15604c; }
.checklist-page .class-selector span { font-size:11px; }
.checklist-page .class-selector [data-current="true"] strong { color:#0d664e; }
.checklist-page .class-pagination { display:flex; padding:2px 22px 6px; }
.class-viewport { overflow:hidden; overflow:clip; }
.checklist-page .class-carousel { --card-width:calc(100% - 28px); display:flex; align-items:flex-start; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:6px 22px 24px; }
.checklist-page .class-carousel:after { display:block; }
.checklist-card { --class-line:color-mix(in srgb,var(--class-ink) 24%,transparent); padding:22px 16px; outline:0; }
.checklist-card[data-current="true"] { box-shadow:inset 0 0 0 3px #e6c568; }
.checklist-card[data-selected="true"] { outline:0; }
.checklist-card .class-card-top { min-height:26px; font-size:11px; margin-bottom:9px; }
.class-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; }
.class-badge svg { width:19px; height:19px; }
.checklist-card h2 { font-size:34px; line-height:1.1; margin:0; overflow-wrap:anywhere; }
.class-motto { font-size:15px; line-height:1.35; font-weight:700; margin:12px 0 5px; }
.class-note { font-size:13px; line-height:1.5; margin:0; min-height:40px; }
.checklist-progress { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:18px 0 20px; font-size:11px; font-weight:650; }
.checklist-progress progress { flex-basis:100%; width:100%; height:7px; appearance:none; border:0; background:var(--class-line); border-radius:0; }
.checklist-progress progress::-webkit-progress-bar { background:var(--class-line); }
.checklist-progress progress::-webkit-progress-value { background:var(--class-ink); }
.checklist-progress progress::-moz-progress-bar { background:var(--class-ink); }
.checklist-card .checklist-group-label { font-size:11px; line-height:1.3; text-transform:uppercase; min-height:0; margin:0 0 5px; }
.checklist-card .checklist-group-note { font-size:12px; line-height:1.5; margin:8px 0 12px; color:inherit; }
.checklist-stage { border-top:1px solid var(--class-line); }
.checklist-stage > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:10px 0; font-size:14px; font-weight:700; cursor:pointer; list-style:none; }
.checklist-stage > summary::-webkit-details-marker { display:none; }
.checklist-stage > summary svg { width:18px; height:18px; flex-shrink:0; }
.checklist-stage[open] > summary svg { transform:rotate(180deg); }
.checklist-card ul { display:block; flex:none; margin:0 0 22px; }
.checklist-card .checklist-row { display:grid; grid-template-columns:44px minmax(0,1fr) 12px; gap:6px; align-items:center; border-bottom:1px solid var(--class-line); padding:9px 0; min-height:74px; }
.checklist-row > svg { width:12px; height:16px; }
.checklist-check { position:relative; display:grid; place-items:center; width:44px; height:44px; cursor:pointer; }
.checklist-check input { position:absolute; inset:0; width:44px; height:44px; margin:0; opacity:0; cursor:pointer; z-index:1; }
.checklist-check span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; }
.checklist-check input:focus-visible + span { outline:2px solid currentColor; outline-offset:3px; }
.checklist-check span svg { width:25px; height:25px; }
.checklist-row.is-done .checklist-check span { background:#d9f4db; color:#155938; }
.checklist-detail { display:flex; flex-direction:column; justify-content:center; text-decoration:none; background:none; color:inherit; padding:0; text-align:left; min-height:48px; width:100%; }
.checklist-detail strong { display:block; font-size:14px; line-height:1.35; }
.checklist-detail small { display:block; margin-top:4px; font-size:11px; line-height:1.45; }
.checklist-row.is-done .checklist-detail small { font-weight:700; }
.checklist-card .class-cta { width:100%; margin:14px 0 0; font-size:14px; min-height:44px; }
.checklist-card .class-cta:disabled { opacity:1; background:transparent; color:inherit; border:1px solid var(--class-line); }
.checklist-footer { padding:0 22px; max-width:780px; margin:auto; }
.checklist-footer p { font-size:14px; line-height:1.6; }
.checklist-footer small { display:block; color:#52665f; font-size:12px; line-height:1.6; }
.checklist-footer .text-button { margin:8px 16px 8px 0; }
.checklist-task-sheet ol { padding-left:22px; font-size:15px; line-height:1.65; }
.checklist-task-sheet li { margin:12px 0; padding-left:4px; }
.checklist-task-sheet h3 { margin:22px 0 6px; font-size:17px; }
.checklist-task-sheet p { font-size:14px; line-height:1.6; }
.checklist-shared { display:flex; gap:8px; color:#2d6756; }
.checklist-shared svg { flex-shrink:0; width:19px; height:19px; margin-top:3px; }
.checklist-task-sources { margin:18px 0; display:grid; gap:6px; }
.checklist-task-sources a { display:flex; gap:6px; align-items:center; min-height:44px; font-size:13px; }
.checklist-task-sources svg { width:16px; height:16px; flex-shrink:0; }
.checklist-task-sources small { color:var(--muted); font-size:11px; }
@media (min-width:700px) {
  .checklist-page .class-carousel { --card-width:360px; }
  .checklist-heading { max-width:1200px; margin:auto; padding-top:36px; }
  .checklist-heading h1 { font-size:36px; }
  .checklist-page .class-selector { max-width:620px; margin:auto; }
}
@media (min-width:1000px) {
  .checklist-page .class-carousel { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; scroll-snap-type:none; }
  .checklist-page .class-carousel:after { display:none; }
}
@media (prefers-reduced-motion:no-preference) {
  .checklist-row.just-completed [data-checklist-icon] { animation:checklist-pop .3s ease-out; }
  @keyframes checklist-pop { 50% { transform:scale(1.16); } }
}
.app-shell { display:block; }
.app-shell main { padding-bottom:env(safe-area-inset-bottom,0px); }
html.dialog-open { overflow:hidden; }
html.dialog-open body { position:fixed; top:var(--dialog-scroll-y); left:var(--dialog-scroll-x); width:100%; padding-right:var(--dialog-scrollbar); }
#journey-menu { position:fixed; inset:0 0 0 auto; width:min(86%,420px); max-width:none; height:100dvh; max-height:none; margin:0; padding:24px 26px; border:0; border-radius:0; background:white; color:var(--ink); overflow-y:auto; }
#journey-menu::backdrop { background:var(--overlay-menu); backdrop-filter:none; }
.menu-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:28px; position:sticky; top:0; z-index:1; background:white; }
.menu-top > span { font-size:11px; font-weight:700; color:#44685c; }
#menu-nav { display:grid; gap:12px; padding-bottom:26px; border-bottom:1px solid var(--line); }
#menu-nav a { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:66px; padding:10px 0; text-decoration:none; font-size:25px; line-height:1.25; font-weight:650; }
#menu-nav a[aria-current="page"] { color:var(--accent-nav-current); }
#menu-nav a[aria-current="page"] span { text-decoration:underline; text-underline-offset:9px; text-decoration-thickness:2px; }
#menu-nav svg { width:23px; height:23px; flex-shrink:0; color:var(--icon-menu); }
.menu-support { padding:20px 0; display:grid; justify-items:start; gap:6px; }
.menu-support a { display:flex; align-items:center; gap:12px; min-height:44px; font-size:15px; text-decoration:none; }
.menu-support svg { width:19px; height:19px; }
.menu-support .text-button { font-size:13px; min-height:44px; }
.menu-signoff { margin-top:28px; color:var(--text-menu-signoff); font-size:13px; line-height:1.6; }
.menu-support [data-pwa-action] { display:flex; align-items:center; gap:10px; }
.menu-support [hidden], .pwa-notice[hidden] { display:none; }
#pwa-status { font-size:11px; line-height:1.5; color:var(--muted); margin-top:8px; }
.pwa-notice { display:flex; align-items:center; color:var(--accent-gold-bright); }
.pwa-notice button { position:relative; width:44px; height:44px; min-height:44px; display:grid; place-items:center; color:inherit; background:none; border:1px solid var(--border-pwa); border-radius:6px; }
.pwa-notice svg { width:19px; height:19px; }
#pwa-dialog { width:min(480px,calc(100% - 28px)); max-height:calc(100dvh - 36px); padding:24px; border:0; border-radius:8px; color:var(--ink); overflow-y:auto; }
#pwa-dialog h2 { font-size:25px; line-height:1.2; margin:20px 0; }
#pwa-dialog p { font-size:14px; line-height:1.6; }
#pwa-dialog .footnote { font-size:12px; }
#pwa-content > a { display:flex; align-items:center; gap:8px; min-height:44px; margin-bottom:8px; }
.pwa-device { font-size:14px; color:#4b645c; margin:0 0 12px; }
.pwa-steps { padding:0; list-style:none; counter-reset:install-step; font-size:15px; line-height:1.5; }
.pwa-steps li { counter-increment:install-step; display:grid; grid-template-columns:20px 44px minmax(0,1fr); align-items:start; gap:10px; padding:16px 0; border-bottom:1px solid #d2dfda; }
.pwa-steps li::before { content:counter(install-step); font-size:13px; font-weight:700; padding-top:12px; color:#536a62; }
.pwa-step-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:8px; background:#e4f2fa; color:#174b66; }
.pwa-steps li:nth-child(even) .pwa-step-icon { background:#f9e4ed; color:#971c50; }
.pwa-step-icon svg { width:26px; height:26px; }
.install-invitation { margin-top:20px; padding:18px 0 0; border-top:1px solid #b8c9c4; }
.install-invitation .eyebrow { color:#a41f55; }
.install-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.install-actions button { min-height:44px; white-space:normal; }
.install-actions .button { max-width:100%; }
.home-base-earned { display:flex; align-items:center; gap:12px; padding-top:14px; color:#185576; }
.home-base-earned > svg { width:32px; height:32px; flex-shrink:0; }
.home-base-earned small { display:block; font-size:12px; color:#536a62; }
.installed-recovery { padding:16px 0; border-top:1px solid #b8c9c4; }
.installed-recovery h3 { font:700 18px/1.3 var(--font-body,Arial,sans-serif); }
@media (display-mode:standalone) {
  .app-header { min-height:calc(var(--header-height) + env(safe-area-inset-top,0px)); padding-top:calc(8px + env(safe-area-inset-top,0px)); }
  #journey-menu { padding-top:calc(24px + env(safe-area-inset-top,0px)); padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)); }
}
.mission-basics { background:var(--surface-card); }
.mission-basics .eyebrow { color:var(--accent-deep); }
.mission-basics .mission-inner { padding-top:30px; }
.mission-basics .essential { background:var(--surface-card); color:var(--ink); border-bottom:1px solid var(--line); }
.mission-basics .essential[open] { border-top:2px solid var(--home-accent); }
.mission-basics .essential > summary { padding:20px 0; min-height:84px; gap:14px; }
.mission-basics .basics-icon { width:26px; height:26px; background:none; color:var(--green); border-radius:0; }
.mission-basics .basics-icon svg { width:23px; height:23px; }
.mission-basics .recruiting-basics h3 { font-size:18px; line-height:1.35; }
.mission-basics .essential-title small { font-size:14px; color:var(--text-secondary-note); }
.mission-basics .essential-body { padding:0 0 18px 40px; }
.mission-basics .essential-body p { color:var(--text-secondary-note); font-size:15px; }
.mission-basics .essential-body a { color:var(--accent-deep); }
.mission-basics .essential > summary:focus-visible { outline-color:var(--green); }
.essential { --step-bg:#e8f3ff; --step-ink:#174b6d; --step-icon:#c4e3fb; border-bottom:2px solid #fff; background:var(--step-bg); color:var(--step-ink); }
.essential-academics { --step-bg:#fff3c6; --step-ink:#55431c; --step-icon:#f5dc79; }
.essential-plan { --step-bg:#ffebe4; --step-ink:#64382d; --step-icon:#f5c0ad; }
.essential > summary { display:flex; align-items:center; gap:14px; min-height:98px; padding:16px; cursor:pointer; list-style:none; }
.essential > summary::-webkit-details-marker { display:none; }
.essential > summary > svg { width:18px; height:18px; flex-shrink:0; }
.essential[open] > summary > svg { transform:rotate(180deg); }
.essential-title { flex:1; min-width:0; }
.essential-title small { display:block; margin-top:5px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:12px; font-weight:400; line-height:1.4; }
.essential-body { padding:0 18px 18px 78px; }
.basics-icon { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; color:var(--step-ink); background:var(--step-icon); border-radius:50%; }
.basics-icon svg { width:25px; height:25px; }
.recruiting-basics h3 { font-size:22px; line-height:1.2; margin:0; }
.mission-inner > .basics-welcome { font-size:15px; margin-bottom:22px; max-width:520px; }
.essential-body p { color:var(--step-ink); }
.essential-body a { color:var(--step-ink); }
.essential > summary:focus-visible { outline:3px solid var(--step-ink); outline-offset:-3px; }
@media(max-width:360px) {
  .essential > summary { padding:14px 12px; gap:10px; }
  .basics-icon { width:40px; height:40px; }
  .recruiting-basics h3 { font-size:20px; }
  .essential-body { padding-left:16px; }
  .essential-title small { font-size:11px; }
}
.recruiting-basics p { font-size:14px; line-height:1.65; margin:0; color:#476258; }
.recruiting-basics a { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14px; font-weight:650; text-underline-offset:4px; }
.recruiting-basics a svg { width:17px; height:17px; }
.recruiting-basics .basics-boundary { margin-top:20px; font-size:12px; }
.basics-sources { font-size:12px; line-height:1.6; margin-top:10px; }
.basics-sources summary { min-height:44px; padding:12px 0; cursor:pointer; }
.basics-sources a { display:flex; font-size:12px; }
.basics-sources small { display:block; margin-top:8px; color:#52685e; }
.checklist-basics { margin:0 22px 12px; }
.basics-disclosure { max-width:780px; margin:0 auto; }
.basics-disclosure > summary { display:flex; align-items:center; gap:8px; min-height:44px; font-size:12px; font-weight:650; cursor:pointer; color:#235b49; list-style:none; }
.basics-disclosure > summary::-webkit-details-marker { display:none; }
.basics-disclosure > summary > span { flex:1; }
.basics-disclosure > summary svg { width:18px; height:18px; flex-shrink:0; }
.basics-disclosure[open] > summary > svg:last-child { transform:rotate(180deg); }
.mission-invite .mission-inner { padding-top:16px; padding-bottom:16px; }
.mission-invite .mission-inner > p { margin:0; font-size:15px; font-weight:650; }
.mission-invite .mission-inner > .home-identity { margin-top:6px; font-size:12px; font-weight:400; }
.mission-basics { background:var(--surface-sunken); }
.mission-basics .mission-inner { padding-top:22px; padding-bottom:28px; }
.mission-basics h2 { font-size:20px; line-height:1.3; margin:0 0 16px; overflow-wrap:anywhere; }
.mission-basics .home-identity { font-size:13px; margin:-8px 0 16px; }
.quest-panel { margin:0 0 24px; padding:0 0 24px; border-bottom:1px solid var(--border-quest); }
.checklist-page > .quest-panel { margin:0 22px 22px; }
.checklist-page .quest-badges { gap:8px; margin:10px 0 0; }
.checklist-page .quest-badges a { min-height:44px; flex-direction:row; flex-wrap:wrap; justify-content:center; padding:6px 2px; gap:5px; }
.checklist-page .quest-badges .quest-medal { width:26px; height:26px; flex-shrink:0; }
.checklist-page .quest-medal svg { width:16px; height:16px; }
.checklist-page .quest-badges strong { font-size:12px; }
.checklist-page .quest-badges small { display:none; }
.checklist-page .quest-panel h3 { font-size:18px; }
.checklist-page .quest-panel p { font-size:14px; }
.quest-heading { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; font-size:12px; color:#425d54; }
.quest-heading .eyebrow { margin:0; color:#98204a; }
.quest-badges { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; margin:18px 0; }
.quest-badges li { min-width:0; }
.quest-badges a { display:flex; align-items:center; flex-direction:column; gap:5px; height:100%; min-height:132px; padding:10px 4px; text-align:center; color:#244b40; text-decoration:none; border-bottom:2px solid #ccd8d4; }
.quest-badges a[data-earned="true"] { border-color:#087453; }
.quest-medal { width:44px; height:44px; display:grid; place-items:center; border:1px solid #95aaa2; border-radius:50%; background:white; }
.quest-medal svg { width:24px; height:24px; }
.quest-badges [data-earned="true"] .quest-medal { background:#fae382; border-color:#9b7410; color:#423715; box-shadow:0 2px 0 #ac8127; }
.quest-badges strong { font-size:14px; line-height:1.3; }
.quest-badges small { font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.quest-panel h3 { font:700 21px/1.3 var(--font-body,Arial,sans-serif); margin:14px 0 8px; }
.quest-panel p { margin:8px 0 16px; font-size:15px; color:var(--text-secondary-quest); }
.quest-panel .quest-cheer { font-weight:700; color:var(--state-success); }
.quest-panel .quest-cta { background:var(--accent-cta); color:var(--text-on-dark); width:100%; min-height:48px; white-space:normal; }
.quest-panel .quest-skip { display:flex; min-height:44px; margin:8px auto 0; text-align:center; }
.quest-panel .field-note { font-size:13px; margin-bottom:0; }
.quest-panel a:focus-visible { outline:3px solid var(--focus-quest); outline-offset:3px; }
.quest-summary { margin:24px 0 0; padding:22px 0 0; border-bottom:0; border-top:1px solid var(--border-quest); }
.quest-summary .quest-badges { margin-bottom:0; }
@media (prefers-reduced-motion:no-preference) {
  .quest-badges [data-earned="true"] .quest-medal { animation:quest-arrive .24s ease-out; }
  @keyframes quest-arrive { from { transform:scale(.92); } to { transform:scale(1); } }
}
.home-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); gap:12px; }
.home-action { --action-color:var(--accent-action-default); display:flex; flex-direction:column; align-items:stretch; min-width:0; min-height:148px; padding:18px; border:1px solid var(--border-card); border-top:3px solid var(--action-color); border-radius:14px; text-decoration:none; color:var(--ink); background:var(--surface-card); box-shadow:0 2px 4px var(--shadow-card); transition:box-shadow .15s ease; }
.home-action-plan { --action-color:var(--accent-plan); grid-column:1 / -1; }
.home-action-academics { --action-color:var(--accent-support); }
.home-action-finder { --action-color:var(--accent-finder); }
.home-action-account { --action-color:var(--accent-support); grid-column:1 / -1; }
.home-action-primary { grid-column:1 / -1; padding:18px; border-color:var(--border-card-primary); border-top-color:var(--action-color); }
.home-action-top { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--action-color); margin-bottom:12px; }
.home-action-top svg { width:26px; height:26px; flex-shrink:0; }
.home-action-top > svg:last-child:not(:first-child) { width:20px; height:20px; }
.home-action-kicker { font-size:12px; font-weight:750; text-transform:uppercase; line-height:1.4; overflow-wrap:anywhere; }
.home-action strong { display:block; font-family:Barlow,system-ui,sans-serif; font-size:23px; line-height:1.1; color:var(--action-color); overflow-wrap:anywhere; }
.home-action-primary strong { font-size:30px; }
.home-action small { display:block; margin-top:8px; font-size:14px; line-height:1.45; color:var(--text-secondary-card); }
.home-action-command { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border-divider); color:var(--action-color); font-size:15px; font-weight:750; }
.home-action-command svg { width:22px; height:22px; flex-shrink:0; }
.home-action progress { appearance:none; width:100%; height:4px; margin-top:12px; border:0; border-radius:0; background:var(--surface-progress-track); color:var(--action-color); }
.home-action progress::-webkit-progress-bar { background:var(--surface-progress-track); }
.home-action progress::-webkit-progress-value { background:var(--action-color); }
.home-action progress::-moz-progress-bar { background:var(--action-color); }
.home-action:hover { box-shadow:0 3px 12px var(--shadow-card-hover); border-color:var(--action-color); }
.home-action:active { box-shadow:inset 0 0 0 1px var(--action-color); }
.home-action:focus-visible { outline:3px solid var(--home-accent); outline-offset:3px; }
.mission-home .journey-brand-footer { margin-top:0; }
.journey-brand-footer { margin-top:42px; padding:34px 20px 40px; text-align:center; background:var(--surface-footer); color:var(--text-footer-strong); border-top:1px solid var(--border-footer); }
.journey-brand-footer img { display:block; width:188px; max-width:70vw; height:auto; margin:0 auto 24px; background:var(--surface-footer-logo); }
.journey-brand-footer p { margin:0; color:var(--text-footer); font:700 13px/1.7 Barlow,system-ui,sans-serif; letter-spacing:.34em; text-transform:uppercase; }
.journey-brand-footer small { display:block; margin-top:20px; color:var(--text-footer-strong); font-weight:700; }
.journey-brand-footer a { display:inline-flex; min-height:44px; align-items:center; margin-top:10px; color:var(--text-footer); text-underline-offset:4px; }
.setup-privacy { margin:0 0 20px; font-size:13px; line-height:1.5; color:#49625b; }
.account-mode { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0 18px; padding:4px; background:#e8f1ee; border:1px solid #c4d5cf; border-radius:8px; }
.account-mode button { min-height:44px; padding:8px 10px; border:0; border-radius:6px; background:transparent; color:#244b40; font-weight:800; cursor:pointer; }
.account-mode button[aria-pressed="true"] { background:#063f35; color:white; box-shadow:0 1px 4px #063f3524; }
.athlete-setup .lead,.checklist-heading p { overflow-wrap:anywhere; }
.setup-options { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:24px; }
.setup-options > a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.checklist-next { margin:0 22px 16px; padding:0 0 16px; border-bottom:1px solid var(--line); }
.checklist-next > a,.checklist-next > button { display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%; min-height:44px; color:var(--green); background:none; border:0; text-align:left; padding:0; text-decoration:none; cursor:pointer; }
.checklist-next strong,.checklist-next small { display:block; line-height:1.4; }
.checklist-next strong { font-size:17px; }
.checklist-next small { font-size:12px; margin-bottom:4px; color:#49625b; }
.checklist-next svg { width:22px; height:22px; flex-shrink:0; }
.checklist-next > p { display:flex; align-items:center; gap:10px; margin:0; }
@media(max-width:359px) {
  .mission-hero { height:auto; }
  .mission-positioning { padding:0 17px 14px; font-size:14px; line-height:1.35; }
  .mission-invite .mission-inner { padding-top:12px; padding-bottom:12px; }
  .mission-invite .mission-inner > p { font-size:13px; }
  .mission-basics .mission-inner { padding-top:14px; padding-bottom:22px; }
  .mission-basics h2 { font-size:19px; margin-bottom:10px; }
  .home-action-primary { min-height:122px; padding:14px; }
  .home-action-primary strong { font-size:27px; }
  .home-action-primary small { margin-top:6px; }
  .home-action-primary .home-action-command { margin-top:10px; padding-top:8px; }
  .home-action:not(.home-action-primary) { min-height:140px; }
}
@media(max-width:520px) {
  .mission-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .mission-stats > div { display:block; min-width:0; }
  .mission-stats dt { font-size:24px; margin-bottom:3px; }
  .mission-stats strong { font-size:11px; }
  .mission-stats dd span { font-size:11px; line-height:1.3; }
}
@media(min-width:700px) {
  .home-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  /* The 1/-1 spans on these two are right for the single-column layout, but they were unconditional,
     so at 2-up they still took a whole row each and the designed hierarchy (one primary on top, two
     supporting cards beside each other) never rendered -- three identical full-width blocks instead. */
  .home-action-account,.home-action-plan { grid-column:auto; }
  .home-action-primary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 32px; }
  .home-action-primary .home-action-top { grid-column:1 / -1; }
  .home-action-primary strong,.home-action-primary small { grid-column:1; }
  .home-action-primary .home-action-command { grid-column:2; grid-row:2 / 4; border:0; margin:0; padding:0; }
  .home-action-primary progress { grid-column:1 / -1; }
  .home-action-primary strong { font-size:34px; }
}
@media(prefers-reduced-motion:reduce) { .home-action { transition:none; } }
@media (min-width:1000px) and (max-height:700px) {
  /* This capped the hero when the hero was only a photograph. The hero now CONTAINS the primary
     action, and with overflow:hidden the cap clipped Find your college clean off on short
     laptops. Constrain the photograph instead and let the composition size itself. */
  .mission-hero picture { min-height:min(210px,35svh); }
  .mission-positioning { padding-top:0; }
  .mission-basics .mission-inner { padding-top:24px; }
}
.season-stats .section-head { flex-wrap: wrap; gap: 12px; }
.checklist-extras { margin: 24px auto; max-width: 900px; padding: 0 24px; }
.checklist-extras h2 { font-size: 20px; }
.checklist-extras .task-row { width: 100%; }
.season-stats h2 small { font-family: system-ui, sans-serif; font-size: 16px; font-weight: 400; }
.season-record { padding: 24px 0; border-bottom: 1px solid var(--line); }
.season-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 20px 0; }
.season-values div { min-width: 0; }
.season-values dt { font-size: 14px; overflow-wrap: anywhere; }
.season-values dd { margin: 4px 0 0; font-size: 24px; font-weight: 700; }
.season-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.season-tools { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.stats-mapping { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stats-mapping .field { min-width: 0; margin: 0; }
.stats-mapping .field span { overflow-wrap: anywhere; }
.season-stats .inline-check { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0; }
.season-stats .inline-check input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 3px; }
@media (max-width: 540px) { .stats-mapping { grid-template-columns: minmax(0, 1fr); } }
/* Keep account-save feedback visible without interrupting an edit. */
.cloud-status { position:static; z-index:19; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 22px; background:var(--surface-notice); color:var(--text-notice); font-size:14px; border-bottom:1px solid var(--border-notice); box-shadow:0 4px 12px var(--shadow-notice); }
.cloud-status[hidden] { display:none; }
/* Only a message a family must act on earns a pinned position. */
.cloud-status.is-pinned { position:sticky; top:var(--header-height); }
.cloud-status a { display:inline-flex; align-items:center; justify-content:center; color:var(--text-on-dark); background:var(--surface-notice-action); font-weight:700; min-height:34px; padding:6px 12px; border-radius:4px; text-decoration:none; }
.cloud-history { list-style:none; padding:0; }
.cloud-history li { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 0; border-bottom:1px solid #c3d8cf; }
/* A photo is a personal choice, separate from setup and presentation consent. */
.athlete-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #dceef6;
  color: #174b65;
  font: 700 26px/1 system-ui, sans-serif;
  vertical-align: middle;
}
.athlete-avatar img { width: 100%; height: 100%; object-fit: cover; }
.athlete-avatar svg { width: 32px; height: 32px; }
.profile-photo-summary { display: flex; align-items: center; gap: 16px; margin: 24px 0; }
.profile-photo-summary > div { min-width: 0; }
.profile-photo-summary .field-note { margin: 4px 0 0; }
.profile-photo-summary a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.photo-view { max-width: 650px; }
.photo-preview { display: flex; justify-content: center; margin: 24px 0; }
.photo-preview .athlete-avatar { width: 192px; height: 192px; max-width: 100%; border-radius: 8px; font-size: 48px; }
.photo-picker { position: relative; cursor: pointer; }
.photo-picker:focus-within { outline: 3px solid #b71852; outline-offset: 4px; }
.photo-crop { border: 0; padding: 0; margin: 24px 0; min-width: 0; }
.photo-crop legend { font-weight: 700; margin-bottom: 12px; }
.photo-crop label { display: block; margin: 8px 0; }
.photo-crop input { width: 100%; min-height: 44px; accent-color: #b71852; }
.photo-sharing { margin-top: 24px; }
.photo-sharing input { flex: 0 0 auto; }
.photo-view .btn-stack { margin-top: 24px; }
.photo-view .field-note { background: transparent; color: #526961; padding: 0; margin: 12px 0; }
.athlete-heading > .athlete-avatar, .coach-athlete > .athlete-avatar { display: flex; margin-bottom: 16px; }