/* Cassia Vitality shared design system.
   Tokens and components for every page of the site.
   System font stack; no external requests. */

/* ---------- 1. Tokens ---------- */
:root {
  /* ===== §1a colour (design pass 2026-09-29). Old names kept as aliases so page styles keep working. ===== */
  /* text */
  --ink: #16202A;              /* primary text, headings */
  --ink-2: #4C5A67;            /* secondary text */
  --ink-3: #55606C;            /* tertiary: captions, meta (floor 12px) */
  --text: var(--ink);
  --text-2: var(--ink-2);      /* was #6b6b6b (retired) */
  --text-3: var(--ink);        /* was #2c2d30 (retired) */
  --ink-soft: var(--ink-2);
  --ink-faint: var(--ink-3);   /* was #5E6B7A (retired as text) */
  /* lines */
  --line: #E4E9ED;             /* decorative only, never a state */
  --line-strong: #7F8B98;      /* borders that carry state or bound a control */
  --line-2: var(--line);       /* retired extra hairline grey */
  --rule: var(--line);
  --rule-2: var(--line);
  /* action */
  --action: #2F63D0;
  --action-hover: #1F4E8F;
  --action-deep: var(--action);
  --sticky-btn: var(--action);
  --sticky-btn-hover: var(--action-hover);
  --blue: #1F4E8F;
  --blue-deep: #173B6B;
  --blue-bright: #2E73C8;      /* orb and diagram accent only; not text on tint */
  --blue-tint: #EAF1FA;
  --blue-wash: #F6F9FD;
  --blue-on-dark: #9CC3F0;
  /* focus: replaces --highlight #82d4ff */
  --focus: #1F4E8F;
  --focus-halo: #FFFFFF;
  --highlight: var(--blue-on-dark); /* legacy alias for page rules on dark photos; focus rings use --focus */
  /* surfaces */
  --page: #ffffff;
  --glass: #ffffff80;
  --panel: #f9fafb;
  /* footer */
  --foot-text: var(--ink-2);   /* was #6f6c90 (retired) */
  --foot-link: var(--action);
  /* chrome */
  --header-bg: rgba(0, 0, 0, .66);
  --panel-dark: rgb(30, 33, 39);
  --sticky-bg: rgba(58, 62, 62, .8);
  /* overlays and scrims */
  --ov-video: rgba(0, 0, 0, .05);
  --scrim-text: rgba(0, 0, 0, .70);
  --scrim-hero: linear-gradient(to top, rgba(0, 0, 0, .72) 0, rgba(0, 0, 0, .70) 45%, rgba(0, 0, 0, 0) 75%);
  --ov-hero: rgba(0, 0, 0, .70);   /* flat .55 veil retired; pages still reading it get the .70 text scrim */
  --ov-band: #252525;              /* used with opacity .70 */
  /* gradients */
  --grad-text: linear-gradient(180deg, #67a1ff 2%, #9b8eee 22%, #cf7bdc 42%, #e78aae 55.5%, #ff9980 69%, #d99ba0 75.375%, #b39dc0 81.75%, #8d9fdf 88.125%, #67a1ff 94.5%);
  --grad-text-90: linear-gradient(90deg, #67a1ff 2%, #9b8eee 22%, #cf7bdc 42%, #e78aae 55.5%, #ff9980 69%, #d99ba0 75.375%, #b39dc0 81.75%, #8d9fdf 88.125%, #67a1ff 94.5%);
  --grad-hero-fallback: linear-gradient(146.997deg, rgb(190, 219, 255) 0%, rgba(233, 212, 255, .3) 50%, rgba(142, 197, 255, .35) 100%);
  --grad-blob: conic-gradient(from 180deg, #67a1ff, #cf7bdc, #ff9980, #67a1ff);
  --grad-glow: conic-gradient(from 180deg at 50% 50%, #67a1ff -20deg, #67a1ff 7deg, #cf7bdc 151deg, #ff9980 248deg, #67a1ff 340deg, #67a1ff 367deg);
  /* gradient words on light surfaces: every stop 4.68 to 5.75:1 on white */
  --grad-text-ink: linear-gradient(90deg, #3b6ad6 0%, #6b4fd0 28%, #a3409f 55%, #b8456f 78%, #c0504a 100%);
  /* gradient words on photos: only over a scrim of .70 or more */
  --grad-text-on-dark: linear-gradient(90deg, #9CC3F0 0%, #FFC4AD 100%);
  /* data (light) */
  --bar-track: #84909D; --bar-in: #1B4A2C; --mark: #16202A; --mark-warn: #A86F14;
  --word-ok: #3D5A39; --word-warn: #7A520B;
  /* diagram accents */
  --dia-blue: #2E73C8; --dia-violet: #6F5FD6; --dia-coral: #D0512F;
  --band-edge-red: #A93A37; --band-edge-teal: #1F7A73;
  /* ===== §1b type ===== */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-12: .75rem; --fs-14: .875rem; --fs-16: 1rem; --fs-17: 1.0625rem; --fs-18: 1.125rem;
  --h3: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --h2: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  --h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --hero: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --lh-head: 1.1; --lh-body: 1.55; --lh-long: 1.6;
  --measure: 66ch;
  /* ===== §1c space, radius, elevation, motion ===== */
  --container: 1250px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-pad: clamp(64px, 8vw, 128px);
  --header-h: 70px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-full: 999px;
  --r-4: var(--r-sm); --r-6: var(--r-sm); --r-8: var(--r-sm); --r-10: var(--r-md); --r-12: var(--r-md); --r-16: var(--r-lg); --r-pill: var(--r-full);
  --sh-sm: 0 1px 2px rgba(22, 32, 42, .06), 0 1px 3px rgba(22, 32, 42, .08);
  --sh-md: 0 4px 12px rgba(22, 32, 42, .10);
  --sh-lg: 0 12px 32px rgba(22, 32, 42, .14);
  --sh-1: var(--sh-md);
  --sh-2: var(--sh-md);
  --sh-bar: 0 -4px 30px rgba(0, 0, 0, .1);
  --dur-1: 150ms; --dur-2: 250ms; --dur-3: 400ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease: var(--dur-2) ease;
  /* crisis red: not an Agent hue */
  --crisis-red: #C62828;
  /* legal draft banner */
  --draft-bg: #FBF4E4; --draft-rule: #EEDFB8; --draft-ink: #5E4513;
  /* default orb colours (Cassia) */
  --orb-bright: #2E73C8; --orb-mid: #1F4E8F; --orb-deep: #173B6B;
}
/* data tokens, dark surfaces */
[data-theme="dark"], .theme-dark {
  --bar-track: #6B7887; --bar-in: #C8EBCF; --mark: #F5F7F8; --mark-warn: #E0A64A;
  --word-ok: #B6CFB0; --word-warn: #E9B865;
}

/* Agent colours: one unique hue per Agent */
.orb--hazel,  [data-agent="hazel"]  { --orb-bright: #E0A33B; --orb-mid: #B8802A; --orb-deep: #7E5719; }
.orb--cassia, [data-agent="cassia"] { --orb-bright: #2E73C8; --orb-mid: #1F4E8F; --orb-deep: #173B6B; }
.orb--marcus, [data-agent="marcus"] { --orb-bright: #2FA39A; --orb-mid: #1F7A73; --orb-deep: #155450; }
.orb--theo,   [data-agent="theo"]   { --orb-bright: #D9534F; --orb-mid: #A93A37; --orb-deep: #742826; }
.orb--simone, [data-agent="simone"] { --orb-bright: #E8834E; --orb-mid: #BD5F2E; --orb-deep: #84421F; }
.orb--rowan,  [data-agent="rowan"]  { --orb-bright: #5FAF5A; --orb-mid: #3F823B; --orb-deep: #2A5A28; }
.orb--ines,   [data-agent="ines"]   { --orb-bright: #9FB33A; --orb-mid: #768A26; --orb-deep: #515F19; }
.orb--clara,  [data-agent="clara"]  { --orb-bright: #D96A9E; --orb-mid: #A84A78; --orb-deep: #743352; }
.orb--mira,   [data-agent="mira"]   { --orb-bright: #4DB3E6; --orb-mid: #2F86B3; --orb-deep: #1F5C7C; }
.orb--adrian, [data-agent="adrian"] { --orb-bright: #A05CB0; --orb-mid: #7A4287; --orb-deep: #54305D; }
.orb--julian, [data-agent="julian"] { --orb-bright: #B87A4B; --orb-mid: #8B5A33; --orb-deep: #603E22; }
.orb--elias,  [data-agent="elias"]  { --orb-bright: #7E6BD1; --orb-mid: #5A4AA6; --orb-deep: #3E3376; }

/* ---------- 2. Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  padding-top: var(--header-h);
  overflow-x: clip;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul[role="list"], .plain-list { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-halo); border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: #fff; color: var(--ink); padding: 10px 16px; border-radius: var(--r-8);
  box-shadow: var(--sh-2); font-weight: 600; text-decoration: none; transition: top var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- 3. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * .6); }
.section--flush-top { padding-top: 0; }
.section > .container { position: relative; z-index: 1; }

.section-head { text-align: center; max-width: 900px; margin: 0 auto 60px; }
.section-head--mid { margin: 60px auto 0; }
.section-head h2, .h2 {
  font-size: var(--h2); line-height: var(--lh-head); font-weight: 500; margin-bottom: 20px; color: var(--text);
  letter-spacing: -.005em;
}
.desc, .section-head p {
  max-width: 640px; margin-inline: auto; color: var(--text-2); font-size: 1rem; line-height: var(--lh-body);
}
.lead { font-size: 1.125rem; line-height: var(--lh-body); color: var(--text-3); }
.small { font-size: .875rem; }
.xs { font-size: .75rem; }

/* gradient text */
.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grad--90 { background: var(--grad-text-90); -webkit-background-clip: text; background-clip: text; }

/* soft blobs behind sections (desktop only) */
.blob {
  position: absolute; z-index: 0; width: 400px; height: 400px; border-radius: 50%;
  background: var(--grad-blob); opacity: .3; filter: blur(90px); pointer-events: none;
  display: none;
}
.blob--l { left: -140px; }
.blob--r { right: -140px; }
@media (min-width: 1024px) { .blob { display: block; } }

/* ---------- 4. Buttons, links, pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 28px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: var(--action); color: #fff;
  font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform var(--ease), background-color var(--ease), box-shadow var(--ease), color var(--ease);
}
.btn:hover { transform: translateY(-2px); background: var(--action-hover); box-shadow: 0 8px 20px rgba(47, 99, 208, .35); }
.btn--ghost { background: transparent; color: var(--action-deep); border-color: var(--action); }
.btn--ghost:hover { background: var(--blue-tint); color: var(--blue); box-shadow: none; }
.btn--light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.btn--light:hover { background: rgba(255, 255, 255, .12); box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 6px; color: var(--action-deep);
  font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.arrow-link .arr { display: inline-block; transition: transform .2s ease; }
.arrow-link:hover .arr, .arrow-link:focus-visible .arr { transform: translateX(5px); }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-size: .875rem; font-weight: 600;
  text-decoration: none; transition: border-color var(--ease), box-shadow var(--ease);
}
.pill:hover { border-color: var(--action); box-shadow: var(--sh-2); }
.chip {
  display: inline-block; padding: 6px 12px; border-radius: var(--r-pill); background: var(--blue-tint);
  color: var(--blue); font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}

/* pill tablist (FAQ groups and similar) */
.pill-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px; border-radius: var(--r-pill); background: var(--panel); width: max-content; max-width: 100%; margin: 0 auto 40px; }
.pill-tabs [role="tab"] {
  min-height: 44px; padding: 10px 20px; border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--text-2); font-weight: 600; cursor: pointer; transition: background-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.pill-tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--blue); box-shadow: var(--sh-sm); outline: 1px solid var(--line-strong); }

/* ---------- 5. Orbs and portraits ---------- */
.orb {
  --s: 56px;
  display: inline-block; flex: none; width: var(--s); height: var(--s); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--orb-bright), var(--orb-mid) 55%, var(--orb-deep));
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .18);
}
.orb--drift { animation: orb-drift 8s ease-in-out infinite; }
@keyframes orb-drift { 50% { transform: translateY(-4px); } }

.portrait {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--panel);
  box-shadow: 0 0 0 3px var(--orb-bright), 0 0 0 4px var(--orb-deep);
}

/* ---------- 6. Header and navigation ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  background: var(--header-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--sh-1); color: #fff;
}
.site-header__inner {
  height: 100%; display: flex; align-items: center; gap: 8rem; padding: 20px 40px;
  max-width: 1600px; margin-inline: auto;
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: .28em; font-size: 1.375rem; font-weight: 600;
  letter-spacing: -.01em; line-height: 1; text-decoration: none; color: #fff; white-space: nowrap;
}
.wordmark__v { color: var(--blue-on-dark); }
.wordmark--ink { color: var(--ink); }
.wordmark--ink .wordmark__v { color: var(--blue); }

.site-nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.site-nav__main { gap: 4rem; }
.site-nav__side { gap: 24px; }
.site-nav a {
  color: rgba(255, 255, 255, .85); text-decoration: none; font-size: 1rem; font-weight: 500;
  transition: color var(--ease); white-space: nowrap;
}
.site-nav a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-nav a[aria-current="page"] {
  color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.site-nav__login a { color: rgba(255, 255, 255, .78); font-size: 14px; }

.nav-toggle {
  display: none; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; background: transparent;
  cursor: pointer; position: relative; border-radius: 8px;
}
.nav-toggle__line {
  position: absolute; left: 8px; width: 24px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform var(--ease), opacity var(--ease);
}
.nav-toggle__line:nth-child(1) { top: 12px; }
.nav-toggle__line:nth-child(2) { top: 19px; }
.nav-toggle__line:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .site-header__inner { padding: 15px 20px; gap: 3rem; }
  .site-nav__main { gap: 2.25rem; }
}

@media (max-width: 767px) {
  :root { --header-h: 64px; }
  body { padding-top: 0; }
  .site-header { position: sticky; top: 0; }
  .site-header__inner { padding: 12px 16px; gap: 16px; }
  .wordmark { font-size: 1.25rem; }
  .js .nav-toggle { display: block; }
  .site-nav {
    position: fixed; left: 0; right: 0; top: 64px; z-index: 99;
    flex-direction: column; align-items: flex-end; gap: 32px; padding: 24px;
    background: var(--panel-dark); border-top: 1px solid #b4b5ba;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    max-height: calc(100svh - 64px); overflow-y: auto;
  }
  .js .site-nav:not(.is-open) { display: none; }
  .site-nav ul { flex-direction: column; align-items: flex-end; gap: 32px; width: 100%; }
  .site-nav a { font-size: 1.125rem; }
  .site-nav__login { width: 100%; text-align: right; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .22); }
  .site-nav__login a { font-size: 1rem; }
  /* without script the menu sits in flow under the bar */
  .no-js .site-header { height: auto; position: relative; }
  .no-js .site-header__inner { flex-wrap: wrap; height: auto; }
  .no-js .site-nav { position: static; width: 100%; max-height: none; }
}

/* ---------- 7. Media: films, loops, stills ---------- */
/* A looping film is followed by a sibling still; the still shows under reduced motion or data saver. */
.loop-still { display: none; }
.media-fill, .media-fill > img, .media-fill video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.loop-still > img { width: 100%; height: 100%; object-fit: cover; }
.save-data video.loop { display: none; }
.save-data .loop-still { display: block; }

/* full-bleed film hero (§2 marketing hero; §3.1). No negative margin: the hero starts under the bar. */
.hero-film {
  position: relative; isolation: isolate;
  height: calc(100svh - var(--header-h)); min-height: 640px; max-height: 1000px;
  overflow: hidden; background: var(--grad-hero-fallback); color: #fff;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; text-align: left;
}
.hero-film > video, .hero-film > .loop-still, .hero-film > .hero-still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.hero-film::before { content: none; }
.hero-film::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-hero); }
.hero-film__copy {
  width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto;
  padding: 0 var(--gutter) clamp(40px, 7svh, 72px);
}
.hero-film__copy > * { max-width: 560px; }
.hero-film h1 { font-size: var(--hero); line-height: var(--lh-head); font-weight: 400; letter-spacing: -.01em; }
.hero-film h1 .grad { font-weight: 500; }
.hero-film__sub { margin-top: 12px; font-size: 1.125rem; line-height: var(--lh-body); color: #fff; }
.hero-film__cue {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: 28px; border-radius: 50%;
  color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .55);
  transition: background-color var(--ease), transform var(--ease);
}
.hero-film__cue:hover { background: rgba(255, 255, 255, .14); transform: translateY(2px); }
.hero-film__cue svg { width: 18px; height: 18px; }

/* still hero (secondary pages) */
.hero-still-block {
  position: relative; isolation: isolate; margin-top: calc(-1 * var(--header-h)); height: 447px; overflow: hidden;
  background: var(--grad-hero-fallback); color: #fff; display: grid; place-items: center; text-align: center;
}
.hero-still-block--tall { height: 650px; }
.hero-still-block > img, .hero-still-block > video, .hero-still-block > .loop-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-still-block::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ov-hero); }
.hero-still-block h1 { font-size: var(--h1); line-height: var(--lh-head); font-weight: 400; padding: 0 24px; }

/* §2 marketing hero on the four 447px banners (§3.1): full height, bottom scrim, copy bottom-left.
   Two classes so the rule outranks each page's own one-class hero rules. */
.hero-still-block:is(.films-hero, .fx-hero, .tour-hero, .ag-hero) {
  height: calc(100svh - var(--header-h)); min-height: 640px; max-height: 1000px;
  margin-top: 0; place-items: end start; text-align: left;
  padding: 0 max(var(--gutter), (100% - var(--container)) / 2) clamp(40px, 7svh, 72px);
}
.hero-still-block:is(.films-hero, .fx-hero, .tour-hero, .ag-hero)::after { background: var(--scrim-hero); }
.hero-still-block:is(.films-hero, .fx-hero, .tour-hero, .ag-hero) h1 {
  max-width: 560px; padding: 0; margin: 0; align-self: end; font-size: var(--hero); line-height: var(--lh-head);
  filter: none; text-shadow: none;
}
/* agents.html pins its mosaic at top: var(--header-h) for the old hero that slid under the header;
   this hero now starts below the header, so the mosaic fills it from the top edge */
.hero-still-block.ag-hero .ag-mosaic { inset: 0; }

/* framed media (photo treatment: radius 12, white border, soft shadow) */
.frame {
  position: relative; overflow: hidden; border-radius: var(--r-md); border: 2px solid #fff;
  box-shadow: var(--sh-md); background: var(--grad-hero-fallback); aspect-ratio: 575 / 430;
}
.frame > img, .frame > video, .frame > .loop-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame--square { aspect-ratio: 1; }
.frame--portrait { aspect-ratio: 3 / 4; }
.frame--3x2 { aspect-ratio: 3 / 2; }
.frame--21x9 { aspect-ratio: 21 / 9; }
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--4x5 > img, .frame--4x5 > video, .frame--4x5 > .loop-still { object-position: 50% 25%; }

/* loop pause button (§2, WCAG 2.2.2). site.js adds one to each decorative loop; state in localStorage cv-motion. */
.loop-host { position: relative; }
.loop-pause {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  transition: background-color var(--dur-1) ease;
}
.loop-pause:hover { background: rgba(0, 0, 0, .75); }
.loop-pause svg { width: 16px; height: 16px; }
.loop-pause .i-play { display: none; }
.loop-pause[aria-pressed="true"] .i-play { display: block; }
.loop-pause[aria-pressed="true"] .i-pause { display: none; }
.hero-film > .loop-pause, .hero-still-block > .loop-pause { right: var(--gutter); bottom: 24px; }
/* phones: hero copy owns the bottom edge (left on film heroes, centred on the membership hero), so the button moves to the top corner */
@media (max-width: 767px) {
  .hero-film > .loop-pause, .hero-still-block > .loop-pause { top: 12px; bottom: auto; right: 12px; }
}
.save-data .loop-pause { display: none; }

/* ---------- 8. Continuum diagram (and any SVG diagram block) ---------- */
.diagram { margin: 0 auto 48px; max-width: 760px; }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram text { font-family: var(--font); }

/* ---------- 9. Zig-zag blocks ---------- */
.zz-stack { display: grid; gap: 4rem; }
.zz {
  display: grid; grid-template-columns: minmax(0, 575px) minmax(0, 344px); gap: 30px 60px;
  justify-content: center; align-items: center;
}
.zz--flip { grid-template-columns: minmax(0, 344px) minmax(0, 575px); }
.zz--flip > .zz__media { order: 2; }
.zz__copy h3 { font-size: var(--h2); line-height: var(--lh-head); font-weight: 500; margin-bottom: 30px; letter-spacing: -.005em; }
.zz__copy p { color: var(--text-2); font-size: 1rem; line-height: var(--lh-body); }

/* ---------- 10. Team frame, phone mock, cards ---------- */
.team-frame {
  position: relative; max-width: 900px; margin: 0 auto 60px; padding: 28px; border-radius: var(--r-12);
  background: linear-gradient(160deg, #eef1fb, #f6f2fa 60%, #fbf1f1); box-shadow: var(--sh-1);
}
.team-frame__inner {
  position: relative; overflow: hidden; border-radius: 40px; padding: 48px 24px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), -6px -6px 22px rgba(103, 161, 255, .38), 6px 8px 24px rgba(255, 153, 128, .32);
}
.team-frame__orbs { position: absolute; inset: 0; pointer-events: none; }
.team-frame__orbs .orb { position: absolute; opacity: .9; }

.phone-wrap { position: relative; display: grid; place-items: center; isolation: isolate; }
.phone-wrap::before {
  content: ""; position: absolute; z-index: -1; width: 88%; height: 80%; border-radius: 50%;
  background: var(--grad-glow); opacity: .5; filter: blur(90px);
}
.phone {
  --pw: 320px;
  position: relative; width: var(--pw); max-width: 100%; aspect-ratio: 9 / 17;
  border-radius: 48px; border: 10px solid #111; background: #fff; overflow: hidden;
  box-shadow: 0 30px 60px rgba(22, 32, 42, .22), inset 0 0 0 1px rgba(255, 255, 255, .2);
  display: flex; flex-direction: column; text-align: left; color: var(--ink);
}
.phone--lg { --pw: 340px; }
.phone__status {
  display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 6px;
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.phone__notch { width: 86px; height: 22px; border-radius: 12px; background: #111; }
.phone__sig { display: inline-flex; gap: 3px; align-items: flex-end; }
.phone__sig i { display: block; width: 3px; border-radius: 1px; background: var(--ink); }
.phone__sig i:nth-child(1) { height: 5px; } .phone__sig i:nth-child(2) { height: 7px; } .phone__sig i:nth-child(3) { height: 9px; } .phone__sig i:nth-child(4) { height: 11px; }
.phone__head {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px 12px; border-bottom: 1px solid var(--line);
}
.phone__head b { display: block; font-size: 15px; }
.phone__head small { display: block; font-size: 12px; color: var(--ink-faint); }
.phone__chat {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 16px 14px; overflow: hidden;
  background: linear-gradient(180deg, #fff, #f7f9fc);
}
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.msg p { padding: 10px 13px; border-radius: 18px; font-size: 14px; line-height: 1.38; }
.msg--agent p { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg--you { align-self: flex-end; justify-content: flex-end; }
.msg--you p { background: var(--blue-tint); color: var(--ink); border-bottom-right-radius: 6px; }
.msg .orb { --s: 24px; }
.phone__chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 32px; }
.phone__chip {
  position: relative; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--action); background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 7px 11px; text-decoration: none;
}
.phone__chip::after { content: ""; position: absolute; inset: -7px 0; }
.phone__chip:hover, .phone__chip:focus-visible { border-color: var(--action); }
.phone__input {
  display: flex; align-items: center; gap: 10px; margin: 0 12px 14px; padding: 8px 8px 8px 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; font-size: 13px; color: var(--ink-faint);
}
.phone__input .mic {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--orb-bright); color: #fff;
}
.phone__input .mic svg { width: 14px; height: 14px; }
.phone__bar { width: 34%; height: 5px; border-radius: 3px; background: #111; margin: 0 auto 8px; opacity: .85; }

/* feature cards */
.cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; max-width: 1080px; margin-inline: auto; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 24px 18px; border-radius: var(--r-md); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.card[aria-selected="true"], .card[aria-current], .card.is-selected, .card.is-open, details.card[open] { border-color: var(--line-strong); }
.card__icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
  box-shadow: var(--sh-md);
}
.card__icon .orb { --s: 56px; }
.card h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--text); }
.card p { font-size: .875rem; line-height: var(--lh-body); color: var(--text-2); flex: 1; }
.card .arrow-link { margin-top: 6px; font-size: .875rem; font-weight: 500; }

/* portrait strip */
.portrait--tall { object-position: 50% 22%; }
.portrait-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 56px auto 24px; max-width: 1080px; padding: 0; list-style: none; }
.portrait-strip li { display: block; }
.strip-link { text-align: center; }

/* ---------- 11. Trust: glass cards and badge tiles ---------- */
.trust-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 525px)); justify-content: center; gap: 30px; }
.trust-card {
  display: flex; flex-direction: column; border-radius: var(--r-16); overflow: hidden; background: #fff;
  box-shadow: var(--sh-1); border: 1px solid var(--line);
}
.trust-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--grad-hero-fallback); }
.trust-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trust-card__body { padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.trust-card h3 { font-size: 1.5rem; line-height: 1.2; font-weight: 500; }
.trust-card p { color: var(--text-2); font-size: .9375rem; line-height: 1.55; flex: 1; }

.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center; gap: 30px; margin-top: 30px; list-style: none; padding: 0; }
.badge {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 15px; border-radius: var(--r-12);
  background: #fff; box-shadow: var(--sh-1); border: 1px solid var(--line); text-align: center;
  font-size: .9375rem; font-weight: 500; color: var(--text-3); text-decoration: none;
  transition: transform var(--ease), box-shadow var(--ease);
}
a.badge:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.badge svg { width: 40px; height: 40px; }

.glass-card {
  border-radius: var(--r-16); padding: 40px; background: var(--glass);
  -webkit-backdrop-filter: blur(22.57px); backdrop-filter: blur(22.57px); box-shadow: var(--sh-1);
}
.masonry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; grid-auto-flow: dense; }
.masonry > .tall { grid-row: span 2; }

/* ---------- 12. Agent film ---------- */
.agent-film { display: grid; justify-items: center; text-align: center; gap: 18px; }
.agent-film__frame {
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 1084 / 1416; border-radius: var(--r-12);
  overflow: hidden; box-shadow: var(--sh-1); background: #0f1115;
}
.agent-film__frame video { width: 100%; height: 100%; object-fit: cover; background: #0f1115; }
.agent-film__label { font-size: 1.5rem; line-height: 1.25; font-weight: 500; color: var(--text); }
.agent-film__label .dur { color: var(--text-2); font-weight: 400; }

/* ---------- 13. Photo band ---------- */
.photo-band {
  position: relative; isolation: isolate; height: 270px; display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden; background: #252525;
}
.photo-band__cell { position: relative; overflow: hidden; }
.photo-band__cell > img, .photo-band__cell > video, .photo-band__cell > .loop-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim-text); opacity: 1; }
.photo-band__title {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0 24px; text-align: center;
  color: #fff; font-size: var(--h2); line-height: var(--lh-head); font-weight: 500; letter-spacing: -.005em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}
.photo-band__title > span { padding: 6px 20px; border-radius: 20px; background: rgba(20, 20, 22, .5); box-shadow: 0 0 36px 22px rgba(20, 20, 22, .5); }

/* ---------- 14. Close (ask) ---------- */
.close-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: center; max-width: 1100px; margin-inline: auto; }
.close-grid > .phone-wrap { order: 2; }
.close-copy h2 { font-size: var(--h2); line-height: var(--lh-head); font-weight: 500; margin-bottom: 20px; }
.close-copy p { color: var(--text-2); margin-bottom: 32px; max-width: 460px; }

/* ---------- 15. Sticky bar ---------- */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; color: #fff;
  background: var(--sticky-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--sh-bar); border-top: 1px solid rgba(255, 255, 255, .3);
  transform: translateY(110%); visibility: hidden; transition: transform var(--ease), visibility 0s linear .3s;
}
.sticky-bar.is-visible { transform: none; visibility: visible; transition: transform var(--ease), visibility 0s; }
.sticky-bar__inner {
  max-width: 1400px; margin-inline: auto; min-height: 76px; padding: 9px 60px;
  display: flex; align-items: center; gap: 40px;
}
.sticky-bar__text { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.sticky-bar__text .orb { --s: 28px; }
.sticky-bar__title { font-size: 18px; line-height: 25.2px; font-weight: 600; }
.sticky-bar__sub { font-size: 14px; color: rgba(255, 255, 255, .8); }
.sticky-bar__btn {
  display: inline-flex; align-items: center; padding: 16px 32px; border-radius: var(--r-12); background: var(--sticky-btn);
  color: #fff; font-size: 1.125rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--ease), transform var(--ease);
}
.sticky-bar__btn:hover { background: var(--sticky-btn-hover); transform: translateY(-2px); }
.sticky-bar__close {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff;
  cursor: pointer; display: grid; place-items: center; flex: none;
}
.sticky-bar__close:hover { background: rgba(255, 255, 255, .22); }
.sticky-bar__close svg { width: 14px; height: 14px; }

/* ---------- 16. Accordion / FAQ ---------- */
.accordion { max-width: 900px; margin-inline: auto; display: grid; gap: 16px; }
.accordion details {
  background: var(--panel); border-radius: var(--r-8); box-shadow: var(--sh-2); border: 1px solid transparent;
  transition: border-color var(--ease);
}
.accordion details[open] { border-color: var(--line-strong); }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; font-size: 1.5rem; line-height: 1.3; font-weight: 500; color: var(--text);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease;
}
.accordion details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.accordion .answer { padding: 0 24px 24px; color: var(--text-2); line-height: var(--lh-long); max-width: calc(var(--measure) + 48px); }
.accordion .answer p + p { margin-top: 12px; }

/* ---------- 17. Plan card ---------- */
.plan-card {
  position: relative; max-width: 560px; margin-inline: auto; padding: 40px; border-radius: var(--r-16); background: #fff;
  outline: 2px solid var(--action); box-shadow: var(--sh-1); text-align: left;
}
.plan-card .chip { position: absolute; top: -14px; left: 40px; background: var(--action); color: #fff; }
.plan-card__price { font-size: 3rem; line-height: 1.1; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-card__price small, .plan-card__unit { font-size: 18px; font-weight: 400; color: var(--ink-2); }
.plan-card__per { margin-top: 8px; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* two-card plan table (§2): side by side at 768px and up, stacked below */
.plan-table { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 1000px; margin-inline: auto; }
@media (min-width: 768px) { .plan-table { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-table .plan-card { max-width: none; margin: 0; outline: 0; border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.plan-table .plan-card--annual, .plan-card--annual { outline: 0; border: 2px solid var(--action); }
.plan-card ul { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 12px; }
.plan-card li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-3); }
.plan-card li svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.plan-card .btn { width: 100%; }

/* plus-chain and talk-band (shared) */
.plus-chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.plus-chain .plus { font-size: 1.5rem; color: var(--text-2); }
.talk-band {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-16); padding: 64px 40px; color: #fff; text-align: center;
  background: #1c2230;
}
.talk-band > img, .talk-band > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.talk-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-text); }

/* ---------- 18. Footer ---------- */
.site-footer { background: #fff; color: var(--ink-soft); padding: 72px 0 40px; border-top: 0; }
.foot-top {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8rem; row-gap: 2.5rem; align-items: center;
}
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.foot-links a { color: var(--ink-soft); font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; }
.foot-links a:hover { color: var(--blue); }
.crisis-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); color: var(--ink); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.crisis-pill:hover { border-color: var(--blue); box-shadow: var(--sh-2); }
.crisis-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--crisis-red); }
.foot-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 36px; }
.foot-orbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.foot-orbs a { display: block; border-radius: 50%; transition: transform var(--ease); }
.foot-orbs a:hover { transform: translateY(-2px); }
.foot-orbs .orb { --s: 20px; display: block; }
.foot-more { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .875rem; }
.foot-more a { color: var(--ink-faint); text-decoration: none; }
.foot-more a:hover { color: var(--blue); text-decoration: underline; }
.foot-rule { border: 0; border-top: 1px solid var(--line); margin: 32px 0 20px; }
.foot-bottom {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 40px; align-items: start;
  font-size: .75rem; line-height: 1.5; color: var(--foot-text);
}
.foot-tag { grid-column: 1 / -1; font-size: .875rem; color: var(--ink-soft); margin: 0; }
.foot-bottom p:nth-child(3) { text-align: center; max-width: 640px; margin-inline: auto; }
.foot-bottom a { color: var(--foot-link); }

/* room for the sticky bar under the footer */
.has-sticky .site-footer { padding-bottom: 116px; }

/* ---------- 19. Reveal (progressive, opt-in, off under reduced motion) ---------- */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 20. Breakpoints ---------- */
@media (max-width: 1024px) {
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zz, .zz--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 40px; }
  .photo-band { height: auto; min-height: 125px; aspect-ratio: 1440 / 270; }
  .foot-top { column-gap: 3rem; }
}
/* tablet: wordmark and crisis pill share the first row, the page links take a full row under them
   (five links with Professional Teams, §8.3, would otherwise wrap to three short rows) */
@media (min-width: 768px) and (max-width: 1024px) {
  .foot-top { grid-template-columns: auto auto; justify-content: space-between; }
  .foot-links { grid-column: 1 / -1; grid-row: 2; }
  .foot-top > .crisis-pill { justify-self: end; }
}
@media (max-width: 767px) {
  .section-head { margin-bottom: 36px; }
  .section-head--mid { margin: 40px auto 0; }
  .section-head h2, .h2, .close-copy h2 { margin-bottom: 12px; }
  .desc, .section-head p { font-size: .875rem; }
  .hero-film__copy { padding-bottom: 40px; }
  .hero-still-block { margin-top: 0; height: 320px; }
  .hero-still-block h1 { padding-top: 0; }
  .zz, .zz--flip { grid-template-columns: minmax(0, 1fr); gap: 24px; text-align: center; }
  .zz--flip > .zz__media { order: 0; }
  .zz__media { width: 100%; max-width: 420px; margin-inline: auto; }
  .zz__media .frame { aspect-ratio: 1; }
  .zz__copy { max-width: 420px; margin-inline: auto; }
  .zz__copy h3 { font-size: var(--h3); margin-bottom: 15px; }
  .zz-stack { gap: 3rem; }
  .team-frame { padding: 12px; margin-bottom: 36px; }
  .team-frame__inner { padding: 32px 12px; border-radius: 28px; }
  .phone, .phone--lg { --pw: 290px; border-radius: 40px; border-width: 8px; }
  .msg p { font-size: 13px; }
  .cards-4, .cards-3 { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .card { padding: 22px 18px; }
  .portrait-strip { gap: 14px; margin-top: 40px; max-width: 340px; }
  .portrait { width: 60px; height: 60px; }
  .trust-pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .trust-card__body { padding: 22px 20px 24px; text-align: center; align-items: center; }
  .badges { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .badge { flex-direction: row; justify-content: center; }
  .badge svg { width: 32px; height: 32px; }
  .agent-film__frame { max-width: 320px; }
  .agent-film__label { font-size: 1.25rem; }
  /* §2: stacks on phones, video first at full width 240px tall, then the still; the title sits on the video */
  .photo-band { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; aspect-ratio: auto; height: auto; }
  .photo-band::after { bottom: auto; height: 240px; }
  .photo-band__title { bottom: auto; height: 240px; font-size: 1.75rem; }
  .close-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; text-align: center; }
  .close-grid > .phone-wrap { order: 0; }
  .close-copy p { margin-inline: auto; }
  .close-copy .btn-row { justify-content: center; }
  .sticky-bar__inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 20px; min-height: 0; }
  .sticky-bar__title { font-size: 14px; line-height: 1.35; }
  .sticky-bar__sub { font-size: 12px; }
  .sticky-bar__btn { padding: 10px 20px; font-size: 14px; justify-content: center; }
  .sticky-bar__close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; }
  .sticky-bar__text { padding-right: 36px; }
  .accordion summary { font-size: 1rem; padding: 18px; }
  .accordion .answer { padding: 0 18px 18px; }
  .plan-card { padding: 32px 22px; }
  .plan-card .chip { left: 22px; }
  .masonry { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .masonry > .tall { grid-row: auto; }
  .glass-card { padding: 28px 20px; }
  .site-footer { padding: 48px 0 32px; }
  .foot-top { grid-template-columns: minmax(0, 1fr); row-gap: 24px; justify-items: start; }
  .foot-links { flex-direction: column; gap: 14px; }
  .foot-mid { flex-direction: column; align-items: flex-start; margin-top: 28px; }
  .foot-orbs { display: grid; grid-template-columns: repeat(6, 20px); gap: 14px 18px; }
  .foot-more { flex-direction: column; gap: 12px; }
  .has-sticky .site-footer { padding-bottom: 190px; }
  .foot-bottom { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .foot-bottom p:nth-child(3) { text-align: center; }
}
@media (max-width: 480px) {
  .hero-film__sub { font-size: 1rem; }
  .trust-card h3 { font-size: 1.25rem; }
  .phone, .phone--lg { --pw: 280px; }
}

/* ---------- 21. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; }
  video.loop { display: none !important; }
  .loop-pause { display: none !important; }
  .loop-still { display: block !important; }
  .orb--drift { animation: none !important; }
  .btn:hover, .sticky-bar__btn:hover, a.badge:hover, .foot-orbs a:hover, .hero-film__cue:hover { transform: none; }
  .arrow-link:hover .arr, .arrow-link:focus-visible .arr { transform: none; }
  .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 22. Shared pass 2026-09-29 ---------- */
/* balanced headings */
h1, h2, h3, .photo-band__title { text-wrap: balance; }

/* gradient words on light surfaces take the ink gradient; film, bands and dark panels keep the light one */
.section .grad, .close-grid .grad { background-image: var(--grad-text-ink); }
.talk-band .grad, .photo-band .grad, .talk-band .grad--90, .photo-band .grad--90,
.hero-film .grad, .hero-still-block .grad, .on-dark .grad { background-image: var(--grad-text-on-dark); }

/* tap targets: 44px or more */
.nav-toggle { width: 44px; height: 44px; }
.nav-toggle__line { left: 10px; }
.nav-toggle__line:nth-child(1) { top: 14px; }
.nav-toggle__line:nth-child(2) { top: 21px; }
.nav-toggle__line:nth-child(3) { top: 28px; }
.skip-link { min-height: 44px; padding: 12px 16px; }
.wordmark { padding-block: 11px; margin-block: -11px; }
.site-nav a, .site-nav__login a, .foot-links a, .foot-more a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-links a, .foot-more a { min-width: 44px; justify-content: center; }
.foot-bottom a { display: inline-block; padding-block: 14px; margin-block: -14px; }
.crisis-pill { min-height: 44px; }
.foot-orbs { gap: 24px; }
.foot-orbs a { position: relative; }
.foot-orbs a::after { content: ""; position: absolute; inset: -12px; }
.arrow-link { min-height: 44px; }

/* phone crisis link in the header bar */
.site-header__crisis-m { display: none; }
@media (max-width: 767px) {
  .wordmark { padding-block: 12px; margin-block: -12px; }
  .foot-links, .foot-more { gap: 0; }
  .foot-links a, .foot-more a { justify-content: flex-start; }
  .foot-orbs { grid-template-columns: repeat(6, 20px); gap: 24px; }
  .js .site-header__crisis-m { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
  .js .site-header__crisis-m + .nav-toggle { margin-left: 0; }
}

/* ---------- 22b. Four main nav items (§8.3, held until release, §6 item 18) ----------
   The Professional Teams <li> ships `hidden`; these rules engage only once a fourth item is visible, so the
   three-item bar is unchanged until release. Measured 2026-09-29 (headless, 4 items): the one-row bar needs
   954px at the <=1024 spacing and 1158px at the desktop spacing. Below 1024 it becomes the menu; 1025-1199
   tightens the gaps. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__inner { gap: 4rem; }
  .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav__main { gap: 2.25rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__inner { gap: 16px; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__crisis-m {
    display: inline-flex; align-items: center; min-height: 44px; margin-left: auto;
    color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .nav-toggle { display: block; margin-left: 0; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav {
    position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 99;
    flex-direction: column; align-items: flex-end; gap: 32px; padding: 24px var(--gutter);
    background: var(--panel-dark); border-top: 1px solid #b4b5ba;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav:not(.is-open) { display: none; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav ul { flex-direction: column; align-items: flex-end; gap: 32px; width: 100%; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav a { font-size: 1.125rem; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav__login { width: 100%; text-align: right; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .22); }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav__login a { font-size: 1rem; }
  /* without script the bar wraps into two rows and sits in flow */
  .no-js body:has(.site-header:has(.site-nav__main > li:nth-child(4):not([hidden]))) { padding-top: 0; }
  .no-js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) { position: relative; height: auto; }
  .no-js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__inner { flex-wrap: wrap; height: auto; row-gap: 8px; }
  .no-js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav { flex-basis: 100%; flex-wrap: wrap; }
}

/* ---------- 23. Design pass 2026-09-29: §2 components and §3.1 globals ---------- */
/* Agent keywords: the deep hue passes on white for all twelve Agents. body raises it over page rules. */
.kw, body .kw { color: var(--orb-deep); }

/* figures line up */
.num, .price, .plan-card__price, .stat, td.num, .figure { font-variant-numeric: tabular-nums; }

/* long-form body copy */
.prose, .long-form { font-size: var(--fs-17); line-height: var(--lh-long); color: var(--ink); max-width: var(--measure); }
.prose p + p, .long-form p + p { margin-top: 1em; }

/* hero path buttons: equal width; full width at phone size */
.hero-paths { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; max-width: 560px; }
.hero-paths .btn { flex: 1 1 0; min-width: 0; }
@media (max-width: 480px) {
  .hero-paths { flex-direction: column; }
  .hero-paths .btn { flex: 1 1 auto; width: 100%; }
}

/* short-version box (dense kit) */
.short-version {
  margin: 24px 0 32px; padding: 20px 24px; background: var(--blue-wash); border-left: 4px solid var(--blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); font-size: var(--fs-17); line-height: var(--lh-body);
  max-width: calc(var(--measure) + 52px);
}
.short-version__label { display: block; margin-bottom: 8px; font-size: var(--fs-14); font-weight: 600; color: var(--ink-2); }
.short-version ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 6px; }

/* contents rail: sticky 200px at 1100px and up; a chip row below */
.contents-rail { font-size: var(--fs-14); color: var(--ink-2); }
.contents-rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.contents-rail a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: var(--r-full); color: var(--ink-2); text-decoration: none;
}
.contents-rail a:hover { color: var(--blue); }
.contents-rail a[aria-current], .contents-rail a.is-active { color: var(--blue); font-weight: 600; border-color: var(--blue); }
.has-rail { display: block; }
@media (min-width: 1100px) {
  .has-rail { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; }
  .contents-rail { position: sticky; top: calc(var(--header-h) + 24px); width: 200px; }
  .contents-rail ul { display: grid; gap: 0; }
  .contents-rail a { min-height: 36px; padding: 0 0 0 12px; border: 0; border-left: 2px solid transparent; border-radius: 0; }
  .contents-rail a[aria-current], .contents-rail a.is-active { border-left-color: var(--blue); }
}

/* thin slider / range read-out: track 3px, value is a 3x14 tick with a 2px white ring */
.range { --track: 3px; --tick-w: 3px; --tick-h: 14px; position: relative; height: var(--tick-h); }
.range__track, .range__band {
  position: absolute; left: 0; right: 0; top: 50%; height: var(--track); transform: translateY(-50%);
  border-radius: 2px; background: var(--bar-track);
}
.range__band { background: var(--bar-in); right: auto; }
.range__tick {
  position: absolute; top: 0; width: var(--tick-w); height: var(--tick-h); margin-left: calc(var(--tick-w) / -2);
  border-radius: 1px; background: var(--mark); box-shadow: 0 0 0 2px #fff;
}
.range.is-out .range__tick, .range__tick.is-out { background: var(--mark-warn); }
.range--dash { --track: 4px; }
@media (max-width: 760px) { .range--dash { --track: 3px; --tick-h: 13px; } }
.range--phone { --track: 3px; --tick-w: 2px; --tick-h: 13px; }
.range__labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--ink-2); }
.status-word { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.status-word--ok { color: var(--word-ok); }
.status-word--warn { color: var(--word-warn); }

/* gauge, Option B (approved): slim */
.gauge { width: 112px; height: auto; }
.gauge__arc { fill: none; stroke: var(--bar-track); stroke-width: 5; }
.gauge__arc--in { stroke: var(--bar-in); }
.gauge__needle { stroke: var(--mark); stroke-width: 2; stroke-linecap: round; }
.gauge__cap { fill: #fff; stroke: var(--mark); stroke-width: 2.5; }
.gauge.is-out .gauge__needle, .gauge.is-out .gauge__cap { stroke: var(--mark-warn); }
.gauge text, .gauge__label { font-family: var(--font); font-size: 12px; fill: var(--ink-2); color: var(--ink-2); }
@media (max-width: 767px) { .gauge { width: 96px; } }

/* tabbar: idle ink-2 with no bar; active blue, 700, 3px bar above */
.tabbar { display: flex; justify-content: space-around; border-top: 1px solid var(--line); background: #fff; }
.tabbar a, .tabbar button {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; min-width: 44px; padding: 6px 8px; border: 0; background: none;
  color: var(--ink-2); font-size: var(--fs-12); font-weight: 500; text-decoration: none;
}
.tabbar [aria-current="page"], .tabbar [aria-selected="true"] { color: var(--blue); font-weight: 700; }
.tabbar [aria-current="page"]::before, .tabbar [aria-selected="true"]::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; border-radius: 0 0 2px 2px; background: var(--blue);
}

/* type floor: nothing under 12px */
.xs, small { font-size: max(12px, .75rem); }

/* ---------- Legal pages (privacy, terms, terms-policies) ----------
   One style for the three legal pages, scoped to body.legal-page. The legal wording is frozen
   (rule 15): these rules restyle the live class names and plain tags only. Values follow the open
   row on terms-policies.html (.tp__inner, .tp-acc[open], .tp-acc__body). The banner uses the
   --draft-* tokens in :root. */
.legal-draft-banner {
  padding: 12px var(--gutter);
  background: var(--draft-bg, #FBF4E4);
  border-bottom: 1px solid var(--draft-rule, #EEDFB8);
  color: var(--draft-ink, #5E4513);
  text-align: center;
  font-size: .875rem;
  line-height: 1.45;
}
.legal-draft-banner b {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--draft-ink, #5E4513);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  vertical-align: 1px;
}

/* Column: the rows run the full 1200 column like terms-policies (.tp__inner); body text inside
   each row is held to 780px, the cap .tp-acc__body uses. */
.legal-page .wrap {
  width: min(100% - 2 * var(--gutter), 1200px);
  margin-inline: auto;
}
.legal-page .legal {
  padding: 58px 0 var(--section-pad);
  color: var(--ink);
  font-size: var(--fs-17);
  line-height: var(--lh-long);
}

/* Title block: centred, plain, no box. */
.legal-page .legal > .updated {
  text-align: center;
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--ink-3);
}
.legal-page .legal > h1 {
  margin: 10px 0 28px;
  text-align: center;
  color: var(--text);
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -.01em;
}
.legal-page .legal > .lede {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
  color: var(--ink-2);
  font-size: var(--fs-17);
  line-height: var(--lh-long);
}
.legal-page .legal > .lede strong { color: var(--text); }

/* Each section is one OPEN row: the h2 is the row head and every block after it, up to the next h2,
   is the row body. The markup is frozen, so the row is drawn from its parts: the head carries the top
   edge, each body block carries the side edges, and the block before the next h2 (or before the closing
   terms link) carries the bottom edge. Blocks abut with no margin, so no white seam shows between them.
   The row's lift shadow is drawn by a ::before on each part: a shadow box taller than the part,
   clipped back to the part's own slice. The slices meet edge to edge, so the side shadow runs unbroken
   down the whole row and never darkens a seam. The ::before is transparent and takes no pointer events. */
.legal-page .legal > h2 {
  display: flex;
  align-items: center;
  min-height: 62px;
  margin: 48px 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-8) var(--r-8) 0 0;
  background: var(--panel);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
}
.legal-page .legal > .lede + h2 { margin-top: 48px; }

/* :where() keeps this base rule light, so the spacing rules below override it without !important */
.legal-page .legal > :where(h2 ~ :is(h3, p, ul):not(:last-child)) {
  margin: 0;
  padding: .9rem max(1.25rem, 100% - var(--measure) - 1.25rem) 0 1.25rem;
  border-inline: 1px solid var(--line);
  background: var(--panel);
}
.legal-page .legal > :where(h2, h2 ~ :is(h3, p, ul):not(:last-child)) { position: relative; }
.legal-page .legal > :where(h2, h2 ~ :is(h3, p, ul):not(:last-child))::before {
  content: "";
  position: absolute;
  inset: -24px -1px;
  border-radius: inherit;
  box-shadow: var(--sh-2);
  clip-path: inset(24px -24px);
  pointer-events: none;
}
.legal-page .legal > h2::before { top: -1px; clip-path: inset(-24px -24px 24px -24px); }
.legal-page .legal > h2 ~ ul:not(:last-child) { padding-left: calc(1.25rem + 1.5rem); }
/* spacing inside a row, as padding (a margin would open a white gap in the panel) */
.legal-page .legal > h2 + :is(h3, p, ul) { padding-top: 0; }
.legal-page .legal > h2 ~ h3:not(h2 + h3) { padding-top: 1.5rem; }
.legal-page .legal > h3 + :is(p, ul) { padding-top: .4rem; }
/* the row's last block: bottom edge, rounded corners */
.legal-page .legal > h2 ~ :is(h3, p, ul):has(+ h2),
.legal-page .legal > h2 ~ :is(h3, p, ul):has(+ p:last-child) {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--r-8) var(--r-8);
}
.legal-page .legal > h2 ~ :is(h3, p, ul):has(+ h2)::before,
.legal-page .legal > h2 ~ :is(h3, p, ul):has(+ p:last-child)::before { bottom: -1px; clip-path: inset(24px -24px -24px -24px); }

.legal-page .legal > h3 {
  color: var(--ink);
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: 600;
}
.legal-page .legal li + li { margin-top: .35rem; }
.legal-page .legal li::marker { color: var(--ink-faint); }
.legal-page .legal strong { color: var(--text); font-weight: 600; }
.legal-page .legal a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-page .legal a:hover { color: var(--action-deep); }
.legal-page .legal a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-halo); }
/* The closing link to the Terms sits outside the rows. It gets a 44px tap target; its words, href and
   inline margin do not change. */
.legal-page .legal > p:last-child { text-align: center; }
.legal-page .legal > p:last-child a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .legal-page .legal > h1 { font-size: 2rem; }
}
@media (max-width: 900px) {
  .legal-page .legal > h2 { min-height: 64px; padding: 1.2rem 1rem; font-size: 1.25rem; }
  /* body text starts on the same line as the head text */
  .legal-page .legal > h2 ~ :is(h3, p, ul):not(:last-child) { padding-inline: 1rem; }
  .legal-page .legal > h2 ~ ul:not(:last-child) { padding-left: calc(1rem + 1.25rem); }
  .legal-page .legal > h2 ~ :is(h3, p, ul):has(+ h2),
  .legal-page .legal > h2 ~ :is(h3, p, ul):has(+ p:last-child) { padding-bottom: 1rem; }
}
@media (max-width: 767px) {
  .legal-draft-banner { padding-block: 10px; font-size: .8125rem; }
  .legal-page .legal { padding-top: 40px; }
  .legal-page .legal > h2, .legal-page .legal > .lede + h2 { margin-top: 40px; }
  /* a 44px hit area on the in-text links without moving the frozen text */
  .legal-page .legal a { padding-block: 12px; }
  .legal-page .legal > p:last-child a { padding-block: 0; }
}
@media (max-width: 640px) {
  .legal-page .legal > h1 { font-size: 2rem; margin-bottom: 22px; }
  .legal-page .legal > h2 { min-height: 56px; padding: 1rem; font-size: 1.25rem; }
  /* the sub-head stays one step under the row head: h2 20/600, h3 17/600 */
  .legal-page .legal > h3 { font-size: var(--fs-17); }
}

/* ---------- 24. Logo pass 2026-09-29: the two marks in the header and through the site (LOGO-SPEC §1, §2) ----------
   One sprite in the header partial holds #cv-pulse and #cv-sprout (trademark vector, viewBox 0 0 120 56); every
   mark is a <use> of it. Rules on the symbol's children reach every copy; colour and stroke come in through
   custom properties set on the <use> or its parents, so the dark header and heroes get the on-dark variant.
   Motion: the header pulse draws once per visit (html.cv-draw, set by the partial's first script), the home
   dividers draw once on scroll-in, the 404 pulse beats once, the Cassia pill beats only on hover, focus or
   while a call is open. §19's reduced-motion rule stops all of it. */
:root { --sage: #6E8C68; --sage-light: #8AA683; } /* decorative only: never text */
@property --cv-dot-y { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --cv-dot-o { syntax: "<number>"; inherits: true; initial-value: 1; }
.cv-s-pulse { stroke: var(--cv-pulse, #1F4E8F); stroke-width: var(--cv-sw, 4); vector-effect: var(--cv-ve, none); }
.cv-s-leaf-r { fill: var(--cv-leaf-r, #6E8C68); }
.cv-s-leaf-l { fill: var(--cv-leaf-l, #8AA683); }
.cv-s-dot { fill: var(--cv-dot, #2E73C8); transform: translateY(var(--cv-dot-y, 0px)); opacity: var(--cv-dot-o, 1); }
/* on dark: the header bar and the film and still heroes take the trademark's on-dark variant
   (the live site's footer mark: #9CC0EC, #AECBA7, #88A682) */
.site-header, .hero-film, .hero-still-block, .pro-hero {
  --cv-pulse: #9CC0EC; --cv-leaf-r: #AECBA7; --cv-leaf-l: #88A682; --cv-dot: #9CC0EC;
}

/* §1 lockup: pulse + sprout, then the live wordmark. Fixed box, so nothing shifts when it paints. */
.wordmark { align-items: center; }
.cv-lockup { flex: none; display: block; width: 73px; height: 28px; overflow: visible; margin-right: calc(18px - .28em); }
.cv-draw .site-header .cv-lockup__pulse { stroke-dasharray: 1 1.5; animation: cv-draw 900ms cubic-bezier(.4, 0, .2, 1) both; }
.cv-draw .site-header .cv-lockup__sprout { animation: cv-settle 450ms cubic-bezier(.2, .8, .2, 1) 820ms both; }
@keyframes cv-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes cv-settle { from { --cv-dot-y: -10px; --cv-dot-o: 0; } to { --cv-dot-y: 0px; --cv-dot-o: 1; } }

/* §2.1 page marks: the sprout for the Member, the pulse for Professional Teams */
.cv-mark { display: block; height: 32px; margin: 0 0 14px; overflow: visible; }
.cv-mark--sprout { width: 32px; }
.cv-mark--pulse { width: 53px; --cv-sw: 4; }

/* §2.2 home dividers: a 1.5px line in --blue at 35% with one beat in the middle */
.cv-divider {
  display: flex; align-items: center; width: min(100% - 2 * var(--gutter), var(--container)); height: 24px;
  margin-inline: auto; color: var(--blue); opacity: .35;
}
.cv-divider__line { flex: 1; height: 1.5px; background: currentColor; }
.cv-divider__beat { flex: none; display: block; width: 37px; height: 24px; overflow: visible; --cv-pulse: currentColor; --cv-sw: 1.5; --cv-ve: non-scaling-stroke; }
.cv-divider[data-draw] { transition: clip-path 1100ms cubic-bezier(.4, 0, .2, 1); }
.cv-divider[data-draw="wait"] { clip-path: inset(0 100% 0 0); }
.cv-divider[data-draw="in"] { clip-path: inset(0 0 0 0); }

/* §B the Cassia pill: her photo and "Just talk… we’ll listen." Tap area 46px through ::after. */
.site-header__talk {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px;
  margin-left: calc(24px - 8rem); padding: 0 12px 0 4px; border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-full); background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--ease), border-color var(--ease);
}
.site-header__talk::after { content: ""; position: absolute; inset: -5px 0; }
.site-header__talk:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); }
.site-header__talk:focus-visible { border-radius: var(--r-full); }
.site-header__talk[aria-current="page"] { background: rgba(255, 255, 255, .2); border-color: #fff; }
.site-header__talk-img {
  flex: none; display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7);
}
.site-header__talk-short { display: none; }
.site-header__talk-pulse {
  flex: none; display: block; width: 20px; height: 12px; overflow: visible; transform-origin: 50% 50%;
  --cv-sw: 1.75; --cv-ve: non-scaling-stroke;
}
@keyframes cv-beat { 0%, 44%, 100% { transform: scaleY(1); } 14% { transform: scaleY(1.4); } 28% { transform: scaleY(.75); } }
@media (hover: hover) { .site-header__talk:hover .site-header__talk-pulse { animation: cv-beat 1.2s ease-in-out infinite; } }
.site-header__talk:focus-visible .site-header__talk-pulse,
[data-cv-call="open"] .site-header__talk-pulse { animation: cv-beat 1.2s ease-in-out infinite; }

/* Header widths (3 items, measured headless 2026-09-29): the default spacing holds the long pill from 1320px;
   1024-1319 takes the <=1024 spacing, long pill from 1140px; below 1024 the bar is two rows. */
@media (min-width: 1025px) and (max-width: 1319px) {
  .site-header__inner { padding: 15px 20px; gap: 3rem; }
  .site-nav__main { gap: 2.25rem; }
}
@media (max-width: 1319px) { .site-header__talk { margin-left: calc(24px - 3rem); } }
@media (min-width: 1024px) and (max-width: 1139px) {
  .site-header__talk-long { display: none; }
  .site-header__talk-short { display: inline; }
}

/* <=1023 with script: row 1 wordmark, crisis link, menu; row 2 the Cassia pill. The nav opens as the panel. */
@media (max-width: 1023px) {
  :root.js { --header-h: 100px; }
  .js .site-header .site-header__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand crisis toggle" "talk talk talk";
    align-items: center; column-gap: 16px; row-gap: 6px; padding: 6px 20px 8px;
  }
  .js .site-header .wordmark { grid-area: brand; justify-self: start; }
  .js .site-header .site-header__crisis-m {
    grid-area: crisis; display: inline-flex; align-items: center; min-height: 44px; margin-left: 0;
    color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  }
  .js .site-header .nav-toggle { grid-area: toggle; display: block; margin-left: 0; }
  .js .site-header .site-nav {
    position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 99;
    flex-direction: column; align-items: flex-end; gap: 32px; padding: 24px var(--gutter);
    background: var(--panel-dark); border-top: 1px solid #b4b5ba;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .js .site-header .site-nav:not(.is-open) { display: none; }
  .js .site-header .site-nav ul { flex-direction: column; align-items: flex-end; gap: 32px; width: 100%; }
  .js .site-header .site-nav a { font-size: 1.125rem; }
  .js .site-header .site-nav__login { width: 100%; text-align: right; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .22); }
  .js .site-header .site-nav__login a { font-size: 1rem; }
  .js .site-header .site-header__talk { grid-area: talk; justify-self: start; margin-left: 0; }
  /* without script the bar wraps and sits in flow */
  .no-js body { padding-top: 0; }
  .no-js .site-header { position: relative; height: auto; }
  .no-js .site-header__inner { flex-wrap: wrap; height: auto; row-gap: 8px; }
  .no-js .site-nav { flex-basis: 100%; flex-wrap: wrap; }
  .site-header__talk { margin-left: 0; }
}
@media (max-width: 767px) {
  .cv-lockup { width: 62px; height: 24px; }
  .js .site-header .site-header__inner { padding-inline: 16px; }
}
/* verify 2026-09-29: on phones the pill has row 2 to itself, so Michael's full phrase fits (about 235px);
   "Just talk" only below 260px */
@media (max-width: 259px) {
  .site-header__talk-long { display: none; }
  .site-header__talk-short { display: inline; }
}
@media (max-width: 389px) {
  .cv-lockup { width: 52px; height: 20px; }
  .site-header .wordmark { font-size: 1.125rem; }
}
@media (max-width: 374px) {
  .js .site-header .site-header__inner { padding-inline: 12px; column-gap: 8px; }
  .site-header .wordmark { font-size: 1rem; }
  .js .site-header .site-header__crisis-m { font-size: 13px; }
}
@media (max-width: 339px) {
  .cv-lockup { width: 46px; height: 18px; }
  .site-header .wordmark { font-size: .9375rem; }
}
/* verify 2026-09-29: below 320px the lockup pushed the wordmark into "Crisis? 988" (measured at 280-310px);
   the header there keeps the live wordmark alone, as it was before the logo pass */
@media (max-width: 319px) {
  .site-header .cv-lockup { display: none; }
}

/* Four main items (Professional Teams released, §6 item 18): the same tiers, wider. Engages only when the
   fourth item is visible. Default spacing from 1490px, tight + long pill 1310-1489, tight + short 1200-1309,
   two rows below 1200 (the tight row needs 1191px). */
@media (min-width: 1025px) and (max-width: 1489px) {
  .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__inner { padding: 15px 20px; gap: 3rem; }
  .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav__main { gap: 2.25rem; }
  .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__talk { margin-left: calc(24px - 3rem); }
}
@media (min-width: 1200px) and (max-width: 1309px) {
  .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__talk-long { display: none; }
  .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__talk-short { display: inline; }
}
@media (max-width: 1199px) {
  :root.js:has(.site-nav__main > li:nth-child(4):not([hidden])) { --header-h: 100px; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand crisis toggle" "talk talk talk";
    align-items: center; column-gap: 16px; row-gap: 6px; padding: 6px 20px 8px;
  }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .wordmark { grid-area: brand; justify-self: start; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__crisis-m {
    grid-area: crisis; display: inline-flex; align-items: center; min-height: 44px; margin-left: 0;
    color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .nav-toggle { grid-area: toggle; display: block; margin-left: 0; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav {
    position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 99;
    flex-direction: column; align-items: flex-end; gap: 32px; padding: 24px var(--gutter);
    background: var(--panel-dark); border-top: 1px solid #b4b5ba;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav:not(.is-open) { display: none; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav ul { flex-direction: column; align-items: flex-end; gap: 32px; width: 100%; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav a { font-size: 1.125rem; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav__login { width: 100%; text-align: right; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .22); }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav__login a { font-size: 1rem; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__talk { grid-area: talk; justify-self: start; margin-left: 0; }
  .no-js body:has(.site-nav__main > li:nth-child(4):not([hidden])) { padding-top: 0; }
  .no-js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) { position: relative; height: auto; }
  .no-js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__inner { flex-wrap: wrap; height: auto; row-gap: 8px; }
  .no-js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-nav { flex-basis: 100%; flex-wrap: wrap; }
  .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__talk { margin-left: 0; }
}
@media (min-width: 480px) and (max-width: 1199px) {
  .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__talk-long { display: inline; }
  .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__talk-short { display: none; }
}
@media (max-width: 767px) {
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__inner { padding-inline: 16px; }
}
@media (max-width: 374px) {
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__inner { padding-inline: 12px; column-gap: 8px; }
  .js .site-header:has(.site-nav__main > li:nth-child(4):not([hidden])) .site-header__crisis-m { font-size: 13px; }
}