/* ==========================================================================
   www.medico.cx: the shared design system (both themes)
   Owner: the marketing-site foundation. Page CSS lives in css/<page>.css and
   uses these tokens; the component catalog is
   src/features/marketing-site/CLAUDE.md.

   Contents
     1. Tokens (light default, dark)      7. Nav + drawer
     2. Reset and base                    8. Footer
     3. Typography                        9. Components (cards, hero, bands,
     4. Buttons and links                    stats, partners, team, contact,
     5. Layout (container, rails,            letter, FAQ, chips, islands)
        sections, grids)                 10. Motion
     6. Decorative layers (glow, beam,   11. Utilities
        grain)
   Breakpoints: phone < 768, tablet 768 to 1199, desktop >= 1200. The nav
   collapses below 1100; the rails show from 1024.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

/* Times scaled to Instrument Serif's widths and line box, so an accent line keeps its
   wrapping while the web font loads (no layout shift at the swap). Measured with
   canvas text metrics against the Google Fonts files. */
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times");
  size-adjust: 83.7%;
  ascent-override: 118.3%;
  descent-override: 37.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Times Italic"), local("Times-Italic");
  size-adjust: 88.2%;
  ascent-override: 112.2%;
  descent-override: 35.1%;
  line-gap-override: 0%;
}

:root {
  --font-sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --font-product: "Bricolage Grotesque", var(--font-sans); /* headings inside product islands */

  --container: 1144px;          /* the content column at 1440 (148 px sides) */
  --container-wide: 1200px;     /* rail to rail (120 px sides): stats, partners */
  --gutter: 20px;
  --nav-h: 72px;
  --section-top: 88px;
  --radius-card: 28px;
  --radius-tile: 22px;
  --radius-field: 12px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* product islands: drawn screens that look the same in both themes */
  --island-bg: #FFFDFB;
  --island-surface: #FFFFFF;
  --island-ink: #1C1526;
  --island-text: #6E6578;
  --island-muted: #716683;      /* 4.5:1+ on the island ground */
  --island-line: #F1EBF5;
  --island-line-strong: #E8E0EF;
  --island-accent: #6B429C;
  --island-ok-bg: rgba(95, 212, 160, 0.16);
  --island-ok: #1F7A4D;
  --island-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 34px 70px -26px rgba(0, 0, 0, 0.55);

  /* fixed brand colors */
  --purple: #6B429C;
  --purple-bright: #8A5CD0;
  --lilac: #B99AF0;
  --lilac-soft: #D5BEFA;
  --ink: #150E20;
  --orb: radial-gradient(circle at 32% 28%, #F2FDFE 0%, #A4E6EC 24%, #A08AE8 60%, #6B429C 100%);
  --btn-primary-bg: linear-gradient(180deg, #8A5CD0 0%, #6B429C 100%);
  --monogram-bg: radial-gradient(circle at 30% 25%, #4A2E7A, #1C1230);
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --section-top: 120px; }
}
@media (min-width: 1100px) {
  :root { --nav-h: 96px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 48px; --section-top: 150px; }
}

/* Light is the default theme (client-facing material matches the light product). */
:root,
[data-theme="light"] {
  color-scheme: light;
  --ground: #FAF8FE;
  --ground-rgb: 250 248 254;
  --surface: #FFFFFF;
  --surface-2: #F4F0FB;
  --text-1: #150E20;            /* headings, strong text */
  --text-body: #150E20;
  --text-2: #524866;            /* lead and body copy */
  --text-3: #524866;            /* secondary copy (captions, orgs) */
  --text-4: #685E7C;            /* mono labels, meta, footer heads */
  --text-soft: #2A2138;         /* nav items, footer links */
  --text-label: #3E3550;        /* form labels */
  --text-quote: #150E20;
  --accent: #6B429C;            /* eyebrows, numbers, icons */
  --accent-2: #6B429C;          /* serif accent lines */
  --accent-fill: #9B7BDF;       /* dots and small fills */
  --accent-tint: rgba(185, 154, 240, 0.15);
  --cyan: #127A86;
  --cyan-fill: #26A3B2;
  --hair: rgba(21, 14, 32, 0.07);
  --line: rgba(21, 14, 32, 0.076);
  --border: rgba(21, 14, 32, 0.085);
  --border-strong: rgba(21, 14, 32, 0.114);
  --fill-1: rgba(21, 14, 32, 0.032);
  --fill-2: rgba(21, 14, 32, 0.04);
  --fill-3: rgba(21, 14, 32, 0.064);
  --glass-bg: #FFFFFF;
  /* Soft layered shadows: small to large, brand-tinted, very low alpha, so a card floats
     instead of casting one hard drop. */
  --glass-shadow:
    0 0.7px 0.7px -0.6px rgba(76, 40, 130, 0.07),
    0 1.8px 1.8px -1.2px rgba(76, 40, 130, 0.065),
    0 3.6px 3.6px -1.8px rgba(76, 40, 130, 0.06),
    0 6.9px 6.9px -2.3px rgba(76, 40, 130, 0.055),
    0 13.6px 13.6px -2.9px rgba(76, 40, 130, 0.045),
    0 30px 30px -3.5px rgba(76, 40, 130, 0.03);
  --feature-bg: linear-gradient(160deg, rgba(126, 72, 214, 0.12), rgba(255, 255, 255, 0.6) 62%), #FFFFFF;
  --feature-border: rgba(107, 66, 156, 0.18);
  --grad-text: linear-gradient(90deg, #5B2F99 0%, #8A5CD0 48%, #1F8F9C 100%);
  --grad-text-2: linear-gradient(90deg, #5B2F99, #8A5CD0);
  --btn-primary-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 0.7px 0.7px -0.6px rgba(107, 66, 156, 0.5),
    0 1.8px 1.8px -1.2px rgba(107, 66, 156, 0.45),
    0 3.6px 3.6px -1.8px rgba(107, 66, 156, 0.4),
    0 6.9px 6.9px -2.3px rgba(107, 66, 156, 0.32),
    0 13.6px 13.6px -2.9px rgba(107, 66, 156, 0.22),
    0 30px 30px -3.5px rgba(107, 66, 156, 0.1);
  --btn-primary-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 0.7px 0.7px -0.6px rgba(107, 66, 156, 0.55),
    0 1.8px 1.8px -1.2px rgba(107, 66, 156, 0.5),
    0 3.6px 3.6px -1.8px rgba(107, 66, 156, 0.45),
    0 6.9px 6.9px -2.3px rgba(107, 66, 156, 0.38),
    0 13.6px 13.6px -2.9px rgba(107, 66, 156, 0.28),
    0 30px 30px -3.5px rgba(107, 66, 156, 0.16);
  /* the light secondary button: a white-to-tint pill with the same soft shadow, no outline */
  --btn-soft-bg: linear-gradient(180deg, #FFFFFF 25%, #EEE6FA 100%);
  --btn-soft-shadow:
    0 1px 0 #FFFFFF inset,
    0 0 0 1px rgba(107, 66, 156, 0.07),
    0 1.8px 1.8px -1.2px rgba(107, 66, 156, 0.12),
    0 3.6px 3.6px -1.8px rgba(107, 66, 156, 0.1),
    0 6.9px 6.9px -2.3px rgba(107, 66, 156, 0.08),
    0 13.6px 13.6px -2.9px rgba(107, 66, 156, 0.06),
    0 30px 30px -3.5px rgba(107, 66, 156, 0.04);
  --btn-ink-bg: #150E20;
  --btn-ink-fg: #FFFFFF;
  --glow: rgba(126, 72, 214, 0.2);
  --glow-mid: rgba(126, 72, 214, 0.056);
  --glow-strong: rgba(126, 72, 214, 0.22);
  --glow-cta: rgba(139, 92, 246, 0.16);
  --beam: rgba(205, 181, 244, 0.16);
  --beam-blend: multiply;
  --grain-opacity: 0.16;
  --grain-band-opacity: var(--grain-opacity); /* grain across a full-width band (.fx-grain--band) */
  --shadow-pop: 0 40px 100px -30px rgba(46, 24, 84, 0.16);
  --shadow-float: 0 12px 40px rgba(46, 24, 84, 0.12);
  --art-shadow: drop-shadow(0 12px 24px rgba(139, 92, 246, 0.18));
  --form-ring: linear-gradient(160deg, rgba(205, 181, 244, 0.5), rgba(139, 92, 246, 0.06) 45%, rgba(31, 143, 156, 0.22));
  --form-bg: rgba(255, 255, 255, 0.94);
  --input-bg: rgba(21, 14, 32, 0.032);
  --input-border: rgba(21, 14, 32, 0.11);
  --input-border-hover: rgba(21, 14, 32, 0.2);
  --placeholder: #716683;
  --focus: #6B429C;
  --nav-glass: rgba(255, 255, 255, 0.7);
  --nav-glass-edge: rgba(255, 255, 255, 0.95);
  --nav-glass-shadow: 0 0 0 1px rgba(64, 38, 110, 0.07), 0 1px 2px rgba(64, 38, 110, 0.05), 0 10px 28px -10px rgba(91, 58, 150, 0.24), 0 30px 60px -28px rgba(91, 58, 150, 0.22);
  --nav-card: rgba(255, 255, 255, 0.9);
  --nav-scrim: rgba(36, 22, 60, 0.16);
  --logo-ink: #000000;
  --logo-accent: #664597;
  --wordmark-fade: rgba(21, 14, 32, 0.07);
  --danger: #B42318;
  --danger-bg: rgba(180, 35, 24, 0.07);
  --success: #1F7A4D;
  --success-bg: rgba(31, 122, 77, 0.08);
  --overlay: rgba(21, 14, 32, 0.32);
  --invert-on-light: brightness(0);    /* white-on-dark logos (partners, WSJ) become ink */
}

/* The dark theme, and the dark panels (.panel-ink, .cta-band), which are dark in both themes. */
[data-theme="dark"],
.panel-ink,
.cta-band {
  color-scheme: dark;
  --ground: #07050B;
  --ground-rgb: 7 5 11;
  --surface: #120B1C;
  --surface-2: #0E0A16;
  --text-1: #FFFFFF;
  --text-body: #F4F0FA;
  --text-2: #B7ADC6;
  --text-3: #A99EB8;
  --text-4: #8D82A0;
  --text-soft: #E6DDF2;
  --text-label: #C9BFD6;
  --text-quote: #F4EEFC;
  --accent: #B99AF0;
  --accent-2: #D5BEFA;
  --accent-fill: #B99AF0;
  --accent-tint: rgba(185, 154, 240, 0.15);
  --cyan: #8FE9F2;
  --cyan-fill: #8FE9F2;
  --hair: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.12);
  --fill-1: rgba(255, 255, 255, 0.04);
  --fill-2: rgba(255, 255, 255, 0.05);
  --fill-3: rgba(255, 255, 255, 0.08);
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  --glass-shadow: none;
  --feature-bg: linear-gradient(160deg, rgba(126, 72, 214, 0.28), rgba(255, 255, 255, 0.02) 60%);
  --feature-border: rgba(205, 181, 244, 0.18);
  --grad-text: linear-gradient(90deg, #E9DDFF 0%, #B993F5 45%, #8FE3EE 100%);
  --grad-text-2: linear-gradient(90deg, #E9DDFF, #B993F5);
  --btn-primary-shadow: 0 0 0 1px rgba(205, 181, 244, 0.35), 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 40px -8px rgba(139, 92, 246, 0.75);
  --btn-primary-shadow-hover: 0 0 0 1px rgba(205, 181, 244, 0.5), 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 16px 48px -8px rgba(139, 92, 246, 0.9);
  --btn-ink-bg: #FFFFFF;
  --btn-ink-fg: #120B1A;
  --glow: rgba(126, 72, 214, 0.5);
  --glow-mid: rgba(126, 72, 214, 0.14);
  --glow-strong: rgba(126, 72, 214, 0.55);
  --glow-cta: rgba(139, 92, 246, 0.4);
  --beam: rgba(205, 181, 244, 0.3);
  --beam-blend: screen;
  --grain-opacity: 0.5;
  --grain-band-opacity: calc(var(--grain-opacity) * 0.35);
  --shadow-pop: 0 40px 100px -30px rgba(0, 0, 0, 0.8);
  --shadow-float: 0 12px 40px rgba(8, 4, 20, 0.6);
  --art-shadow: drop-shadow(0 12px 24px rgba(139, 92, 246, 0.45));
  --form-ring: linear-gradient(160deg, rgba(205, 181, 244, 0.55), rgba(255, 255, 255, 0.06) 45%, rgba(143, 233, 242, 0.35));
  --form-bg: rgba(16, 10, 24, 0.9);
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-border-hover: rgba(255, 255, 255, 0.2);
  --placeholder: #8D82A0;
  --focus: #CDB5F4;
  --nav-glass: rgba(24, 17, 36, 0.64);
  --nav-glass-edge: rgba(255, 255, 255, 0.08);
  --nav-glass-shadow: 0 0 0 1px rgba(205, 181, 244, 0.1), 0 12px 32px -10px rgba(0, 0, 0, 0.7), 0 30px 64px -28px rgba(88, 48, 160, 0.55);
  --nav-card: rgba(24, 17, 36, 0.94);
  --nav-scrim: rgba(4, 2, 8, 0.5);
  --logo-ink: #FFFFFF;
  --logo-accent: #BFA2EC;
  --wordmark-fade: rgba(255, 255, 255, 0.1);
  --danger: #FFB4A8;
  --danger-bg: rgba(255, 120, 100, 0.1);
  --success: #86E3B4;
  --success-bg: rgba(95, 212, 160, 0.12);
  --overlay: rgba(4, 2, 8, 0.6);
  --invert-on-light: none;
}

/* 2. Reset and base -------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  overflow-x: clip;
  background: var(--ground);
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--ground);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Safari before 16 has no overflow: clip, so the glows past the edge would widen the page and a phone would
   zoom out to fit it. Hidden keeps the page at the screen's width there. */
@supports not (overflow: clip) {
  html,
  body { overflow-x: hidden; }
}

img,
svg,
video,
picture { display: block; max-width: 100%; }
img,
video { height: auto; }

a { color: inherit; text-decoration: none; }
p,
h1,
h2,
h3,
h4,
figure,
blockquote,
dl,
dd { margin: 0; }
ul,
ol { margin: 0; padding: 0; list-style: none; }
button,
input,
select,
textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

::selection { background: rgba(139, 92, 246, 0.32); color: var(--text-1); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--btn-ink-bg);
  color: var(--btn-ink-fg);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: none; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon { width: 1em; height: 1em; flex: none; }

/* 3. Typography ------------------------------------------------------------ */

/* Hero headline: a sans line, then a serif-italic gradient accent line.
   <h1 class="display">Created by providers.<br><span class="accent">Trusted by providers.</span></h1> */
.display {
  font-size: var(--display-size, clamp(44px, 27.4px + 4.76vw, 96px));
  font-weight: 460;
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--text-1);
  text-wrap: balance;
}
.display .accent {
  display: inline-block;
  padding-right: 0.06em;           /* the italic's overhang stays inside the gradient box */
  font-size: 1.125em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section titles: ONE size on every page (60 at desktop, 40 on a phone), so the rhythm
   holds from section to section. Page CSS never sets --h2-size. .h2--lg and .h2--md are
   the same size (kept so older markup still reads right); .h2--xl (72) is only for a
   closing band, .h2--sm (42) only for a small band. */
.h2 {
  font-size: var(--h2-size, clamp(40px, 28.8px + 2.2vw, 60px));
  font-weight: 460;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--text-1);
  text-wrap: balance;
}
.h2--xl { --h2-size: clamp(42px, 25.4px + 3.24vw, 72px); line-height: 1; letter-spacing: -0.05em; }
.h2--sm { --h2-size: clamp(30px, 25.5px + 1.16vw, 42px); line-height: 1.04; }

/* The serif-italic accent: lilac in section titles, gradient with .accent--grad
   (and always in .display). */
.accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.155em;
  letter-spacing: -0.015em;
  color: var(--accent-2);
}
.accent--grad {
  display: inline-block;
  padding-right: 0.06em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (min-width: 768px) {
  .display .accent,
  .nowrap-md { white-space: nowrap; }
}

.h3 {
  font-size: clamp(22px, 19px + 0.5vw, 26px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text-1);
}
.h4 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-1);
}

/* Eyebrow: mono caps with the needle ornament. <p class="eyebrow">About Medico</p> */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Crect x='0' y='2' width='5' height='6' rx='1.2'/%3E%3Crect x='5' y='4.25' width='22' height='1.5'/%3E%3Cpath d='M27 4.25L34 5L27 5.75Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='10' viewBox='0 0 34 10'%3E%3Crect x='0' y='2' width='5' height='6' rx='1.2'/%3E%3Crect x='5' y='4.25' width='22' height='1.5'/%3E%3Cpath d='M27 4.25L34 5L27 5.75Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.eyebrow--center { justify-content: center; }

.lead {
  max-width: 560px;
  font-size: clamp(16.5px, 15.6px + 0.24vw, 18px);
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.body,
:where(.prose p) {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.body-lg { font-size: 17px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.5; color: var(--text-3); }
.meta { font-size: 13.5px; line-height: 1.45; color: var(--text-3); }

/* Mono label (table heads, card kickers, meta). */
.mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.mono--accent { color: var(--accent); }
.num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text-2 {
  background: var(--grad-text-2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Gradient text paints only inside its own box, and a tight title line-height ends that box
   above the serif's descenders (the g of "reimagined"), and an italic y's tail reaches left
   of it. Pad the box past them and take the room back with margins, so nothing moves. */
.display .accent,
.accent--grad,
.grad-text,
.grad-text-2 {
  padding-block: 0.08em 0.22em;
  padding-left: 0.12em;
  margin-block: -0.08em -0.22em;
  margin-left: -0.12em;
}

/* 4. Buttons and links ----------------------------------------------------- */

/* <a class="btn btn--primary btn--lg has-arrow" href="/contact">Contact us</a>
   Variants: --primary (purple), --ink (white on dark, ink on light), --glass.
   Sizes: --sm (42), default (48), --lg (54). .has-arrow draws the arrow. */
.btn {
  --btn-h: 48px;
  --btn-px: 22px;
  --btn-fs: 14.5px;
  --arrow: 14px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 0;
  border-radius: 999px;
  font-size: var(--btn-fs);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.2s, filter 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn--sm { --btn-h: 42px; --btn-px: 18px; --btn-fs: 14px; }
.btn--lg { --btn-h: 54px; --btn-px: 26px; --btn-fs: 15.5px; --arrow: 16px; }
.btn--block { display: flex; width: 100%; }
@media (max-width: 767px) {
  .btn--lg { --btn-h: 50px; --btn-px: 20px; --btn-fs: 15px; }
}

.btn--primary {
  background: var(--btn-primary-bg);
  color: #FFFFFF;
  box-shadow: var(--btn-primary-shadow);
}
.btn--primary:hover { color: #FFFFFF; box-shadow: var(--btn-primary-shadow-hover); filter: brightness(1.07); }
.btn--primary.btn--lg,
.btn--primary.has-arrow { gap: 10px; }

.btn--ink { background: var(--btn-ink-bg); color: var(--btn-ink-fg); }
.btn--ink:hover { color: var(--btn-ink-fg); opacity: 0.9; }

.btn--glass {
  background: var(--fill-2);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  font-weight: 500;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (min-width: 768px) {
  .btn--lg.btn--glass { --btn-px: 24px; }
}
.btn--glass:hover { background: var(--fill-3); color: var(--text-1); }
/* Light: the glass button is a white-to-tint pill with a soft shadow instead of an outline
   (a dark panel keeps the glass). */
:where([data-theme="light"]) .btn--glass { background: var(--btn-soft-bg); border-color: transparent; box-shadow: var(--btn-soft-shadow); }
:where([data-theme="light"]) .btn--glass:hover { background: var(--btn-soft-bg); filter: brightness(1.025); }
:is(.panel-ink, .cta-band) .btn--glass,
:is(.panel-ink, .cta-band) .btn--glass:hover { background: var(--fill-2); border-color: var(--border-strong); box-shadow: none; filter: none; }
:is(.panel-ink, .cta-band) .btn--glass:hover { background: var(--fill-3); }

.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn[aria-disabled="true"] { cursor: default; opacity: 0.65; filter: none; }

/* Arrow (and the external-link arrow) drawn from the text color. */
.has-arrow::after,
.has-arrow-out::after,
.link-arrow::after {
  content: "";
  flex: none;
  width: var(--arrow, 14px);
  height: var(--arrow, 14px);
  background: currentColor;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat;
  mask: var(--arrow-mask) center / contain no-repeat;
  transition: transform 0.25s var(--ease-out);
}
.has-arrow,
.link-arrow {
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.has-arrow-out {
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
}
.has-arrow:hover::after,
.link-arrow:hover::after { transform: translateX(3px); }
.has-arrow-out:hover::after { transform: translate(2px, -2px); }

/* Text link with an arrow: <a class="link-arrow" href="/membership">See membership</a> */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-2);
  white-space: nowrap;
}
.link-arrow:hover { color: var(--text-1); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.actions--center { justify-content: center; }

/* 5. Layout ----------------------------------------------------------------- */

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

/* The hairline rails, 28 px outside the content column (120 px from the edges at 1440).
   A page without them: <body data-rails="off">. */
@media (min-width: 1024px) {
  body:not([data-rails="off"])::before,
  body:not([data-rails="off"])::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: 1px;
    background: var(--hair);
    pointer-events: none;
  }
  body::before { left: max(0px, calc(50% - var(--container-wide) / 2)); }
  body::after { right: max(0px, calc(50% - var(--container-wide) / 2)); }
}

main { position: relative; display: block; }

/* A page section: <section class="section" id="team"><div class="container">...</div></section> */
.section {
  position: relative;
  z-index: 2;
  padding-top: var(--section-top);
}
.section--rule { margin-top: var(--section-top); border-top: 1px solid var(--hair); }
.section--pad-bottom { padding-bottom: var(--section-top); }

/* Section head: the intro to a section, centered and stacked (eyebrow, the two-line
   title, the aside as an 18 px sub), always 60 px above the content.
   <div class="section-head"><div class="section-head__title"><p class="eyebrow">..</p><h2 class="h2">..</h2></div>
   <div class="section-head__aside"><p>..</p></div></div>
   --start: the same stack, left-aligned (a visual sits beside it).
   --split: title left, aside right, bottoms aligned (only where the aside is a button row). */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: clamp(40px, 28px + 2.2vw, 60px);
  text-align: center;
}
.section-head__title { display: flex; flex-direction: column; align-items: center; gap: 20px; min-width: 0; max-width: 100%; }
.section-head .eyebrow { justify-content: center; }
.section-head__aside { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 680px; }
.section-head__aside p { font-size: clamp(16.5px, 15.6px + 0.24vw, 18px); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.section-head--start { align-items: flex-start; text-align: left; }
.section-head--start .section-head__title,
.section-head--start .section-head__aside { align-items: flex-start; }
.section-head--start .eyebrow { justify-content: flex-start; }
@media (min-width: 900px) {
  .section-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    align-items: end;
    gap: 60px;
    text-align: left;
  }
  .section-head--split .section-head__title,
  .section-head--split .section-head__aside { align-items: flex-start; }
  .section-head--split .eyebrow { justify-content: flex-start; }
  .section-head--split .section-head__aside { padding-bottom: 8px; }
  .section-head--split .section-head__aside p { font-size: 16px; }
}
@media (min-width: 1200px) {
  .section-head .h2 { white-space: nowrap; }
}

/* Grids */
.grid { display: grid; gap: 16px; }
.grid-2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.grid-3 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.grid-4 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 16px); }

/* Numbered list rows (01, 02, 03) with hairlines between. */
.numbered { border-top: 1px solid var(--line); }
.numbered > li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.numbered .num { padding-top: 3px; }
.numbered strong { display: block; font-size: 15.5px; font-weight: 500; color: var(--text-1); }
.numbered span:not(.num) { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--text-3); }

/* Check list */
.checks { display: flex; flex-direction: column; gap: 12px; }
.checks > li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.checks > li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B99AF0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--accent-tint);
}
[data-theme="light"] .checks > li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B429C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--accent-tint);
}

/* 6. Decorative layers ------------------------------------------------------ */

/* Every decorative layer is aria-hidden, absolutely placed in a positioned parent. */
.fx-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/marketing/assets/grain.webp") 0 0 / 240px 240px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Grain across a full-width band: lighter in dark (over the near-black ground a band of
   grain reads as a grey block) and faded out at the top and bottom, so no edge shows. */
.fx-grain--band,
.contact > .fx-grain {
  opacity: var(--grain-band-opacity);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 160px, #000 calc(100% - 160px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 160px, #000 calc(100% - 160px), transparent);
}
.fx-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), var(--glow-mid) 55%, transparent 75%);
  pointer-events: none;
}
.fx-beam {
  position: absolute;
  z-index: 0;
  width: 120px;
  height: 1500px;
  background: linear-gradient(180deg, transparent, var(--beam) 45%, transparent);
  filter: blur(34px);
  mix-blend-mode: var(--beam-blend);
  transform: rotate(36deg);
  pointer-events: none;
}
.fx-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 200px;
  background: linear-gradient(180deg, rgb(var(--ground-rgb) / 0), var(--ground));
  pointer-events: none;
}

/* 7. Nav and drawer --------------------------------------------------------- */

/* The header, after the closest Framer templates (Payflow's morph, Cirro's glass):
   at the top of a page an open bar, rail to rail; once the page scrolls it tightens
   into a floating glass capsule (site.js sets [data-scrolled]). Below 1100 it is
   always the capsule with a menu button, and the menu drops down under it as a card.
   Labels roll up on hover (.roll); the Contact us button carries an arrow badge. */
.site-nav {
  --bar-max: var(--container-wide);
  --bar-h: 64px;
  --bar-top: calc((var(--nav-h) - var(--bar-h)) / 2);
  --bar-pl: 28px;
  --bar-pr: 28px;
  --link-px: 14px;
  --link-fs: 14.5px;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flow-root; /* keeps the bar's top margin inside, so the capsule floats when stuck */
  height: var(--nav-h);
  padding: 0 var(--gutter);
  pointer-events: none;
}
.site-nav__bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: max-content; /* never narrower than what it holds, whatever --bar-max says */
  max-width: var(--bar-max);
  height: var(--bar-h);
  margin: var(--bar-top) auto 0;
  padding: 0 var(--bar-pr) 0 var(--bar-pl);
  border-radius: 999px;
  pointer-events: auto;
  transition: max-width 0.6s var(--ease-out), height 0.6s var(--ease-out), margin-top 0.6s var(--ease-out), padding 0.6s var(--ease-out);
}
/* The glass is its own layer, so it fades in while the bar's box glides. */
.site-nav__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--nav-glass);
  box-shadow: inset 0 1px 0 var(--nav-glass-edge), var(--nav-glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.site-nav[data-scrolled] .site-nav__bar::before { opacity: 1; }
.site-nav__logo {
  flex: none;
  display: flex;
  align-items: center;
  height: 44px;
  color: var(--logo-ink);
}
.logo-wordmark {
  height: 22px;
  width: auto;
  aspect-ratio: 2590 / 286;
  color: var(--logo-ink);
  transition: height 0.6s var(--ease-out);
}
.site-nav__menu {
  flex: 1;
  display: none;
  justify-content: center;
  align-items: center;
}
.site-nav__menu a {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--link-px);
  font-size: var(--link-fs);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.25s, padding 0.6s var(--ease-out);
}
.site-nav__menu a:hover,
.site-nav__menu a[aria-current] { color: var(--text-1); }
.site-nav__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.site-nav__signin {
  display: none;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  font-size: var(--link-fs);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.site-nav__signin:hover { color: var(--text-1); }

/* The hover roll: the label slides up and its copy rises in from below.
   <span class="roll"><span>Label</span><span aria-hidden="true">Label</span></span> */
.roll {
  display: inline-flex;
  flex-direction: column;
  height: 1.25em;
  line-height: 1.25;
  overflow: hidden;
}
.roll > span { display: block; transition: transform 0.55s cubic-bezier(0.65, 0, 0.25, 1); }
a:hover > .roll > span,
a:focus-visible > .roll > span { transform: translateY(-100%); }

/* Contact us: the purple pill with a white badge whose arrow slides through on hover. */
.nav-cta {
  display: none;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 5px 0 18px;
  border-radius: 999px;
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: box-shadow 0.3s var(--ease-out), filter 0.2s, height 0.6s var(--ease-out);
}
.nav-cta:hover { color: #FFFFFF; box-shadow: var(--btn-primary-shadow-hover); filter: brightness(1.06); }
.nav-cta:active { transform: translateY(1px); }
.nav-cta__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: #FFFFFF;
  color: #6B429C;
  transition: width 0.6s var(--ease-out), height 0.6s var(--ease-out);
}
.nav-cta__badge .icon {
  grid-area: 1 / 1;
  width: 15px;
  height: 15px;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.25, 1);
}
.nav-cta__badge .icon + .icon { transform: translateX(-30px); }
.nav-cta:hover .nav-cta__badge .icon { transform: translateX(30px); }
.nav-cta:hover .nav-cta__badge .icon + .icon { transform: none; }

/* The menu button: two lines that cross into an X on the open menu's twin. */
.burger {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text-1);
  color: var(--ground);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}
.burger:active { transform: scale(0.94); }
.burger__lines { position: relative; width: 16px; height: 9px; }
.burger__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.7px;
  border-radius: 2px;
  background: currentColor;
}
.burger__lines span:first-child { top: 0; }
.burger__lines span:last-child { bottom: 0; }
.burger--x .burger__lines span:first-child { animation: burger-x-a 0.5s var(--ease-out) 0.05s both; }
.burger--x .burger__lines span:last-child { animation: burger-x-b 0.5s var(--ease-out) 0.05s both; }
@keyframes burger-x-a { from { transform: none; } to { transform: translateY(3.65px) rotate(45deg); } }
@keyframes burger-x-b { from { transform: none; } to { transform: translateY(-3.65px) rotate(-45deg); } }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--fill-1);
  color: var(--text-soft);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.icon-btn:hover { color: var(--text-1); background: var(--fill-3); }
.icon-btn .icon { width: 18px; height: 18px; }

/* Copy link (site.js): the button turns accent and a small tip says "Link copied". */
[data-copy-link] { position: relative; }
[data-copy-link][data-state="copied"] { color: var(--accent-2); border-color: var(--feature-border); }
[data-copy-link][data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--text-1);
  color: var(--ground);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.theme-toggle { border-color: transparent; background: none; }
.theme-toggle:hover { background: var(--fill-1); }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.site-nav .theme-toggle { display: none; width: 36px; height: 36px; }
.site-nav .theme-toggle .icon { width: 16px; height: 16px; }

/* Below 1100: always the capsule, logo and menu button (and Contact us from 768). */
@media (max-width: 1099px) {
  .site-nav { --bar-h: 56px; --bar-top: 8px; --bar-pl: 18px; --bar-pr: 8px; padding: 0 10px; }
  .site-nav__bar::before { opacity: 1; }
  .nav-cta { height: 40px; padding-left: 16px; font-size: 14px; }
  .nav-cta__badge { width: 30px; height: 30px; }
}
@media (min-width: 768px) {
  .nav-cta { display: inline-flex; }
  .site-nav__actions { gap: 8px; }
}
@media (min-width: 1100px) {
  .site-nav__menu { display: flex; }
  .site-nav__signin { display: inline-flex; }
  .site-nav .theme-toggle { display: inline-flex; }
  .site-nav__menu-btn { display: none; }
  .site-nav[data-scrolled] {
    --bar-max: min(1064px, 100% - 64px); /* the logo, six links and the actions need about 960 */
    --bar-h: 60px;
    --bar-top: 12px;
    --bar-pl: 24px;
    --bar-pr: 8px;
    --link-px: 12px;
  }
  .site-nav[data-scrolled] .logo-wordmark { height: 20px; }
  .site-nav[data-scrolled] .nav-cta { height: 44px; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  .site-nav { --link-px: 10px; --link-fs: 14px; --bar-pl: 20px; --bar-pr: 8px; }
  .site-nav[data-scrolled] { --link-px: 9px; }
  .site-nav__signin { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__bar,
  .site-nav__bar::before,
  .logo-wordmark,
  .site-nav__menu a,
  .roll > span,
  .nav-cta,
  .nav-cta__badge,
  .nav-cta__badge .icon { transition: none; }
  .burger--x .burger__lines span { animation-duration: 0.01s; animation-delay: 0s; }
}

/* The menu (below 1100): a modal <dialog> over the page, so focus stays inside and
   Esc closes it. Its head is the capsule's twin (the button now an X); the links
   drop down under it as a card, row by row. A click outside the card closes it. */
.nav-drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 8px 10px 16px;
  border: 0;
  background: transparent;
  color: var(--text-body);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 100; /* only matters without showModal (no top layer) */
}
.nav-drawer[open] { display: flex; flex-direction: column; gap: 8px; animation: drawer-fade 0.3s var(--ease-out); }
.nav-drawer.is-closing { animation: drawer-fade-out 0.22s ease-in forwards; }
.nav-drawer::backdrop { background: var(--nav-scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav-drawer__head,
.nav-drawer__body {
  box-shadow: inset 0 1px 0 var(--nav-glass-edge), var(--nav-glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.nav-drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: var(--nav-glass);
}
.nav-drawer__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: min(100%, 480px);
  margin-left: auto;
  padding: 6px 20px 20px;
  border-radius: 28px;
  background: var(--nav-card);
  transform-origin: 85% 0;
  animation: drawer-drop 0.55s var(--ease-out) both;
}
.nav-drawer.is-closing .nav-drawer__body { animation: drawer-lift 0.22s ease-in forwards; }
.nav-drawer__links { display: flex; flex-direction: column; }
.nav-drawer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--hair);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-1);
  animation: drawer-row 0.5s var(--ease-out) both;
}
.nav-drawer__links a:nth-child(2) { animation-delay: 0.04s; }
.nav-drawer__links a:nth-child(3) { animation-delay: 0.08s; }
.nav-drawer__links a:nth-child(4) { animation-delay: 0.12s; }
.nav-drawer__links a:nth-child(5) { animation-delay: 0.16s; }
.nav-drawer__links a:nth-child(6) { animation-delay: 0.2s; }
.nav-drawer__links a::after {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--text-4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s var(--ease-out), background-color 0.2s;
}
.nav-drawer__links a:hover::after { transform: translateX(3px); background: var(--accent); }
.nav-drawer__links a[aria-current] { color: var(--accent-2); }
.nav-drawer__links a[aria-current]::after { background: var(--accent-2); }
.nav-drawer__actions { display: flex; flex-direction: column; gap: 10px; animation: drawer-row 0.5s var(--ease-out) 0.22s both; }
.nav-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; animation: drawer-row 0.5s var(--ease-out) 0.26s both; }
.nav-drawer__contact { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--text-3); }
.nav-drawer__contact a:hover { color: var(--text-1); }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer[open],
  .nav-drawer.is-closing,
  .nav-drawer__body,
  .nav-drawer.is-closing .nav-drawer__body,
  .nav-drawer__links a,
  .nav-drawer__actions,
  .nav-drawer__foot { animation-duration: 0.01s; animation-delay: 0s; }
}

@keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes drawer-drop { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes drawer-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px) scale(0.97); } }
@keyframes drawer-row { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* 8. Footer ------------------------------------------------------------------ */

.site-footer {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  border-top: 1px solid var(--hair);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}
.site-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.site-footer__brand .logo-wordmark { height: 24px; }
.site-footer__brand p { font-size: 15px; line-height: 1.6; color: var(--text-3); }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.site-footer__col h2 {
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 14.5px;
  color: var(--text-soft);
  transition: color 0.2s;
}
.site-footer__col a:hover { color: var(--accent-2); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  color: var(--text-4);
}
.site-footer__wordmark {
  display: flex;
  justify-content: center;
  height: clamp(44px, 10.4vw, 150px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 10%, transparent 100%);
}
.site-footer__wordmark span {
  display: block;
  width: 100%;
  aspect-ratio: 2590 / 286;
  margin-top: 6px;
  background: var(--wordmark-fade);
  -webkit-mask: url("/marketing/assets/logo-wordmark-white.svg") center top / 100% auto no-repeat;
  mask: url("/marketing/assets/logo-wordmark-white.svg") center top / 100% auto no-repeat;
}
@media (max-width: 767px) {
  /* Two columns on a phone: a tighter gap and 14 px links keep every link on one line. */
  .site-footer__grid { gap: 40px 16px; }
  .site-footer__col a { font-size: 14px; }
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; }
  .site-footer__col { gap: 0; }
  .site-footer__col h2 { margin-bottom: 8px; }
  .site-footer__col a { min-height: 33px; }
}

/* 9. Components --------------------------------------------------------------- */

/* Glass card. <div class="glass card">..</div>; .card--feature is the purple-tinted card. */
.glass {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  box-shadow: var(--glass-shadow);
}
.card { padding: clamp(24px, 18px + 1.2vw, 36px); }
.card--feature { background: var(--feature-bg); border-color: var(--feature-border); }
.card--link { transition: transform 0.3s var(--ease-out), border-color 0.3s; }
.card--link:hover { transform: translateY(-3px); border-color: var(--border-strong); }

/* 3D art icon (400x400 webp) with the purple drop shadow. */
.art { width: 96px; height: auto; filter: var(--art-shadow); }

/* Page hero. See the catalog for the markup; .page-hero--center centers it,
   .page-hero--split puts a visual on the right. */
/* The glow, beams and grain run up under the header, which is clear at the top of a
   page (so no edge shows where the hero begins); the sides and bottom stay clipped. */
.page-hero {
  position: relative;
  z-index: 2;
  overflow-x: clip;
  clip-path: inset(calc(-1 * var(--nav-h)) 0 0);
  padding: clamp(56px, 30px + 5.6vw, 110px) 0 clamp(72px, 44px + 4.6vw, 110px);
}
.page-hero > .fx-grain { top: calc(-1 * var(--nav-h)); }
.page-hero > .fx-glow { left: calc(50% - 160px); top: -120px; width: 1100px; height: 900px; }
.page-hero > .fx-beam { left: calc(50% + 100px); top: -360px; animation: mx-breathe 7s ease-in-out infinite; }
.page-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-hero__inner .actions { margin-top: 4px; }
.page-hero--center .page-hero__inner { align-items: center; text-align: center; }
.page-hero--center .lead { margin-inline: auto; }
.page-hero--center .eyebrow { justify-content: center; }
.page-hero--split .page-hero__inner { display: grid; gap: 48px; }
.page-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; min-width: 0; }
@media (min-width: 1024px) {
  .page-hero--split .page-hero__inner { grid-template-columns: minmax(0, 1fr) 460px; gap: 40px; align-items: center; }
}
@media (max-width: 767px) {
  .page-hero > .fx-glow { left: -10%; top: -200px; width: 640px; height: 640px; }
  .page-hero > .fx-beam { left: 60%; }
}
/* Hero buttons on a phone, one rule for every hero: stacked, full width. A hero that is
   not a .page-hero puts .actions--hero on its button row. Pages add no override. */
@media (max-width: 767px) {
  .page-hero .actions,
  .actions--hero { flex-direction: column; align-items: stretch; width: 100%; max-width: 440px; }
  .page-hero .actions .btn,
  .actions--hero .btn { width: 100%; }
}

/* Quote band: one serif line and an italic line, then the attribution. */
.quote-band { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.quote-band blockquote {
  max-width: 1080px;
  font-family: var(--font-serif);
  font-size: clamp(27px, 20px + 1.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-quote);
  text-wrap: balance;
}
.quote-band blockquote em { font-style: italic; color: var(--accent-2); }
.person { display: flex; align-items: center; gap: 14px; text-align: left; }
.person__photo { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--border-strong); }
.person__name { display: block; font-size: 15px; font-weight: 600; color: var(--text-1); }
.person__org { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-3); }
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--monogram-bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: #E9DDFF;
}

/* Dark panel: one change of key on a page. A rounded panel, rail to rail, that is dark in
   both themes (the dark tokens apply inside it, see the dark token block), with a purple
   bloom from the top. <section class="panel-ink">..</section> or on any wrapper. */
.panel-ink,
.cta-band {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  width: min(var(--container-wide), 100% - 2 * var(--gutter) + 56px, 100% - 16px);
  margin-inline: auto;
  border-radius: clamp(28px, 18px + 2vw, 44px);
  padding-block: clamp(64px, 40px + 5vw, 120px);
  background:
    radial-gradient(70% 60% at 50% -10%, rgba(126, 72, 214, 0.42), transparent 70%),
    radial-gradient(40% 50% at 100% 110%, rgba(31, 143, 156, 0.18), transparent 70%),
    #110B1B;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset, 0 40px 80px -40px rgba(46, 24, 84, 0.45);
  color: var(--text-body);
}

/* CTA band: the big centered close, a dark panel with a glow. */
.cta-band {
  margin-top: clamp(96px, 60px + 6.9vw, 150px);
  padding: clamp(80px, 56px + 5vw, 120px) 0;
  text-align: center;
}
.cta-band > .fx-glow {
  left: 50%;
  top: 40px;
  width: min(1200px, 160%);
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow-cta), transparent 70%);
}
.cta-band__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cta-band .accent { font-size: 1.175em; letter-spacing: -0.02em; }
.cta-band .lead { margin-inline: auto; font-size: 17px; }

/* Stats strip (rail to rail). The optional lead cell holds "As featured in" + WSJ. */
.stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 26px 20px;
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.stat:nth-child(2n) { border-right: 0; }
/* Numbers in the serif, over small spaced caps. */
.stat__value { font-family: var(--font-serif); font-size: clamp(40px, 31px + 1.7vw, 56px); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; color: var(--text-1); }
.stat__value.grad-text-2 { color: transparent; }
.stat__label { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); }
.stat--lead { grid-column: 1 / -1; gap: 10px; border-right: 0; }
.stat--lead img { height: 17px; width: auto; opacity: 0.9; filter: var(--invert-on-light); }
.stats--lg .stat { gap: 10px; }
.stats--lg .stat__value { font-size: clamp(44px, 33px + 2.1vw, 64px); }
@media (max-width: 767px) {
  .stats > .stat:nth-last-child(-n + 2):not(.stat--lead) { border-bottom: 0; }
}
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(var(--stats-cols, 4), minmax(0, 1fr)); }
  .stats:has(.stat--lead) { --stats-cols: 5; grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr)); }
  .stat { padding: 30px 28px; border-bottom: 0; }
  .stat:nth-child(2n) { border-right: 1px solid var(--hair); }
  .stat:last-child { border-right: 0; }
  .stat--lead { grid-column: auto; }
  .stats--lg .stat { padding: 32px 28px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .stats:has(.stat--lead) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats:has(.stat--lead) .stat--lead { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--hair); padding: 22px 28px; }
  .stat { padding: 26px 22px; }
}

/* Partners strip: <section class="partners container--wide" aria-label="Our partners">.. */
.partners {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hair);
}
.partners__label { padding-left: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }
.partners__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 30px;
  padding: 0 20px;
}
.partners__logos img { width: auto; height: var(--h, 20px); opacity: 0.62; filter: var(--invert-on-light); }
@media (min-width: 1024px) {
  .partners { grid-template-columns: 186px minmax(0, 1fr); align-items: center; height: 124px; padding: 0; gap: 0; }
  .partners__label { padding-left: 28px; }
  .partners__logos { flex-wrap: nowrap; justify-content: space-between; gap: 18px; padding: 0 36px 0 8px; }
  /* One row: where it runs short (below about 1200), every logo shrinks by the same ratio. */
  .partners__logos img { flex: 0 1 auto; min-width: 0; object-fit: contain; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .partners { grid-template-columns: 156px minmax(0, 1fr); }
  .partners__label { padding-left: 22px; }
  .partners__logos { gap: 14px; padding-right: 24px; }
}

/* Team grid: photo cards, the monogram card and the careers card. */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.team-card {
  position: relative;
  aspect-ratio: 1 / 1.12;
  overflow: hidden;
  border-radius: var(--radius-tile);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #120B1C;
  isolation: isolate;
}
.team-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.team-card:hover img { transform: scale(1.03); }
.team-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 5, 11, 0) 45%, rgba(7, 5, 11, 0.92));
  pointer-events: none;
}
.team-card__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.team-card__name { font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: #FFFFFF; }
.team-card__role { font-size: 13px; line-height: 1.35; color: #C9BFD6; }
.team-card--monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(126, 72, 214, 0.45), rgba(126, 72, 214, 0.08) 70%), #120B1C;
}
.team-card--monogram::after { display: none; }
.team-card__monogram {
  margin-bottom: 40px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(64px, 50px + 3vw, 96px);
  letter-spacing: -0.02em;
  color: #D5BEFA;
}
.team-card--careers {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 26px;
  background: var(--feature-bg);
  border-color: var(--feature-border);
}
[data-theme="dark"] .team-card--careers { background: linear-gradient(160deg, rgba(126, 72, 214, 0.35), rgba(255, 255, 255, 0.03) 70%); border-color: rgba(205, 181, 244, 0.22); }
.team-card--careers::after { display: none; }
.team-card--careers .mono { color: var(--accent-2); }
.team-card--careers h3 { font-size: clamp(22px, 19px + 0.5vw, 26px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--text-1); }
.team-card--careers p { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.team-card--careers .btn { align-self: flex-start; }
@media (max-width: 1099px) {
  /* The careers card keeps its grid cell: the heading and the button, no paragraph. */
  .team-card--careers { aspect-ratio: auto; padding: 18px; }
  .team-card--careers h3 { font-size: 19px; }
  .team-card--careers p { display: none; }
  .team-card--careers .btn { --btn-h: 40px; --btn-px: 14px; --btn-fs: 13px; --arrow: 12px; gap: 7px; }
}
@media (max-width: 767px) {
  .team-card__caption { left: 14px; right: 14px; bottom: 13px; }
  .team-card__name { font-size: 15.5px; }
  .team-card__role { font-size: 12px; }
  /* Two columns: the first card (the CEO) and the careers card run full width, so seven
     portraits and the careers card fill the grid without a hole, and the careers card
     has room for its paragraph and its button. */
  .team-grid > .team-card:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .team-grid > .team-card:first-child img { object-position: 50% 22%; }
  .team-card--careers { grid-column: 1 / -1; padding: 22px 20px 20px; }
  .team-card--careers h3 { font-size: 21px; }
  .team-card--careers p { display: block; }
  .team-card--careers .btn { margin-top: 16px; }
}
@media (min-width: 1024px) {
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
/* Four narrow columns up to 1199: smaller captions keep every role on one line. */
@media (min-width: 768px) and (max-width: 1199px) {
  .team-card__caption { left: 14px; right: 14px; bottom: 13px; }
  .team-card__name { font-size: 15.5px; }
  .team-card__role { font-size: 12px; }
}

/* Contact section: the headline, contact rows and the form. */
.contact {
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* one section's rhythm: the hairline sits where the section starts, the content one
     --section-top below it */
  padding-block: var(--section-top);
  border-top: 1px solid var(--hair);
}
.contact > .fx-glow {
  left: -300px;
  bottom: -420px;
  width: 1300px;
  height: 900px;
  background: radial-gradient(closest-side, var(--glow-strong), transparent 72%);
}
.contact > .fx-beam { left: 380px; top: -200px; width: 110px; height: 1400px; transform: rotate(28deg); filter: blur(30px); }
.contact__grid { position: relative; z-index: 1; display: grid; gap: 48px; }
.contact__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.contact__intro .body-lg { max-width: 440px; }
.contact-list { width: 100%; max-width: 520px; margin-top: 20px; border-top: 1px solid var(--line); }
.contact-list li { display: flex; align-items: center; gap: 16px; min-height: 60px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--text-1); }
.contact-list .icon { width: 18px; height: 18px; color: var(--accent); }
.contact-list a:hover { color: var(--accent-2); }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) 500px; gap: 56px; }
}
@media (max-width: 767px) {
  .contact > .fx-glow { left: -50%; bottom: -300px; width: 900px; height: 700px; }
  .contact > .fx-beam { left: 30%; }
}

/* Form shell: a gradient ring around a glass panel. */
.form-shell {
  position: relative;
  padding: 1px;
  border-radius: var(--radius-card);
  background: var(--form-ring);
  box-shadow: var(--shadow-pop);
}
.form-shell__panel {
  border-radius: calc(var(--radius-card) - 1px);
  background: var(--form-bg);
  padding: clamp(22px, 16px + 1.6vw, 34px);
}
.form { display: flex; flex-direction: column; gap: 16px; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 560px) {
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__label { font-size: 13px; font-weight: 500; color: var(--text-label); }
.field__label .optional { font-weight: 400; color: var(--text-4); }
.input,
.select,
.textarea {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border-radius: var(--radius-field);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-size: 15px;
  color: var(--text-1);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--placeholder); opacity: 1; }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--input-border-hover); }
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}
.textarea { height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 96px; }
.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D82A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  cursor: pointer;
}
.select:has(option[value=""]:checked) { color: var(--placeholder); }
.select option { color: #150E20; background: #FFFFFF; }
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--danger); }
.field__error { font-size: 12.5px; color: var(--danger); }
.form .btn--primary[type="submit"] { margin-top: 6px; --btn-h: 54px; --btn-fs: 16px; --arrow: 16px; gap: 10px; }
.form__note { font-size: 13px; line-height: 1.5; color: var(--text-4); text-align: center; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Inline form states (site.js sets data-state on the form: sending | success | error). */
.form-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
}
.form-alert .icon { width: 18px; height: 18px; margin-top: 1px; }
.form-alert--error { background: var(--danger-bg); color: var(--danger); }
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 12px;
  text-align: center;
}
.form-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
}
.form-success__icon .icon { width: 26px; height: 26px; }
.form-success h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; color: var(--text-1); }
.form-success p { max-width: 340px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
form[data-state="sending"] [type="submit"] { pointer-events: none; opacity: 0.8; }
form[data-state="sending"] [type="submit"]::after { animation: mx-spin 0.9s linear infinite; -webkit-mask: none; mask: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; background: none; }

/* The Medico Letter band. */
.letter {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 32px;
  padding: clamp(28px, 16px + 3.2vw, 56px) clamp(22px, 8px + 3.8vw, 64px);
  border-radius: 30px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse 60% 130% at 0% 0%, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0) 62%),
    radial-gradient(ellipse 50% 100% at 100% 100%, rgba(31, 143, 156, 0.06), rgba(31, 143, 156, 0) 70%),
    var(--surface);
  box-shadow: var(--glass-shadow);
}
[data-theme="dark"] .letter {
  border-color: rgba(233, 221, 251, 0.2);
  background:
    radial-gradient(ellipse 60% 130% at 0% 0%, rgba(139, 92, 246, 0.42), rgba(139, 92, 246, 0) 62%),
    radial-gradient(ellipse 50% 100% at 100% 100%, rgba(143, 233, 242, 0.12), rgba(143, 233, 242, 0) 70%),
    #0E0A16;
}
.letter > .fx-grain { opacity: calc(var(--grain-opacity) * 0.7); }
.letter__intro { position: relative; display: flex; align-items: center; gap: clamp(16px, 8px + 1.6vw, 28px); }
.letter__intro .art { width: clamp(72px, 52px + 4vw, 112px); animation: mx-float 8s ease-in-out infinite; }
.letter__intro .body { margin-top: 12px; }
.letter__form { position: relative; display: flex; flex-direction: column; gap: 10px; }
.letter__row { display: flex; flex-wrap: wrap; gap: 10px; }
.letter__row .input { flex: 1 1 220px; height: 54px; padding: 0 22px; border-radius: 999px; }
.letter__row .btn { --btn-h: 54px; --btn-px: 26px; --btn-fs: 15px; }
.letter .form-alert { margin-top: 2px; }
.letter__done { display: flex; align-items: center; gap: 10px; min-height: 54px; font-size: 15px; color: var(--text-1); }
.letter__done .icon { width: 20px; height: 20px; color: var(--success); }
@media (min-width: 1024px) {
  .letter { grid-template-columns: minmax(0, 1fr) 440px; align-items: center; gap: 56px; }
}
@media (max-width: 559px) {
  .letter__intro { align-items: flex-start; flex-direction: column; }
  .letter__row .btn { width: 100%; }
}

/* FAQ: a two-column list of <details>; open ones read like the board. */
.faq { display: grid; column-gap: 56px; }
.faq__item { border-top: 1px solid var(--border); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0 0;
  font-size: clamp(17px, 15.6px + 0.4vw, 19px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-1);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: var(--text-4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%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='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover::after { background: var(--accent); }
.faq__item:not([open]) summary { padding-bottom: 24px; }
.faq__answer { padding: 10px 36px 28px 0; font-size: 15px; line-height: 1.6; color: var(--text-3); }
@media (min-width: 900px) {
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__item { border-color: var(--border); }
}

/* Chips and badges. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--fill-3);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.chip--accent { background: var(--accent-tint); color: var(--accent); }
.chip--ok { background: var(--success-bg); color: var(--success); }
.chip--mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 10px var(--accent-fill); }
.orb { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--orb); box-shadow: 0 0 12px rgba(164, 230, 236, 0.7); }

/* Announcement pill (the home's "New | Meet Medico Billing, with Nadia"). */
.announce {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px 0 5px;
  border-radius: 999px;
  background: var(--fill-2);
  border: 1px solid var(--border-strong);
  font-size: 13.5px;
  color: var(--text-soft);
  transition: background-color 0.2s, border-color 0.2s;
}
.announce:hover { background: var(--fill-3); color: var(--text-1); }
.announce__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
  background: rgba(205, 181, 244, 0.14);
  font-weight: 500;
  color: var(--accent-2);
}
.announce .icon { width: 14px; height: 14px; }

/* Product island: a drawn screen that keeps its own (light) colors in both themes. */
.island {
  border-radius: 14px;
  background: var(--island-bg);
  color: var(--island-ink);
  box-shadow: var(--island-shadow);
}
:where([data-theme="light"]) .island { box-shadow: 0 1px 2px rgba(21, 14, 32, 0.05), 0 34px 70px -26px rgba(46, 24, 84, 0.22); }

/* Glass toast (the hero's floating chips). */
.toast {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 68px;
  padding: 0 22px 0 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
[data-theme="dark"] .toast {
  background: rgba(22, 16, 34, 0.55);
  border-color: rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-float);
}

/* Video frame (the Medico Billing film). */
.video-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: #0E0A16;
  box-shadow: var(--shadow-pop);
}
.video-frame video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0E0A16; }

/* Press card (WSJ). */
.press-card {
  display: grid;
  gap: 20px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  box-shadow: var(--glass-shadow);
}
[data-theme="dark"] .press-card { background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); }
.press-card__photo { width: 100%; height: 190px; border-radius: 16px; object-fit: cover; object-position: 50% 22%; }
.press-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 8px; }
.press-card__body img { height: 15px; width: auto; opacity: 0.85; filter: var(--invert-on-light); }
.press-card__title { font-size: clamp(21px, 18px + 0.6vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--text-1); }
.press-card__body p { font-size: 14.5px; line-height: 1.5; color: var(--text-3); }
.press-card .btn { justify-self: start; margin: 0 8px 8px; }
@media (min-width: 900px) {
  .press-card { grid-template-columns: 190px minmax(0, 1fr) auto; gap: 32px; align-items: center; }
  .press-card__photo { width: 190px; height: 150px; }
  .press-card__body { padding: 0; }
  .press-card .btn { margin: 0 20px 0 0; }
}

/* 10. Motion -------------------------------------------------------------------- */

@keyframes mx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes mx-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes mx-glow {
  0%, 100% { box-shadow: 0 0 70px rgba(143, 227, 238, 0.45), 0 0 160px rgba(139, 92, 246, 0.55), inset -12px -16px 34px rgba(20, 8, 40, 0.55); }
  50% { box-shadow: 0 0 90px rgba(143, 227, 238, 0.6), 0 0 200px rgba(139, 92, 246, 0.7), inset -12px -16px 34px rgba(20, 8, 40, 0.55); }
}
@keyframes mx-ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes mx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mx-wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes mx-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mx-spin { to { transform: rotate(360deg); } }

.anim-float { animation: mx-float 8s ease-in-out infinite; }
.anim-breathe { animation: mx-breathe 7s ease-in-out infinite; }
.anim-ping { animation: mx-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
.anim-marquee { animation: mx-marquee 40s linear infinite; }
.anim-caret { animation: mx-caret 1.1s steps(1) infinite; }

/* Scroll-in: site.js adds .is-in when the element enters the viewport; it rises out of a
   soft blur. Delays: .reveal-d1 .. .reveal-d4 (80 ms steps). */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
/* the blur only before it is in, so an element's own filter (a drop shadow) comes back */
.js .reveal:not(.is-in) { filter: blur(8px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Titles word by word: site.js wraps each word of a section title (and a page hero's h1)
   in .w with its index; each word comes out of a blur, 40 ms after the one before. A
   gradient accent moves as one piece (its gradient paints on its own box). */
.js .words .w {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.3em);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms + var(--reveal-delay, 0ms));
}
.js .words.is-in .w { opacity: 1; filter: none; transform: none; }

/* Tilt: a hero's product visual starts tilted back and lies flat as the page scrolls
   (site.js sets --tilt from 14 to 0 over the first part of the scroll). */
[data-tilt] {
  transform: perspective(1400px) rotateX(calc(var(--tilt, 0) * 1deg));
  transform-origin: 50% 0;
  will-change: transform;
}
/* with .reveal on the same element, the rise and the tilt combine (the reveal alone would
   set transform: none) */
.js .reveal[data-tilt] { transform: perspective(1400px) translateY(24px) rotateX(calc(var(--tilt, 0) * 1deg)); }
.js .reveal.is-in[data-tilt] { transform: perspective(1400px) rotateX(calc(var(--tilt, 0) * 1deg)); }

/* Stacking steps: each step card sticks under the nav and the next one slides over it.
   <ol class="stack-steps"><li class="glass stack-step">..</li></ol> */
.stack-steps { display: flex; flex-direction: column; gap: 20px; }
/* dark glass is see-through: give a stacked card a floor, so the one beneath never shows */
[data-theme="dark"] .stack-step { background: var(--glass-bg), var(--ground); }
@media (min-width: 900px) {
  .stack-step { position: sticky; top: calc(var(--nav-h) + 24px + var(--i, 0) * 14px); }
}
.reveal-d1 { --reveal-delay: 80ms; }
.reveal-d2 { --reveal-delay: 160ms; }
.reveal-d3 { --reveal-delay: 240ms; }
.reveal-d4 { --reveal-delay: 320ms; }

/* Screenshots (?shots=1) and reduced motion: no animation, everything in place. */
[data-shots] *,
[data-shots] *::before,
[data-shots] *::after { animation: none !important; transition: none !important; }
[data-shots] .reveal { opacity: 1 !important; transform: none !important; }
[data-shots] .words .w { opacity: 1 !important; filter: none !important; transform: none !important; }
[data-shots] [data-tilt] { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal:not(.is-in),
  .js .words .w { opacity: 1; filter: none; transform: none; }
  [data-tilt] { transform: none; }
}

/* 11. Utilities ------------------------------------------------------------------ */

.invert-on-light { filter: var(--invert-on-light); }
.text-1 { color: var(--text-1); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-accent { color: var(--accent); }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.hide-phone { display: none; }
@media (min-width: 768px) {
  .hide-phone { display: revert; }
  .only-phone { display: none !important; }
}