/* ==========================================================================
   Circle 26 — site stylesheet
   Tokens preserved verbatim from the original design system.
   Everything below the token layer replaces the 172 inline style attributes
   that were in the artifact export.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — DM Sans variable, self-hosted
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/dmsans-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;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/dmsans-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;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Core neutrals — light */
  --paper: #F7F5EF;         /* page/section background. Never pure white. */
  --ink: #1C1B18;           /* headings, primary text, borders, primary buttons */
  --body: #3A3833;          /* body copy, secondary text */
  --muted: #8C887C;         /* labels, captions, metadata, disabled states */
  --hairline: #DDD8CA;      /* standard dividers, borders, input outlines */
  --surface: #EFEBE0;       /* sunken fill: table headers, label columns, wells.
                               Sits between --paper and --hairline-soft. */
  --surface-soft: #F3F0E7;  /* half-step tint, for alternating rows */
  --hairline-soft: #E7E3D6; /* subtle dividers, table row separators */

  /* Dark / inverse */
  --night: #0B0B0B;
  --night-ink: #F3F1E9;
  --night-muted: #8E96A3;
  --night-hairline: #39414D;
  --night-accent: #8FA9CF;

  /* Brand accent — blue. The ONLY accent hue; extend with tints/shades only. */
  --accent: #5B7DB1;
  --accent-deep: #41608F;
  --accent-tint: rgba(91, 125, 177, 0.13);

  /* Semantic / status — status & data-viz only, never decorative */
  --positive: #7A8B6F;
  --positive-text: #5C6B52;
  --positive-tint: rgba(122, 139, 111, 0.12);
  --warning: #C2922E;
  --warning-text: #96701F;
  --warning-tint: rgba(194, 146, 46, 0.11);
  --negative: #A8563F;
  --negative-text: #8F4530;
  --negative-tint: rgba(168, 86, 63, 0.10);

  /* Semantic aliases */
  --surface-page: var(--paper);
  --surface-card: var(--paper);
  --surface-inverse: var(--night);
  --text-primary: var(--ink);
  --text-body: var(--body);
  --text-muted: var(--muted);
  --text-inverse: var(--night-ink);
  --border-default: var(--hairline);
  --border-soft: var(--hairline-soft);
  --border-emphasis: var(--ink);
  --link: var(--accent);
  --link-hover: var(--accent-deep);

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale */
  --text-hero-size: 60px;  --text-hero-weight: var(--weight-medium);    --text-hero-tracking: -0.015em; --text-hero-leading: 1.08;
  --text-h1-size: 29px;    --text-h1-weight: var(--weight-medium);      --text-h1-tracking: -0.01em;    --text-h1-leading: 1.18;
  --text-h3-size: 21px;    --text-h3-weight: var(--weight-medium);      --text-h3-tracking: normal;     --text-h3-leading: 1.3;
  --text-h4-size: 16px;    --text-h4-weight: var(--weight-semibold);    --text-h4-tracking: normal;     --text-h4-leading: 1.3;
  --text-lede-size: 18px;  --text-lede-weight: var(--weight-regular);   --text-lede-tracking: normal;   --text-lede-leading: 1.6;
  --text-body-size: 16px;  --text-body-weight: var(--weight-regular);   --text-body-tracking: normal;   --text-body-leading: 1.65;
  --text-small-size: 14px; --text-small-weight: var(--weight-regular);  --text-small-tracking: normal;  --text-small-leading: 1.5;
  --text-label-size: 13px; --text-label-weight: var(--weight-bold);     --text-label-tracking: 0.3em;   --text-label-leading: 1.4;
  --text-micro-size: 11px; --text-micro-weight: var(--weight-semibold); --text-micro-tracking: 0.16em;  --text-micro-leading: 1.4;
  --text-stat-size: 40px;  --text-stat-weight: var(--weight-medium);    --text-stat-tracking: -0.02em;  --text-stat-leading: 1.05;

  /* 4px base grid */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;

  /* Radius — restrained. No bubbly radii on content. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-tile: 14px;

  /* Borders */
  --border-width: 1px;
  --border-width-emphasis: 1.5px;

  /* Shadows — none on content surfaces/cards. Overlays only. */
  --shadow-overlay: 0 8px 28px rgba(28, 27, 24, 0.16);
  --shadow-none: none;

  /* Layout */
  --wrap: 1120px;
  --wrap-wide: 1240px;
  --gutter: clamp(20px, 6vw, 64px);
  --section-y: clamp(45px, 8vw, 108px);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header rather than hiding under it. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
}
.skip-link:focus { left: 8px; top: 8px; color: var(--paper); }

.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;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.wrap--wide { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: 900px; }
.wrap--prose { max-width: 640px; }

.section {
  padding: var(--section-y) var(--gutter);
}
.section--ruled { border-top: var(--border-width) solid var(--hairline); }
.section--dark { background: var(--night); padding: clamp(42px, 8vw, 100px) var(--gutter); }

.stack { display: flex; flex-direction: column; }
.stack--sm { gap: var(--space-3); }
.stack--md { gap: 18px; }
.stack--lg { gap: 30px; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 80px;
  align-items: start;
}
.split--aside { grid-template-columns: minmax(280px, 1fr) minmax(260px, 400px); }
@media (max-width: 860px) { .split--aside { grid-template-columns: 1fr; gap: 48px; } }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
}
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Hairline-joined panel grid: 1px gap over a hairline background */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.panel-grid--steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Measure and rhythm utilities — the only "utility" layer, kept deliberately
   small so section spacing stays readable rather than scattered inline.
   The margin utilities live at the very end of this file (section 18) so
   they always win against component rules. */
.measure-sm { max-width: 660px; }
.measure-md { max-width: 720px; }
.measure-lg { max-width: 820px; }
.measure-xl { max-width: 1000px; }

.stack--intro { gap: 22px; }
.stack--about { gap: 26px; }
.stack--band { gap: 48px; }
.stack--gap44 { gap: 44px; }

/* A .stack is a flex column, so children stretch to full width by default.
   Buttons and inline links should hug their content instead. */
.stack > .btn, .stack > .link-underline { align-self: flex-start; }
.stack--guide { align-items: flex-start; gap: 0; }

/* Only the browser's default list margin is removed here. Using the `margin`
   shorthand would also wipe out any margin utility on the same element. */
.list-reset { list-style: none; margin-block: 0; margin-inline: 0; padding: 0; }

/* --------------------------------------------------------------------------
   5. Type
   -------------------------------------------------------------------------- */
.kicker {
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking);
  line-height: var(--text-label-leading);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.kicker--dark { color: var(--night-accent); }

.hero__title {
  font-size: clamp(44px, 8.6vw, 62px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
  margin: 22px 0 0;
  text-wrap: balance;
}

.h2 {
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.012em;
  line-height: 1.13;
  color: var(--ink);
  text-wrap: balance;
}

.h3 {
  font-size: 20px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--ink);
}
.h3--lg { font-size: 21px; }
.h3--sm { font-size: 18px; }

.lede {
  font-size: 20px;
  line-height: 1.62;
  color: var(--body);
}
.hero__lede { margin-top: 30px; max-width: 620px; }

.prose { font-size: 19px; line-height: 1.66; color: var(--body); }
.prose strong { color: var(--ink); font-weight: var(--weight-medium); }
.lede strong { color: var(--ink); font-weight: var(--weight-medium); }

.body-sm { font-size: 16px; line-height: 1.6; color: var(--body); }
.body-sm--dark { color: var(--night-muted); }
.body-xs { font-size: 15px; line-height: 1.58; color: var(--body); }

.pullquote {
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.32;
  color: var(--night-ink);
  text-wrap: balance;
}
.pullquote em { font-style: normal; color: var(--accent); }

.statement {
  font-size: 22px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
  max-width: 760px;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--accent-deep); }

.eyebrow {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.meta {
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--muted);
}
.meta--strong { font-weight: var(--weight-semibold); }

/* --------------------------------------------------------------------------
   6. Buttons and inline links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  padding: 14px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--primary {
  color: var(--paper);
  background: var(--ink);
  border: none;
}
.btn--primary:hover { background: var(--accent-deep); color: var(--paper); }

.btn--secondary {
  color: var(--ink);
  background: transparent;
  border: var(--border-width) solid var(--hairline);
}
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }

.btn--text {
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 14px 10px;
}
.btn--text:hover { color: var(--accent-deep); }

.btn--sm { font-size: 14px; padding: 10px 20px; }

.link-underline {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--accent-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
  white-space: nowrap;
}
.link-underline:hover {
  border-bottom-color: var(--accent-deep);
  color: var(--accent-deep);
}
.link-underline--lg { font-size: 16px; align-self: flex-start; white-space: normal; }

/* --------------------------------------------------------------------------
   7. Site header / navigation
      Desktop: a single full-width mega panel shared by all three menus.
      Below 1080px: a full-screen overlay sliding in from the right.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--border-width) solid var(--hairline);
}
.site-header__inner {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 18px var(--gutter);
}

.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__mark { font-size: 24px; line-height: 1; }
.logo__word { font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.42em; }

/* --- Desktop triggers ----------------------------------------------------- */
.nav__list { display: flex; align-items: center; gap: var(--space-1); }
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--body);
  background: transparent;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color 0.15s ease;
}
.nav__trigger:hover,
.nav__trigger[aria-expanded='true'] { color: var(--ink); }
.nav__chevron { color: var(--muted); transition: transform 0.18s ease, color 0.15s ease; }
.nav__trigger:hover .nav__chevron { color: var(--ink); }
.nav__trigger[aria-expanded='true'] .nav__chevron { transform: rotate(180deg); color: var(--ink); }

.nav__ctas { display: flex; align-items: center; gap: 12px; }

/* --- Desktop mega panel --------------------------------------------------- */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 45;
  background: var(--paper);
  border-bottom: var(--border-width) solid var(--hairline);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.site-header[data-open] .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__panel-inner {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding: 40px var(--gutter) 44px;
  display: flex;
  gap: 72px;
  align-items: flex-start;
}
.nav__col { display: flex; flex-direction: column; gap: 32px; flex: 1 1 0; min-width: 0; }

.nav__group { display: flex; flex-direction: column; gap: 20px; }
.nav__group-heading {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
  border-bottom: var(--border-width) solid var(--hairline);
}
.nav__links { display: flex; flex-direction: column; gap: 20px; }

.nav__link { display: flex; gap: 14px; align-items: flex-start; padding: 2px 0; }
.nav__link-icon { color: var(--body); flex-shrink: 0; margin-top: 2px; transition: color 0.15s ease; }
.nav__link:hover .nav__link-icon { color: var(--accent-deep); }
.nav__link-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav__link-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  transition: color 0.15s ease;
}
.nav__link:hover .nav__link-label { color: var(--accent-deep); }
.nav__link-ext { color: var(--muted); }
.nav__link-desc { font-size: 13px; line-height: 1.45; color: var(--muted); max-width: 260px; }

.nav__tag {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: var(--border-width) solid var(--hairline);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* --- Promoted card -------------------------------------------------------- */
.nav__promo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 4px;
}
.nav__promo-head { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-deep); }
.nav__promo-eyebrow {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.nav__promo-label { font-size: 15px; font-weight: var(--weight-semibold); color: var(--ink); }
.nav__promo-desc { font-size: 13px; line-height: 1.45; color: var(--body); }
.nav__promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--accent-deep);
  margin-top: 2px;
  transition: transform 0.15s ease;
}
.nav__promo:hover .nav__promo-cta { transform: translateX(3px); }

/* --- Burger --------------------------------------------------------------- */
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--ink);
}
.nav__burger:hover { border-color: var(--ink); }
.nav__burger-bars { display: block; width: 18px; }
.nav__burger-bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.nav__burger-bars span + span { margin-top: 4px; }

/* --- Breakpoint: hide desktop nav, show burger ---------------------------- */
@media (max-width: 1079px) {
  .nav, .nav__ctas, .nav__dropdown { display: none; }
  .nav__burger { display: inline-flex; }
  .site-header__inner { padding: 14px var(--gutter); }
}

/* --------------------------------------------------------------------------
   7b. Mobile / tablet overlay
   -------------------------------------------------------------------------- */
.mnav { position: fixed; inset: 0; z-index: 90; }
.mnav[hidden] { display: none; }

.mnav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 24, 0.4);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.mnav.is-open .mnav__scrim { opacity: 1; }

.mnav__sheet {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  background: var(--paper);
  border-left: var(--border-width) solid var(--hairline);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.mnav.is-open .mnav__sheet { transform: translateX(0); }

.mnav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 18px var(--space-4);
  border-bottom: var(--border-width) solid var(--hairline);
  flex-shrink: 0;
}
.mnav__close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--ink);
  cursor: pointer;
}
.mnav__close:hover { border-color: var(--ink); }

.mnav__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-4) var(--space-5); }

.mnav__section { border-bottom: var(--border-width) solid var(--hairline); }
.mnav__acc {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: transparent;
  border: none;
  padding: 20px 2px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-align: left;
}
.mnav__chev { color: var(--muted); transition: transform 0.2s ease; flex-shrink: 0; }
.mnav__acc[aria-expanded='true'] .mnav__chev { transform: rotate(180deg); color: var(--ink); }
.mnav__acc-body { padding: 0 2px 20px; }
.mnav__acc-body[hidden] { display: none; }

.mnav__heading {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: var(--border-width) solid var(--hairline-soft);
}
.mnav__heading:not(:first-child) { margin-top: 26px; }
.mnav__links { display: flex; flex-direction: column; }

.mnav__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  border-radius: var(--radius-md);
}
.mnav__link:active { background: var(--accent-tint); }
.mnav__link-icon { color: var(--accent-deep); flex-shrink: 0; display: inline-flex; }
.mnav__link-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mnav__link-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.mnav__link-desc { font-size: 13px; line-height: 1.45; color: var(--muted); }
.mnav__link-go { color: var(--hairline); flex-shrink: 0; }
.mnav__link:hover .mnav__link-go { color: var(--accent-deep); }

.nav__promo--mobile { margin-top: 18px; }

.mnav__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-4);
  border-top: var(--border-width) solid var(--hairline);
  background: var(--paper);
  flex-shrink: 0;
}
.mnav__foot .btn { justify-content: center; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .mnav__sheet, .mnav__scrim { transition: none; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: max(680px, 74vh);
  display: flex;
  align-items: center;
  padding: clamp(37px, 8vw, 88px) var(--gutter) clamp(40px, 8vw, 96px);
}
/* The brand mark, 〇 (U+3007) — the single source of truth for the circle.
   Used at logo size in the header and footer, and blown up as a watermark
   behind hero sections. Same glyph everywhere, so it can never drift. */
.mark { font-weight: var(--weight-light); line-height: 1; }

/* Hero watermark. Values translated from the Lean Family Office Guide cover,
   retuned for a light background: dark ink at low opacity reads stronger than
   the guide's light-on-dark, so the size goes up and the opacity stays low. */
.hero__decor {
  position: absolute;
  right: -200px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 760px;
  line-height: 1;
  font-weight: var(--weight-light);
  color: rgba(28, 27, 24, 0.055);
  pointer-events: none;
  user-select: none;
}
/* On --night backgrounds, matching the guide cover exactly. */
.hero__decor--dark { color: rgba(243, 241, 233, 0.05); font-size: 700px; right: -260px; }

.hero__inner { position: relative; z-index: 1; }
.hero__content { display: flex; flex-direction: column; align-items: flex-start; max-width: 680px; }
.hero__actions { display: flex; align-items: center; gap: 28px; margin-top: 40px; flex-wrap: wrap; }

@media (max-width: 1024px) { .hero__secondary { display: none; } }
@media (max-width: 900px)  { .hero__decor { font-size: 560px; right: -180px; } }
@media (max-width: 640px)  { .hero__decor { display: none; } }

/* --------------------------------------------------------------------------
   9. Cards and panels
   -------------------------------------------------------------------------- */
.panel {
  background: var(--paper);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.panel--step { padding: 34px 28px; }
.panel__icon { color: var(--accent-deep); }
.panel__step-num {
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  color: var(--accent-deep);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--paper);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 34px 30px;
  transition: border-color 0.15s ease;
}
.card:hover { border-color: var(--ink); }
.card__quote {
  font-size: 17px;
  line-height: 1.5;
  color: var(--accent-deep);
  font-style: italic;
}
.card__more {
  margin-top: auto;
  padding-top: 10px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--accent-deep);
}

.card--article { padding: 28px; }
.card--article .h3 {
  font-size: 21px;
  font-weight: var(--weight-medium);
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.card__body { flex: 1; }
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: var(--border-width) solid var(--hairline);
}

/* Event cards */
.card--event { padding: 0; overflow: hidden; gap: 0; }
.card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-bottom: var(--border-width) solid var(--hairline);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__rings {
  width: 132px; height: 132px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  opacity: 0.55;
}
.card__rings::after {
  content: '';
  width: 78px; height: 78px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
}
.card__tag {
  position: absolute;
  top: 16px; left: 16px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.card__content {
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.card__date {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  color: var(--accent-deep);
}
.card__foot--event { border-top: none; margin-top: auto; padding-top: 14px; }
.card__place { font-size: 14px; font-weight: var(--weight-semibold); color: var(--muted); }
.card__cta { font-size: 14px; font-weight: var(--weight-semibold); color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   10. Numbers band
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stat {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stat--rule { border-right: var(--border-width) solid var(--hairline); }
.stat--accent { background: var(--accent-tint); }
@media (max-width: 559px) {
  .stat--rule { border-right: none; border-bottom: var(--border-width) solid var(--hairline); }
}
.stat__label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat--accent .stat__label { color: var(--accent-deep); }
.stat__value {
  font-size: clamp(40px, 6vw, 56px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.stat__value em { font-style: normal; color: var(--muted); font-size: 0.5em; letter-spacing: 0; }
.stat--accent .stat__value em { color: var(--accent-deep); font-size: 1em; }
.stat__note { font-size: 14px; line-height: 1.55; color: var(--body); }
.stat__source { color: var(--muted); }

/* --------------------------------------------------------------------------
   11. FAQ — native <details>, no JS required
   -------------------------------------------------------------------------- */
.faq { border-top: var(--border-width) solid var(--hairline); }
.faq__item { border-bottom: var(--border-width) solid var(--hairline); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 26px 0;
  cursor: pointer;
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__sign {
  font-size: 26px;
  font-weight: var(--weight-light);
  color: var(--accent-deep);
  flex-shrink: 0;
  line-height: 1;
}
.faq__sign::after { content: '+'; }
.faq__item[open] .faq__sign::after { content: '\2212'; }
.faq__a {
  font-size: 17px;
  line-height: 1.62;
  color: var(--body);
  padding: 0 0 28px;
  max-width: 720px;
}

/* --------------------------------------------------------------------------
   12. Closing CTA
   -------------------------------------------------------------------------- */
.cta-band {
  border-top: var(--border-width) solid var(--hairline);
  padding: clamp(59px, 8vw, 140px) var(--gutter);
}
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-band__title {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.012em;
  line-height: 1.14;
  color: var(--ink);
}
.cta-band__lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  margin: 24px 0 40px;
}

/* --------------------------------------------------------------------------
   13. Footer — brand block + site index + legal bar
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--night);
  color: #8A8A85;
  padding: clamp(52px, 9vw, 88px) var(--gutter) clamp(24px, 4vw, 36px);
}
.site-footer .logo { color: #F2EFE7; }

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 56px 72px;
  padding-bottom: clamp(40px, 6vw, 64px);
}
@media (max-width: 1023px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 44px; }
}

.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.site-footer__blurb { font-size: 15px; line-height: 1.6; color: #8A8A85; max-width: 320px; }
.site-footer__cta { margin-top: 4px; }
.site-footer__social {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: #C9C6BE;
  margin-top: 4px;
}
.site-footer__social:hover { color: #F2EFE7; }

/* The index. Five columns now that Legal has its own, so the grid runs three
   across and wraps to a second row rather than leaving one column stranded. */
.site-footer__index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 32px;
  align-items: start;
}
@media (max-width: 1023px) { .site-footer__index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .site-footer__index { grid-template-columns: 1fr; gap: 32px; } }

.site-footer__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.site-footer__heading {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6C6C67;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.site-footer__links { display: flex; flex-direction: column; gap: 13px; }
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 1.4;
  color: #C9C6BE;
  transition: color 0.15s ease;
}
.site-footer__links a:hover { color: #F2EFE7; }
.site-footer__links a[aria-current='page'] { color: var(--night-accent); }
.site-footer__ext { color: #6C6C67; flex-shrink: 0; }

.site-footer__bar {
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}
.site-footer__bar span { font-size: 13px; color: #6C6C67; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__legal a { font-size: 13px; color: #6C6C67; transition: color 0.15s ease; }
.site-footer__legal a:hover { color: #C9C6BE; }

/* --------------------------------------------------------------------------
   14. Shared additions used by inner pages
   -------------------------------------------------------------------------- */
.hero--compact { min-height: max(560px, 62vh); }

.h2--dark { color: var(--night-ink); }

.link-underline--dark { color: var(--night-accent); }
.link-underline--dark:hover { color: var(--night-accent); border-bottom-color: var(--night-accent); }

.stack--wide  { gap: 56px; }
.stack--wider { gap: 64px; }

/* Scroll reveal. Content is visible by default; JS only animates elements
   that start below the fold, so nothing is hidden if JS fails. */
[data-reveal] { opacity: 1; transition: opacity 0.5s ease, transform 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   15. Dialog — shared component, used by any page that includes
       includes/booking-dialog.php
   -------------------------------------------------------------------------- */
.dlg-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(28, 27, 24, 0.35);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.dlg-scrim.is-open { display: flex; }
.dlg-panel {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  max-width: 440px; width: 100%;
  padding: 32px;
}
.dlg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dlg-head h2 { font-size: 20px; font-weight: var(--weight-semibold); color: var(--ink); }
.dlg-close { background: none; border: none; font-size: 18px; color: var(--muted); cursor: pointer; line-height: 1; padding: 4px; }
.dlg-close:hover { color: var(--ink); }
.dlg-form { display: flex; flex-direction: column; gap: 16px; }
.dlg-form .intro { font-size: 15px; line-height: 1.6; color: var(--body); }
.dlg-field { display: flex; flex-direction: column; gap: 6px; }
.dlg-field span { font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink); }
.dlg-field input, .dlg-field textarea {
  font-family: var(--font-sans); font-size: 15px; color: var(--ink);
  background: var(--paper);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 11px 13px; width: 100%;
}
.dlg-field input:focus, .dlg-field textarea:focus { outline: 2px solid var(--accent-deep); outline-offset: 1px; border-color: var(--accent-deep); }
.dlg-submit {
  font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-semibold);
  color: var(--paper); background: var(--ink);
  border: none; border-radius: var(--radius-md);
  padding: 14px 24px; cursor: pointer; margin-top: 4px;
}
.dlg-submit:hover { background: var(--accent-deep); }
.dlg-success p { font-size: 18px; font-weight: var(--weight-medium); color: var(--ink); }
.dlg-success .sub { font-size: 15px; font-weight: var(--weight-regular); line-height: 1.6; color: var(--body); margin-top: 10px; }
.dlg-success button {
  font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-semibold);
  color: var(--ink); background: transparent;
  border: var(--border-width) solid var(--hairline); border-radius: var(--radius-md);
  padding: 12px 22px; cursor: pointer; margin-top: 22px;
}
.dlg-success button:hover { border-color: var(--ink); }

/* --------------------------------------------------------------------------
   16. Choice cards — a grid of large tappable cards that route the visitor
       down one of several paths. Used on /apply; reusable anywhere a page
       asks "which of these are you?"
   -------------------------------------------------------------------------- */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.choice-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 38px 40px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.choice-card:hover { border-color: var(--ink); }
.choice-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.choice-card__eyebrow {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.choice-card__mark {
  font-size: 22px;
  font-weight: var(--weight-light);
  color: var(--accent-deep);
  line-height: 1;
}
.choice-card__title {
  font-size: 24px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  line-height: 1.2;
}
.choice-card__body { font-size: 16px; line-height: 1.6; color: var(--body); flex: 1; }
.choice-card .btn { margin-top: var(--space-1); justify-content: center; }
.choice-card:hover .btn--primary { background: var(--accent-deep); }

/* Centred narrow page intro — hero without the full-height treatment. */
.page-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.page-intro__title {
  font-size: clamp(44px, 8.6vw, 62px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}
.page-intro .lede { max-width: 660px; }
.page-intro .lede strong { color: var(--ink); font-weight: var(--weight-medium); }

.note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   17. Additions from /guide — all reusable
   -------------------------------------------------------------------------- */

/* Hero standfirst: the single line between the h1 and the lede. */
.hero__subtitle {
  font-size: 24px;
  font-weight: var(--weight-regular);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--body);
  margin-top: 18px;
}

/* A small italic aside beside a button ("Free. No sign-up."). */
.aside-note { font-size: 14px; color: var(--muted); font-style: italic; }
.aside-note--dark { color: var(--night-muted); }

/* Glyph at the top of a card. */
.card__glyph { font-size: 26px; font-weight: var(--weight-light); line-height: 1; color: var(--accent); }

/* Cards that are not links shouldn't suggest they are. */
.card--static:hover { border-color: var(--hairline); }

/* Rule grid — columns separated by vertical hairlines under a top rule,
   stacking to horizontal rules on small screens. Used for short parallel
   statements (audiences, exclusions, criteria). */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: var(--border-width) solid var(--hairline);
}
.rule-grid > * {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px 40px 8px 0;
  border-right: var(--border-width) solid var(--hairline-soft);
}
.rule-grid > * + * { padding-left: 40px; }
.rule-grid > *:last-child { border-right: none; padding-right: 0; }
.rule-grid .label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.rule-grid p { font-size: 15px; line-height: 1.65; color: var(--body); }
@media (max-width: 767px) {
  .rule-grid { grid-template-columns: 1fr; }
  .rule-grid > * {
    padding: 26px 0;
    border-right: none;
    border-bottom: var(--border-width) solid var(--hairline-soft);
  }
  .rule-grid > * + * { padding-left: 0; }
  .rule-grid > *:last-child { border-bottom: none; }
}

/* Dark section, narrow and left-aligned, for a single sustained argument. */
.dark-argument { max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; }
.dark-argument .statement-lg {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--night-ink);
  margin-top: var(--space-4);
  text-wrap: pretty;
}
/* Body copy on a --night background. Shared, so any dark section can use it. */
.body-dark { font-size: 16px; line-height: 1.7; color: var(--night-muted); }
.body-dark strong { color: var(--night-ink); font-weight: var(--weight-medium); }
.dark-argument .body-dark { margin-top: 26px; }
.dark-argument .footnote { font-size: 14px; line-height: 1.65; color: var(--night-muted); margin-top: 36px; }
.dark-argument .footnote a { color: var(--night-accent); font-weight: var(--weight-medium); }
.dark-argument .footnote a:hover { color: var(--night-ink); }

/* Inverted button — light on a dark section. */
.btn--inverse { color: var(--night); background: var(--night-ink); border: none; }
.btn--inverse:hover { opacity: 0.86; color: var(--night); }

/* A button plus its aside, wrapping together. */
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 40px; }
.action-row--wide { gap: 28px; }

/* --------------------------------------------------------------------------
   19. Components added for Membership / Implementation / WCS / Assessment
       All generic — reuse freely on future pages.
   -------------------------------------------------------------------------- */

/* --- Numbered stage block: a label + heading, then prose. Used for
       "What's included", "How it works", any ordered explanation. ---------- */
.stage {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 40px;
  padding: 38px 0;
  border-top: var(--border-width) solid var(--hairline);
}
.stage:last-child { border-bottom: var(--border-width) solid var(--hairline); }
.stage__label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.stage__title { font-size: 22px; font-weight: var(--weight-semibold); color: var(--ink); margin-top: 12px; line-height: 1.25; }
.stage__body { display: flex; flex-direction: column; gap: 18px; }
.stage__body p { font-size: 16px; line-height: 1.7; color: var(--body); }
.stage__body strong { color: var(--ink); font-weight: var(--weight-medium); }
@media (max-width: 767px) {
  .stage { grid-template-columns: 1fr; gap: 18px; padding: 30px 0; }
}

/* --- Spec list: label on the left, value on the right. Used for pricing
       terms, cost breakdowns, any "this / that" pairing. ------------------- */
.spec-list { border-top: var(--border-width) solid var(--hairline); }
.spec-row {
  display: grid;
  grid-template-columns: minmax(140px, 240px) 1fr;
  gap: 32px;
  padding: 20px 0;
  border-bottom: var(--border-width) solid var(--hairline-soft);
  align-items: baseline;
}
.spec-row__label {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec-row__value { font-size: 16px; line-height: 1.6; color: var(--ink); }
.spec-row--head { border-bottom-color: var(--hairline); padding-bottom: 16px; }
.spec-row--head .spec-row__label { color: var(--ink); font-size: 13px; }
.spec-row--head .spec-row__value { font-size: 26px; font-weight: var(--weight-medium); letter-spacing: -0.02em; }
@media (max-width: 600px) {
  .spec-row { grid-template-columns: 1fr; gap: 6px; }
}

/* --- Verdict row: archetype on the left, outcome + note on the right. ----- */
.verdict-row .spec-row__value { display: flex; flex-direction: column; gap: 4px; }
.verdict-row__badge {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.verdict-row__note { font-size: 15px; line-height: 1.55; color: var(--body); }

/* --- Numbered item list: 01, 02, 03 with text alongside. ------------------ */
.num-list { display: flex; flex-direction: column; }
.num-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: var(--border-width) solid var(--hairline-soft);
  align-items: start;
}
.num-item:last-child { border-bottom: none; }
.num-item__n { font-size: 13px; font-weight: var(--weight-bold); letter-spacing: 0.1em; color: var(--accent-deep); padding-top: 3px; }
.num-item__text { font-size: 16px; line-height: 1.65; color: var(--body); }

/* --- Exclusion item: ✕ plus a statement. Light and dark variants. --------- */
.excl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px 40px;
}
.excl { display: flex; gap: 14px; align-items: flex-start; }
.excl__x { font-size: 17px; font-weight: var(--weight-light); color: var(--muted); line-height: 1.5; flex-shrink: 0; }
.excl__text { font-size: 16px; line-height: 1.6; color: var(--ink); }
.excl__text strong { font-weight: var(--weight-semibold); }
.section--dark .excl__x { color: var(--night-muted); }
.section--dark .excl__text { color: var(--night-ink); }

/* --- Bordered CTA panel: a boxed call to action with supporting points. --- */
.launch {
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: 40px;
}
.launch__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: var(--border-width) solid var(--hairline);
}
.launch__action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.launch__points { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; }
.launch__point { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--body); }
.launch__tick { color: var(--accent-deep); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 600px) { .launch { padding: 28px 24px; } }

/* --- CTA strip: heading left, button right. The horizontal counterpart of
       .cta-band, which is centred. ---------------------------------------- */
.cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-strip__copy { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }

/* --- Count block: a big figure with a title and description. -------------- */
.count-list { display: flex; flex-direction: column; gap: 2px; }
.count-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-bottom: var(--border-width) solid var(--hairline-soft);
  align-items: start;
}
.count-item:last-child { border-bottom: none; }
.count-item__n { font-size: 34px; font-weight: var(--weight-light); line-height: 1; color: var(--accent); }
.count-item__title { font-size: 16px; font-weight: var(--weight-semibold); color: var(--ink); }
.count-item__desc { font-size: 15px; line-height: 1.55; color: var(--body); margin-top: 4px; }

/* --- Belief / principle card in a plain 2-up grid. ------------------------ */
.belief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.belief { background: var(--paper); padding: 34px 32px; display: flex; flex-direction: column; gap: 12px; }
.belief h3 { font-size: 18px; font-weight: var(--weight-semibold); line-height: 1.3; color: var(--ink); }
.belief p { font-size: 15px; line-height: 1.65; color: var(--body); }
.belief--wide { grid-column: 1 / -1; }

/* Force two columns when the set has an even count that would otherwise
   leave an orphan cell in a three-up grid. */
.belief-grid--2up { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
@media (min-width: 900px) { .belief-grid--2up { grid-template-columns: 1fr 1fr; } }

/* --- Callout: a short aside set off by an accent rule. Used on About,
       Implementation, Workshops, the Standard and anywhere a point needs
       lifting out of the flow. ---------------------------------------------- */
.callout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 28px;
  max-width: 720px;
}
.callout p { font-size: 17px; line-height: 1.6; color: var(--body); }
.callout p.emph { color: var(--ink); font-weight: var(--weight-medium); font-style: italic; }

/* --- Quote callout on a dark section. ------------------------------------ */
.callout--dark { border-left-color: var(--night-accent); }
.callout--dark p { color: var(--night-muted); }
.callout--dark p.emph { color: var(--night-ink); }

/* --- Sticky column for split layouts on long pages. ---------------------- */
@media (min-width: 1024px) {
  .split__sticky { position: sticky; top: 110px; }
}

/* --- Guide download page ------------------------------------------------- */
.note-italic { font-size: 15px; line-height: 1.65; color: var(--muted); font-style: italic; max-width: 620px; margin-top: 28px; }
.guide-cover {
  width: 100%;
  max-width: 400px;
  height: auto;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   20. Path cards + comparison table — added for /principals.
       Both generic: any page comparing 2–4 routes can reuse them.
   -------------------------------------------------------------------------- */
.path {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 40px;
  padding: 40px 0;
  border-top: var(--border-width) solid var(--hairline);
}
.path:last-of-type { border-bottom: var(--border-width) solid var(--hairline); }
.path__label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.path__title {
  font-size: 22px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--ink);
  margin-top: 12px;
}
.path__body { display: flex; flex-direction: column; gap: 18px; }
.path__body p { font-size: 16px; line-height: 1.7; color: var(--body); }
.path__body strong { color: var(--ink); font-weight: var(--weight-medium); }
@media (max-width: 767px) {
  .path { grid-template-columns: 1fr; gap: 18px; padding: 30px 0; }
}

/* Comparison table.
   Reads as a real table: enclosed by a border, divided by column, with the
   header band and row-label column sunk into --surface so the axes are
   obvious at a glance. Scrolls horizontally on small screens rather than
   crushing the columns. */
.ctable-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
}
.ctable {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--paper);
}
.ctable th,
.ctable td {
  text-align: left;
  vertical-align: top;
  padding: 18px 22px;
  line-height: 1.55;
  border-right: var(--border-width) solid var(--hairline);
  border-bottom: var(--border-width) solid var(--hairline);
}
.ctable th:last-child,
.ctable td:last-child { border-right: none; }
.ctable tbody tr:last-child th,
.ctable tbody tr:last-child td { border-bottom: none; }

/* Header band */
.ctable thead th {
  background: var(--surface);
  font-size: 14px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}

/* Row-label column — the vertical axis, sunk to match the header */
.ctable tbody th {
  background: var(--surface);
  width: 200px;
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--ink);
}

/* Alternating body rows, a half-step tint so long rows stay easy to track */
.ctable tbody tr:nth-child(even) td { background: var(--surface-soft); }

.ctable td { color: var(--body); }

.ctable-note { font-size: 13px; color: var(--muted); margin-top: 12px; }

@media (max-width: 600px) {
  .ctable th, .ctable td { padding: 14px 16px; }
  .ctable tbody th { width: 150px; }
}

/* --------------------------------------------------------------------------
   21. Confirmation page — /thank-you
   -------------------------------------------------------------------------- */
.confirm { padding-top: clamp(56px, 9vw, 120px); }
.confirm__inner { display: flex; flex-direction: column; align-items: flex-start; }
.confirm__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: var(--border-width-emphasis) solid var(--accent);
  color: var(--accent-deep);
  margin-bottom: 32px;
}
.confirm__title {
  font-size: clamp(38px, 6.4vw, 54px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.018em;
  line-height: 1.08;
  color: var(--ink);
  margin-top: 20px;
  text-wrap: balance;
}
.confirm__lede { margin-top: 26px; max-width: 640px; }
.confirm__lede a { color: var(--accent-deep); border-bottom: 1px solid var(--hairline); }
.confirm__lede a:hover { border-bottom-color: var(--accent-deep); }

/* Larger numbered items, for step lists that carry a heading as well as text */
.num-item--lg { grid-template-columns: 56px 1fr; padding: 24px 0; }
.num-item__title { font-size: 17px; font-weight: var(--weight-semibold); color: var(--ink); }
.num-item--lg .num-item__text { margin-top: 6px; }

.callout a { color: var(--accent-deep); border-bottom: 1px solid var(--hairline); }
.callout a:hover { border-bottom-color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   22. Event detail pages
   -------------------------------------------------------------------------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--muted);
  margin-bottom: 28px;
}
.back-link:hover { color: var(--ink); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tag {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-tint);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* Date · time · location line under an event h1. */
.event-when {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--accent-deep);
  margin-top: 20px;
}
.event-when span { color: var(--hairline); margin: 0 6px; }

/* --------------------------------------------------------------------------
   23. Person cards — used by the About team AND by event speakers/facilitators.
       Lived in about.css until events needed them; shared now so any page can
       use them without loading a page-specific stylesheet.
   -------------------------------------------------------------------------- */
/* --- The team ------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.team-card {
  background: var(--paper);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.team-avatar {
  width: 66px; height: 66px;
  border: var(--border-width) solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: var(--weight-medium); letter-spacing: 0.04em;
  color: var(--ink);
}
.team-card h3 { font-size: 20px; font-weight: var(--weight-semibold); letter-spacing: -0.005em; color: var(--ink); }
.team-card .role {
  display: block;
  font-size: 12px; font-weight: var(--weight-bold); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-deep);
  margin-top: 4px;
}
.team-card p.bio { font-size: 14px; line-height: 1.65; color: var(--body); }


/* --------------------------------------------------------------------------
   18. Spacing utilities — LAST IN THE FILE ON PURPOSE.

   These sit at the end so they override component margins regardless of which
   component class an element also carries. If you add more utilities, add them
   here, not further up.

   The scale is deliberately small; every value already appears elsewhere in
   the page rhythm.
   -------------------------------------------------------------------------- */
.mt-md  { margin-top: 20px; }
.mt-lg  { margin-top: 44px; }
.mt-xl  { margin-top: 56px; }
.mt-2xl { margin-top: 64px; }
.mb-xl  { margin-bottom: 48px; }

/* --------------------------------------------------------------------------
   24. Touch targets.
   On touch-sized viewports, links that are pure text (footer index, legal bar,
   back links) are only ~21px tall — below the ~44px that thumbs need. Padding
   is added here rather than in the base rules so desktop density is unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .site-footer__links { gap: 2px; }
  .site-footer__links a { padding: 12px 0; }
  .site-footer__legal { gap: var(--space-3) var(--space-4); }
  .site-footer__legal a { display: inline-block; padding: 12px 0; }
  .site-footer__social { padding: 11px 0; }
  .back-link { padding: 11px 0; margin-bottom: 18px; }
  .logo { padding: 10px 0; }
  /* Small buttons sit at 43px by default; one more pixel of padding clears 44. */
  .btn--sm { padding-block: 11px; }
  /* Inline arrow links and inline mail links are pure text — give them height. */
  .link-underline { display: inline-block; padding: 11px 0; }
  .callout a, .confirm__lede a { display: inline-block; padding: 12px 0; }
}

/* --------------------------------------------------------------------------
   25. HubSpot embedded forms.

   HubSpot injects its own markup and default styling. These rules pull it back
   into the design system — same fonts, tokens, radii and focus treatment as
   .dlg-field elsewhere.

   Selectors are doubled up on purpose: `.hsfc-*` is the current embed
   (js-eu1.hsforms.net/forms/embed/), `.hs-form*` is the legacy one. Matching
   both means the form stays styled if HubSpot switches you between them.

   NOTE: if HubSpot renders the form inside an iframe (some portal settings do),
   CSS cannot reach it and the form will use HubSpot's own theme. In that case
   set the styling inside HubSpot's form editor instead.
   -------------------------------------------------------------------------- */
.hs-embed { font-family: var(--font-sans); color: var(--body); }

/* Reset HubSpot's container widths */
.hs-embed .hs-form-frame,
.hs-embed form { max-width: 100%; }

/* Labels */
.hs-embed .hsfc-FieldLabel,
.hs-embed label,
.hs-embed .hs-form-field > label {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  margin-bottom: 6px;
}
.hs-embed .hsfc-FieldLabel span,
.hs-embed .hs-form-required { color: var(--negative-text); }

/* Inputs, selects, textareas */
.hs-embed input[type='text'],
.hs-embed input[type='email'],
.hs-embed input[type='tel'],
.hs-embed input[type='number'],
.hs-embed input[type='url'],
.hs-embed select,
.hs-embed textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.hs-embed textarea { min-height: 110px; resize: vertical; }
.hs-embed select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3833' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}
.hs-embed input:focus,
.hs-embed select:focus,
.hs-embed textarea:focus {
  outline: 2px solid var(--accent-deep);
  outline-offset: 1px;
  border-color: var(--accent-deep);
}
.hs-embed input::placeholder,
.hs-embed textarea::placeholder { color: var(--muted); }

/* Field spacing */
.hs-embed .hsfc-FormField,
.hs-embed .hs-form-field { margin-bottom: 18px; }

/* Checkboxes and radios */
.hs-embed input[type='checkbox'],
.hs-embed input[type='radio'] { width: auto; margin-right: 8px; accent-color: var(--accent-deep); }
.hs-embed .hsfc-CheckboxField label,
.hs-embed .hs-form-booleancheckbox label {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-weight: var(--weight-regular);
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
}

/* Submit button — matches .btn--primary */
.hs-embed .hsfc-Button,
.hs-embed input[type='submit'],
.hs-embed .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--ink);
  border: none;
  border-radius: var(--radius-md);
  padding: 15px 28px;
  cursor: pointer;
  width: auto;
  transition: background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.hs-embed .hsfc-Button:hover,
.hs-embed input[type='submit']:hover,
.hs-embed .hs-button:hover { background: var(--accent-deep); }

/* Validation and confirmation */
.hs-embed .hsfc-ErrorAlert,
.hs-embed .hs-error-msg,
.hs-embed .hs-error-msgs li {
  font-size: 13px;
  color: var(--negative-text);
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.hs-embed .hsfc-Form__SubmittedMessage,
.hs-embed .submitted-message {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 24px;
}

/* Legal / consent text */
.hs-embed .hsfc-RichText,
.hs-embed .hs-richtext,
.hs-embed .legal-consent-container {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.hs-embed .hsfc-RichText a,
.hs-embed .hs-richtext a { color: var(--accent-deep); }

/* Touch targets on small screens */
@media (max-width: 1023px) {
  .hs-embed input[type='text'],
  .hs-embed input[type='email'],
  .hs-embed input[type='tel'],
  .hs-embed select { padding: 14px; }
  .hs-embed .hsfc-Button,
  .hs-embed input[type='submit'],
  .hs-embed .hs-button { width: 100%; }
}

/* --------------------------------------------------------------------------
   26. Event page — registration section and speaker
   -------------------------------------------------------------------------- */
.event-subtitle {
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: var(--weight-regular);
  line-height: 1.35;
  color: var(--body);
  margin-top: 16px;
  max-width: 640px;
  text-wrap: pretty;
}
.event-lede { margin-top: 24px; max-width: 620px; }

/* Speaker strip under the hero copy */
.speaker-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: var(--border-width) solid var(--hairline);
  width: 100%;
  max-width: 620px;
}
.speaker-strip__photo {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--border-width) solid var(--hairline);
  flex-shrink: 0;
}
.speaker-strip__label {
  display: block;
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.speaker-strip__name { font-size: 17px; font-weight: var(--weight-semibold); color: var(--ink); margin-top: 5px; }
.speaker-strip__role { font-size: 14px; line-height: 1.45; color: var(--body); margin-top: 2px; }

/* --- Photo avatars in person cards ---------------------------------------- */
.team-avatar--photo { padding: 0; object-fit: cover; border-color: var(--hairline); }
/* A one-card grid must not stretch its hairline background across the row. */
.team-grid--single {
  display: inline-grid;
  grid-template-columns: minmax(280px, 520px);
  max-width: 520px;
}
.team-card .link-underline { margin-top: auto; padding-top: 8px; }

/* --------------------------------------------------------------------------
   26b. Person bio page
   -------------------------------------------------------------------------- */
.person-hero { padding-top: clamp(36px, 5vw, 72px); }
.person-hero__inner {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.person-hero__portrait img {
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: var(--border-width) solid var(--hairline);
  display: block;
}
.person-hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.person-hero__name {
  font-size: clamp(38px, 6vw, 54px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.018em;
  line-height: 1.06;
  color: var(--ink);
  margin-top: 16px;
  text-wrap: balance;
}
.person-hero__role {
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 16px;
}
.person-hero__creds { font-size: 14px; color: var(--muted); margin-top: 8px; }
.person-hero__summary { margin-top: 24px; max-width: 620px; }
.person-hero__copy .link-underline { margin-top: 26px; }

@media (max-width: 860px) {
  .person-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .person-hero__portrait img { max-width: 180px; }
}

/* --------------------------------------------------------------------------
   27. Sticky event CTA — phones only.
   Once .register-split stacks, the form drops below the fold. This keeps the
   conversion reachable without duplicating the form.
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--paper);
  border-top: var(--border-width) solid var(--hairline);
  box-shadow: 0 -6px 20px rgba(28, 27, 24, 0.08);
  padding: 12px var(--gutter);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.24s ease;
}
.sticky-cta[hidden] { display: none; }
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--wrap);
  margin-inline: auto;
}
.sticky-cta__copy { display: flex; flex-direction: column; min-width: 0; }
.sticky-cta__title {
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-cta__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sticky-cta .btn { flex-shrink: 0; }

@media (min-width: 1024px) { .sticky-cta { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* --------------------------------------------------------------------------
   28. Listing cards — events and insights hubs
   -------------------------------------------------------------------------- */
.card--event-list { gap: 12px; }
.card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag--quiet { color: var(--muted); background: transparent; border: var(--border-width) solid var(--hairline); }
.card__note { display: block; font-size: 12px; font-weight: var(--weight-regular); color: var(--muted); margin-top: 3px; }
.card__sub { font-size: 15px; line-height: 1.45; color: var(--body); }
.card--event-list .card__place { font-size: 13px; line-height: 1.4; }

/* Person cards that aren't links shouldn't behave like them. */
.team-card--static:hover { border-color: transparent; }

/* Body copy links: visible without shouting. */
.prose a, .lede a, .body-sm a, .body-xs a, .cta-band__lede a {
  color: var(--accent-deep);
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.15s ease;
}
.prose a:hover, .lede a:hover, .body-sm a:hover, .body-xs a:hover, .cta-band__lede a:hover {
  border-bottom-color: var(--accent-deep);
}

/* 404 — the attempted path */
.nf-attempted { font-size: 15px; color: var(--muted); margin-top: 4px; }
.nf-attempted code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   29. The Standard page.
   Two new patterns: the 5C principle rows, and the four-component stack.
   Both generic enough to reuse on /blueprint and /operating-system later.
   -------------------------------------------------------------------------- */

/* --- 5C principle rows ---------------------------------------------------- */
.principle-row {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 48px;
  padding: 44px 0;
  border-top: var(--border-width) solid var(--hairline);
}
.principle-row:last-of-type { border-bottom: var(--border-width) solid var(--hairline); }

.principle-row__mark {
  display: block;
  font-size: 46px;
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.principle-row__mark sup { font-size: 0.5em; top: -0.5em; margin-left: 1px; }
.principle-row__name {
  font-size: 24px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 14px;
}
.principle-row__gloss {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
  margin-top: 8px;
}
.principle-row__body { display: flex; flex-direction: column; gap: 18px; }
.principle-row__body p { font-size: 16px; line-height: 1.72; color: var(--body); }
.principle-row__body .why {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  border-left: 2px solid var(--hairline);
  padding-left: 20px;
}
@media (max-width: 767px) {
  .principle-row { grid-template-columns: 1fr; gap: 20px; padding: 34px 0; }
}

/* --- Four-component stack ------------------------------------------------- */
.layer-stack {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--hairline);
  gap: 1px;
}
.layer {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 40px;
  background: var(--paper);
  padding: 32px 34px;
}
.layer--apex { background: var(--surface); }
.layer__label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.layer--apex .layer__label { color: var(--accent-deep); }
.layer__name {
  font-size: 19px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.3;
}
.layer__body { display: flex; flex-direction: column; gap: 14px; }
.layer__body p { font-size: 16px; line-height: 1.7; color: var(--body); }
.layer__body strong { color: var(--ink); font-weight: var(--weight-medium); }
@media (max-width: 767px) {
  .layer { grid-template-columns: 1fr; gap: 14px; padding: 26px 24px; }
}

/* Direction note beside the stack */
.stack-note {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.stack-note::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--hairline);
}

/* --- Figures on the dark Blueprint band ---------------------------------- */
.bp-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background: var(--night-hairline);
  border: 1px solid var(--night-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 6px;
}
.bp-figure {
  background: var(--night);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-figure__n {
  font-size: 34px;
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--night-accent);
}
.bp-figure__l {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--night-muted);
}

/* --------------------------------------------------------------------------
   30. Matrix table — comparison grids with ✓ / ◑ / ✕ marks.
   Used on /lean-family-office and /lean-family-office/vs.
   -------------------------------------------------------------------------- */
/* A flex/grid child defaults to min-width:auto, so a wide table stretches its
   container instead of scrolling inside it. Both must be allowed to shrink. */
.ctable-wrap { max-width: 100%; min-width: 0; }
.stack > .ctable-wrap, .stack > div:has(> .ctable-wrap) { min-width: 0; }
.stack { min-width: 0; }
.matrix { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; background: var(--paper); }
.matrix th, .matrix td {
  padding: 14px 16px;
  border-right: var(--border-width) solid var(--hairline);
  border-bottom: var(--border-width) solid var(--hairline);
  line-height: 1.5;
}
.matrix th:last-child, .matrix td:last-child { border-right: none; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: none; }
.matrix thead th {
  background: var(--surface);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--ink);
  text-align: center;
  vertical-align: bottom;
}
.matrix thead th:first-child { text-align: left; }
.matrix tbody th {
  background: var(--surface);
  text-align: left;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--ink);
  width: 230px;
}
.matrix td { text-align: center; color: var(--body); }
.matrix tbody tr:nth-child(even) td { background: var(--surface-soft); }
.matrix .m-col--own { background: var(--accent-tint); }
.matrix thead th.m-col--own { background: var(--accent-tint); color: var(--accent-deep); }
.matrix tr.is-key th, .matrix tr.is-key td { font-weight: var(--weight-semibold); color: var(--ink); }

.m-yes { color: var(--positive-text); font-size: 16px; }
.m-part { color: var(--warning-text); font-size: 16px; }
.m-no { color: var(--muted); font-size: 16px; }
.matrix-key {
  display: flex; flex-wrap: wrap; gap: 20px;
  font-size: 13px; color: var(--muted); margin-top: 14px;
}
.matrix-key span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 600px) { .matrix th, .matrix td { padding: 11px 12px; } .matrix tbody th { width: 160px; } }

/* --------------------------------------------------------------------------
   31. FAQ grouped into categories with a sticky category nav.
   -------------------------------------------------------------------------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 72px; align-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.faq-nav { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 901px) { .faq-nav { position: sticky; top: 110px; } }
.faq-nav__heading {
  font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 12px; border-bottom: var(--border-width) solid var(--hairline);
}
.faq-nav__list { display: flex; flex-direction: column; gap: 2px; }
.faq-nav__list a { display: block; font-size: 15px; line-height: 1.4; color: var(--body); padding: 12px 0; }
.faq-nav__list a:hover { color: var(--ink); }

.faq-group + .faq-group { margin-top: 56px; }
.faq-group__title {
  font-size: 22px; font-weight: var(--weight-semibold); color: var(--ink);
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: var(--border-width) solid var(--hairline);
  scroll-margin-top: 100px;
}

/* --------------------------------------------------------------------------
   32. Pillar cards — /blueprint
   -------------------------------------------------------------------------- */
.pillar {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 48px;
  padding: 40px 0;
  border-top: var(--border-width) solid var(--hairline);
}
.pillar:last-of-type { border-bottom: var(--border-width) solid var(--hairline); }
.pillar__n {
  font-size: 40px; font-weight: var(--weight-light); line-height: 1;
  letter-spacing: -0.02em; color: var(--accent);
}
.pillar__name { font-size: 22px; font-weight: var(--weight-semibold); color: var(--ink); margin-top: 12px; line-height: 1.25; }
.pillar__gloss { font-size: 15px; line-height: 1.5; color: var(--muted); font-style: italic; margin-top: 8px; }
.pillar__body { display: flex; flex-direction: column; gap: 18px; }
.pillar__body p { font-size: 16px; line-height: 1.72; color: var(--body); }
.pillar__ends {
  font-size: 15px; line-height: 1.6; color: var(--ink);
  border-left: 2px solid var(--accent); padding-left: 20px;
}
@media (max-width: 767px) { .pillar { grid-template-columns: 1fr; gap: 18px; padding: 30px 0; } }

/* --------------------------------------------------------------------------
   33. Contact form
   -------------------------------------------------------------------------- */
.cform { display: flex; flex-direction: column; gap: 20px; }
.cform__help { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
.cform__group { border: none; padding: 0; margin: 0; }
.cform__group legend {
  font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink); padding: 0;
}
.cform__checks { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cform__check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cform__check input { margin-top: 3px; accent-color: var(--accent-deep); flex-shrink: 0; }
.cform__check span { font-size: 15px; line-height: 1.55; color: var(--body); }
.cform__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-top: 14px; }
.cform__consent { margin-top: 4px; }
.cform__privacy { font-size: 13px; line-height: 1.6; color: var(--muted); }
.cform__privacy a { color: var(--accent-deep); }
.cform .btn { align-self: flex-start; margin-top: 4px; }
.dlg-field abbr { color: var(--negative-text); text-decoration: none; }

/* Native controls in the contact form need real height. Selects in particular
   render at ~19px on mobile Safari without an explicit min-height, and a bare
   checkbox is a 13px target — the wrapping label carries the tap area instead. */
.cform select,
.cform input[type='text'],
.cform input[type='email'],
.cform textarea { min-height: 48px; }
.cform textarea { min-height: 120px; }
.cform__check { min-height: 44px; align-items: center; padding: 4px 0; }
.cform__check input[type='checkbox'] { width: 20px; height: 20px; margin-top: 0; }
.cform__checks { gap: 4px; }

/* --------------------------------------------------------------------------
   34. Operating system screenshot — browser-chrome frame
   -------------------------------------------------------------------------- */
.os-visual { padding-top: 0; padding-bottom: clamp(40px, 6vw, 80px); }
.os-frame {
  margin: 0;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
}
.os-frame__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: var(--border-width) solid var(--hairline);
}
.os-frame__bar > span:not(.os-frame__label) {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--hairline);
  flex-shrink: 0;
}
.os-frame__label {
  margin-left: 10px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.os-frame img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) {
  .os-frame__bar { padding: 10px 12px; }
  .os-frame__label { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   35. Icons inside cards and belief blocks.
   Matches .panel__icon so a card and a panel read the same.
   -------------------------------------------------------------------------- */
.card__icon,
.belief__icon {
  display: block;
  color: var(--accent-deep);
  margin-bottom: 4px;
}
.section--dark .belief__icon,
.section--dark .card__icon { color: var(--night-accent); }

/* --------------------------------------------------------------------------
   36. Insights ledger — featured lead, pillar strip, filter rail, article rows.
   Layout follows the Claude Design export; spacing uses the site scale.
   -------------------------------------------------------------------------- */
.section-tight { padding: 0 var(--gutter) clamp(24px, 3vw, 40px); }
.section-tight:last-of-type { padding-bottom: clamp(48px, 7vw, 96px); }

/* --- Featured lead -------------------------------------------------------- */
.feat {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
  transition: border-color 0.15s ease;
}
.feat:hover { border-color: var(--ink); }
.feat__copy {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: var(--border-width) solid var(--hairline);
}
.feat__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.feat__flag {
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-deep);
}
.feat__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--hairline); flex-shrink: 0; }
.feat__cluster {
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.feat__title {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.014em; line-height: 1.13;
  color: var(--ink); text-wrap: balance;
}
.feat__excerpt { font-size: 17px; line-height: 1.65; color: var(--body); max-width: 540px; }
.feat__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.feat__cta { font-size: 15px; font-weight: var(--weight-semibold); color: var(--accent-deep); }
.feat__time { font-size: 13px; font-weight: var(--weight-medium); color: var(--muted); }
.feat__mark {
  display: flex; align-items: center; justify-content: center;
  position: relative; min-height: 280px; background: var(--paper);
}
.feat__glyph { font-size: clamp(110px, 15vw, 180px); font-weight: var(--weight-light); line-height: 1; color: var(--hairline); }
.feat__index {
  position: absolute; bottom: 24px; left: 0; right: 0; text-align: center;
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 860px) {
  .feat { grid-template-columns: 1fr; }
  .feat__copy { border-right: none; border-bottom: var(--border-width) solid var(--hairline); }
  .feat__mark { min-height: 180px; }
}

/* --- Pillar strip --------------------------------------------------------- */
.pillar-strip {
  display: flex; align-items: stretch;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pillar-link {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 22px;
  border-right: var(--border-width) solid var(--hairline);
  transition: background 0.15s ease;
}
.pillar-link:last-child { border-right: none; }
.pillar-link:hover { background: var(--accent-tint); }
.pillar-link__label {
  font-size: 10px; font-weight: var(--weight-bold);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-deep);
}
.pillar-link__title { font-size: 15px; font-weight: var(--weight-semibold); color: var(--ink); }
@media (max-width: 900px) {
  .pillar-strip { flex-wrap: wrap; }
  .pillar-link { flex: 1 1 50%; border-bottom: var(--border-width) solid var(--hairline); }
  .pillar-link:nth-child(2n) { border-right: none; }
  .pillar-link:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 520px) {
  .pillar-link { flex: 1 1 100%; border-right: none; }
  .pillar-link:last-child { border-bottom: none; }
}

/* --- Ledger layout -------------------------------------------------------- */
.ledger-layout {
  display: grid;
  grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-top: clamp(24px, 3vw, 44px);
}
@media (max-width: 900px) { .ledger-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.ledger-rail { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
@media (min-width: 901px) { .ledger-rail { position: sticky; top: 100px; } }

.ledger-search { position: relative; display: flex; align-items: center; }
.ledger-search__icon {
  position: absolute; left: 12px; display: inline-flex;
  color: var(--muted); pointer-events: none;
}
.ledger-search input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-sans); font-size: 14px; color: var(--ink);
  background: transparent;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 12px 12px 12px 36px;
  min-height: 44px;
  transition: border-color 0.15s ease;
}
.ledger-search input:focus { outline: none; border-color: var(--ink); }
.ledger-search input::placeholder { color: var(--muted); }

.ledger-filters { display: flex; flex-direction: column; gap: 2px; }
.ledger-filters__heading {
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  padding: 0 12px 10px;
}
.ledger-filter {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 14px; font-weight: var(--weight-medium);
  color: var(--body);
  padding: 11px 12px;
  min-height: 44px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ledger-filter:hover { background: var(--surface-soft); color: var(--ink); }
.ledger-filter.is-active {
  background: var(--accent-tint);
  border-left-color: var(--accent-deep);
  color: var(--ink);
  font-weight: var(--weight-semibold);
}
.ledger-filter__n { font-size: 12px; font-weight: var(--weight-regular); color: var(--muted); flex-shrink: 0; }

/* --- Ledger rows ---------------------------------------------------------- */
.ledger { display: flex; flex-direction: column; min-width: 0; }
.ledger__count {
  font-size: 12px; font-weight: var(--weight-bold);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 14px;
}
.ledger__rows { border-top: var(--border-width) solid var(--hairline); }
.ledger__empty { font-size: 15px; color: var(--body); padding: 32px 12px; }

.ledger-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 132px;
  gap: 24px;
  align-items: start;
  padding: 26px 12px;
  border-bottom: var(--border-width) solid var(--hairline-soft);
  transition: background 0.15s ease;
}
.ledger-row:hover { background: var(--accent-tint); }
.ledger-row__no {
  font-size: 15px; font-weight: var(--weight-light);
  letter-spacing: 0.02em; color: var(--muted); padding-top: 3px;
}
.ledger-row__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ledger-row__cluster {
  font-size: 10px; font-weight: var(--weight-bold);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep);
}
.ledger-row__title {
  font-size: 22px; font-weight: var(--weight-medium);
  line-height: 1.24; letter-spacing: -0.01em; color: var(--ink);
  text-wrap: balance;
}
.ledger-row__excerpt { font-size: 15px; line-height: 1.6; color: var(--body); max-width: 620px; }
.ledger-row__meta { display: flex; flex-direction: column; gap: 5px; text-align: right; padding-top: 3px; }
.ledger-row__kind {
  font-size: 10px; font-weight: var(--weight-bold);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.ledger-row__time, .ledger-row__date { font-size: 13px; color: var(--muted); }
.ledger-row.is-pending .ledger-row__title { color: var(--body); }
.ledger-row.is-pending::after {
  content: 'Coming soon';
  grid-column: 2;
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 700px) {
  .ledger-row { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 22px 4px; }
  .ledger-row__title { font-size: 19px; }
  .ledger-row__meta {
    grid-column: 2; flex-direction: row; gap: 14px; text-align: left; padding-top: 4px;
  }
  .ledger-row.is-pending::after { grid-column: 2; }
}

/* --- Newsletter form on the dark band ------------------------------------ */
.nl-form { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.nl-form input {
  font-family: var(--font-sans); font-size: 16px; color: var(--night-ink);
  background: transparent;
  border: var(--border-width) solid var(--night-hairline);
  border-radius: var(--radius-md);
  padding: 14px 16px; min-height: 48px;
  transition: border-color 0.15s ease;
}
.nl-form input::placeholder { color: var(--night-muted); }
.nl-form input:focus { outline: none; border-color: var(--night-accent); }
.nl-form .btn { justify-content: center; }
.nl-form__note { font-size: 13px; line-height: 1.6; color: var(--night-muted); }

/* --------------------------------------------------------------------------
   37. Insight article — the standard for every post.

   Horizontal measure follows the design file: 900px head, 1120px body grid,
   720px prose column (~80 characters at 18px, the reading optimum).
   Vertical rhythm is deliberately tighter than the marketing pages: an article
   is one continuous read, not a stack of blocks.
   -------------------------------------------------------------------------- */
/* Matches .wrap exactly. .wrap sits inside a padded .section, so its content
   box is --wrap wide and its edge lands at the same x as the nav and every
   other page. .art-wrap carries its own gutter, so the max-width has to
   include it — otherwise the article is inset by one gutter more than the
   rest of the site. */
.art-wrap {
  max-width: calc(var(--wrap) + (var(--gutter) * 2));
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: var(--gutter);
}
/* The head shares the site wrap so its left edge lines up with the nav and
   with every other page. Its measure is controlled by the children below,
   not by narrowing the container — otherwise the whole block shifts inward. */
/* inherits .art-wrap — no narrower box, or the head shifts inward */
.art-wrap--head .art-title,
.art-wrap--head .art-standfirst { max-width: 780px; }
.art-wrap--head .art-byline,
.art-wrap--head .art-meta { max-width: 900px; }

/* --- Head ----------------------------------------------------------------- */
.art-head { padding-top: clamp(24px, 3vw, 36px); }
.art-title {
  font-size: clamp(32px, 5vw, 46px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.018em;
  line-height: 1.12;
  color: var(--ink);
  margin-top: 16px;
  text-wrap: balance;
}
.art-standfirst {
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.55;
  color: var(--body);
  margin-top: 20px;
  max-width: 680px;
  text-wrap: pretty;
}

.art-byline {
  display: flex;
  align-items: center;
  gap: 20px 28px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding: 20px 0;
  border-top: var(--border-width) solid var(--hairline);
  border-bottom: var(--border-width) solid var(--hairline);
}
.art-byline__who { display: flex; align-items: center; gap: 12px; }
.art-byline__photo, .art-byline__initials {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover;
  border: var(--border-width) solid var(--hairline);
  flex-shrink: 0;
}
.art-byline__initials {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--weight-medium); color: var(--ink);
}
.art-byline__name { display: block; font-size: 15px; font-weight: var(--weight-semibold); color: var(--ink); }
.art-byline__name:hover { color: var(--accent-deep); }
.art-byline__role { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.art-byline__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.art-byline__meta span[aria-hidden] { color: var(--hairline); }

/* --- Share ---------------------------------------------------------------- */
.art-share { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.art-share__label {
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.art-share__label--inline { margin-right: 4px; }
.art-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--body);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.art-share__btn:hover { border-color: var(--ink); color: var(--ink); }
.art-share__btn.is-copied { border-color: var(--accent-deep); color: var(--accent-deep); }

/* --- Body grid ------------------------------------------------------------ */
.art-body {
  display: grid;
  grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-top: clamp(32px, 4vw, 52px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 1023px) {
  .art-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* --- Table of contents ---------------------------------------------------- */
@media (min-width: 1024px) { .art-toc { position: sticky; top: 104px; } }
.art-toc__box {
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: var(--paper);
}
.art-toc__head {
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.art-toc__head::-webkit-details-marker { display: none; }
.art-toc__head::after {
  content: '+'; font-size: 16px; font-weight: var(--weight-light); color: var(--muted);
}
.art-toc__box[open] .art-toc__head::after { content: '−'; }
@media (min-width: 1024px) {
  .art-toc__box { border: none; padding: 0; }
  .art-toc__head { cursor: default; padding-bottom: 12px; border-bottom: var(--border-width) solid var(--hairline); }
  .art-toc__head::after { display: none; }
}
.art-toc__list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; counter-reset: toc; }
.art-toc__list a {
  display: block;
  font-size: 14px; line-height: 1.45; color: var(--body);
  padding: 9px 0 9px 14px;
  border-left: 2px solid var(--hairline);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.art-toc__list a:hover { color: var(--ink); border-left-color: var(--accent-deep); }
.art-toc__list a.is-current { color: var(--ink); font-weight: var(--weight-semibold); border-left-color: var(--accent-deep); }

/* --- Prose ---------------------------------------------------------------- */
.art-prose { max-width: 720px; min-width: 0; }
.art-section + .art-section { margin-top: clamp(36px, 4.5vw, 56px); }
.art-section > h2 {
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
  scroll-margin-top: 96px;
  text-wrap: balance;
}
.art-prose h3 {
  font-size: 19px; font-weight: var(--weight-semibold);
  line-height: 1.35; color: var(--ink);
  margin-top: 30px;
}
.art-prose p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--body);
  margin-top: 20px;
  text-wrap: pretty;
}
.art-prose strong { color: var(--ink); font-weight: var(--weight-medium); }
.art-prose a {
  color: var(--accent-deep);
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.15s ease;
}
.art-prose a:hover { border-bottom-color: var(--accent-deep); }
.art-prose ul, .art-prose ol { margin-top: 20px; padding-left: 24px; }
.art-prose li { font-size: 18px; line-height: 1.75; color: var(--body); margin-top: 10px; }
.art-prose li::marker { color: var(--muted); }
.art-prose blockquote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 28px;
  margin-top: 28px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  text-wrap: pretty;
}
.art-prose .faq { margin-top: 24px; }

.art-cta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: clamp(36px, 4.5vw, 56px);
  padding-top: 32px;
  border-top: var(--border-width) solid var(--hairline);
}

.art-share-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 28px;
  border-top: var(--border-width) solid var(--hairline);
}
.art-share-foot .art-share { margin-left: 0; }
.art-share-foot .art-share__label--inline { display: none; }

.art-author {
  display: flex; gap: 18px; align-items: flex-start;
  margin-top: 36px; padding-top: 32px;
  border-top: var(--border-width) solid var(--hairline);
}
.art-author__photo, .art-author__initials {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; border: var(--border-width) solid var(--hairline);
  flex-shrink: 0;
}
.art-author__initials {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: var(--weight-medium); color: var(--ink);
}
.art-author__label {
  display: block; font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.art-author__name { display: block; font-size: 16px; font-weight: var(--weight-semibold); color: var(--ink); margin-top: 6px; }
.art-author__name:hover { color: var(--accent-deep); }
.art-author__bio { font-size: 15px; line-height: 1.65; color: var(--body); margin-top: 8px; max-width: 560px; }

/* --- Related -------------------------------------------------------------- */
.art-related {
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px);
  border-top: var(--border-width) solid var(--hairline);
}
.art-related__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 36px);
}

@media (max-width: 600px) {
  .art-byline { gap: 16px; }
  .art-share { margin-left: 0; }
  .art-prose p, .art-prose li { font-size: 17px; }
  .art-prose blockquote { font-size: 18px; padding-left: 20px; }
}

/* Article: touch targets on phones and tablets. */
@media (max-width: 1023px) {
  .art-share__btn { width: 44px; height: 44px; }
  .art-toc__copy { padding: 14px 0; min-height: 44px; }
  .art-toc__head { padding: 9px 0; }
  .art-toc__list a { padding: 12px 0 12px 14px; }
  .art-byline__name { display: inline-block; padding: 10px 0; }
  .art-author__name { display: inline-block; padding: 10px 0; }
}

/* --------------------------------------------------------------------------
   38. Article fixes to match the design file
   -------------------------------------------------------------------------- */

/* Reading progress. Fixed under the sticky header. */
.read-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.read-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-deep);
  transition: width 0.08s linear;
}
@media (prefers-reduced-motion: reduce) { .read-progress span { transition: none; } }

/* Meta line under the byline: published · read time · kind */
.art-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
  margin-top: 16px;
  padding-bottom: 20px;
  border-bottom: var(--border-width) solid var(--hairline);
}
.art-meta span[aria-hidden] { color: var(--hairline); }
.art-meta__kind {
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--body);
}
/* The byline no longer carries the bottom rule — the meta line does. */
.art-byline { border-bottom: none; padding-bottom: 0; }

/* Copy link beneath the table of contents */
.art-toc__copy {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  padding: 10px 0;
  background: none; border: none;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: var(--weight-medium);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.art-toc__copy:hover { color: var(--ink); }
.art-toc__copy.is-copied { color: var(--accent-deep); }
.art-toc__copy.is-copied::after { content: ' — copied'; }
@media (min-width: 1024px) {
  .art-toc__copy { margin-top: 22px; padding-top: 18px; border-top: var(--border-width) solid var(--hairline); }
}

/* Buttons inside the prose must not inherit the body-link colour. */
.art-prose .btn { border-bottom: none; }
.art-prose .btn--primary { color: var(--paper); }
.art-prose .btn--primary:hover { color: var(--paper); }
.art-prose .btn--secondary { color: var(--ink); }
.art-prose .btn--inverse { color: var(--night); }

/* Author card */
.art-author {
  display: flex; gap: 20px; align-items: flex-start;
  margin-top: 32px;
  padding: 26px 28px;
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper);
}
@media (max-width: 560px) { .art-author { padding: 22px; gap: 16px; } }

/* Newsletter page layout and card. */
.nl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .nl-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.nl-points { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.nl-point { display: flex; align-items: baseline; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--body); }
.nl-point__mark { color: var(--accent); font-size: 11px; flex-shrink: 0; }
.nl-card--page { border: var(--border-width) solid var(--hairline); }
.nl-card__title { font-size: 20px; font-weight: var(--weight-semibold); color: var(--ink); margin-bottom: 18px; }

/* Dark CTA band text */
.cta-band__title--dark { color: var(--night-ink); }
.cta-band__lede--dark { color: var(--night-muted); }

/* Newsletter band.
   The form sits in a light card rather than directly on the dark ground.
   HubSpot injects its own styling — sometimes inside a shadow root that CSS
   cannot reach — so fighting it for a dark theme is unreliable. A light card
   means the form is legible whatever HubSpot renders. */
.nl-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 28px;
}
@media (max-width: 600px) { .nl-card { padding: 22px 20px; } }

/* --------------------------------------------------------------------------
   39. Article FAQ: fewer rules.
   Five hairlines stacked in a short space read as clutter. The last FAQ item
   drops its rule, since the CTA block below already opens with one.
   -------------------------------------------------------------------------- */
.art-prose .faq { border-top: none; }
.art-prose .faq__item:last-child { border-bottom: none; }
.art-prose .faq__q { padding: 20px 0; }
.art-prose .faq__a { padding-bottom: 22px; }
.art-prose .art-cta { margin-top: 12px; padding-top: 28px; }

/* --------------------------------------------------------------------------
   40. Article, wide variant — set $article['layout'] = 'wide'.
   Uses the site's standard section rhythm rather than the tighter reading
   rhythm, so the two can be compared side by side. Everything else — the
   720px prose measure, the TOC, the type — is unchanged.
   -------------------------------------------------------------------------- */
.art--wide .art-head { padding-top: clamp(40px, 6vw, 72px); }
.art--wide .art-body {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(64px, 9vw, 108px);
  gap: 80px;
}
.art--wide .art-section + .art-section { margin-top: clamp(48px, 7vw, 80px); }
.art--wide .art-prose p { margin-top: 24px; }
.art--wide .art-cta { margin-top: clamp(48px, 7vw, 80px); padding-top: 44px; }
.art--wide .art-share-foot { margin-top: 56px; padding-top: 40px; }
.art--wide .art-author { margin-top: 48px; }
.art + .art-related, .art--wide + .art-related { border-top: var(--border-width) solid var(--hairline); }
.art--wide ~ .art-related { padding: clamp(64px, 9vw, 108px) 0; }

/* --------------------------------------------------------------------------
   41. Closing CTA: keep the buttons centred when they wrap.
   .hero__actions is a full-width flex row, so on a narrow screen the buttons
   stack against the left edge while the text above stays centred. Inside a
   centred CTA band they should follow the text.
   -------------------------------------------------------------------------- */
.cta-band__inner .hero__actions,
.cta-band__inner .action-row {
  justify-content: center;
  align-items: center;
}
@media (max-width: 600px) {
  .cta-band__inner .hero__actions,
  .cta-band__inner .action-row { flex-direction: column; width: 100%; }
  .cta-band__inner .hero__actions > .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Tables inside article prose.
   Markdown tables in a post rendered completely unstyled — nothing targeted
   .art-prose table. Matches the legal document treatment so a table reads the
   same wherever it appears.
   -------------------------------------------------------------------------- */
.art-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 15px;
  background: var(--paper);
}
.art-prose th,
.art-prose td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px;
  border: var(--border-width) solid var(--hairline);
  line-height: 1.6;
}
.art-prose thead th {
  background: var(--surface);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  font-size: 14px;
}
.art-prose td { color: var(--body); }
.art-prose tbody tr:nth-child(even) td { background: var(--surface-soft); }
.art-prose table a { border-bottom: none; }
@media (max-width: 700px) {
  .art-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .art-prose th, .art-prose td { white-space: normal; min-width: 150px; padding: 12px 14px; }
}

/* --------------------------------------------------------------------------
   Icon boxes — one size, one alignment, everywhere.
   .panel__icon is used two ways: as a <span> wrapper around icon_svg(), and
   directly on an inline <svg>. As a block-level span it stretched to the full
   column width, which threw the card off. Sizes also drifted between pages.
   -------------------------------------------------------------------------- */
.panel__icon,
.belief__icon,
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--accent-deep);
  margin-bottom: 4px;
}
.panel__icon > svg,
.belief__icon > svg,
.card__icon > svg { display: block; width: 24px; height: 24px; }
svg.panel__icon,
svg.belief__icon,
svg.card__icon { width: 24px; height: 24px; }
.section--dark .panel__icon,
.section--dark .belief__icon,
.section--dark .card__icon { color: var(--night-accent); }

/* --------------------------------------------------------------------------
   Eyebrow spacing.
   A heading carrying its own margin-top doubles up inside a flex .stack that
   also has a row-gap — 22 + 22 = 44px on some pages and 22px on others. One
   value everywhere instead.
   -------------------------------------------------------------------------- */
.stack > .kicker + .hero__title,
.stack > .kicker + .h2,
.stack > .kicker + .cta-band__title,
.stack > .kicker + .art-title,
.stack > .kicker + .legal-title { margin-top: 0; }

.kicker + .hero__title,
.kicker + .h2,
.kicker + .cta-band__title,
.kicker + .art-title,
.kicker + .legal-title,
.kicker + .confirm__title,
.kicker + .event-subtitle,
.kicker + .person-hero__name { margin-top: 18px; }

.cta-band__inner > .kicker + .cta-band__title { margin-top: 18px; }

/* Stacks with their own row-gap: the kicker absorbs the difference. */
.stack--intro > .kicker,
.name-copy > .kicker { margin-bottom: calc(18px - var(--stack-gap, 22px)); }
.stack--intro { --stack-gap: 22px; }
.name-copy { --stack-gap: 40px; }
.page-intro > .kicker + .page-intro__title { margin-top: 0; }
.page-intro > .kicker { margin-bottom: -6px; }
.stack--guide > .kicker + .hero__title { margin-top: 18px; }

/* --------------------------------------------------------------------------
   FAQ category rail — same treatment as the Insights ledger filters.
   -------------------------------------------------------------------------- */
.faq-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--body);
  padding: 12px;
  min-height: 44px;
  box-sizing: border-box;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.faq-filter:hover { background: var(--surface-soft); color: var(--ink); }
.faq-filter.is-current {
  background: var(--accent-tint);
  border-left-color: var(--accent-deep);
  color: var(--ink);
  font-weight: var(--weight-semibold);
}
.faq-filter__n { font-size: 12px; font-weight: var(--weight-regular); color: var(--muted); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   LinkedIn links on person blocks — About cards and the article author box.
   -------------------------------------------------------------------------- */
.team-card__linkedin,
.art-author__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--accent-deep);
  transition: color 0.15s ease;
}
.team-card__linkedin:hover,
.art-author__linkedin:hover { color: var(--ink); }
.team-card__linkedin svg,
.art-author__linkedin svg { flex-shrink: 0; }
@media (max-width: 1023px) {
  .team-card__linkedin,
  .art-author__linkedin { padding: 12px 0; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Empty state — a listing with nothing to list yet. Says what is coming
   rather than showing an empty grid.
   -------------------------------------------------------------------------- */
.empty-state {
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-md);
  padding: clamp(28px, 4vw, 44px);
  max-width: 720px;
  background: var(--paper);
}
.empty-state__title {
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  line-height: 1.35;
}
.empty-state__body { font-size: 16px; line-height: 1.7; color: var(--body); margin-top: 12px; }
.empty-state__body a { color: var(--accent-deep); border-bottom: 1px solid var(--hairline); }
.empty-state__body a:hover { border-bottom-color: var(--accent-deep); }