/* 00-tokens.css - the only file allowed to define a token or write a hex value.
   Names and values come from runs/site-rebuild/2026-09-18/refs/DESIGN.md front matter.
   Every other partial reads these with var(); rgba() overlays are the one exception.
   (90-print.css re-points the same colour tokens for paper output. That is the
   single documented exception and it adds no new token names.) */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plexmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;

  /* ---- colors: surface */
  --ink: #14171A;
  --ink-2: #1F2429;
  --ink-3: #181C20;
  --line: #2A3036;
  --line-strong: #3A424A;
  --paper: #F4F1EC;

  /* ---- colors: text */
  --text: #D3D1CD;
  --muted: #C9CDD2;
  --subtle: #9AA1A9;

  /* ---- colors: accent. signal is a fill and never text. */
  --signal: #B4530A;
  --signal-hover: #C75D0D;
  --signal-light: #F0A060;
  --on-signal: #FFFFFF;
  --on-paper: #14171A;
  /* button-light hover only: DESIGN.md "hover lifts the fill to #FFFFFF" */
  --paper-lift: #FFFFFF;

  /* ---- families */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ---- type scale. Each role is size / line-height / tracking.
     Fluid sizes interpolate from the 390px column to the 1440px column. */
  --fs-display: clamp(2.5rem, 1.757rem + 3.048vw, 4.5rem);
  --lh-display: 1.02;
  --ls-display: -.03em;

  --fs-h1: clamp(2.125rem, 1.614rem + 2.095vw, 3.5rem);
  --lh-h1: 1.08;
  --ls-h1: -.025em;

  --fs-h2: clamp(1.625rem, 1.393rem + .952vw, 2.25rem);
  --lh-h2: 1.15;
  --ls-h2: -.02em;

  --fs-h3: clamp(1.25rem, 1.204rem + .19vw, 1.375rem);
  --lh-h3: 1.25;
  --ls-h3: -.01em;

  --fs-lead: clamp(1.1875rem, 1.118rem + .286vw, 1.375rem);
  --lh-lead: 1.5;
  --ls-lead: 0;

  --fs-body: clamp(1.0625rem, 1.039rem + .095vw, 1.125rem);
  --lh-body: 1.65;
  --ls-body: 0;

  --fs-small: .9375rem;
  --lh-small: 1.5;
  --ls-small: 0;

  --fs-label: .8125rem;
  --lh-label: 1.2;
  --ls-label: .08em;

  --fs-meta: .8125rem;
  --lh-meta: 1.4;
  --ls-meta: .04em;

  --fs-price: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem);
  --lh-price: 1;
  --ls-price: -.01em;

  --fs-price-inline: 1.25rem;
  --lh-price-inline: 1;
  --ls-price-inline: -.01em;

  --fs-button: 1rem;
  --lh-button: 1;
  --ls-button: .01em;

  --fs-mono-body: .9375rem;
  --lh-mono-body: 1.6;
  --ls-mono-body: 0;

  /* ---- spacing, base 4 */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section-sm: 64px;
  --space-section: 96px;
  --space-section-lg: 128px;
  --space-page: 160px;

  /* ---- radius. Two values, no exceptions. */
  --radius-control: 4px;
  --radius-surface: 8px;
  /* short aliases the home, product and content partials already use */
  --r-sm: var(--radius-control);
  --r: var(--radius-surface);

  /* ---- elevation.
     0 none. 1 = ink-2 fill + 1px line. 2 = ink-2 fill + 1px line-strong.
     3 = paper fill + the one real shadow. 4 = the focus ring. */
  --shadow-sheet: 0 24px 48px -24px rgba(0, 0, 0, .6);
  --shadow-pop: 0 24px 48px -16px rgba(0, 0, 0, .7);
  --sheet-shadow: var(--shadow-sheet);
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ---- motion. Color, opacity and transform only. Never `all`. */
  --dur-fast: .15s;
  --dur: .2s;
  --dur-slow: .3s;
  --ease-out: ease-out;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* ---- layout */
  --gutter: 20px;
  --max: 1200px;
  --read: 680px;
  --header: 64px;
  --anchor-offset: 88px;
}

@media (min-width: 640px) { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; } }
/* 10-base.css - reset, base typography, the container, the small text roles,
   focus and selection, and the global reduced-motion switch. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--anchor-offset); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } @view-transition { navigation: auto; } }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 var(--fs-body)/var(--lh-body) var(--body); letter-spacing: var(--ls-body); text-wrap: pretty; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(240, 160, 96, .2); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--paper); text-wrap: balance; margin: 0; }
h1 { font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
p { margin: 0; }
a { color: var(--signal-light); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--paper); }
strong, b { font-weight: 600; color: var(--paper); }
a strong, a b { color: inherit; }
:focus-visible { outline: var(--focus-width) solid var(--signal-light); outline-offset: var(--focus-offset); border-radius: 2px; }
/* no 300ms double-tap-zoom wait on anything you can tap */
a, button, summary, label, [role="button"] { touch-action: manipulation; }
::selection { background: var(--signal); color: var(--on-signal); }
/* One anchor offset only. `html { scroll-padding-top }` above already insets every
   scroll-into-view by --anchor-offset; a matching scroll-margin-top on [id] stacked
   on top of it and landed deep links 176px down. */

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--subtle); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--muted); max-width: 56ch; }
.eyebrow { font: 600 var(--fs-label)/var(--lh-label) var(--display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--signal-light); margin-bottom: var(--space-md); }
.eyebrow.mono { font-family: var(--mono); font-weight: 500; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.textlink { color: var(--paper); font-family: var(--display); font-weight: 600; text-decoration: none; display: inline-flex; gap: var(--space-xs); align-items: baseline; }
.textlink::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.textlink:hover { color: var(--signal-light); }
.textlink:hover::after { transform: translateX(3px); }

/* Nothing animates for a reader who asked for no motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 20-chrome.css - the furniture that wraps every page: skip link, sticky header,
   wordmark, top nav and its dropdowns, the mobile menu sheet, the footer band,
   and the image lightbox. */

.skip { position: absolute; left: var(--space-xs); top: -64px; z-index: 100; background: var(--paper); color: var(--on-paper); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); text-decoration: none; font: 600 var(--fs-button)/var(--lh-button) var(--display); min-height: 44px; display: inline-flex; align-items: center; }
.skip:focus { top: var(--space-xs); }

/* ---------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(20, 23, 26, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease-out); }
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header__in { display: flex; align-items: center; justify-content: space-between; min-height: var(--header); gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; color: var(--paper); text-decoration: none; font: 700 1.125rem/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { color: var(--paper); }

/* ---------- menu button (below 1024) */
.menu-btn { display: none; align-items: center; gap: var(--space-sm); background: none; border: 1px solid var(--line); color: var(--paper); font: 600 var(--fs-button)/var(--lh-button) var(--display); letter-spacing: var(--ls-button); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-control); cursor: pointer; touch-action: manipulation; transition: border-color var(--dur-fast) var(--ease-out); }
.menu-btn:hover { border-color: var(--line-strong); }
.menu-btn__icon { position: relative; width: 16px; height: 10px; flex: none; }
.menu-btn__icon::before, .menu-btn__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--dur) var(--ease-out); }
.menu-btn__icon::before { top: 0; }
.menu-btn__icon::after { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(-4px) rotate(-45deg); }

/* ---------- nav */
.nav { display: flex; align-items: center; gap: var(--space-lg); }
.nav__list { display: flex; align-items: center; gap: var(--space-xxs); list-style: none; margin: 0; padding: 0; }
.nav__list > li { position: relative; }
.nav__list > li > a, .nav__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-sm); color: var(--muted); background: none; border: 0; font: 400 var(--fs-button)/var(--lh-button) var(--body); text-decoration: none; cursor: pointer; border-radius: var(--radius-control); white-space: nowrap; touch-action: manipulation; transition: color var(--dur-fast) var(--ease-out); }
.nav__list > li > a:hover, .nav__toggle:hover, .nav__toggle[aria-expanded="true"] { color: var(--paper); }
.nav__list a[aria-current="page"] { color: var(--paper); box-shadow: inset 0 -2px 0 var(--signal-light); border-radius: 0; }
.nav__toggle::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur) var(--ease); }
.nav__toggle[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }
.nav__sub { list-style: none; margin: 0; padding: var(--space-xs); position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-surface); box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); }
.nav__toggle[aria-expanded="true"] + .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: flex; justify-content: space-between; gap: var(--space-lg); padding: 10px var(--space-sm); min-height: 44px; align-items: center; color: var(--paper); text-decoration: none; border-radius: var(--radius-control); }
.nav__sub a:hover { background: rgba(255, 255, 255, .06); }
.nav__sub .mono { color: var(--subtle); }
.nav__cta { min-height: 40px; padding: 0 var(--space-md); font-size: var(--fs-small); }

/* keep the six top-level items on one line in the 1024 to 1200 band */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header__in { gap: var(--space-md); }
  .nav { gap: var(--space-md); }
  .nav__list > li > a, .nav__toggle { padding: 0 10px; }
}

/* ---------- mobile menu sheet */
@media (max-width: 1023px) {
  /* the sheet is position:fixed inside the header, so the header may not carry
     backdrop-filter here: a filtered ancestor becomes the containing block for
     fixed children and collapses the sheet to the height of the bar. */
  .site-header { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .menu-btn { display: inline-flex; }
  .nav { position: fixed; inset: var(--header) 0 0 0; background: var(--ink-2); flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-md) var(--gutter) calc(var(--space-xl) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease), visibility var(--dur); }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__list > li > a, .nav__toggle { width: 100%; justify-content: space-between; min-height: 56px; padding: 0; color: var(--paper); font: 600 1.1875rem/1 var(--display); }
  .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: none; padding: 0 0 var(--space-sm); display: none; }
  .nav__toggle[aria-expanded="true"] + .nav__sub { display: block; }
  .nav__sub a { padding-inline: 0; color: var(--muted); }
  .nav__cta { margin-top: var(--space-lg); min-height: 52px; font-size: var(--fs-button); }
  body.menu-open { overflow: hidden; }
}

/* ---------- footer */
.site-footer { border-top: 1px solid var(--line); padding: var(--space-xxl) 0 40px; background: var(--ink-3); }
@media (min-width: 640px) { .site-footer { padding-top: 72px; } }
.site-footer__top { display: grid; gap: 40px; }
.site-footer__brand .brand { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem); font-weight: 700; letter-spacing: -.02em; white-space: normal; max-width: 12ch; line-height: 1.08; }
.site-footer__brand p { margin-top: var(--space-md); color: var(--muted); font-size: var(--fs-button); line-height: 1.55; max-width: 40ch; }
.site-footer__brand .small { color: var(--subtle); font-size: var(--fs-small); }
.site-footer h2 { font: 600 var(--fs-label)/var(--lh-label) var(--display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--subtle); margin-bottom: var(--space-md); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col a { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; padding: 10px 0; min-height: 44px; color: var(--paper); text-decoration: none; font-size: var(--fs-button); line-height: 1.4; }
.site-footer__col a:hover { color: var(--signal-light); }
.site-footer__col .mono { color: var(--subtle); font-size: .875rem; }
.site-footer__legal { margin-top: 56px; padding-top: var(--space-lg); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); justify-content: space-between; font-size: var(--fs-small); color: var(--subtle); }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-xxs) var(--space-lg); }
.site-footer__legal a { color: var(--subtle); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.site-footer__legal a:hover { color: var(--paper); }
@media (min-width: 900px) { .site-footer__top { grid-template-columns: 4fr 2fr 2fr 4fr; gap: var(--space-xxl); } }
@media (max-width: 639px) { .site-footer__brand > .brand { display: inline-flex; align-items: center; min-height: 44px; } }
/* The inline links in the footer sentence, and any mailto anywhere, need a 44px
   target at every width. Vertical padding on an inline box grows the hit area
   without growing the line box, so nothing on the page moves. */
.site-footer__brand p a, a[href^="mailto:"] { padding-block: 13px; }

/* ---------- lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); max-height: 94dvh; overscroll-behavior: contain; }
.lightbox::backdrop { background: rgba(10, 12, 14, .88); }
.lightbox img { max-height: 88dvh; width: auto; border-radius: var(--radius-surface); background: var(--paper); }
.lightbox__close { position: fixed; top: var(--space-md); right: var(--space-md); min-height: 44px; padding: 0 var(--space-md); background: var(--ink-2); color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-control); font: 600 var(--fs-small)/1 var(--display); cursor: pointer; touch-action: manipulation; }
.lightbox__close:hover { border-color: var(--line-strong); }
/* 30-components.css - the shared components: buttons, the email form, the
   list row, the cross-sell strip and the one scroll reveal. */

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-control); border: 1px solid transparent; font: 600 var(--fs-button)/var(--lh-button) var(--display); letter-spacing: var(--ls-button); text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn--buy, .btn:not(.btn--ghost):not(.btn--light) { background: var(--signal); color: var(--on-signal); }
.btn--buy:hover, .btn:not(.btn--ghost):not(.btn--light):hover { background: var(--signal-hover); color: var(--on-signal); }
.btn--light { background: var(--paper); color: var(--on-paper); }
.btn--light:hover { background: var(--paper-lift); color: var(--on-paper); }
.btn--ghost { background: transparent; color: var(--paper); border-color: rgba(244, 241, 236, .4); }
.btn--ghost:hover { border-color: var(--paper); color: var(--paper); }
.btn--lg { min-height: 56px; padding-inline: var(--space-xl); font-size: 1.0625rem; }
.btn .mono { font-weight: 500; opacity: .8; }
@media (max-width: 639px) { .btn { min-height: 52px; } }

/* ---------- email form */
.notify { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: var(--space-lg); align-items: end; }
.notify h2, .notify h3 { font-size: 1.375rem; }
.notify p { margin-top: var(--space-sm); color: var(--muted); font-size: var(--fs-button); line-height: 1.55; max-width: 60ch; }
@media (min-width: 900px) { .notify { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-section-sm); } }
.subscribe__label { display: block; font-size: var(--fs-small); color: var(--subtle); margin-bottom: var(--space-xs); }
.subscribe__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.subscribe input[type="email"] { flex: 1 1 220px; min-height: 48px; padding: 0 var(--space-md); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--paper); font: 400 var(--fs-button)/1 var(--body); transition: border-color var(--dur-fast) var(--ease-out); }
.subscribe input[type="email"]::placeholder { color: var(--subtle); }
.subscribe input[type="email"]:hover { border-color: var(--line-strong); }
.subscribe input[type="email"]:focus-visible { outline: var(--focus-width) solid var(--signal-light); outline-offset: 0; border-color: transparent; }
.panel .subscribe input[type="email"], .free .subscribe input[type="email"] { background: var(--ink); }
@media (max-width: 639px) { .subscribe input[type="email"] { min-height: 52px; } .subscribe .btn { flex: 1 1 100%; } }
/* the honeypot: off screen for everyone, and aria-hidden in the markup so a screen
   reader never reaches it */
.subscribe__company { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* what the form says after it is submitted, in the small/meta style */
p.subscribe__note { margin-top: var(--space-xs); font-size: var(--fs-small); color: var(--muted); max-width: 46ch; }

/* ---------- list rows */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-top: 1px solid var(--line); }
.posts li:last-child { border-bottom: 1px solid var(--line); }
.posts a { display: grid; gap: var(--space-xs); padding: 28px 0; color: inherit; text-decoration: none; }
.posts__meta { display: flex; gap: var(--space-md); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--subtle); text-transform: uppercase; letter-spacing: var(--ls-meta); }
.posts h2, .posts h3 { font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem); line-height: 1.25; letter-spacing: -.015em; font-weight: 600; transition: color var(--dur-fast) var(--ease-out); }
.posts a:hover h2, .posts a:hover h3 { color: var(--signal-light); }
.posts__excerpt { color: var(--muted); font-size: var(--fs-button); line-height: 1.55; max-width: 72ch; }
@media (min-width: 900px) {
  .posts a { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-xs) var(--space-xl); }
  .posts__meta { grid-row: span 2; flex-direction: column; gap: 6px; padding-top: 6px; }
  .posts--lead li:first-child h3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
}
.posts--list { margin-block: clamp(32px, 5vw, 64px); }
.crosssell { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-xl) 0 clamp(64px, 8vw, 112px); }

/* ---------- reveal on scroll: the one reveal in the system */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
/* 40-home.css - home page sections only: hero, price ledger, trust line,
   section rhythm, the three tool rows, free tools, who, terms.
   Layout families, one per section, per DESIGN.md "Layout per page type -> Home".
   Every multi-column rule below declares its own single-column fallback. */

/* ---------- 1. hero: split 7/5, artifacts bleeding off the right (comp 01, 12) */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 104px); overflow: hidden; }
.hero__in { display: grid; gap: var(--space-xxl); align-items: center; }
.hero .eyebrow { margin-bottom: var(--space-lg); }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-stretch: 105%; max-width: 13ch; }
.hero__sub { margin-top: var(--space-xl); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--muted); max-width: 52ch; }
.hero__cta { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* phone: both buttons full width and stacked, primary first (comp 12) */
@media (max-width: 639px) { .hero__cta { gap: var(--space-sm); } .hero__cta .btn { width: 100%; } }

/* the stack: three real product PNGs, one shared shadow, max 4 degrees of rotation */
.hero__art { position: relative; aspect-ratio: 10 / 9; width: 100%; }
.hero__sheet { position: absolute; border-radius: var(--radius-surface); box-shadow: var(--shadow-sheet), 0 0 0 1px rgba(255, 255, 255, .06); background: var(--paper); }
/* phone and tablet: the cover leads and the other two show only as page edges
   stacked behind it, which is what comp 12 renders at 390 */
.hero__sheet--a { width: 90%; left: 0; top: 0; transform: rotate(-1deg); z-index: 3; }
.hero__sheet--b { width: 84%; left: 9%; top: 3%; transform: rotate(1.5deg); z-index: 2; }
.hero__sheet--c { width: 80%; left: 15%; top: 7%; transform: rotate(3deg); z-index: 1; }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-section-sm); }
  /* the art breaks the container and bleeds off the right edge; .hero clips the page */
  .hero__art { width: calc(100% + 64px); margin-right: -64px; justify-self: end; }
  .hero__sheet--a { width: 52%; left: 0; top: 0; transform: rotate(-3deg); z-index: 1; }
  .hero__sheet--b { width: 48%; left: 42%; top: 14%; transform: rotate(1deg); z-index: 2; }
  .hero__sheet--c { width: 62%; left: 38%; top: 44%; transform: rotate(2.5deg); z-index: 3; }
}
@media (min-width: 1200px) { .hero__art { width: calc(100% + 140px); margin-right: -140px; } }

/* ---------- 2. price strip: divided text strip between hairlines (comp 02) */
.ledger { border-block: 1px solid var(--line); }
.ledger__list { list-style: none; margin: 0; padding: 0; display: grid; }
.ledger__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "line line"; gap: var(--space-md); padding: clamp(24px, 3vw, 32px) 0; color: inherit; text-decoration: none; height: 100%; }
.ledger__list li + li { border-top: 1px solid var(--line); }
.ledger__name { grid-area: name; font: 600 var(--fs-h3)/var(--lh-h3) var(--display); letter-spacing: var(--ls-h3); color: var(--paper); transition: color var(--dur-fast) var(--ease-out); }
.ledger__price { grid-area: price; color: var(--paper); font-size: var(--fs-price-inline); line-height: var(--lh-h3); }
.ledger__line { grid-area: line; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--subtle); }
.ledger__list a:hover .ledger__name { color: var(--signal-light); }
@media (min-width: 900px) {
  .ledger__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ledger__list li + li { border-top: 0; border-left: 1px solid var(--line); }
  .ledger__list li + li a { padding-left: var(--space-xl); }
  .ledger__list a { padding-right: var(--space-xl); }
}

/* trust line: four quiet phrases, no bullets, dots or icons */
.assure { border-bottom: 1px solid var(--line); }
.assure__list { list-style: none; margin: 0; padding: 20px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--subtle); }
@media (min-width: 900px) { .assure__list { display: flex; justify-content: space-between; gap: var(--space-lg); } }

/* ---------- section rhythm */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section__head { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 64px); }
.section__head p { margin-top: var(--space-xs); color: var(--muted); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.section__head--row { max-width: none; margin-bottom: var(--space-xxl); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md); }

/* ---------- 3. the three tools: stacked asymmetric feature rows, mirrored once (comp 03) */
.tools { display: grid; gap: clamp(56px, 7vw, 96px); }
/* single column below 900px, and the artifact leads the row, which is the
   content order DESIGN.md gives the component */
.tool { display: grid; gap: var(--space-xl); align-items: center; }
.tool__shot { order: -1; }
.tool__shot { border-radius: var(--radius-surface); background: var(--ink-2); border: 1px solid var(--line); padding: clamp(16px, 2.5vw, 32px); box-shadow: var(--shadow-sheet); }
.tool__shot img { width: 100%; border-radius: var(--radius-control); }
.tool__meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--subtle); text-transform: uppercase; letter-spacing: var(--ls-meta); margin-bottom: var(--space-sm); }
.tool__body h3 { font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.tool__desc { margin-top: var(--space-md); color: var(--text); max-width: 56ch; }
.tool__buy { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.tool__price { font: 700 var(--fs-price)/var(--lh-price) var(--display); letter-spacing: var(--ls-price); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  /* price above the button on phone, both full width */
  .tool__buy { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .tool__buy .btn { width: 100%; }
}
@media (min-width: 900px) {
  .tool { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-section-sm); }
  .tool__shot { order: 0; }
  .tool--mirror { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .tool--mirror .tool__body { order: 2; }
}
/* the one scroll reveal in the system: the feature rows, once, 60ms apart */
@media (prefers-reduced-motion: no-preference) {
  .js .tools .tool:nth-child(2) { transition-delay: .06s; }
  .js .tools .tool:nth-child(3) { transition-delay: .12s; }
}
.howbuy { margin-top: clamp(48px, 6vw, 80px); padding-top: var(--space-lg); border-top: 1px solid var(--line); color: var(--muted); max-width: 72ch; }

/* ---------- 4. free tools: one divided panel, three text columns (comp 04) */
.free .section__head { margin-bottom: var(--space-xl); }
.free__list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--radius-surface); background: var(--ink-2); }
.free__list li + li { border-top: 1px solid var(--line); }
.free__list a { display: flex; flex-direction: column; height: 100%; padding: clamp(24px, 3vw, 32px); color: inherit; text-decoration: none; }
.free__list p { margin-top: var(--space-sm); color: var(--muted); font-size: var(--fs-button); line-height: 1.55; flex: 1; }
.free__go { margin-top: var(--space-xl); font: 600 var(--fs-button)/1 var(--display); color: var(--paper); display: inline-flex; gap: var(--space-xs); }
.free__go::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.free__list a:hover h3, .free__list a:hover .free__go { color: var(--signal-light); }
.free__list a:hover .free__go::after { transform: translateX(3px); }
.free__list h3 { transition: color var(--dur-fast) var(--ease-out); }
@media (min-width: 900px) {
  .free__list { grid-template-columns: 1.4fr 1fr 1fr; }
  .free__list li + li { border-top: 0; border-left: 1px solid var(--line); }
}
/* 5. email signup: inline form row, copy left, field and button right. .notify
   holds the grid; the extra top space keeps it clear of the panel above. */
.free .notify { margin-top: clamp(64px, 8vw, 96px); }

/* ---------- 7. who this is for: two-column running text (comp 06) */
.who { display: grid; gap: var(--space-xxl); }
.who h2 { font-size: clamp(1.5rem, 1.3rem + .7vw, 1.875rem); }
.who p { margin-top: var(--space-md); max-width: 58ch; }
.who .textlink { margin-top: 20px; }
@media (min-width: 900px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-section); } }

/* ---------- 8. before you buy anything: 2x2 definition grid (comp 06) */
.terms { margin: 0; display: grid; }
.terms > div { padding: 28px 0; border-bottom: 1px solid var(--line); }
.terms dt { font: 600 1.1875rem/1.3 var(--display); color: var(--paper); }
.terms dd { margin: var(--space-xs) 0 0; color: var(--muted); max-width: 52ch; }
.terms + .small { margin-top: var(--space-xl); }
@media (min-width: 900px) {
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms > div:nth-child(odd) { padding-right: var(--space-xxl); }
  .terms > div:nth-child(even) { padding-left: var(--space-xxl); border-left: 1px solid var(--line); }
}

/* ---------- standalone text links on this page carry a 44px tap target.
   Padding keeps the baseline, so the header row still aligns to its h2. */
.is-home .textlink { padding-block: var(--space-xs); }
/* 50-product.css - the three product pages: the hero (format label, H1, lead,
   spec row) with the purchase card beside it, the restyled product body, and
   the sticky buy bar. Tokens only; no hex values live here. */

/* ---------- hero: 7 + 5, card in the right five columns */
.phero { padding: clamp(32px, 5vw, 72px) 0 clamp(40px, 6vw, 88px); border-bottom: 1px solid var(--line); }
.phero__in { display: grid; gap: var(--space-xl); align-items: start; }
.phero__format { font: 400 var(--fs-meta)/var(--lh-meta) var(--mono); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--subtle); margin-bottom: var(--space-md); }
.phero h1 { max-width: 16ch; }
.phero__lead { margin-top: var(--space-lg); }
@media (min-width: 900px) {
  /* the card spans both rows; min-content keeps its extra height out of row 1,
     so the spec row stays directly under the lead */
  .phero__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: min-content 1fr; column-gap: var(--space-section-sm); row-gap: 40px; grid-template-areas: "head card" "spec card"; }
  .phero__head { grid-area: head; }
  .pcard { grid-area: card; }
  .phero__spec { grid-area: spec; align-self: start; }
}

/* ---------- spec row: only counts the page itself states, four cells, 2x2 on phone */
.specrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.specrow__cell { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; }
.specrow__cell:nth-child(2n) { border-left: 1px solid var(--line); padding-left: var(--space-lg); }
.specrow__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
.specrow__num { font: 700 var(--fs-price)/var(--lh-price) var(--display); letter-spacing: var(--ls-price); color: var(--paper); font-variant-numeric: tabular-nums; }
.specrow__label { margin: var(--space-sm) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
@media (min-width: 640px) {
  .specrow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .specrow__cell:nth-child(n+2) { border-left: 1px solid var(--line); padding-left: var(--space-lg); }
  .specrow__cell:nth-child(n+3) { border-top: 0; }
}
/* the fallback when a page's count strip does not split into number + label cells */
.specstrip { padding-top: var(--space-lg); border-top: 1px solid var(--line); font-size: var(--fs-mono-body); line-height: var(--lh-mono-body); color: var(--muted); }

/* ---------- purchase card: the one card on the page */
.pcard { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 2.5vw, 32px); }
.pcard__art { width: 100%; height: auto; border-radius: var(--r); }
.pcard__price { margin-top: var(--space-lg); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-sm); }
.pcard__amount { font: 700 var(--fs-price)/var(--lh-price) var(--display); letter-spacing: var(--ls-price); color: var(--paper); font-variant-numeric: tabular-nums; }
.pcard__unit { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--subtle); }
.pcard__buy { width: 100%; margin-top: var(--space-lg); }
.pcard__note { margin-top: var(--space-md); }
@media (max-width: 899px) {
  .pcard__art { max-height: 40vh; width: auto; margin-inline: auto; }
}

/* ---------- body: the WordPress content in its own order, restyled */
.prose--product { max-width: none; padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 112px); }
.prose--product > * { max-width: var(--read); margin-inline: auto; }
.prose--product > .gallery { max-width: 1000px; }
.prose--product > .steps, .prose--product > .panel, .prose--product > .table-scroll { max-width: 840px; }
.prose--product > .wp-block-buttons { margin-top: var(--space-xxl); }

/* hairline lists: "It's for you if", "What it isn't", and the contents lists */
.prose--product .hairlist { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.prose--product .hairlist > li { margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-h3); line-height: 1.45; color: var(--text); }
.prose--product .hairlist--defs > li { font-size: var(--fs-body); line-height: var(--lh-body); }
.prose--product .hairlist--defs > li > strong:first-child { display: block; font: 600 var(--fs-h3)/var(--lh-h3) var(--display); letter-spacing: var(--ls-h3); color: var(--paper); margin-bottom: var(--space-xs); }

/* numbered steps: the sentence is the label, three across, stacked on phone */
.prose--product .steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--space-xl); }
.prose--product .steps > li { counter-increment: step; margin: 0; padding: 0; font-size: var(--fs-body); line-height: 1.5; }
.prose--product .steps > li::before { content: counter(step); display: block; margin-bottom: var(--space-sm); font: 700 clamp(2.25rem, 1.5rem + 2vw, 3.5rem)/1 var(--display); letter-spacing: -.02em; color: var(--paper); font-variant-numeric: tabular-nums; }
@media (min-width: 782px) { .prose--product .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }

/* page previews: real PNGs on paper sheets, two-up on desktop, one column below 900 */
.prose--product .gallery { display: grid; gap: var(--space-lg); }
.prose--product .gallery .wp-block-column > * + * { margin-top: var(--space-lg); }
.prose--product .preview { margin: 0; }
.prose--product .preview__frame { display: block; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow-sheet); overflow: hidden; }
.prose--product .preview__frame img { width: 100%; height: auto; border-radius: 0; box-shadow: none; background: none; }
.prose--product .preview figcaption { margin-top: var(--space-sm); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--subtle); }
@media (min-width: 900px) { .prose--product .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the source line under a quote */
.prose--product blockquote + p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--subtle); }

/* ---------- sticky buy bar: on once the hero button has gone, off at the footer */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(31, 36, 41, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: transform var(--dur-slow) var(--ease); }
.buybar[hidden] { display: block; visibility: hidden; }
.buybar.is-on { transform: none; visibility: visible; }
.buybar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; }
.buybar p { display: flex; flex-direction: column; font-size: var(--fs-small); line-height: 1.4; color: var(--subtle); min-width: 0; }
.buybar strong { font: 600 var(--fs-button)/1.3 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) { .buybar p span { display: none; } .buybar .btn { min-height: 48px; padding-inline: var(--space-md); } }
.is-product .site-footer { padding-bottom: var(--space-section); }
/* 60-content.css - article, page and tool bodies: the page header, the reading
   layout and TOC rail, everything WordPress sends us as prose, tables, panels,
   disclosure cards, the after-article block and the pager. */

/* ---------- page + article header */
.ahead { padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
/* The 304px indent lines the page header up with the reading column that sits to
   the right of the TOC rail. Page types with no rail (category archives, 404) keep
   their body flush with the container, so their header stays flush too. */
@media (min-width: 1200px) {
  .ahead__in > * { margin-left: 304px; }
  .is-archive .ahead__in > *, .is-404 .ahead__in > * { margin-left: 0; }
}
.is-article .ahead h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); max-width: 22ch; }
.ahead h1 { max-width: 20ch; }
.ahead .lead { margin-top: 20px; }
/* the category above an article title: a plain light-orange link, no underline
   until hover (DESIGN.md "Deviations", item 6) */
.ahead__cat { margin-bottom: var(--space-xs); font-size: var(--fs-body); line-height: 1.3; }
.ahead__cat a { color: var(--signal-light); text-decoration: none; }
.ahead__cat a:hover { color: var(--signal-light); text-decoration: underline; }
.byline { margin-top: 20px; font-size: var(--fs-meta); line-height: var(--lh-meta); text-transform: uppercase; letter-spacing: var(--ls-meta); color: var(--subtle); display: flex; gap: 10px; }
/* free tools carry the whole container: header, tag row and cards align left
   together, and only the running text keeps the reading measure (comp 11) */
.is-tool .prose { max-width: none; }
@media (min-width: 1200px) {
  .is-tool .ahead__in > * { margin-left: 0; }
  .is-tool .reading { grid-template-columns: minmax(0, 1fr); }
  .is-tool .reading > .prose:only-child { grid-column: 1; }
}

/* ---------- reading layout */
.reading { display: grid; gap: 32px; padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 96px); }
.reading__toc summary { font: 600 var(--fs-label)/var(--lh-label) var(--display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--subtle); cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
.reading__toc summary::-webkit-details-marker { display: none; }
.reading__toc ol { list-style: none; margin: 8px 0 0; padding: 0; border-left: 1px solid var(--line); }
.reading__toc li a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: .9375rem; line-height: 1.4; color: var(--subtle); text-decoration: none; }
.reading__toc li a:hover { color: var(--paper); }
.reading__toc li a.is-active { color: var(--paper); border-left-color: var(--signal-light); }
@media (max-width: 1199px) {
  .reading__toc { max-width: var(--read); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 20px; }
  .reading__toc summary { min-height: 52px; }
  .reading__toc summary::after { content: "+"; font: 400 1.25rem/1 var(--mono); }
  .reading__toc details[open] summary::after { content: "\2212"; }
  .reading__toc details[open] { padding-bottom: 16px; }
  /* 44px tap target on every rail link once the rail is a disclosure */
  .reading__toc li a { display: flex; align-items: center; min-height: 44px; padding-block: 4px; }
}
@media (min-width: 1200px) {
  .reading { grid-template-columns: 240px minmax(0, var(--read)); gap: 64px; }
  .reading > .prose:only-child { grid-column: 2; }
  .reading__toc { position: sticky; top: 96px; align-self: start; max-height: calc(100dvh - 128px); overflow-y: auto; }
  .reading__toc summary { pointer-events: none; min-height: 0; margin-bottom: 12px; }
}

/* ---------- prose: everything WordPress sends us */
.prose { max-width: var(--read); min-width: 0; }
.prose > * + * { margin-top: 1.5rem; }
.prose h2 { margin-top: 4rem; font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.prose h3 { margin-top: 2.5rem; }
.prose h2 + *, .prose h3 + * { margin-top: 1rem; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; margin-bottom: 0; }
.prose li + li { margin-top: .625rem; }
.prose li::marker { color: var(--subtle); }
.prose ol li::marker { font-family: var(--mono); font-size: .875em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 3rem; }
.prose .small { color: var(--subtle); }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--signal); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--paper); }
.prose blockquote > * + * { margin-top: 1rem; }
.prose blockquote cite, .prose blockquote + .small { font-size: .9375rem; font-style: normal; color: var(--subtle); }
.prose pre { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; overflow-x: auto; font: 400 var(--fs-mono-body)/var(--lh-mono-body) var(--mono); white-space: pre-wrap; color: var(--muted); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 12px; font-size: .9375rem; line-height: 1.5; color: var(--subtle); }
/* the house charts are light sheets of paper: shown at their natural width,
   never scaled up past it, so the type inside stays crisp */
.prose figure img { border-radius: var(--r); box-shadow: var(--sheet-shadow); background: var(--paper); max-width: min(100%, var(--read)); height: auto; }
/* the house charts are all 680 wide: a definite width reserves the box before
   the file arrives, and never scales a chart up past its natural size */
.prose figure img[width="680"] { width: min(100%, var(--read)); }
.prose a.zoom { display: block; cursor: zoom-in; }
/* a code block inside a card is a well, not a second card on top of the first */
.fold pre, .panel pre, .box pre { background: var(--ink); border: 0; }

/* A table scrolls inside its own box, and says so: the edge shadow appears only
   while there is more table to the right, and goes as you reach the end. */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--ink), rgba(20, 23, 26, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--ink), rgba(20, 23, 26, 0)) right center / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(244, 241, 236, .22), rgba(244, 241, 236, 0)) left center / 24px 100% no-repeat scroll,
    linear-gradient(to left, rgba(244, 241, 236, .22), rgba(244, 241, 236, 0)) right center / 24px 100% no-repeat scroll;
}
.prose table { border-collapse: collapse; width: 100%; font-size: 1rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose tr:last-child td { border-bottom: 0; }
.prose thead th, .prose tbody tr:first-child:not(thead + tbody tr) th { font: 600 .8125rem/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); background: var(--ink-3); white-space: nowrap; }
.prose td:first-child { color: var(--paper); }

.panel, .box { border-radius: var(--r); padding: clamp(20px, 3vw, 32px); }
.panel { background: var(--ink-2); border: 1px solid var(--line); }
.box { border: 1px solid var(--line); }
.panel > * + *, .box > * + *, .group > * + * { margin-top: 1rem; }
.panel h2, .panel h3, .box h2, .box h3 { margin-top: 0; font-size: 1.375rem; }
.panel .small:first-child { font: 600 .8125rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-columns { display: grid; gap: 32px; }
@media (min-width: 782px) { .wp-block-columns { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.wp-block-column > * + * { margin-top: 1rem; }
.cardgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.cardgrid > * { margin-top: 0 !important; }
.cardgrid .box { background: var(--ink-2); }
.cardgrid .box p, .cardgrid .box li { font-size: 1rem; line-height: 1.5; }
.prose:has(.cardgrid) { max-width: 840px; }
/* Wider-than-reading bodies: the free tools and the sixteen-city reference.
   Running text keeps the reading measure; cards, tables, figures and the tag
   row get the wider column. */
/* a panel on a tool page is a block of reading text with padding: it holds the
   reading measure too, so the page keeps one text column */
.is-tool .prose > .panel, .is-tool .prose > .box, .prose:has(.cardgrid) > .panel { max-width: calc(var(--read) + 64px); }
.is-tool .prose > p, .is-tool .prose > ul, .is-tool .prose > ol, .is-tool .prose > h2, .is-tool .prose > h3, .is-tool .prose > blockquote,
.prose:has(.cardgrid) > p, .prose:has(.cardgrid) > ul, .prose:has(.cardgrid) > ol, .prose:has(.cardgrid) > h2, .prose:has(.cardgrid) > h3, .prose:has(.cardgrid) > blockquote { max-width: var(--read); }

/* disclosure cards (permit lookup) */
/* 250 closed cards is 250 subtrees the browser need not lay out until they are
   near the viewport; the intrinsic size keeps the scrollbar honest meanwhile. */
.fold { border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); margin-top: 8px !important; content-visibility: auto; contain-intrinsic-size: auto 60px; }
.fold[open] { content-visibility: visible; }
.fold summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 18px 56px 18px 20px; min-height: 56px; cursor: pointer; list-style: none; position: relative; font: 600 1.125rem/1.3 var(--display); color: var(--paper); }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "+"; position: absolute; right: 20px; top: 16px; font: 400 1.375rem/1 var(--mono); color: var(--subtle); }
.fold[open] summary::after { content: "\2212"; }
.fold summary strong { font-weight: 600; }
.fold summary span, .fold summary em { font: 400 .9375rem/1.4 var(--body); color: var(--subtle); font-style: normal; }
.fold summary:hover { color: var(--signal-light); }
.fold > :not(summary) { margin: 0 20px 16px; }
.fold[open] { border-color: var(--line-strong); }
.fold[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.fold ul { padding-left: 1.1rem; }
.fold li, .fold p { font-size: 1rem; line-height: 1.55; }
/* a card the researcher could only read in part says so in plain words, above
   the list. No badge, no color, no icon (DESIGN.md "Do not"). */
.fold__note { color: var(--subtle); font-size: var(--fs-small) !important; line-height: var(--lh-small) !important; }
/* the open card reads as a two-column definition grid rather than one long
   line of text across a wide card (comp 11) */
@media (min-width: 900px) {
  .fold ul { columns: 2; column-gap: 40px; }
  .fold li { break-inside: avoid; }
  .fold li + li { margin-top: 12px; }
}

/* ---------- after-article */
.after { padding-bottom: clamp(64px, 8vw, 112px); }
.after > * { max-width: 840px; }
@media (min-width: 1200px) { .after > * { margin-left: 304px; } }
.pager { display: grid; gap: 0; border-block: 1px solid var(--line); }
.pager a { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; color: var(--paper); text-decoration: none; font: 600 1.125rem/1.3 var(--display); }
.pager a + a { border-top: 1px solid var(--line); }
.pager a:hover { color: var(--signal-light); }
.pager .mono { font-size: .8125rem; font-weight: 400; color: var(--subtle); text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 782px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager a + a { border-top: 0; border-left: 1px solid var(--line); padding-left: 32px; }
  .pager a:first-child { padding-right: 32px; }
  .pager__next { text-align: right; align-items: flex-end; }
}

/* long button labels inside articles may wrap on a phone rather than push the page sideways */
.prose .btn, .panel .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }

/* ---------- the permit lookup's city search: the same field geometry as the
   email form (raised ink-2, hairline, 48px, 52px on phone), a mono count line
   under it, and the empty state that sends you to the call sheet. The whole
   block is inert markup until site.js finds #city-search. */
.citysearch { max-width: var(--read); margin-top: var(--space-xl) !important; }
.citysearch__label { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--subtle); margin-bottom: var(--space-xs); }
.citysearch__field { display: block; width: 100%; min-height: 48px; padding: 0 var(--space-md); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--paper); font: 400 var(--fs-button)/1 var(--body); transition: border-color var(--dur-fast) var(--ease-out); }
.citysearch__field::placeholder { color: var(--subtle); }
.citysearch__field:hover { border-color: var(--line-strong); }
.citysearch__field:focus-visible { outline: var(--focus-width) solid var(--signal-light); outline-offset: 0; border-color: transparent; }
.citysearch__field::-webkit-search-cancel-button { filter: grayscale(1); }
/* meta styling, but not uppercased: the line quotes back what was typed, and
   forcing "aus" to "AUS" would misreport it */
.citysearch__count { margin-top: var(--space-sm); font: 400 var(--fs-meta)/var(--lh-meta) var(--mono); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-meta); color: var(--subtle); }
.citysearch__empty { margin-top: var(--space-sm); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
@media (max-width: 639px) { .citysearch__field { min-height: 52px; } }

/* the state row sits closer to the field it filters than to the cards below */
.citysearch + p#states { margin-top: var(--space-xl); }
.tagrow + h2 { margin-top: var(--space-xxl); }
/* a state heading is the label for the cards under it, not a new section */
.prose h3[data-state] { margin-top: var(--space-xl); }
.prose h3[data-state]:first-of-type { margin-top: var(--space-lg); }
.prose > p.backtop { margin-top: var(--space-sm); }

/* ---------- tag / filter row: the states on the permit lookup and on the
   sixteen-city reference. One line on desktop, scrolls on phone, never wraps
   to an orphan second row. */
.tagrow { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; gap: var(--space-xs); padding-bottom: var(--space-xs); scrollbar-width: thin; }
.tagrow .btn { flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; padding: 0 var(--space-md); border: 1px solid var(--line); background: transparent; color: var(--paper); font: 400 var(--fs-small)/1 var(--mono); letter-spacing: 0; white-space: nowrap; }
.tagrow .btn:hover { background: var(--paper); color: var(--on-paper); border-color: var(--paper); }
/* a state with no card left on screen drops out of the row while the filter is on.
   The class sets display, so the browser's own [hidden] rule cannot do it alone. */
.tagrow .btn[hidden] { display: none; }
@media (max-width: 639px) { .tagrow .btn { min-height: 44px; } }
@media (min-width: 900px) { .tagrow { flex-wrap: wrap; overflow: visible; } }

/* ---------- the blank fill-in sheet on the call sheet: a real sheet of paper,
   the one light surface in the system. No card inside it. */
.sheet { background: var(--paper); color: var(--on-paper); border-color: transparent; box-shadow: var(--sheet-shadow); }
.sheet h2, .sheet h3, .sheet strong, .sheet td:first-child { color: var(--on-paper); }
.sheet .table-scroll { background: none; border: 0; }
.sheet th, .sheet td { border-bottom-color: rgba(20, 23, 26, .2); }
.sheet thead th { background: rgba(20, 23, 26, .06); color: var(--on-paper); }
.sheet a { color: var(--on-paper); text-decoration: underline; }
.sheet .btn { background: var(--on-paper); color: var(--paper); border-color: transparent; }
.sheet .btn:hover { background: var(--ink-2); color: var(--paper); }

/* ---------- the articles index: each topic list is a column of hairline rows,
   title first, the summary that follows it muted underneath. */
.rowlist { list-style: none; padding-left: 0; margin-top: var(--space-lg) !important; }
.rowlist li { border-top: 1px solid var(--line); padding: 20px 0; font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
.rowlist li + li { margin-top: 0; }
.rowlist li:last-child { border-bottom: 1px solid var(--line); }
.rowlist li > a { display: block; margin-bottom: 6px; font: 600 var(--fs-h3)/var(--lh-h3) var(--display); letter-spacing: var(--ls-h3); color: var(--paper); text-decoration: none; }
.rowlist li > a:hover { color: var(--signal-light); }

/* ---------- card grid titles are Paper, never orange (DESIGN.md "Do not") */
.cardgrid .box > p:first-child { font: 600 var(--fs-h3)/var(--lh-h3) var(--display); letter-spacing: var(--ls-h3); }
.cardgrid .box > p:first-child a { color: var(--paper); text-decoration: none; }
.cardgrid .box > p:first-child a:hover { color: var(--signal-light); }

/* the "Back to the state list" rows the author repeats between sections: kept
   word for word, set quietly so they stop competing with the cards */
.prose > p:has(> a[href^="#"]:only-child) { font-size: var(--fs-small); line-height: var(--lh-small); }
.prose > p:has(> a[href^="#"]:only-child) a, .prose .small a { color: var(--subtle); }
.prose > p:has(> a[href^="#"]:only-child) a:hover, .prose .small a:hover { color: var(--paper); }
/* 90-print.css - paper output for the call sheet, the route planner and any
   article. This is the one place outside 00-tokens.css that writes a hex value:
   it re-points the existing colour tokens to black on white and adds no new
   token names. */

@media print {
  :root { --ink: #fff; --ink-2: #fff; --ink-3: #fff; --paper: #000; --on-paper: #000; --text: #000; --muted: #222; --subtle: #444; --line: #bbb; --signal-light: #000; }
  @page { size: letter; margin: 14mm; }
  .site-header, .site-footer, .buybar, .reading__toc, .after, .skip, .lightbox,
  .crosssell, .tagrow, .wp-block-buttons, .subscribe, .citysearch { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  /* paper never scrolls, so the scroll reveal has to be already finished */
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ahead { padding: 0 0 12pt; border-bottom: 1px solid var(--line); }
  .ahead__in > *, .after > * { margin-left: 0 !important; }
  .wrap { max-width: none; padding-inline: 4mm; }
  .reading { display: block; padding-block: 12pt 0; }
  .prose, .is-tool .prose, .prose > p, .is-tool .prose > p, .is-tool .prose > ul, .is-tool .prose > ol { max-width: none; }
  a { text-decoration: none; }

  /* the fill-in sheet is already paper: it prints as plain black on white */
  .sheet, .panel, .box, .fold { background: var(--ink); color: var(--on-paper); box-shadow: none; border: 1px solid var(--line); border-radius: 0; padding: 10pt; }
  .fold { content-visibility: visible; }
  .sheet { border-width: 0; padding: 0; }

  /* a table prints at Letter width instead of scrolling */
  .table-scroll { overflow: visible; background: none; border: 0; }
  .prose table { font-size: 9.5pt; line-height: 1.35; table-layout: fixed; width: 100%; word-wrap: break-word; }
  .prose th, .prose td { padding: 5pt 6pt; border-bottom: 1px solid var(--line); }
  .prose thead th { background: none; color: var(--on-paper); }
  .sheet td:first-child { width: 42%; }
  tr, th, td, figure, .panel, .box, .sheet { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .prose figure img { box-shadow: none; border: 1px solid var(--line); max-width: 100%; }
}