/* ============================================================
   GrowTricity · "Signal from noise" visual system
   All design values live in the custom properties below.
   Responsive behaviour uses container queries on .viewport
   (container width == viewport width; in production these can
   be transcribed 1:1 to @media queries at the same breakpoints).
   ============================================================ */

:root {
  /* -- colour -- */
  --ink: #161310;            /* warm black — primary surface + text  */
  --ink-soft: #3B362E;
  --ink-muted: #5A544A;      /* smallest text colour, AA on paper    */
  --paper: #F3EDE3;          /* cream — retained brand recognition   */
  --paper-deep: #EAE2D3;     /* secondary cream surface              */
  --cream-on-ink: #CFC7B8;   /* body text on ink                     */
  --signal: #F05A28;         /* orange — the signal. AA on ink.      */
  --line: rgba(22, 19, 16, 0.16);        /* hairline on paper        */
  --line-strong: rgba(22, 19, 16, 0.75);
  --line-on-ink: rgba(243, 237, 227, 0.18);

  /* -- typography -- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-data: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --size-display-1: clamp(46px, 6.4cqw, 88px);
  --size-display-2: clamp(34px, 4.2cqw, 56px);
  --size-h3: clamp(22px, 2cqw, 27px);
  --size-body-lg: clamp(18px, 1.5cqw, 21px);
  --size-body: 17px;
  --size-data: 15px;
  --size-data-sm: 14px;   /* absolute minimum anywhere in the system */
  --track-display: -0.025em;
  --leading-body: 1.55;

  /* -- spacing -- */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 140px;
  --section-y: clamp(72px, 9cqw, 140px);
  --gutter: clamp(20px, 4.5cqw, 72px);
  --measure: 62ch;
  --content-max: 1296px;

  /* -- borders + radii -- */
  --border-hairline: 1px solid var(--line);
  --border-structural: 2px solid var(--ink);
  --border-signal: 3px solid var(--signal);
  --radius: 0px;              /* the system is square               */
  --radius-interactive: 2px;  /* buttons/inputs only                */

  /* -- shadows: none. Rules and surface shifts carry depth. -- */

  /* -- motion -- */
  --dur-fast: 150ms;
  --dur: 400ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--ink);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--signal); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: var(--radius-interactive); }
.on-ink :focus-visible { outline-color: var(--paper); }

.viewport {
  container-type: inline-size;
  container-name: viewport;
  width: 100%;
  margin: 0 auto;
  background: var(--paper);
  overflow-x: clip;   /* guarantees no horizontal overflow */
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--signal); color: var(--ink);
  padding: 12px 20px; font-weight: 600; z-index: 50;
}
.skip-link:focus { left: 12px; top: 12px; }

.shell { max-width: var(--content-max); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- shared type roles ---------- */
.display-1 { font-family: var(--font-display); font-size: var(--size-display-1); font-weight: 700; letter-spacing: var(--track-display); line-height: 1.02; text-wrap: balance; }
.display-2 { font-family: var(--font-display); font-size: var(--size-display-2); font-weight: 700; letter-spacing: var(--track-display); line-height: 1.06; text-wrap: balance; }
.data, .kicker { font-family: var(--font-data); font-size: var(--size-data); font-weight: 500; }
.kicker { text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.on-ink .kicker { color: var(--cream-on-ink); }
.lede { font-size: var(--size-body-lg); max-width: var(--measure); text-wrap: pretty; }

/* section header: index number + kicker over a hairline */
.section-head { display: flex; align-items: baseline; gap: var(--space-2); border-top: var(--border-structural); padding-top: var(--space-2); margin-bottom: var(--space-5); }
.section-head .idx { font-family: var(--font-data); font-size: var(--size-data); font-weight: 500; color: var(--signal); }
.on-ink .section-head { border-top-color: var(--paper); }
section > .shell > .display-2 { margin-bottom: var(--space-3); max-width: 22ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  padding: 16px 26px; border-radius: var(--radius-interactive);
  text-decoration: none; border: 2px solid var(--ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn .arrow { width: 20px; height: 20px; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--ink-soft); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.on-ink .btn-primary { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.on-ink .btn-primary:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.on-ink .btn-ghost { border-color: var(--paper); color: var(--paper); }
.on-ink .btn-ghost:hover { background: var(--paper); color: var(--ink); }
.text-link { font-weight: 600; font-size: var(--size-body); display: inline-flex; align-items: center; gap: 8px; }
.text-link .arrow { width: 18px; height: 18px; color: var(--signal); }

/* ---------- header + nav ---------- */
.site-header { background: var(--ink); color: var(--paper); border-bottom: 3px solid var(--signal); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 18px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.site-header .brand-lockup .brand-spark { width: 40px; height: 40px; flex: none; }
.site-header .brand-lockup .brand-wordmark { width: auto; height: 40px; flex: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.site-nav a { text-decoration: none; font-weight: 600; font-size: 17px; color: var(--paper); }
.site-nav a:hover { color: var(--signal); }
.site-nav .btn { padding: 12px 20px; font-size: 16px; }
.nav-toggle { display: none; background: none; border: 2px solid var(--paper); border-radius: var(--radius-interactive); color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 16px; padding: 10px 16px; cursor: pointer; }

/* facts strip under the header */
.facts-strip { background: var(--ink); color: var(--cream-on-ink); border-bottom: 1px solid var(--line-on-ink); }
.facts-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 0; padding-block: 12px; font-family: var(--font-data); font-size: var(--size-data-sm); }
.facts-strip li { display: flex; align-items: center; }
.facts-strip li + li::before { content: ""; width: 6px; height: 6px; background: var(--signal); margin-inline: 16px; flex: none; }

/* ---------- hero ---------- */
.hero { padding: 0; background: var(--ink); color: var(--paper); }
.hero .grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-5); align-items: center; padding-block: clamp(32px, 3cqw, 44px); }
.hero .display-1 { font-size: clamp(42px, 4.9cqw, 70px); }
.hero .kicker { margin-bottom: var(--space-3); }
.hero-meta { display: none; }
.hero p { color: var(--cream-on-ink); margin-top: var(--space-3); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.hero .hero-reassurance { max-width: 58ch; font-size: 15px; margin-top: var(--space-2); }
/* Visually hidden, still read by screen readers. The hero form labels use it. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- hero actions: booking CTA + call-back form in one band ---------- */
.hero-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.hero-actions .cta-row { margin-top: 0; flex: 0 0 auto; }
.hero-lead { flex: 1 1 24rem; min-width: 0; }
.hero-lead-note { margin-top: 0 !important; margin-bottom: 6px; font-size: 14px; }
.hero-lead-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-lead-row input[type="text"],
.hero-lead-row input[type="tel"] {
  flex: 1 1 6rem; min-width: 0; padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--paper); border: 2px solid var(--paper);
  border-radius: var(--radius-interactive);
}
/* The phone hint is the longer string, so it gets the spare room. */
.hero-lead-row input[type="tel"] { flex-grow: 1.5; }
.hero-lead-row input::placeholder { color: var(--ink-muted); opacity: 1; }
.hero-lead-row input:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
/* Compact so the two fields and the action stay on one row beside the CTA. */
.hero-lead-row .btn { flex: 0 0 auto; font-size: 16px; padding: 13px 18px; }
/* Honeypot. Off-screen rather than display:none so bots still fill it. */
.hero-lead-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hero-lead-status { min-height: 1.2em; margin-top: 6px !important; font-size: 14px; font-weight: 600; }
.hero-lead-status a { color: var(--signal); font-weight: 700; }

.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: var(--space-4); border-top: 1px solid var(--line-on-ink); padding-top: var(--space-2); font-family: var(--font-data); font-size: var(--size-data); color: var(--cream-on-ink); }
.hero-facts li { display: flex; align-items: center; }
.hero-facts li + li::before { content: ""; width: 6px; height: 6px; background: var(--signal); margin-inline: 14px; flex: none; }
.hero-art img { width: 100%; height: auto; }

/* ---------- generic section rhythm ---------- */
.section { padding-block: var(--section-y); }
.section.on-ink { background: var(--ink); color: var(--paper); }
.section.deep { background: var(--paper-deep); }

/* ---------- ledger (stage overview + level detail) ---------- */
.ledger { border-top: var(--border-structural); margin-top: var(--space-5); }
.ledger-row {
  display: grid; grid-template-columns: 90px minmax(0, 5fr) minmax(0, 6fr) minmax(0, 4fr) 56px;
  gap: var(--space-3); align-items: baseline;
  padding-block: var(--space-4); border-bottom: var(--border-hairline);
  color: inherit; text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
a.ledger-row:hover { background: var(--paper-deep); color: inherit; }
a.ledger-row:hover .row-arrow { color: var(--signal); transform: translateX(4px); }
.ledger-row .num { font-family: var(--font-data); font-size: clamp(28px, 2.6cqw, 40px); font-weight: 500; color: var(--signal); }
.ledger-row h3 { font-family: var(--font-display); font-size: var(--size-h3); font-weight: 700; letter-spacing: -0.01em; }
.ledger-row .tag { font-family: var(--font-data); font-size: var(--size-data-sm); color: var(--ink-muted); display: block; margin-bottom: 8px; }
.ledger-row .tag.required::before { content: "●"; color: var(--signal); margin-right: 8px; }
.ledger-row p { max-width: 46ch; text-wrap: pretty; }
.ledger-row .meta { font-family: var(--font-data); font-size: var(--size-data); }
.ledger-row .meta strong { display: block; font-size: 19px; font-weight: 500; margin-bottom: 4px; }
.row-arrow { width: 26px; height: 26px; color: var(--ink); align-self: center; transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ledger-note { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: var(--space-3); font-family: var(--font-data); font-size: var(--size-data-sm); color: var(--ink-muted); }
.ledger-note li { display: flex; align-items: center; list-style: none; }
.ledger-note li + li::before { content: ""; width: 6px; height: 6px; background: var(--signal); margin-inline: 14px; flex: none; }
.after-ledger { margin-top: var(--space-5); }

/* ---------- principles (why it begins differently) ---------- */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); margin-top: var(--space-6); }
.principle { border-top: var(--border-signal); padding-top: var(--space-2); }
.principle .num { font-family: var(--font-data); font-size: var(--size-data); color: var(--ink-muted); }
.section.on-ink .principle .num { color: var(--cream-on-ink); }
.principle h3 { font-size: var(--size-h3); font-weight: 700; margin: 10px 0 12px; letter-spacing: -0.01em; }
.principle p { text-wrap: pretty; }
.section.on-ink .principle p { color: var(--cream-on-ink); }
.objection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- free-class path ---------- */
.preview-path { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-7); align-items: start; }
.preview-cta { margin-top: var(--space-5); }
.preview-steps { list-style: none; counter-reset: preview-step; border-top: var(--border-structural); }
.preview-steps li { counter-increment: preview-step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px var(--space-2); padding-block: var(--space-3); border-bottom: var(--border-hairline); }
.preview-steps li::before { content: counter(preview-step, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-data); font-size: var(--size-data); color: var(--signal); }
.preview-steps strong { font-size: 20px; }
.preview-steps span { color: var(--ink-muted); }

/* ---------- programme summary ---------- */
.programme-total { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 5fr); gap: var(--space-3); align-items: baseline; margin-top: var(--space-4); padding: var(--space-4); border: var(--border-structural); background: var(--paper); }
.programme-total p { margin: 0; }
.programme-total strong { font-size: 20px; }

/* ---------- lower detail ---------- */
.detail-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.detail-pair > div { border-top: var(--border-signal); padding-top: var(--space-3); }
.detail-pair h3 { font-size: var(--size-h3); }
.detail-pair p { margin: var(--space-2) 0 var(--space-3); max-width: 48ch; }
.after-cta { margin-top: var(--space-3); }
.after-cta .text-link { color: var(--paper); }

/* ---------- business strip ---------- */
.biz-strip { border: var(--border-structural); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4); margin-top: var(--space-6); }
.biz-strip p { font-size: var(--size-body-lg); font-weight: 600; max-width: 40ch; text-wrap: balance; }

/* ---------- founder ---------- */
.founder .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.founder figure img { width: 100%; height: auto; object-fit: cover; border: var(--border-structural); }
.founder figcaption { font-family: var(--font-data); font-size: var(--size-data-sm); color: var(--ink-muted); margin-top: 10px; }
.founder p { max-width: var(--measure); margin-top: var(--space-3); text-wrap: pretty; }
.founder-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); border-top: var(--border-hairline); padding-top: var(--space-3); }
.founder-stats .stat strong { display: block; font-family: var(--font-display); font-size: clamp(24px, 2.2cqw, 32px); font-weight: 700; letter-spacing: -0.015em; }
.founder-stats .stat span { font-family: var(--font-data); font-size: var(--size-data-sm); color: var(--ink-muted); }
.founder .text-link { margin-top: var(--space-4); }

/* ---------- method ---------- */
.method-steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-6); border-left: var(--border-hairline); }
.method-steps li { list-style: none; counter-increment: step; border-right: var(--border-hairline); padding: var(--space-3); }
.method-steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-data); font-size: var(--size-data); color: var(--signal); display: block; margin-bottom: var(--space-2); }
.method-steps h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.section.on-ink .method-steps { border-color: var(--line-on-ink); }
.section.on-ink .method-steps li { border-color: var(--line-on-ink); }

/* ---------- FAQ ---------- */
.faq-list { border-top: var(--border-structural); margin-top: var(--space-5); max-width: 900px; }
.faq-list details { border-bottom: var(--border-hairline); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block: var(--space-3); font-family: var(--font-display); font-size: var(--size-h3); font-weight: 600; letter-spacing: -0.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .mark { flex: none; width: 30px; height: 30px; position: relative; }
.faq-list summary .mark::before, .faq-list summary .mark::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--signal); }
.faq-list summary .mark::before { width: 18px; height: 3px; }
.faq-list summary .mark::after { width: 3px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
.faq-list details[open] summary .mark::after { transform: scaleY(0); }
.faq-list details p { padding-bottom: var(--space-3); max-width: var(--measure); color: var(--ink-soft); text-wrap: pretty; }

/* ---------- final CTA ---------- */
.final-cta { text-align: left; }
.final-cta .signal-art { width: min(560px, 70%); margin-bottom: var(--space-5); }
.final-cta .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.final-cta p { color: var(--cream-on-ink); max-width: var(--measure); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--cream-on-ink); border-top: 3px solid var(--signal); padding-block: var(--space-7) var(--space-5); }
.site-footer .top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); }
.site-footer .brand img { height: 28px; width: auto; }
.site-footer .brand .wordmark { width: 236px; height: auto; color: var(--paper); }
.site-footer .brand .tagline { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--paper); margin-top: var(--space-3); letter-spacing: -0.015em; }
.site-footer .brand p { margin-top: var(--space-2); max-width: 34ch; text-wrap: pretty; }
.site-footer .brand .text-link { color: var(--paper); margin-top: var(--space-3); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.footer-cols h3 { font-family: var(--font-data); font-size: var(--size-data-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--paper); margin-bottom: var(--space-2); }
.footer-cols ul { list-style: none; display: grid; gap: 10px; }
.footer-cols a { text-decoration: none; font-size: 16px; }
.footer-cols a:hover { color: var(--signal); }
.site-footer .backing { border-top: 1px solid var(--line-on-ink); margin-top: var(--space-6); padding-top: var(--space-4); font-size: 16px; max-width: 88ch; text-wrap: pretty; }
.site-footer .backing strong { color: var(--paper); }
.site-footer .legal { border-top: 1px solid var(--line-on-ink); margin-top: var(--space-4); padding-top: var(--space-3); font-family: var(--font-data); font-size: var(--size-data-sm); line-height: 1.7; }
.site-footer .legal a { color: var(--paper); }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Smallest supported phones: the headline wraps to six lines at 42px, which
   pushes the call-back form out of the first viewport. Step the hero type down
   so the offer, the date, the place and both asks still fit without scrolling. */
@media (max-width: 360px) {
  .hero .display-1 { font-size: 34px; }
  .hero .lede { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   MOBILE — one breakpoint at 720px (container width)
   ============================================================ */
@media (max-width: 720px) {
  .site-nav { display: none; }
  .site-nav.open { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-bottom: 3px solid var(--signal); padding: var(--space-3) var(--gutter) var(--space-4); gap: var(--space-3); z-index: 40; }
  .site-nav.open a { font-size: 20px; }
  .nav-toggle { display: inline-block; }
  .site-header .bar { position: relative; }
  .site-header { position: relative; }
  .site-header .brand-lockup { gap: 8px; }
  .site-header .brand-lockup .brand-spark { width: 36px; height: 36px; }
  .site-header .brand-lockup .brand-wordmark { height: 34px; }

  /* The strip costs a whole band of vertical space on a phone, so it is hidden
     here. The phone-only .hero-meta line below therefore has to carry the
     in-person, location and start-date facts. Do not drop "In person" from it. */
  .facts-strip { display: none; }

  .hero .grid { grid-template-columns: 1fr; gap: var(--space-4); padding-block: 20px 48px; }
  .hero .kicker { margin-top: var(--space-2); margin-bottom: var(--space-2); }
  .hero .lede { margin-top: 12px; }
  .hero-meta { display: block; margin-top: 4px !important; margin-bottom: 8px;
    font-family: var(--font-data); font-size: 13px; line-height: 1.4; color: var(--cream-on-ink); }
  .hero-art { display: none; }
  .hero .cta-row { margin-top: var(--space-3); }
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 13px; }
  .hero-facts li + li::before { display: none; }
  .cta-row .btn { width: 100%; justify-content: center; }
  /* On a phone the booking button and the call-back form must both sit in the
     first viewport, so the reassurance line (repeated in section 01) gives way. */
  .hero .hero-reassurance { display: none; }
  .hero-actions { flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
  .hero-actions .cta-row, .hero-lead { width: 100%; flex: 0 0 auto; }
  /* Overrides .hero .cta-row above, which would otherwise re-add a 24px gap
     and push the form's submit button out of the first viewport. */
  .hero-actions .cta-row { margin-top: 0; }
  /* Name and mobile share one row so the submit still lands above the fold. */
  .hero-lead-row input[type="text"],
  .hero-lead-row input[type="tel"] { flex: 1 1 8rem; }
  .hero-lead-row .btn { width: 100%; justify-content: center; }

  .ledger-row { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto; row-gap: var(--space-2); }
  .ledger-row .num { grid-row: 1 / span 3; }
  .ledger-row p, .ledger-row .meta { grid-column: 2; }
  .row-arrow { display: none; }

  .principles, .objection-grid { grid-template-columns: 1fr; }
  .preview-path { grid-template-columns: 1fr; gap: var(--space-5); }
  .preview-cta { width: 100%; justify-content: center; }
  .programme-total { grid-template-columns: 1fr; }
  .detail-pair { grid-template-columns: 1fr; gap: var(--space-5); }
  .biz-strip { grid-template-columns: 1fr; }
  .biz-strip .btn { width: 100%; justify-content: center; }
  .founder .grid { grid-template-columns: 1fr; }
  .method-steps { grid-template-columns: 1fr; border-left: none; border-top: var(--border-hairline); }
  .method-steps li { border-right: none; border-bottom: var(--border-hairline); padding-inline: 0; }
  .section.on-ink .method-steps li { border-color: var(--line-on-ink); }
  .faq-list summary { font-size: 20px; }
  .site-footer .top { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .final-cta .signal-art { width: 100%; }
}