/* =========================================================
   Growing Minds Science: field-guide.css
   The Living Field Guide to the Growing Mind. Page shell, the editorial
   components, and the homepage sections, laid out like a printed annual:
   a masthead plate, a title that begins on the 42% axis, text pages that
   hang from that axis, and whole pages of flat color. Quiet 1px rules
   between rows, no shadows at rest, no gradients, calm corners. Reads only the tokens in
   tokens-field-guide.css, which every page links directly just before this file (an
   @import here would make the tokens wait for this download). Header and footer
   behavior stays in chrome.js.
   ========================================================= */

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body.fg {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* :where() keeps the margin reset at class weight, so a component's own spacing (a single-class rule) is not canceled. */
.fg :where(h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; }
.fg ul[class], .fg ol[class] { padding: 0; list-style: none; }
.fg img, .fg video, .fg svg, .fg canvas { display: block; max-width: 100%; }
.fg img, .fg video { height: auto; }
/* :where() keeps these resets at class weight, so a later .btn rule styles a <button> the same as a link. */
.fg :where(button), .fg input, .fg select, .fg textarea { font: inherit; color: inherit; }
.fg :where(button:not(.btn)) { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
.fg :target { scroll-margin-top: calc(var(--header-h) + 1rem); }
.fg ::selection { background: var(--forest); color: var(--on-forest); }
/* The browser's own parts: scrollbar, caret, checkboxes and radios take the palette instead of system blue and gray. */
html:has(> body.fg) { scrollbar-color: var(--sage-deep) var(--paper); }
.fg { accent-color: var(--forest); caret-color: var(--forest); }
.fg :focus-visible { outline: 2.5px solid var(--forest); outline-offset: 3px; border-radius: 0; }

.fg h1, .fg h2, .fg h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
  hyphens: none;
  letter-spacing: var(--head-tracking);
}
.fg p { max-width: 62ch; text-wrap: pretty; }
.fg p + p { margin-top: 0.9em; }

.u-visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.fg .skip-link {
  position: absolute; left: var(--margin); top: -200px;
  --skip-top: calc(var(--header-h) + 0.5rem);
  padding: 0.75rem 1rem;
  background: var(--field-ink); color: var(--on-ink); /* the ink field stays dark in both themes; --ink turns light in dark mode */
  font-weight: 500; text-decoration: none; z-index: 200;
}
.fg .skip-link:focus { top: var(--skip-top); }
.fg .skip-link:hover { color: var(--on-ink); } /* outranks the forest link hover, which sat on ink at 1.6:1 */
.fg main:focus { outline: none; }

/* ---------- Layout primitives ---------- */
.fg-wrap { padding-inline: var(--margin); }
.fg-inner { max-width: 1680px; margin-inline: auto; }
.fg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.fg-section { padding-block: calc(var(--section) / 2); }
.fg-axis { margin-left: var(--axis); }
@media (max-width: 999px) { .fg-axis { margin-left: 0; } }

/* ---------- Type helpers ---------- */
.fg-display { font-size: var(--step-display); line-height: 0.98; letter-spacing: var(--display-tracking); margin-left: -0.04em; }
.fg-head { font-size: var(--step-head); line-height: 1.02; }
.fg-head--soft .fg-h-soft { color: var(--ink-soft); }
.fg-lead { font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; font-family: var(--font-body); font-weight: 400; }
.fg-small { font-size: var(--step-small); line-height: 1.45; }
.fg-muted { color: var(--ink-muted); }
.fg-nums { font-variant-numeric: tabular-nums; }
:root { --fg-statement-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.25rem); } /* 22–36px: a statement set large, never a headline */
.fg-statement { font-family: var(--font-display); font-weight: 400; font-size: var(--fg-statement-size); line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch; }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.4rem;
  background: var(--forest); color: var(--on-forest);
  border: 0; border-radius: 0;
  font-family: var(--font-body); font-weight: 500; font-size: var(--step-body); line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn--lg { min-height: 3.5rem; padding-inline: 1.8rem; }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--paper { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--forest-deep); color: var(--on-forest); }
  .btn--ink:hover { background: var(--ink-700); color: var(--on-ink); }
  .btn--paper:hover { background: var(--surface); color: var(--ink); }
}
.text-link {
  color: var(--forest);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  transition: color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .text-link:hover { color: var(--forest-deep); } }
.fg-ink-field .text-link { color: var(--on-ink); }
.fg-quiet-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.07em;
  text-decoration-color: var(--ink-muted);
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .fg-quiet-link:hover { text-decoration-color: currentColor; } }

/* =========================================================
   Header and footer: the field-guide world on top of chrome.css
   ========================================================= */
.fg .site-header { background: var(--paper); }
.fg .site-header.is-scrolled { background: var(--paper-2); }
.fg .site-header .nav__auth::before { display: none; }
@media (min-width: 1000px) { .fg .site-header .nav__auth { margin-left: 0.75rem; } } /* the sheet below 1000px lines it up with the other rows */
/* "It's hard right now" opens the header order on wide desktops too, not only in the phone sheet; from 1000 to 1279px the row has no room, and the Tools menu and the hero line carry it. */
@media (min-width: 1280px) { .fg .site-header .nav__list > .nav__now { display: block; } }
.fg .site-header .brand__mark { border: 0; background: none; }
.fg .site-header .theme-toggle,
.fg .site-header .nav-toggle { border: 0; background: var(--surface-2); }
.fg .site-header .theme-toggle:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 1000px) {
  /* Bare icons on phones: the wordmark owns the bar (brand guidelines). */
  .fg .site-header .theme-toggle,
  .fg .site-header .nav-toggle { background: transparent; }
  .fg .site-header .nav__list > .nav__theme .theme-toggle { border: 1.5px solid var(--ink); }
}
.fg .site-header .nav__link { font-family: var(--font-body); }
.fg .site-header .nav__cta .btn { border: 0; border-radius: var(--radius); font-family: var(--font-body); font-weight: 500; }
.fg .site-header .nav__menu { border-top: 6px solid var(--forest); background: var(--surface); padding: 0.5rem; box-shadow: none; /* taste-skill-ignore: removes the chrome menu shadow */ }
.fg .site-header .nav__menu-all { border-top: 0; margin-top: 0.25rem; background: var(--paper-2); padding: 0.75rem 0.8rem; }
.fg .site-header .nav__submenu-title { font-family: var(--font-body); }
.fg .site-header .nav__submenu-desc { font-family: var(--font-body); }
.fg .site-header .brand__name,
.fg .site-footer .brand__name { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; }
@media (max-width: 1000px) {
  /* The open menu is a full sheet of paper down to the foot of the screen, so the page never shows
     through under it. Its side padding is restated here because the list reset above outranks
     chrome.css's, which left the items flush to the screen edge. */
  .fg .site-header .nav__list { border-bottom: 0; background: var(--paper); height: calc(100dvh - var(--header-h)); padding: 0.5rem clamp(1rem, 4vw, 2.25rem) calc(1.5rem + env(safe-area-inset-bottom)); }
}

/* Footer: columns above, the wordmark below, on the same ink field as the close. */
.fg .site-footer {
  display: grid; grid-template-rows: auto 1fr auto;
  /* A gap between the links and the wordmark when the links outgrow the 70svh floor (phones). */
  row-gap: clamp(2.5rem, 6vw, 4rem);
  min-height: 70svh;
  padding: 2.5rem 0 1.5rem;
  background: var(--field-ink);
  color: var(--on-ink);
  --chrome-on-dark: var(--on-ink);
  --chrome-on-dark-soft: var(--on-ink-soft);
  --chrome-on-dark-muted: var(--on-ink-muted);
}
[data-theme="dark"] .fg .site-footer { background: var(--field-ink); }
.fg .site-footer .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); }
.fg .site-footer .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fg .site-footer .brand__mark { border: 0; }
.fg .site-footer .site-footer__heading { font-family: var(--font-body); font-weight: 500; }
.fg .site-footer .site-footer__tag,
.fg .site-footer .footer-list a { font-family: var(--font-body); font-size: var(--step-body); }
.fg .site-footer .footer-list a { color: var(--on-ink-soft); }
.fg .site-footer .footer-list a:hover { color: var(--on-ink); }
.fg .site-footer .site-footer__close { grid-row: 3; align-self: end; }
.fg .site-footer .site-footer__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-display);
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  color: var(--on-ink);
  white-space: nowrap;
  margin-left: -0.04em;
}
.fg .site-footer .site-footer__nav > div { min-width: 0; }
.fg .site-footer .footer-list a { overflow-wrap: anywhere; }
.fg .site-footer .footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  margin-top: 1.25rem; padding-top: 0; border-top: 0;
  color: var(--on-ink-muted); font-size: var(--step-small);
}
.fg .site-footer .footer-bottom p { margin: 0; }
.fg .site-footer :focus-visible { outline-color: var(--on-ink); }
/* Below 1180px the wordmark sits above the columns, so four columns keep room for "Communication Snapshot". */
@media (max-width: 1180px) {
  .fg .site-footer .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 900px) {
  .fg .site-footer .site-footer__nav { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}
@media (max-width: 600px) {
  .fg .site-footer .site-footer__wordmark { white-space: normal; font-size: clamp(2rem, 12.6vw, 3.2rem); text-wrap: balance; }
}

/* =========================================================
   1. The masthead and the title
   ========================================================= */
.masthead { padding-top: 0; }
.masthead__plate {
  background: var(--paper-2);
  padding: clamp(1rem, 2.5vw, 2rem) var(--margin) 0;
}
.plate { position: relative; max-width: 1680px; margin-inline: auto; }
.plate svg { width: 100%; height: auto; }
.plate__scene { fill: var(--ink); }
.plate__ground { fill: var(--sage); }
.plate__object { fill: var(--sage-deep); }
.plate__limb { stroke: var(--ink); stroke-linecap: round; fill: none; }
.plate__path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 4 9; stroke-linecap: round; }
.plate__callout { cursor: pointer; }
.plate__callout line { stroke: var(--ink); stroke-width: 1.5; }
.plate__callout circle { fill: var(--ink); }
.plate__callout text {
  font-family: var(--font-body); font-weight: 500; font-size: 22px; fill: var(--ink);
}
.plate__callout.is-active line { stroke: var(--forest); stroke-width: 2.5; }
.plate__callout.is-active circle { fill: var(--forest); }
.plate__callout.is-active text { fill: var(--forest); }
.plate__callout--parent line { stroke: var(--note-warm); }
.plate__callout--parent circle { fill: var(--note-warm); }
.plate__callout--parent text { fill: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .plate__callout:hover line { stroke: var(--forest); }
  .plate__callout:hover circle { fill: var(--forest); }
  .plate__callout:hover text { fill: var(--forest); }
}
.masthead__title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 0;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: calc(var(--section) / 2);
}
.masthead__side { display: grid; gap: 1rem; align-content: start; }
.masthead__side p { max-width: 36ch; }
.masthead__notes { display: grid; gap: 0.5rem; }
.masthead__notes { gap: 0.25rem; }
.masthead__note {
  display: grid; gap: 0.35rem;
  width: 100%; text-align: left;
  padding: 0.6rem 0.9rem;
  background: none;
  color: var(--ink);
  min-height: 44px;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.masthead__note:active { transform: scale(0.985); }
.masthead__note .masthead__note-label { font-weight: 500; }
.masthead__note .masthead__note-text { font-size: var(--step-body); line-height: 1.45; color: var(--ink-soft); }
.masthead__note.is-active { background: var(--sage); color: var(--on-sage); }
.masthead__note.is-active .masthead__note-text { color: var(--on-sage); }
@media (hover: hover) and (pointer: fine) { .masthead__note:hover { background: var(--paper-2); } .masthead__note.is-active:hover { background: var(--sage); } }
.anim .masthead__notes.is-live .masthead__note:not(.is-active) .masthead__note-text { display: none; }
.masthead__main { display: grid; gap: 1.5rem; }
.masthead__h1 { max-width: none; }
.masthead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 0.5rem; }
.fg .masthead__quiet { margin-top: 0.25rem; }
@media (max-width: 999px) {
  .masthead__main { order: -1; }
}
@media (max-width: 720px) {
  .plate__callout text, .plate__callout line { display: none; }
  .plate__callout circle { r: 9; }
}
@media (min-width: 1000px) {
  .masthead__title { grid-template-columns: var(--axis) minmax(0, 1fr); gap: 0 var(--gutter); }
  .masthead__side { padding-right: clamp(2rem, 6vw, 7rem); padding-top: 0.6rem; }
}

/* Shutter: the one loud moment, on the plate */
.shutter { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .anim .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .anim .shutter > * { transform: scale(1.06); transform-origin: 50% 80%; transition: transform 1500ms var(--ease-soft); }
  .anim .shutter.is-in { clip-path: inset(0); }
  .anim .shutter.is-in > * { transform: none; }
}

/* =========================================================
   2. The Lens page (band): heading in the margin zone, the component wide
   ========================================================= */
.lens-band__head { display: grid; gap: 1.25rem; max-width: 56ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.lens-band__photo { margin: 0; width: min(100%, 320px); }
.lens-band__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.fg .lens-band__after { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 1000px) {
  .lens-band__head { grid-template-columns: var(--axis) minmax(0, 1fr); max-width: none; gap: 0 var(--gutter); align-items: end; }
  .lens-band__head h2 { grid-column: 1; }
  .lens-band__head p { grid-column: 2; grid-row: 1; max-width: 52ch; align-self: end; }
  .lens-band__photo { grid-column: 1; grid-row: 2; margin-top: 1.5rem; width: clamp(200px, 16vw, 280px); }
}
@media (max-width: 999px) {
  .lens-band__photo { width: 60%; margin-left: auto; }
}

/* =========================================================
   3. The explorer: a photograph in the margin zone, the heading on the axis,
   the agenda running wide
   ========================================================= */
.explorer { background: var(--paper); }
.explorer__top { display: grid; gap: 2rem; }
.explorer__photo { margin: 0; }
.explorer__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; }
.explorer__lead .explorer__head { flex-wrap: wrap; gap: 1rem 2rem; }
.explorer__lead .explorer__cta { margin-left: auto; }
.fg .explorer__lead .explorer__cursor { margin-top: var(--space-12); }
.fg .explorer__tab-name { font-size: var(--step-body); line-height: 1.25; }
@media (min-width: 1000px) {
  .explorer__top { grid-template-columns: var(--axis) minmax(0, 1fr); gap: 0 var(--gutter); align-items: start; }
  .explorer__photo { width: clamp(220px, 19vw, 320px); margin-top: 0.4rem; }
  .fg .explorer__body { grid-template-columns: 176px minmax(0, 1fr); }
  .fg .explorer__tabs { grid-template-columns: 176px; }
  .fg .explorer__tab { min-width: 176px; }
}
@media (max-width: 999px) {
  .fg .explorer__inner { display: flex; flex-direction: column; }
  .explorer__top { display: contents; }
  .explorer__lead { order: 1; }
  .explorer__body { order: 2; }
  .explorer__photo { order: 3; margin: var(--space-12) 0 0; }
  .explorer__note { order: 4; }
  .explorer__photo img { aspect-ratio: 3 / 2; object-position: 50% 35%; }
}

/* =========================================================
   4. Three things: a mosaic of unlike tiles
   ========================================================= */
.mosaic { padding-block: calc(var(--section) / 2); }
.mosaic__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 96px;
  gap: 8px;
}
.tile { position: relative; overflow: hidden; padding: 24px; display: grid; align-content: start; gap: 0.75rem; }
.tile--head { grid-column: 1 / 7; grid-row: 1 / 4; background: var(--paper-2); }
.tile--photo { grid-column: 7 / 13; grid-row: 1 / 4; padding: 0; background: var(--surface-2); }
.tile--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.tile--child { grid-column: 1 / 4; grid-row: 4 / 7; background: var(--sage); color: var(--on-sage); }
.tile--figure { grid-column: 4 / 7; grid-row: 4 / 7; background: var(--field-ink); color: var(--on-ink); }
.tile--self { grid-column: 7 / 13; grid-row: 4 / 7; background: var(--paper-2); }
.tile--list { grid-column: 1 / 4; grid-row: 7 / 10; background: var(--surface-2); }
.tile--influence { grid-column: 4 / 7; grid-row: 7 / 10; background: var(--sage); color: var(--on-sage); }
.tile--diagram { grid-column: 7 / 13; grid-row: 7 / 10; background: var(--surface); }
.tile__h2 { font-size: var(--step-head); line-height: 1; letter-spacing: var(--display-tracking); max-width: none; }
.tile__sentence { font-family: var(--font-display); font-weight: 500; font-size: var(--step-head); line-height: 1; letter-spacing: var(--head-tracking); }
.tile__text { font-size: var(--step-body); line-height: 1.45; max-width: 30ch; }
.tile__figure { font-family: var(--font-display); font-weight: 500; font-size: var(--step-display); line-height: 0.9; letter-spacing: -0.03em; }
.tile__caption { font-size: var(--step-small); line-height: 1.45; color: var(--on-ink-soft); max-width: 30ch; }
.tile__list { display: grid; gap: 0.5rem; font-size: var(--step-body); line-height: 1.3; }
.tile__list li { padding-left: 0; }
.tile__diagram-title { font-weight: 500; }
.influence { display: grid; gap: 6px; margin-top: 0.25rem; }
.influence__row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0 1rem; align-items: center; min-height: 48px; padding: 0.5rem 0.85rem; }
.influence__row--change { background: var(--forest); color: var(--on-forest); }
.influence__row--vary { background: var(--sage); color: var(--on-sage); }
.influence__row--outside { background: var(--paper-2); color: var(--ink); }
.influence__name { font-weight: 500; }
.influence__eg { font-size: var(--step-small); line-height: 1.4; }
@media (max-width: 1100px) {
  .influence__row { grid-template-columns: 1fr; gap: 0.15rem; }
}
@media (max-width: 999px) {
  .mosaic__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 6px; }
  .tile { grid-column: span 2 !important; grid-row: auto !important; padding: 20px; min-height: 0; }
  .tile--photo { aspect-ratio: 4 / 3; }
  .tile--head { min-height: 30vh; }
  .tile--figure, .tile--list { grid-column: span 1 !important; aspect-ratio: auto; min-height: 44vw; }
  .tile__figure { font-size: clamp(3rem, 14vw, 4rem); }
  .tile__list { gap: 0.4rem; }
  .mosaic__order-photo { order: 1; } .mosaic__order-child { order: 2; } .mosaic__order-figure { order: 3; } .mosaic__order-list { order: 4; } .mosaic__order-self { order: 5; } .mosaic__order-influence { order: 6; } .mosaic__order-diagram { order: 7; }
}

/* =========================================================
   5. For the moments that cannot wait: a sage field, one sentence, one action
   ========================================================= */
.now { background: var(--sage); color: var(--on-sage); padding-block: clamp(4.5rem, 9vw, 9rem); }
.now__inner { display: grid; gap: 1.75rem; }
.now__side { display: grid; gap: 1.5rem; align-content: end; }
.now__photo { margin: 0; width: clamp(180px, 16vw, 260px); }
.now__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.now__sentence { max-width: 32ch; }
.now__list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; max-width: 46ch; }
.now__list a { color: var(--on-sage); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: rgba(32, 50, 47, 0.45); }
.now__list a:hover { text-decoration-color: currentColor; }
[data-theme="dark"] .now__list a { text-decoration-color: rgba(237, 235, 227, 0.45); }
.now .btn { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) { .now .btn:hover { background: var(--ink-700); } }
.now :focus-visible { outline-color: var(--ink); }
[data-theme="dark"] .now :focus-visible { outline-color: var(--on-sage); }
@media (min-width: 1000px) {
  .now__inner { grid-template-columns: var(--axis) minmax(0, 1fr); gap: 0 var(--gutter); }
  .now__side { padding-right: clamp(2rem, 6vw, 7rem); align-self: end; }
  .now__main { align-self: end; }
  .now__main { display: grid; gap: 1.75rem; }
}

/* =========================================================
   6. Classes: plans as a large table
   ========================================================= */
.fg .classes__heading { margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.classes__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.classes__table th, .classes__table td { text-align: left; vertical-align: top; padding: 20px 20px 20px 0; font-weight: 400; }
.classes__table th { padding-right: 20px; }
.classes__table col.classes__col-label { width: 22%; }
.classes__table thead th { padding-top: 0; padding-bottom: 28px; }
.classes__plan-name { font-family: var(--font-display); font-weight: 500; font-size: var(--fg-statement-size); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; display: block; }
.classes__price { font-family: var(--font-display); font-weight: 400; font-size: var(--fg-statement-size); line-height: 1.05; font-variant-numeric: tabular-nums; }
.classes__price small { display: block; font-family: var(--font-body); font-size: var(--step-small); line-height: 1.3; color: var(--ink-muted); }
.classes__table tbody th { font-size: var(--step-lead); line-height: 1.3; font-family: var(--font-body); font-weight: 500; }
.classes__table tbody td { font-size: var(--step-body); line-height: 1.45; }
.classes__table tbody tr:nth-child(odd) th, .classes__table tbody tr:nth-child(odd) td { background: var(--paper-2); }
.classes__table tbody tr:nth-child(odd) th { padding-left: 20px; }
.classes__table tbody tr:nth-child(odd) td:last-child { padding-right: 20px; }
.classes__table tbody tr:nth-child(even) th { padding-left: 20px; }
.classes__table tbody tr:nth-child(even) td:last-child { padding-right: 20px; }
.classes__table .classes__actions th, .classes__table .classes__actions td { padding-top: 28px; padding-bottom: 0; background: none; }
.classes__table .classes__actions .btn { width: 100%; max-width: 16rem; }
.classes__soon { color: var(--ink-muted); font-size: var(--step-body); line-height: 1.4; display: inline-block; padding-top: 0.35rem; }
.fg .classes__note { margin-top: 2rem; max-width: 60ch; }
@media (max-width: 900px) {
  /* Each compared item becomes a block: its name, then one line per class. */
  .classes__table, .classes__table tbody, .classes__table tr, .classes__table th, .classes__table td { display: block; }
  .classes__table colgroup, .classes__table thead { display: none; }
  .classes__table tbody { display: grid; gap: 6px; }
  .classes__table tbody tr { padding: 16px 20px 18px; background: var(--paper-2); }
  .classes__table tbody tr:nth-child(even) { background: var(--surface); }
  .fg .classes__table tbody th, .fg .classes__table tbody td { padding: 0; background: none !important; }
  .classes__table tbody th { margin-bottom: 0.6rem; }
  .classes__table tbody td { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 0 1rem; padding: 0.35rem 0; }
  .classes__table tbody td::before { content: attr(data-plan); color: var(--ink-soft); font-weight: 500; }
  .classes__table .classes__actions { padding-top: 16px; }
  .classes__table .classes__actions th { display: none; }
  .classes__table .classes__actions td { grid-template-columns: 1fr; }
  .classes__table .classes__actions td::before { display: none; }
  .classes__table .classes__actions .btn { max-width: none; }
  .classes__price small { display: inline; margin-left: 0.4em; }
}

/* =========================================================
   7. Tools: a statement, the table pushed right
   ========================================================= */
.tools__h2 { font-size: var(--step-display); line-height: 0.98; letter-spacing: var(--display-tracking); }
.tools__h2 .tools__indent { display: inline-block; padding-left: 3vw; }
.tools__body { display: grid; gap: 3rem; margin-top: clamp(3rem, 6vw, 6rem); }
.tools__word { font-size: var(--step-small); color: var(--ink-muted); align-self: start; }
.tools__table { width: 100%; border-collapse: collapse; }
.tools__table th, .tools__table td { text-align: left; vertical-align: baseline; padding: 0 0 26px; font-weight: 400; font-size: var(--step-body); line-height: 1.35; }
.tools__table tbody tr:nth-child(4n+1):not(:first-child) th, .tools__table tbody tr:nth-child(4n+1):not(:first-child) td { padding-top: 44px; }
.tools__table th { color: var(--ink-soft); width: 32%; padding-right: 1rem; }
.tools__table td.tools__name { width: 30%; padding-right: 1rem; }
.tools__table td.tools__what { text-align: right; color: var(--ink); }
.tools__photo { align-self: start; }
.tools__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 1000px) {
  .tools__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .tools__photo { grid-column: 1 / 6; width: 100%; max-width: 440px; align-self: start; }
  .tools__word { display: none; }
  .tools__table { grid-column: 8 / 13; }
  .tools__table thead th { padding-bottom: 26px; }
}
@media (max-width: 999px) {
  .tools__h2 .tools__indent { padding-left: 0; }
  .tools__word { display: none; }
  .tools__table th, .tools__table td { display: block; padding: 0; }
  .tools__table tr { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; padding-bottom: 22px; }
  .tools__table th { grid-column: 1; width: auto; }
  .tools__table td.tools__name { grid-column: 1; width: auto; }
  .tools__table td.tools__what { grid-column: 2; grid-row: 1 / 3; align-self: start; text-align: right; max-width: 40%; font-size: var(--step-small); }
  .tools__photo { width: 60%; margin-left: auto; }
}

/* =========================================================
   8. About: the portrait as a drop capital
   ========================================================= */
.about { padding-block: clamp(5rem, 9vw, 9rem); }
.about__grid { display: grid; gap: 2rem; }
.about__facts { display: grid; gap: 0.75rem; align-content: start; font-size: var(--step-small); color: var(--ink-soft); }
.about__facts li { display: grid; gap: 0.15rem; }
.about__facts b { font-weight: 500; color: var(--ink); }
.about__text { font-family: var(--font-display); font-weight: 400; font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.005em; max-width: none; }
.about__text b { font-weight: 500; }
.about__text + .about__text { margin-top: 1em; color: var(--ink-soft); }
.about__portrait { float: left; width: 3.6em; height: 3.6em; object-fit: cover; object-position: 50% 20%; margin: 0.12em 0.5em 0.2em 0; }
@media (min-width: 1000px) {
  .about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .about__facts { grid-column: 1 / 3; padding-top: 0.5rem; }
  .about__body { grid-column: 3 / 13; }
}
@media (max-width: 999px) {
  .about__facts { order: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
  .about__text { line-height: 1.25; }
  .about__portrait { width: 110px; height: 110px; }
}

/* =========================================================
   9. The close: the idea again, inverted
   ========================================================= */
.fg-ink-field { background: var(--field-ink); color: var(--on-ink); }
.close { min-height: 90svh; display: grid; grid-template-rows: 1fr auto; padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: calc(40px + 10rem); }
.close__h2 { font-size: clamp(2.6rem, 9.4vw, 9rem); line-height: 0.9; letter-spacing: -0.035em; color: var(--on-ink); max-width: none; margin-left: -0.04em; }
.close__row { display: grid; gap: 1.5rem; align-items: end; }
.close__sentence { font-size: var(--step-lead); line-height: 1.35; max-width: 36ch; color: var(--on-ink-soft); }
.close .btn { background: var(--forest); color: var(--on-forest); min-height: 56px; justify-self: start; }
.close :focus-visible { outline-color: var(--on-ink); }
@media (min-width: 1000px) {
  .close__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .close__sentence { grid-column: 1 / 6; }
  .close .btn { grid-column: 10 / 13; justify-self: end; }
}
@media (max-width: 999px) {
  .close { min-height: 80svh; padding-bottom: 5rem; }
  .close__h2 { font-size: clamp(2.1rem, 9vw, 5rem); }
  .close .btn { width: 100%; justify-self: stretch; }
}
[data-theme="dark"] .close .btn { background: var(--forest); color: var(--on-forest); }

/* =========================================================
   Motion layer: entrances, once, in reading order
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .anim [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .anim [data-reveal].is-in { opacity: 1; transform: none; }
  .anim [data-rise] { opacity: 0; transform: translateY(18px); animation: fg-rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 160ms); }
  @supports (animation-timeline: view()) {
    .anim .fg-drift img { animation: fg-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes fg-rise { to { opacity: 1; transform: none; } }
@keyframes fg-drift { from { transform: translateY(-3%) scale(1.06); } to { transform: translateY(3%) scale(1.06); } }

/* Inline links keep their line but reach a 44px touch target. */
.fg .now__list a, .fg .masthead__actions .text-link, .fg .masthead__quiet a,
.fg .explorer__text .text-link, .fg .tools__name .text-link, .fg .lens__link, .fg .lens-page__close a,
.fg .lens-band__after .text-link, .fg .classes__table .text-link {
  display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem;
}

/* Print: everything visible, nothing sticky */
@media print {
  .fg .site-header, .fg .site-footer { position: static; }
  .fg [data-reveal], .fg [data-rise] { opacity: 1 !important; transform: none !important; }
}