/* tauthinking.com — marketing only.
 *
 * tokens.css is a copy of the product's design system (see the header there).
 * components.css is deliberately NOT copied: it holds score chips, transcript
 * turns and meters, none of which a landing page has. Everything below is
 * marketing chrome — hero, section rhythm, split rows, nav — written
 * against --tau-* tokens so the page reads as the same product.
 *
 * TWO DELIBERATE EXTENSIONS, both scoped to this file and marketing only.
 * designsystem.md was written for the app and doesn't cover a landing page,
 * so these are flagged as gaps rather than pretended to be locked decisions:
 *
 *   1. --m-text-* below. tokens.css §7 is a UI type scale — 15.5px body is
 *      right for a dense dashboard and undersized for marketing prose read at
 *      arm's length. This is a second scale for this page, not a change to the
 *      product's.
 *   2. .band-forest. designsystem.md gives forest exactly six jobs and
 *      "marketing section ground" isn't one. Used exactly once on this page,
 *      as the single anchor in an otherwise near-white scroll. Never carries a
 *      score, a status, or a student's data — only a claim.
 *
 * Neither belongs back in the app.
 */

:root {
  --m-text-body:  18px;
  --m-text-lead:  20px;
  --m-measure:    62ch;
  --m-page:       1080px;   /* one column, everything in it */
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tau-bg);
  color: var(--tau-ink);
  font-family: var(--tau-font-ui);
  font-size: var(--m-text-body);
  line-height: var(--tau-leading-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--tau-forest); }

.wrap {
  width: 100%;
  max-width: var(--m-page);
  margin: 0 auto;
  padding: 0 var(--tau-s5);
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--tau-s4);
  top: var(--tau-s4);
  z-index: 20;
  background: var(--tau-surface);
  padding: var(--tau-s3) var(--tau-s4);
  border-radius: var(--tau-r-md);
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in oklab, var(--tau-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tau-dur-short) var(--tau-ease-standard);
}
.nav.scrolled { border-bottom-color: var(--tau-line); }

/* Scroll position, on a page that's now a sequence of chapters. scaleX only —
   animating width would lay out on every frame. */
.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--tau-forest);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--tau-s4);
  height: 64px;
}

/* logo-mark.png is itself a TAU wordmark, so the adjacent word is "Thinking"
   only — "Tau Thinking" beside it renders the name twice. */
.nav-mark {
  display: flex;
  align-items: center;
  gap: var(--tau-s2);
  font-weight: 700;
  font-size: var(--tau-text-md);
  letter-spacing: -0.01em;
  color: var(--tau-ink);
  text-decoration: none;
  margin-right: auto;
}
.nav-logo { height: 24px; width: auto; }

/* logo-mark.png is a flat forest-green PNG with no dark variant, so on the
   charcoal ground it sits at roughly the contrast of body text — legible, but
   not a wordmark. Lifting it to about the mint that --tau-forest already
   resolves to in dark theme keeps the brand hue instead of flattening it to
   white. STOPGAP: the app has the same gap on all five of its pages. The real
   fix is a second asset, which belongs in the app repo, not here. */
:root[data-theme="dark"] .nav-logo { filter: brightness(1.8) saturate(1.1); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--tau-s5);
  font-size: var(--tau-text-sm);
}
.nav-links a { color: var(--tau-ink-soft); text-decoration: none; }
.nav-links a:hover { color: var(--tau-forest); }

@media (max-width: 860px) {
  .nav-links { display: none; }
}

/* ---------- buttons ---------- */

.mbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tau-target);
  padding: 0 var(--tau-s6);
  border-radius: var(--tau-r-pill);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--tau-text-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tau-dur-short) var(--tau-ease-standard),
              color var(--tau-dur-short) var(--tau-ease-standard),
              border-color var(--tau-dur-short) var(--tau-ease-standard);
}
.mbtn-primary { background: var(--tau-forest); color: var(--tau-on-forest); }
.mbtn-primary:hover { background: var(--tau-forest-lift); }

.mbtn-secondary {
  background: var(--tau-surface);
  color: var(--tau-forest);
  border-color: var(--tau-line-strong);
}
.mbtn-secondary:hover { border-color: var(--tau-forest); }

.mbtn-sm { min-height: 38px; padding: 0 var(--tau-s5); font-size: var(--tau-text-sm); }

/* On the forest band, the primary fill would vanish into the ground. */
.band-forest .mbtn-primary {
  background: var(--tau-on-forest);
  color: var(--tau-forest);
}
.band-forest .mbtn-primary:hover { background: var(--tau-on-forest); opacity: 0.9; }

/* ---------- hero ---------- */

.hero { padding: clamp(48px, 9vw, 104px) 0 0; }

/* The brand lockup leads the hero. logo-hero.png is the TAU wordmark itself,
   so the adjacent word is "Thinking" only — "Tau Thinking" beside it sets the
   name twice. */
.hero-lockup {
  display: flex;
  align-items: baseline;
  gap: var(--tau-s4);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.hero-lockup img {
  height: clamp(38px, 5vw, 54px);
  width: auto;
}
.hero-lockup span {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tau-ink);
}
:root[data-theme="dark"] .hero-lockup img { filter: brightness(1.8) saturate(1.1); }

.hero h1 {
  margin: 0;
  font-size: clamp(42px, 8vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  max-width: 14ch;
}
.hero-sub {
  margin: var(--tau-s5) 0 0;
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: var(--tau-leading-tight);
  letter-spacing: -0.01em;
  color: var(--tau-forest);
  font-weight: 500;
  max-width: 24ch;
}
.hero-body {
  margin: var(--tau-s6) 0 0;
  max-width: 54ch;
  font-size: var(--m-text-lead);
  color: var(--tau-ink-soft);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tau-s3);
  margin-top: var(--tau-s7);
}
.hero-note {
  margin: var(--tau-s4) 0 0;
  font-size: var(--tau-text-sm);
  color: var(--tau-ink-faint);
}

.hero { padding-bottom: clamp(48px, 8vw, 88px); }

/* ---------- the stage ---------- */

/* ONE TONE MEANS "HERE IS THE PRODUCT."
 *
 * Every screenshot on this page sits on .stage, and nothing else ever does.
 * A shared background is a stronger grouping signal than a border (Gestalt
 * common region), so the tone itself announces the screenshots — the reader
 * learns the rule by the second one without being told.
 *
 * The band runs edge to edge while its content stays in .wrap/.wrap-wide;
 * that full-bleed change of ground is what segments a long scroll into
 * chapters. It carries no border: the tone change already separates the
 * sections, and doubling the two is the same "one signal, stated twice"
 * failure designsystem.md forbids on a chip.
 */
.stage {
  background: var(--tau-surface-2);
  padding: clamp(44px, 7vw, 88px) 0;
}
.stage + .section { border-top: 0; }
.section + .stage { border-top: 0; }

/* ---------- product fragments ---------- */

/* These rows render the app's OWN molecules — .dim-grid, .stat-tile, .chip-*,
   .origin-chip, .card — from components.css, rather than a downscaled PNG of
   them. Everything below is layout around those components: margins, stacking,
   the grid a trend row sits on. Per the design system's own rule, a page sheet
   may lay a component out and may never redefine its chrome, so nothing here
   touches a component's background, border, radius, padding or shadow.
   The strings are real values from the seeded demo data.

   THE TRADE: a fragment is a claim about a UI, and unlike a screenshot it
   never looks stale when the product moves on. If the app's markup changes,
   these have to be re-checked by hand. */



/* ---------- organisms, transcribed ---------- */

/* WHY THIS BLOCK EXISTS.
 *
 * components.css gives us the app's ATOMS and MOLECULES. It does not give us
 * the ORGANISMS — the assembled blocks a teacher actually looks at. Those live
 * in `dashboard.html`'s inline <style> and in `report.css`, neither of which is
 * copied here: designsystem.md keeps the dashboard's block inline by design,
 * and report.css is a page sheet.
 *
 * The first attempt improvised markup against whichever molecule name looked
 * closest, and got several of them wrong outright — the coaching note is
 * .teach-note, not .teaching-card; the class idea mix is .origin-pill, not
 * .origin-chip (which dashboard.html's own comment records as used nowhere);
 * the trend chips are .dim-badge, not .chip-*.
 *
 * So: every rule below is transcribed VERBATIM from the app, with its source.
 * Do not edit them to taste — that is the whole point. Re-check them when the
 * app changes; they cannot arrive by `cp` the way tokens and components do.
 *
 * Source: app/web/dashboard.html <style>, lines ~473–660  (2026-08-07)
 */

.agg-stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--tau-s5); }
.agg-block-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tau-ink-soft); margin: 0 0 var(--tau-s2); }

.draft-stat { flex: 1; min-width: 120px; border: 1px solid var(--tau-line); border-radius: var(--tau-r-sm); padding: 9px 11px; background: var(--tau-surface-2); }
.draft-stat-val { font-size: var(--tau-text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.draft-stat-label { font-size: 11px; color: var(--tau-ink-soft); margin-top: 1px; }

.teach-note { padding: var(--tau-s3) var(--tau-s4); border-radius: 0 var(--tau-r-md) var(--tau-r-md) 0; background: var(--tau-tool-info-bg); border: 1px solid var(--tau-line); border-left: 3px solid var(--tau-tool-info); box-shadow: var(--tau-shadow); font-size: var(--tau-text-xs); color: var(--tau-ink); }
.teach-note.stacked { margin-bottom: var(--tau-s5); }
.teach-note .eyebrow-lbl { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tau-tool-info); font-family: var(--tau-font-mono); margin-bottom: 6px; }
.teach-note + .teach-note { margin-top: var(--tau-s3); }
.note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.note-list li { padding-left: 13px; position: relative; }
.note-list li::before { content: "–"; position: absolute; left: 0; color: var(--tau-tool-info); }

/* Legend-style pill (swatch dot + count). Deliberately NOT components.css's
   .origin-chip — dashboard.html's own comment: "reusing that class name here
   would collide two incompatible specs under one selector." */
.origin-mix { display: flex; gap: var(--tau-s2); flex-wrap: wrap; align-items: center; }
.origin-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--tau-r-pill); font-size: var(--tau-text-xs); font-weight: 600; color: var(--tau-ink); }
.origin-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.dim-panel { border: 1px solid var(--tau-line); border-radius: var(--tau-r-md); background: var(--tau-surface); box-shadow: var(--tau-shadow); padding: 4px var(--tau-s4); }
.dim-row { display: flex; align-items: flex-start; gap: var(--tau-s3); padding: 11px 0; border-bottom: 1px solid var(--tau-line); }
.dim-row:last-child { border-bottom: none; }
.dim-name { width: 172px; flex-shrink: 0; font-size: var(--tau-text-sm); font-weight: 600; padding-top: 2px; }
.dim-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: var(--tau-r-pill); white-space: nowrap; flex-shrink: 0; width: 150px; justify-content: center; }
.dim-badge.up      { background: var(--tau-positive-bg);  color: var(--tau-positive); }
.dim-badge.ceiling { background: var(--tau-surface-2); color: var(--tau-ink-soft); border: 1px solid var(--tau-line); }
.dim-note { flex: 1; font-size: var(--tau-text-xs); color: var(--tau-ink-soft); padding-top: 2px; }

/* The one place this page lays a transcribed organism out differently: the
   trend row's fixed 172px name + 150px badge are sized for a dashboard column
   and overflow a phone. Layout only — widths and wrapping, no chrome — which
   is the one thing a page sheet is allowed to set on a component. */
@media (max-width: 620px) {
  .dim-row { flex-wrap: wrap; }
  .dim-name { width: 100%; }
  .dim-badge { width: auto; }
  .dim-note { flex-basis: 100%; }
}

/* Source: app/web/report.css, lines ~154, 359–418  (2026-08-07) */

.turn { display: flex; gap: var(--tau-s3); align-items: flex-start; padding: var(--tau-s3) 14px; border-radius: var(--tau-r-sm); background: var(--tau-surface-2); border-left: 4px solid var(--tau-line-strong); }
.turn.landed { border-left-color: var(--tau-origin-you); }
.turn-num { font-size: 11px; font-weight: 700; color: var(--tau-ink-faint); min-width: 20px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.turn-body { flex: 1; min-width: 0; }
.turn-top-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.turn-text { font-size: var(--tau-text-sm); line-height: var(--tau-leading-body); color: var(--tau-ink); white-space: pre-wrap; word-break: break-word; }
.label-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--tau-r-pill); white-space: nowrap; flex-shrink: 0; }
.side-panel { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; border-radius: var(--tau-r-sm); padding: 8px 10px; }
.side-panel .glyph { font-size: 13px; line-height: 1.5; flex-shrink: 0; }
.side-panel-text { font-size: 11.5px; line-height: 1.5; color: var(--tau-ink); }
.side-panel-text .tag { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tau-track-label); margin-bottom: 2px; }
.side-panel-text q { font-style: italic; color: var(--tau-ink-soft); }
.side-panel.landed { background: var(--tau-origin-you-bg); }
.side-panel.landed .glyph, .side-panel.landed .tag { color: var(--tau-origin-you); }

/* ---------- split rows ---------- */

/* A screenshot beside the paragraph that explains it, rather than a
   full-width image the reader has to hold in memory while they scroll to the
   text. The figure column is the wider of the two: these are dense product
   screens, and the prose beside them is short by design. */
.split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(var(--tau-s6), 4vw, var(--tau-s8));
  align-items: center;
}
.split + .split { margin-top: clamp(48px, 7vw, 88px); }

/* Alternating sides keeps a run of three rows from reading as a list. Order
   is swapped visually only — source order stays figure-then-text so the
   caption follows its image for a screen reader. */
.split-flip .split-media { order: 2; }

.split-text h3 {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: var(--tau-leading-tight);
  letter-spacing: -0.02em;
  font-weight: 600;
}
.split-text p {
  margin: var(--tau-s4) 0 0;
  max-width: 46ch;
  color: var(--tau-ink-soft);
}
.split-text .eyebrow { margin-bottom: var(--tau-s3); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--tau-s6); }
  .split-flip .split-media { order: 0; }
}

/* ---------- section rhythm ---------- */

.section { padding: clamp(52px, 8vw, 96px) 0; }
.section + .section { border-top: 1px solid var(--tau-line); }

/* Type and colour come from components.css. A page sheet may set layout on a
   component and nothing else, so this adds spacing only. */
.eyebrow { margin: 0 0 var(--tau-s3); }

.section h2 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 20ch;
}

.section p { max-width: var(--m-measure); color: var(--tau-ink-soft); }
.section h2 + p { margin-top: var(--tau-s5); font-size: var(--m-text-lead); }
.section p strong { color: var(--tau-ink); font-weight: 600; }

/* ---------- the three-step strip ---------- */

/* NOT .steps — that name belongs to the product's five-pip score meter in
   components.css, and squatting on it turned every meter on this page into a
   3-column grid. Marketing never redefines a component's name. */

/* Numbered because the sequence is real — the order is the workflow, not
   decoration on an unordered list. */
.workflow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tau-s5);
  margin: var(--tau-s8) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.workflow li {
  counter-increment: step;
  padding-top: var(--tau-s5);
  border-top: 2px solid var(--tau-forest);
}
.workflow li::before {
  content: counter(step);
  display: block;
  font-size: var(--tau-text-sm);
  font-weight: 700;
  letter-spacing: var(--tau-track-label);
  color: var(--tau-forest);
  margin-bottom: var(--tau-s2);
}
.step-name {
  margin: 0;
  font-size: var(--tau-text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--tau-ink);
  max-width: none;
}
.step-desc {
  margin: var(--tau-s2) 0 0;
  font-size: var(--tau-text-md);
  color: var(--tau-ink-soft);
  max-width: none;
}
@media (max-width: 760px) {
  .workflow { grid-template-columns: 1fr; gap: var(--tau-s6); }
}

/* ---------- dimension definitions ---------- */

/* NOT .dim*/.*/ — the app owns .def-name (the 172px trend-row label) and
   .dim-grid/.dim-quad (the scored quadrants). This is the marketing
   definition card that names what each dimension asks, so it gets its own
   namespace. The previous name collided: the transcribed .def-name { width:
   172px } was being applied to these cards too, pushing the grid past the
   viewport at 390px and 768px. */

.defs {
  display: grid;
  gap: var(--tau-s4);
  grid-template-columns: repeat(4, 1fr);
  margin: var(--tau-s7) 0 0;
}
@media (max-width: 760px) { .defs { grid-template-columns: repeat(2, 1fr); } }
.def {
  padding: var(--tau-s5);
  background: var(--tau-surface);
  border: 1px solid var(--tau-line);
  border-radius: var(--tau-r-md);
}
.def-name {
  margin: 0;
  font-size: var(--tau-text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tau-ink);
  max-width: none;
}
.def-desc {
  margin: var(--tau-s2) 0 0;
  font-size: var(--tau-text-sm);
  color: var(--tau-ink-soft);
  max-width: none;
}

/* ---------- forest band ---------- */

/* The page's one anchor. See the file header — this is a documented marketing
   extension of forest's six jobs, used exactly once, carrying a claim only. */
.band-forest {
  background: var(--tau-forest);
  color: var(--tau-on-forest);
  padding: clamp(56px, 9vw, 104px) 0;
}
.band-forest .eyebrow { color: var(--tau-on-forest); opacity: 0.7; }
.band-forest p { color: var(--tau-on-forest); }
.band-statement {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(28px, 4.6vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.band-forest .band-after {
  margin: var(--tau-s6) 0 0;
  max-width: 48ch;
  font-size: var(--m-text-lead);
  opacity: 0.82;
}

/* ---------- questions ---------- */

/* Two columns once there's room. Six questions in one stack is a long scroll
   for content most readers sample rather than read through. */
.qa {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(var(--tau-s6), 5vw, var(--tau-s9));
  row-gap: var(--tau-s7);
  margin-top: var(--tau-s7);
}
.qa p { max-width: 46ch; }
@media (max-width: 820px) {
  .qa { grid-template-columns: 1fr; }
}
.qa-item h3 {
  margin: 0;
  font-size: var(--tau-text-xl);
  letter-spacing: -0.015em;
  font-weight: 600;
}
.qa-item p { margin: var(--tau-s2) 0 0; }

/* ---------- closing CTA ---------- */

.close {
  padding: clamp(56px, 9vw, 104px) 0;
  border-top: 1px solid var(--tau-line);
  background: var(--tau-surface-2);
}
/* Centred — the one place on the page that is. A terminal beat reads as an
   ending when it stops using the left rail everything else is hung on. */
.close { text-align: center; }
.close h2 {
  margin: 0 auto;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 18ch;
}
.close p {
  max-width: 52ch;
  margin: var(--tau-s5) auto 0;
  font-size: var(--m-text-lead);
  color: var(--tau-ink-soft);
}
.close .hero-actions { margin-top: var(--tau-s6); justify-content: center; }

/* ---------- footer ---------- */

.foot {
  padding: var(--tau-s7) 0;
  border-top: 1px solid var(--tau-line);
  font-size: var(--tau-text-sm);
  color: var(--tau-ink-faint);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tau-s5);
  align-items: center;
  justify-content: space-between;
}
.foot a { color: var(--tau-ink-soft); text-decoration: none; }
.foot a:hover { color: var(--tau-forest); }

/* ---------- scroll reveal ---------- */

/* Scoped to .js — set by the head script. With JS off nothing would ever add
   .in, so an unscoped rule would hide the whole page permanently.
   transform/opacity only, so a reveal never triggers layout. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--tau-dur-medium) var(--tau-ease-decelerate),
              transform var(--tau-dur-medium) var(--tau-ease-decelerate);
}
.js .reveal.in { opacity: 1; transform: none; }