/*
 * app/web/css/home.css — the marketing home page (design/pages/home/default.html at 1440 and
 * phone.html at 390, their <style> blocks made fluid and token-only). Loads after landing.css,
 * the shared marketing shell, which owns the masthead, grid, bands, register, plates and their lightbox, checklist,
 * footage, call to action and footer; everything here is this page's own layout. Phone rules key
 * on [data-layout='mobile'] (device-boot.js), never on a width query.
 */

/* ---------- hero: the classroom footage full-bleed, the statement centred over it ----------
   The owner's header (2026-10-24, on reviewing the built site): the showcase cut behind a
   centred statement, as the previous site had it, set in the 2026 type and buttons. The footage
   box is the shared .hero-footage (landing.css: poster, video, reduced motion); the scrim here
   is heavier than the shell's, because cream text has to hold over the brightest shot. */

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(760px, 88vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px var(--layout-gutter) 104px;
  background: var(--color-field-navy);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-field-navy) 68%, transparent) 0%,
      color-mix(in srgb, var(--color-field-navy) 52%, transparent) 44%,
      color-mix(in srgb, var(--color-field-navy) 66%, transparent) 100%),
    radial-gradient(ellipse 80% 64% at 50% 42%,
      transparent 0%,
      color-mix(in srgb, var(--color-field-navy) 36%, transparent) 100%);
}
.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 980px;
  min-width: 0;
}
/* display-xl's sanctioned range is 56–88 (SYSTEM §5): 88 at the 1440 frame, 56 where the column is narrowest.
   The <br> sets the two lines; the 980px column is what lets "Practice the conversations" (956px at 80px) stay on one. */
.hero__h1 {
  font: var(--text-display-xl);
  font-size: clamp(48px, 5.6vw, 80px);
  letter-spacing: var(--tracking-display-xl);
  color: var(--color-ink-on-navy);
}
.hero__promise {
  margin-top: 22px;
  font: var(--text-title-lg);
  letter-spacing: var(--tracking-title-lg);
  color: var(--color-ink-on-navy);
}
.hero__lede { margin-top: 18px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink-2-on-navy); max-width: 58ch; }
.hero__actions { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero__actions .tt-btn { height: var(--size-control-phone); padding: 0 22px; font: var(--text-button-lg); }

/* ---------- audiences: the title above a full-width ruled register ---------- */

.audiences { padding-top: 88px; padding-bottom: 96px; }
.audiences__register { margin-top: 48px; }

/* ---------- how it works: the statement, then three staggered plates ---------- */

.how { padding-top: 88px; padding-bottom: 96px; }
.how__statement { margin-top: 32px; font-size: clamp(44px, 4.45vw, 64px); }
#how-it-works,
#practice-ideas { scroll-margin-top: calc(var(--size-masthead) + 16px); }
.step { margin-top: 72px; align-items: start; }
.step__text { display: flex; flex-direction: column; }
.step__head { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.step__num { font: var(--text-figure-lg); letter-spacing: var(--tracking-figure-lg); color: var(--color-ink); }
.step__title { font: var(--text-title-lg); letter-spacing: var(--tracking-title-lg); color: var(--color-ink); }
.step__copy { margin-top: 14px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink-2); }
.step__note { margin-top: 14px; font: var(--text-body-sm); color: var(--color-ink-2); }
/* the way on to the full walkthrough (how-it-works.html), under the third step */
.how__more { margin-top: 56px; }

/* ---------- feature strip: a ruled row of four on navy; the rules sit in the gutters ---------- */

.features { padding-top: 64px; padding-bottom: 72px; }
.features__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--grid-gap) minmax(0, 1fr) var(--grid-gap) minmax(0, 1fr) var(--grid-gap) minmax(0, 1fr);
  align-items: stretch;
}
.features__gutter { display: flex; justify-content: center; }
.features__rule { width: 1px; background: var(--color-rule-on-navy); }
.feature { display: flex; flex-direction: column; min-width: 0; }
.feature__head { display: flex; flex-direction: column; gap: 16px; color: var(--color-ink-on-navy); }
.feature__icon { color: var(--color-ink-on-navy); }
.feature__title { font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--color-ink-on-navy); }
.feature__text { margin-top: 8px; font: var(--text-body); color: var(--color-ink-2-on-navy); }

/* ---------- practice ideas: the question at the left, a register of quoted opening lines ---------- */

.ideas { padding-top: 88px; padding-bottom: 96px; }
.ideas__list { display: flex; flex-direction: column; border-top: var(--rule-strong); }
.ideas__action { margin-top: 24px; display: flex; }
.idea {
  display: grid;
  grid-template-columns: 22fr 41fr 37fr;   /* 176 | 328 | 296 of the eight-column measure at 1440 */
  column-gap: var(--grid-gap);
  padding: 26px 0 28px;
  border-bottom: var(--rule-hair);
}
.idea__who { display: flex; flex-direction: column; gap: 4px; }
.idea__aud { font: var(--text-kicker); color: var(--color-ink); }
.idea__line { font: var(--text-body-sm); color: var(--color-ink-2); }
.idea__title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
.idea__text { margin-top: 8px; font: var(--text-body); color: var(--color-ink-2); max-width: 360px; }
.idea__quote { display: flex; flex-direction: column; gap: 8px; padding-left: 16px; border-left: 2px solid var(--color-edge-strong); }
.idea__q { font: var(--text-quote-lg); letter-spacing: var(--tracking-quote-lg); font-style: italic; color: var(--color-ink); }
.idea__speaker { font: var(--text-body-sm); color: var(--color-ink-2); }
.idea__speaker b { font: var(--text-kicker); color: var(--color-ink); }

/* ---------- dual entry: a ruled section head, then the teal student door beside the cream instructor door ---------- */

.entry-head__row { padding: 20px 0; border-top: var(--rule-strong); align-items: baseline; }
.entry-head__title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
.entry-head__meta { font: var(--text-body-sm); color: var(--color-ink-2); }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door { padding: 64px var(--layout-gutter); display: flex; flex-direction: column; min-height: 560px; min-width: 0; }
/* on a screen wider than the frame the outer edges keep the content on the 1440 grid */
.door--left { padding-left: max(var(--layout-gutter), calc(100% - var(--layout-frame) / 2 + var(--layout-gutter))); }
.door--right { padding-right: max(var(--layout-gutter), calc(100% - var(--layout-frame) / 2 + var(--layout-gutter))); }
.door__title { margin-top: 28px; font: var(--text-title-xl); letter-spacing: var(--tracking-title-xl); }
.door__text { margin-top: 16px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); max-width: 520px; }
.door__form { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.door__form .tt-field__label { margin-bottom: 4px; }
.door__error { margin-top: 2px; }
.door__submit { margin-top: 12px; }
.door .checklist { margin-top: 28px; }
.door__actions { margin-top: 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* the student door sits on the navy field (2026-10-24: navy ink on teal read as low contrast);
   the kit's on-navy context gives it cream ink, raised code cells and the teal primary */
.tt-on-navy .door__text { color: var(--color-ink-2-on-navy); }
.tt-on-navy .door__form .tt-field__label { color: var(--color-ink-on-navy); }
.tt-on-navy .door__form .tt-code__cell { border-color: var(--color-edge-on-navy); }   /* six fields, not six faint boxes */
.tt-on-cream .door__text { color: var(--color-ink-2); }

/* The join code: the kit's six cells, drawn by js/join-code.js from one real <input> laid over
   them (so the field is one control for a screen reader and the keyboard, and the cells are the
   picture of it). The caret is the kit's real element, shown in the focused empty cell. */
.code-input { position: relative; }
.code-input__field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  opacity: 0;
  font: var(--text-code);
  letter-spacing: var(--tracking-code);
  cursor: text;
}
.code-input__field:focus-visible { outline: none; box-shadow: none; }   /* the ring is drawn on the active cell */
.code-input .tt-code__caret { display: none; }
.code-input .tt-code__cell.is-focus.is-empty .tt-code__caret { display: block; }
/* without the script the cells cannot follow the caret, so a focused field marks them all */
.code-input:not(.is-live):focus-within .tt-code__cell { border-color: var(--color-edge-strong); }

/* ---------- philosophy: photograph | navy statement ---------- */

.philo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-field-navy); }
.philo__photo { position: relative; min-height: 640px; overflow: hidden; }
.philo__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 25%; }
.philo__caption { position: absolute; left: 0; bottom: 0; max-width: 420px; }
.philo__text {
  padding: 72px var(--layout-gutter) 64px;
  padding-right: max(var(--layout-gutter), calc(100% - var(--layout-frame) / 2 + var(--layout-gutter)));
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.philo__h2 { font: var(--text-display-lg); font-size: clamp(44px, 4.45vw, 64px); letter-spacing: var(--tracking-display-lg); color: var(--color-ink-on-navy); }
.philo__sub { margin-top: 28px; font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink-on-navy); }
.philo__body { margin-top: 14px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink-2-on-navy); max-width: 540px; }
.philo__figure {
  margin-top: 32px;
  padding: 20px 0 22px;
  border-top: 1px solid var(--color-rule-on-navy);
  border-bottom: 1px solid var(--color-rule-on-navy);
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.philo__figtext { font: var(--text-body); color: var(--color-ink-2-on-navy); max-width: 360px; }
.philo__link { margin-top: 28px; align-self: flex-start; }

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

/* hero: the same band, the footage behind, the statement in the phone's type */
[data-layout='mobile'] .hero { min-height: 0; padding: 56px var(--layout-gutter) 56px; }
[data-layout='mobile'] .hero__h1 { font: var(--text-display-md); letter-spacing: var(--tracking-display-md); max-width: none; }
[data-layout='mobile'] .hero__promise { margin-top: 18px; font: var(--text-title-md); letter-spacing: var(--tracking-title-md); }
[data-layout='mobile'] .hero__lede { margin-top: 16px; max-width: none; }
[data-layout='mobile'] .hero__actions { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
[data-layout='mobile'] .hero__actions .tt-btn { width: 100%; }
[data-layout='mobile'] .hero__media { --footage-focus: 50% top; }

/* sections */
[data-layout='mobile'] .audiences,
[data-layout='mobile'] .how,
[data-layout='mobile'] .features,
[data-layout='mobile'] .ideas { padding-top: 48px; padding-bottom: 56px; }
[data-layout='mobile'] .audiences__register { margin-top: 28px; }

/* how it works: kicker → number and title → copy → plate → note */
[data-layout='mobile'] .how__statement { margin-top: 20px; }
[data-layout='mobile'] .step { margin-top: 44px; }
[data-layout='mobile'] .step__text { display: contents; }
[data-layout='mobile'] .step__text > .tt-kicker { order: 1; }
[data-layout='mobile'] .step__head { order: 2; margin-top: 18px; gap: 4px; }
[data-layout='mobile'] .step__copy { order: 3; margin-top: 10px; }
[data-layout='mobile'] .step > .plate { order: 4; margin-top: 20px; }
[data-layout='mobile'] .step__note { order: 5; margin-top: 10px; }
[data-layout='mobile'] .how__more { margin-top: 32px; }

/* feature strip: a ruled column */
[data-layout='mobile'] .features__grid { margin-top: 8px; display: flex; flex-direction: column; }
[data-layout='mobile'] .features__gutter { display: none; }
[data-layout='mobile'] .feature { padding: 20px 0 22px; border-bottom: 1px solid var(--color-rule-on-navy); }
[data-layout='mobile'] .feature:last-child { border-bottom: 0; }
[data-layout='mobile'] .feature__head { flex-direction: row; align-items: center; gap: 10px; }

/* practice ideas */
[data-layout='mobile'] .ideas__list { margin-top: 28px; }
[data-layout='mobile'] .ideas__action { margin-top: 16px; }
[data-layout='mobile'] .idea { display: flex; flex-direction: column; padding: 20px 0 24px; }
[data-layout='mobile'] .idea__who { gap: 2px; }
[data-layout='mobile'] .idea__title { margin-top: 12px; }
[data-layout='mobile'] .idea__text { max-width: none; }
[data-layout='mobile'] .idea__quote { margin-top: 16px; gap: 6px; padding-left: 14px; }
[data-layout='mobile'] .idea__q { font: var(--text-quote); letter-spacing: var(--tracking-quote); font-style: italic; }

/* doors stack: students first */
[data-layout='mobile'] .entry-head__row { padding: 20px 0; gap: 6px; }
[data-layout='mobile'] .doors { display: flex; flex-direction: column; }
[data-layout='mobile'] .door { padding: 36px var(--layout-gutter) 40px; min-height: 0; }
[data-layout='mobile'] .door__title { margin-top: 22px; }
[data-layout='mobile'] .door__text { margin-top: 12px; max-width: none; }
[data-layout='mobile'] .door__form { margin-top: 24px; align-items: stretch; }
[data-layout='mobile'] .door__submit { margin-top: 8px; width: 100%; }
[data-layout='mobile'] .door .checklist { margin-top: 24px; }
[data-layout='mobile'] .door__actions { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 8px; }
[data-layout='mobile'] .door__actions .tt-btn { width: 100%; }

/* philosophy */
[data-layout='mobile'] .philo { display: flex; flex-direction: column; }
[data-layout='mobile'] .philo__photo { min-height: 0; height: 320px; }
[data-layout='mobile'] .philo__photo img { object-position: 45% 20%; }
[data-layout='mobile'] .philo__caption { max-width: 300px; }
[data-layout='mobile'] .philo__text { padding: 36px var(--layout-gutter) 44px; }
[data-layout='mobile'] .philo__h2 { font: var(--text-title-xl); letter-spacing: var(--tracking-title-xl); }
[data-layout='mobile'] .philo__sub { margin-top: 18px; }
[data-layout='mobile'] .philo__body { margin-top: 12px; max-width: none; }
[data-layout='mobile'] .philo__figure { margin-top: 24px; padding: 18px 0 20px; flex-direction: column; gap: 8px; }
[data-layout='mobile'] .philo__figtext { max-width: none; }
[data-layout='mobile'] .philo__link { margin-top: 16px; }