:root {
    --bg: #FAFAFC;
    --surface: #FFFFFF;
    --surface-2: #F3F1F9;
    --ink: #20242E;
    --muted: #5B5F72;
    --line: #E6E3F0;
    --brand: #3D1178;
    --brand-ink: #3D1178;        /* brand used AS text — swapped lighter in dark */
    --violet: #7A4BC4;
    --cyan: #22D8EA;
    --amber: #FBB63C;
    --pill: #A855F7;
    --teal: #0F766E;
    --teal-ink: #0F766E;
    --teal-soft: #E8F7F4;
    --grad-a: #2F6BF0;
    --grad-b: #8B3BE8;
    --chip-referral: #0369A1;  --chip-referral-bg: #E0F2FE;
    --chip-refill: #6D28D9;    --chip-refill-bg: #EDE9FE;
    --chip-lab: #047857;       --chip-lab-bg: #D1FAE5;
    --chip-auth: #B45309;      --chip-auth-bg: #FEF3C7;
    --band-ink: #F4EFFC;        /* text on the brand-purple bands, both themes */
    --bar: #1E293B;             /* the one-ink chart bar, like the app's */
    --blob-op: .4;              /* aurora strength — quieter in dark */
    --warn: #BE123C;          /* the figure a report prints in red */
    --shadow: 0 1px 2px rgba(32,36,46,.05), 0 12px 32px -16px rgba(61,17,120,.18);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #131020;
      --surface: #1C1830;
      --surface-2: #221D38;
      --ink: #EDEBF5;
      --muted: #A6A1BC;
      --line: #2F2A48;
      --brand-ink: #C4A8F0;
      --teal-ink: #4FD1C0;
      --teal-soft: #12332F;
      --chip-referral: #7DD3FC;  --chip-referral-bg: #0C3B57;
      --chip-refill: #C4B5FD;    --chip-refill-bg: #372B63;
      --chip-lab: #6EE7B7;       --chip-lab-bg: #0B3D30;
      --chip-auth: #FCD34D;      --chip-auth-bg: #4A3410;
      --bar: #A9B4C6;
      --blob-op: .2;
      --warn: #FB7185;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"] {
    --bg: #131020;
    --surface: #1C1830;
    --surface-2: #221D38;
    --ink: #EDEBF5;
    --muted: #A6A1BC;
    --line: #2F2A48;
    --brand-ink: #C4A8F0;
    --teal-ink: #4FD1C0;
    --teal-soft: #12332F;
    --chip-referral: #7DD3FC;  --chip-referral-bg: #0C3B57;
    --chip-refill: #C4B5FD;    --chip-refill-bg: #372B63;
    --chip-lab: #6EE7B7;       --chip-lab-bg: #0B3D30;
    --chip-auth: #FCD34D;      --chip-auth-bg: #4A3410;
    --bar: #A9B4C6;
    --blob-op: .2;
    --warn: #FB7185;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.6);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
    font-size: 16.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 {
    font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0;
  }
  p { margin: 0; }
  a { color: inherit; }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

  /* ---------- nav ---------- */
  .nav {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 20px 24px; max-width: 1120px; margin: 0 auto;
  }
  .nav-links { display: flex; gap: 6px; align-items: center; }
  .nav-links a {
    text-decoration: none; color: var(--muted);
    font-size: 16.5px; font-weight: 500;
    padding: 9px 15px; border-radius: 9px;
  }
  .nav-links a:hover { color: var(--ink); background: var(--surface-2); }
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 15px; font-weight: 600; text-decoration: none;
    padding: 10px 22px; border-radius: 10px;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn:focus-visible, .nav-links a:focus-visible {
    outline: 2px solid var(--violet); outline-offset: 2px;
  }
  /* `.nav-links a` (class + element) outranks a single class, so the nav's
     muted link colour was silently beating the button's white. The doubled
     selector keeps the white winning wherever the button sits. */
  .btn-brand, .nav-links a.btn-brand { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
  .btn-brand:hover { transform: translateY(-1px); }
  .btn-ghost { color: var(--brand-ink); border: 1.5px solid var(--line); }
  .btn-ghost:hover { border-color: var(--violet); }
  .btn-small { padding: 10px 22px; font-size: 16px; }

  /* ---------- hero ---------- */
  .hero { padding: 84px 0 72px; overflow: hidden; }
  .hero-grid {
    display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 42fr);
    gap: 56px; align-items: center;
  }
  .eyebrow {
    display: inline-block;
    font-size: 12.5px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--brand-ink);
    margin-bottom: 18px;
  }
  /* The homepage hero's eyebrow is the product's one-line definition, so it
     runs bigger and heavier than the section eyebrows elsewhere — a statement,
     not a label. Display face to match the headline it introduces. */
  .hero .eyebrow {
    font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(16px, 1.8vw, 21px);
    font-weight: 700;
    letter-spacing: .045em;
    margin-bottom: 20px;
  }
  .hero h1 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 700; }
  .hero h1 .grad {
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  /* The phone half of the headline wears the phone platform's own teal, the
     same split the app makes: AI gradient for the fax side, teal for phones. */
  .hero h1 .grad-teal {
    background: linear-gradient(90deg, #0D9488, #0891B2);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* "keep everything" strip — the no-switching promise, right under the hero.
     A band, not a section: it reads as one loud sentence in three parts. */
  .keep-band {
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: var(--surface-2); padding: 30px 0;
  }
  .keep-lead {
    text-align: center; font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: clamp(18px, 2vw, 23px); font-weight: 700; margin-bottom: 22px;
  }
  .keep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .keep-item {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow);
  }
  .keep-item .ki {
    flex: none; width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center;
  }
  .keep-item .ki svg { width: 21px; height: 21px; }
  .keep-item b { display: block; font-size: 16.5px; font-weight: 700; }
  .keep-item span { color: var(--muted); font-size: 14px; }

  /* the visibility before/after lists */
  .vlist { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
  .vlist li { display: flex; gap: 10px; font-size: 14.5px; color: var(--muted); }
  .vlist .vx, .vlist .vok { flex: none; font-weight: 700; }
  .vlist .vx { color: #E11D48; }
  .vlist .vok { color: var(--teal-ink); }
  .hero-sub {
    margin: 22px 0 30px; max-width: 34em;
    font-size: 18px; color: var(--muted);
  }
  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .hero-note { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

  /* the queue mock */
  .mock {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
    font-size: 13.5px;
  }
  .mock-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
    background: var(--surface-2);
  }
  .mock-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  .mock-bar .title { margin-left: 6px; font-weight: 600; color: var(--muted); font-size: 12.5px; }
  .mock-tabs { display: flex; gap: 6px; padding: 10px 12px 0; flex-wrap: wrap; }
  .mock-tab {
    font-size: 12px; font-weight: 600; padding: 4px 10px;
    border-radius: 999px; background: var(--surface-2); color: var(--muted);
  }
  .mock-tab.active { background: var(--brand); color: #fff; }
  .mock-rows { padding: 10px 12px 14px; display: grid; gap: 8px; }
  .mrow {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--line); border-radius: 10px;
    padding: 9px 12px; background: var(--surface);
    opacity: 0; transform: translateY(8px);
    animation: arrive .6s ease forwards;
  }
  .mrow:nth-child(2) { animation-delay: 1.1s; }
  .mrow:nth-child(3) { animation-delay: 2.2s; }
  .mrow:nth-child(4) { animation-delay: 3.3s; }
  @keyframes arrive { to { opacity: 1; transform: none; } }
  .mrow .page {
    flex: none; width: 26px; height: 32px; border-radius: 4px;
    background: var(--brand); position: relative;
  }
  .mrow .page::before, .mrow .page::after {
    content: ""; position: absolute; left: 5px; height: 3px; border-radius: 2px;
  }
  .mrow .page::before { top: 8px; width: 14px; background: var(--cyan); }
  .mrow .page::after { top: 15px; width: 11px; background: var(--amber); }
  .mrow .who { min-width: 0; }
  .mrow .who b { display: block; font-weight: 600; white-space: nowrap; }
  .mrow .who span { color: var(--muted); font-size: 12px; }
  .chip {
    margin-left: auto; flex: none;
    font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
    opacity: 0; transform: scale(.7);
    animation: stamp .35s ease forwards;
  }
  .mrow:nth-child(1) .chip { animation-delay: .75s; }
  .mrow:nth-child(2) .chip { animation-delay: 1.85s; }
  .mrow:nth-child(3) .chip { animation-delay: 2.95s; }
  .mrow:nth-child(4) .chip { animation-delay: 4.05s; }
  @keyframes stamp { to { opacity: 1; transform: none; } }
  .chip-referral { color: var(--chip-referral); background: var(--chip-referral-bg); }
  .chip-refill { color: var(--chip-refill); background: var(--chip-refill-bg); }
  .chip-lab { color: var(--chip-lab); background: var(--chip-lab-bg); }
  .chip-auth { color: var(--chip-auth); background: var(--chip-auth-bg); }
  .mock-foot {
    display: flex; align-items: center; gap: 8px;
    border-top: 1px solid var(--line); padding: 9px 14px;
    font-size: 12px; color: var(--muted); background: var(--surface-2);
  }
  .ai-spark {
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-weight: 600;
  }
  @media (prefers-reduced-motion: reduce) {
    .mrow, .chip { animation: none; opacity: 1; transform: none; }
    .btn { transition: none; }
  }

  /* ---------- colour: aurora fields, folder ribbon, step art ---------- */
  /* The same idea as the app's sign-in backdrop: big soft colour fields that
     sit BEHIND solid surfaces, so they can be saturated without ever putting
     text on a moving background. */
  .hero { position: relative; }
  .hero > .wrap { position: relative; z-index: 1; }
  .aurora { position: absolute; inset: -15% -5%; pointer-events: none; overflow: hidden; }
  .blob {
    position: absolute; border-radius: 50%;
    filter: blur(70px); opacity: var(--blob-op);
  }
  @keyframes drift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(36px, 24px); }
  }
  .b1 { width: 420px; height: 420px; left: -120px; top: -60px; background: #2F6BF0; animation: drift 19s ease-in-out infinite; }
  .b2 { width: 380px; height: 380px; right: -110px; top: 8%; background: #D946EF; animation: drift 24s ease-in-out infinite reverse; }
  .b3 { width: 300px; height: 300px; left: 34%; bottom: -130px; background: #22D8EA; animation: drift 28s ease-in-out infinite; }
  .b4 { width: 190px; height: 190px; right: 32%; top: -70px; background: #FBB63C; opacity: calc(var(--blob-op) * .55); }
  @media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

  /* The practice's folders as a ribbon of solid colour chips — white text on every
     one, checked ≥ 4.5:1, so the strip is theme-proof without token pairs. */
  .ribbon { margin-top: 56px; text-align: center; position: relative; z-index: 1; }
  .ribbon p { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
  .ribbon-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .rchip { font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: 999px; color: #fff; }

  .step svg.art { display: block; width: 100%; height: auto; margin-bottom: 14px; }

  .fcard { position: relative; overflow: hidden; }
  .frule { position: absolute; inset: 0 0 auto 0; height: 4px; }

  .phone-band { position: relative; overflow: hidden; }
  .phone-band > .wrap { position: relative; z-index: 1; }
  .pblob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: calc(var(--blob-op) * .8); pointer-events: none; }

  .cblob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .4; pointer-events: none; }

  /* ---------- sections ---------- */
  section { padding: 72px 0; }
  .sec-head { max-width: 620px; margin-bottom: 44px; }
  .sec-head h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; }
  .sec-head p { margin-top: 14px; color: var(--muted); font-size: 17px; }

  /* how it works */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .step {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 26px 24px; box-shadow: var(--shadow);
  }
  .step .n {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 600; font-size: 15px;
    background: var(--brand); color: #fff; margin-bottom: 16px;
  }
  .step h3 { font-size: 18.5px; font-weight: 600; margin-bottom: 10px; }
  .step p { color: var(--muted); font-size: 15px; }

  /* features */
  .features { background: var(--surface-2); }
  .fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .fcard {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 24px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 10px;
  }
  .fcard .mark {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center; margin-bottom: 4px;
  }
  .fcard .mark svg { width: 20px; height: 20px; }
  .fcard h3 { font-size: 17.5px; font-weight: 600; }
  .fcard p { color: var(--muted); font-size: 14.5px; }
  .m-brand { background: var(--brand); color: #FBB63C; }
  .m-cyan { background: #0E7490; color: #CFFAFE; }
  .m-violet { background: #6D28D9; color: #EDE9FE; }
  .m-amber { background: #B45309; color: #FEF3C7; }
  .m-grad { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #fff; }
  .m-slate { background: #334155; color: #E2E8F0; }

  /* ---------- "a look inside": sample dashboard windows ---------- */
  .inside-note { font-size: 13.5px; color: var(--muted); margin-top: -30px; margin-bottom: 34px; }
  .win {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
  }
  .win + .win { margin-top: 28px; }
  .win-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-bottom: 1px solid var(--line);
    background: var(--surface-2); font-size: 12.5px; color: var(--muted);
  }
  .win-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  .win-bar .crumb { margin-left: 6px; font-weight: 600; }
  .win-bar .sample {
    margin-left: auto; font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px;
    background: var(--chip-auth-bg); color: var(--chip-auth);
  }
  .win-body { padding: 20px; display: grid; gap: 18px; }
  .win-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
  .win-head h3 { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  .win-head .quiet { font-size: 12.5px; color: var(--muted); }
  .win-head .phone-sq {
    display: inline-grid; place-items: center; width: 26px; height: 26px;
    border-radius: 8px; background: var(--teal); color: #fff;
  }
  .seg { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
  .seg span { font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 6px; color: var(--muted); }
  .seg .on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(32,36,46,.12); font-weight: 600; }
  .row-label { font-size: 13px; font-weight: 600; color: var(--ink); }
  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .stat-grid.five { grid-template-columns: repeat(5, 1fr); }
  .stat {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; padding: 12px 12px 10px;
  }
  .stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
  .stat-sky::before { background: linear-gradient(90deg, #0284C7, #38BDF8); }
  .stat-teal::before { background: linear-gradient(90deg, #0D9488, #22D3EE); }
  /* Spans, so they MUST be display:block — left inline, "Calls answered",
     "18" and "86% of inbound calls" all run together on one line. */
  .stat .lbl {
    display: block;
    font-size: 10px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
  }
  .stat .val {
    display: block;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 22px; font-weight: 600; margin-top: 4px; line-height: 1.2;
    font-variant-numeric: tabular-nums;
  }
  .stat .sub { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
  .stat .go { display: block; font-size: 11px; font-weight: 600; color: var(--teal-ink); margin-top: 7px; }
  .funnel { display: grid; gap: 7px; }
  .frow { display: grid; grid-template-columns: 170px 1fr 34px; align-items: center; gap: 10px; font-size: 12.5px; }
  .frow .fl { color: var(--muted); }
  .frow .track { height: 14px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .frow .fill { height: 100%; border-radius: 4px; background: var(--bar); }
  .frow .fc { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
  .alert-line {
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px;
    font-size: 12.5px;
  }
  .alert-line .adot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F43F5E; margin-top: 5px; }
  .alert-line b { font-weight: 600; }
  .alert-line .amuted { color: var(--muted); }
  .alert-line .alink { color: var(--teal-ink); font-weight: 600; }

  /* the call-backs mini worklist in the phone band */
  .cb {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; font-size: 12.5px;
  }
  .cb-head {
    display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
    padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  }
  .cb-head b { font-size: 13px; }
  .cb-head span { color: var(--teal-ink); font-weight: 600; font-size: 12px; }
  .cb-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
  .cb-row:first-of-type { border-top: 0; }
  .cb-row .when { color: var(--muted); white-space: nowrap; }
  .cb-row .what { min-width: 0; }
  .cb-badge {
    margin-left: auto; flex: none; font-size: 11px; font-weight: 600;
    padding: 2px 9px; border-radius: 999px;
  }
  .cb-ok { color: var(--chip-lab); background: var(--chip-lab-bg); }
  .cb-wait { color: var(--chip-auth); background: var(--chip-auth-bg); }

  /* automation & integration grids — same card language as .fcard, wider */
  .agrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .igrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .icard {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 28px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 12px;
  }
  .icard h3 { font-size: 19px; font-weight: 600; }
  .icard p { color: var(--muted); font-size: 15px; }
  .icard svg.iart { display: block; width: 100%; height: auto; margin-bottom: 4px; }

  /* phone band */
  .phone-band { background: var(--teal-soft); }
  .phone-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px; align-items: center;
  }
  .phone-band .eyebrow { color: var(--teal-ink); }
  .phone-band h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; }
  .phone-band .lead { margin-top: 14px; color: var(--muted); font-size: 17px; }
  .phone-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
  .phone-list li { display: flex; gap: 10px; font-size: 15.5px; }
  .phone-list .tick { color: var(--teal-ink); flex: none; font-weight: 700; }
  /* security */
  .sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
  .sec-item {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; padding: 18px 20px;
  }
  .sec-item .key {
    flex: none; width: 30px; height: 30px; border-radius: 8px;
    display: grid; place-items: center; background: var(--surface-2);
    color: var(--brand-ink);
  }
  .sec-item .key svg { width: 16px; height: 16px; }
  .sec-item b { display: block; font-weight: 600; font-size: 15.5px; }
  .sec-item span { color: var(--muted); font-size: 14px; }

  /* cta band */
  .cta-band { background: var(--brand); color: var(--band-ink); border-radius: 20px; overflow: hidden; position: relative; }
  .cta-inner { padding: 56px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; position: relative; z-index: 1; }
  .cta-band h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: #fff; }
  .cta-band p { margin-top: 10px; color: #CDBBEE; font-size: 16px; max-width: 30em; }
  .btn-light { background: #fff; color: var(--brand); flex: none; }
  .cta-doc { position: absolute; right: -40px; bottom: -70px; width: 260px; opacity: .18; transform: rotate(-8deg); }

  /* footer */
  footer { padding: 40px 0 56px; }
  .foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    border-top: 1px solid var(--line); padding-top: 28px;
    color: var(--muted); font-size: 13.5px;
  }
  .foot .brandline { display: flex; align-items: center; gap: 10px; }

  @media (max-width: 900px) {
    .hero { padding: 56px 0 48px; }
    .keep-grid { grid-template-columns: 1fr; }
    .hero-grid, .phone-grid { grid-template-columns: 1fr; gap: 40px; }
    .steps, .fgrid { grid-template-columns: 1fr; }
    .sec-grid { grid-template-columns: 1fr; }
    .stat-grid, .stat-grid.five { grid-template-columns: repeat(2, 1fr); }
    .agrid, .igrid { grid-template-columns: 1fr; }
    .frow { grid-template-columns: 108px 1fr 30px; }
    .win-body { padding: 14px; }
    .cta-inner { flex-direction: column; align-items: flex-start; padding: 40px 28px; }
    .nav-links a:not(.btn) { display: none; }
  }

/* ---------- multi-page additions ---------- */
.nav-links a.on { color: var(--ink); background: var(--surface-2); }

/* the homepage's four doors: whole-card links to the detail pages */
.bgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
a.fcard { text-decoration: none; }
a.fcard:hover { border-color: var(--violet); box-shadow: 0 2px 4px rgba(32,36,46,.06), 0 16px 40px -18px rgba(61,17,120,.28); }
a.fcard:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.fcard .more { margin-top: 6px; font-weight: 600; font-size: 14px; color: var(--brand-ink); }

/* compact hero for the detail pages */
.page-hero { position: relative; overflow: hidden; padding: 64px 0 40px; }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(30px, 3.8vw, 44px); font-weight: 700; }
.page-hero .lead { margin-top: 16px; max-width: 40em; font-size: 17.5px; color: var(--muted); }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--brand-ink); text-decoration: none; font-weight: 500; }
.crumbs a:hover { text-decoration: underline; }

/* text-beside-illustration pairs on detail pages */
.duo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; }

.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-links a { text-decoration: none; color: var(--muted); }
.foot-links a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .bgrid, .duo { grid-template-columns: 1fr; }
  .duo { gap: 32px; }
}
/* the HIPAA badge — bold, tinted, theme-proof via the chip tokens */
.hipaa {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
  color: var(--chip-lab); background: var(--chip-lab-bg);
  border-radius: 999px; padding: 6px 14px;
}
.hipaa svg { width: 14px; height: 14px; flex: none; }
/* ---------- the report email, mocked (Reports page) ----------
   Deliberately NOT the .win language: a report is not a screen, and the
   serif face is the one the real email actually renders in, so the mock
   reads as an inbox rather than another dashboard. */
.mail {
  /* The real email is capped at 560px. Let it run the full width of the
     wrap and it reads as another page rather than as something that
     arrived in an inbox, which is the whole point of showing it. */
  max-width: 620px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
}
.mail-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); font-size: 12.5px; color: var(--muted);
}
.mail-bar b { color: var(--ink); font-weight: 600; }
.mail-bar .sample {
  margin-left: auto; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--chip-auth-bg); color: var(--chip-auth);
}
.mail-body { padding: 28px 28px 24px; font-family: Georgia, "Times New Roman", serif; }
.mail-body h3 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 600; }
.mail-when { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.mail-note {
  margin-top: 18px; padding: 10px 15px; font-size: 14.5px; font-style: italic;
  border-left: 3px solid var(--violet); background: var(--surface-2);
  border-radius: 0 8px 8px 0;
}
.mail-period { margin-top: 26px; }
.mail-period > h4 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-ink); padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.mail-block { margin-top: 16px; }
.mail-block > h5 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px;
}
.mline {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px;
  align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.mline .m-s { display: block; font-size: 12.5px; color: var(--muted); }
.mline .m-v { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.mline.warn .m-v { color: var(--warn); }
.mline.sub-line { padding: 5px 0 5px 18px; font-size: 13.5px; color: var(--muted); border-bottom: 0; }
.mail-foot { margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.mail-foot a { color: var(--teal-ink); font-weight: 600; }

/* the three cadences — a fourth column would wrap badly, three fits */
.cadence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cad {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px; box-shadow: var(--shadow);
}
.cad .when {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 12px;
}
.cad h3 { font-size: 18px; font-weight: 600; }
.cad p { color: var(--muted); font-size: 14.5px; margin-top: 8px; }

@media (max-width: 900px) {
  .cadence { grid-template-columns: 1fr; }
  .mail-body { padding: 18px 16px 16px; }
}