/* Structural / component CSS. All values come from the ChillAdmin design-system
   tokens (tokens.css, loaded before this file) — see .claude/skills/chilladmin-design/readme.md
   2026 editorial evolution: Lora carries display/section/body copy, Nunito Sans
   stays on tools/labels/nav (this flip comes from the tokens themselves — see
   tokens/typography.css --type-* composites — not from overrides here).

   NEVER DISTORT A PHOTO. These are real people, mostly Csilla. Any rule that
   constrains an <img> on both axes (fixed/stretched width AND height) MUST
   pair it with `object-fit: cover` so it scales uniformly and crops instead
   of stretching. Never `object-fit: fill`, never a bare width/height with no
   object-fit. See .portrait-band__photo img / .contact-hero__photo img below
   for the reference pattern (a position:absolute image filling a min-height,
   overflow:hidden wrapper). */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-structure);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text-link); text-decoration: none; transition: var(--transition-colour); }
a:hover { color: var(--text-link-hover); }

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

.eyebrow {
  display: inline-block; font-family: var(--font-structure); font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--space-3);
}
.section--navy .eyebrow { color: var(--ca-secondary); }

/* Header (CD SiteHeader) — sticky, solid, exactly --header-height tall. Slides
   away while reading down, returns on the slightest scroll up, soft shadow
   once scrolled (site.js). */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface-card);
  border-bottom: var(--border-width-hairline) solid var(--border-hairline);
  transition: transform 220ms var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.site-header--hidden { transform: translateY(-100%); }
.site-header--scrolled { box-shadow: 0 4px 14px rgba(41,55,91,0.08); }
.site-header__inner {
  max-width: calc(var(--content-width) + 2 * var(--content-gutter)); margin: 0 auto; padding: 0 var(--content-gutter);
  display: flex; align-items: center; gap: var(--space-6); height: var(--header-height);
}
.site-header__inner > a { line-height: 0; }
.site-header__logo { width: 150px; height: auto; }
.site-nav { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; font-size: 15px; }
.site-nav a { color: var(--text-heading); padding-bottom: 3px; border-bottom: 2px solid transparent; font-family: var(--font-structure); }
.site-nav a:hover { color: var(--text-accent); }
.site-nav a[aria-current="page"] { color: var(--text-accent); border-bottom-color: var(--rule-accent); }

.site-header__toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: var(--tap-min); height: var(--tap-min); margin-left: auto;
  background: none; border: none; cursor: pointer; padding: 0;
}
.site-header__toggle span {
  display: block; width: 22px; height: 2px; background: var(--ca-navy);
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}
.site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-header__toggle:focus-visible, .site-nav a:focus-visible { outline: 2px solid var(--ca-red); outline-offset: 2px; }

.mobile-menu {
  position: fixed; inset: var(--header-height) 0 0 0; z-index: 25;
  background: var(--surface-page); padding: var(--space-7) var(--content-gutter);
  display: flex; flex-direction: column; gap: var(--space-8); overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__links { display: flex; flex-direction: column; gap: var(--space-5); }
.mobile-menu__links a {
  font: var(--type-tool); font-size: 22px; color: var(--text-heading); min-height: var(--tap-min);
  display: flex; align-items: center; border-bottom: 1px solid var(--border-hairline);
}
.mobile-menu__book { border-top: 1px solid var(--border-hairline); padding-top: var(--space-6); }
.mobile-menu__book p { font: var(--type-body); color: var(--text-body); }

/* Section bands */
.section { padding: var(--section-padding-y) var(--content-gutter); }
.section--tight { padding: var(--section-padding-y-tight) var(--content-gutter); }
.section--open { padding: var(--section-padding-y-open) var(--content-gutter); }
.section--flush { padding-left: 0; padding-right: 0; }
.section--white { background: var(--surface-page); }
.section--pink { background: var(--surface-trust); }
.section--light { background: var(--surface-example); }
.section--navy { background: var(--surface-inverse); color: var(--text-inverse); }
.section__inner { max-width: var(--content-width); margin: 0 auto; }
.section--flush .section__inner { max-width: none; margin: 0; padding: 0; }
.section--bleed { padding: 0; }
/* Founder band sections: no vertical padding (the photo runs to the band's
   top and bottom edge), inner as wide as the content column plus gutters. */
.section--portrait { padding: 0; }
.section--portrait .section__inner { max-width: calc(var(--content-width) + 2 * var(--content-gutter)); }

/* Prose (rendered Markdown content) */
.prose h1 {
  font: var(--type-page-title); color: var(--text-heading); letter-spacing: var(--ls-title); margin: 0 0 var(--space-5);
}
.prose h1::after {
  content: ""; display: block; width: var(--rule-accent-width); height: var(--rule-accent-height);
  background: var(--rule-accent); margin-top: var(--space-4);
}
.prose h2 { font: var(--type-section-head); color: var(--text-heading); margin: var(--space-8) 0 var(--space-4); }
.prose h3 { font: var(--type-card-title); color: var(--text-heading); margin: var(--space-6) 0 var(--space-3); }
.prose h4, .prose h5, .prose h6 { font-family: var(--font-structure); font-weight: var(--fw-semibold); color: var(--text-heading); margin: var(--space-5) 0 var(--space-2); }
.prose p, .prose li, .prose blockquote { font: var(--type-body); color: var(--text-body); }
.prose p { margin: 0 0 var(--space-5); }
.prose ul, .prose ol { margin: 0 0 var(--space-5); padding-left: 1.4em; }
.prose li { margin-bottom: var(--space-2); }
.prose img { margin: var(--space-6) 0; }
.prose blockquote {
  border-left: var(--border-width-rule) solid var(--ca-red); padding-left: var(--space-5);
  font-family: var(--font-voice); font-style: italic; font-size: var(--fs-statement);
  line-height: var(--lh-statement); color: var(--text-heading); margin: var(--space-7) 0;
}
.prose hr { border: none; border-top: var(--border-width-hairline) solid var(--border-hairline); margin: var(--space-8) 0; }
.prose a { color: var(--text-link); overflow-wrap: anywhere; }
/* a long unbroken string (a pasted web address) may wrap anywhere rather than push the page wider than the screen */
.prose { overflow-wrap: break-word; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font: var(--type-caption); }
.prose th, .prose td { border: var(--border-width-hairline) solid var(--border-hairline); padding: var(--space-3) var(--space-4); text-align: left; }
.prose strong { color: var(--text-heading); }
.article-body { max-width: var(--measure); margin: 0 auto; }

.post-meta {
  font-family: var(--font-structure); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-6);
}

/* Buttons */
.btn {
  font: var(--type-button); letter-spacing: var(--ls-button);
  border-radius: var(--radius-none); box-shadow: var(--shadow-none);
  padding: var(--button-padding-y) var(--button-padding-x);
  border: 1px solid transparent; cursor: pointer; min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  text-decoration: none; transition: var(--transition-colour);
}
.btn--primary { background: var(--action-bg); color: var(--action-fg); border-color: var(--action-bg); }
.btn--primary:hover { background: var(--action-bg-hover); border-color: var(--action-bg-hover); color: var(--action-fg); }
.btn--primary:active { background: var(--action-bg-active); border-color: var(--action-bg-active); }
.btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); border-color: var(--action-secondary-border); }
.btn--secondary:hover { background: var(--ca-navy); color: var(--ca-warm-white); }
.btn--inverse { background: transparent; color: var(--text-inverse); border-color: var(--text-inverse); }
.btn--inverse:hover { background: var(--ca-warm-white); color: var(--ca-navy); border-color: var(--ca-warm-white); }
.btn--link { background: transparent; color: var(--text-link); border-color: transparent; padding: 0; }
.btn--link:hover { color: var(--text-link-hover); }
.btn:focus-visible { outline: 2px solid var(--ca-red); outline-offset: 2px; }
.text-link { color: var(--text-link); font-family: var(--font-structure); font-weight: var(--fw-semibold); }
.text-link:hover { color: var(--text-link-hover); }

.cta-block { display: flex; justify-content: center; margin: var(--space-7) 0; }
.section-link { text-align: center; margin: 0; }

/* Build-time placeholders for content not written yet */
.build-placeholder {
  border: 1px dashed var(--ca-secondary); color: var(--text-muted);
  padding: var(--space-5); font: var(--type-caption); text-align: center; margin: var(--space-6) 0;
}

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.card {
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-card); padding: var(--card-padding);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: var(--transition-colour), box-shadow var(--duration-base) var(--ease-standard);
}
.card:hover { box-shadow: var(--shadow-card-hover); }
.card__meta { font-family: var(--font-structure); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.card__title { margin: 0; font: var(--type-card-title); color: var(--text-heading); }
.card__excerpt { font: var(--type-body); font-size: var(--fs-body-min); color: var(--text-body); margin: 0; }
.card__link { margin-top: auto; font: var(--type-button); font-size: 16px; color: var(--text-link); }
.card__icon { width: 56px; height: 56px; display: block; }

/* Footer */
.site-footer { background: var(--surface-footer); color: var(--text-inverse); padding: 0 0 var(--space-6); }
.site-footer .section__inner { padding: var(--space-8) var(--content-gutter) var(--space-7); }
/* Just the wordmark, centred under the (centred) newsletter band. */
.site-footer__brand { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--content-gutter); display: flex; justify-content: center; }
.site-footer__logo { width: 190px; height: auto; }
.site-footer__legal {
  max-width: var(--content-width); margin: var(--space-7) auto 0; padding: var(--space-4) var(--content-gutter) 0;
  border-top: 1px solid var(--ca-navy-light); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5);
  font-size: 15px; color: var(--ca-secondary);
}
.site-footer__legal a { color: var(--ca-secondary); }
.site-footer__legal a:hover { color: var(--text-inverse); }

/* Section headings outside .prose (used by bespoke page composers) */
.section-heading { margin: 0 0 var(--space-4); font: var(--type-section-head); color: var(--text-heading); text-align: center; }
.section-heading--left { text-align: left; }
.section-heading .rule { display: block; width: var(--rule-accent-width); height: var(--rule-accent-height); background: var(--rule-accent); margin: var(--space-4) auto 0; }
.section-heading--left .rule { margin: var(--space-4) 0 0; }
.section-lead { max-width: var(--measure-lead); margin: 0 auto var(--space-7); text-align: center; font: var(--type-body); color: var(--text-body); }
.section--navy .section-heading, .section--navy .section-lead { color: var(--text-inverse); }

/* Hero (stacked / statement style — home, services, knowledge base) */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-9); align-items: center; }
.hero--stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); max-width: 900px; margin: 0 auto; }
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.hero h1, .hero__content h1 { margin: 0; font: var(--fw-regular) var(--fs-display)/var(--lh-display) var(--font-voice); color: var(--text-heading); letter-spacing: var(--ls-display); }
.hero .rule, .hero__content .rule { display: block; width: var(--rule-accent-width); height: var(--rule-accent-height); background: var(--rule-accent); }
.hero__lead { margin: 0; font: var(--fw-regular) var(--fs-lead)/var(--lh-body) var(--font-voice); max-width: var(--measure-lead); }
.hero__sub { margin: 0; font-family: var(--font-structure); font-weight: var(--fw-semibold); color: var(--text-heading); }
.hero__art img { aspect-ratio: 3 / 4; object-fit: cover; }
.hero em, .hero__content em { color: var(--ca-red); font-style: italic; }

/* Question list (CD QuestionList — the home hero "tool"). Desktop: one joined
   row of cells. Tablet: 2x2 (see the tablet block). Phone: stacked full-width
   rows, topic hidden. The 1px gap on a hairline background draws the joins. */
.question-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px;
  background: var(--border-hairline); border: 1px solid var(--border-hairline); margin: var(--space-7) 0;
}
.question-cell {
  background: var(--surface-card); color: var(--text-heading); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 10px; transition: var(--transition-colour);
}
.question-cell__topic { font-family: var(--font-structure); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.question-cell__question { font: var(--type-tool); color: var(--text-heading); }
.question-cell__meta { font-family: var(--font-structure); font-size: var(--fs-meta); color: var(--text-meta); white-space: nowrap; margin-top: 4px; }
.question-cell--book { background: var(--surface-inverse); }
.question-cell--book .question-cell__topic { color: var(--text-muted-inverse); }
.question-cell--book .question-cell__meta { color: var(--ca-red-pale); }
.question-cell--book .question-cell__question { color: var(--text-inverse); }
.question-cell--book:hover { background: var(--ca-navy-light); }
.question-cell--book:focus-visible { outline: 2px solid var(--ca-red); outline-offset: 2px; }

/* Numbered steps / chapters */
.numbered-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-7); }
.numbered-step__num { display: block; font: var(--fw-light) var(--fs-numeral)/1 var(--font-structure); color: var(--ca-red); margin-bottom: var(--space-3); }
.numbered-step__title { font-family: var(--font-structure); font-weight: var(--fw-semibold); font-size: 17px; color: var(--text-heading); margin-bottom: var(--space-2); }
.numbered-step__body { font: var(--type-body); color: var(--text-body); margin: 0; }
.numbered-steps--chapters {
  /* Unlike other sections, this heading has no lead paragraph before the
     content, so the heading's own small bottom margin left barely any
     breathing room above the first chapter — add it here instead. */
  grid-template-columns: 1fr; max-width: var(--measure); margin: var(--space-7) auto 0; gap: var(--space-8);
}
.numbered-steps--chapters .numbered-step { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-6); align-items: start; }
.numbered-steps--chapters .numbered-step__num { grid-row: span 2; margin-bottom: 0; }

/* Facts strip (CD About) — one white panel of joined cells, pulled up 60px so
   it sits on the navy/warm-white seam. The seam section is transparent so the
   hero shows through behind the overlapping part. Cells draw their own
   right/bottom hairlines and overlap by 1px so the joins never double up. */
.section--seam { margin-top: -60px; padding-top: 0; position: relative; z-index: 2; background: transparent; }
/* No orphans (readme: "Fixed-count grids never leave an orphan"): the four
   facts go 4 across -> 2x2 -> one column, never 3+1. Switched by the strip's
   own width (container query), so each fact keeps at least ~240px. */
.section--seam .section__inner { container-type: inline-size; }
.facts-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface-card); border: 1px solid var(--border-hairline); max-width: var(--content-width); margin: 0 auto;
  overflow: hidden;
}
.facts-strip__item {
  display: flex; flex-direction: column; gap: 6px; padding: clamp(16px, 12px + 1vw, 24px);
  border-right: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline);
  margin-right: -1px; margin-bottom: -1px;
}
.facts-strip__label { font-family: var(--font-structure); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.facts-strip__fact { font: var(--type-tool); color: var(--text-heading); }
@container (max-width: 959px) { .facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 479px) { .facts-strip { grid-template-columns: 1fr; } }

/* Statement (About, centred quote) */
.statement { max-width: var(--measure-lead); margin: 0 auto; text-align: center; border: none; padding: 0;
  font: var(--fw-regular) var(--fs-statement)/var(--lh-statement) var(--font-voice); color: var(--text-heading); font-style: italic; }

/* About hero (CD AboutPage) — navy interview. The coffee portrait fills the
   right 62% and fades in from navy across its left 40% (the one sanctioned
   gradient exception). Copy sits on the left, aligned to the content column
   (identical to CD at 1280px; on wider screens it stays in the column instead
   of drifting to the viewport edge). Phone: photo on top, fading down into
   navy, copy below. */
.about-hero { position: relative; overflow: hidden; min-height: 700px; background: var(--ca-navy); color: var(--text-inverse); }
/* Capped at 640px so laptops and wide desktops show the same framing as a
   1024px tablet (box ~635x700) instead of zooming further into the
   portrait-shaped photo as the screen widens; the rest is navy (Csilla,
   2026-09-25). */
.about-hero__photo { position: absolute; right: 0; top: 0; bottom: 0; width: min(62%, 640px); }
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; }
.about-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ca-navy) 0%, rgba(41,55,91,0) 40%); }
.about-hero__copy {
  position: relative; display: flex; flex-direction: column; gap: clamp(14px, 10px + 1vw, 26px);
  padding: 130px var(--content-gutter) 120px; max-width: 720px;
  margin-left: max(0px, calc((100% - var(--content-width)) / 2 - var(--content-gutter)));
}
.about-hero__copy .eyebrow { margin-bottom: 0; color: var(--text-muted-inverse); }
.about-hero h1 {
  margin: 0; font-family: var(--font-voice); font-style: italic; font-weight: var(--fw-regular);
  font-size: var(--fs-display-page); line-height: 1.02; letter-spacing: var(--ls-display); color: var(--text-inverse);
}
.about-hero h1 em { font-style: italic; color: inherit; }
.about-hero__lead { margin: 0; font-family: var(--font-voice); font-size: var(--fs-lead); line-height: 1.6; color: var(--ca-light-bg); max-width: 36ch; }

/* Portrait band (CD PortraitBand — founder trust band, every page). Photo +
   Lora statement; columns come from auto-fit (two side by side once each can
   be 420px, i.e. from ~860px; stacked photo-first below). The photo runs to
   the band's edges at its natural proportions (so the photo usually sets the
   band's height), with a viewport-scaled min-height; when the text column is
   taller, the image fills the stretched box and crops (object-fit: cover),
   never stretches. */
.portrait-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.portrait-band__photo { min-height: clamp(300px, 180px + 25vw, 480px); }
.portrait-band__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.portrait-band__content {
  padding: clamp(32px, 10px + 5.6vw, 110px) var(--content-gutter);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(16px, 12px + 1vw, 26px);
}
.portrait-band__quote { margin: 0; font: var(--type-statement); color: var(--text-heading); text-wrap: pretty; max-width: 22ch; }
.portrait-band__body { margin: 0; font-family: var(--font-voice); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-subheading); max-width: 46ch; }
.portrait-band__content .rule { display: block; width: var(--rule-accent-width); height: var(--rule-accent-height); background: var(--rule-accent); }
.portrait-band__cite { font-family: var(--font-structure); font-weight: var(--fw-semibold); font-size: 14px; color: var(--text-subheading); }
.portrait-band__content .cta-block { margin: 0; justify-content: flex-start; }
.portrait-band__content .cta-block .btn { min-height: 52px; }
.portrait-band__content .newsletter--inline { text-align: left; margin-top: 0; width: 100%; max-width: 46ch; }
.portrait-band__content .newsletter__row { justify-content: flex-start; }
@media (min-width: 860px) {
  .portrait-band--right .portrait-band__photo { order: 2; }
}
@media (min-width: 1280px) {
  .section--portrait .section__inner { padding: 0 var(--content-gutter); }
  .portrait-band--right .portrait-band__content { padding-left: 0; }
  .portrait-band--left .portrait-band__content { padding-right: 0; }
}

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.testimonial-card { background: var(--surface-card); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-card); padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.testimonial-card img { width: 64px; height: 64px; object-fit: cover; }
.testimonial-card blockquote { margin: 0; font: var(--type-body); font-style: italic; color: var(--text-body); }
.testimonial-card cite { font-family: var(--font-structure); font-style: normal; font-weight: var(--fw-semibold); font-size: 15px; color: var(--text-heading); }

/* Pricing table */
.pricing-table { max-width: var(--content-width); margin: 0 auto; }
.pricing-table__disclaimer { text-align: center; font: var(--type-caption); color: var(--text-muted); margin-top: var(--space-6); }
.pricing-table__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); margin-bottom: var(--space-8); }
.segmented-control { display: inline-flex; border: 1px solid var(--ca-navy); }
.segmented-control__btn {
  font: var(--type-button); font-size: 15px; background: transparent; color: var(--ca-navy); border: none;
  padding: 10px 20px; cursor: pointer; min-height: var(--tap-min); transition: var(--transition-colour);
}
.segmented-control__btn + .segmented-control__btn { border-left: 1px solid var(--ca-navy); }
.segmented-control__btn.is-active { background: var(--ca-navy); color: var(--ca-warm-white); }
.pricing-panel__heading { text-align: center; font: var(--type-section-head); color: var(--text-heading); margin: 0 0 var(--space-7); }
.pricing-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); align-items: start; }
.pricing-tier {
  background: var(--surface-card); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-card);
  padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--space-4); position: relative;
}
/* Recommended tier: CD's navy highlight — 2px navy border and a full-width
   navy bar across the top. Navy, not red, so the tier's red button stays the
   only red action on the screen. */
.pricing-tier--recommended {
  border: 2px solid var(--ca-navy); box-shadow: var(--shadow-card-hover);
  padding-top: calc(var(--card-padding) + 22px);
}
.pricing-tier__ribbon {
  position: absolute; left: -2px; right: -2px; top: -2px;
  background: var(--ca-navy); color: var(--text-inverse); font-family: var(--font-structure);
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  padding: 9px var(--card-padding);
}
.pricing-tier__name { margin: 0; font: var(--type-card-title); color: var(--text-heading); }
.pricing-tier__best-for { font: var(--type-caption); color: var(--text-muted); margin: 0; }
.pricing-tier__price { display: flex; flex-direction: column; gap: var(--space-1); }
.pricing-tier__amount { font-family: var(--font-structure); font-weight: var(--fw-bold); font-size: 32px; color: var(--text-heading); }
.pricing-tier__amount small { font-size: 15px; font-weight: var(--fw-regular); color: var(--text-muted); }
.pricing-tier__note { display: block; font: var(--type-caption); color: var(--text-muted); }
.pricing-tier__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.pricing-tier__features li { font: var(--type-body); font-size: var(--fs-body-min); color: var(--text-body); padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); }
.pricing-tier__features li:first-child { border-top: none; padding-top: 0; }
.pricing-tier .btn { width: 100%; }
.pricing-tier .newsletter--inline { padding: 0; border: none; margin: 0; }
/* Free tier signup: the email field fills the card's width, like the Subscribe button under it. */
.pricing-tier .newsletter__row input { flex: 1 1 100%; width: 100%; min-width: 0; }
/* Desktop (3 cards side by side): equal-height cards whose rows line up across
   all three (name, best for, price, features, button) via subgrid; the button
   row sits at the bottom. Every card reserves the ribbon's space at the top so
   the rows start level with the recommended card's. Tablet/phone stack the
   cards (one column), so there is nothing to line up there. */
@media (min-width: 1025px) {
  .pricing-tiers { align-items: stretch; grid-template-rows: repeat(5, auto); row-gap: 0; }
  .pricing-tier { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--space-4);
    padding-top: calc(var(--card-padding) + 22px); }
  .pricing-tier > :last-child { align-self: end; }
}

/* Reassurance strip / add-ons */
.reassurance-strip { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-7); margin: 0; padding: 0; }
.reassurance-strip li { font-family: var(--font-structure); font-weight: var(--fw-semibold); color: var(--text-heading); padding-left: var(--space-6); position: relative; }
.reassurance-strip li::before { content: "\2713"; position: absolute; left: 0; color: var(--ca-red); }
.feature { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) 0; border-top: 1px solid var(--border-hairline); max-width: var(--measure); margin: 0 auto; }
.feature:first-of-type { border-top: none; }
.feature__title { font-family: var(--font-structure); font-weight: var(--fw-semibold); font-size: 17px; color: var(--text-heading); display: flex; justify-content: space-between; gap: var(--space-4); }
.feature__price { color: var(--text-muted); font-weight: var(--fw-regular); white-space: nowrap; }
.feature__body { font: var(--type-body); font-size: var(--fs-body-min); color: var(--text-body); margin: 0; }

/* Accordion (CD Accordion) — separate white rows with a gap between them; the
   open row is outlined in red with a red minus, closed rows show a navy plus.
   The first question starts open. */
.accordion { max-width: var(--measure); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.accordion__row { background: var(--surface-card); border: 1px solid var(--border-hairline); transition: var(--transition-colour); }
.accordion__row[open] { border-color: var(--ca-red); }
.accordion__question {
  font: var(--type-button); line-height: 1.3; color: var(--text-heading); padding: 18px 24px;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: var(--tap-min);
}
.accordion__question::-webkit-details-marker { display: none; }
.accordion__question:focus-visible { outline: 2px solid var(--ca-red); outline-offset: 2px; }
.accordion__icon { flex-shrink: 0; }
.accordion__icon::before { content: "+"; font: var(--type-section-head); font-size: 24px; line-height: 1; color: var(--text-heading); }
.accordion__row[open] .accordion__icon::before { content: "\2212"; color: var(--text-accent); }
.accordion__answer { font: var(--type-body); font-size: var(--fs-body-min); color: var(--text-body); padding: 0 24px 22px; }

/* Topic filter (CD TopicFilter). Desktop/tablet: one row of joined cells, each
   with a 36px brand icon, label and "N articles"; the active topic turns
   navy (icon line flips to warm white via currentColor, red accent stays).
   Phone: a single sideways-scrolling row of chips (see the phone block). */
.topic-filter {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--surface-card); border: 1px solid var(--border-hairline);
}
.topic-filter__chip {
  display: flex; align-items: center; gap: 14px; padding: 22px; text-align: left; cursor: pointer;
  background: transparent; color: var(--text-heading); border: none; border-right: 1px solid var(--border-hairline);
  border-radius: 0; font-family: var(--font-structure); transition: var(--transition-colour); min-height: var(--tap-min);
}
.topic-filter__chip:last-child { border-right: none; }
.topic-filter__chip.is-active { background: var(--ca-navy); color: var(--text-inverse); }
.topic-filter__chip:focus-visible { outline: 2px solid var(--ca-red); outline-offset: -2px; }
.topic-filter__icon { width: 36px; height: 36px; flex: none; }
.topic-filter__label { display: block; font-weight: var(--fw-semibold); font-size: 17px; }
.topic-filter__count { display: block; font-size: var(--fs-meta); margin-top: 2px; color: var(--text-meta); font-weight: var(--fw-regular); }
.topic-filter__chip.is-active .topic-filter__count { color: var(--text-muted-inverse); }

/* Featured article */
.featured-article { display: block; background: var(--surface-card); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-card); padding: var(--card-padding); max-width: var(--content-width); margin: 0 auto; }
.featured-article:hover { box-shadow: var(--shadow-card-hover); }
.featured-article__title { font: var(--fw-regular) var(--fs-feature-title)/var(--lh-heading) var(--font-voice); color: var(--text-heading); margin: 0 0 var(--space-3); }
.featured-article__excerpt { font: var(--type-body); color: var(--text-body); margin: 0 0 var(--space-4); max-width: var(--measure); }
.featured-article__meta { font-family: var(--font-structure); font-size: var(--fs-meta); color: var(--text-muted); }

/* Article list (CD ArticleList — blog hub, home teaser, read next). Optional
   title bar over a 2px navy rule. Desktop row: date | topic | title | minutes.
   Phone: "topic · N min" above the title, date hidden. */
.article-list { display: flex; flex-direction: column; }
.article-list[hidden] { display: none; }
.article-list__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: 12px; border-bottom: 2px solid var(--ca-navy); }
.article-list__title { margin: 0; font-family: var(--font-structure); font-weight: var(--fw-semibold); font-size: 17px; color: var(--text-heading); }
.article-list__action { font-family: var(--font-structure); font-size: 14px; color: var(--text-meta); }
.article-row {
  display: grid; grid-template-columns: 110px 160px minmax(0, 1fr) 64px; gap: 24px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--border-hairline); color: var(--text-heading);
  min-height: var(--tap-min);
}
.article-row:hover .article-row__title { color: var(--ca-red); }
.article-row:focus-visible { outline: 2px solid var(--ca-red); outline-offset: 2px; }
.article-row__date { grid-column: 1; font-family: var(--font-structure); font-size: var(--fs-meta); color: var(--text-meta); }
.article-row__topic { grid-column: 2; font-family: var(--font-structure); font-size: 14px; color: var(--text-meta); }
.article-row__title { grid-column: 3; font-family: var(--font-voice); font-size: var(--fs-list-title); line-height: 1.3; color: var(--text-heading); transition: var(--transition-colour); }
.article-row__time { grid-column: 4; font-family: var(--font-structure); font-size: var(--fs-meta); color: var(--text-meta); text-align: right; white-space: nowrap; }

/* Author line + article contents (single article) */
.article-header { max-width: var(--measure); margin: 0 auto; text-align: left; }
.article-header h1 { font: var(--fw-regular) var(--fs-article-title)/var(--lh-title) var(--font-voice); color: var(--text-heading); margin: var(--space-3) 0 var(--space-6); }
.author-line { display: flex; align-items: center; gap: var(--space-4); }
.author-line img { width: 48px; height: 48px; object-fit: cover; }
.author-line__meta { display: flex; flex-direction: column; }
.author-line__name { font-family: var(--font-structure); font-weight: var(--fw-semibold); color: var(--text-heading); }
.author-line__detail { font-family: var(--font-structure); font-size: var(--fs-meta); color: var(--text-muted); }
/* "In this article" (CD ArticleContents). Wide screens: a sticky left rail whose current
   section is highlighted as you read (site.js). Below 1040px: one collapsible row above the
   text. The title block and the text share one column, so the rail hangs beside both. */
:root { --rail-w: 220px; --rail-gap: 56px; }
html { scroll-padding-top: calc(var(--header-height) + var(--space-5)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.article-body h2 { scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
.section--article-header { padding-bottom: var(--space-6); }
.section--article-body { padding-top: var(--space-6); }
.article-layout { max-width: var(--measure); margin: 0 auto; }
.article-rail { margin: 0 0 var(--space-6); font-family: var(--font-structure); }
.article-rail__label { display: none; }
.article-rail__toggle { display: none; }
.article-rail__list a {
  display: flex; align-items: center; min-height: 36px; font-size: 14px; line-height: 1.3;
  color: var(--text-heading); text-decoration: none; border-bottom: 1px solid var(--border-hairline);
  padding: var(--space-2) 0; transition: var(--transition-colour);
}
.article-rail__list a:hover { color: var(--ca-red); }
.article-rail__list a.is-active { color: var(--text-accent); font-weight: var(--fw-semibold); }
.article-rail__list a:focus-visible { outline: 2px solid var(--ca-red); outline-offset: 2px; }
/* Phones and tablets: a closed row that opens (only once site.js has made it collapsible) */
@media (max-width: 1039px) {
  .article-rail { background: var(--surface-card); border: 1px solid var(--border-hairline); }
  .article-rail__list a { padding: 0 var(--space-4); min-height: var(--tap-min); }
  .article-rail__list a:last-child { border-bottom: none; }
  .article-rail.is-js .article-rail__toggle {
    display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 52px;
    padding: 0 var(--space-4); background: none; border: none; cursor: pointer;
    font: var(--fw-semibold) 15px/1.3 var(--font-structure); color: var(--text-heading);
  }
  .article-rail__count { font-weight: var(--fw-regular); color: var(--text-meta); }
  /* a drawn chevron: no font glyph to go missing */
  .article-rail.is-js .article-rail__count::after {
    content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 2px 3px var(--space-3);
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  }
  .article-rail.is-js.is-open .article-rail__count::after { margin-bottom: -2px; transform: rotate(-135deg); }
  .article-rail.is-js .article-rail__list { display: none; border-top: 1px solid var(--border-hairline); }
  .article-rail.is-js.is-open .article-rail__list { display: block; }
}
@media (min-width: 1040px) {
  .section--article-header.has-rail .article-header {
    max-width: calc(var(--measure) + var(--rail-w) + var(--rail-gap));
    padding-left: calc(var(--rail-w) + var(--rail-gap));
  }
  .article-layout.has-rail {
    max-width: calc(var(--measure) + var(--rail-w) + var(--rail-gap));
    display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); column-gap: var(--rail-gap); align-items: start;
  }
  .article-layout.has-rail .article-rail {
    position: sticky; top: calc(var(--header-height) + var(--space-6)); margin: 0;
    max-height: calc(100vh - var(--header-height) - var(--space-8)); overflow-y: auto;
  }
  .article-layout.has-rail .article-rail__label {
    display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3);
  }
  .article-layout.has-rail .article-body { max-width: var(--measure); margin: 0; }
}

/* Example box */
/* Tax disclaimer: one step below body text, in stone. .prose p would otherwise win (more specific). */
.prose p.article-disclaimer { font-family: var(--font-voice); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-muted); border-top: 1px solid var(--border-hairline); padding-top: var(--space-4); margin-top: var(--space-8); }
.example-box { background: var(--surface-example); padding: var(--card-padding); max-width: var(--measure); margin: var(--space-6) auto; }
.prose .example-box__label { margin: 0 0 var(--space-3); font: var(--fw-regular) var(--fs-eyebrow)/1.3 var(--font-structure); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.prose .example-box__body > :last-child { margin-bottom: 0; }

/* Year bridge ("> [!year-bridge]"): opening balance -> what happened -> closing balance, top to bottom.
   White cards on the light-stone example ground; the result (==amount==) in red. */
.year-bridge { background: var(--surface-example); padding: var(--card-padding); margin: var(--space-6) 0; container-type: inline-size; }
.year-bridge__label { margin: 0 0 var(--space-4); font: var(--fw-regular) var(--fs-eyebrow)/1.3 var(--font-structure); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.year-bridge__step { display: grid; gap: var(--space-4); }
.year-bridge__step--pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2); }
.year-bridge__sides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.year-bridge__sides { display: grid; gap: var(--space-5); }
.year-bridge__panel { background: var(--surface-card); border: 1px solid var(--border-hairline); padding: var(--space-4); }
.prose .year-bridge__title { margin: 0 0 var(--space-3); font: var(--fw-semibold) 15px/1.35 var(--font-structure); color: var(--text-heading); }
.prose .year-bridge table { margin: 0; font: var(--type-caption); color: var(--text-body); }
.prose .year-bridge th, .prose .year-bridge td { border: 0; padding: 3px 0; vertical-align: top; }
.prose .year-bridge th { font: var(--fw-semibold) var(--fs-meta)/1.3 var(--font-structure); color: var(--text-muted); border-bottom: 1px solid var(--border-hairline); padding-bottom: var(--space-2); }
.prose .year-bridge .num { text-align: right; padding-left: var(--space-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prose .year-bridge tr.sub td { padding-top: var(--space-3); font-weight: var(--fw-semibold); color: var(--text-heading); }
.prose .year-bridge tr:first-child.sub td { padding-top: var(--space-2); }
.prose .year-bridge tr.total td { border-top: 1px solid var(--text-heading); padding-top: var(--space-2); font-weight: var(--fw-semibold); color: var(--text-heading); }
.year-bridge mark { background: none; color: var(--text-accent); font-weight: var(--fw-semibold); }
.year-bridge__arrow { display: flex; justify-content: center; align-items: center; color: var(--text-muted); }
.year-bridge__arrow--down { padding: var(--space-2) 0; }
.year-bridge__arrow--across { color: var(--text-accent); }  /* carries the red result from one panel to the next */
.prose .year-bridge__note { margin: var(--space-4) 0 0; font: var(--type-caption); color: var(--text-muted); }
@container (max-width: 559px) {
  .year-bridge__step--pair, .year-bridge__sides { grid-template-columns: 1fr; }
  .year-bridge__arrow--across svg { transform: rotate(90deg); }
}

/* Short answer (CD ShortAnswer): the answer before the explanation, as the first block of an article */
.short-answer { background: var(--surface-card); border: 1px solid var(--border-hairline); padding: var(--card-padding) clamp(20px, 14px + 1.5vw, 34px); margin: 0 0 var(--space-6); }
.prose .short-answer__label { margin: 0 0 10px; font: var(--fw-semibold) 14px/1.3 var(--font-structure); color: var(--text-accent); }
.prose .short-answer__text p { margin: 0; font: var(--fw-semibold) clamp(18px, 16.7px + 0.337vw, 21px)/1.5 var(--font-structure); color: var(--text-heading); text-wrap: pretty; }
.prose .short-answer__text p + p { margin-top: var(--space-3); }
.prose .short-answer__text ul, .prose .short-answer__text ol { margin: var(--space-3) 0 0; }
.prose .short-answer__text li { margin: 0 0 var(--space-2); font: var(--fw-regular) clamp(17px, 15.7px + 0.337vw, 20px)/1.5 var(--font-structure); color: var(--text-heading); }
.prose .short-answer__text li:last-child { margin-bottom: 0; }

/* Call bar (CD CallBar — phone only). Slim white bar pinned to the bottom
   through the middle of an article: small photo, one line, red button. Shown
   once the article body is under way, hidden again once the closing founder
   band comes into view (site.js). */
.call-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--surface-card); border-top: 1px solid var(--border-hairline); box-shadow: var(--shadow-card-hover);
  padding: 10px 12px 10px 16px; align-items: center; gap: 12px;
  transition: transform 240ms var(--ease-standard);
}
.call-bar img { width: 40px; height: 40px; object-fit: cover; object-position: 32% 22%; flex: none; }
.call-bar span { flex: 1; font-family: var(--font-structure); font-weight: var(--fw-semibold); font-size: 14px; line-height: 1.3; color: var(--text-heading); }
.call-bar .btn { flex: none; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.call-bar--hidden { transform: translateY(110%); }

/* Newsletter */
.newsletter--footer { max-width: var(--content-width); margin: 0 auto var(--space-7); text-align: center; }
.newsletter--footer h3 { font: var(--fw-regular) var(--fs-statement)/var(--lh-statement) var(--font-voice); color: var(--text-inverse); margin: 0 0 var(--space-3); }
.newsletter--footer p { font: var(--type-body); font-size: var(--fs-body-min); color: var(--ca-secondary); margin: 0 0 var(--space-5); }
.newsletter__row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.newsletter__row input {
  background: var(--surface-field); border: 1px solid var(--border-hairline); padding: var(--space-4);
  font: var(--type-body); font-size: var(--fs-body-min); min-width: 240px; min-height: var(--tap-min); color: var(--ca-navy);
}
.newsletter__fine { font: var(--type-caption); color: var(--ca-secondary); margin-top: var(--space-3); }
.newsletter__success { font: var(--type-body); color: var(--text-inverse); }
.newsletter--inline { border-top: 1px solid var(--border-hairline); padding-top: var(--space-6); margin-top: var(--space-6); text-align: center; }
.newsletter--inline .newsletter__lead { font: var(--type-caption); color: var(--text-muted); margin: 0 0 var(--space-4); }
.newsletter--inline .newsletter__fine { color: var(--text-muted); }
.newsletter__fine a { color: inherit; }

/* Contact page */
.contact-hero { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-9); align-items: stretch; }
.contact-hero__photo { position: relative; overflow: hidden; min-height: 360px; }
.contact-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); max-width: var(--content-width); margin: 0 auto; }
.contact-card { background: var(--surface-card); border: 1px solid var(--border-hairline); box-shadow: var(--shadow-card); padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--space-4); scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
.contact-card--primary { border-color: var(--ca-red); }
.contact-card__title { margin: 0; font: var(--type-section-head); font-size: var(--fs-card-title); color: var(--text-heading); }
.contact-card__lead { font: var(--type-body); color: var(--text-body); margin: 0; }
.contact-card__steps { margin: 0; padding-left: 1.2em; font: var(--type-body); font-size: var(--fs-body-min); color: var(--text-body); }
.contact-card .btn { align-self: flex-start; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-structure); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.field input, .field select, .field textarea {
  background: var(--surface-field); border: 1px solid var(--border-hairline); padding: var(--space-4);
  font: var(--type-body); font-size: var(--fs-body-min); font-family: var(--font-voice); color: var(--ca-navy);
  text-transform: none; letter-spacing: normal; min-height: var(--tap-min);
}
.field textarea { min-height: 120px; resize: vertical; }
/* Character count under the message box: quiet, lower case, not a shouty label. */
.field__count { font: var(--type-caption); color: var(--text-muted); text-transform: none; letter-spacing: normal; }
/* Newsletter opt-in on the contact form: a tick box reads as body copy, not as a
   field label, so it opts out of .field's uppercase treatment. */
.field-check { display: flex; gap: var(--space-3); align-items: flex-start; font: var(--type-body); font-size: var(--fs-body-min); color: var(--text-body); }
.field-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.2em; accent-color: var(--ca-red); }
.contact-form__success { font: var(--type-body); color: var(--text-heading); }
.contact-form__error, .newsletter__error { font: var(--type-body); font-size: var(--fs-body-min); color: var(--ca-red); margin: 0; }
/* On navy the red would fail contrast, so the footer's error uses warm white. */
.newsletter--footer .newsletter__error { color: var(--text-inverse); }
/* A submitting button stays put and just reads as unavailable — no spinner. */
.contact-form button[aria-busy="true"], .newsletter button[aria-busy="true"] { opacity: 0.6; cursor: progress; }
/* Honeypot: off-screen rather than display:none, which bots check for. */
.form-decoy { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.company-strip { text-align: center; font: var(--type-caption); color: var(--text-muted); margin: 0; }

/* Screen-reader-only text (labels that are visually implied) */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Newsletter confirmation page: the hero's quieter tip line, and a narrow
   hairline list of places to start reading. */
.confirmed__tip { margin: 0; font: var(--type-body); font-style: italic; color: var(--text-muted); max-width: var(--measure-lead); }
.confirmed__wait { max-width: 640px; margin: 0 auto; }

/* 404 page: a navy band with the surprised portrait (flat, portrait crop)
   beside a blog search and the main pages as a hairline link list. Stacks on
   phones. Everything inside is styled for the navy ground (section--notfound). */
.notfound { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--space-9); align-items: stretch; max-width: 1000px; margin: 0 auto; }
/* Portrait crop (3:4) at least; if the text column is taller, the photo grows to
   match it (cover: it scales and crops, never stretches). */
.notfound__photo img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.notfound__find { display: flex; flex-direction: column; gap: var(--space-5); }
/* Flow: pages first, then "...or search the blog." pinned to the bottom, level
   with the photo's bottom edge (results, when shown, extend below it). */
.notfound__photo { align-self: stretch; }
.notfound__search { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); }
.notfound__lead { margin: 0; font: var(--type-body); font-style: italic; color: var(--text-body); }
.site-search { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-search input {
  flex: 1 1 220px; min-width: 0; min-height: var(--tap-min); padding: var(--space-4);
  background: var(--surface-field); border: 1px solid var(--border-hairline); border-radius: 0;
  font: var(--type-body); font-size: var(--fs-body-min); color: var(--ca-navy);
}
.site-search input:focus-visible { outline: 2px solid var(--ca-red); outline-offset: 2px; }
.site-search__results:empty { display: none; }
.site-search__heading { margin: 0 0 var(--space-2); font-family: var(--font-structure); font-weight: var(--fw-semibold); font-size: 15px; color: var(--text-heading); }
.site-search__none { margin: 0; font: var(--type-caption); color: var(--text-muted); }
/* Results sit in a narrow column, so always use the compact row: "topic · N min" above the title. */
.site-search__results .article-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; padding: 14px 0; }
.site-search__results .article-row__date { display: none; }
.site-search__results .article-row__topic { order: 1; font-size: var(--fs-meta); }
.site-search__results .article-row__time { order: 2; text-align: left; }
.site-search__results .article-row__topic ~ .article-row__time::before { content: "\00a0\00b7\00a0"; }
.site-search__results .article-row__title { order: 3; flex-basis: 100%; }
.link-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-hairline); }
.link-list__item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: var(--tap-min); padding: 16px 0; border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-voice); font-size: var(--fs-list-title); color: var(--text-heading);
}
.link-list__item span { color: var(--text-link); transition: transform var(--duration-base) var(--ease-standard); }
.link-list__item:hover { color: var(--text-accent); }
.link-list__item:hover span { transform: translateX(3px); }
.link-list__item:focus-visible { outline: 2px solid var(--ca-red); outline-offset: 2px; }
/* On the navy band: warm-white type, navy-light hairlines, red only as accents */
.section--notfound .notfound__lead { color: var(--ca-warm-white); }
.section--notfound .site-search input { border-color: var(--ca-navy-light); }
.section--notfound .site-search__heading { color: var(--text-inverse); }
.section--notfound .site-search__none { color: var(--text-muted-inverse); }
.section--notfound .link-list { border-top-color: var(--ca-navy-light); }
.section--notfound .link-list__item { color: var(--text-inverse); border-bottom-color: var(--ca-navy-light); }
.section--notfound .link-list__item:hover { color: var(--ca-red-pale); }
.section--notfound .article-row { color: var(--text-inverse); border-bottom-color: var(--ca-navy-light); }
.section--notfound .article-row__title { color: var(--text-inverse); }
.section--notfound .article-row:hover .article-row__title { color: var(--ca-red-pale); }
.section--notfound .article-row__topic, .section--notfound .article-row__time { color: var(--text-muted-inverse); }
@media (max-width: 760px) {
  .notfound { grid-template-columns: 1fr; gap: var(--space-7); }
  .notfound__photo { max-width: 300px; margin: 0 auto; width: 100%; }
}

/* Tablet (761-1024px): a compressed desktop, not an enlarged mobile. Two-
   column hero/photo layouts are KEPT here (only collapse to single-column,
   full-width stacking at the real mobile breakpoint below) so portraits stay
   proportionally sized instead of ballooning to full viewport width. Fixed-
   count grids (4 questions, 3 pricing tiers, 3 steps) get an explicit column
   count instead of letting `auto-fit` wrap them into an uneven, left-aligned
   orphan row. */
@media (max-width: 1024px) {
  /* About hero: text must never cover the face ("Photos of real people",
     rule 3). At tablet widths the face starts at ~65% of the screen width
     (photo at the right 62%, face at ~44% across it), so the copy column
     ends 24px before that; the title then wraps to two lines as on desktop.
     Measured 761-1024px: without this the one-line title ran 48-88px across
     the face up to ~955px. Recheck if the About photo or its focus changes. */
  .about-hero__copy { max-width: calc(65% + var(--content-gutter) - 24px); }
  .question-list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-tiers { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .numbered-steps:not(.numbered-steps--chapters) { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
}

/* Mobile (<=760px, matches the design system's own breakpoint token,
   --breakpoint-mobile). Everything collapses to a single stacked column. */
@media (max-width: 760px) {
  .site-nav, .site-header__inner .site-nav { display: none; }
  .site-header__toggle { display: flex; }
  .site-header__logo { width: 120px; }
  .prose h1 { font-size: 34px; }
  .prose h2 { font-size: 28px; }
  .call-bar { display: flex; }
  .article-body { padding-bottom: 80px; }

  /* Article list: "topic · N min" line above the title, date hidden */
  .article-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; padding: 18px 0; }
  .article-row__date { display: none; }
  .article-row__topic { order: 1; font-size: var(--fs-meta); }
  .article-row__time { order: 2; text-align: left; }
  .article-row__topic ~ .article-row__time::before { content: "\00a0\00b7\00a0"; }
  .article-row__title { order: 3; flex-basis: 100%; }

  /* Question list: stacked full-width rows, edge to edge, topic hidden */
  .question-list {
    grid-template-columns: 1fr; margin-left: calc(-1 * var(--content-gutter)); margin-right: calc(-1 * var(--content-gutter));
    border-left: none; border-right: none;
  }
  .question-cell {
    flex-direction: row; justify-content: space-between; align-items: center; gap: 14px;
    min-height: 64px; padding: 12px var(--content-gutter);
  }
  .question-cell__topic { display: none; }
  .question-cell__meta { margin-top: 0; }

  /* Topic filter: one sideways-scrolling row of chips, edge to edge */
  .topic-filter {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; background: none; border: none;
    margin: 0 calc(-1 * var(--content-gutter)); padding: 0 var(--content-gutter);
  }
  .topic-filter::-webkit-scrollbar { display: none; }
  .topic-filter__chip {
    flex: none; gap: 8px; padding: 0 16px; background: var(--surface-card); border: 1px solid var(--border-hairline);
  }
  .topic-filter__chip:last-child { border-right: 1px solid var(--border-hairline); }
  .topic-filter__chip.is-active { border-color: var(--ca-navy); }
  .topic-filter__chip.is-active .topic-filter__icon { display: none; }
  .topic-filter__icon { width: 24px; height: 24px; }
  .topic-filter__text, .topic-filter__label, .topic-filter__count { display: inline; }
  .topic-filter__label { font-size: 15px; }
  .topic-filter__count { font-size: 15px; margin-top: 0; }
  .topic-filter__count-word { display: none; }

  .about-hero { min-height: 0; }
  .about-hero__photo { position: relative; width: 100%; height: 400px; }
  .about-hero__photo::after { background: linear-gradient(180deg, rgba(41,55,91,0) 55%, var(--ca-navy) 100%); }
  .about-hero__copy { padding: 8px var(--content-gutter) 76px; margin-left: 0; }

  .hero { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 320px; }
  .contact-hero { grid-template-columns: 1fr; }
}

/* Hungarian landing page (/hu/, lib/hu_page.py) */
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.landing-actions--center { justify-content: center; }
.landing-actions .btn { min-height: 52px; }
.site-header__aside { margin-left: auto; font-family: var(--font-structure); font-size: 15px; color: var(--text-heading); }
.site-header__aside:hover { color: var(--text-accent); }
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-7); max-width: var(--content-width); margin: 0 auto; }
.value-item { display: flex; flex-direction: column; gap: var(--space-3); }
.value-item__icon { width: 56px; height: 56px; display: block; }
.value-item__title { margin: 0; font: var(--type-card-title); color: var(--text-heading); }
.value-item__body { margin: 0; font: var(--type-body); color: var(--text-body); }
.landing-fineprint { max-width: var(--measure); margin: var(--space-6) auto 0; text-align: center; font: var(--type-caption); color: var(--text-muted); }
.reassurance-strip + .landing-fineprint { margin-top: var(--space-6); }
@media (max-width: 760px) {
  .landing-actions { flex-direction: column; align-items: stretch; }
  .landing-actions .btn { width: 100%; text-align: center; }
  .landing-actions .text-link { text-align: center; }
}

/* A headline with a long word (Hungarian "kommunikációval") can't take the 96px display size: it would run out of its column. */
.hero.hero--long h1 { font-size: clamp(34px, 1.6vw + 28px, 60px); overflow-wrap: break-word; }
.contact-card--short { align-self: start; }  /* a short card beside a taller form keeps its own height */