/* CoBills public website — shared tokens and chrome. See DESIGN.md. */
    :root {
      color-scheme: light;
      --bg: #F5F5F7;
      --surface: #FFFFFF;
      --ink: #17171C;
      --muted: #6D6D74;
      --purple: #A46DFF;
      --purple-ink: #6A47E0;
      --purple-soft: #F0E9FF;
      --purple-wash: #ECE5FA;
      --line: #E5E5E7;
      --track: #E9E9EE;
      --partner: #A4A4AC;
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 28px;
      --radius-pill: 999px;
      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 12px;
      --space-lg: 16px;
      --space-xl: 20px;
      --space-xxl: 24px;
      --space-xxxl: 32px;
      --space-huge: 40px;
      --space-hero: 48px;
      --page-width: 1120px;
      --ease-out: cubic-bezier(.22, 1, .36, 1);
      --duration: 220ms;
      --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
    body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
    button, input { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; }
    button { cursor: pointer; }
    img, svg { display: block; }
    svg { width: 24px; height: 24px; flex: 0 0 auto; }
    .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
    h1, h2, h3, p, figure { margin: 0; }
    h1, h2, h3 { font-weight: 700; }
    :focus-visible { outline: 3px solid var(--purple-ink); outline-offset: 5px; }
    [hidden] { display: none !important; }
    .container { width: min(var(--page-width), calc(100% - 80px)); margin-inline: auto; }
    .skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--ink); color: white; padding: 14px 20px; border-radius: var(--radius-sm); }
    .skip-link:focus { top: 12px; }
    .button { min-height: 50px; display: inline-flex; justify-content: center; align-items: center; gap: var(--space-md); padding: 0 var(--space-xxl); border: 0; border-radius: var(--radius-pill); background: var(--purple-ink); color: white; font-size: 15px; font-weight: 600; text-decoration: none; transition: background var(--duration), transform 120ms var(--ease-out); }
    .button svg { width: 17px; height: 17px; }
    .button:active { transform: scale(.97); }
    .text-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
    .text-link svg { width: 16px; height: 16px; }
    .eyebrow { color: var(--purple-ink); font-size: 13px; font-weight: 650; letter-spacing: .02em; }
    .section-heading { font-size: clamp(34px, 4vw, 48px); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
    .body-copy { color: var(--muted); font-size: 17px; line-height: 1.65; }
    .number { font-variant-numeric: tabular-nums; }

    /* A quiet toolbar, rather than a second hero. */
    .site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
    .nav { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xxl); }
    .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 23px; letter-spacing: -.8px; font-weight: 750; }
    .brand img { width: 35px; height: 35px; border-radius: 9px; }
    .nav-right { display: flex; align-items: center; gap: var(--space-huge); }
    .nav-links { display: flex; align-items: center; gap: var(--space-xxxl); }
    .nav-links a { padding-block: 14px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 550; }
    .nav .button { min-height: 42px; padding-inline: var(--space-xl); font-size: 13px; }
    .menu-toggle { display: none; background: transparent; border: 0; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
    .mobile-menu { padding: 8px 24px 20px; border-top: 1px solid var(--line); }
    .mobile-menu a { display: block; padding: 14px 0; text-decoration: none; font-weight: 550; }


    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .site-footer { border-top: 1px solid var(--line); padding: 32px 0; }
    .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .site-footer .brand { font-size: 18px; gap: 8px; }
    .site-footer .brand img { width: 28px; height: 28px; border-radius: 7px; }
    .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
    .footer-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; text-decoration: none; }
    .footer-bottom { margin-top: 20px; color: var(--muted); font-size: 11px; }

    .button:disabled { cursor: wait; opacity: .6; transform: none; }
    @media (hover: hover) and (pointer: fine) {
      .button:hover { background: #5837CA; }
      .button:active { transform: scale(.97); }
      .text-link:hover, .nav-links a:hover, .footer-links a:hover { color: var(--purple-ink); }
      .text-link:hover svg { transform: translateY(2px); }
    }
    @media (max-width: 1000px) {
      .container { width: calc(100% - 56px); }
    }
    @media (max-width: 760px) {
      .container { width: calc(100% - 40px); }
      .nav { height: 70px; gap: 12px; }
      .brand { font-size: 21px; }
      .brand img { width: 32px; height: 32px; }
      .nav-right { gap: 8px; }
      .nav-links { display: none; }
      .menu-toggle { display: inline-flex; }
      .nav .button { min-height: 40px; font-size: 12px; padding-inline: 16px; }
      .footer-row { align-items: flex-start; flex-direction: column; gap: 12px; }
      .footer-links { gap: 18px; }
    }
    @media (max-width: 374px) {
      .container { width: calc(100% - 32px); }
      .brand { font-size: 19px; }
      .brand img { width: 28px; height: 28px; }
      .nav .button { padding-inline: 12px; }
      .nav-right { gap: 2px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }
    @media (forced-colors: active) {
      .button { border: 1px solid ButtonText; }
    }