/*
 * app/web/css/landing.css — the shared marketing shell (TutorTalks Design Language 2026).
 *
 * Loaded by every public page (home, pricing, philosophy, the five policy pages) after
 * theme.css (the tokens) and components.css (the kit, .tt-*). Token-only: no colour literal
 * lives here; every value is a var(--color-*), var(--text-*), var(--space-*) or a size the
 * design fixed. A page's own sheet (home.css, pricing.css, …) adds that page's layout and
 * loads after this file, so it can out-weigh anything here at equal specificity.
 *
 * ========================================= CONTRACT =========================================
 * A marketing page is:
 *
 *   <body class="tt-root site">
 *     <header class="tt-masthead site-masthead">                   the 56px navy band, sticky
 *       <a class="tt-logo" href="/">…</a>                          the kit lockup (design/kit/logo.html);
 *                                                                  it reverses itself inside .tt-masthead
 *       <nav class="tt-nav site-masthead__nav">                    .tt-nav__item (+ .is-current with its
 *                                                                  <span class="tt-nav__bar">)
 *       <div class="site-masthead__cta">                           Join session (--secondary) ·
 *                                                                  Instructor sign-in (--primary)
 *       <button class="tt-masthead__link site-masthead__menu" type="button" data-site-menu
 *               aria-controls="site-menu" aria-expanded="false">
 *         <span class="site-masthead__menu-icon site-masthead__menu-icon--open">(list-bullets svg)</span>
 *         <span class="site-masthead__menu-icon site-masthead__menu-icon--close" hidden>(x svg)</span>
 *         <span data-site-menu-label>Menu</span>
 *       </button>
 *     </header>
 *     <div class="site-menu" id="site-menu" hidden>                the phone menu, a sibling of the header
 *       <div class="site-menu__scrim"></div>                       (not inside it, so the sheet keeps the
 *       <nav class="tt-menu site-menu__sheet">                     light tokens): .tt-menu__item links and
 *         …                                                        a .tt-menu__sep; js/site-menu.js binds
 *       </nav>                                                     it (import it, or load it as a module)
 *     </div>
 *     <main class="site__main"> … sections … </main>
 *     <footer class="band band--navy tt-on-navy g12 footer"> … </footer>
 *   </body>
 *
 * Grid       .g12 is the marketing grid: 12 columns of 80 with 32px gutters inside 64px margins at
 *            1440, held at 1440 and centred on wider screens, columns shrinking below. Children place
 *            with .c<a>-<b> (c1-4 c1-5 c1-6 c1-7 c1-8 c1-10 c1-12 c5-8 c5-12 c6-12 c7-9 c7-12 c8-12
 *            c9-12 c10-12 — add others here, same naming) or with
 *            `grid-column: c-start N / c-end M`; `full-start` / `full-end` bleed to the frame edge.
 *            .sub12 re-divides a 12-column-wide cell into the same twelve columns (nested rows).
 *            Helpers: .stack (column flex) · .row (centred row flex) · .measure (560px).
 * Bands      .band + .band--white / .band--cream / .band--navy (a navy band also takes .tt-on-navy;
 *            a teal field .tt-on-live; a cream field whose inputs must stay white .tt-on-cream).
 *            Vertical padding belongs to the page: sections differ.
 * Type       .section-title (display-md) · .section-sub (lead, 20px under the title) ·
 *            .band-statement (display-lg, one per band) · .kicker-meta (body-sm, the note at the right
 *            end of a .tt-kicker). A heading inside a .tt-kicker inherits the kicker's type.
 * Register   .register > .register__row (who | title + text | action):
 *            .register__who · .register__title · .register__text · .register__action.
 * Plates     figure.plate > button.plate__shot (> img.plate__img + span.plate__badge)
 *            + figcaption.plate-caption (> .plate-caption__fig + a span of text).
 *            .plate-caption also captions a photograph on its own.
 * Checklist  ul.checklist > li.checklist__item (a 16px check + text), on any field.
 * Footage    .hero-footage (set --hero-poster inline; --footage-focus optional, default 50% top)
 *            > video.hero-footage__video + .hero-footage__scrim. Poster, scrim, the reduced-motion
 *            still and object-position top are App Bible §19.7; js/hero-video.js binds the video.
 * CTA        .cta (a .g12 band) > .c1-7 (.cta__title + .cta__text) · .c9-12.cta__action.
 * Footer     footer.footer > .footer__top (.c1-5.footer__brand > .tt-logo + .footer__tag ·
 *            .c7-12.footer__cols > nav.footer__col > .footer__colhead + .footer__links of
 *            .tt-link--action) · .footer__bottom (spans; #backends.footer__status).
 * Phone      every phone rule is keyed on [data-layout='mobile'] (device-boot.js; never a width query):
 *            16px gutters, .g12 and .sub12 stack, the nav and the two masthead buttons give way to the
 *            Menu control, and the kit's .tt-phone 44px helpers are applied under .site.
 * Legacy     the block at the end keeps the pre-2026 classes that pricing, philosophy and the policy
 *            pages still use. Delete each rule with the page that last needed it.
 * ============================================================================================
 */

/* ---------- 0. Root ---------- */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  --layout-gutter: 64px;   /* the marketing margin; the kit masthead reads it */
  --grid-gap: 32px;
  --layout-col: 80px;
  --layout-frame: 1440px;
}
/* theme.css gives <body> height: 100%, so as a column flex container it would shrink the masthead
   (56px by the kit) to its min-content to fit the viewport; nothing in the shell may shrink. */
/* theme.css gives <body> height:100% for the full-height session layouts; on a marketing page that makes the
   viewport-tall body the sticky masthead's containing block, so it stops sticking after the first screen. */
body.site { height: auto; min-height: 100%; }
.site > * { flex-shrink: 0; }
.site__main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* theme.css underlines every <a> on hover; in the kit only .tt-link is underlined (always), so
   nothing else may pick it up. */
.site :where(a:not(.tt-link)):hover { text-decoration: none; }
.site :where(blockquote, figure, figcaption, address) { margin: 0; }
.site :where(img) { display: block; max-width: 100%; }

/* theme.css also defines .stack and .row for the app, with a gap; here they are bare layout helpers
   (the design's title → text spacing is each element's own margin), so the gap is reset. */
.site .stack { display: flex; flex-direction: column; gap: 0; }
.site .row { display: flex; align-items: center; gap: 0; }
.measure { max-width: 560px; }

/* ---------- 1. The marketing grid ---------- */

/* Two outer tracks carry the margins (64 − 32, because the column gap also runs between a margin
   and its neighbour) and grow on a wide screen, so the twelve 80px columns stay a centred 1440
   frame; below 1440 the margins hold and the columns shrink. */
.g12 {
  display: grid;
  grid-template-columns:
    [full-start] minmax(calc(var(--layout-gutter) - var(--grid-gap)), 1fr)
    repeat(12, [c-start] minmax(0, var(--layout-col)) [c-end])
    minmax(calc(var(--layout-gutter) - var(--grid-gap)), 1fr) [full-end];
  column-gap: var(--grid-gap);
}
.sub12 {
  display: grid;
  grid-template-columns: repeat(12, [c-start] minmax(0, 1fr) [c-end]);
  column-gap: var(--grid-gap);
}
.c1-4 { grid-column: c-start 1 / c-end 4; }
.c1-5 { grid-column: c-start 1 / c-end 5; }
.c1-6 { grid-column: c-start 1 / c-end 6; }
.c1-7 { grid-column: c-start 1 / c-end 7; }
.c1-8 { grid-column: c-start 1 / c-end 8; }
.c1-10 { grid-column: c-start 1 / c-end 10; }
.c1-12 { grid-column: c-start 1 / c-end 12; }
.c5-8 { grid-column: c-start 5 / c-end 8; }
.c5-12 { grid-column: c-start 5 / c-end 12; }
.c6-12 { grid-column: c-start 6 / c-end 12; }
.c7-9 { grid-column: c-start 7 / c-end 9; }
.c7-12 { grid-column: c-start 7 / c-end 12; }
.c8-12 { grid-column: c-start 8 / c-end 12; }
.c9-12 { grid-column: c-start 9 / c-end 12; }
.c10-12 { grid-column: c-start 10 / c-end 12; }

/* ---------- 2. Masthead and the phone menu ---------- */

/* The kit gives .tt-masthead its 56px, navy ground, gap and the on-navy remap; the public site's
   bar was sticky before the redesign and stays so (sticky, never fixed). */
.site-masthead { position: sticky; top: 0; z-index: 100; }
.site-masthead__cta { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.site-masthead__menu { display: none; }
.site-masthead__menu-icon { display: block; }
/* Desktop layouts narrower than the 1100 the design pages were verified at (device-boot hands anything
   under 900 the phone layout): with the kit's 32px gaps the navigation labels wrapped to two lines inside
   the 56px band at 1024, and the pricing page's bar (then with a theme toggle beside the two doors) overflowed
   the viewport below 960. Tighter gaps and no wrapping keep every label on one line down to 1024; below
   that the marketing margin steps 64 → 48 → 32 (DECISIONS §5 steps the app's gutter the same way, 48 → 24),
   measured so the fullest bar keeps ≥ 8px of slack at 900. Width queries, not data-layout: these are
   genuinely questions about width (App Bible §19.1); the phone's 16px gutter rule below still wins. */
@media (max-width: 1120px) {
  .site-masthead, .site-masthead__nav { gap: var(--space-4); }
  .site-masthead .tt-nav__item { white-space: nowrap; }
}
@media (max-width: 1040px) {
  .site { --layout-gutter: 48px; }
}
@media (max-width: 1000px) {
  .site { --layout-gutter: 32px; }
  .site-masthead, .site-masthead__nav { gap: var(--space-3); }
}

/* A zero-height sticky box right under the masthead: the sheet and the scrim hang from it, so
   they sit under the bar wherever the page is scrolled. Hidden by the attribute until opened. */
.site-menu { position: sticky; top: var(--size-masthead); z-index: 99; height: 0; }
.site-menu__scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100dvh - var(--size-masthead));
  background: var(--color-scrim);
}
.site-menu__sheet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-width: 0;
  padding: var(--space-2) var(--space-2) var(--space-3);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
}
.site-menu__sheet .tt-menu__item { font: var(--text-ui); }
.site-menu__sheet .tt-menu__sep { margin: 6px 10px; }

/* ---------- 3. Bands and section type ---------- */

.band { position: relative; }
.band--white { background: var(--color-ground); }
.band--cream { background: var(--color-field-reading); }
.band--navy { background: var(--color-field-navy); }

.section-title { font: var(--text-display-md); letter-spacing: var(--tracking-display-md); color: var(--color-ink); }
.section-sub { margin-top: 20px; font: var(--text-lead); letter-spacing: var(--tracking-lead); color: var(--color-ink-2); }
.band-statement { font: var(--text-display-lg); letter-spacing: var(--tracking-display-lg); color: var(--color-ink); }
.kicker-meta { font: var(--text-body-sm); color: var(--color-ink-2); white-space: nowrap; }
.tt-kicker > :where(h1, h2, h3, h4) { font: inherit; letter-spacing: inherit; color: inherit; }

/* ---------- 4. Register: a ruled list of who → title + text → action ---------- */

.register { display: flex; flex-direction: column; border-top: var(--rule-strong); }
.register__row {
  display: grid;
  grid-template-columns: 2fr 8.5fr 2.5fr;   /* 192 | 816 | 240 of the 1312 measure at 1440 */
  column-gap: var(--grid-gap);
  padding: 28px 0 30px;
  border-bottom: var(--rule-hair);
  align-items: baseline;
}
.register__who { font: var(--text-kicker); color: var(--color-ink); }
.register__title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
.register__text { margin-top: 10px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink-2); max-width: 560px; }
.register__action { display: flex; justify-content: flex-end; align-self: start; }

/* ---------- 5. Plates and captions ---------- */

.plate { display: flex; flex-direction: column; border: 1px solid var(--color-edge-strong); background: var(--color-field-navy); }
/* The whole screenshot is the button, so the picture is the hit area. */
.plate__shot { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--color-ground); color: inherit; cursor: zoom-in; }
/* The files are baked 16:10 crops (App Bible §19.7a); `height: auto` is load-bearing — the
   width/height attributes land as presentational hints and a used height would beat aspect-ratio. */
.plate__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.plate__badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-field-navy);
  color: var(--color-ink-on-navy);
}
.plate-caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px 14px;
  background: var(--color-field-navy);
  color: var(--color-ink-on-navy);
  font: var(--text-body-sm);
}
.plate-caption__fig { flex: none; font: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink-2-on-navy); white-space: nowrap; }

/* ---------- 5a. The enlarged screenshot (js/image-lightbox.js) ----------
   The kit's scrim and dialog; the panel is sized by the picture, the caption bar is a plate
   caption, Close is flush in the corner with an inset ring (the frame clips). Fixed, like the
   modal it replaces: an overlay has to cover the viewport. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  cursor: zoom-out;
}
.lightbox__panel { position: relative; width: auto; max-width: min(1400px, 96vw); overflow: hidden; cursor: default; }
.lightbox__frame { display: flex; overflow: auto; overscroll-behavior: contain; background: var(--color-field-navy); }
.lightbox__image {
  display: block;
  flex: none;   /* a flex item would otherwise shrink to the frame's width */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 84vh;
}
.lightbox__close { position: absolute; top: 0; right: 0; border-radius: 0; background: var(--color-field-navy); color: var(--color-ink-on-navy); }
.lightbox__close:hover { background: var(--color-surface-raised); }
.lightbox__close:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus-on-navy); }
.lightbox__caption { padding: 12px 16px 14px; }
.lightbox__caption-text { display: flex; flex-direction: column; gap: 2px; }
.lightbox__pan { display: none; color: var(--color-ink-2-on-navy); }

/* ---------- 6. Checklist ---------- */

.checklist { display: flex; flex-direction: column; border-top: 1px solid var(--color-rule); }
.checklist__item { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--color-rule); font: var(--text-ui); }

/* ---------- 7. Hero footage (App Bible §19.7) ---------- */

/* The box is the poster: --hero-poster is set inline beside the <video> it belongs to (two pages
   carry different footage), and it is what a reduced-motion visitor keeps. */
.hero-footage {
  position: relative;
  overflow: hidden;
  background-color: var(--color-field-navy);
  background-image: var(--hero-poster, none);
  background-position: var(--footage-focus, 50% top);
  background-size: cover;
  background-repeat: no-repeat;
}
/* `cover` in a box narrower than 16:9 crops the sides; in a box wider than 16:9 it crops the
   height, and anchoring the crop to the top keeps the heads — the default centre decapitated
   people in most shots. --footage-focus moves the horizontal anchor only. */
.hero-footage__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--footage-focus, 50% top);
  filter: saturate(0.88) contrast(1.03);
}
/* A light wash so the footage reads as a ground beside the navy field rather than a picture
   competing with the headline; heavier at the foot, where a caption plate may rest. */
.hero-footage__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-field-navy) 10%, transparent) 0%,
    color-mix(in srgb, var(--color-field-navy) 34%, transparent) 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .hero-footage__video { display: none; }
}

/* ---------- 8. The call-to-action band ---------- */

.cta { padding-top: 72px; padding-bottom: 80px; align-items: center; }
.cta__title { font: var(--text-title-xl); letter-spacing: var(--tracking-title-xl); color: var(--color-ink); }
.cta__text { margin-top: 14px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink-2); max-width: 560px; }
.cta__action { display: flex; justify-content: flex-end; align-items: center; }

/* ---------- 9. Footer ---------- */

.footer { padding-top: 56px; padding-bottom: 32px; }
.footer__top {
  display: grid;
  grid-template-columns: repeat(12, [c-start] minmax(0, 1fr) [c-end]);
  column-gap: var(--grid-gap);
}
.footer__brand { display: flex; flex-direction: column; gap: 10px; }
.footer__brand .tt-logo { align-self: flex-start; }
.footer__tag { font: var(--text-body-sm); color: var(--color-ink-2-on-navy); }
/* Two columns of three grid columns each: the gap between them is the grid's own gutter. */
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.footer__col { display: flex; flex-direction: column; }
.footer__colhead {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2-on-navy);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-rule-on-navy);
  margin-bottom: 6px;
}
.footer__links { display: flex; flex-direction: column; }
.footer__bottom {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule-on-navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font: var(--text-micro);
  color: var(--color-ink-2-on-navy);
}
.footer__status { font: var(--text-note); color: var(--color-ink-3-on-navy); }

/* ---------- 10. Phone: [data-layout='mobile'] only ---------- */

[data-layout='mobile'] .site { --layout-gutter: 16px; --grid-gap: 16px; }
[data-layout='mobile'] .g12,
[data-layout='mobile'] .sub12 { display: flex; flex-direction: column; }
[data-layout='mobile'] .g12 { padding-left: var(--layout-gutter); padding-right: var(--layout-gutter); }
[data-layout='mobile'] .measure { max-width: none; }

/* masthead: wordmark + the Menu control; the navigation and the two doors live in the menu */
[data-layout='mobile'] .site-masthead { padding: 0 var(--space-4); gap: var(--space-4); justify-content: space-between; }
[data-layout='mobile'] .site-masthead__nav,
[data-layout='mobile'] .site-masthead__cta { display: none; }
[data-layout='mobile'] .site-masthead__menu {
  display: flex;
  height: var(--size-control-phone);
  margin-right: -10px;   /* the kit pads the phone masthead link 10px; this keeps the label on the gutter */
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}
[data-layout='mobile'] .site .tt-logo { padding: 9px 0 8px; }   /* the 22px lockup as a 44px target (masthead and footer) */

/* the kit's .tt-phone helpers (components.css §13), keyed on the layout device-boot.js decided */
[data-layout='mobile'] .site .tt-btn { height: var(--size-control-phone); padding: 0 18px; font: var(--text-button-lg); }
[data-layout='mobile'] .site .tt-icon-btn { width: var(--size-control-phone); height: var(--size-control-phone); }
[data-layout='mobile'] .site .tt-input { height: var(--size-control-phone); font: var(--text-body-lg); }
[data-layout='mobile'] .site .tt-link--action { min-height: var(--size-control-phone); }
[data-layout='mobile'] .site .tt-menu__item { min-height: var(--size-control-phone); }
[data-layout='mobile'] .site .tt-code--input .tt-code__cell { width: 44px; height: 56px; }

/* section type */
[data-layout='mobile'] .section-title { font: var(--text-title-xl); letter-spacing: var(--tracking-title-xl); }
[data-layout='mobile'] .section-sub { margin-top: 14px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); }
[data-layout='mobile'] .band-statement { font: var(--text-title-xl); letter-spacing: var(--tracking-title-xl); }
[data-layout='mobile'] .tt-kicker { flex-wrap: wrap; row-gap: 10px; }
[data-layout='mobile'] .tt-kicker > .kicker-meta { flex: 1 0 100%; white-space: normal; }

/* register: each row ends in its action */
[data-layout='mobile'] .register__row { display: flex; flex-direction: column; padding: 20px 0 16px; }
[data-layout='mobile'] .register__title { margin-top: 8px; }
[data-layout='mobile'] .register__text { margin-top: 8px; font: var(--text-body); letter-spacing: var(--tracking-body); max-width: none; }
[data-layout='mobile'] .register__action { margin-top: 6px; justify-content: flex-start; }

/* plates and checklists: 44px targets */
[data-layout='mobile'] .plate__badge { width: var(--size-control-phone); height: var(--size-control-phone); }
[data-layout='mobile'] .plate-caption { padding: 12px 12px 14px; }
/* the enlarged screenshot becomes a bottom sheet; the picture is scaled to the height and pans.
   The selector carries the frame so it out-weighs mobile.css's `[data-layout='mobile'] img`
   (App Bible §19.7a). */
[data-layout='mobile'] .lightbox { align-items: flex-end; padding: 0; }
[data-layout='mobile'] .lightbox__panel {
  width: 100%;
  max-width: none;
  border-left: 0;
  border-right: 0;
  border-radius: var(--radius-overlay) var(--radius-overlay) 0 0;
}
[data-layout='mobile'] .lightbox__frame .lightbox__image { max-width: none; max-height: 68vh; }
[data-layout='mobile'] .lightbox__pan { display: block; }
[data-layout='mobile'] .checklist__item { min-height: var(--size-control-phone); }

/* call to action */
[data-layout='mobile'] .cta { padding-top: 44px; padding-bottom: 48px; }
[data-layout='mobile'] .cta__title { font: var(--text-title-lg); letter-spacing: var(--tracking-title-lg); }
[data-layout='mobile'] .cta__text { margin-top: 12px; max-width: none; }
[data-layout='mobile'] .cta__action { margin-top: 24px; }
[data-layout='mobile'] .cta__action .tt-btn { width: 100%; }

/* footer */
[data-layout='mobile'] .footer { padding-top: 40px; padding-bottom: 24px; }
[data-layout='mobile'] .footer__top { display: flex; flex-direction: column; }
[data-layout='mobile'] .footer__cols { margin-top: 32px; column-gap: var(--space-4); }
[data-layout='mobile'] .footer__colhead { margin-bottom: 4px; }
[data-layout='mobile'] .footer__bottom { margin-top: 32px; padding-top: 14px; flex-wrap: wrap; }