:root {
    color-scheme: light dark;
    --bg: #f6f7fb;
    --surface: #ffffff;
    --text: #1b1e28;
    --muted: #5b6172;
    --border: #e2e4ec;
    --brand: #4f46e5;
    --brand-dark: #4338ca;
    /* Hover fill for brand buttons. Separate from --brand-dark because in
       dark mode --brand-dark sits between --brand and the ink, where
       --on-brand only reaches 4.18:1 -- hover must get lighter, not darker. */
    --brand-hover: #4338ca;
    --danger: #dc2626;
    --success: #15803d;
    /* Text drawn on top of var(--brand). Buttons etc. must use this instead
       of a hardcoded white -- --brand flips to a light indigo in dark mode
       (see below), where white text drops to 2.98:1 and fails AA. */
    --on-brand: #ffffff;
    /* Fixed brand ink for text that always sits on a literal white surface
       regardless of theme (e.g. the CTA band's white button) -- intentionally
       NOT redeclared in the dark media block below. */
    --brand-ink: #4338ca;

    /* --- Design system v2 (2026-09 redesign) ---------------------------
       The marketing site and the app now share one visual language: a warm
       amber accent against the existing indigo, fixed "ink" surfaces for the
       full-bleed dark bands, an elevation scale, and a radius scale. The ink
       tokens are deliberately NOT redeclared in the dark block below -- a
       dark band is dark in both themes, so text on it reads identically. */
    --accent: #f5a524;          /* amber fills, glows, underlines */
    --accent-soft: #fde9c4;     /* tinted surfaces on light backgrounds */
    --accent-strong: #9a5b06;   /* accent as TEXT on a light surface (5.5:1 on #fff) */
    --on-accent: #2a1a02;       /* ink on an amber fill (12.4:1) */

    --ink: #0e1018;             /* full-bleed dark band */
    --ink-2: #171a27;           /* raised card inside a dark band */
    --ink-3: #212637;           /* hairline-lifted chip inside a dark band */
    --ink-text: #f2f4fb;        /* body text on --ink (16.9:1) */
    --ink-muted: #a9b0c9;       /* secondary text on --ink (8.0:1) */

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(14, 16, 24, 0.05), 0 2px 8px rgba(14, 16, 24, 0.05);
    --shadow-md: 0 4px 12px rgba(14, 16, 24, 0.06), 0 14px 34px rgba(14, 16, 24, 0.08);
    --shadow-lg: 0 12px 28px rgba(14, 16, 24, 0.10), 0 36px 70px rgba(14, 16, 24, 0.14);
    --shadow-brand: 0 6px 18px rgba(79, 70, 229, 0.24);

    --wrap: 1160px;             /* marketing content column */
    /* Avatar palette (#29). Ten fixed colours, every one measured against
       white text: lowest 5.02:1 (--avatar-6), highest 7.90:1 (--avatar-9).
       Deliberately NOT redeclared in the dark block below -- the disc and
       its initials are both fixed colours, so the pair reads identically in
       both themes, and a person keeps the same colour whichever theme you
       look at them in. See src/services/avatars.ts for why this is a fixed
       palette rather than a hashed HSL hue. */
    --avatar-0: #1d4ed8;
    --avatar-1: #6d28d9;
    --avatar-2: #be185d;
    --avatar-3: #b91c1c;
    --avatar-4: #9a3412;
    --avatar-5: #854d0e;
    --avatar-6: #15803d;
    --avatar-7: #0f766e;
    --avatar-8: #0e7490;
    --avatar-9: #4338ca;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #14151c;
      --surface: #1d1f29;
      --text: #eef0f6;
      --muted: #a2a6b8;
      --border: #2c2f3c;
      --brand: #818cf8;
      --brand-dark: #6366f1;
      --brand-hover: #9aa4fb;
      --danger: #f87171;
      --success: #4ade80;
      --on-brand: #10121c;
      --accent-soft: #3a2c11;
      --accent-strong: #f7b955;   /* accent as text on a dark surface (9.1:1) */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.30);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.38), 0 14px 34px rgba(0, 0, 0, 0.42);
      --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45), 0 36px 70px rgba(0, 0, 0, 0.55);
      --shadow-brand: 0 6px 18px rgba(99, 102, 241, 0.30);
    }
  }
  /* IBM Plex Sans, self-hosted (no Google Fonts request, no FOUT). Behind
     --fu-ui below so swapping the face later is a one-line change. Latin
     subset only, three static weights -- covers UI text (400/500) and the
     handful of still-bold headings and badges (700). */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2");
  }
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-700.woff2") format("woff2");
  }
  :root {
    /* One family for UI and headings. Swapping the face is a one-line change here. */
    --fu-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: var(--fu-ui);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
  }
  a {
    color: var(--brand);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
  /* Names are not headlines -- position and colour already do that job, so
     bold text (mostly names, in list/row contexts) drops a step from the
     browser's default 700 to 500. */
  strong, b {
    font-weight: 500;
  }
  header {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-toggle:hover { background: var(--bg); }
  .nav-toggle svg { width: 18px; height: 18px; flex: none; }
  .brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    text-decoration: none;
  }
  .beta-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
  }
  .tier-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    border: 1px solid var(--border);
    color: var(--muted);
  }
  .tier-badge[data-tier="free"] { color: var(--muted); border-color: var(--border); }
  .tier-badge[data-tier="silver"] { color: #c3c8d4; border-color: #c3c8d4; }
  .tier-badge[data-tier="gold"] { color: #e6b800; border-color: #e6b800; }
  .tier-badge[data-tier="platinum"] { color: var(--brand); border-color: var(--brand); }

  .nav-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin-left: auto;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    flex: none;
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 29;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px 12px;
    gap: 2px;
    overflow-y: auto;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  nav.open { transform: translateX(0); }
  nav .brand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 4px;
    row-gap: 4px;
    padding: 0 6px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
  }
  nav .brand .beta-badge,
  nav .brand .tier-badge {
    margin-left: 0;
  }
  nav a:not(.brand), nav button.nav-authed-only {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 10px 10px;
    border-radius: 8px;
  }
  nav a:not(.brand):not(.btn):hover, nav button.nav-authed-only:hover {
    color: var(--brand);
    background: var(--bg);
  }
  nav a:not(.brand) svg, nav button.nav-authed-only svg {
    width: 18px;
    height: 18px;
    flex: none;
  }
  html:not([data-auth]) .nav-guest-only,
  html:not([data-auth]) .nav-authed-only,
  html[data-auth="guest"] .nav-authed-only,
  html[data-auth="authed"] .nav-guest-only {
    display: none;
  }
  nav button.nav-authed-only {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }
  nav a.btn, nav a.btn:hover { color: var(--on-brand); }
  nav .nav-heading {
    padding: 16px 10px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.7;
  }
  nav .nav-heading:first-of-type { padding-top: 8px; }
  main {
    /* Single content-column cap for every page (#6). Centred with margin:0
       auto instead of flush against the sidebar -- at >=900px the sidebar
       reserves its 260px via body's padding-left (see the min-width:900px
       block below) rather than a margin on main itself, so auto-centering
       here lands main in the middle of the space actually left over, not
       flush against the fixed nav. Widened from 960px to close most of the
       dead gutter at wide viewports while still leaving breathing room on
       desktop-and-up. */
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 24px 96px;
  }
  body.meeting-chats-page {
    min-height: 100vh;
    overflow: hidden;
  }
  body.meeting-chats-page main {
    max-width: none;
    height: calc(100vh - 65px);
    padding: 24px;
    overflow: hidden;
  }
  body.meeting-chats-page footer {
    display: none;
  }
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    max-width: 420px;
  }
  .compatibility-card { max-width: none; }
  h1 { font-size: 1.9rem; margin: 0 0 8px; }
  h2 { font-size: 1.4rem; margin: 0 0 16px; }
  p.lede { color: var(--muted); font-size: 1.05rem; max-width: 640px; }
  .hero { padding-bottom: 24px; }
  .cta-row { display: flex; gap: 12px; margin-top: 24px; }
  .steps {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }
  .steps li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
  }
  .steps li .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 10px;
  }
  form { display: flex; flex-direction: column; gap: 14px; }
  label { font-size: 0.9rem; color: var(--muted); }
  input, select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
  }
  select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238a8f9e' stroke-width='1.5'%3E%3Cpath d='M6 8l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 34px;
    cursor: pointer;
  }
  input:focus, select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .hint { font-size: 0.85rem; color: var(--muted); }
  .hint.success { color: var(--success); }
  .hint.error { color: var(--danger); }
  .required-mark { color: var(--danger); font-weight: 700; }
  .optional-mark { color: var(--muted); font-weight: 400; font-size: 0.85em; }
  .field-checkbox label { display: flex; align-items: flex-start; gap: 8px; }
  .field-checkbox input[type="checkbox"] { width: auto; margin-top: 3px; flex-shrink: 0; }
  .password-wrap { position: relative; }
  .password-wrap input { width: 100%; padding-right: 40px; }
  .password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--muted);
    cursor: pointer;
  }
  .password-toggle:hover { color: var(--text); }
  .password-toggle svg { width: 18px; height: 18px; }
  .invite-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .invite-link-row code {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    word-break: break-all;
  }
  .invite-link-details summary {
    cursor: pointer;
    width: fit-content;
  }
  .invite-link-details summary::-webkit-details-marker { color: var(--muted); }
  .invite-link-details > div {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--muted);
  }
  .invite-link-details code {
    font-size: 0.8rem;
    color: var(--muted);
    word-break: break-all;
  }
  .invite-link-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  @media (max-width: 700px) {
    .invite-link-row { flex-direction: column; align-items: stretch; }
    .invite-link-actions { justify-content: flex-end; }
  }
  button:disabled, .btn:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
  button, .btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
  }
  button:hover, .btn:hover { background: var(--brand-hover); }
  .btn.secondary {
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--border);
  }
  .btn.secondary:hover { background: var(--surface); }
  /* A row of two form buttons meant to sit side by side. Plain siblings of a
     <form> (display:flex; flex-direction:column) stretch to the form's full
     width, so an inline margin-left on the second button used to just shove
     it 8px right while shrinking it by the same 8px -- misaligning both the
     x position and the width against the first button. This wrapper opts
     the pair out of that stretch and gives them an even, gapped row instead. */
  .form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .form-actions > button,
  .form-actions > .btn {
    flex: 1 1 auto;
  }
  .thread-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .thread-title-row h3 { min-width: 0; }
  .thread-actions { position: relative; flex-shrink: 0; }
  .thread-actions > summary {
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 5px 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--brand);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 26px;
    list-style: none;
    text-align: center;
  }
  .thread-actions > summary::-webkit-details-marker { display: none; }
  .thread-actions > summary::marker { content: ""; }
  .thread-actions-menu {
    position: absolute;
    z-index: 2;
    top: 44px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  }
  .thread-actions-menu .btn { width: 100%; box-sizing: border-box; }
  .message {
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    display: none;
  }
  .message.error { display: block; background: rgba(220,38,38,0.1); color: var(--danger); }
  .message.success { display: block; background: rgba(21,128,61,0.12); color: var(--success); }
  .invite-social-proof { margin-top: 8px; font-weight: 600; color: var(--muted); font-size: 1.05rem; max-width: 640px; }
  .message.invite-confirmed {
    padding: 24px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .message.invite-confirmed h1 { margin: 0; color: var(--success); }
  .message.invite-confirmed .lede { margin: 0; }
  .message.invite-confirmed .btn { margin-top: 8px; }
  .links { margin-top: 16px; font-size: 0.9rem; color: var(--muted); }
  .links a { color: var(--brand); text-decoration: none; }
  .links a:hover { text-decoration: underline; }
  footer {
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    padding: 24px;
  }
  footer .footer-links {
    margin-top: 6px;
  }
  footer .footer-links a {
    color: var(--muted);
    text-decoration: none;
    margin: 0 8px;
  }
  footer .footer-links a:hover {
    color: var(--brand);
    text-decoration: underline;
  }
  .legal h2 { margin-top: 32px; font-size: 1.15rem; }
  .legal h2:first-of-type { margin-top: 0; }
  .legal p, .legal li { color: var(--muted); }
  .legal .updated { color: var(--muted); font-size: 0.85rem; margin-bottom: 24px; }
  .banner {
    background: rgba(79,70,229,0.1);
    border: 1px solid var(--brand);
    color: var(--text);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
    margin-bottom: 16px;
  }
  .banner-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .btn-small {
    padding: 4px 10px;
    font-size: 0.8rem;
    flex-shrink: 0;
  }
  .referral-card {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
  }
  .referral-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }
  .referral-row textarea {
    flex: 1;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
  }
  .referral-row button {
    flex-shrink: 0;
    padding: 10px 16px;
  }
  .promo-banner {
    /* Was #16a34a (Tailwind green-600) -- only 3.29:1 against the white
       text below, in both themes, since this banner isn't tied to the
       --brand tokens. #15803d matches the existing hover shade and clears
       AA at 5.01:1. */
    background: #15803d;
    border-radius: 10px;
    margin-bottom: 24px;
  }
  .promo-banner a {
    display: block;
    padding: 12px 20px;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.4;
    border-radius: inherit;
  }
  .promo-banner a:hover { background: #0f5c2c; }
  .promo-banner strong { font-weight: 800; }
  html:not([data-auth="authed"]) .dashboard { display: none; }
  .dashboard h1 { margin-bottom: 4px; }
  .dashboard .lede { margin-top: 0; margin-bottom: 32px; }
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
  }
  .stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    /* Explicit top-aligned flex column: the grid row stretches every card to
       match whichever one's label wraps to two lines, and without this a
       stat-card-clickable <button> centers its content in that extra space
       instead of staying pinned to the top like its sibling <div>s, which is
       what put the "Referral link clicks" value 10px below the others. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
  }
  .stat-card .stat-label {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 4px;
  }
  .stat-card-clickable {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
  }
  .stat-card-clickable .stat-value,
  .stat-card-clickable .stat-label {
    color: inherit;
  }
  .stat-card-clickable .stat-label { color: var(--muted); }
  .stat-card-clickable:hover,
  .stat-card-clickable:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand);
    outline: none;
  }
  .stat-card-clickable:active {
    background: var(--surface);
    color: var(--text);
  }
  .referral-link-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .referral-link-row:last-child { border-bottom: none; }
  .referral-link-row .referral-link-title { font-weight: 600; }
  .referral-link-row .referral-link-count { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
  .waiting-card {
    border-color: var(--brand);
    border-width: 2px;
  }
  .waiting-section + .waiting-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .waiting-section h3 {
    margin: 0 0 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .waiting-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
  }
  .waiting-row:last-child { margin-bottom: 0; }
  .waiting-row .waiting-row-info { min-width: 0; }
  .waiting-row .waiting-row-title { font-weight: 600; }
  .waiting-row .waiting-row-context { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
  .waiting-row .waiting-row-actions {
    display: flex;
    gap: 8px;
    flex: none;
    margin-left: auto;
  }
  .waiting-row .waiting-row-actions .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    width: auto;
  }
  .waiting-row .waiting-row-actions .btn.secondary {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
  }
  .waiting-row .waiting-row-actions .btn.secondary:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: none;
  }
  .dashboard-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
  }
  .dashboard-cols .card { max-width: none; }

  .dashboard-network { margin-top: 20px; max-width: none; overflow: hidden; }
  .dashboard-network-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
  .dashboard-network-header h2 { margin-top:0; }
  .dashboard-network-scroll { overflow-x:auto; margin-top:12px; }
  .dashboard-network-svg { display:block; width:100%; min-width:680px; height:auto; min-height:320px; }
  .dashboard-network-flock { fill:color-mix(in srgb, var(--accent) 8%, transparent); stroke:var(--accent); stroke-width:2; }
  .dashboard-network-person { fill:var(--text); stroke:var(--surface); stroke-width:3; }
  .dashboard-network-flock-label, .dashboard-network-person-label { fill:var(--text); font-size:12px; }
  .dashboard-network-person-label { font-size:11px; }
  .dashboard-network a:hover .dashboard-network-flock { fill:var(--accent-strong, var(--accent)); }
  /* Upgrade prompt (#10). One component, three densities: a block that
     replaces a gated form, an inline strip above a metered feature, and the
     quiet past-the-gate note. See src/pages/upgrade-prompt.ts. */
  .upgrade-prompt {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    display: grid;
    gap: 12px;
  }
  /* `hidden` has to beat `display: grid`/`flex` -- the server renders every
     variant a page might need and reveals one once entitlements load. */
  .upgrade-prompt[hidden], .upgrade-prompt-active[hidden] { display: none; }
  .up-plans {
    justify-self: start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 999px;
    padding: 3px 9px;
  }
  .up-headline { margin: 0; font-size: 1.15rem; line-height: 1.35; }
  .up-body { margin: 0; color: var(--muted); font-size: 0.95rem; }
  .up-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .up-foot .btn { flex: none; }
  .up-price { font-size: 0.88rem; color: var(--muted); }
  .up-credit {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
  }
  .upgrade-prompt-block .up-credit {
    border-top: 1px solid var(--border);
    padding-top: 10px;
  }
  .upgrade-prompt-inline {
    background: var(--bg);
    color: var(--text);
    border-left: 3px solid var(--brand);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
  }
  .up-inline-text { margin: 0; font-size: 0.92rem; }
  .up-inline-text .up-credit { display: inline; }
  .upgrade-prompt-active {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
  }
  /* 375px: the CTA stops sharing a row with anything and spans the width,
     so it is never the squeezed half of a two-up. */
  @media (max-width: 520px) {
    .upgrade-prompt { padding: 16px; }
    .up-foot { align-items: stretch; flex-direction: column; gap: 10px; }
    .up-foot .btn, .upgrade-prompt-inline > .btn { width: 100%; text-align: center; }
    .upgrade-prompt-inline { align-items: stretch; }
  }
  /* Avatar (#29). A person is a coloured disc with their initials
     everywhere they appear -- connections, rosters, chat and requests.
     `flex: none` matters: these live in flex rows and grid cells that are
     allowed to shrink, and a squashed avatar is worse than no avatar. */
  .avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
    color: #fff;
    /* The disc itself can sit as low as 2.1:1 against the dark surface --
       fine for the initials (they are white on the disc, 5:1+ either way)
       but the circle's edge disappears. A hairline defines it without
       touching the measured palette. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  }
  .avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
  .avatar-c0 { background: var(--avatar-0); color: #fff; }
  .avatar-c1 { background: var(--avatar-1); color: #fff; }
  .avatar-c2 { background: var(--avatar-2); color: #fff; }
  .avatar-c3 { background: var(--avatar-3); color: #fff; }
  .avatar-c4 { background: var(--avatar-4); color: #fff; }
  .avatar-c5 { background: var(--avatar-5); color: #fff; }
  .avatar-c6 { background: var(--avatar-6); color: #fff; }
  .avatar-c7 { background: var(--avatar-7); color: #fff; }
  .avatar-c8 { background: var(--avatar-8); color: #fff; }
  .avatar-c9 { background: var(--avatar-9); color: #fff; }
  /* ---- People surfaces (#23, #24, #25) ----
     One row shape for a person in a list, shared by the connections list
     and the pending-request list. */
  /* Wider than the default .card: a person row is an avatar, a name, a
     provenance line and two actions, and 420px makes it fight itself. */
  .people-card { max-width: 720px; }
  .people-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  /* flex-basis, not width: the search field gives up space to the sort
     select rather than pushing it onto a second line. */
  .people-toolbar .people-search { flex: 1 1 180px; min-width: 0; }
  .people-toolbar .people-sort { width: auto; flex: none; }
  .people-toolbar input, .people-toolbar select { font-size: 0.9rem; padding: 7px 11px; }
  .people-toolbar select { padding-right: 32px; }
  /* minmax(0,1fr) is load-bearing: a grid column's default `auto` minimum
     is its content's min-content width, so without it the name column
     refuses to shrink, the actions squeeze it, and long names break
     mid-word ("Charlotte / Devereux- / Wilson"). */
  .person-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 8px;
  }
  .person-row + .person-row { border-top: 1px solid var(--border); }
  .person-row:hover { background: var(--bg); }
  .pending-requests { margin: 0 0 18px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
  .pending-requests h3 { margin: 0 0 8px; font-size: 1rem; }
  .person-id { min-width: 0; }
  .person-top { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
  .person-name {
    font-weight: 500;
    font-size: 0.95rem;
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .person-name-link { color: var(--text); text-decoration: none; }
  .person-name-link:hover { color: var(--brand); text-decoration: underline; }
  .person-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
  }
  .person-acts { display: flex; gap: 6px; align-items: center; flex: none; }
  .pending-requests-after { border-top: 1px solid var(--border); border-bottom: 0; padding-top: 12px; margin: 18px 0 0; padding-bottom: 0; }
  /* The shared-flock count. Someone you have crossed paths with five times
     is a different relationship from someone you met once, and nothing in
     the product said so before. Absent at one flock -- see the page script. */
  .flock-count {
    flex: none;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 999px;
    padding: 1px 7px;
    white-space: nowrap;
  }
  .btn.small { padding: 5px 11px; font-size: 0.82rem; }
  /* Quiet: present, clickable, and visibly not the thing to press. Used for
     Compatibility next to Message, and Decline next to Accept. */
  .btn.quiet {
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--border);
  }
  .btn.quiet:hover { background: var(--bg); color: var(--text); }
  /* 375px (#25). The fix is structural, not cosmetic: the actions leave the
     name's row entirely and sit under it, in the same grid column. On a
     phone, a name and two buttons cannot share a line -- that is what
     produced "Charlotte / Devereux- / Wilson", the name broken mid-word
     because the buttons took the width first.
     Dropping to two columns puts .person-acts on an implicit second row
     (grid-column: 2 keeps it under the name rather than under the avatar),
     so the name gets the full width and can wrap honestly instead of being
     squeezed or ellipsed. Applies to both kinds of person row -- a
     connection and a pending request -- because both are .person-row. */
  @media (max-width: 600px) {
    .person-row {
      grid-template-columns: 40px minmax(0, 1fr);
      align-items: start;
      gap: 11px;
      padding: 12px 4px;
    }
    /* Wraps rather than truncating: there is no third column competing for
       the space any more, so there is nothing to protect the name from. */
    .person-name {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      font-size: 1rem;
    }
    .person-meta { white-space: normal; }
    .person-acts {
      grid-column: 2;
      margin-top: 9px;
      flex-wrap: wrap;
    }
  }
  .list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    font-size: 0.875rem;
  }
  .list-row:last-child { margin-bottom: 0; }
  .list-row-link { color: inherit; text-decoration: none; }
  .list-row-link:hover { border-color: var(--accent); }
  .list-row code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .list-row a {
    flex: none;
    white-space: nowrap;
  }
  /* Four cards, not three plus a footnote (#13). minmax has to be small
     enough that all four fit across the 960px content column: at 240px
     they need 1020px, so auto-fit drops Platinum onto a second row and the
     equal treatment Free was promoted for is lost on exactly the widest
     screens. 196px + a 16px gap fits four with room to spare, and still
     wraps to two columns on a tablet and one at 375px. */
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 16px;
    margin-top: 32px;
    align-items: stretch;
  }
  .tier-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
  }
  .tier-card.featured {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
  }
  .tier-card.current-plan {
    border-color: var(--success);
    box-shadow: 0 0 0 1px var(--success);
  }
  .tier-card h3 { margin: 0 0 4px; font-size: 1.3rem; }
  .tier-current {
    align-self: flex-start;
    border: 1px solid var(--success);
    border-radius: 999px;
    color: var(--success);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 8px;
  }
  .tier-price { font-size: 2rem; font-weight: 700; margin: 12px 0 4px; }
  .tier-price span { font-size: 0.95rem; font-weight: 400; color: var(--muted); }
  .tier-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .tier-features li {
    color: var(--text);
    font-size: 0.92rem;
    padding-left: 22px;
    position: relative;
  }
  .tier-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 700;
  }
  .tier-features li.tier-includes {
    padding-left: 0;
    color: var(--muted);
    font-weight: 600;
  }
  .tier-features li.tier-includes::before { content: none; }
  .billing-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
  }
  .toggle-label {
    font-size: 0.95rem;
    color: var(--muted);
  }
  .toggle-label[data-active="true"] {
    color: var(--text);
    font-weight: 600;
  }
  .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
  }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .switch-track {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border);
    border-radius: 999px;
    transition: background 0.15s;
  }
  .switch-track::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.15s;
  }
  .switch input:checked + .switch-track {
    background: var(--brand);
  }
  .switch input:checked + .switch-track::before {
    transform: translateX(20px);
  }
  .tier-list-price {
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: line-through;
    margin-top: -2px;
  }
  .tier-founding-badge {
    font-size: 0.78rem;
    color: var(--accent-strong, var(--brand));
    font-weight: 600;
    margin-top: 2px;
  }
  .tier-savings {
    font-size: 0.82rem;
    color: var(--success);
    font-weight: 600;
    margin-top: -6px;
  }
  .tier-trial {
    font-size: 0.82rem;
    color: var(--brand);
    font-weight: 600;
    margin-top: 4px;
  }
  .coupon-row {
    margin-top: 28px;
    max-width: 320px;
  }
  .coupon-row label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .coupon-row input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
  }
  .coupon-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 8px;
  }
  .chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 4px 12px;
  }
  .bubble-row {
    display: flex;
    /* Room for the sender avatar (#29), bottom-aligned with the last line
       of the bubble so a long message doesn't leave it floating. */
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 8px;
  }
  .bubble-row.mine {
    justify-content: flex-end;
  }
  /* A message grouped under the one above it (#26): same sender, within
     GROUP_GAP_MS. It drops its name and avatar, so tighten the space to read
     as one continued turn rather than a new one. */
  .bubble-row.grouped {
    margin-bottom: 2px;
  }
  /* Holds the avatar's width on a grouped row so the bubble stays aligned
     with the headed message above it. Matches .avatar-sm. */
  .avatar-spacer {
    flex: none;
    width: 32px;
  }
  /* The flex item that actually sizes itself against the row's real
     available width -- .bubble is just a block filling it. Percentage
     max-width doesn't resolve sanely against an unstyled wrapper whose own
     width is shrink-to-fit from that same bubble's content (circular), so
     short messages were clamping to less than their own text needed and
     wrapping early. min-width:0 lets it shrink below content size when the
     row itself is narrow, same as any flex item. */
  .bubble-col {
    max-width: 75%;
    min-width: 0;
  }
  .bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.4;
    word-wrap: break-word;
  }
  .bubble-row:not(.mine) .bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
  }
  .bubble-row.mine .bubble {
    background: var(--brand);
    color: var(--on-brand);
    border-bottom-right-radius: 4px;
  }
  .bubble-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
  }
  /* Hidden until the row is hovered/focused, so the thread doesn't get
     cluttered with six emoji buttons on every single message at rest. Only
     rendered for messages that aren't the viewer's own -- reacting to
     yourself doesn't make sense, so there's nothing to show on "mine" rows. */
  .quick-reactions {
    position: absolute;
    bottom: -34px;
    right: -10px;
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 5;
  }
  .bubble-row:hover .quick-reactions,
  .quick-reactions:focus-within {
    opacity: 1;
    pointer-events: auto;
  }
  .quick-reaction-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
  }
  .quick-reaction-btn:hover {
    background: var(--bg);
    transform: scale(1.15);
  }
  .bubble-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }
  .reaction-pill {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 0.78rem;
    cursor: pointer;
  }
  .reaction-pill.mine {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 15%, var(--surface));
  }
  .bubble-time {
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 3px;
  }
  .bubble-row.mine .bubble-time {
    text-align: right;
  }
  .sender-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .sender-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
  }
  .sender-name-row .sender-name {
    margin-bottom: 0;
  }
  .mute-sender-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .mute-sender-btn svg {
    width: 12px;
    height: 12px;
  }
  .sender-name-row:hover .mute-sender-btn,
  .mute-sender-btn:focus-visible {
    opacity: 1;
  }
  .mute-sender-btn:hover {
    color: var(--text);
  }
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
  }
  .icon-btn:hover {
    background: var(--surface);
    color: var(--text);
  }
  .icon-btn.danger:hover {
    background: rgba(220,38,38,0.1);
    color: var(--danger);
  }
  .icon-btn svg {
    width: 15px;
    height: 15px;
  }
  .chat-composer {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
  }
  .chat-composer input,
  .chat-composer textarea {
    flex: 1;
    /* Without this a flex item's min-width defaults to its intrinsic content
       width, so the empty textarea's cols-based sizing fought the flex
       layout in narrow panels instead of shrinking to fit. */
    min-width: 0;
  }
  /* Grows with the draft (JS sets height inline) up to this cap, then
     scrolls internally rather than pushing the rest of the page around. */
  .chat-composer textarea {
    box-sizing: border-box;
    resize: none;
    min-height: 38px;
    max-height: 160px;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: inherit;
  }
  .chat-composer button {
    flex-shrink: 0;
    align-self: flex-end;
  }
  .hero {
    padding: 56px 0 40px;
    text-align: left;
  }
  .hero h1 {
    font-size: 2.75rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-width: 780px;
  }
  .hero .lede { font-size: 1.15rem; max-width: 620px; }
  .eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 14px;
  }
  .value-section {
    margin-top: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
    gap: 40px;
    align-items: center;
  }
  @media (max-width: 700px) {
    .value-section {
      grid-template-columns: 1fr;
    }
  }
  .value-section h2 { font-size: 1.9rem; letter-spacing: -0.01em; }
  .value-section p { color: var(--muted); font-size: 1.02rem; }
  .iceberg {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
  }
  .iceberg-visual {
    display: flex;
    flex-direction: column;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
  }
  .iceberg-tip {
    flex: 0 0 10%;
    background: rgba(79, 70, 229, 0.3);
  }
  .iceberg-body {
    flex: 1 1 auto;
    background: var(--brand);
  }
  .iceberg-waterline {
    height: 0;
    border-top: 2px dashed rgba(255,255,255,0.6);
  }
  .iceberg-legend {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .iceberg-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .iceberg-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .iceberg-swatch.tip { background: rgba(79, 70, 229, 0.3); }
  .iceberg-swatch.body { background: var(--brand); }
  .iceberg-pct {
    font-weight: 700;
    font-size: 0.95rem;
  }
  .iceberg-label {
    font-size: 0.9rem;
    color: var(--muted);
  }
  .section-heading {
    margin-top: 72px;
    max-width: 640px;
  }
  .section-heading h2 { font-size: 1.9rem; letter-spacing: -0.01em; margin-bottom: 10px; }
  .section-heading p { color: var(--muted); font-size: 1.02rem; }
  .feature-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
  }
  .feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
  }
  .feature-card .icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.12);
    color: var(--brand);
    font-weight: 700;
    margin-bottom: 14px;
  }
  .feature-card h3 { margin: 0 0 8px; font-size: 1.1rem; }
  .feature-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
  .pull-quote {
    margin-top: 56px;
    padding: 32px 36px;
    border-left: 4px solid var(--brand);
    background: var(--surface);
    border-radius: 0 14px 14px 0;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .cta-band {
    /* contrast-skip: the gradient below never renders in dark mode — the
       dark media query overrides this background with a flat var(--brand),
       which var(--on-brand) clears at 6.26:1. The checker cannot see that. */
    margin-top: 72px;
    padding: 44px 40px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: var(--on-brand);
    text-align: center;
  }
  .cta-band h2 { color: var(--on-brand); margin-bottom: 8px; }
  .cta-band p { color: var(--on-brand); opacity: 0.85; margin: 0 auto 24px; max-width: 480px; }
  .cta-band .cta-row { justify-content: center; }
  .cta-band .btn { background: #fff; color: var(--brand-ink); }
  .cta-band .btn:hover { background: rgba(255,255,255,0.9); }
  .cta-band .btn.secondary { background: transparent; border-color: rgba(255,255,255,0.5); color: var(--on-brand); }
  .cta-band .btn.secondary:hover { background: rgba(255,255,255,0.12); }
  @media (prefers-color-scheme: dark) {
    /* In dark mode --brand-dark (#6366f1) sits between --brand and true
       dark ink -- neither var(--on-brand) nor white clears 4.5:1 against
       it (4.18:1 / 4.47:1), so the two-stop gradient isn't safe to put
       text directly on here. Flatten to the --brand end only, which
       var(--on-brand) already clears at 6.25:1. */
    .cta-band {
      background: var(--brand);
    }
  }
  .steps { margin-top: 28px; }
  .faq {
    margin-top: 48px;
  }
  .faq-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px 20px;
  }
  .faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: "+";
    color: var(--muted);
    font-weight: 400;
    font-size: 1.2rem;
    flex-shrink: 0;
  }
  .faq-item[open] summary::after { content: "−"; }
  .faq-item p {
    margin: 0 0 16px;
    color: var(--muted);
  }
  .messages-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(420px, 1fr) minmax(180px, 220px);
    gap: 0;
    height: 100%;
    min-height: 420px;
    min-width: 0;
  }
  .mobile-flock-nav { display: none; }
  /* /meeting-chats used to widen main to 1400px here (and /messages kept an
     inline 900px card cap) so each page ran a different width and the
     column visibly resized when navigating between them (#6). Both now rely
     on the single main max-width above; .meeting-chats-card still needs to
     opt out of .card's 420px default so the 3-pane layout can use the full
     column. */
  .meeting-chats-card {
    display: flex;
    flex-direction: column;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding: 24px 28px;
  }
  .meeting-chats-card > h2 { margin-bottom: 8px; }
  .meeting-chats-card > .hint { margin: 0 0 14px; }
  .contacts-pane {
    border-right: 1px solid var(--border);
    padding-right: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .contacts-pane input {
    margin-bottom: 8px;
  }
  .contact-item {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .contact-item:hover { background: var(--bg); }
  .contact-item.active {
    background: var(--bg);
    border-color: var(--border);
  }
  .contact-item { display: flex; align-items: center; gap: 10px; }
  .contact-item .contact-body { min-width: 0; flex: 1 1 auto; }
  .contact-item .name {
    font-weight: 500;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .contact-item .preview {
    color: var(--muted);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .thread-pane {
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }
  .thread-pane .chat-thread { flex: 1; min-height: 0; max-height: none; }
  .members-pane {
    border-left: 1px solid var(--border);
    padding-left: 16px;
    overflow-y: auto;
  }
  .members-pane h4 { margin: 0 0 10px; font-size: 0.9rem; }
  .member-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; min-width: 0; }
  .member-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
  .member-connect, .member-remove { width: 24px; height: 24px; padding: 0; border-radius: 6px; flex-shrink: 0; font-size: 1.1rem; line-height: 1; }
  .member-remove { background: var(--surface); color: var(--danger); border: 1px solid var(--border); }
  .member-connected { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; line-height: 1; }
  .thread-empty {
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 20px;
  }
  @media (min-width: 900px) {
    nav {
      transform: none;
    }
    .nav-toggle, .nav-backdrop {
      display: none;
    }
    /* Reserve the sidebar's 260px on body itself, rather than a margin-left
       on header/main/footer individually. That makes body's own content box
       the "space right of the sidebar" -- so main's max-width + margin:0
       auto (above) centres inside that space instead of sitting flush
       against the sidebar with all the leftover width pushed to the right
       (the #6 bug: a large dead gutter on wide screens, and a page width
       that visibly jumped depending on whether a page opted out of the
       960px cap). header and footer keep spanning the full remaining width. */
    body {
      padding-left: 260px;
    }
  }
  @media (min-width: 701px) and (max-width: 1100px) {
    body.meeting-chats-page { overflow: hidden; }
    body.meeting-chats-page main { height: calc(100vh - 65px); min-height: 0; overflow: hidden; }
    body.meeting-chats-page footer { display: none; }
    .messages-layout {
      grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) 120px;
      height: 100%;
    }
    .members-pane {
      grid-column: 1 / -1;
      height: 120px;
      padding: 12px 0 0;
      border-left: 0;
      border-top: 1px solid var(--border);
    }
  }
  @media (max-width: 700px) {
    body.meeting-chats-page { overflow: hidden; }
    body.meeting-chats-page main { height: calc(100vh - 57px); min-height: 0; padding: 12px; overflow: hidden; }
    body.meeting-chats-page footer { display: none; }
    .meeting-chats-card { padding: 16px 12px 12px; }
    .meeting-chats-card > h2 { font-size: 1.45rem; }
    .meeting-chats-card > .hint { font-size: 0.84rem; line-height: 1.45; margin-bottom: 10px; }
    .mobile-flock-nav { display: flex; gap: 6px; margin: 0 0 10px; padding: 3px; background: var(--bg); border-radius: 8px; }
    .mobile-flock-nav button { flex: 1; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
    .mobile-flock-nav button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
    .messages-layout { display: block; height: 100%; min-height: 0; }
    .contacts-pane, .thread-pane, .members-pane { display: none; height: 100%; min-height: 0; padding: 0; border: 0; }
    body[data-mobile-flock-view="chat-list"] .contacts-pane,
    body[data-mobile-flock-view="thread"] .thread-pane,
    body[data-mobile-flock-view="members"] .members-pane { display: flex; }
    .contacts-pane { overflow-y: auto; }
    .contact-item { padding: 12px 10px; }
    .thread-pane { flex-direction: column; }
    .thread-pane .thread-title-row { flex-shrink: 0; padding: 4px 0 8px; }
    .thread-title-row h3 { font-size: 1rem; line-height: 1.25; max-width: calc(100% - 104px); }
    .thread-pane .chat-thread { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
    .chat-composer { flex-shrink: 0; padding-top: 8px; }
    .members-pane { overflow-y: auto; }
    .members-pane h4 { margin: 4px 0 12px; }
  }

  /* Custom App Dialog System */
  .custom-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }
  .custom-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .custom-dialog p {
    margin: 0;
    font-size: 0.95rem;
  }
  .custom-dialog input {
    width: 100%;
  }
  .custom-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

.person-popover {
  position: absolute;
  z-index: 10001;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px 12px;
  font-size: 0.85rem;
  max-width: 240px;
  pointer-events: auto;
}
.person-popover-row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-popover-row + .person-popover-row {
  margin-top: 4px;
}

  /* =====================================================================
     DESIGN SYSTEM v2 — 2026-09 redesign
     ---------------------------------------------------------------------
     Appended rather than interleaved so it wins on source order at equal
     specificity: the rules above stay the working baseline for every app
     screen, and this block is the single place the new visual language
     lives. Marketing chrome (.mkt-*) is scoped to body.marketing, so
     nothing here can leak into the signed-in app shell.
     ===================================================================== */

  /* --- Typography ----------------------------------------------------- */
  h1, h2, h3 { letter-spacing: -0.02em; }
  h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); line-height: 1.1; }
  h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); line-height: 1.18; }
  .display {
    font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin: 0;
  }
  .text-accent { color: var(--accent-strong); }
  .measure { max-width: 62ch; }

  /* --- Buttons -------------------------------------------------------- */
  button, .btn {
    border-radius: var(--r-pill);
    padding: 10px 20px;
    font-weight: 600;
    line-height: 1.35;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .btn:hover, button:hover { transform: translateY(-1px); }
  .btn:active, button:active { transform: translateY(0); }
  .btn.large {
    padding: 14px 28px;
    font-size: 1.02rem;
    box-shadow: var(--shadow-brand);
  }
  .btn.accent {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 6px 18px rgba(245, 165, 36, 0.30);
  }
  .btn.accent:hover { background: #ffb63f; }
  /* Ghost button for use on an ink band, where --border is invisible. */
  .btn.ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink-text);
    border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .btn.ghost:hover { background: rgba(255, 255, 255, 0.14); }
  .btn.small { border-radius: var(--r-pill); }
  .cta-row { flex-wrap: wrap; align-items: center; }

  /* --- Cards & surfaces ----------------------------------------------- */
  .card { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
  .surface-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
  }

  /* =====================================================================
     MARKETING CHROME
     ===================================================================== */
  body.marketing main {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 900px) {
    /* The signed-in shell reserves 260px for the fixed sidebar on body; the
       marketing pages render a top bar instead, so they take the full width. */
    body.marketing { padding-left: 0; }
  }

  .mkt-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 0;
    display: block;
  }
  .mkt-header .wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 66px;
  }
  .mkt-header .brand { display: inline-flex; align-items: center; margin: 0; }
  .mkt-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }
  .mkt-nav a {
    color: var(--muted);
    font-size: 0.94rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    text-decoration: none;
  }
  .mkt-nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
  .mkt-nav a.btn { color: var(--on-brand); padding: 9px 18px; }
  .mkt-nav a.btn:hover { color: var(--on-brand); background: var(--brand-hover); }
  .mkt-nav .mkt-nav-sep { width: 1px; height: 22px; background: var(--border); margin: 0 8px; }
  .mkt-menu { position: relative; margin-left: auto; display: none; }
  .mkt-menu > summary {
    list-style: none;
    cursor: pointer;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
  }
  .mkt-menu > summary::-webkit-details-marker { display: none; }
  .mkt-menu[open] > summary { background: var(--surface); }
  .mkt-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(78vw, 260px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mkt-menu-panel a {
    padding: 11px 12px;
    border-radius: var(--r-sm);
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
  }
  .mkt-menu-panel a:hover { background: var(--bg); text-decoration: none; }
  .mkt-menu-panel a.btn { color: var(--on-brand); text-align: center; margin-top: 6px; }
  @media (max-width: 900px) {
    .mkt-nav { display: none; }
    .mkt-menu { display: block; }
  }

  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
  }

  /* A section is the unit of vertical rhythm on the marketing pages. */
  .mkt-section { padding: 84px 0; }
  .mkt-section.tight { padding: 56px 0; }
  .mkt-section.alt { background: var(--surface); border-block: 1px solid var(--border); }
  .mkt-section.ink {
    background:
      radial-gradient(900px 520px at 78% -10%, rgba(245, 165, 36, 0.13), transparent 62%),
      radial-gradient(760px 480px at 8% 108%, rgba(99, 102, 241, 0.22), transparent 60%),
      var(--ink);
    color: var(--ink-text);
  }
  .mkt-section.ink h1, .mkt-section.ink h2, .mkt-section.ink h3 { color: var(--ink-text); }
  .mkt-section.ink p, .mkt-section.ink li { color: var(--ink-muted); }
  .mkt-section.ink .lede { color: var(--ink-muted); }
  .mkt-section.ink .eyebrow { color: var(--accent); }
  .mkt-section.ink strong { color: var(--ink-text); font-weight: 600; }
  .mkt-section.ink a:not(.btn) { color: var(--accent); }

  .section-head { max-width: 66ch; margin: 0 0 40px; }
  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .section-head h2 { margin: 0 0 12px; }
  .section-head p { color: var(--muted); font-size: 1.06rem; margin: 0; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
  }
  .eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
  }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mkt-section.ink .pill,
  .mkt-hero .pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--ink-text);
  }
  .pill .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    flex: none;
  }

  /* =====================================================================
     HERO
     ===================================================================== */
  .mkt-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    text-align: left;
    color: var(--ink-text);
    background:
      radial-gradient(1100px 640px at 82% -6%, rgba(245, 165, 36, 0.16), transparent 60%),
      radial-gradient(900px 620px at 2% 104%, rgba(99, 102, 241, 0.30), transparent 58%),
      linear-gradient(180deg, #12142033, transparent 40%),
      var(--ink);
  }
  .mkt-hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: center;
    padding-block: 72px 84px;
  }
  .mkt-hero h1 {
    color: var(--ink-text);
    margin: 0 0 20px;
  }
  .mkt-hero .tagline {
    display: block;
    font-size: clamp(2.5rem, 1.3rem + 4.6vw, 4rem);
    line-height: 1.0;
    letter-spacing: -0.038em;
    font-weight: 700;
  }
  .mkt-hero .tagline .up {
    color: var(--accent);
    position: relative;
    white-space: nowrap;
  }
  .mkt-hero .subhead {
    display: block;
    margin-top: 18px;
    font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
    line-height: 1.28;
    letter-spacing: -0.015em;
    font-weight: 500;
    color: var(--ink-text);
  }
  .mkt-hero .lede {
    color: var(--ink-muted);
    font-size: 1.06rem;
    max-width: 56ch;
    margin: 0 0 26px;
  }
  .mkt-hero .cta-row { margin-top: 4px; }
  .trust-line {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 0.86rem;
    color: var(--ink-muted);
  }
  .trust-line span { display: inline-flex; align-items: center; gap: 7px; }
  .trust-line svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

  /* The two-audience promise, the single most important thing above the
     fold: this product is free value for attendees, not only for hosts. */
  .hero-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin: 30px 0 4px;
  }
  .hero-split .side {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-md);
    padding: 16px 18px;
  }
  .hero-split .side .who {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
  }
  .hero-split .side p { margin: 0; font-size: 0.95rem; color: var(--ink-muted); line-height: 1.45; }
  .hero-split .side p strong { color: var(--ink-text); font-weight: 600; }

  .hero-art { position: relative; }
  .hero-art svg { width: 100%; height: auto; display: block; overflow: visible; }
  @media (max-width: 940px) {
    .mkt-hero .wrap {
      grid-template-columns: 1fr;
      gap: 40px;
      padding-block: 52px 64px;
    }
    .hero-art { order: 2; max-width: 520px; }
  }

  /* Constellation animation: edges draw in, then nodes settle. Purely
     decorative, so it is switched off wholesale under reduced-motion. */
  .constellation .edge {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: fu-draw 1.1s ease-out forwards;
  }
  .constellation .node { opacity: 0; animation: fu-pop 0.5s cubic-bezier(.2,.9,.3,1.3) forwards; }
  .constellation .float { animation: fu-float 6s ease-in-out infinite; }
  @keyframes fu-draw { to { stroke-dashoffset: 0; } }
  @keyframes fu-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
  @keyframes fu-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @media (prefers-reduced-motion: reduce) {
    .constellation .edge { stroke-dashoffset: 0; animation: none; }
    .constellation .node { opacity: 1; animation: none; }
    .constellation .float { animation: none; }
    .btn:hover, button:hover { transform: none; }
  }

  /* =====================================================================
     STEP CARDS / FEATURE GRIDS
     ===================================================================== */
  .step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 22px;
  }
  .step-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .step-card .step-n {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent-strong);
  }
  .step-card .step-n b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .step-card h3 { margin: 0; font-size: 1.14rem; }
  .step-card p { margin: 0; color: var(--muted); font-size: 0.96rem; }
  .step-art {
    border-radius: var(--r-md);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 16px;
    margin-top: auto;
  }
  .step-art svg { width: 100%; height: auto; display: block; }

  .feature-grid { margin-top: 0; gap: 22px; }
  .feature-card {
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .feature-card .icon-circle {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent-strong);
  }
  .feature-card .icon-circle svg { width: 22px; height: 22px; }
  .mkt-section.ink .feature-card {
    background: var(--ink-2);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: none;
  }
  .mkt-section.ink .feature-card .icon-circle {
    background: rgba(245, 165, 36, 0.14);
    color: var(--accent);
  }

  /* =====================================================================
     WITHOUT / WITH COMPARISON
     ===================================================================== */
  .compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  .compare-col {
    border-radius: var(--r-lg);
    padding: 26px;
    border: 1px solid var(--border);
    background: var(--surface);
  }
  .compare-col h3 {
    margin: 0 0 16px;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .compare-col li {
    display: flex;
    gap: 11px;
    font-size: 0.97rem;
    color: var(--muted);
    line-height: 1.45;
  }
  .compare-col li svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
  .compare-col.without { background: var(--bg); }
  .compare-col.without li svg { color: var(--danger); }
  .compare-col.with {
    border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
    box-shadow: var(--shadow-md);
  }
  .compare-col.with li { color: var(--text); }
  .compare-col.with li svg { color: var(--success); }

  /* =====================================================================
     FLOCK REPORT MOCK
     ===================================================================== */
  .report-mock {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .mkt-section.ink .report-mock { background: var(--ink-2); border-color: rgba(255, 255, 255, 0.10); }
  .report-mock .report-mock-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    font-size: 0.9rem;
    font-weight: 600;
  }
  .mkt-section.ink .report-mock .report-mock-bar {
    background: var(--ink-3);
    border-bottom-color: rgba(255, 255, 255, 0.10);
    color: var(--ink-text);
  }
  .report-mock .report-mock-bar .meta { margin-left: auto; font-weight: 500; color: var(--muted); font-size: 0.82rem; }
  .mkt-section.ink .report-mock .report-mock-bar .meta { color: var(--ink-muted); }
  .report-mock .report-mock-body { padding: 22px 20px 24px; }
  .report-mock h4 {
    margin: 0 0 12px;
    font-size: 0.74rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mkt-section.ink .report-mock h4 { color: var(--ink-muted); }
  .report-mock h4 + * { margin-top: 0; }
  .report-mock .facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
  }
  .report-mock .report-fact {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 15px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .mkt-section.ink .report-mock .report-fact {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
    color: var(--ink-muted);
  }
  .report-mock .fact-count {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--brand);
  }
  .mkt-section.ink .report-mock .fact-count { color: var(--accent); }
  .report-mock .fact-text { font-size: 0.84rem; line-height: 1.42; }
  .report-mock .report-fact.no-count { justify-content: center; }
  .report-mock .person-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 13px 15px;
    margin-bottom: 10px;
    background: var(--bg);
  }
  .mkt-section.ink .report-mock .person-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .report-mock .person-row .who {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    flex: none;
  }
  .report-mock .person-row .said { font-size: 0.93rem; line-height: 1.45; }
  .report-mock .person-row .said .match {
    display: block;
    margin-top: 5px;
    font-size: 0.83rem;
    color: var(--accent-strong);
  }
  .mkt-section.ink .report-mock .person-row .said { color: var(--ink-muted); }
  .mkt-section.ink .report-mock .person-row .said .match { color: var(--accent); }
  .report-mock .report-foot {
    margin: 4px 0 0;
    font-size: 0.86rem;
    color: var(--muted);
  }
  .mkt-section.ink .report-mock .report-foot { color: var(--ink-muted); }
  .report-mock .report-links { margin: 0; font-size: 0.93rem; line-height: 1.6; }
  .report-mock .report-link {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }
  .mkt-section.ink .report-mock .report-link { color: var(--accent); }

  /* =====================================================================
     ICEBERG (rebuilt as an SVG figure)
     ===================================================================== */
  .split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 52px;
    align-items: center;
  }
  .split .figure svg { width: 100%; height: auto; display: block; }
  .stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 26px;
  }
  .stat-row .stat b {
    display: block;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--brand);
  }
  .mkt-section.ink .stat-row .stat b { color: var(--accent); }
  .stat-row .stat span { font-size: 0.9rem; color: var(--muted); }
  .mkt-section.ink .stat-row .stat span { color: var(--ink-muted); }

  /* =====================================================================
     BLOG
     ===================================================================== */
  .blog-hero .wrap {
    grid-template-columns: 1fr;
    max-width: 920px;
  }
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
  }
  .blog-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 26px;
  }
  .blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 14px;
  }
  .blog-meta span {
    color: var(--accent-strong);
  }
  .blog-card h2 {
    font-size: 1.35rem;
    margin: 0 0 10px;
  }
  .blog-card h2 a {
    color: var(--text);
    text-decoration: none;
  }
  .blog-card h2 a:hover {
    color: var(--brand);
  }
  .blog-card p {
    color: var(--muted);
    margin: 0 0 18px;
  }
  .blog-read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }
  .blog-article .wrap {
    max-width: 780px;
  }
  .blog-article h1 {
    font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);
    line-height: 1.04;
    margin: 0 0 18px;
  }
  .blog-article .lede {
    color: var(--muted);
    font-size: 1.18rem;
    margin-bottom: 28px;
  }
  .blog-article p {
    font-size: 1.04rem;
    line-height: 1.72;
  }
  .blog-back {
    display: inline-block;
    margin-bottom: 22px;
    font-weight: 600;
  }

  /* =====================================================================
     LOGO / PLATFORM STRIP
     ===================================================================== */
  .chip-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--muted);
  }
  .mkt-section.ink .chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ink-muted);
  }
  .chip .glyph { width: 8px; height: 8px; border-radius: 2px; background: var(--brand); opacity: 0.75; flex: none; }
  .mkt-section.ink .chip .glyph { background: var(--accent); }

  /* =====================================================================
     REFERRAL FLYWHEEL
     ===================================================================== */
  .flywheel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
  }
  .payout-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 1.9rem;
    color: var(--success);
  }

  /* =====================================================================
     PULL QUOTE / CTA BAND / FAQ
     ===================================================================== */
  .pull-quote {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    text-align: center;
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.025em;
    max-width: 22ch;
    margin-inline: auto;
  }
  .pull-quote-attrib {
    margin-top: 18px;
    text-align: center;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .mkt-section.ink .pull-quote-attrib { color: var(--ink-muted); }

  .cta-band {
    margin-top: 0;
    padding: 64px 40px;
    border-radius: var(--r-xl);
    text-align: center;
    /* contrast-skip: text colour here comes from .mkt-section.ink's --ink-text
       (16.9:1 on --ink); the gradient stops below are translucent overlays on
       that same ink, which this lint cannot model. */
    background:
      radial-gradient(700px 380px at 20% 0%, rgba(245, 165, 36, 0.20), transparent 62%),
      radial-gradient(700px 400px at 88% 100%, rgba(99, 102, 241, 0.34), transparent 62%),
      var(--ink-2);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--ink-text);
  }
  .cta-band h2 { color: var(--ink-text); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
  .cta-band p { color: var(--ink-muted); opacity: 1; max-width: 52ch; font-size: 1.05rem; }
  .cta-band .btn { background: var(--accent); color: var(--on-accent); }
  .cta-band .btn:hover { background: #ffb63f; }
  .cta-band .btn.secondary,
  .cta-band .btn.ghost {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--ink-text);
  }
  .cta-band .btn.secondary:hover, .cta-band .btn.ghost:hover { background: rgba(255, 255, 255, 0.15); }
  .cta-band .trust-line { justify-content: center; }
  @media (prefers-color-scheme: dark) {
    /* The v1 rule flattened this band to a solid --brand in dark mode. The
       band is now fixed-ink in both themes, so that override is undone. */
    .cta-band {
      /* contrast-skip: see the base rule above — same fixed ink surface. */
      background:
        radial-gradient(700px 380px at 20% 0%, rgba(245, 165, 36, 0.20), transparent 62%),
        radial-gradient(700px 400px at 88% 100%, rgba(99, 102, 241, 0.34), transparent 62%),
        var(--ink-2);
    }
  }

  .faq { margin-top: 0; }
  .faq-list { max-width: 820px; margin-inline: auto; gap: 12px; }
  .faq-item {
    border-radius: var(--r-md);
    padding: 2px 22px;
    box-shadow: var(--shadow-sm);
  }
  .faq-item summary { padding: 18px 0; font-size: 1.02rem; }
  .faq-item summary::after {
    content: "";
    width: 11px; height: 11px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
  }
  .faq-item[open] summary::after { content: ""; transform: rotate(-135deg) translate(-3px, -3px); }
  .faq-item p { font-size: 0.97rem; line-height: 1.6; }

  /* =====================================================================
     MARKETING FOOTER
     ===================================================================== */
  .mkt-footer {
    background: var(--ink);
    color: var(--ink-muted);
    text-align: left;
    padding: 56px 0 40px;
    font-size: 0.92rem;
  }
  .mkt-footer .wrap {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 36px 32px;
  }
  @media (max-width: 860px) {
    .mkt-footer .wrap { grid-template-columns: 1fr 1fr; }
    .mkt-footer .wrap > div:first-child { grid-column: 1 / -1; }
  }
  .mkt-footer .brand { color: var(--ink-text); font-size: 1.1rem; }
  .mkt-footer .blurb { margin: 12px 0 0; max-width: 34ch; color: var(--ink-muted); font-size: 0.92rem; }
  .mkt-footer h5 {
    margin: 0 0 12px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-text);
  }
  .mkt-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .mkt-footer a { color: var(--ink-muted); text-decoration: none; }
  .mkt-footer a:hover { color: var(--accent); text-decoration: underline; }
  .mkt-footer .colophon {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding-top: 22px;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    font-size: 0.84rem;
  }

  /* =====================================================================
     PROMO BANNER (marketing variant)
     ===================================================================== */
  /* On a marketing page the banner sits between the top bar and the ink hero,
     where a flat green block reads as an error toast. It becomes a slim ink
     strip with the amber accent instead, so it belongs to the page. */
  body.marketing .promo-banner {
    margin: 0;
    border-radius: 0;
    /* contrast-skip: --ink-text on --ink is 16.9:1; the lint sees only the
       first background declaration and cannot resolve the layered gradient. */
    background:
      linear-gradient(90deg, rgba(245, 165, 36, 0.16), rgba(99, 102, 241, 0.16)),
      var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  body.marketing .promo-banner a {
    color: var(--ink-text);
    padding: 11px 20px;
    font-size: 0.9rem;
    border-radius: 0;
  }
  body.marketing .promo-banner a:hover { background: rgba(255, 255, 255, 0.06); }
  body.marketing .promo-banner strong { color: var(--accent); font-weight: 700; }

  /* =====================================================================
     SIGNED-IN SHELL POLISH — the same language, applied inside.
     ===================================================================== */
  nav a:not(.brand):not(.btn), nav button.nav-authed-only {
    border-radius: var(--r-sm);
    font-weight: 500;
  }
  nav a:not(.brand):not(.btn):hover, nav button.nav-authed-only:hover {
    background: color-mix(in srgb, var(--brand) 9%, transparent);
  }
  nav a.btn { justify-content: center; }
  .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
  }
  .page-head h1, .page-head h2 { margin: 0; }
  .page-head p { margin: 6px 0 0; color: var(--muted); }

  /* --- Homepage-specific pieces --------------------------------------- */
  .strip-label {
    text-align: center;
    margin: 0 0 20px;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .strip-foot {
    text-align: center;
    margin: 22px auto 0;
    max-width: 58ch;
    font-size: 0.92rem;
    color: var(--muted);
  }
  .figure-note {
    margin: 16px 0 0;
    font-size: 0.86rem;
    color: var(--muted);
    max-width: 46ch;
  }
  .mkt-section.ink .figure-note { color: var(--ink-muted); }

  /* The hero's report preview overlaps the bottom of the constellation, so
     the two read as one picture: the flock, and what the flock hands back. */
  .hero-art .report-peek {
    margin-top: -34px;
    margin-left: 6%;
    margin-right: -2%;
    position: relative;
    z-index: 1;
  }
  .hero-art .report-mock {
    background: var(--ink-2);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .hero-art .report-mock .report-mock-bar {
    background: var(--ink-3);
    border-bottom-color: rgba(255, 255, 255, 0.10);
    color: var(--ink-text);
  }
  .hero-art .report-mock .report-mock-bar .meta { color: var(--ink-muted); }
  .hero-art .report-mock h4 { color: var(--ink-muted); }
  .hero-art .report-mock .person-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
  }
  .hero-art .report-mock .person-row .said { color: var(--ink-muted); }
  .hero-art .report-mock .person-row .said strong { color: var(--ink-text); }
  .hero-art .report-mock .person-row .said .match { color: var(--accent); }
  .hero-art .report-mock .report-foot { color: var(--ink-muted); }
  .hero-art .report-mock .report-mock-body { padding: 18px 16px 18px; }
  @media (max-width: 560px) {
    .hero-art .report-peek { margin-left: 0; margin-right: 0; }
  }

  /* An ink band's .split figure has no card of its own; give the iceberg and
     the report room to breathe against the dark. */
  .split .figure { min-width: 0; }
  .split > div { min-width: 0; }

  /* --- /samples ------------------------------------------------------- */
  .sample-card h4 {
    margin: 26px 0 10px;
    font-size: 0.74rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent-strong);
  }
  .sample-card > p:first-child { margin-top: 0; }
  .sample-card ul { margin: 0; padding-left: 20px; color: var(--muted); }
  .sample-card li { margin: 6px 0; }
  .sample-card .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .sample-card .links .btn[aria-disabled] { opacity: 0.55; pointer-events: none; }

  /* =====================================================================
     AUTH PAGES
     ===================================================================== */
  .auth-page {
    padding: 56px 0 88px;
    background:
      radial-gradient(720px 420px at 88% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 62%),
      radial-gradient(640px 400px at -5% 105%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
  }
  .auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
  }
  .auth-grid.solo { grid-template-columns: minmax(0, 460px); justify-content: center; }
  .auth-grid .card { max-width: none; width: 100%; padding: 32px 30px; box-shadow: var(--shadow-md); }
  .auth-grid .card h2 { font-size: 1.5rem; }
  .auth-grid .card .links { font-size: 0.9rem; line-height: 2; margin-bottom: 0; }
  .auth-aside-inner { padding-top: 8px; }
  .auth-aside-inner h2 { margin: 18px 0 22px; }
  .auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
  .auth-points li { display: flex; gap: 14px; align-items: flex-start; }
  .auth-points li .icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    flex: none;
  }
  .auth-points li > span:last-child { display: flex; flex-direction: column; gap: 3px; }
  .auth-points li strong { font-weight: 600; font-size: 0.98rem; }
  .auth-points li span span { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
  @media (max-width: 860px) {
    .auth-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 40px; }
    .auth-aside { order: 2; }
  }

  /* =====================================================================
     THE MEMBER AREA
     ---------------------------------------------------------------------
     Same tokens, same shapes, same accent as the public site -- so signing
     up does not feel like walking into a different product. Everything here
     is a refinement of an existing app rule, keyed by the class the pages
     already emit, so no page markup had to change to pick it up.
     ===================================================================== */
  header {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
  }
  header .brand { display: inline-flex; align-items: center; }

  .dashboard h1, .page-head h1 { letter-spacing: -0.025em; }
  .dashboard .lede { font-size: 1.05rem; }

  .stat-grid { gap: 14px; }
  .stat-card, .stat-card-clickable {
    position: relative;
    border-radius: var(--r-md);
    padding: 20px 20px 18px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  /* A hairline of brand colour along the top edge -- enough to make a row of
     numbers read as a dashboard rather than a table. */
  .stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    opacity: 0.85;
  }
  .stat-card .stat-value { font-size: 2.1rem; letter-spacing: -0.03em; }
  .stat-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
  }
  /* The old focus/hover treatment painted a 2px brand ring on hover, which
     made a plain mouseover look like keyboard focus. Focus keeps the ring. */
  .stat-card-clickable:hover { box-shadow: var(--shadow-md); }
  .stat-card-clickable:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
    outline: none;
  }

  main .card { box-shadow: var(--shadow-sm); }
  main .card > h2:first-child,
  main .card > h3:first-child { margin-top: 0; }
  .dashboard-cols .card h2,
  .waiting-card h2 {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .dashboard-cols { gap: 18px; }

  /* Banner-style cards on the dashboard (onboarding, referral news) read as
     announcements rather than as another content panel. */
  #onboarding-banner, #referral-upgrade-banner {
    max-width: none;
    border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 55%),
      var(--surface);
  }
  #onboarding-banner strong, #referral-upgrade-banner strong { font-weight: 600; font-size: 1.02rem; }
  #onboarding-banner .btn { margin-top: 6px; }

  .guest-dashboard { max-width: 520px; margin: 40px auto; text-align: center; }
  .guest-dashboard .btn { margin-top: 12px; }

  /* Chips, badges and menus inside the app pick up the pill radius so the
     small shapes match the buttons. */
  .beta-badge, .tier-badge, .nav-badge { border-radius: var(--r-pill); }
  input, select, textarea { border-radius: var(--r-sm); }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
  }
  .message { border-radius: var(--r-sm); }

  /* --- Narrow screens ------------------------------------------------- */
  @media (max-width: 640px) {
    .mkt-section { padding: 56px 0; }
    .mkt-section.tight { padding: 40px 0; }
    .wrap { padding: 0 18px; }
    .mkt-hero .wrap { padding-block: 36px 48px; }
    .cta-row .btn { width: 100%; }
    .cta-row .btn.large { padding: 15px 22px; }
    .trust-line { gap: 6px 14px; }
    .section-head { margin-bottom: 28px; }
    .cta-band { padding: 40px 22px; border-radius: var(--r-lg); }
    /* The report card's title and its "which event, how many people" meta do
       not fit on one line at phone widths -- stack them instead of letting
       the title wrap into two lines beside the meta. */
    .report-mock .report-mock-bar { flex-wrap: wrap; row-gap: 4px; padding: 12px 16px; }
    .report-mock .report-mock-bar .meta { margin-left: 0; flex-basis: 100%; }
    .report-mock .report-mock-body { padding: 18px 16px 20px; }
    .hero-art .report-peek { margin-top: -18px; }
    .pull-quote { max-width: none; }
    .mkt-footer { padding: 44px 0 32px; }
  }

  /* The brand mark is an inline SVG in a text link, so it needs the same
     optical alignment a text glyph would get. */
  .brand-mark { flex: none; margin-right: 8px; vertical-align: -4px; }
  .btn svg, .mkt-nav a svg { vertical-align: -3px; margin-left: 4px; }
  .trust-line svg, .compare-col svg, .icon-circle svg, .step-art svg, .brand-mark { margin-left: 0; vertical-align: baseline; }