/* Page layout: header, sections, motion. The footer lives in footer.css. Mobile-first;
   breakpoints match the design system (760px tablet, 1120px desktop). */

/* The bordered card floats over the page: the wrapper has no fill of its
   own, so the page (grid paper at the top, then the sections as they
   scroll under) shows through the gutter around the card. The wrapper
   lets pointer events fall through to whatever is behind it; the card
   itself stays interactive. Matches apps/learner's .tu-top. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 12px var(--gutter-page-mobile);
  background: transparent;
  pointer-events: none;
}
.site-header__inner {
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 9px var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  background: var(--cream);
  border: var(--border);
  box-shadow: 5px 5px 0 var(--ink);
}

/* Radial-dot halftone behind the logo, masked out to the right. Sits
   between the card's fill and its content (z-index -1 in the card's own
   stacking context). Purely decorative — the markup carries aria-hidden. */
.site-header__texture {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: radial-gradient(var(--ink-3) .6px, transparent .6px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(90deg, black, transparent 60%);
  mask-image: linear-gradient(90deg, black, transparent 60%);
}

.site-header__menu {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: var(--space-4);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
/* The menu links keep the handwritten signature face — the wordmark and
   the CTA carry the display face, the links are the hand annotating them. */
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: var(--text-size-hand-sm);
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 10px;
  background: none;
  white-space: nowrap;
  line-height: 1.15;
  flex: none;
  transition: background var(--snap);
}
/* Navbar selection is a light tape-yellow wash, no colour shift. The
   scrollspy "is-active" link reads as the same wash, held on. Body links
   elsewhere on the page keep the blue-soft hover (base.css). */
.site-nav a:hover,
.site-nav a:active,
.site-nav a.is-active {
  background: var(--tape-soft);
}

/* Hamburger toggle — hidden on wide layouts where inline nav fits. */
.site-nav-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: var(--border);
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--snap);
}
.site-nav-toggle:hover {
  background: var(--tape-soft);
}
.site-nav-toggle__icon,
.site-nav-toggle__icon::before,
.site-nav-toggle__icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 160ms ease, opacity 160ms ease;
}
.site-nav-toggle__icon {
  position: relative;
}
.site-nav-toggle__icon::before,
.site-nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-nav-toggle__icon::before { top: -7px; }
.site-nav-toggle__icon::after { top: 7px; }
.site-header.is-nav-open .site-nav-toggle__icon { background: transparent; }
.site-header.is-nav-open .site-nav-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}
.site-header.is-nav-open .site-nav-toggle__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* The card is cream now, so the CTA's own ink hard-shadow reads — no
   surface override needed. Base .ts-btn / .ts-btn--primary already carry
   the tape fill, ink border, 3px3px0 shadow, lift/press and tape-2 hover. */
.site-header .tu-lockup,
.site-header .ts-btn {
  flex-shrink: 0;
}
.site-header .ts-btn {
  min-height: 40px;
  padding: 0 var(--space-5);
  font-size: 12px;
  letter-spacing: .06em;
}

/* Collapse nav into a drawer below the bar on phones and smaller
   portrait tablets where the inline row gets cramped. Same card
   treatment, dropped just clear of the bar's bottom border. */
@media (max-width: 899px) {
  .site-nav-toggle { display: flex; }

  .site-header__menu {
    display: none;
    position: absolute;
    top: calc(100% + 2.5px);
    left: -2.5px;
    right: -2.5px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-5) var(--space-5);
    background: var(--cream);
    border: var(--border);
    box-shadow: 5px 5px 0 var(--ink);
    z-index: 5;
  }
  .site-header.is-nav-open .site-header__menu { display: flex; }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav a {
    font-size: var(--text-size-hand);
    padding: 12px 8px;
    border-bottom: 1px solid var(--paper-2);
  }
  .site-nav a:last-child { border-bottom: none; }

  .site-header__cta {
    align-self: stretch;
    justify-content: center;
    margin-top: var(--space-4);
    min-height: 48px;
    font-size: 13px;
  }
}

body.is-nav-open { overflow: hidden; }

.section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--stack-section) var(--gutter-page-mobile);
}
.section--center { text-align: center; }
.section--center .u-lead,
.section--center h2 { margin-left: auto; margin-right: auto; }

.section__head { max-width: var(--measure-heading); margin: 0 0 var(--space-6); }
.section__head h2 { margin-bottom: var(--space-4); }
.section__head .u-lead { margin-bottom: 0; }
.section__head--center { max-width: 42ch; margin-left: auto; margin-right: auto; }

/* Editorial section marker. Sets the eyebrow apart from the heading so
   the eye lands on the number, then the statement. */
.section-number {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-w-thin) solid var(--ink);
}

/* ---------- Hero ----------
   Single column at every width. The product itself is a tap away in
   section 2, so the hero's only job is the headline and the ask; a
   second copy of the widget here was decoration standing in for
   content, not doing anything the demo section doesn't already do. */
.hero { padding: var(--space-6) var(--gutter-page-mobile) var(--space-8); }
.hero__inner {
  max-width: var(--page-max);
  margin: 0 auto;
}
.hero__page { width: 100%; }
.hero__eyebrow { max-width: 40ch; margin-bottom: var(--space-5); }
.hero__headline {
  margin: 0 0 var(--space-5);
  max-width: 18ch;
}
.hero__headline em {
  font-style: normal;
  color: var(--blue);
}
.hero__subhead { margin-bottom: var(--space-6); max-width: 42ch; }
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.hero__reassure { margin: 0; font-size: var(--text-size-micro); color: var(--ink-3); max-width: none; }

/* ---------- Demo section ---------- */
.demo-card { max-width: 480px; margin: 0 auto; text-align: left; }
.demo-card__body { padding: var(--space-6); display: flex; justify-content: center; }
.demo-under {
  margin: var(--space-5) auto var(--space-4);
  font-family: var(--font-hand);
  font-size: var(--text-size-hand);
  color: var(--ink-2);
  max-width: 30ch;
}

/* ---------- Problem ---------- */
.problem-section { padding-top: var(--space-8); }
.problem-inner {
  max-width: 780px;
  border-left: var(--border-w-accent) solid var(--tape);
  padding-left: var(--space-6);
}
.problem-head { max-width: 20ch; margin-bottom: var(--space-5); }
.problem-body {
  font-size: var(--text-size-lead);
  line-height: var(--text-lh-lead);
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0;
}

/* ---------- Shift table ---------- */
.shift-table {
  display: flex;
  flex-direction: column;
  border: var(--border);
  background: var(--cream);
  box-shadow: var(--hard);
  margin-bottom: var(--space-6);
}
.shift-table__row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: var(--border-thin);
}
.shift-table__row:last-child { border-bottom: none; }
.shift-table__row > * { padding: var(--space-3) var(--space-5); }
.shift-table__row--head { display: none; }
.shift-table__label {
  font-family: var(--font-display);
  font-size: var(--text-size-label);
  letter-spacing: var(--text-ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0 !important;
}
.shift-table__row > span:nth-child(2) { color: var(--ink-2); }
.shift-table__win {
  background: var(--green-soft);
  border-left: var(--border-w-accent-sm) solid var(--green);
  font-weight: 600;
}

/* ---------- Pull quote ---------- */
.pull-quote {
  margin: 0;
  max-width: 620px;
  border-top: var(--border);
  padding-top: var(--space-5);
}
.pull-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw + 15px, 30px);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: none;
}

/* ---------- Grade landers: lead (pain block) ----------
   Homepage weight: display H2 + tape rule + ink body. Not a grey kicker. */
.lead-section { padding-top: var(--space-8); }
.lead-block {
  max-width: 780px;
  border-left: var(--border-w-accent) solid var(--tape);
  padding-left: var(--space-6);
}
.lead-block__head {
  max-width: 18ch;
  margin-bottom: var(--space-5);
}
.lead-block__body {
  font-size: var(--text-size-lead);
  line-height: var(--text-lh-lead);
  color: var(--ink);
  max-width: 52ch;
  margin: 0;
}

/* Quote + grade illustration, same card language as homepage showcase. */
.quote-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
.quote-row .pull-quote { max-width: none; }
.quote-visual { overflow: hidden; }
.quote-visual__art {
  background: var(--paper-2);
  padding: var(--space-5);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-visual__art svg {
  width: 100%;
  max-width: 280px;
  height: auto;
}

/* ---------- Grade landers: teachers band ---------- */
.teachers-band { padding-top: var(--space-12); }
.teachers-band__page {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
}
.teachers-band__bar {
  height: 14px;
  background: var(--tape);
  border-bottom: var(--border);
}
.teachers-band__tape {
  position: absolute;
  top: -14px;
  left: var(--space-5);
  z-index: 1;
}
.teachers-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6) var(--space-8);
}
.teachers-band__stamp {
  display: inline-block;
  margin-bottom: var(--space-3);
}
.teachers-band__copy h2 {
  margin: var(--space-3) 0 var(--space-5);
  max-width: 14ch;
}
.teachers-band__copy p {
  color: var(--ink);
  max-width: 44ch;
  margin: 0 0 var(--space-6);
}
.teachers-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}
.teachers-band__share {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-size-hand-sm);
  color: var(--ink);
  text-decoration: none;
  padding: 4px 6px;
}
.teachers-band__share:hover,
.teachers-band__share:active {
  background: var(--tape);
  color: var(--ink);
}
/* Decorative only. Held back on phones, where it is 200px of scroll between
   the button and the FAQ; shown from the tablet layout up. */
.teachers-band__visual {
  display: none;
  align-items: center;
  justify-content: center;
}
.teachers-band__visual svg {
  width: 100%;
  max-width: 280px;
  height: auto;
}

/* ---------- Showcase ---------- */
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.showcase-card { overflow: hidden; display: flex; flex-direction: column; }
.showcase-card__visual {
  background: var(--paper-2);
  padding: var(--space-5);
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--border);
}
.showcase-card__visual--dark { background: var(--slate); }
.showcase-card__visual--scene { background: var(--paper-2); padding: var(--space-4); }
.showcase-card__caption {
  padding: var(--space-5);
  font-size: var(--text-size-caption);
  line-height: 1.45;
  color: var(--ink-2);
  flex: 1;
}
.mini-chapati { width: 100%; max-width: 175px; }

.ask-mock { color: var(--cream); width: 100%; }
.ask-mock__q { font-weight: 600; margin-bottom: var(--space-3); font-size: var(--text-size-body); max-width: none; }
.ask-mock__a {
  background: var(--cream);
  color: var(--ink);
  border-left: var(--border-w-accent-sm) solid var(--tape);
  padding: var(--space-3);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: var(--space-3);
  max-width: none;
}
.ask-mock__src { font-size: var(--text-size-micro); color: var(--ink-3); }

.progress-mock { width: 100%; }
.progress-mock__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: 16px;
  margin-bottom: var(--space-2);
}
.progress-mock__row:nth-of-type(2) { margin-top: var(--space-5); }
.progress-mock__meta { margin: var(--space-5) 0 0; font-size: var(--text-size-micro); color: var(--ink-3); }
.matatu-illustration { width: 100%; height: auto; }

/* ---------- Steps ---------- */
.steps-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.steps-list__item { padding: var(--space-6); }
.steps-list__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--tape);
  border: var(--border-w-thin) solid var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: var(--space-4);
}
.steps-list__item h3 { margin-bottom: var(--space-2); }
.steps-list__item p { margin: 0; color: var(--ink-2); max-width: none; }

.steps-close {
  font-family: var(--font-display);
  font-size: var(--text-size-h3);
  line-height: 1.3;
  margin-bottom: var(--space-6);
  max-width: 24ch;
}
/* Must sit after .steps-close: same specificity, so source order decides. */
.steps-close--wide { max-width: 46ch; }

.steps-callout {
  position: relative;
  max-width: 62ch;
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--hard);
  padding: var(--space-8) var(--space-6) var(--space-6);
}
.steps-callout__tape { position: absolute; top: -16px; left: var(--space-5); }
.steps-callout p { margin: 0; color: var(--ink-2); max-width: none; }

/* ---------- Trust ---------- */
.trust-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-8); }
.trust-item { padding: var(--space-6); }
.trust-item h3 { margin-bottom: var(--space-3); }
.trust-item p { margin: 0; color: var(--ink-2); max-width: none; }
.trust-item .hero__cta { margin-top: var(--space-4); }
.trust-founder {
  font-family: var(--font-hand);
  font-size: var(--text-size-hand);
  color: var(--ink-2);
  max-width: 40ch;
  margin: 0;
}

/* ---------- Features ---------- */
.features-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.features-list li {
  padding: var(--space-4) var(--space-5);
  background: var(--cream);
  border: var(--border-thin);
  border-left: var(--border-w-accent) solid var(--tape);
  color: var(--ink-2);
  font-size: var(--text-size-body);
  line-height: 1.5;
}
.features-list strong { color: var(--ink); }

/* ---------- Price ---------- */
.price-inner {
  max-width: 640px;
  background: var(--cream);
  border: var(--border);
  box-shadow: var(--hard-lg);
  padding: var(--space-8) var(--space-6);
}
.price-inner h2 { margin-bottom: var(--space-4); }
.price-inner .u-lead { margin: 0; max-width: 42ch; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 820px; }
.faq-item { padding: 0; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-size-h3);
  line-height: 1.3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tap-min);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 26px;
  line-height: 1;
  flex: none;
  color: var(--ink-2);
}
.faq-item[open] summary { border-bottom: var(--border-w-thin) solid var(--paper-2); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.faq-item__body p { margin: 0; color: var(--ink-2); max-width: 62ch; }

/* ---------- Final CTA ---------- */
.final-cta-section { display: flex; justify-content: center; }
.final-cta__page { max-width: 620px; }
.final-cta__head { margin-bottom: var(--space-4); }
.final-cta__page .u-lead { margin-bottom: var(--space-6); max-width: 40ch; }
.final-cta__page .ts-btn { margin-bottom: var(--space-3); }

/* ---------- Chapati widget ---------- */
.chapati-widget { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); width: 100%; }
.chapati-widget__stage { position: relative; width: 100%; display: flex; justify-content: center; }
.chapati-widget__svg { width: 100%; max-width: 260px; touch-action: manipulation; }

/* Handwritten cue pointing into an untaken piece. Blue annotation +
   Kalam, the design system's margin-note voice. Removed for good the
   moment the learner touches anything, so it never nags. */
.chapati-cue {
  position: absolute;
  top: -4px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  z-index: 2;
}
.chapati-cue__text {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-size-hand-sm);
  line-height: 1.1;
  color: var(--blue);
  transform: rotate(-3deg);
  white-space: nowrap;
}
.chapati-cue__arrow { width: 46px; height: auto; margin: 2px 0 0 12px; }

@media (min-width: 400px) {
  .chapati-cue { left: 4px; }
  .chapati-cue__arrow { width: 54px; }
}
.chapati-widget--display .chapati-widget__svg { max-width: 100%; }
.chapati-widget__controls { display: flex; align-items: center; gap: var(--space-3); width: 100%; max-width: 340px; }
.chapati-widget__label {
  font-family: var(--font-display);
  font-size: var(--text-size-label);
  letter-spacing: var(--text-ls-label);
  text-transform: uppercase;
  color: var(--ink-2);
  flex: none;
}
.chapati-widget input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--tape-2);
  height: var(--tap-min);
  cursor: pointer;
}
.chapati-widget__cut-readout {
  font-size: var(--text-size-caption);
  font-weight: 600;
  color: var(--ink-2);
  flex: none;
  min-width: 5.5em;
  text-align: right;
}
.chapati-widget__readout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-size-body);
  max-width: none;
}
.mini-chapati .chapati-widget__svg { max-width: 100%; }

.fraction-glyph {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.15;
}
.fraction-glyph__n { border-bottom: 2px solid var(--ink); padding: 0 5px 2px; }
.fraction-glyph__d { padding: 2px 5px 0; }

/* ---------- Scroll reveal ----------
   Uses the independent `translate` property so card hover lifts and the
   pasted-paper rotate on .ts-card--pasted keep working after entry. */
.js .reveal {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 450ms var(--snap-ease), translate 450ms var(--snap-ease);
}
.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}
.js .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.js .reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.js .reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.js .reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.js .reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.js .reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }
.js .reveal-stagger > .reveal:nth-child(7) { transition-delay: 480ms; }

/* =========================================================
   Tablet: 760px+
   ========================================================= */
@media (min-width: 760px) {
  .section { padding-left: var(--gutter-page); padding-right: var(--gutter-page); }
  .hero { padding-left: var(--gutter-page); padding-right: var(--gutter-page); }
  .hero__headline { max-width: var(--measure-heading); }
  /* Grade landers carry a longer headline than the homepage's. Give it the
     room to break in five lines like the homepage does, not seven. */
  .hero__headline--wide { max-width: 900px; }
  .hero__subhead { max-width: 52ch; }
  .showcase-grid { grid-template-columns: 1fr 1fr; }
  .steps-list { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .features-list { grid-template-columns: 1fr 1fr; }
  .shift-table__row {
    grid-template-columns: 170px 1fr 1fr;
    align-items: center;
  }
  .shift-table__row--head { display: grid; background: var(--ink); color: var(--cream); }
  .shift-table__row--head span {
    font-family: var(--font-display);
    font-size: var(--text-size-label);
    text-transform: uppercase;
    letter-spacing: var(--text-ls-label);
  }
  .problem-inner { padding-left: var(--space-8); }
  .lead-block { padding-left: var(--space-8); }
  .quote-row { grid-template-columns: 1.15fr 0.85fr; }
  .teachers-band__inner {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    padding: var(--space-10) var(--space-8) var(--space-10);
  }
  .teachers-band__visual { display: flex; }
  .teachers-band__stamp {
    position: absolute;
    top: var(--space-8);
    right: var(--space-6);
    margin: 0;
  }
  .price-inner { padding: var(--space-8); }
  .site-nav a { font-size: 18px; padding: 10px 12px; }
}

/* =========================================================
   Desktop: 1120px+
   ========================================================= */
@media (min-width: 1120px) {
  .site-header__inner { padding: 9px var(--gutter-page); }
  .demo-card { max-width: 520px; }
}

@media (max-width: 759px) {
  .site-header .tu-lockup__word { display: none; }
}