/* ==========================================================================
   pages.css — the long-form content sections, shared by /how-it-works and
   /teachers.

   These sections used to sit on the landing page. The landing page is now a
   single conversion screen, so everything that explains the product moved to
   dedicated pages reachable from the nav, and the CSS moved here rather than
   being duplicated into each new page.

   Loads AFTER site.css, which owns tokens, type, buttons, nav, footer and the
   FAQ. Nothing here may redeclare a token.

   Composition rule carried over from the old landing page: each section must
   differ from its neighbours in at least two of container width, column count,
   ground colour, and the kind of object it presents. Sections that are
   interchangeable read as generated no matter how good each one is.
   ========================================================================== */

/* ---------- page header (shared by both content pages) ------------------- */
.page-head { background: var(--paper-2); border-bottom: 1px solid var(--hair); }
.page-head .wrap { padding: 52px 0 46px; }
.page-head h1 { max-width: 22ch; }
.page-head .lede { margin-top: 18px; }
.page-head .btn { margin-top: 28px; }

/* ---------- LEARN: ruled paper, two different shapes -------------------
   Ruled horizontal lines on warm paper: an accounting pad, not a blueprint
   grid. Row A is a 7/5 split; row B is a full-width panel under a short
   intro, so the two blocks are not mirror images of one another. */
.learn-sec {
  background:
    repeating-linear-gradient(180deg, transparent 0 43px, rgba(16,52,74,0.055) 43px 44px),
    var(--ledger);
  border-bottom: 1px solid var(--ledger-line);
}
.learn-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 62px;
  align-items: center;
  justify-items: center;
  padding-bottom: 66px;
  border-bottom: 1px solid var(--ledger-line);
}
.learn-split > div:first-child { justify-self: start; width: 100%; }
.learn-split h3 { margin-bottom: 12px; }
.learn-split > div > .lede { font-size: 16px; margin-bottom: 26px; }

/* spec list: hairline rows, monochrome tiles, one accent on hover */
.speclist { list-style: none; margin: 0; padding: 0; }
.speclist li {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 15px 8px 15px 2px;
  border-top: 1px solid var(--ledger-line);
  border-left: 2px solid transparent;
  transition: background-color 0.18s ease, border-left-color 0.18s ease;
}
.speclist li:last-child { border-bottom: 1px solid var(--ledger-line); }
.speclist li:hover { background: rgba(255,255,255,0.8); border-left-color: var(--green); }
.sp-ic {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-data);
  background: #eceee7; color: #4a5c52;
  display: grid; place-items: center;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.sp-ic svg { width: 20px; height: 20px; }
.speclist li:hover .sp-ic { background: var(--green-tint); color: var(--green-deep); }
.sp-tx b { display: block; font-family: var(--f-sans); font-weight: 600; font-size: 15px; color: var(--ink); }
.sp-tx small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* device: gradient bezel, glare, side keys, contact shadow.
   Absolute width, not a percentage of the column: as a percentage this
   resolved to ~370px and the 640x985 source rendered ~1200px tall. */
.lshot { display: flex; flex-direction: column; align-items: center; }
.device-pro {
  position: relative;
  width: 252px;
  border-radius: 32px; padding: 9px;
  background: linear-gradient(155deg, #2a3d52 0%, #0b1725 45%, #16273a 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.09),
    0 2px 4px rgba(8,20,33,0.2),
    0 24px 48px -12px rgba(8,20,33,0.38),
    0 56px 90px -36px rgba(13,42,61,0.4);
  transform: rotate(-1.5deg);
}
.device-pro::before, .device-pro::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #34495f, #101d2c);
}
.device-pro::before { right: -3px; top: 104px; height: 56px; }
.device-pro::after { left: -3px; top: 88px; height: 32px; box-shadow: 0 44px 0 0 #1d2f42; }
.dp-screen { position: relative; border-radius: 24px; overflow: hidden; }
.dp-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 16%, transparent 30%);
}
.device-stand {
  width: 60%; height: 15px; margin-top: 24px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(13,42,61,0.16), transparent 68%);
}

/* row B: the question bank gets the full measure, as a two-column ledger */
.bank-block { padding-top: 58px; }
.bank-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.bank-intro .lede { font-size: 16px; margin-top: 12px; max-width: 58ch; }
.bank-cols { columns: 2; column-gap: 44px; }
.bank-cols .ledger-rows { break-inside: avoid; }
@media (max-width: 900px) {
  .learn-split { grid-template-columns: 1fr; gap: 38px; padding-bottom: 46px; }
  .lshot { order: -1; }
  .bank-cols { columns: 1; }
}

/* ---------- BIOMES: full-bleed strip of the real in-app art ------------- */
.biomes-sec { background: var(--paper); overflow: hidden; }
.marquee {
  display: flex; gap: 18px;
  width: max-content;
  padding: 10px 0;
  min-height: 300px;
  animation: marquee 52s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee:hover, .marquee:focus-within { animation-play-state: paused; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
/* The frame holds still and the art scales inside it. A card that lifts and
   scales as a whole is the stock hover, and it fights the strip's motion. The
   art lives on its own child so the zoom is a compositor-only transform:
   scaling via background-size repaints a full-bleed WebP every frame. */
.biome-card {
  position: relative;
  width: 206px;
  aspect-ratio: 21 / 29;
  border-radius: var(--r-card);
  overflow: hidden;
  flex: none;
  border: 1px solid rgba(16,52,74,0.1);
  background: #dce7ed;
}
.biome-art {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center top;
  transform: scale(1);
  transition: transform 0.55s var(--ease);
  backface-visibility: hidden;
}
.biome-card:hover .biome-art { transform: scale(1.07); }
.biome-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,30,48,0.66), transparent 52%);
}
.biome-card span {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--f-sans); font-weight: 600; font-size: 15px; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
@media (prefers-reduced-motion: reduce) {
  /* becomes an honest scrollable row rather than frozen mid-slide */
  .marquee { animation: none; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
  .biome-card { scroll-snap-align: start; }
}
@media (max-width: 620px) { .biome-card { width: 162px; } }

/* ---------- TRY: the demo on its own dark ground ------------------------ */
.demo-sec { background: linear-gradient(168deg, var(--panel) 0%, var(--panel-2) 100%); }
.demo-head { max-width: 620px; margin-bottom: 42px; }
.demo-head h2 { color: #fff; }
.demo-head .lede { color: #a9c7d8; margin-top: 14px; }
.demo-head .datastamp { color: #7fa8bd; }
.demo-head .datastamp em { color: #cfe4ef; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 54px; align-items: start; }
.demo-aside p { color: #a9c7d8; font-size: 15px; line-height: 1.7; }
.demo-aside .demo-actions { margin-top: 24px; }
/* one of only two places --lift is allowed: this card genuinely floats */
.quizcard {
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: var(--lift-deep);
  padding: 28px;
  min-height: 392px;   /* reserved before JS fills it, so nothing shifts */
}
.q-kicker { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.q-kicker .qfish { width: 32px; height: 24px; flex: none; }
.q-prompt {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-weight: 600; font-size: 22px; line-height: 1.28; letter-spacing: -0.02em; color: var(--ink);
  margin: 0 0 18px;
  /* clamped to two lines so switching question never resizes the card */
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(22px * 1.28 * 2);
}
.q-opts { display: grid; gap: 9px; }
.q-opt {
  text-align: left;
  font-family: var(--f-sans); font-weight: 450; font-size: 15px; color: var(--body);
  background: var(--paper);
  border: 1.5px solid var(--hair);
  box-shadow: 0 3px 0 var(--hair);
  border-radius: var(--r-btn);
  padding: 13px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.12s var(--ease-press), transform 0.12s var(--ease-press);
}
.q-opt:hover { border-color: var(--ocean); box-shadow: 0 3px 0 var(--ocean-tint); }
.q-opt:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.q-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--hair); }
.q-opt.correct { background: var(--green-tint); border-color: var(--green); box-shadow: 0 3px 0 var(--green-dark); color: var(--green-deep); font-weight: 600; animation: optPop 0.4s var(--ease); }
.q-opt.wrong { background: var(--red-tint); border-color: var(--red); box-shadow: 0 3px 0 #b52f2f; color: #a82b2b; font-weight: 600; animation: optShake 0.4s ease; }
.q-opt:disabled { cursor: default; }
.q-opt:disabled:not(.correct):not(.wrong) { opacity: 0.5; box-shadow: none; }
@keyframes optPop { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes optShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 65% { transform: translateX(5px); } }
/* reserved, not display:none, so answering never shifts the card */
.q-feedback {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; min-height: 58px;
  border-radius: var(--r-btn); padding: 12px 15px;
  font-weight: 500; font-size: 15px; line-height: 1.3;
  visibility: hidden; opacity: 0; transition: opacity 0.2s ease;
}
.q-feedback.show { visibility: visible; opacity: 1; animation: optPop 0.4s var(--ease); }
.q-feedback.good { background: var(--green-tint); color: var(--green-deep); }
.q-feedback.bad { background: var(--red-tint); color: #a82b2b; }
.q-feedback .fb-fish { width: 44px; height: 32px; flex: none; }
.q-again { margin-top: 16px; visibility: hidden; opacity: 0; transition: opacity 0.2s ease; }
.q-again.show { visibility: visible; opacity: 1; }
.free-meter { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; }
.free-pips { display: flex; gap: 4px; }
.free-pips i { width: 20px; height: 5px; border-radius: var(--r-pill); background: var(--hair-2); border: 1px solid var(--hair); }
.free-pips i.used { background: var(--ocean); border-color: var(--ocean-dark); }
.free-label { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.q-gate { text-align: center; padding: 12px 4px 4px; animation: optPop 0.45s var(--ease); }
.q-gate .gate-fish { width: 92px; margin: 4px auto 8px; }
.q-gate .gate-fish svg { width: 100%; height: auto; overflow: visible; }
.q-gate h3 { margin: 4px 0 10px; }
.q-gate p { margin: 0 auto 20px; max-width: 42ch; font-size: 15px; line-height: 1.65; color: var(--muted); }
.q-gate .gate-ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 900px) {
  .demo-grid { grid-template-columns: 1fr; gap: 32px; }
  .demo-aside { order: 2; }
}

/* ---------- PROOF: a ledger, not three shadowed cards ------------------ */
.proof-sec { background: var(--paper); }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.proof-item { padding: 30px 28px 30px 0; border-right: 1px solid var(--hair); }
.proof-item:last-child { border-right: 0; }
.proof-item:not(:first-child) { padding-left: 28px; }
.proof-item h3 { font-size: 16.5px; margin: 4px 0 8px; }
.proof-item p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.proof-item .fig-xl { color: var(--green-deep); }
.proof-status {
  margin-top: 34px; padding: 24px 26px;
  background: var(--ledger); border: 1px solid var(--ledger-line); border-radius: var(--r-data);
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: space-between;
}
.proof-status p { max-width: 68ch; font-size: 15px; line-height: 1.65; }
@media (max-width: 820px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-item { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--hair); }
  .proof-item:not(:first-child) { padding-left: 0; }
  .proof-item:last-child { border-bottom: 0; }
}

/* ---------- TEACHERS: dark credibility panel --------------------------- */
.teach-sec { background: linear-gradient(155deg, var(--panel) 0%, var(--panel-2) 100%); }
.teach-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); gap: 52px; align-items: center; }
.teach-sec h2 { color: #fff; }
.teach-sec .datastamp { color: #7fa8bd; }
.teach-sec .datastamp em { color: #cfe4ef; }
/* three tracks as hairline rows on the dark ground, not three white cards */
.tracks { list-style: none; margin: 26px 0 28px; padding: 0; border-top: 1px solid rgba(255,255,255,0.14); }
.tracks li {
  display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  border-left: 2px solid transparent;
  transition: border-left-color 0.18s ease;
}
.tracks .tk-ic { width: 20px; height: 20px; margin-top: 2px; }
.tracks b { display: block; font-family: var(--f-sans); font-weight: 600; font-size: 15.5px; color: #fff; }
.tracks p { margin-top: 2px; font-size: 14px; line-height: 1.6; color: #a9c7d8; }
.tk-class .tk-ic { color: #9fc4dc; } .tk-class:hover { border-left-color: #9fc4dc; }
.tk-chapter .tk-ic { color: var(--gold); } .tk-chapter:hover { border-left-color: var(--gold); }
.tk-family .tk-ic { color: var(--coral); } .tk-family:hover { border-left-color: var(--coral); }
/* the 3-step setup: numbered because it IS a sequence, and the order is the
   information. Set in mono so the steps read as a procedure. */
.steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: baseline; counter-increment: s; }
.steps li::before {
  content: counter(s);
  font-family: var(--f-mono); font-size: 13px; color: var(--green);
  border-bottom: 1px solid rgba(88,204,2,0.4); text-align: center;
}
.steps span { font-size: 15px; line-height: 1.6; color: #dbe9f0; }
.steps b { color: #fff; font-weight: 600; }
.teach-ctas { display: flex; gap: 11px; flex-wrap: wrap; }
.teach-links { margin-top: 18px; font-size: 14px; color: #93b6c9; }
.teach-links a { color: #86cff5; font-weight: 500; }
/* the class-code card: warm ledger paper, because it is a record */
.teach-card { background: var(--ledger); border-radius: var(--r-card); box-shadow: var(--lift-deep); padding: 24px; max-width: 392px; margin-inline: auto; }
.tc-cap { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); text-align: center; }
.class-code { display: flex; gap: 7px; justify-content: center; margin: 16px 0 6px; }
.class-code b {
  width: 42px; height: 52px;
  display: grid; place-items: center;
  background: #fff; color: var(--ink);
  border: 1px solid var(--ledger-line); border-bottom: 3px solid var(--ledger-line);
  border-radius: var(--r-data);
  font-family: var(--f-mono); font-size: 23px; font-weight: 500;
  animation: codePop 0.5s var(--ease) both;
}
.class-code b:nth-child(2) { animation-delay: 0.06s; } .class-code b:nth-child(3) { animation-delay: 0.12s; }
.class-code b:nth-child(4) { animation-delay: 0.18s; } .class-code b:nth-child(5) { animation-delay: 0.24s; }
.class-code b:nth-child(6) { animation-delay: 0.30s; }
@keyframes codePop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.roster { margin-top: 16px; border-top: 1px solid var(--ledger-line); padding-top: 4px; min-height: 228px; }
.roster-row { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-bottom: 1px solid #eee9dc; }
.roster-row:last-child { border-bottom: 0; }
.roster-row .rr-fish { width: 32px; height: 24px; flex: none; }
.roster-row .rr-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--ink); }
.roster-row .rr-bar { flex: 1.1; height: 8px; border-radius: var(--r-pill); background: #ece7da; overflow: hidden; }
/* functional progress colours: <50% red, 50-79% amber, 80%+ emerald */
.roster-row .rr-bar i {
  display: block; height: 100%; width: 100%; border-radius: var(--r-pill);
  background: #0f9d6e; transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease);
}
.roster-row .rr-bar i.warn { background: #d18a00; }
.roster-row .rr-bar i.crit { background: #cf3f3f; }
.roster-row .rr-pct { width: 36px; text-align: right; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) { .teach-grid { grid-template-columns: 1fr; gap: 38px; } }

/* ---------- closing CTA (shared by the content pages) ------------------ */
.cta-sec { background: var(--paper); text-align: center; }
.cta-sec .wrap-narrow { display: grid; justify-items: center; gap: 14px; }
.cta-fish { width: 104px; animation: fishBob 5s ease-in-out infinite; }
.cta-fish svg { width: 100%; height: auto; overflow: visible; }
@keyframes fishBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .cta-fish { animation: none; } }
.cta-sec p { font-size: 17px; color: var(--muted); max-width: 46ch; }
.cta-sec .btn { margin-top: 12px; }

/* confetti bits (fired by the demo question) */
.confetti {
  position: fixed; width: 9px; height: 13px; border-radius: 2px;
  z-index: 999; pointer-events: none;
  animation: confettiFall 1.15s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes confettiFall {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(0.7); opacity: 0; }
}