/* This file is never linked by name. It is copied to
   assets/style.<sha256[:10]>.css by `verify_site.py --stamp-stylesheet`, and
   that hashed copy is what every page links and what ships. Edit here, restamp,
   and the verifier will fail loudly if you forget the second step.
   ==========================================================================
   TaxWorkBooks — by MB Tax Analytics®
   Broadsheet design system. Newsprint set for the web: Source Serif 4 on a
   paper ground, cyan and magenta used small and deliberately as spot inks.
   Structure comes from the serif scale and negative space — no boxes, no
   dividers between sections. Rules print only as front-page furniture.

   Class names are unchanged from the previous stylesheet, so every page
   restyles without editing its markup.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Source Serif 4 — SELF-HOSTED, on purpose
   The design arrived loading this face from fonts.googleapis.com. That is not
   available to this site: the CSP in _headers is `default-src 'none'` with
   `style-src 'self'`, so the remote stylesheet would simply be blocked and
   every page would silently fall back to Georgia. It is also a Law 25 problem
   -- docs/business/legal/privacy-policy.md enumerates every recipient of
   personal information, and Google Fonts is not among them, so loading it
   would send each visitor's IP to an undisclosed third party.
   Subsets: latin + latin-ext only (EN/FR). Variable weight 400-600 plus
   italic. Licence: SIL OFL 1.1 -- see assets/fonts/OFL.txt.
   Adding a face means adding `font-src 'self'` stays true -- no remote URLs.
   -------------------------------------------------------------------------- */
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Tokens — Broadsheet
   -------------------------------------------------------------------------- */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;

  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --radius: 2px;
  --gutter: 1.25rem;
  --wrap-max: 1240px;
  --measure: 68ch;
  --sec-pad: clamp(3.5rem, 6vw, 6rem);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--color-text);
  text-wrap: pretty;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }

a {
  color: var(--color-accent-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--color-accent-700) 40%, transparent);
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
a:hover { color: var(--color-accent-600); text-decoration-color: currentColor; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

strong { font-weight: 600; }
:target { scroll-margin-top: 5.5rem; }

.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap-max)); margin-inline: auto; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--color-text); color: var(--color-bg);
  padding: 0.75rem 1rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Masthead — sticky utility bar, brand lockup, hero
   -------------------------------------------------------------------------- */
.masthead { background: var(--color-bg); padding-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.masthead-compact { padding-bottom: clamp(1.75rem, 3vw, 2.75rem); }

/* The bar itself is what stays put. Its one rule is front-page furniture. */
.topbar-fixed {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-text);
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.75rem;
  padding: 0.75rem 0;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--color-text);
  flex: 0 0 auto;
}
.brand:hover { color: var(--color-text); }
.brand-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
/* The colophon: the imprint sits under the title, never competing with it. */
.brand-sub {
  font-size: 0.59rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-neutral-800);
}
.brand-sub .parent { color: var(--color-accent-700); }
.brand-sub .rtm { font-size: 0.47rem; vertical-align: 0.5em; margin-left: 1px; }

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.375rem;
  list-style: none;
  font-size: 0.9rem;
  min-width: 0;
  flex: 1 1 auto;
}
.topnav a {
  color: var(--color-text);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--color-accent-600); }
.topnav a.here,
.topnav a[aria-current="page"] {
  color: var(--color-accent-700);
  border-bottom-color: var(--color-accent);
}

.topbar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.125rem;
  flex: 0 0 auto;
}

.lang { display: flex; border: 1px solid var(--color-neutral-400); }
.lang > * {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  padding: 0.3rem 0.6rem;
  text-decoration: none;
  color: var(--color-neutral-700);
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  cursor: pointer;
}
.lang > .here { background: var(--color-text); color: var(--color-bg); cursor: default; }
.lang > a:hover { color: var(--color-accent-600); }

.hero { display: grid; gap: clamp(2rem, 4vw, 4rem); padding-top: clamp(2.75rem, 5vw, 4.5rem); }
.hero-copy h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.625rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.hero-page .hero-copy h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); }
.lede {
  margin-top: 1.15rem;
  max-width: 48ch;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  line-height: 1.6;
  color: var(--color-neutral-800);
}

/* The memo block: a file header, not a feature list. */
.memo { margin: 0; align-self: start; }
.memo-row {
  display: grid;
  grid-template-columns: 8.25rem 1fr;
  gap: 0 1.125rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-neutral-300);
}
.memo dt {
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding-top: 0.25em;
}
.memo dd { margin: 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. Credibility strip — paper, not a dark band
   -------------------------------------------------------------------------- */
.credibility { background: var(--color-bg); padding: clamp(2.5rem, 4.5vw, 4rem) 0 0; }
.credential {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -0.018em;
  max-width: 38ch;
  margin: 0 0 2rem;
}
.badges { display: grid; gap: 1.75rem 2.75rem; list-style: none; }
.badges li { display: block; }
.badge-label {
  display: block;
  font-size: 0.69rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 0.45rem;
}
.badge-note {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-neutral-800);
  max-width: 36ch;
}

/* --------------------------------------------------------------------------
   5. Sections and section heads — separated by whitespace
   -------------------------------------------------------------------------- */
.section { padding: var(--sec-pad) 0; }
.section-alt { background: var(--color-bg); }
.section-legal { padding-bottom: clamp(2.5rem, 4vw, 4rem); }

.sec-head {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.sec-num {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
  margin: 0;
  padding-top: 0.5em;
}
.sec-head h2 { font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.5rem); letter-spacing: -0.025em; }
.sec-sub {
  margin: 0.75rem 0 0;
  max-width: 68ch;
  font-size: 1.03rem;
  line-height: 1.6;
  color: var(--color-neutral-800);
}

/* --------------------------------------------------------------------------
   6. Product listings — a priced index, not a row of boxes
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: 0; }

.card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-divider);
  padding: 1.75rem 0;
  width: 100%;
}
.card-flagship { border-top-color: var(--color-accent); }

.card-kicker {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 0.5rem;
}
.card-head { margin-bottom: 1.25rem; }
.card-head h3 { font-size: 1.5rem; line-height: 1.15; margin-bottom: 0.65rem; }
.card-summary {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-neutral-800);
  max-width: 62ch;
}

.shot { margin: 0 0 1.4rem; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-surface);
}
.shot figcaption {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--color-neutral-700);
}

.card-body { flex: 1 1 auto; display: flex; flex-direction: column; margin-bottom: 1.25rem; }

.inside-label {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 0.5rem;
}
.inside { list-style: none; font-size: 0.9rem; line-height: 1.5; }
.inside li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.1rem;
  border-top: 1px solid var(--color-neutral-300);
  color: var(--color-neutral-800);
}
.inside li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 5px;
  height: 5px;
  background: var(--color-accent-700);
}

/* Progressive disclosure */
.more { margin-top: auto; }
.more > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1.5rem 0 0;
  position: relative;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-accent-700);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0.78rem;
  font-size: 1rem;
  color: var(--color-neutral-600);
}
.more[open] > summary::after { content: "\2013"; }
.more > summary:hover { color: var(--color-accent-600); }
.more-body { padding-top: 0.9rem; }
.more-body h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin: 1.25rem 0 0.35rem;
}
.more-body h4:first-child { margin-top: 0; }
.more-body p {
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 0;
  color: var(--color-neutral-800);
  max-width: 66ch;
}

.card-foot { margin-top: auto; padding-top: 1.25rem; }
.price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.price .cur { font-size: 0.66rem; letter-spacing: 0.12em; color: var(--color-neutral-600); }
.price .amt { font-size: 1.75rem; letter-spacing: -0.015em; }
.licence-line {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-neutral-700);
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   7. Actions
   -------------------------------------------------------------------------- */
.buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 0.7rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.buy:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-bg); }
.buy:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }

.buy-secondary {
  width: auto;
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-divider);
}
.buy-secondary:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  border-color: var(--color-divider);
  color: var(--color-text);
}
.buy-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.buy-note { margin-top: 0.55rem; font-size: 0.8rem; color: var(--color-neutral-700); }

/* --------------------------------------------------------------------------
   8. Sample strip
   -------------------------------------------------------------------------- */
.samples { display: grid; gap: 0; list-style: none; }
.samples li {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-neutral-300);
  padding: 1rem 0;
}
.sample-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 0.35rem;
}
.sample-state {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-accent-2-700);
}
.samples-note { margin-top: 1.15rem; font-size: 0.86rem; color: var(--color-neutral-700); font-style: italic; }

/* --------------------------------------------------------------------------
   9. The internal standard
   -------------------------------------------------------------------------- */
.standard { list-style: none; counter-reset: std; display: grid; gap: 0 4rem; }
.standard li {
  counter-increment: std;
  position: relative;
  padding: 1rem 0 1rem 2.5rem;
  border-top: 1px solid var(--color-neutral-300);
}
.standard li::before {
  content: counter(std, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.28em;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-700);
}
.standard h3 { font-size: 1.03rem; letter-spacing: -0.008em; margin-bottom: 0.3rem; }
.standard p {
  font-size: 0.9rem;
  line-height: 1.58;
  margin: 0;
  max-width: 48ch;
  color: var(--color-neutral-800);
}

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--color-neutral-300); }
.faq details { border-bottom: 1px solid var(--color-neutral-300); }
.faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1rem 2.25rem 1rem 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 0.9rem;
  font-size: 1.0625rem;
  color: var(--color-neutral-600);
}
.faq details[open] summary { color: var(--color-accent-700); }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--color-accent-600); }
.faq-body { padding: 0 2.25rem 1.25rem 0; max-width: var(--measure); }
.faq-body p { font-size: 0.94rem; line-height: 1.68; margin: 0; color: var(--color-neutral-800); }

/* --------------------------------------------------------------------------
   11. Split layout — reading column plus marginalia
   -------------------------------------------------------------------------- */
.split { display: grid; gap: 2.25rem; }
.margin-note {
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-neutral-300);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-neutral-800);
}
.margin-note p { margin: 0; }
.margin-note p + p { margin-top: 0.7rem; }
.margin-label {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.margin-note .margin-label { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   12. Forms and signup
   -------------------------------------------------------------------------- */
.signup {
  display: grid;
  gap: 0.85rem;
  align-items: end;
  max-width: 34rem;
  padding: 0;
  background: transparent;
  border: 0;
}
.signup-field { display: block; min-width: 0; }
.signup label,
.form-filter label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-neutral-700);
  margin-bottom: 0.35rem;
}
.signup input,
.form-filter input {
  display: block;
  width: 100%;
  min-height: 36px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  -webkit-appearance: none;
  appearance: none;
}
.signup input::placeholder,
.form-filter input::placeholder {
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  opacity: 1;
  font-style: italic;
}
.signup input:hover,
.form-filter input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.signup input:focus-visible,
.form-filter input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* --------------------------------------------------------------------------
   13. Legal documents
   -------------------------------------------------------------------------- */
.legal-doc {
  max-width: 74ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--color-neutral-800);
  padding-top: 0;
  border-top: 0;
  margin-top: 0;
}
.legal-doc h3 {
  font-size: 1.375rem;
  margin: 2.25rem 0 0.5rem;
  color: var(--color-text);
}
.legal-doc h3:first-of-type { margin-top: 0; }
.legal-doc h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 1.6rem 0 0.4rem;
}
.legal-doc strong { color: var(--color-text); }
.legal-doc ul { list-style: none; margin: 0 0 1em; }
.legal-doc li { position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem; }
.legal-doc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 5px;
  height: 1px;
  background: var(--color-neutral-500);
}
.legal-meta {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 1.75rem;
}
.legal-contact { margin-top: 1.75rem; }

.legal-doc ol { list-style: none; margin: 0 0 1em; counter-reset: legal-step; }
.legal-doc ol li { padding-left: 1.6rem; }
.legal-doc ol li::before {
  counter-increment: legal-step;
  content: counter(legal-step) ".";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background: none;
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-600);
}

.legal-doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.88rem; }
.legal-doc thead { display: none; }
.legal-doc tbody tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--color-neutral-300); }
.legal-doc tbody tr:last-child { border-bottom: 0; }
.legal-doc th, .legal-doc td { display: block; text-align: left; font-weight: 400; padding: 0.15rem 0; }
.legal-doc th[scope="row"] { color: var(--color-text); font-weight: 600; }
.legal-doc td { color: var(--color-neutral-800); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.sitefoot {
  background: var(--color-bg);
  color: var(--color-neutral-800);
  border-top: 1px solid var(--color-text);
  padding: clamp(2.75rem, 4.5vw, 3.5rem) 0 2.5rem;
  font-size: 0.94rem;
}
.foot-grid { display: grid; gap: 2.25rem 3rem; padding-bottom: 2rem; }
.foot-brand .brand-name { display: block; font-size: 1.375rem; margin-bottom: 0.3rem; }
.foot-brand .brand-sub { display: block; margin-bottom: 0.75rem; font-size: 0.63rem; color: var(--color-neutral-700); }
.foot-tag { color: var(--color-neutral-800); max-width: 30ch; margin-bottom: 0.5rem; }
.foot-domain { font-size: 0.8rem; letter-spacing: 0.05em; color: var(--color-neutral-600); }
.foot-head {
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 0.75rem;
}
.foot-links ul { list-style: none; }
.foot-links li { margin-bottom: 0.4rem; }
.foot-links a { color: var(--color-text); text-decoration: none; }
.foot-links a:hover { color: var(--color-accent-600); }

.disclaimer {
  margin: 1.75rem 0 0;
  max-width: 88ch;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--color-neutral-800);
  border-top: 1px solid var(--color-neutral-300);
  padding-top: 1.5rem;
}
.disclaimer strong { color: var(--color-text); }
.copyright { margin-top: 1.25rem; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--color-neutral-600); }
.foot-legal-id {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--color-neutral-700);
}
.foot-legal-id strong { color: var(--color-neutral-800); font-weight: 400; }

/* ==========================================================================
   15. CRA form index
   ========================================================================== */

/* [hidden] must beat every layout rule in this file, GLOBALLY.

   `hidden` is honoured by a USER-AGENT rule (`[hidden] { display: none }`),
   and any author-level `display` on the same element outranks it. So the
   moment a filterable element is given `display: grid`, `flex` or `block`
   here, setAttribute("hidden", "") stops hiding it -- while every counter and
   aria state that JavaScript maintains keeps saying it is hidden.

   That shipped on 2026-07-28: `.cat-row { display: grid }` meant the home-page
   catalogue read "2 OF 16" above sixteen visible rows. The list below already
   existed for the CRA form index, which hit the same trap first; enumerating
   selectors just meant the next filterable component had to remember to join
   the list, and it did not. One global rule cannot be forgotten.

   Keep this ABOVE the component sections so it is read as a base rule, and
   never remove the !important -- that is the only thing outranking the
   component's own display declaration. */
[hidden] { display: none !important; }

.form-filter {
  display: grid;
  gap: 0.5rem 1.25rem;
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--color-text);
}
.filter-status {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  white-space: nowrap;
  padding-bottom: 0.5rem;
}

.form-jump { margin-bottom: clamp(2rem, 4vw, 3rem); }
.form-jump-label {
  margin: 0 0 0.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.form-jump ul { display: grid; gap: 0.4rem 2rem; list-style: none; font-size: 0.9rem; }
.jump-n { color: var(--color-neutral-600); font-size: 0.8rem; margin-left: 0.35rem; font-variant-numeric: tabular-nums; }

.entity { margin-bottom: clamp(2.75rem, 5vw, 4rem); }
.entity:last-child { margin-bottom: 0; }
.entity-head {
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  margin-bottom: 0.5rem;
}
.entity-n {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-neutral-600);
  margin-left: 0.5rem;
  vertical-align: 0.15em;
  font-variant-numeric: tabular-nums;
}
.entity-blurb { margin: 0 0 1.75rem; max-width: 66ch; color: var(--color-neutral-800); font-size: 0.97rem; }

.group-row th {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  text-align: left;
  padding: 1.75rem 0 0.4rem;
  border-bottom: 1px solid var(--color-divider);
}
.group-n { color: var(--color-neutral-600); margin-left: 0.5rem; }

.forms-wrap { margin: 0; }
.forms { width: 100%; border-collapse: collapse; }
.forms thead { display: none; }
.forms tbody, .forms tr, .forms td { display: block; }
.forms tr {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0 0.85rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-neutral-300);
}
.forms tr:last-child { border-bottom: 0; }
.group-row { grid-template-columns: minmax(0, 1fr); padding: 0; border-bottom: 0; }
.group-row th { display: block; grid-column: 1 / -1; }

.f-code { font-size: 0.82rem; padding-top: 0.15em; font-variant-numeric: tabular-nums; }
.f-code a { text-decoration: none; border-bottom: 1px solid var(--color-neutral-400); }
.f-code a:hover { border-bottom-color: var(--color-accent); }
.f-title { color: var(--color-text); font-size: 0.94rem; line-height: 1.45; }
.f-date { grid-column: 2; font-size: 0.78rem; color: var(--color-neutral-600); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }

.f-wp {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent-800);
  background: var(--color-accent-100);
  border-radius: var(--radius);
  padding: 0.1rem 0.4rem;
  text-decoration: none;
  vertical-align: 0.1em;
}
.f-wp:hover { background: var(--color-accent); color: var(--color-bg); }

.f-also {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-neutral-700);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--radius);
  padding: 0.08rem 0.38rem;
  vertical-align: 0.1em;
}

.no-match {
  margin: 1.5rem 0 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--color-accent);
  font-size: 0.97rem;
  color: var(--color-neutral-800);
}

/* Entity switch — a segmented pair, the current one inked in */
.entity-switch {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
}
.es-item {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--color-neutral-800);
  background: transparent;
  border-right: 1px solid var(--color-neutral-300);
  white-space: nowrap;
}
.es-item:last-child { border-right: 0; }
.es-item:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-accent-700); }
.es-here { background: var(--color-text); color: var(--color-bg); cursor: default; }
.es-here:hover { background: var(--color-text); color: var(--color-bg); }
.es-n { opacity: 0.7; margin-left: 0.4rem; font-variant-numeric: tabular-nums; }

/* Hub cards — genuinely discrete listings, so a boxed edge is earned */
.hub-cards { display: grid; gap: 3rem; }
.hub-card {
  display: block;
  padding: 1rem 0 0;
  border: 0;
  border-top: 3px solid var(--color-text);
  background: transparent;
  text-decoration: none;
  color: inherit;
}
.hub-card:hover { border-top-color: var(--color-accent); }
.hub-card h3 { font-size: 1.625rem; margin: 0.15rem 0 0.75rem; }
.hub-n {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.hub-n-note {
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  vertical-align: 0.7em;
  margin-left: 0.35rem;
}
.hub-sub { margin: 0 0 1.25rem; font-size: 0.94rem; color: var(--color-neutral-800); }
.hub-groups-label {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-neutral-300);
}
.hub-groups { list-style: none; margin: 0 0 1.35rem; font-size: 0.94rem; color: var(--color-neutral-800); }
.hub-groups li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--color-neutral-300);
}
.hub-groups li:last-child { border-bottom: 0; }
.hub-groups .tnum { color: var(--color-neutral-600); font-size: 0.82rem; }
.hub-go {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
}
.hub-card:hover .hub-go { color: var(--color-accent-600); }

/* ==========================================================================
   16. Home page — catalogue and workbook preview
   ========================================================================== */
.hero-index { display: grid; gap: clamp(1.5rem, 3vw, 3.5rem); align-items: end; padding-top: clamp(2.75rem, 5vw, 4.5rem); }
.hero-index .lede { max-width: none; margin-top: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; }
.hero-actions .buy { width: auto; font-size: 0.97rem; padding: 0.7rem 1.25rem; }

.cat-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.75rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--color-text);
  scroll-margin-top: 5.5rem;
}
.cat-bar .signup-field { flex: 1 1 20rem; }
.cat-count {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding-bottom: 0.55rem;
  margin: 0;
}

.seg-label { display: block; font-size: 0.75rem; color: var(--color-neutral-700); margin-bottom: 0.35rem; }
.seg { display: flex; border: 1px solid var(--color-neutral-400); border-radius: var(--radius); overflow: hidden; }
.seg button {
  border: 0;
  border-left: 1px solid var(--color-neutral-300);
  background: transparent;
  color: var(--color-neutral-800);
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--color-accent-600); }
.seg button[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }

.cat-layout { display: grid; gap: 2.5rem; padding-top: 1.75rem; align-items: start; }
.cat-list { display: flex; flex-direction: column; min-width: 0; }
.cat-group-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding: 0 0 0.6rem;
  margin: 0;
}
.cat-list .cat-group-label + * { margin-top: 0; }
.cat-group-label.spaced { padding-top: 1.875rem; }

.cat-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem;
  gap: 1rem;
  align-items: baseline;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--color-neutral-300);
  border-left: 3px solid transparent;
  background: transparent;
  font-family: var(--font-body);
  padding: 0.8rem 0.75rem;
  cursor: pointer;
}
.cat-row:hover { background: var(--color-accent-100); }
.cat-row[aria-pressed="true"] { background: var(--color-accent-100); border-left-color: var(--color-accent); }
.cat-code { font-size: 0.94rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); }
.cat-row[aria-pressed="true"] .cat-code { color: var(--color-accent-800); }
.cat-row.pkg .cat-code { font-size: 1.1875rem; letter-spacing: -0.015em; }
.cat-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cat-title { font-size: 0.94rem; color: var(--color-text); }
.cat-meta { font-size: 0.69rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-neutral-600); }
.cat-price { font-size: 0.94rem; text-align: right; font-variant-numeric: tabular-nums; }
.cat-empty { margin: 1.5rem 0 0; font-size: 0.94rem; color: var(--color-neutral-700); font-style: italic; }

.cat-pane { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.pane-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.875rem; }
.pane-kicker { font-size: 0.69rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-700); }
.pane-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.1875rem; }
.pane-blurb { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--color-neutral-800); }
.pane-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.pane-actions .buy { width: auto; }
.pane-note { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); margin: 0; }

/* The workbook itself, on screen: an Excel file in the serif */
.wb {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.wb-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.wb-file { font-size: 0.75rem; font-weight: 600; letter-spacing: -0.01em; }
.wb-chrome-meta { font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
.wb-version { margin-left: auto; font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }

.wb-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  padding: 0.45rem 0.875rem;
  border-bottom: 1px solid var(--color-neutral-300);
}
.wb-key { display: flex; align-items: center; gap: 0.375rem; font-size: 0.69rem; color: var(--color-neutral-800); }
.wb-key i { width: 9px; height: 9px; display: block; }
.wb-key.in i { background: var(--color-accent-700); }
.wb-key.fx i { background: var(--color-text); }
.wb-key.tab i { background: var(--color-accent-2-700); }
.wb-caption { margin-left: auto; font-size: 0.69rem; color: var(--color-neutral-700); font-style: italic; }

.wb-sheet { background: var(--color-neutral-100); overflow-x: auto; }
.wb-sheet table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.wb-sheet th {
  padding: 0.3rem 0.625rem;
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 400;
  text-align: left;
  color: var(--color-neutral-700);
  background: var(--color-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
}
.wb-sheet th.c-row { width: 34px; text-align: right; padding-inline: 0.375rem; border-right: 1px solid var(--color-neutral-300); }
.wb-sheet th.c-amt { width: 7rem; text-align: right; }
.wb-sheet th.c-ref { width: 6.5rem; color: var(--color-accent-700); border-left: 1px solid var(--color-neutral-300); }
.wb-sheet td { padding: 0.25rem 0.625rem; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent); }
.wb-sheet td.g {
  width: 34px;
  text-align: right;
  padding-inline: 0.375rem;
  font-size: 0.63rem;
  color: var(--color-neutral-700);
  background: var(--color-surface);
  border-right: 1px solid var(--color-neutral-300);
}
.wb-sheet td.l { padding-left: 1.25rem; }
.wb-sheet td.a { text-align: right; }
.wb-sheet td.r { font-size: 0.69rem; color: var(--color-accent-700); border-left: 1px solid var(--color-neutral-300); }
.wb-sheet tr:hover td.l, .wb-sheet tr:hover td.a { background: var(--color-accent-100); }

.wb-sheet tr.k-h td.l { padding-left: 0.625rem; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
.wb-sheet tr.k-h td.a { color: var(--color-neutral-700); }
.wb-sheet tr.k-i td.a { color: var(--color-accent-700); }
.wb-sheet tr.k-t td.a { color: var(--color-accent-2-700); }
.wb-sheet tr.k-x td.l { font-style: italic; color: var(--color-neutral-800); }
.wb-sheet tr.k-x td.a { color: var(--color-neutral-700); }
.wb-sheet tr.k-s td.l, .wb-sheet tr.k-s td.a { font-weight: 600; }
.wb-sheet tr.k-s td.a { border-top: 1px solid var(--color-neutral-400); }
.wb-sheet tr.k-S td.l, .wb-sheet tr.k-S td.a { font-weight: 600; }
.wb-sheet tr.k-S td.a { border-top: 3px double var(--color-text); }

.wb-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-accent-100);
  border-top: 1px solid var(--color-divider);
}
.wb-flag {
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  border: 1px solid var(--color-accent-700);
  padding: 0.125rem 0.375rem;
}
.wb-check span:last-child { font-size: 0.75rem; color: var(--color-neutral-800); }

.wb-tabs {
  display: flex;
  gap: 1px;
  padding: 0 0.5rem;
  background: var(--color-neutral-200);
  border-top: 1px solid var(--color-divider);
  overflow-x: auto;
}
.wb-tabs button {
  border: 0;
  border-top: 2px solid transparent;
  background: transparent;
  color: var(--color-neutral-800);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.75rem 0.45rem;
  white-space: nowrap;
  cursor: pointer;
}
.wb-tabs button:hover { color: var(--color-accent-600); }
.wb-tabs button[aria-pressed="true"] {
  background: var(--color-neutral-100);
  color: var(--color-text);
  font-weight: 600;
  border-top-color: var(--color-accent);
}

/* Author block */
.author { display: grid; gap: 2.5rem; align-items: start; }
.author-figure { margin: 0; }
.author-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--color-surface);
  overflow: hidden;
  filter: grayscale(0.35) contrast(1.15);
}
.author-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The newsprint dot screen, for the photograph as printed */
.author-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,0.22) 30%, transparent 32%);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}
/* An unfilled slot reads as a slot, not a hole: no 4:5 void a thousand pixels tall. */
.author-frame.is-empty { filter: none; aspect-ratio: auto; min-height: 11rem; display: grid; place-items: center; }
.author-frame.is-empty::after { content: none; }
.author-placeholder {
  font-size: 0.82rem;
  color: var(--color-neutral-700);
  text-align: center;
  padding: 1.5rem;
  border: 1px dashed var(--color-neutral-400);
  margin: 1rem;
}
.author-figure figcaption { margin-top: 0.5rem; font-size: 0.72rem; color: var(--color-neutral-700); }
.author-label { font-size: 0.69rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-600); margin: 0 0 1.125rem; }
.author-lead {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.8125rem);
  line-height: 1.28;
  letter-spacing: -0.018em;
  margin: 0 0 1.125rem;
}
.author-body { margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.65; color: var(--color-neutral-800); max-width: 62ch; }

/* --------------------------------------------------------------------------
   17. Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 35rem) {
  .signup { grid-template-columns: 1fr auto; gap: 0.75rem; }
  .signup .buy { font-size: 0.97rem; padding: 0.6rem 1.4rem; }
  .form-filter { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 43.75rem) {
  :root { --gutter: 2rem; }
  .badges { grid-template-columns: repeat(3, 1fr); }
  .samples { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
  .sec-head { grid-template-columns: 4rem 1fr; }
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .form-jump ul { grid-template-columns: repeat(3, 1fr); }

  .legal-doc thead { display: table-header-group; }
  .legal-doc thead tr, .legal-doc tbody tr { display: table-row; padding: 0; border-bottom: 0; }
  .legal-doc th, .legal-doc td {
    display: table-cell;
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid var(--color-neutral-300);
  }
  .legal-doc th[scope="col"] {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    border-bottom: 1px solid var(--color-divider);
  }
  .legal-doc tbody tr:last-child th, .legal-doc tbody tr:last-child td { border-bottom: 0; }

  .forms { display: table; }
  .forms thead { display: table-header-group; }
  .forms tbody { display: table-row-group; }
  .forms tr { display: table-row; padding: 0; }
  .forms th, .forms td {
    display: table-cell;
    padding: 0.45rem 0.85rem 0.45rem 0;
    border-bottom: 1px solid var(--color-neutral-300);
    vertical-align: baseline;
  }
  .forms th {
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
    text-align: left;
    border-bottom: 1px solid var(--color-divider);
    white-space: nowrap;
  }
  .forms tr:last-child td { border-bottom: 0; }
  .f-code { width: 7.5rem; white-space: nowrap; }
  .f-date { width: 7rem; padding-right: 0; margin-top: 0; white-space: nowrap; }
  .group-row th {
    display: table-cell;
    font-size: 0.72rem;
    color: var(--color-accent-700);
    padding: 1.75rem 0 0.4rem;
    border-bottom: 1px solid var(--color-divider);
    white-space: normal;
  }
  .forms tbody:first-of-type .group-row th { padding-top: 0.9rem; }
}

@media (min-width: 60rem) {
  .hero { grid-template-columns: 1.35fr 1fr; align-items: start; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .hero-index { grid-template-columns: 1.3fr 1fr; align-items: end; }
  .credential { max-width: 42ch; }
  .sec-head { grid-template-columns: 5rem 1fr; }
  .cards { grid-template-columns: 1fr; }
  .standard { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
  .signup { max-width: 42rem; }
  .cat-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; }
  .cat-pane { position: sticky; top: 5rem; }
  .author { grid-template-columns: 0.8fr 1.2fr; gap: 3.5rem; }
  /* No photograph yet — the bio and badges take the full measure on their own. */
  .author-solo { grid-template-columns: 1fr; }
  .hub-cards { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   18. Motion — one restrained reveal, above the fold only
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-index > * { animation: rise 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .hero-index > *:nth-child(2) { animation-delay: 70ms; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   19. Print — the page should print like the documents it sells
   -------------------------------------------------------------------------- */
@media print {
  body { font-size: 10.5pt; color: #000; background: #fff; }
  .topbar-fixed, .topnav, .buy, .signup, .skip, .lang, .seg, .cat-bar, .wb-tabs, .form-filter, .form-jump, .no-match { display: none; }
  .section, .masthead { padding: 0.75rem 0; }
  .card, .samples li, .hub-card, .forms tr, .form-group { break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
  .cat-layout, .author, .split, .hero, .hero-index { display: block; }
  .cat-pane { position: static; }
}