/* The static build's only stylesheet of its own.
 *
 * app.css is the design system and is not edited — this file loads after it and
 * changes two things:
 *
 *   1. the section gutter, which the brief set at 64px
 *   2. the hero's two cards, which replace the frame's two buttons
 *
 * Everything else on every page — type ramp, colour, radii, shadows, the icon
 * sprite, the motion layer — is app.css as shipped.
 */

/* 1 · The gutter. app.css sets --wrap-pad to --s-120 above 1280px; the brief
   asks for 64px, and the content widens into the space it frees. */
.wrap { --wrap-pad: 64px; }
@media (max-width: 860px) { .wrap { --wrap-pad: 32px; } }
@media (max-width: 560px) { .wrap { --wrap-pad: 20px; } }

/* 2 · The two hero cards. Built from app.css tokens only — no new colour, no
   new radius, no new shadow. */
.hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 52px;
  text-align: left;
  align-items: stretch;
}
@media (max-width: 860px) { .hero-cards { grid-template-columns: 1fr; margin-top: 36px; } }

.hcard {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 36px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-line);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  color: var(--text-body);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
}
.hcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.hcard-icon {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--surface-tint); color: var(--brand-blue);
}
.hcard-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
}
.hcard-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--text-ink);
}
.hcard-body { font-size: 14.5px; line-height: 1.62; }
.hcard-cta {
  margin-top: auto; padding-top: 8px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 600; color: var(--brand-blue-ink);
}
.hcard:hover .hcard-cta .ico { transform: translateX(3px); }
.hcard-cta .ico { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }

/* The dark card. Same shape, the deep surface, and the tokens already proven
   against it — --text-deep-body measures 9.05:1 there. */
.hcard-start {
  background: var(--surface-deep);
  border-color: var(--surface-deep);
  color: var(--text-deep-body);
}
.hcard-start .hcard-title { color: #fff; }
.hcard-start .hcard-eyebrow { color: var(--brand-blue-200); }
.hcard-start .hcard-icon { background: var(--brand-blue); color: #fff; }
.hcard-start .hcard-cta { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hcard, .hcard-cta .ico { transition: none; }
  .hcard:hover { transform: none; }
}

/* 3 · The few shapes app.css has no component for.
 *
 * A labelled bar row, a two-column compare, and the Hypothesis page's split.
 * All built from existing tokens — no new colour, radius or shadow. `.bar`
 * itself is app.css's. */

.hy-bars { display: flex; flex-direction: column; gap: 14px; }
.hy-bar-row { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.hy-bar-label { font-size: 14px; font-weight: 600; color: var(--text-ink); }
.hy-bar-label small { display: block; font-weight: 400; color: var(--text-muted); font-size: 12px; }
@media (max-width: 560px) { .hy-bar-row { grid-template-columns: 104px 1fr; } }

.hy-split { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--s-20); align-items: start; }
.hy-aside { display: flex; flex-direction: column; gap: var(--s-20); }
@media (max-width: 960px) { .hy-split { grid-template-columns: 1fr; } }

/* THE ONE SPACING RULE FOR DIALOGS, AND WHY IT HAD TO BE WRITTEN DOWN.
 *
 * `.res-block` carries `margin-top: 52px` in app.css, which is right where it
 * comes from — the full-width result page, where each block is a section of a
 * document. Inside a dialog that margin lands on top of this flex container's
 * own 24px gap, so every heading sat 76px below the block above it and the
 * sheet read as a list of unrelated fragments with holes between them.
 *
 * So: the flex gap is the only thing that spaces these, the margin is zeroed,
 * and a hairline separates one block from the next. Rhythm comes from the rule,
 * not from the emptiness. */
.hy-detail { display: flex; flex-direction: column; gap: var(--s-20); margin-top: var(--s-20); }
.hy-detail > .res-block { display: flex; flex-direction: column; margin-top: 0; }
.hy-detail > .res-block + .res-block,
.hy-detail > .res-block ~ .banner,
.hy-detail > .res-block ~ .cg-specs {
  padding-top: var(--s-20); border-top: 1px solid var(--border-line-soft);
}
.hy-detail .res-block > .t-eyebrow { margin-bottom: 2px; }
/* The trailing action sits away from the reading, not inside its rhythm. */
.hy-detail > .btn:last-child,
.hy-detail > a.btn:last-child { margin-top: 4px; align-self: flex-start; }
.hy-modal-body { padding: var(--s-32); }
@media (max-width: 560px) { .hy-modal-body { padding: var(--s-20); } }

.hy-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hy-two > div { padding: 14px 16px; border-radius: var(--r-md); }
.hy-good { background: var(--status-green-tint); color: var(--status-green-ink); }
.hy-bad { background: var(--surface-sunk); color: var(--text-muted); }
@media (max-width: 620px) { .hy-two { grid-template-columns: 1fr; } }

/* A tag that is a button. Same object, so it must not look different. */
.tag-link { border: 0; cursor: pointer; font: inherit; }
.tag-link:hover { background: var(--surface-tint); color: var(--brand-blue-ink); }

/* The chapter check-in sits in a row, not a column like the answer scale. */
.qz-options-row { flex-direction: row; flex-wrap: wrap; }
.qz-options-row .opt { width: auto; flex: 0 1 auto; }

/* The Hypothesis cards are buttons; keep the pointer and the focus ring. */
.xp-card[role="button"] { cursor: pointer; }

/* 4 · Photography.
 *
 * The public-domain photographs come from a thin pool and run warm, while the
 * system is blue. The existing parents-together.jpg was desaturated to 0.82 in
 * the file itself; these are corrected in CSS instead, so the originals stay
 * intact and the treatment is one line to change. */
.ph {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.02);
}
.ph-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); background: var(--surface-sunk);
}
/* A wash of the brand blue, so a warm photograph still reads as ours. */
.ph-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--brand-navy-rgb), .04), rgba(var(--brand-blue-rgb), .16));
}

/* 5 · The landing's two built parts, as alternating photo + copy blocks.
 *
 * This replaces the five-card grid. Three of those five said "not in this
 * version", which is honest but makes the page mostly a list of absences. Two
 * real things, each given room, and the absences moved to one line underneath.
 */
.feat {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.feat + .feat { margin-top: clamp(64px, 8vw, 112px); }
.feat-flip .feat-media { order: 2; }
.feat-media { aspect-ratio: 4 / 3; box-shadow: var(--shadow-card); }

/* The rhythm the first version got wrong: the eyebrow sat 20px off its own
   heading, and the heading was smaller than the paragraph under it. */
.feat-copy { display: flex; flex-direction: column; align-items: flex-start; }

.feat-step {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-blue-ink);
}
.feat-step-n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-blue); color: #fff; font-size: 13px; letter-spacing: 0;
}

/* A real heading. `.lp-h3` never existed in app.css, so the h3 fell back to a
   browser default and rendered at 17px — smaller than the 18px paragraph under
   it. That alone is why the section read as dull. */
.feat-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 36px); line-height: 1.16;
  letter-spacing: -0.02em; color: var(--text-ink);
  margin: 0 0 16px; max-width: 18ch;
}
.feat-copy > .lp-lead { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.68; }

.feat-list {
  display: flex; flex-direction: column; gap: 12px;
  margin: 26px 0 0; padding: 26px 0 0; list-style: none;
  border-top: 1px solid var(--border-line-soft); width: 100%; max-width: 46ch;
}
.feat-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }
.feat-list .ico { color: var(--brand-blue); flex: none; width: 17px; height: 17px; margin-top: 2px; }

@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; gap: var(--s-24); }
  .feat + .feat { margin-top: var(--s-52); }
  .feat-flip .feat-media { order: 0; }
  .feat-title { max-width: none; }
}

/* 6 · Mascots. Milestone moments only, so the orange stays punctuation. */
.mascot { width: 88px; height: 88px; flex: none; }
.mascot-lg { width: 128px; height: 128px; }
.mascot-sm { width: 56px; height: 56px; }

/* 7 · How it works — the same rhythm as the landing's blocks, filling the
   gutter instead of sitting in a narrow centred column. */
.ph-step {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.ph-step + .ph-step { margin-top: clamp(64px, 8vw, 112px); }
.ph-step-flip .ph-step-media { order: 2; }
.ph-step-media { aspect-ratio: 16 / 10; box-shadow: var(--shadow-card); }
.ph-step .feat-copy > div:first-child { margin-bottom: 14px; }
.ph-step-n {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-blue); color: #fff; font-weight: 700; font-size: 16px; flex: none;
}
@media (max-width: 900px) {
  .ph-step { grid-template-columns: 1fr; gap: var(--s-24); }
  .ph-step + .ph-step { margin-top: var(--s-52); }
  .ph-step-flip .ph-step-media { order: 0; }
}

/* 8 · The start page. Copy and mascot on one side, the form on the other, so
   the first screen looks like something rather than a lone input pair. */
.st-split { display: grid; grid-template-columns: 1fr 460px; gap: var(--s-52); align-items: center; }
.st-copy { display: flex; flex-direction: column; gap: 14px; max-width: 34rem; }
.st-form { display: flex; flex-direction: column; }
.st-form .card { display: flex; flex-direction: column; gap: var(--s-20); }
@media (max-width: 960px) {
  .st-split { grid-template-columns: 1fr; gap: var(--s-24); }
  .st-copy { max-width: none; }
  .st-copy .mascot-lg { width: 88px; height: 88px; }
}

/* 10 · The dashboard. */
.db-top { background: var(--surface-card); border-bottom: 1px solid var(--border-line); padding-block: var(--s-32) 0; }
.db-welcome { display: flex; gap: var(--s-20); align-items: center; flex-wrap: wrap; }
.db-welcome-copy { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.db-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.db-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: var(--s-24); padding-bottom: var(--s-24); }
.db-pillar {
  display: flex; gap: 13px; align-items: center;
  border: 1px solid var(--border-line); border-radius: var(--r-lg); padding: 15px 18px;
}
.db-pillar-copy { display: flex; flex-direction: column; gap: 2px; }
.db-pillar-name { font-size: 15px; font-weight: 600; color: var(--text-ink); }
.db-pillar-note { font-size: 13px; color: var(--text-muted); }
.db-pillar.is-done { border-color: rgba(14, 159, 110, .34); background: var(--status-green-tint); }
.db-pillar.is-done .db-pillar-note { color: var(--status-green-ink); }
.db-pillar.is-now { border-color: rgba(var(--brand-blue-rgb), .34); background: var(--surface-tint); }
/* Not a padlock. A pillar this build does not have is dimmed and says so. */
.db-pillar.is-absent { opacity: .62; border-style: dashed; }
@media (max-width: 860px) { .db-pillars { grid-template-columns: 1fr; } }

.db-body { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-32); align-items: start; padding-block: var(--s-32); }
.db-rail { display: flex; flex-direction: column; gap: var(--s-20); position: sticky; top: var(--s-20); }
.db-main { min-width: 0; }
@media (max-width: 1100px) {
  .db-body { grid-template-columns: 1fr; }
  .db-rail { position: static; }
}

/* A tab for something this build does not have. Visible, dimmed, never a lock. */
.xp-tab.is-absent { opacity: .55; }
.xp-tab.is-absent::after { content: " ·"; }

.db-task { display: flex; gap: var(--s-20); align-items: flex-start; margin-bottom: var(--s-20); }
@media (max-width: 620px) { .db-task { flex-direction: column; } }

/* 11 · The chapter result card.
 *
 * One card per chapter, reporting the domains that chapter actually read.
 * The big line is a lean — a Holland code, a leading trait — never a type, and
 * the sentence under it says so every time. */
.rc { padding: var(--s-32); text-align: center; }
.rc-eyebrow { letter-spacing: .12em; }
.rc-big {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--brand-blue); margin: 10px 0 0;
}
.rc-sub { font-size: 15px; color: var(--text-body); margin: 10px auto 0; max-width: 62ch; }
.rc-sense {
  display: inline-block; margin: 14px auto 0; padding: 7px 14px;
  background: var(--status-amber-tint); color: var(--status-amber);
  border-radius: var(--r-pill); font-weight: 500;
}
.rc-blocks {
  margin-top: var(--s-32); padding-top: var(--s-24);
  border-top: 1px solid var(--border-line-soft);
  display: flex; flex-direction: column; gap: var(--s-32); text-align: left;
}
.rc-block-title {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  color: var(--text-ink); margin: 0 0 16px;
}
/* A number beside each bar, because "how much" is the question a bar invites. */
.rc-bar-row { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 38px; }
.rc-bar-n {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums; text-align: right;
}
.rc-chips { gap: 10px; }
.rc-note { margin-top: 12px; max-width: 72ch; }
@media (max-width: 640px) {
  .rc { padding: var(--s-20); }
  .rc-bar-row { grid-template-columns: minmax(96px, 1fr) minmax(0, 1.2fr) 32px; }
}

/* 12 · My Space. A list the student writes, not one the product generates. */
.sp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-20); align-items: start; }
.sp-aside { display: flex; flex-direction: column; gap: var(--s-20); }
@media (max-width: 900px) { .sp-grid { grid-template-columns: 1fr; } }

.sp-add { display: flex; flex-direction: column; gap: 8px; }
.sp-add-row { display: flex; gap: 10px; }
.sp-add-row .input { flex: 1; min-width: 0; }

.sp-list { list-style: none; margin: var(--s-20) 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-task {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border-line); border-radius: var(--r-md);
  background: var(--surface-card);
}
.sp-task-text { flex: 1; font-size: 14.5px; line-height: 1.5; color: var(--text-ink); }
.sp-task.is-done .sp-task-text { color: var(--text-muted); text-decoration: line-through; }
.sp-tick {
  width: 24px; height: 24px; flex: none; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--border-line2, rgba(100,116,139,.34));
  background: var(--surface-card); color: transparent;
  display: grid; place-items: center;
}
.sp-tick[aria-pressed="true"] { background: var(--status-green); border-color: var(--status-green); color: #fff; }
.sp-tick:hover { border-color: var(--brand-blue); }
.sp-remove {
  width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--text-muted); display: grid; place-items: center;
}
.sp-remove:hover { background: var(--surface-sunk); color: var(--text-ink); }
.sp-empty { margin-top: var(--s-20); }
.sp-done { margin-top: var(--s-20); }
.sp-done summary { cursor: pointer; color: var(--text-muted); font-weight: 500; }
.sp-grid .tag-link { text-align: left; line-height: 1.45; }

/* The one line the sign-in form still owes the reader, kept quiet. */

/* 13 · The dashboard on the app shell.
 *
 * app.css already draws .app, .sidebar, .top-bar and .app-content. These are
 * only the joins: the shell has no .wrap of its own, and a sidebar button has
 * to look like the sidebar's links. */
.app-content .wrap, .db-top .wrap { max-width: 1280px; }
.db-top { border-bottom: 1px solid var(--border-line); }

/* A sidebar entry that switches a tab is a button, not a link. Same object. */
button.side-link {
  border: 0; background: none; width: 100%; text-align: left;
  font: inherit; cursor: pointer;
}
.side-link.is-active { background: var(--surface-tint); color: var(--brand-blue-ink); font-weight: 600; }

.top-bar .icon-btn[data-side-tab] { cursor: pointer; }

/* The tab row shares its width with the sidebar and the rail, so six tabs no
   longer fit on one line at 1440. Wrapping beats a row that clips its last
   tab against the container edge with no sign it scrolls. */
.db-main .xp-tabs { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
@media (max-width: 560px) { .db-main .xp-tabs { flex-wrap: nowrap; overflow-x: auto; } }

/* 14 · Four pages, one shell.
 *
 * The tab row is gone: the sidebar names the destinations and each one is a
 * page, so a second row of navigation underneath was just saying it twice. */
.app-content .wrap, .db-top .wrap { max-width: 1280px; }
.db-top { border-bottom: 1px solid var(--border-line); }
.xp-head { padding-block: var(--s-32) var(--s-24); }
.xp-head .ah-strip a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-blue); }
.side-link.is-active { background: var(--surface-tint); color: var(--brand-blue-ink); font-weight: 600; }

/* A pillar is a link to its own page now, so it needs a link's affordances. */
a.db-pillar { text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.db-pillar:hover { border-color: var(--brand-blue); transform: translateY(-2px); }

.side-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--brand-blue); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

/* The suggestion prompts are whole sentences sitting in .tag pills, and a tag
   does not wrap. Their intrinsic width pushed the grid — and with it the whole
   app column — to 657px inside a 390px viewport. Two fixes, both needed: the
   pills wrap, and .app-main is allowed to shrink below its content like any
   other grid child. */
.app-main { min-width: 0; }
.sp-grid .tag-link { white-space: normal; max-width: 100%; }
.sp-aside .xp-card-tags { flex-direction: column; align-items: flex-start; }

/* ===========================================================================
 * 14 · The full flow, 2026-09-24. Welcome, chapter openings, Career
 * Hypothesis, College Suggestions, the Profile Report and the My Space hub.
 *
 * Everything here draws on app.css's own components — .card, .banner, .tag,
 * .bar, .xp-grid, .db-pillar. What is added is the furniture app.css has no
 * component for, and nothing here restyles anything the design system already
 * owns.
 * ======================================================================== */

/* --- Career Hypothesis --------------------------------------------------- */

.hy-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-20); align-items: start; }
.hy-section-head { margin: var(--s-32) 0 var(--s-20); }
.hy-world-head { margin-bottom: var(--s-24); }
.hy-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--s-20); }
.hy-acts .btn { flex: 0 1 auto; }
@media (max-width: 960px) { .hy-top { grid-template-columns: 1fr; } }

/* --- College Suggestions ------------------------------------------------- */

.cg-banner { margin-bottom: var(--s-20); }
.cg-section { margin-bottom: var(--s-32); }
.cg-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-20); flex-wrap: wrap; margin-bottom: var(--s-20);
}
.cg-section-head .t-h3 { margin-top: 4px; }

.cg-rank {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--brand-blue-ink); text-align: right;
}
.cg-rank small { font-weight: 400; font-size: 10.5px; color: var(--text-muted); }

.cg-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cg-fact {
  font-size: 11.5px; padding: 3px 9px;
  border-radius: var(--r-pill); background: var(--surface-sunk); color: var(--text-body);
}

/* The specification block in the dialog. A definition list, because that is
   what it is — a label and its value, thirteen times. */
/* Tiles rather than a ruled table. A seven-item grid in five columns leaves
   three empty cells, and the 1px-gap-over-a-background trick paints those as a
   grey slab — so each cell carries its own border instead. */
.cg-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px; margin: 0; padding: 0;
}
.cg-spec {
  background: var(--surface-card); padding: 11px 13px;
  border: 1px solid var(--border-line); border-radius: var(--r-md);
}
.cg-spec-k {
  font-family: var(--font-display); font-weight: 600; font-size: 10.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--brand-blue-ink);
}
.cg-spec-v {
  margin: 5px 0 0;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -0.3px; color: var(--text-ink);
}
.cg-spec-v small { display: block; font-weight: 400; font-size: 11px; color: var(--text-muted); letter-spacing: 0; }

.banner-tint { background: var(--surface-tint); border-color: rgba(var(--brand-blue-rgb), .2); }

/* The browse-by-world row. `.tag` does not wrap, which is right for a one-word
   chip and wrong for "The Education & Human Development World (12)" — on a
   390px screen one of these set the page's minimum width. */
.cg-worlds .tag { white-space: normal; text-align: left; }

/* --- My Space, the hub --------------------------------------------------- */

.sp-products { margin-bottom: var(--s-24); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .sp-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sp-products { grid-template-columns: 1fr; } }

.sp-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-bottom: var(--s-20); margin: var(--s-32) 0 var(--s-24);
  border-bottom: 1px solid var(--border-line);
}
.sp-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1.5px solid var(--border-line); border-radius: var(--r-pill);
  background: var(--surface-card); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  letter-spacing: -0.2px; color: var(--text-body);
  transition: border-color var(--mo-quick) var(--mo-ease), background-color var(--mo-quick) var(--mo-ease), color var(--mo-quick) var(--mo-ease);
}
.sp-tab:hover { border-color: var(--brand-blue-200); }
.sp-tab.is-on { border-color: var(--brand-blue); background: var(--surface-tint); color: var(--brand-blue-ink); }
.sp-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sp-tab-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--brand-blue); color: var(--text-on-blue);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}

.sp-shortlist { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.sp-short {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--border-line-soft);
}
.sp-short:last-child { border-bottom: 0; }
.sp-short-name { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--text-ink); }
.sp-short-meta { font-size: 12.5px; color: var(--text-muted); text-align: right; }

.sp-prog { display: flex; flex-direction: column; gap: 14px; }
.sp-prog-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.sp-prog-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-prog-name { font-size: 14px; font-weight: 600; color: var(--text-ink); }
.sp-prog-meta { font-size: 12px; color: var(--text-muted); }
.sp-prog-row .bar { grid-column: 1 / 2; }
.sp-prog-n { grid-column: 2; grid-row: 2; font-size: 12.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.sp-counts { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--text-body); }
.sp-counts span { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text-ink); margin-right: 6px; }

/* --- the Profile Report -------------------------------------------------- */

.rp-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s-20); }

.rp {
  background: var(--surface-card);
  border: 1px solid var(--border-line); border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 40px);
}
.rp-head {
  display: flex; flex-wrap: wrap; gap: var(--s-24); justify-content: space-between; align-items: flex-start;
  padding-bottom: var(--s-20); margin-bottom: var(--s-32);
  border-bottom: 2px solid var(--text-ink);
}
.rp-brand { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand-blue-ink); }
.rp-title { margin: 6px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -1.2px; color: var(--text-ink); }
.rp-for { margin: 8px 0 0; font-size: 14px; color: var(--text-muted); }
.rp-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.rp-stat { border: 2px solid var(--brand-blue-200); border-radius: var(--r-lg); padding: 10px 14px; min-width: 116px; }
.rp-stat-k { display: block; font-family: var(--font-display); font-weight: 600; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-blue-ink); }
.rp-stat-v { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.4px; color: var(--text-ink); font-variant-numeric: tabular-nums; }

.rp-h2 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.4px; color: var(--text-ink); }
.rp-lede, .rp-section { margin-bottom: var(--s-32); }
.rp-lede p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.62; color: var(--text-body); }
.rp-warn { border-left: 3px solid var(--status-amber); padding-left: 12px; }
.rp-big { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4.4vw, 48px); line-height: 1.05; letter-spacing: -1.6px; color: var(--brand-blue); }
.rp-big-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-body); max-width: 74ch; }

.rp-worlds { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rp-worlds li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border-line-soft); }
.rp-world-n { width: 22px; font-family: var(--font-display); font-weight: 600; color: var(--brand-blue); }
.rp-world-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-ink); }
.rp-world-why { font-size: 12.5px; color: var(--text-muted); }

.rp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--s-32); }
.rp-block { break-inside: avoid; }
.rp-block-title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.3px; color: var(--text-ink); }
.rp-bars { gap: 9px; }
.rp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: baseline; }
.rp-row .hy-bar-label { font-size: 12.5px; line-height: 1.25; }
.rp-row .hy-bar-label small { display: inline; margin-left: 5px; font-size: 10.5px; }
.rp-row .bar { grid-column: 1 / -1; height: 7px; }
.rp-n { font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rp-note { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }

.rp-chapters { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rp-ch { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 7px; border-bottom: 1px solid var(--border-line-soft); font-size: 14px; color: var(--text-body); }
.rp-ch.is-done { color: var(--brand-blue-ink); font-weight: 600; }
.rp-foot { padding-top: var(--s-20); border-top: 1px solid var(--border-line); }
.rp-foot p { margin: 0 0 8px; font-size: 12px; line-height: 1.6; color: var(--text-muted); }

/* Print. The shell, the sidebar and the controls are not part of the report —
   what comes out of the printer is the document and nothing else. */
@media print {
  .sidebar, .top-bar, .rp-acts, .xp-modal, .skip-link { display: none !important; }
  .app, .app-main, .app-content, .wrap { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .xp-head { margin-bottom: 0 !important; }
  .ah-strip, .ah-title, .ah-sub { display: none !important; }
  .rp { border: 0; padding: 0; }
  .rp-section, .rp-block, .rp-head { page-break-inside: avoid; }
  body { background: #fff; }
}

/* ===========================================================================
 * 15 · The shared components, 2026-09-25.
 *
 * WHAT WENT WRONG, SO IT DOES NOT HAPPEN AGAIN. Each page had been growing its
 * own version of the same three things — a row of product cards, a section
 * heading, a list of chapters — and the differences were not decisions, they
 * were drift. There is now one of each and every page calls it.
 *
 * The spacing is a scale, not a set of guesses:
 *
 *     4 / 6 / 10       inside a control
 *     14 / 20          between elements in a card
 *     24               between cards, and between blocks in a dialog
 *     32               above a section heading
 *     20               below a section heading, before its content
 *
 * `--s-52` is a page-level rhythm and belongs to full-width documents. It is
 * not used inside a card or a dialog, which is precisely the mistake that left
 * 76px holes down the middle of every college sheet.
 * ======================================================================== */

/* --- the section heading, used on every app page ------------------------- */
.sec-head { margin: var(--s-32) 0 var(--s-20); }
.sec-head:first-child { margin-top: 0; }

/* --- the product row ----------------------------------------------------- */

/* Four cards, equal weight, on the dashboard and in My Space. Same markup,
   same words, same states. `is-here` marks the page you are already on. */
.prod-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.prod {
  display: flex; gap: 13px; align-items: center;
  padding: 15px 16px;
  border: 1px solid var(--border-line); border-radius: var(--r-lg);
  background: var(--surface-card);
  transition: border-color var(--mo-quick) var(--mo-ease),
              transform var(--mo-quick) var(--mo-ease),
              box-shadow var(--mo-quick) var(--mo-ease);
}
.prod:hover { border-color: var(--brand-blue-200); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.prod:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.prod-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.prod-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.2px; color: var(--text-ink); }
.prod-note { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.prod .ico:last-child { flex: none; color: var(--text-muted); }

.prod.is-done { border-color: rgba(14, 159, 110, .34); background: var(--status-green-tint); }
.prod.is-done .prod-note { color: var(--status-green-ink); }
.prod.is-now  { border-color: rgba(var(--brand-blue-rgb), .34); background: var(--surface-tint); }
/* Where you already are: ringed, never dimmed and never removed. */
.prod.is-here { box-shadow: 0 0 0 2px rgba(var(--brand-blue-rgb), .28); }

@media (max-width: 1100px) { .prod-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .prod-row { grid-template-columns: 1fr; } }

/* --- the dashboard ------------------------------------------------------- */

/* One primary action, chosen from where the student is. A dashboard that lists
   four equal options has not helped anyone decide anything. */
.db-next {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-24); flex-wrap: wrap;
  padding: var(--s-24);
  border: 1px solid rgba(var(--brand-blue-rgb), .28); border-radius: var(--r-xl);
  background: var(--surface-tint);
}
.db-next-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; max-width: 62ch; }
.db-next-copy .t-h3 { margin: 0; }

.db-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-20); align-items: start; }
.db-aside { display: flex; flex-direction: column; gap: var(--s-20); }
@media (max-width: 1000px) { .db-split { grid-template-columns: 1fr; } }

.db-chapters { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.db-chapter {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border-line-soft);
  font-size: 13.5px; color: var(--text-body);
}
.db-chapter:last-child { border-bottom: 0; padding-bottom: 0; }
.db-chapter.is-done { color: var(--brand-blue-ink); font-weight: 600; }

/* --- Discovery, once it is finished -------------------------------------- */

.ov-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ov-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--border-line); border-radius: var(--r-lg);
  background: var(--surface-card);
  transition: border-color var(--mo-quick) var(--mo-ease), background-color var(--mo-quick) var(--mo-ease);
}
.ov-row:hover { border-color: var(--brand-blue-200); background: var(--surface-tint); }
.ov-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ov-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-tint); color: var(--brand-blue-ink);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.ov-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ov-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-ink); }
.ov-meta { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.ov-go { flex: none; color: var(--text-muted); }
.ov-row:hover .ov-go { color: var(--brand-blue); }
.ov .ic-panel-body { columns: auto; flex: 0 0 auto; }
.ov .rc-cols { columns: auto; }
/* Five rows, so the panel sits to its content rather than stretching to the
   row and leaving 400px of empty card under the last chapter. */
.ov .ic-panel { align-self: center; }

/* --- retiring the one-offs these replaced -------------------------------- */

/* `.db-pillars` and `.sp-products` were two names for the product row and
   `.sp-grid` duplicated `.db-split`. Kept as aliases so nothing that still
   references them breaks, pointing at the shared rules. */
.db-pillars, .sp-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .db-pillars, .sp-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .db-pillars, .sp-products { grid-template-columns: 1fr; } }

/* ===========================================================================
 * 16 · DISCOVERY — one continuous experience. 2026-09-25.
 *
 * Built to Naveen's specification. Two modes on one page, and the page never
 * navigates between them:
 *
 *   FOCUS   the light interface, during questions. The statement is the only
 *           thing on it. No mascot, no panel, no reading, no scores.
 *   MOMENT  the deep blue environment, for an opening, a milestone, a chapter
 *           closing and the end. This is where the mascot lives.
 *
 * THE BLUE IS OURS, NOT THE REFERENCE'S. The spec named #2563EB / #0F172A;
 * Naveen's instruction was to use the project's own theme, so the environment
 * is built from `--brand-blue-900` (#102240) through `--brand-blue` (#3070b6)
 * with `--brand-blue-200` (#9dcae3) as the light. The mascot keeps its own
 * colours, orange included — it is the emotional punctuation, and the
 * interface is deliberately not.
 *
 * THE MOTION SCALE. Every duration below comes from this table and nothing
 * uses a number that is not in it.
 * ======================================================================== */

.qz {
  --dq-micro:  180ms;   /* hover, press                                   */
  --dq-ctrl:   250ms;   /* a control changing state                       */
  --dq-fade:   300ms;   /* content in or out                              */
  --dq-q:      380ms;   /* one question replacing another                 */
  --dq-slide:  420ms;   /* the two-card slide between statements           */
  --dq-screen: 550ms;   /* one screen replacing another                   */
  --dq-enter:  600ms;   /* the mascot arriving                            */
  --dq-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dq-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  transition: background-color var(--dq-screen) var(--dq-ease-soft);
}

/* --- the two modes ------------------------------------------------------- */

/* The whole shell changes, bar included, so a moment is an environment rather
   than a panel sitting on a light page. */
.qz.is-moment {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(var(--brand-blue-rgb), 0.55) 0%, rgba(var(--brand-blue-rgb), 0) 62%),
    radial-gradient(70% 60% at 82% 96%, rgba(var(--brand-sky-rgb), 0.16) 0%, rgba(var(--brand-sky-rgb), 0) 64%),
    var(--brand-blue-900);
  color: var(--text-on-deep);
}
.qz.is-moment .qz-exit { color: rgba(255, 255, 255, 0.72); }
.qz.is-moment .qz-exit:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.qz.is-moment .fx-progress { background: rgba(255, 255, 255, 0.16); }
.qz.is-moment .fx-progress > span { background: var(--brand-blue-200); }
.qz.is-moment .qz-pip { background: rgba(255, 255, 255, 0.22); }
.qz.is-moment .qz-pip.is-done { background: var(--brand-blue-200); }
.qz.is-moment .qz-pip.is-now { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }

/* The stage. No max-width cap from the question layout, no 116px reserved for
   a fixed bar that no longer exists. */
.qz-main {
  max-width: 1100px;
  padding: 8px clamp(16px, 4vw, 40px) var(--s-32);
  justify-content: center;
}
#card {
  width: 100%;
  transition: opacity var(--dq-fade) var(--dq-ease-soft), transform var(--dq-fade) var(--dq-ease-soft);
}
#card.is-leaving  { opacity: 0; transform: translateY(-8px); }
/* Only the mode change fades. Statement-to-statement is a real slide with both
   cards on screen — see `.dq-q.is-exit` below. */
#card { position: relative; }

/* Everything inside a screen arrives in order. `--i` is the beat. */
.dq-step { animation: dq-rise var(--dq-fade) var(--dq-ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes dq-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- MOMENT -------------------------------------------------------------- */

.dq-moment { position: relative; display: grid; place-items: center; min-height: calc(100dvh - 68px - var(--s-32) - 8px); }
.dq-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; max-width: 46ch; padding-block: var(--s-24);
}

/* The mascot. It arrives once, then breathes — 2 to 4px, on a long period, so
   it reads as alive rather than as a looping GIF. */
.dq-mascot { display: block; }
.dq-mascot img { display: block; width: 132px; height: 132px; }
.dq-pair { display: flex; align-items: flex-end; gap: 6px; }
.dq-mascot-2 img { width: 92px; height: 92px; }

@media (prefers-reduced-motion: no-preference) {
  .dq-mascot { animation: dq-mascot-in var(--dq-enter) var(--dq-ease) both; }
  .dq-mascot img { animation: dq-float 2600ms var(--dq-ease-soft) var(--dq-enter) infinite; }
  .dq-mascot.is-cheering img { animation: dq-cheer 900ms var(--dq-ease) var(--dq-enter) 1,
                                          dq-float 2600ms var(--dq-ease-soft) calc(var(--dq-enter) + 900ms) infinite; }
  .dq-mascot-2 { animation-delay: 160ms; }
}
@keyframes dq-mascot-in {
  from { opacity: 0; transform: translateY(20px) scale(.96) rotate(-1deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes dq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes dq-cheer {
  0%   { transform: translateY(0) scale(1) rotate(0); }
  35%  { transform: translateY(-12px) scale(1.04) rotate(-3deg); }
  65%  { transform: translateY(-4px) scale(1.01) rotate(2deg); }
  100% { transform: none; }
}

.dq-label {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--brand-blue-200);
}
.dq-head {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -1.2px;
  color: #fff; text-wrap: balance;
}
.dq-say { margin: 0; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
.dq-meta { margin: 4px 0 0; font-size: 13.5px; color: var(--brand-blue-200); font-variant-numeric: tabular-nums; }
.dq-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); max-width: 40ch; }

.dq-acts { margin-top: 6px; }
.dq-cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 14px 28px;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: #fff; color: var(--brand-blue-900);
  font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.2px;
  box-shadow: 0 10px 30px rgba(var(--brand-navy-rgb), 0.34), 0 0 0 0 rgba(255, 255, 255, 0.4);
  transition: transform var(--dq-micro) var(--dq-ease), box-shadow var(--dq-ctrl) var(--dq-ease);
}
.dq-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(var(--brand-navy-rgb), 0.4), 0 0 0 6px rgba(255, 255, 255, 0.12); }
.dq-cta:active { transform: translateY(0); }
.dq-cta:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85); }
.dq-cta .ico { width: 17px; height: 17px; }

.dq-link {
  padding: 8px 4px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.28);
  transition: color var(--dq-micro) var(--dq-ease);
}
.dq-link:hover { color: #fff; }
.dq-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); border-radius: var(--r-sm); }

/* The tick, drawn rather than dropped in. */
.dq-check { width: 52px; height: 52px; color: var(--brand-blue-200); }
.dq-check path { stroke-dasharray: 44; stroke-dashoffset: 44; }
@media (prefers-reduced-motion: no-preference) {
  .dq-check path { animation: dq-draw 550ms var(--dq-ease) 360ms both; }
  .dq-check circle { animation: dq-ring 550ms var(--dq-ease) 240ms both; transform-origin: center; }
}
@keyframes dq-draw { to { stroke-dashoffset: 0; } }
@keyframes dq-ring { from { opacity: 0; transform: scale(.7); } to { opacity: .38; transform: none; } }

/* The specks. Eight of them, drifting, never a particle system. */
.dq-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dq-speck {
  position: absolute; left: var(--x); top: var(--y);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-blue-200); opacity: 0;
  transform: scale(var(--s));
}
@media (prefers-reduced-motion: no-preference) {
  .dq-speck { animation: dq-drift 7s var(--dq-ease-soft) var(--d) infinite; }
}
@keyframes dq-drift {
  0%, 100% { opacity: 0; transform: translateY(6px) scale(calc(var(--s) * .6)); }
  50%      { opacity: .5; transform: translateY(-10px) scale(var(--s)); }
}

/* --- FOCUS: the question ------------------------------------------------- */

.dq-q {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-20); width: 100%; max-width: 620px; margin-inline: auto;
  min-height: calc(100dvh - 68px - var(--s-32) - 8px); justify-content: center;
}
.dq-q-count {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 1px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.dq-q-count span { color: var(--brand-blue); }
/* THE SLIDE. Both statements are on screen for 420ms and they travel together,
   left to right: the answered one leaves to the right, the next comes in from
   the left. The travel is a real distance — a sixth of the viewport, floored at
   90px — because 38px read as a flicker rather than as movement.

   The outgoing card is taken out of flow so the stage keeps the incoming one's
   height and nothing below it jumps. */
.dq-q { --dq-travel: clamp(90px, 16vw, 220px); }
.dq-q.is-exit {
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none;
}
.dq-q.to-right { animation: dq-out-right var(--dq-slide) var(--dq-ease) both; }
.dq-q.to-left  { animation: dq-out-left  var(--dq-slide) var(--dq-ease) both; }
.dq-q.from-left  { animation: dq-in-left  var(--dq-slide) var(--dq-ease) both; }
.dq-q.from-right { animation: dq-in-right var(--dq-slide) var(--dq-ease) both; }

@keyframes dq-out-right { to   { opacity: 0; transform: translateX(var(--dq-travel)); } }
@keyframes dq-out-left  { to   { opacity: 0; transform: translateX(calc(var(--dq-travel) * -1)); } }
@keyframes dq-in-left   { from { opacity: 0; transform: translateX(calc(var(--dq-travel) * -1)); }
                          to   { opacity: 1; transform: none; } }
@keyframes dq-in-right  { from { opacity: 0; transform: translateX(var(--dq-travel)); }
                          to   { opacity: 1; transform: none; } }

.dq-q-text {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 3.2vw, 34px); line-height: 1.25; letter-spacing: -0.8px;
  color: var(--text-ink); text-wrap: balance;
}
.dq-opts { display: flex; flex-direction: column; gap: 9px; width: 100%; }

.dq-opt {
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 12px 18px; width: 100%;
  border: 1.5px solid var(--border-line); border-radius: 15px;
  background: var(--surface-card); text-align: left; cursor: pointer;
  transition: border-color var(--dq-micro) var(--dq-ease),
              background-color var(--dq-micro) var(--dq-ease),
              transform var(--dq-micro) var(--dq-ease),
              opacity var(--dq-ctrl) var(--dq-ease);
}
.dq-opt:hover { border-color: var(--brand-blue-200); background: var(--surface-tint); }
.dq-opt:active { transform: scale(.99); }
.dq-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dq-opt-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1.5px solid var(--border-line); border-radius: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-muted);
  transition: border-color var(--dq-micro) var(--dq-ease), color var(--dq-micro) var(--dq-ease),
              background-color var(--dq-micro) var(--dq-ease);
}
.dq-opt-label { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-ink); }
.dq-opt-tick {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--border-line); color: #fff;
  transition: background-color var(--dq-ctrl) var(--dq-ease), border-color var(--dq-ctrl) var(--dq-ease);
}
.dq-opt-tick .opt-tick { width: 14px; height: 14px; opacity: 0; transform: scale(.6);
  transition: opacity var(--dq-ctrl) var(--dq-ease), transform var(--dq-ctrl) var(--dq-ease); }

.dq-opt.is-on { border-color: var(--brand-blue); background: var(--surface-tint); }
.dq-opt.is-on .dq-opt-n { border-color: var(--brand-blue); color: var(--brand-blue-ink); }
.dq-opt.is-on .dq-opt-tick { background: var(--brand-blue); border-color: var(--brand-blue); }
.dq-opt.is-on .opt-tick { opacity: 1; transform: none; }
/* Every other option steps back the instant one is chosen. */
.dq-opt.is-dim { opacity: .4; }

.dq-q-foot { min-height: 34px; }

/* --- the overview, once Discovery is finished ---------------------------- */

.dq-chapters { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.dq-chapter {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.06); color: #fff;
  transition: background-color var(--dq-micro) var(--dq-ease), border-color var(--dq-micro) var(--dq-ease);
}
.dq-chapter:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.34); }
.dq-chapter:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); }
.dq-chapter-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: var(--brand-blue-200);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.dq-chapter-name { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.dq-chapter-go { color: var(--brand-blue-200); display: inline-flex; }
.dq-chapter-go .ico { width: 16px; height: 16px; }

/* --- the handover into the profile --------------------------------------- */

.dq-gen { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; text-align: left; }
.dq-gen-row {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; color: rgba(255, 255, 255, 0.88);
  animation: dq-rise var(--dq-fade) var(--dq-ease) both;
  animation-delay: calc(360ms + var(--i) * 260ms);
}
.dq-gen-tick {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-blue-200); color: var(--brand-blue-900);
}
.dq-gen-tick .ico { width: 13px; height: 13px; }
.dq-gen-row .dq-gen-tick { animation: dq-pop var(--dq-ctrl) var(--dq-ease) both;
  animation-delay: calc(520ms + var(--i) * 260ms); }
@keyframes dq-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }

/* --- "How this works" ---------------------------------------------------- */

.dq-how {
  width: min(560px, calc(100vw - 32px)); max-width: none; max-height: 84dvh;
  padding: 0; border: 0; border-radius: var(--r-xl);
  background: var(--surface-card); color: var(--text-ink);
  box-shadow: var(--shadow-lift); overflow: auto;
}
.dq-how::backdrop { background: rgba(var(--brand-navy-rgb), 0.5); backdrop-filter: blur(3px); }
.dq-how-body { padding: var(--s-32); display: flex; flex-direction: column; gap: 6px; }
.dq-how-h {
  margin: var(--s-20) 0 6px; font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: -0.2px; color: var(--text-ink);
}
.dq-how-scale { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.dq-how-scale li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-body); }
.dq-how-scale span {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1.5px solid var(--border-line); border-radius: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--text-muted);
}

/* --- phone --------------------------------------------------------------- */

@media (max-width: 640px) {
  .dq-mascot img { width: 104px; height: 104px; }
  .dq-mascot-2 img { width: 74px; height: 74px; }
  .dq-body { gap: 12px; max-width: none; }
  .dq-head { font-size: clamp(26px, 8vw, 34px); }
  .dq-cta { width: 100%; justify-content: center; }
  .dq-acts { width: 100%; }
  .dq-opt { min-height: 60px; }
  .dq-how-body { padding: var(--s-20); }
}

/* --- reduced motion ------------------------------------------------------
 *
 * Nothing moves, nothing drifts, nothing loops. Every screen is simply already
 * in its final state, and not one word or control is lost. */
@media (prefers-reduced-motion: reduce) {
  .dq-step, .dq-opt, .dq-q-text, .dq-gen-row, .dq-gen-tick, .dq-q,
  .dq-q.is-exit, .dq-check path, .dq-check circle,
  .dq-mascot, .dq-mascot img { animation: none !important; }
  .dq-check path { stroke-dashoffset: 0; }
  .dq-speck { display: none; }
  #card { transition: none; }
  .dq-cta, .dq-opt { transition: background-color 120ms linear, border-color 120ms linear; }
}

/* --- the chapter reading, 2026-09-25 -------------------------------------
 *
 * Naveen asked for the result back after a chapter, and the specification says
 * the completion screen stays one idea. Both are satisfied by putting the
 * result in two places at two weights: one sentence on the blue, in words, with
 * no number in it — and the whole reading on a light sheet one tap behind it.
 */
.dq-read {
  margin: 2px 0 0; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5;
  color: #fff; max-width: 38ch;
}
.dq-read strong { color: var(--brand-blue-200); font-weight: 600; }
.dq-read-more { margin-top: -4px; }

.dq-read-sheet { width: min(640px, calc(100vw - 32px)); }
.dq-read-body { gap: 0; }
.dq-read-body .rd-line { margin: 6px 0 0; font-weight: 600; letter-spacing: -0.3px; }
.dq-read-body .rd-line strong { color: var(--brand-blue); }
.rd-sense {
  display: inline-block; align-self: flex-start; margin: 14px 0 0; padding: 6px 13px;
  background: var(--status-amber-tint); color: var(--status-amber);
  border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500;
}
.rd-blocks {
  margin-top: var(--s-24); padding-top: var(--s-20);
  border-top: 1px solid var(--border-line-soft);
  display: flex; flex-direction: column; gap: var(--s-24);
}
.rd-block .rc-block-title { margin: 0 0 12px; font-size: 15px; }
.rd-bars { gap: 10px; }
/* Label and number on one line, bar full width under them — the same row this
   build settled on for the report, so a reading looks the same everywhere. */
.rd-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label num" "bar bar";
  gap: 3px 8px; align-items: baseline;
}
.rd-row .hy-bar-label { grid-area: label; font-size: 13px; line-height: 1.3; }
.rd-row .hy-bar-label small { display: inline; margin-left: 5px; font-size: 11px; }
.rd-row .rd-n { grid-area: num; font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rd-row .bar { grid-area: bar; height: 7px; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-foot { margin-top: var(--s-20); padding-top: var(--s-20); border-top: 1px solid var(--border-line-soft); }

/* --- the overview rows, fixed --------------------------------------------
 *
 * `.dq-body` caps at 46ch, which is right for a headline and wrong for a list
 * of five chapter names — "What pulls you?" was breaking over three lines with
 * the number pill stretched down the side of it. The overview gets its own
 * measure, and a name never wraps. */
.dq-moment.is-overview .dq-body { max-width: 620px; }
.dq-chapter-row { display: flex; gap: 8px; align-items: stretch; }
.dq-chapter { flex: 1; min-height: 52px; min-width: 0; }
.dq-chapter-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dq-chapter-read {
  flex: none; padding: 0 16px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-lg);
  background: transparent; color: var(--brand-blue-200);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  transition: background-color var(--dq-micro) var(--dq-ease), color var(--dq-micro) var(--dq-ease);
}
.dq-chapter-read:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }
.dq-chapter-read:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); }
@media (max-width: 560px) {
  .dq-chapter-row { flex-direction: column; }
  .dq-chapter-read { padding: 10px 16px; }
}

/* --- taking #card back from the old Discovery, 2026-09-25 -----------------
 *
 * app.css:3498 carries `#card > * { animation: q-in-fwd 260ms ... }` — the
 * HTMX question swap from the Django build. It is an ID selector, so it beat
 * every `.dq-*` animation in this file and quietly replaced them all with its
 * own 260ms, 14px fade. That is why the slide did not slide and why the moments
 * looked flatter than they were written to be: nothing here was reaching the
 * screen's root element at all.
 *
 * These override it at matching specificity rather than with `!important`, and
 * only for the screens this build actually draws. The Django rule is left alone
 * for the templates that still use it.
 */
#card > .dq-moment,
#card > .dq-q { animation: none; }

#card > .dq-q.to-right   { animation: dq-out-right var(--dq-slide) var(--dq-ease) both; }
#card > .dq-q.to-left    { animation: dq-out-left  var(--dq-slide) var(--dq-ease) both; }
#card > .dq-q.from-left  { animation: dq-in-left   var(--dq-slide) var(--dq-ease) both; }
#card > .dq-q.from-right { animation: dq-in-right  var(--dq-slide) var(--dq-ease) both; }

@media (prefers-reduced-motion: reduce) {
  #card > .dq-moment, #card > .dq-q,
  #card > .dq-q.to-right, #card > .dq-q.to-left,
  #card > .dq-q.from-left, #card > .dq-q.from-right { animation: none; }
}

/* --- the way back, 2026-09-25 --------------------------------------------
 *
 * `.dq-link` is the blue moment's quiet link, so it is white — and the question
 * screen is white. The only control that takes a student back a statement has
 * been invisible since this rebuild landed: present, focusable, keyboard
 * reachable, and impossible to see. Naveen asked how to go back, which is how
 * it was found.
 *
 * It is a bordered pill now rather than a bare link, because it is the single
 * way back on a screen that otherwise moves only forwards, and it sits low on a
 * tall page where an underline is easy to miss.
 */
.dq-back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 18px 8px 14px; cursor: pointer;
  border: 1.5px solid var(--border-line); border-radius: var(--r-pill);
  background: var(--surface-card); color: var(--text-body);
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: -0.2px;
  transition: border-color var(--dq-micro) var(--dq-ease),
              background-color var(--dq-micro) var(--dq-ease),
              color var(--dq-micro) var(--dq-ease);
}
.dq-back:hover { border-color: var(--brand-blue-200); background: var(--surface-tint); color: var(--brand-blue-ink); }
.dq-back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dq-back .ico { width: 15px; height: 15px; }

/* Room for it, and it is not squeezed against the last option. */
.dq-q-foot { min-height: 40px; margin-top: 4px; }

/* ---- Sign in / sign up, 2026-09-26 ------------------------------------
   The navy panel carries a photograph now (Naveen: "here also we can show
   images"). The photo fills the panel, a navy veil sits on it, heaviest where
   the words are, and the words are centred in the panel instead of hanging
   from the top with an empty half below. A mascot greets you above the form. */
.authx-aside { justify-content: space-between; }
.authx-aside > :not(.authx-aside-photo) { position: relative; z-index: 2; }
.authx-aside-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
}
.authx-aside::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 34, 64, 0.50) 0%, rgba(16, 34, 64, 0.28) 18%, rgba(16, 34, 64, 0.84) 38%, rgba(16, 34, 64, 0.95) 100%);
}
.authx-aside-body { margin-block: auto; padding-bottom: 34px; }
.authx-pill { background: rgba(16, 34, 64, 0.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.authx-mascot { display: block; width: 84px; height: 84px; margin: 0 0 14px -6px; }
@media (max-width: 900px) {
  .authx-aside::before { background: rgba(16, 34, 64, 0.72); }
  .authx-aside-body { padding-bottom: 0; }
  .authx-mascot { width: 64px; height: 64px; }
}

/* ---- Sign in: the visual story, 2026-09-26 ------------------------------
   Replaces the pills on the sign-in panel. Four photographs of student life,
   one short line at a time, crossfading (never sliding). Motion values are
   Naveen's brief: 600ms crossfade, line in 450ms from 8px, out 300ms, photo
   zoom 1 -> 1.03 across the hold. Brand navy/blue for the veil. */
.authx-story { justify-content: space-between; padding-bottom: 0; }
.authx-story::before { display: none; }
.authx-story > .story-scenes { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.story-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; }
.story-scene.on { opacity: 1; }
.story-scene img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  transform: scale(1);
  /* the zoom resets only after the fade out has finished */
  transition: transform 0s linear 700ms;
}
.is-playing .story-scene.on img { transform: scale(1.03); transition: transform 5200ms linear; }
/* the veil: deep navy, lightest in the middle so the photo stays alive,
   heaviest at the foot where the line sits; a faint brand-blue cast on top */
.story-scenes::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 34, 64, 0.62) 0%, rgba(16, 34, 64, 0.10) 20%, rgba(16, 34, 64, 0.10) 50%, rgba(16, 34, 64, 0.80) 100%),
    linear-gradient(0deg, rgba(48, 112, 182, 0.16), rgba(48, 112, 182, 0.16));
}
.story-foot { position: relative; z-index: 2; padding-bottom: 44px; }
.story-lines { display: grid; }
.story-line {
  grid-area: 1 / 1; margin: 0; max-width: 16ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 2.7vw, 40px); line-height: 1.12; letter-spacing: -0.03em;
  color: #fff; text-wrap: balance;
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.story-line.on {
  opacity: 1; transform: none;
  transition: opacity 450ms var(--mo-ease, ease) 250ms, transform 450ms var(--mo-ease, ease) 250ms;
}
.story-dots { display: flex; gap: 7px; align-items: center; margin-top: 26px; }
.story-dots i { display: block; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.40);
  transition: width 500ms ease, background 500ms ease; }
.story-dots i.on { width: 26px; background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .story-scene, .story-line { transition: none; }
}
@media (max-width: 900px) {
  .authx-story { min-height: 220px; }
  .authx-story .story-foot { padding-bottom: 20px; }
  .authx-story .story-line { font-size: 22px; }
  .authx-story .story-dots { display: none; }
}

/* ---- Discovery: the lesson layout, 2026-09-26 ---------------------------
   Naveen's Duolingo reference. Same frame: a centred column with the bar
   across its top, an ask line, the guide speaking the statement in a bubble,
   a rule, stacked pressable answer rows, and a footer bar across the bottom.
   Refused, as in the note in js/quiz.js: hearts, CHECK, right/wrong. */

/* the bar sits in the lesson's column, not edge to edge */
.qz-bar { max-width: 1040px; width: 100%; margin-inline: auto; height: 84px; }
.qz-progress { height: 16px; }

.dq-lesson {
  align-items: stretch; text-align: left; gap: 0; max-width: 600px;
  min-height: calc(100dvh - 84px - 96px - var(--s-32)); justify-content: center;
}
.dq-ask {
  margin: 0 0 28px; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.4px; color: var(--text-ink);
}
.dq-say-row {
  display: flex; align-items: flex-end; gap: 18px;
  padding-bottom: 22px; margin-bottom: 26px; border-bottom: 2px solid var(--border-line);
}
.dq-speaker { flex: none; }
.dq-speaker img { width: 108px; height: 108px; display: block; }
.dq-bubble {
  position: relative; flex: 1; margin-bottom: 22px;
  padding: 16px 20px; border: 2px solid var(--border-line); border-radius: 16px; background: var(--surface-card);
}
/* the tail, pointing back at the guide: a bordered square turned 45deg */
.dq-bubble::before {
  content: ""; position: absolute; left: -9px; bottom: 18px; width: 16px; height: 16px;
  background: var(--surface-card); border-left: 2px solid var(--border-line); border-bottom: 2px solid var(--border-line);
  transform: rotate(45deg);
}
.dq-lesson .dq-q-text {
  font-family: var(--font-body, inherit); font-weight: 500;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; letter-spacing: -0.1px; text-wrap: pretty;
}

/* the rows: a thicker bottom edge so they read as pressable, pressed on tap */
.dq-lesson .dq-opts { gap: 10px; }
.dq-lesson .dq-opt {
  position: relative; justify-content: center; min-height: 58px; padding: 12px 18px;
  border: 2px solid var(--border-line); border-bottom-width: 4px; border-radius: 14px;
}
.dq-lesson .dq-opt-n { position: absolute; left: 16px; top: 50%; translate: 0 -50%; border-width: 2px; }
.dq-lesson .dq-opt-label { flex: none; text-align: center; font-size: 16.5px; }
.dq-lesson .dq-opt:active { transform: translateY(2px); border-bottom-width: 2px; margin-top: 2px; }
.dq-lesson .dq-opt.is-on { border-color: var(--brand-blue); background: var(--surface-tint); }
.dq-lesson .dq-opt.is-on .dq-opt-label { color: var(--brand-blue-ink); }

/* the footer bar, fixed across the bottom like the reference's */
.qz-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  border-top: 2px solid var(--border-line); background: var(--surface-card);
}
.qz-foot[hidden] { display: none; }
.qz-foot-in {
  max-width: 1040px; margin-inline: auto; min-height: 96px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(16px, 4vw, 40px);
}
.qz-foot-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border: 2px solid var(--border-line); border-bottom-width: 4px; border-radius: 14px;
  background: var(--surface-card); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-muted);
  transition: color var(--dq-micro, 140ms) ease, border-color var(--dq-micro, 140ms) ease;
}
.qz-foot-back:hover { color: var(--text-ink); border-color: var(--brand-blue-200); }
.qz-foot-back:active { transform: translateY(2px); border-bottom-width: 2px; }
.qz-foot-back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qz-foot-back[hidden] { visibility: hidden; display: inline-flex; }
.qz-foot-back .ico { width: 16px; height: 16px; }
.qz-foot-count {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.qz-foot-count span { color: var(--brand-blue); }
/* room for the fixed footer so the last row is never under it */
.qz-main { padding-bottom: calc(96px + var(--s-32)); }

@media (max-width: 640px) {
  .dq-ask { margin-bottom: 18px; }
  .dq-speaker img { width: 76px; height: 76px; }
  .dq-say-row { gap: 12px; padding-bottom: 16px; margin-bottom: 18px; }
  .dq-bubble { margin-bottom: 14px; padding: 12px 14px; }
  .qz-foot-in { min-height: 76px; }
  .qz-main { padding-bottom: calc(76px + var(--s-20)); }
}

/* ---- Creatures (js/creatures.js), 2026-09-27 ------------------- */
.creature{display:inline-block; width:var(--cs, 128px); aspect-ratio:208 / 182; cursor:pointer; vertical-align:middle; flex:none}
.creature > svg{display:block; width:100%; height:100%; overflow:visible}

/* Creatures inside Discovery. The old PNG rules above size an <img>; these
   size the creature itself. The pair on the final screen is now all five. */
.creature.dq-mascot{--cs:200px; margin-inline:auto}
.creature.dq-mascot-2{--cs:104px}
.creature.dq-speaker{--cs:190px; margin:0 -28px -14px -36px}
/* The creature and its props (bulb, stars, thought bubble) live inside its
   own box; the ask line keeps clear of it. */
.dq-lesson .dq-ask{margin-bottom:30px}
.dq-lesson .dq-say-row{align-items:center}
.dq-pair{display:flex; align-items:flex-end; justify-content:center; gap:0; flex-wrap:wrap}
.dq-pair .creature{margin:0 -10px}
@media (max-width:640px){ .creature.dq-mascot{--cs:118px} .creature.dq-mascot-2{--cs:78px} .creature.dq-speaker{--cs:84px} }
.creature.authx-mascot{width:var(--cs, 118px); height:auto; margin:0 0 8px -14px; display:block}
.creature.mascot{width:var(--cs, 128px); height:auto}