/* ═══════════════════════════════════════════════════════════════════════
   ANGEL HUB — marketing site stylesheet
   Tokens mirror the Angel Hub app's design system (css/01-foundation.css
   in the app repo) so the site literally shares the product's DNA:
   same dark base, same warm-paper light mode, same cyan/mint accents,
   same Bricolage Grotesque + Manrope pairing.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tokens: dark (default, matches app) ─── */
:root {
  --bg-base: #07090d;
  --bg-surface: #0e131c;
  --bg-elevated: #161d2a;
  --bg-hover: #1a2230;
  --border: #1f2838;
  --border-strong: #2c384e;
  --text-primary: #e8ecf4;
  --text-secondary: #8a97b0;
  --text-muted: #5b6779;
  --accent: #00d8e6;
  --accent-soft: rgba(0, 216, 230, 0.12);
  --accent-glow: rgba(0, 216, 230, 0.35);
  --success: #2dd4a4;
  --success-soft: rgba(45, 212, 164, 0.12);
  --warning: #f5a623;
  --warning-soft: rgba(245, 166, 35, 0.12);
  --danger: #ff5670;
  --btn-primary-bg: linear-gradient(135deg, #00d8e6, #2dd4a4);
  --btn-primary-fg: #04191d;
  --header-bg: rgba(7, 9, 13, 0.82);
  /* hairline top-light: reads as machined-edge precision on dark surfaces */
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-pop: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --map-line: rgba(138, 151, 176, 0.30);
  --map-dot: rgba(138, 151, 176, 0.17);
  --hero-glow-1: rgba(0, 216, 230, 0.09);
  --hero-glow-2: rgba(45, 212, 164, 0.05);
  /* alternate section band — one step off the canvas so a long page reads
     as chapters, not one scroll; cards (bg-surface) still sit above it */
  --band-bg: #0a0e15;
  /* the hero's emphasised words: same cyan→mint as the primary button */
  --hero-em-bg: linear-gradient(120deg, #00d8e6, #2dd4a4);
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shell: 1120px;
  color-scheme: dark;
}

/* ─── Tokens: light (app's warm paper) ─── */
[data-theme="light"] {
  --bg-base: #f7f6f3;
  --bg-surface: #ffffff;
  --bg-elevated: #f1efea;
  --bg-hover: #ebe8e1;
  --border: #eceae3;
  --border-strong: #d9d5cc;
  --text-primary: #232019;
  --text-secondary: #57534d;
  --text-muted: #77726a;
  /* Cyan-700, not the cyan-500 (#06b6d4) this was until 2026-09-01. Every
     ratio below is MEASURED in the live page, not calculated — the hand
     arithmetic was wrong by up to 1.7 on the first pass.
     #06b6d4 measured 2.25:1 on this warm paper and 2.43:1 on a white card,
     against AA's 4.5 — and --accent paints TEXT in ~20 rules (.kicker,
     .text-link, .day-time, .problem-tag, .hero h1 em, every compliance-table,
     guide and legal link), so the TOKEN is the fix, not any one selector.
     #0e7490 measures 4.96 on paper, 5.36 on a white card, 4.71 on the
     --accent-soft tint (.problem-tag) and 4.66 on .comp-guide-link — that
     last one is the site-wide minimum, so treat 4.66 as the headroom any
     future change to this value has to keep.
     --accent-soft and --accent-glow deliberately stay cyan-500: they are
     fills and glows, carry no text, and keep the light theme's character.
     Dark never had the problem and is untouched (11.35:1). */
  --accent: #0e7490;
  --accent-soft: rgba(6, 182, 212, 0.14);
  --accent-glow: rgba(6, 182, 212, 0.30);
  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.14);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, 0.13);
  --danger: #dc2626;
  --btn-primary-bg: linear-gradient(135deg, #0891b2, #059669);
  --btn-primary-fg: #ffffff;
  --header-bg: rgba(247, 246, 243, 0.85);
  --shadow-card: 0 1px 2px rgba(45, 38, 25, 0.04), 0 4px 12px -4px rgba(45, 38, 25, 0.10);
  --shadow-pop: 0 24px 60px -18px rgba(45, 38, 25, 0.18);
  --map-line: rgba(87, 83, 77, 0.28);
  --map-dot: rgba(87, 83, 77, 0.15);
  --hero-glow-1: rgba(6, 182, 212, 0.07);
  --hero-glow-2: rgba(5, 150, 105, 0.05);
  --band-bg: #f1efea;
  /* cyan-700 → emerald-700: both measure above 3.0 on paper at display size,
     and the start colour is the same --accent the AHW-042 contrast fix chose */
  --hero-em-bg: linear-gradient(120deg, #0e7490, #047857);
  color-scheme: light;
}

/* System preference is the no-JS / first-visit default */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-base: #f7f6f3;
    --bg-surface: #ffffff;
    --bg-elevated: #f1efea;
    --bg-hover: #ebe8e1;
    --border: #eceae3;
    --border-strong: #d9d5cc;
    --text-primary: #232019;
    --text-secondary: #57534d;
    --text-muted: #77726a;
    /* Cyan-700 — see the [data-theme="light"] block above for the contrast
       working. These two light palettes must always carry the same values. */
    --accent: #0e7490;
    --accent-soft: rgba(6, 182, 212, 0.14);
    --accent-glow: rgba(6, 182, 212, 0.30);
    --success: #059669;
    --success-soft: rgba(5, 150, 105, 0.14);
    --warning: #d97706;
    --warning-soft: rgba(217, 119, 6, 0.13);
    --danger: #dc2626;
    --btn-primary-bg: linear-gradient(135deg, #0891b2, #059669);
    --btn-primary-fg: #ffffff;
    --header-bg: rgba(247, 246, 243, 0.85);
    --shadow-card: 0 1px 2px rgba(45, 38, 25, 0.04), 0 4px 12px -4px rgba(45, 38, 25, 0.10);
    --shadow-pop: 0 24px 60px -18px rgba(45, 38, 25, 0.18);
    --map-line: rgba(87, 83, 77, 0.28);
    --map-dot: rgba(87, 83, 77, 0.15);
    --hero-glow-1: rgba(6, 182, 212, 0.07);
    --hero-glow-2: rgba(5, 150, 105, 0.05);
    --band-bg: #f1efea;
    /* cyan-700 → emerald-700: both measure above 3.0 on paper at display size,
       and the start colour is the same --accent the AHW-042 contrast fix chose */
    --hero-em-bg: linear-gradient(120deg, #0e7490, #047857);
    color-scheme: light;
  }
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Sticky footer: a short page (404, a stub legal page) must still fill the
     window, or the body box ends early and its gradients tile again below. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-primary);
  background:
    radial-gradient(ellipse 70% 34% at 50% 0%, var(--hero-glow-1), transparent),
    radial-gradient(ellipse 50% 30% at 85% 12%, var(--hero-glow-2), transparent),
    var(--bg-base);
  background-repeat: no-repeat;
  transition: background-color 0.3s ease, color 0.3s ease;
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.16em; }
button { font-family: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
em { font-style: normal; }

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 200;
  background: var(--bg-surface); color: var(--text-primary);
  padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  font-weight: 600; font-size: 0.9375rem;
}
.skip-link:focus { left: 12px; }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

/* ─── Kickers, headings, section rhythm ─── */
/* The house kicker: sentence case in the display face with a diamond "node"
   marker — the connected-map motif, not the generic tracked-caps eyebrow. */
.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--accent); margin: 0 0 1.1rem;
}
.kicker::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border: 1.5px solid var(--accent); border-radius: 1.5px;
  transform: rotate(45deg);
  /* pin to the FIRST line so a wrapped kicker keeps its marker at the top */
  align-self: flex-start; margin-top: 0.42em;
}

.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
/* Every other chapter sits on a band one step off the canvas, hairlined top
   and bottom, so the page has a visible rhythm instead of one long scroll. */
.section-band { background: var(--band-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-band + .section-band { border-top: 0; }
/* anchor jumps (nav, footer, in-page links) land clear of the sticky header */
.section, .hero, .day-moment[id] { scroll-margin-top: 4.5rem; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
/* Editorial split head: heading left, lede right on the same baseline. Opt-in
   per section (.is-split) so heads without a lede keep the single column. */
@media (min-width: 900px) {
  .section-head.is-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(2rem, 5vw, 4rem); }
  .section-head.is-split .kicker { grid-column: 1 / -1; }
  .section-head.is-split h2 { margin-bottom: 0; }
  .section-head.is-split p:not(.kicker) { align-self: end; padding-bottom: 0.45rem; }
}
.section-head h2 { font-size: clamp(1.9rem, 4.4vw, 2.85rem); font-weight: 750; letter-spacing: -0.03em; margin-bottom: 0.9rem; }
.section-head p { color: var(--text-secondary); font-size: clamp(1rem, 1.5vw, 1.125rem); }
/* Same idiom as .problem-card / .day-copy / .founder-copy. Added when the
   compliance chart intro grew a second paragraph (the England-only scope note)
   and the two ran together as one block at every width. */
.section-head p + p { margin-top: 0.85rem; }

/* ─── Header ─── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--border);
}
.site-header-row { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; }
/* The app's own drawer lockup, byte-for-byte proportions (app 02-shell.css
   .drawer-title-group / .drawer-title / .drawer-subtitle): 32px mark, 10px
   gap, Bricolage 600 16px name, 11px muted 500 "Operations" tag. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary); }
.brand-tag { font-size: 0.6875rem; font-weight: 500; line-height: 1.2; color: var(--text-muted); }
/* The app's own mark, tile and all — the logo file carries its black plate,
   so the site adds only the corner radius (same treatment as the app's
   .login-brand-mark). No accent gradient or glow: cyan behind gold fights it. */
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: block; object-fit: cover;
}
.site-nav { display: none; align-items: center; gap: 1.6rem; margin-left: auto; }
.site-nav a { position: relative; text-decoration: none; font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); padding: 0.4rem 0; white-space: nowrap; transition: color 0.2s var(--ease-out); }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease-out);
}
.site-nav a:hover { color: var(--text-primary); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
/* JS marks the section in view (aria-current); the underline stays lit there */
.site-nav a[aria-current] { color: var(--text-primary); }
.site-nav a[aria-current]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.site-nav + .header-actions { margin-left: 0; }
@media (min-width: 900px) { .site-nav { display: flex; } }
/* Six links (Assets joined 2026-08-06): between 900–1023px the row needs a
   tighter fit or the nav wraps onto a second line under the brand. */
/* seven links (Compliance joined 2026-08-09) need a graduated fit below ~1160px */
@media (min-width: 1024px) and (max-width: 1159px) {
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: 0.875rem; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .site-nav { gap: 0.55rem; }
  .site-nav a { font-size: 0.82rem; }
}

/* ─── Mobile menu (below 900px) ───
   Seven links have nowhere to go on a phone, so .site-nav above is display:none
   there — which left every section link, and Compliance especially, reachable
   only from the footer at the bottom of a very long page. This is a native
   <details>: it opens with NO JavaScript, the same law the compliance page's
   folds follow, and the reason it is not a JS toggle is the dead-control trap
   documented on .theme-toggle[hidden] below.
   It carries a SECOND copy of the link list rather than re-parenting .site-nav,
   because making one list serve both needs display:contents on a closed
   <details> — and if that trick misbehaves in an engine, the failure mode is
   "desktop nav disappears". This way the desktop nav is untouched. The two
   lists always change together (CLAUDE.md §3). */
.nav-fold { position: relative; }
@media (min-width: 900px) { .nav-fold { display: none; } }
.nav-toggle {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-secondary); display: grid; place-items: center;
  cursor: pointer; list-style: none;
}
/* Both lines needed: ::marker is the modern engines, ::-webkit-details-marker
   is older Safari. Without them the disclosure triangle sits next to the icon. */
.nav-toggle::marker { content: ""; }
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-fold[open] .nav-toggle { color: var(--text-primary); background: var(--bg-hover); }
.nav-toggle .icon-close { display: none; }
.nav-fold[open] .nav-toggle .icon-menu { display: none; }
.nav-fold[open] .nav-toggle .icon-close { display: block; }
.nav-panel {
  position: absolute; right: 0; top: calc(100% + 0.55rem); z-index: 10;
  display: flex; flex-direction: column;
  min-width: max(13.5rem, 46vw);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 0.35rem;
  box-shadow: var(--shadow-pop);
}
.nav-panel a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 0.85rem; border-radius: var(--radius-md);
  text-decoration: none; font-size: 0.9375rem; font-weight: 600;
  color: var(--text-secondary); white-space: nowrap;
}
.nav-panel a:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-panel a[aria-current="page"] { color: var(--accent); }
/* The theme control, as a menu row rather than a circle in the header.
   Four controls do not fit a phone header alongside the wordmark (measured:
   309px needed vs 335px available at 375px only once this one leaves), and of
   the four this is the only one that is neither the brand, the sole conversion
   path (§5), nor the way into the menu itself. */
.nav-theme {
  display: flex; align-items: center; gap: 0.6rem; min-height: 44px;
  margin-top: 0.3rem; padding: 0 0.85rem;
  border: 0; border-top: 1px solid var(--border); border-radius: var(--radius-md);
  background: transparent; color: var(--text-secondary);
  font-size: 0.9375rem; font-weight: 600; text-align: left; width: 100%;
}
/* Same load-bearing guard as .theme-toggle[hidden]: the rule above sets
   `display: flex`, which beats the UA's [hidden] rule, so without this a dead
   row renders in the menu for anyone with JavaScript off. */
.nav-theme[hidden] { display: none; }
.nav-theme:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-theme svg { flex: none; }
@media (max-width: 899px) {
  .site-header-row { gap: 0.65rem; }
  .header-actions { gap: 0.5rem; }
  /* .site-nav is display:none here, but it is still the DOM sibling, so the
     "don't double up the auto margin" rule above still fires and leaves the
     controls floating mid-row. Give the push back. */
  .site-nav + .header-actions { margin-left: auto; }
  /* the header copy stands down; .nav-theme in the menu is the phone control */
  .header-actions > .theme-toggle { display: none; }
}
/* Below ~360px even three controls plus the wordmark do not fit (309px needed,
   280px available at 320px), so the name steps aside there and the app's mark
   carries the brand — .brand keeps its aria-label either way. 360px is the
   narrowest phone still sold; every modern handset keeps the name. */
@media (max-width: 359px) { .brand-text { display: none; } }

/* 44px to sit level with the 44px .btn-sm beside it — they were a matched pair
   at 42px until .btn-sm was corrected to the §4 tap-target size, and a 2px
   step between two adjacent circles/pills in the same row reads as a mistake.
   This control is desktop-only now (hidden below 900px, where .nav-theme in
   the menu takes over), so this is about alignment, not thumbs. */
.theme-toggle {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-secondary);
  display: grid; place-items: center;
}
/* `display: grid` above would beat the UA's [hidden] rule and leave a dead
   button in the header for anyone without JavaScript — js/site.js is what
   reveals it (`toggle.hidden = false`). Same trap the lightbox hit below, and
   the same one .nav-theme[hidden] carries; never drop this */
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
/* Keyed to [data-theme-toggle], not .theme-toggle, so the header circle and the
   .nav-theme menu row swap icon and label from the same four rules — two copies
   of this logic would drift the moment one theme gained a state. */
[data-theme-toggle] .icon-sun, [data-theme-toggle] .label-light { display: none; }
[data-theme="light"] [data-theme-toggle] .icon-sun,
[data-theme="light"] [data-theme-toggle] .label-light { display: block; }
[data-theme="light"] [data-theme-toggle] .icon-moon,
[data-theme="light"] [data-theme-toggle] .label-dark { display: none; }
/* System-light with no explicit choice yet: without this the tokens go light
   while the control still shows the dark-mode icon and label. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) [data-theme-toggle] .icon-sun,
  :root:not([data-theme]) [data-theme-toggle] .label-light { display: block; }
  :root:not([data-theme]) [data-theme-toggle] .icon-moon,
  :root:not([data-theme]) [data-theme-toggle] .label-dark { display: none; }
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 0.95rem 1.6rem; min-height: 48px;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 24px -8px var(--accent-glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 32px -8px var(--accent-glow); }
.btn-primary:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 14px -6px var(--accent-glow); }
.btn-quiet { border-color: var(--border-strong); color: var(--text-primary); background: transparent; }
.btn-quiet:hover { background: var(--bg-hover); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); }
/* 44px, not 42 — CLAUDE.md §4's tap-target law, which this quietly undercut
   while COMPONENTS.md claimed every .btn variant already met it. */
.btn-sm { padding: 0.6rem 1.1rem; min-height: 44px; font-size: 0.9375rem; }
.text-link { color: var(--accent); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.text-link:hover { text-decoration: underline; }

/* ─── Hero ─── */
.hero { position: relative; padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); }
/* The map stage's blueprint dot grid, carried out to the page: one motif,
   two scales. z-index -1 keeps it behind the text but above the canvas. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, var(--map-dot) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(85% 95% at 32% 10%, #000 0%, transparent 72%);
  mask-image: radial-gradient(85% 95% at 32% 10%, #000 0%, transparent 72%);
  opacity: 0.55;
}
.hero-grid { display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.hero h1 { font-size: clamp(2.5rem, 6.6vw, 4.35rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.04; margin-bottom: 1.25rem; }
.hero h1 em {
  color: var(--accent);
  background: var(--hero-em-bg); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lede { color: var(--text-secondary); font-size: clamp(1.05rem, 1.8vw, 1.2rem); max-width: 34em; margin-bottom: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.5rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 0; margin: 0; list-style: none; }
.hero-facts li { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-secondary); font-size: 0.875rem; font-weight: 600; }
.hero-facts svg { width: 15px; height: 15px; color: var(--success); flex: none; }

/* ─── The connected map ─── */
.map-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.map-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--border);
}
.map-card-head strong { font-family: var(--display); font-size: 1rem; letter-spacing: -0.01em; }
.map-card-head span { font-size: 0.75rem; font-weight: 700; color: var(--success); display: inline-flex; align-items: center; gap: 0.4rem; text-align: right; }
.map-card-head span i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }
@media (max-width: 479px) {
  .map-card-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .map-card-head span { text-align: left; }
}
.map-stage { position: relative; aspect-ratio: 100 / 104; margin: 0.75rem; }
.map-stage::before {
  /* blueprint dot grid behind the mesh, fading out at the edges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--map-dot) 1px, transparent 1.4px);
  background-size: 23px 23px; background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(130% 130% at 50% 50%, #000 52%, transparent 96%);
  mask-image: radial-gradient(130% 130% at 50% 50%, #000 52%, transparent 96%);
}
.map-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-stage path {
  fill: none; stroke: var(--map-line); stroke-width: 1.5px;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
  transition: stroke 0.25s ease, opacity 0.25s ease;
}
.map-chip {
  position: absolute; transform: translate(-50%, -50%); z-index: 1;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0;
  padding: 0.3rem 0.52rem; line-height: 1; white-space: nowrap;
  box-shadow: var(--shadow-card);
  transition: opacity 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.map-chip::after {
  /* invisible tap-target extension — chips stay visually small, taps don't
     (chip ≈24px tall, so -10px reaches the 44px minimum target) */
  content: ""; position: absolute; inset: -10px; border-radius: inherit;
}
.map-chip[data-hub="1"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
}
button.map-chip:hover { border-color: var(--accent); }
@media (min-width: 480px) { .map-chip { font-size: 0.78rem; padding: 0.36rem 0.66rem; } }

/* selection states (JS adds data-active on the stage; the selected chip
   moves to the centre and its links form a ring around it) */
.map-stage[data-active] .map-chip { opacity: 0.14; }
.map-stage[data-active] .map-chip.is-lit { opacity: 1; z-index: 2; }
.map-stage[data-active] path { opacity: 0.16; }
.map-stage[data-active] path.is-lit {
  opacity: 1; stroke: var(--accent); stroke-width: 2.2px;
  filter: drop-shadow(0 0 3px var(--accent-glow));
}
.map-stage[data-active] path.is-minor { opacity: 0.55; }
/* a streak of light riding each lit spoke into the centred module
   (pathLength=100 is set by JS, so the dash maths hold at any real length;
   the global reduced-motion rule kills the animation, leaving opacity 0) */
.map-stage path.is-pulse {
  stroke: color-mix(in srgb, var(--accent) 55%, #fff);
  stroke-width: 2.6px; stroke-dasharray: 10 90;
  opacity: 0;
  animation: map-pulse 2.6s linear infinite;
}
@keyframes map-pulse {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  12%  { opacity: 0.95; }
  88%  { opacity: 0.95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* hover preview (resting state only; JS adds data-preview on the stage) */
.map-stage[data-preview] path { opacity: 0.3; }
.map-stage[data-preview] path.is-hot { stroke: var(--accent); opacity: 1; stroke-width: 1.8px; }
.map-stage[data-preview] .map-chip { opacity: 0.45; }
.map-stage[data-preview] .map-chip.is-hot { opacity: 1; }
.map-chip.is-centre {
  background: var(--accent-soft); border-color: var(--accent); color: var(--text-primary);
  box-shadow: 0 0 18px var(--accent-glow);
  z-index: 3;
}
.map-caption {
  margin: 0 0.75rem 0.75rem; padding: 0.85rem 1rem;
  background: var(--bg-elevated); border-radius: var(--radius-md);
  font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5;
  min-height: 4.6em;
  display: flex; align-items: center;
}
.map-caption strong { color: var(--text-primary); }
.map-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1.15rem 1rem; font-size: 0.8125rem; color: var(--text-muted);
}

/* ─── Problem section ─── */
.problem-grid { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .problem-grid { grid-template-columns: 1fr 1fr; } }
.problem-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-card);
}
.problem-card h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.8rem; }
.problem-card p { color: var(--text-secondary); font-size: 0.9875rem; }
.problem-card p + p { margin-top: 0.7rem; }
.problem-tag {
  display: inline-flex; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.problem-tag.whatsapp { background: var(--success-soft); color: var(--success); }
.problem-tag.stack { background: var(--accent-soft); color: var(--accent); }
.problem-answer {
  margin-top: 1.5rem; padding: 1.15rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: var(--accent-soft); border-radius: var(--radius-lg);
  font-size: 1.02rem; font-weight: 600;
}
.problem-answer strong { font-family: var(--display); }

/* ─── A day with Angel Hub ─── */
.day-list { display: grid; gap: 1.25rem; }
/* The four moments hang off one vertical rail with a node per card, so the
   section reads as a day, not four unrelated cards. Desktop only — a phone
   has no margin to spend on it. #assets shares .day-list but not the rail. */
@media (min-width: 860px) {
  .day-rail { position: relative; padding-left: 2.75rem; }
  .day-rail::before {
    content: ""; position: absolute; left: 6px; top: 1.5rem; bottom: 1.5rem; width: 0;
    border-left: 1.5px dashed var(--border-strong);
  }
  .day-rail .day-moment { position: relative; }
  .day-rail .day-moment::before {
    content: ""; position: absolute; left: calc(-2.75rem + 1px); top: 50%; z-index: 1;
    width: 11px; height: 11px; margin-top: -6px; border-radius: 2px;
    transform: rotate(45deg);
    background: var(--bg-base); border: 1.5px solid var(--accent);
    box-shadow: 0 0 0 4px var(--band-bg);
  }
}
.day-moment {
  display: grid; gap: 1.25rem;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-card);
}
@media (min-width: 860px) {
  .day-moment { grid-template-columns: minmax(0, 1fr) 240px; align-items: center; }
  .day-moment:nth-child(even) { grid-template-columns: 240px minmax(0, 1fr); }
  .day-moment:nth-child(even) .day-copy { order: 2; }
  /* .is-wide — the teaching page's variant: a wide (1080×675) capture beside
     the copy, so the split is even instead of a 240px phone column. */
  .day-moment.is-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .day-moment.is-wide:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.day-time { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 0.95rem; letter-spacing: 0.04em; margin-bottom: 0.5rem; display: block; }
.day-copy h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.65rem; }
.day-copy p { color: var(--text-secondary); font-size: 0.9875rem; }
.day-copy p + p { margin-top: 0.6rem; }
.day-copy .chain { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); }
/* one pill look, two arrangements: .chain is an ordered sequence (arrows between),
   .pill-set an unordered set (no arrows). Shared selector so they can't drift apart. */
.chain span, .pill-set li { background: var(--bg-elevated); border: 1px solid var(--border-strong); padding: 0.3rem 0.6rem; border-radius: var(--radius-pill); }
.chain i { color: var(--text-muted); font-style: normal; }
.pill-set {
  margin: 0.7rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  font-size: 0.8125rem; font-weight: 700; color: var(--text-primary);
}
/* .day-copy spaces consecutive paragraphs; a pill set between them keeps that rhythm */
.day-copy .pill-set + p { margin-top: 0.7rem; }

/* ─── Placeholder screenshot frames (until Radek supplies real shots) ─── */
.shot-frame {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  display: grid; place-items: center; text-align: center;
  padding: 1rem; min-height: 170px;
  color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; line-height: 1.45;
}
.shot-frame svg { width: 26px; height: 26px; margin-bottom: 0.5rem; opacity: 0.7; }

/* Real product screenshots: each slot carries a dark/light pair and CSS shows
   the one matching the active theme (same attribute logic as the tokens above).
   The hidden image is display:none + loading=lazy, so it is not downloaded
   until the visitor actually switches theme. */
.shot-frame.has-shot {
  display: block; padding: 0; min-height: 0; overflow: hidden;
  border-style: solid; border-color: var(--border);
}
.shot-frame.has-shot img { display: block; width: 100%; height: auto; }
.shot-frame.has-shot .shot-light { display: none; }
[data-theme="light"] .shot-frame.has-shot .shot-dark { display: none; }
[data-theme="light"] .shot-frame.has-shot .shot-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .shot-frame.has-shot .shot-dark { display: none; }
  :root:not([data-theme="dark"]) .shot-frame.has-shot .shot-light { display: block; }
}
/* Phone-portrait shots in the day column: cap the width so the tall image
   doesn't tower over its copy on narrow screens */
.day-moment .shot-frame.has-shot { width: 100%; max-width: 280px; justify-self: center; }
.day-moment.is-wide .shot-frame.has-shot { max-width: none; }

/* Click-to-zoom (JS upgrades the frame; without JS there is no zoom control,
   so nothing on the page is dead). The overlay sits above the sticky header
   (z 100) and the skip link (z 200). */
.shot-frame.is-zoomable { cursor: zoom-in; position: relative; }
/* "there's more here" chip — JS-added, so it never appears without the zoom
   it promises. Dark translucent works over both themes' screenshots. */
.shot-zoom-hint {
  position: absolute; right: 10px; bottom: 10px;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: rgba(7, 9, 13, 0.62); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid; place-items: center; pointer-events: none;
}
.shot-zoom-hint svg { width: 15px; height: 15px; }
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5, 7, 10, 0.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  cursor: zoom-out;
  animation: lightbox-in 0.18s ease;
}
/* `display: grid` above would beat the UA's [hidden] rule and leave an
   invisible overlay swallowing every click on the page — never drop this */
.lightbox[hidden] { display: none; }
@keyframes lightbox-in { from { opacity: 0; } }
.lightbox img {
  max-width: 100%; max-height: calc(100vh - clamp(1.5rem, 6vw, 5rem));
  width: auto; height: auto;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  cursor: zoom-in;
}
/* Second stage: clicking the image itself magnifies to actual size and the
   overlay becomes a pan/scroll surface; clicking again fits it back. */
.lightbox.is-full { display: block; overflow: auto; }
.lightbox.is-full img {
  max-width: none; max-height: none;
  display: block; margin: 0 auto;
  cursor: zoom-out;
}
.lightbox-close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated); color: var(--text-primary);
  display: grid; place-items: center; cursor: pointer;
}
.lightbox-close svg { width: 18px; height: 18px; }
.lightbox-close:hover { border-color: var(--accent); }
body.lightbox-open { overflow: hidden; }

/* ─── Tour ─── */
.tour-list { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .tour-list { grid-template-columns: 1fr 1fr; } }
.tour-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 1.9rem); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 1rem;
}
.tour-card-head { display: flex; align-items: center; gap: 0.8rem; }
.tour-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex: none;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.tour-icon svg { width: 22px; height: 22px; }
.tour-card h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.tour-card > p { color: var(--text-secondary); font-size: 0.95rem; }
.tour-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.tour-card li { display: flex; gap: 0.6rem; font-size: 0.9375rem; color: var(--text-secondary); }
.tour-card li svg { width: 16px; height: 16px; flex: none; color: var(--success); margin-top: 0.2rem; }
.tour-card li strong { color: var(--text-primary); font-weight: 700; }
.tour-card .shot-frame { min-height: 120px; margin-top: auto; }

/* ─── How it starts ─── */
/* Three numbered steps on one dashed path: horizontal across the columns on
   desktop, vertical down the left on a phone. No card boxes — the connector
   is what says "then", and boxes would fight it. */
.steps { display: grid; gap: 1.5rem; counter-reset: step; }
.step { position: relative; padding-left: 3.5rem; }
.step-num {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--bg-base); color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--border-strong));
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.05rem;
}
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 19px; top: 46px; bottom: -1.5rem; width: 0;
  border-left: 1.5px dashed var(--border-strong);
}
.step h3 { font-size: 1.15rem; font-weight: 700; margin: 0.45rem 0 0.55rem; letter-spacing: -0.015em; }
.step p { color: var(--text-secondary); font-size: 0.9375rem; }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .step { padding-left: 0; }
  .step-num { position: static; margin-bottom: 1rem; }
  .step:not(:last-child)::before { left: 46px; right: -2rem; top: 19px; bottom: auto; border-left: 0; border-top: 1.5px dashed var(--border-strong); }
  .step h3 { margin-top: 0; }
}
.start-note { margin-top: 1.5rem; color: var(--text-secondary); font-size: 0.9875rem; }
.start-note strong { color: var(--text-primary); }

/* ─── Pricing ─── */
.price-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem;
  background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
  color: var(--text-primary);
  border-radius: var(--radius-lg); padding: 1rem 1.4rem; margin-bottom: 1.75rem;
  font-weight: 700; font-size: 0.9875rem;
}
.price-banner svg { width: 18px; height: 18px; color: var(--success); flex: none; }
.price-grid { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.75rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 0.4rem;
}
.price-card.is-mid {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
  box-shadow: var(--shadow-card), 0 18px 44px -22px var(--accent-glow);
}
.price-card h3 { font-size: 1.1rem; font-weight: 700; }
.price-card .amount { font-family: var(--display); font-size: 2.4rem; font-weight: 750; letter-spacing: -0.03em; }
.price-card .amount small { font-family: var(--body); font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0; }
.price-card .who { color: var(--text-secondary); font-size: 0.9rem; min-height: 2.7em; }
.price-card .who strong { color: var(--text-primary); font-weight: 700; }
.price-card .all-in { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); font-size: 0.875rem; color: var(--text-secondary); display: grid; gap: 0.45rem; }
.price-card .all-in span { display: flex; gap: 0.5rem; align-items: flex-start; }
.price-card .all-in svg { width: 15px; height: 15px; color: var(--success); flex: none; margin-top: 0.18rem; }
.price-notes { margin-top: 1.5rem; display: grid; gap: 0.4rem; color: var(--text-secondary); font-size: 0.9375rem; }
.price-notes strong { color: var(--text-primary); }

/* ─── Founder ─── */
.founder-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .founder-grid { grid-template-columns: 300px minmax(0, 1fr); } }
.founder-photo { aspect-ratio: 4 / 4.6; }
.founder-copy h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 750; letter-spacing: -0.03em; margin-bottom: 1rem; }
.founder-copy p { color: var(--text-secondary); }
.founder-copy p + p { margin-top: 0.9rem; }
.founder-copy .pledge {
  margin-top: 1.4rem; padding: 1.1rem 1.35rem;
  border: 1px solid color-mix(in srgb, var(--success) 38%, var(--border));
  background: var(--success-soft); border-radius: var(--radius-lg);
  color: var(--text-primary); font-weight: 600; font-size: 0.9875rem;
}

/* ─── FAQ ─── */
.faq-list { display: grid; gap: 0.75rem; max-width: 50rem; }
.faq-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 1.3rem; font-weight: 700; font-size: 1rem; min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--display); font-size: 1.3rem; color: var(--accent); flex: none; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item div { padding: 0 1.3rem 1.15rem; color: var(--text-secondary); font-size: 0.9625rem; }

/* ─── Final CTA ─── */
.cta-card {
  text-align: center; background: var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-xl); padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-pop), 0 0 90px -40px var(--accent-glow);
  background-image: radial-gradient(ellipse 60% 80% at 50% -10%, var(--hero-glow-1), transparent);
}
.cta-card h2 { font-size: clamp(1.9rem, 4.5vw, 2.85rem); font-weight: 750; letter-spacing: -0.03em; margin-bottom: 0.9rem; }
.cta-card p { color: var(--text-secondary); max-width: 36em; margin-inline: auto; }
.cta-card .hero-actions { justify-content: center; margin-top: 1.75rem; margin-bottom: 0; }
.cta-card .contact-line { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--text-muted); }
.cta-card .contact-line a { color: var(--accent); font-weight: 700; text-decoration: none; }
.cta-card .contact-line a:hover { text-decoration: underline; }

/* ─── Footer ─── */
.site-footer { border-top: 1px solid var(--border); padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem; margin-top: clamp(2rem, 6vw, 4rem); background: var(--band-bg); }
.footer-grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer-about { display: grid; gap: 0.5rem; justify-items: start; max-width: 24rem; }
.footer-about .brand { margin-bottom: 0.4rem; }
.footer-about p { color: var(--text-secondary); font-size: 0.9375rem; }
.footer-about a { color: var(--accent); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.footer-about a:hover { text-decoration: underline; }
.footer-h { font-family: var(--display); font-weight: 700; font-size: 0.9375rem; color: var(--text-primary); margin: 0 0 0.35rem; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col a { color: var(--text-secondary); font-weight: 600; font-size: 0.9375rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.footer-col a:hover { color: var(--text-primary); }
.footer-col a[aria-current="page"] { color: var(--accent); }
.footer-bottom { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.site-footer p { color: var(--text-muted); font-size: 0.875rem; }
.site-footer .brand-name { font-size: 0.9375rem; }
.site-footer .brand-mark { width: 28px; height: 28px; border-radius: 8px; }

/* ─── Reveal on scroll (JS adds .reveal; visible by default without JS) ─── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
/* Grid siblings arrive as a beat, not a block — transition only, so nothing
   is ever hidden without JS and reduced-motion still kills it globally. */
.problem-grid > :nth-child(2).reveal,
.steps > :nth-child(2).reveal,
.price-grid > :nth-child(2).reveal,
.tour-list > :nth-child(2).reveal { transition-delay: 0.09s; }
.steps > :nth-child(3).reveal,
.price-grid > :nth-child(3).reveal { transition-delay: 0.18s; }

/* ─── Compliance page (compliance.html) ───
   Chart tables + guide articles are GENERATED from the copy pack by
   tools/gen-compliance.js — see the GEN markers in compliance.html. */
.comp-hero h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); max-width: 18em; }
.comp-hero .hero-lede { max-width: 46em; }
.comp-start-label { font-weight: 700; font-size: 0.9375rem; margin: 1.75rem 0 0.6rem; }
.comp-start li { padding: 0; font-size: 0.8125rem; font-weight: 700; }
.comp-start a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem; color: inherit; text-decoration: none; }
.comp-start a:hover, .comp-start a:focus-visible { color: var(--accent); }

/* ── "How Angel Hub helps" capability cards ── */
.help-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.help-card { border: 1px solid var(--border); background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.2rem 1.25rem; }
.help-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.help-tick { width: 26px; height: 26px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; flex: none; }
.help-tick svg { width: 14px; height: 14px; }
.help-card h3 { font-size: 0.9995rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.help-card p { color: var(--text-secondary); font-size: 0.875rem; margin: 0; }

/* ── Law / guidance badges (chart) + legend ── */
.mark { display: inline-block; padding: 0.08rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.71rem; font-weight: 800; letter-spacing: 0.02em; }
.mark-law { color: var(--warning); background: var(--warning-soft); }
.mark-guidance { color: var(--text-secondary); background: var(--bg-elevated); }
.comp-legend { margin-top: 1rem; font-size: 0.875rem; color: var(--text-secondary); }

/* ── Green tick lists (chart "How Angel Hub helps" cells) ── */
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.tick-list li { position: relative; padding-left: 1.5rem; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 15px; height: 15px;
  background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Domain chip nav (chart + guides) ── */
.comp-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.comp-tabs a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-surface); font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); text-decoration: none; box-shadow: var(--shadow-card); }
.comp-tabs a:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-hover); }
.comp-tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.comp-tabs svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.comp-tab-count { font-size: 0.6875rem; font-weight: 800; color: var(--text-muted); background: var(--bg-elevated); border-radius: var(--radius-pill); padding: 0.12rem 0.5rem; }
.comp-count { font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); margin: 0 0 1.5rem; }

/* ── Domain folds: one <details> per area — native, so they work without
   JavaScript. The chevron rotates on open (killed by the global
   reduced-motion rule). ── */
.comp-fold { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-card); margin-bottom: 0.9rem; overflow: hidden; }
.comp-fold > summary { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.4rem; min-height: 44px; cursor: pointer; list-style: none; }
.comp-fold > summary::-webkit-details-marker { display: none; }
.comp-fold > summary:hover { background: var(--bg-hover); }
.comp-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.comp-fold-icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.comp-fold-icon svg { width: 19px; height: 19px; }
.comp-fold-name { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em; }
.comp-fold-sub { display: block; font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; color: var(--text-muted); }
.fold-chev { width: 20px; height: 20px; margin-left: auto; color: var(--text-muted); flex: none; transition: transform 0.25s ease; }
details[open] > summary .fold-chev { transform: rotate(180deg); }
.comp-fold-body { padding: 0 1.4rem 1.4rem; }
/* JS-injected open-all / close-all controls */
.fold-controls { display: flex; gap: 0.5rem; margin: 0 0 1.25rem; }

/* ── The chart tables (three columns; the page never scrolls sideways) ── */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.comp-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.875rem; line-height: 1.55; }
.comp-table th { text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 0.8rem 0.9rem 0.8rem 0; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.comp-table td { padding: 1rem 0.9rem 1rem 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
.comp-table tbody tr:last-child td { border-bottom: 0; padding-bottom: 0.25rem; }
.comp-table td:first-child { color: var(--text-primary); font-weight: 600; width: 34%; }
.comp-table td:nth-child(2) { width: 30%; }
.comp-table td:nth-child(3) { width: 36%; padding-right: 0; }
.comp-what { display: block; font-weight: 500; color: var(--text-secondary); font-size: 0.8125rem; margin-top: 0.25rem; }
/* negative-margin trick keeps the visual row height while growing the tap
   target toward 44px */
.comp-table a { color: var(--accent); font-weight: 700; text-decoration: none; display: inline-block; padding: 0.55rem 0; margin: -0.55rem 0; }
.comp-table a:hover { text-decoration: underline; }
.comp-table a.comp-guide-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; margin-top: 0.35rem; }
.comp-guide-link svg { width: 13px; height: 13px; }

/* Below 720px each table row becomes a stacked card — no sideways scroll,
   column labels come from data-th. */
@media (max-width: 719px) {
  .table-scroll { overflow: visible; }
  .comp-table, .comp-table tbody, .comp-table tr, .comp-table td { display: block; min-width: 0; width: auto; }
  /* the desktop column widths are higher-specificity — reset them here */
  .comp-table td:first-child, .comp-table td:nth-child(2), .comp-table td:nth-child(3) { width: auto; }
  .comp-table thead { display: none; }
  .comp-table tr { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); margin-bottom: 0.8rem; padding: 0.4rem 0; }
  .comp-table tbody tr:last-child { margin-bottom: 0; }
  .comp-table td { border: none; padding: 0.55rem 1.1rem; }
  .comp-table td:first-child { padding-top: 0.9rem; }
  .comp-table td:last-child, .comp-table tbody tr:last-child td { padding-bottom: 0.9rem; }
  .comp-table td:not(:first-child)::before { content: attr(data-th); display: block; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.35rem; }
  .comp-fold-body { padding: 0 1rem 1rem; }
}

/* ── Domain headings in the guides section ── */
.comp-domain { display: flex; align-items: center; gap: 0.7rem; font-size: clamp(1.2rem, 2.4vw, 1.45rem); letter-spacing: -0.015em; margin: 2.75rem 0 1.1rem; }
.comp-domain-icon { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.comp-domain-icon svg { width: 17px; height: 17px; }
.comp-domain-count { font-family: var(--body); font-size: 0.78rem; font-weight: 700; color: var(--text-muted); background: var(--bg-elevated); border-radius: var(--radius-pill); padding: 0.25rem 0.7rem; }

/* ── Guides: each one a collapsed <details> card — the section reads as an
   index of titles until a guide is opened. ── */
.guide { border: 1px solid var(--border); background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 0.75rem; overflow: hidden; }
.guide > summary { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 1.3rem; min-height: 44px; cursor: pointer; list-style: none; }
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary:hover { background: var(--bg-hover); }
.guide > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.guide > summary h4 { font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0; }
.guide-body { padding: 0.3rem 1.3rem 1.4rem; }
.guide p, .guide li { color: var(--text-secondary); }
.guide-body p { margin: 0 0 0.9rem; }
.guide-body p:last-child { margin-bottom: 0; }
.guide strong { color: var(--text-primary); }
.guide-body p.guide-h { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 1.35rem 0 0.6rem; }
.guide-expected { padding-left: 0.9rem; border-left: 2px solid var(--border-strong); }
.guide ul { margin: 0 0 1.1rem; padding-left: 1.3rem; display: grid; gap: 0.45rem; }
.guide-steps { list-style: none; counter-reset: gstep; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.6rem; }
.guide-steps li { position: relative; padding-left: 2.15rem; counter-increment: gstep; }
.guide-steps li::before { content: counter(gstep); position: absolute; left: 0; top: 0.05em; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--display); font-weight: 800; font-size: 0.75rem; display: grid; place-items: center; }
.guide-payoff { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--success-soft); border-radius: var(--radius-md); padding: 0.8rem 1rem; }
.guide-payoff svg { width: 16px; height: 16px; flex: none; color: var(--success); margin-top: 0.25em; }
.guide-meta { border-top: 1px solid var(--border); padding-top: 0.9rem; margin-top: 1.1rem; }
.guide a { color: var(--accent); font-weight: 600; text-decoration: none; }
.guide a:hover { text-decoration: underline; }
.guide-back a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.85rem; font-weight: 700; }

.comp-disclaimer { margin-top: 2rem; text-align: center; font-style: italic; color: var(--text-muted); font-size: 0.85rem; }

/* ─── Legal pages (privacy.html, terms.html) ───
   Long-form prose only: one measure-capped column, no cards, no new colours.
   Everything else on these pages is existing primitives. */
.legal { max-width: 44rem; }
.legal h2 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 700; letter-spacing: -0.02em; margin: 2.6rem 0 0.85rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.legal li { margin-bottom: 0.45rem; }
.legal li::marker { color: var(--text-muted); }
.legal strong { color: var(--text-primary); font-weight: 700; }
.legal a { color: var(--accent); font-weight: 600; text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal-meta { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 2.4rem; }
.legal-key {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: var(--accent-soft); border-radius: var(--radius-lg);
  padding: 1.05rem 1.2rem; margin-bottom: 2rem;
}
.legal-key p { color: var(--text-primary); }
.legal-key p:last-child { margin-bottom: 0; }
/* Loud on purpose: an unfilled fact must be impossible to miss in review, and
   must never reach a published page. Delete the span, not just the colour. */
.legal-todo { color: var(--warning); font-weight: 800; background: var(--warning-soft); padding: 0 0.3rem; border-radius: 4px; }

/* anchor jumps land clear of the sticky header */
.guide, .comp-domain, .comp-fold, #chart, #guides, #how { scroll-margin-top: 5rem; }

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