/* page scaffold: full-bleed bands, constrained content */
      main { max-width: none; padding: 0 0 90px; }
      .wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }

      /* ---- dark chrome (homepage) ---- */
      header { background: #081411; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
      .brand .wordmark { filter: brightness(0) invert(1); }
      nav a.link { color: #9fb3ab; }
      nav a.link:hover { color: #fff; }
      nav a.link.hot { color: #6ee7a8; }
      .navcta .btn.ghost { background: transparent; color: #e7efe9; border-color: rgba(255, 255, 255, 0.28); }
      .navcta .btn.ghost:hover { background: rgba(255, 255, 255, 0.08); }
      .navtoggle { color: #e7efe9; }
      @media (max-width: 900px) {
        nav.navlinks { border-top-color: rgba(255, 255, 255, 0.1); }
      }

      /* ---- dark hero zone ---- */
      .herozone {
        background:
          radial-gradient(1100px 560px at 50% -140px, rgba(16, 185, 129, 0.32), rgba(16, 185, 129, 0) 68%),
          radial-gradient(700px 300px at 50% 0, rgba(110, 231, 168, 0.12), transparent 70%),
          #081411;
        padding-bottom: 46px;
        border-bottom: 1px solid rgba(110, 231, 168, 0.16);
      }
      .hero { text-align: center; padding: 84px 10px 20px; }
      .hero .kicker {
        display: inline-block; font-size: 12.5px; font-weight: 700;
        letter-spacing: 0.18em; text-transform: uppercase; color: #6ee7a8; margin-bottom: 22px;
      }
      .hero h1 {
        font-family: var(--heading); font-weight: 800; font-size: clamp(27px, 4.2vw, 48px);
        line-height: 1.12; letter-spacing: -0.01em; margin: 0 auto 20px; max-width: 760px;
        color: #f8fafc;
      }
      .hero h1 em { font-style: italic; color: #6ee7a8; }
      .hero .sub { color: #a9b8af; font-size: 18px; max-width: 660px; margin: 0 auto 32px; }
      .hero .note { color: #74857c; font-size: 12.5px; margin-top: 14px; }

      .scanbar {
        display: flex; align-items: center; gap: 10px; max-width: 660px; margin: 8px auto 0;
        background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 8px 8px 8px 20px;
        box-shadow: 0 30px 80px -20px rgba(16, 185, 129, 0.45), 0 6px 20px rgba(0, 0, 0, 0.35);
      }
      .scanbar svg { flex: none; color: var(--faint); }
      .scanbar input {
        flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
        font: inherit; font-size: 15px; color: var(--ink);
      }
      .scanbar input::placeholder { color: var(--faint); }
      .scanbar .btn { border-radius: 99px; padding: 12px 24px; white-space: nowrap; }
      @media (max-width: 520px) {
        .scanbar { flex-wrap: wrap; border-radius: 18px; padding: 12px 14px; gap: 8px 10px; }
        .scanbar input { flex: 1; min-width: 0; padding: 4px 0; }
        .scanbar .btn { flex-basis: 100%; width: 100%; }
      }

      .checkrow { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 30px; margin-top: 28px; }
      .checkrow span { display: inline-flex; align-items: center; gap: 9px; color: #c3d0c8; font-size: 14px; font-weight: 500; }
      .checkrow span::before {
        content: '✓'; flex: none; display: grid; place-items: center; width: 18px; height: 18px;
        border-radius: 5px; background: rgba(110, 231, 168, 0.16); color: #6ee7a8; font-size: 12px; font-weight: 800;
      }

      /* ---- relay flow animation (hero) ---- */
      .flow { display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 600px; margin: 42px auto 6px; }
      .fnode { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: none; }
      .fchip {
        position: relative; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
        background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.22);
      }
      .fchip.core { border-color: rgba(2, 108, 57, 0.45); }
      .fchip.core img { border-radius: 7px; }
      .fchip .ring { position: absolute; inset: -4px; border-radius: 18px; border: 2px solid var(--brand); opacity: 0; animation: ringpulse 2.8s ease-out infinite; }
      .fdest { display: flex; gap: 8px; }
      .fdest .dlogo {
        width: 50px; height: 54px; border-radius: 13px; display: grid; place-items: center;
        background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.22);
      }
      .flabel { font-size: 11.5px; font-weight: 600; color: #a9b8af; white-space: nowrap; }
      .flabel b { color: #6ee7a8; font-weight: 700; }
      .flane { position: relative; flex: 1 1 auto; min-width: 30px; height: 54px; }
      .flane::before {
        content: ''; position: absolute; left: -3px; right: -3px; top: 27px; height: 2px; margin-top: -1px;
        background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 5px, transparent 5px 11px);
      }
      .flane.out::before { background: repeating-linear-gradient(90deg, rgba(110, 231, 168, 0.4) 0 5px, transparent 5px 11px); }
      .pkt {
        position: absolute; top: 27px; left: 0; width: 9px; height: 9px; margin: -5px 0 0 -4px; border-radius: 50%;
        background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); opacity: 0;
        animation: flow 2.8s linear infinite;
      }
      .pkt.d2 { animation-delay: .93s; }
      .pkt.d3 { animation-delay: 1.86s; }
      .pkt.d4 { animation-delay: 1.4s; }
      .pkt.bad {
        top: 34px; width: auto; height: auto; margin: 0 0 0 -4px; padding: 2px 6px; border-radius: 5px;
        background: rgba(248, 113, 113, 0.16); color: #f87171; font-size: 9px; font-weight: 800; box-shadow: none;
        animation: strip 14s linear infinite;
      }
      @keyframes flow { 0% { left: -6%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 106%; opacity: 0; } }
      @keyframes strip {
        0% { left: -8%; opacity: 0; transform: translateY(0) scale(1); }
        2.5% { opacity: 1; }
        14% { left: 74%; opacity: 1; transform: translateY(0) scale(1); }
        18% { left: 88%; opacity: 0; transform: translateY(15px) scale(.5); }
        100% { left: 88%; opacity: 0; }
      }
      @keyframes ringpulse { 0% { opacity: .55; transform: scale(.88); } 100% { opacity: 0; transform: scale(1.3); } }
      @media (prefers-reduced-motion: reduce) {
        .pkt, .fchip .ring { animation: none; }
        .pkt.bad { display: none; }
        .pkt { opacity: 1; left: 42%; }
      }
      @media (max-width: 520px) {
        .flow { max-width: 100%; gap: 4px; }
        .fchip, .fdest .dlogo { width: 46px; height: 46px; }
        .fdest .dlogo { width: 42px; }
        .flane::before, .pkt { top: 23px; }
        .pkt.d3, .pkt.d4 { display: none; }
        .pkt.bad { top: 30px; font-size: 8px; padding: 2px 5px; }
        .flabel { font-size: 10px; }
        .leaklane .chip { font-size: 9px; padding: 3px 5px; }
      }

      /* ---- the problem: dark rounded panel ---- */
      .problempanel {
        background:
          radial-gradient(640px 340px at 88% 0%, rgba(16, 185, 129, 0.13), transparent 70%),
          #0a1a15;
        border: 1px solid rgba(110, 231, 168, 0.14);
        border-radius: 26px; padding: 56px 58px;
        box-shadow: 0 36px 80px -42px rgba(8, 20, 17, 0.75);
      }
      .problempanel .split { margin-top: 0; }
      .problempanel h2.left { color: #6ee7a8; margin: 0 0 8px; }
      .problempanel h3 { color: #f8fafc; }
      .problempanel .split p { color: #a9b8af; }
      .problempanel p b, .problempanel p em { color: #dbe6df; }
      .problempanel a { color: #6ee7a8; }
      .problempanel .chip { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.35); color: #f8a5a5; }
      @media (max-width: 820px) {
        .problempanel { padding: 32px 24px; border-radius: 20px; }
      }

      /* ---- leak scene (behind your back) ---- */
      .leakscene { position: relative; padding-right: 86px; }
      .leakscene .browser { max-width: 380px; }
      .leakscene .skel { height: 9px; border-radius: 5px; background: #e2e8f0; margin: 9px 0; }
      .leakscene .skel.hero { height: 54px; background: linear-gradient(135deg, rgba(2,108,57,0.16), rgba(2,108,57,0.05)); margin-bottom: 12px; }
      .leakscene .skel.w60 { width: 60%; }
      .leakscene .skel.w80 { width: 80%; }
      .leakscene .skel.btn { width: 108px; height: 26px; background: var(--brand); opacity: .85; margin-top: 12px; }
      .leakdest { position: absolute; right: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.25); }
      .leakdest.g { top: 12%; }
      .leakdest.m { top: 58%; }
      .leaklane { position: absolute; right: 58px; width: 120px; height: 2px; background: repeating-linear-gradient(90deg, rgba(220,38,38,0.4) 0 5px, transparent 5px 11px); }
      .leaklane.g { top: calc(12% + 25px); transform: rotate(-8deg); }
      .leaklane.m { top: calc(58% + 25px); transform: rotate(8deg); }
      .leaklane .chip { position: absolute; top: -30px; left: 0; opacity: 0; animation: leak 5s linear infinite; white-space: nowrap; }
      .leakscene .leaklane .chip { background: #22161a; border-color: rgba(248, 113, 113, 0.45); color: #fda4af; }
      .leaklane.m .chip { animation-delay: 1.25s; }
      .leaklane .chip.c2 { animation-delay: 2.5s; }
      .leaklane.m .chip.c2 { animation-delay: 3.75s; }
      @keyframes leak {
        0% { left: -10%; opacity: 0; }
        6% { opacity: 1; }
        38% { opacity: 1; }
        45% { left: 82%; opacity: 0; }
        100% { left: 82%; opacity: 0; }
      }
      @media (prefers-reduced-motion: reduce) { .leaklane .chip { animation: none; left: 30%; opacity: 1; } .leaklane .chip.c2 { display: none; } }
      @media (max-width: 520px) { .leakscene { padding-right: 68px; } .leaklane { width: 84px; right: 54px; } }

      /* ---- patient journey (dark band, above the scrub) ---- */
      .journey {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        max-width: 1000px; margin: 14px auto 64px;
      }
      .journey > * { min-width: 0; }
      .jnode { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; flex: none; }
      .jchip {
        width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
        background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.5);
        color: #64748b;
      }
      .adchip {
        position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 1;
        background: #0081fb; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
        padding: 2px 9px; border-radius: 99px; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(0, 129, 251, 0.6);
      }
      .jlabel { font-size: 11.5px; font-weight: 600; color: #a9b8af; white-space: nowrap; text-align: center; }
      .jlabel b { color: #6ee7a8; font-weight: 700; }
      .jevents {
        background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 10px 15px 12px;
        box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.5); text-align: left;
      }
      .jevents .jehead {
        font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--faint); margin-bottom: 7px;
      }
      .jevents .jev {
        display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px;
        font-weight: 600; color: var(--ink); padding: 3px 0;
      }
      .jevents .jev svg { color: var(--brand); flex: none; }
      .jlane { position: relative; flex: 1 1 auto; min-width: 26px; height: 56px; }
      .jlane::before {
        content: ''; position: absolute; left: -3px; right: -3px; top: 28px; height: 2px; margin-top: -1px;
        background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 5px, transparent 5px 11px);
      }
      .jdot {
        position: absolute; top: 28px; left: 0; width: 9px; height: 9px; margin: -5px 0 0 -4px; border-radius: 50%;
        background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); opacity: 0;
        animation: jflow 2.6s linear infinite;
      }
      .jdot.j2 { animation-delay: 1.3s; }
      .jbad {
        position: absolute; top: 36px; left: 0; margin-left: -4px; padding: 2px 6px; border-radius: 5px;
        background: rgba(248, 113, 113, 0.16); color: #f87171; font-size: 9px; font-weight: 800;
        white-space: nowrap; opacity: 0; animation: jstrip 12s linear infinite;
      }
      @keyframes jflow { 0% { left: -6%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 106%; opacity: 0; } }
      @keyframes jstrip {
        0% { left: -8%; opacity: 0; transform: translateY(0) scale(1); }
        3% { opacity: 1; }
        24% { left: 70%; opacity: 1; transform: translateY(0) scale(1); }
        29% { left: 84%; opacity: 0; transform: translateY(14px) scale(.5); }
        100% { left: 84%; opacity: 0; }
      }
      .jring { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
      .jring .ringsvg { position: absolute; inset: 0; animation: jspin 16s linear infinite; }
      .jring .ringsvg circle {
        fill: none; stroke: rgba(110, 231, 168, 0.45); stroke-width: 2;
        stroke-dasharray: 5 9; stroke-linecap: round;
      }
      .jring .core {
        width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center;
        background: #fff; border: 1px solid rgba(110, 231, 168, 0.5); box-shadow: 0 12px 30px -10px rgba(16, 185, 129, 0.45);
      }
      .jring .core img { border-radius: 8px; }
      @keyframes jspin { to { transform: rotate(360deg); } }
      .jstripped {
        display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
        border: 1.5px dashed rgba(110, 231, 168, 0.55); color: #6ee7a8; background: #0d1d16;
        font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 9px; white-space: nowrap;
        animation: jpulse 3.2s ease-in-out infinite;
      }
      @keyframes jpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
      .jfan { position: relative; flex: none; width: 236px; height: 300px; }
      .jfan svg.curves { position: absolute; inset: 0; width: 100%; height: 100%; }
      .jfan .fanpath { fill: none; stroke: rgba(110, 231, 168, 0.35); stroke-width: 1.8; }
      .jfan .fandot { fill: #34d399; }
      .jdest { position: absolute; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; }
      .jdest.a { top: 2px; }
      .jdest.b { bottom: 2px; }
      .jdest.c { top: 50%; transform: translateY(-50%); }
      .jdest .dchip {
        width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
        background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.5);
      }
      .jdest .rcv { font-size: 10.5px; font-weight: 700; color: #6ee7a8; white-space: nowrap; }
      .jdest .rcv::before { content: '✓ '; }
      .jdest .rsub { font-size: 10px; font-weight: 600; color: #8fa096; margin-top: -4px; white-space: nowrap; }
      @media (prefers-reduced-motion: reduce) {
        .jdot { animation: none; opacity: 1; left: 42%; }
        .jbad, .jfan .fandot { display: none; }
        .jring .ringsvg, .jstripped { animation: none; }
      }
      .jlane.vonly { display: none; }
      @media (max-width: 720px) {
        .journey { flex-direction: column; gap: 6px; margin: 6px auto 48px; }
        .jlane { flex: none; width: 44px; height: 46px; }
        .jlane::before {
          left: 50%; right: auto; top: -2px; bottom: -2px; width: 2px; height: auto;
          margin: 0 0 0 -1px;
          background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 5px, transparent 5px 11px);
        }
        .jdot { left: 50%; top: 0; margin: -4px 0 0 -4.5px; animation-name: jflowv; }
        .jbad { left: calc(50% + 9px); top: 0; margin: -8px 0 0 0; animation-name: jstripv; }
        @keyframes jflowv { 0% { top: -8%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 104%; opacity: 0; } }
        @keyframes jstripv {
          0% { top: -6%; opacity: 0; transform: scale(1); }
          3% { opacity: 1; }
          24% { top: 60%; opacity: 1; transform: scale(1); }
          29% { top: 76%; opacity: 0; transform: scale(.5); }
          100% { top: 76%; opacity: 0; }
        }
        .jlane.vonly { display: block; }
        .jfan { width: auto; height: auto; display: flex; gap: 30px; align-items: flex-start; }
        .jfan svg.curves { display: none; }
        .jdest { position: static; width: auto; max-width: 150px; }
        .jdest .rsub { white-space: normal; text-align: center; margin-top: -2px; }
      }

      /* ---- what we send: the manifest ---- */
      .manifest {
        position: relative; margin-top: 30px;
        background: linear-gradient(180deg, #fffefb, #fbfaf5);
        border: 1px solid var(--line-dark); border-radius: 10px;
        box-shadow: 0 1px 0 #fff inset, 0 26px 54px -30px rgba(15, 23, 42, 0.35);
        padding: 36px 38px 0; display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 40px;
      }
      .manifest .stamp {
        position: absolute; top: 20px; right: 24px; transform: rotate(5deg);
        border: 2px solid rgba(220, 38, 38, 0.4); color: rgba(185, 28, 28, 0.7);
        font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
        padding: 5px 11px; border-radius: 4px; pointer-events: none;
      }
      .manifest .mhead {
        font-family: var(--heading); font-weight: 700; font-size: 17px; padding-bottom: 10px;
        border-bottom: 2px solid var(--brand); margin-bottom: 4px;
      }
      .manifest .mcol.no .mhead { border-bottom-color: var(--red); color: #7f1d1d; }
      .manifest .mrule { background: var(--line-dark); opacity: .6; }
      .manifest ul.plain li { border-top-style: dashed; }
      .manifest .mfoot {
        grid-column: 1 / -1; border-top: 1px dashed var(--line-dark); margin-top: 24px;
        padding: 16px 2px 20px; color: var(--muted); font-size: 13.5px; display: flex;
        justify-content: space-between; gap: 12px 26px; flex-wrap: wrap; align-items: baseline;
      }
      .manifest .mfoot b { color: var(--ink); font-family: var(--heading); }
      .manifest .mfoot a { font-weight: 600; white-space: nowrap; }
      @media (max-width: 760px) {
        .manifest { grid-template-columns: 1fr; padding: 28px 20px 0; gap: 22px; }
        .manifest .mrule { display: none; }
        .manifest .stamp { position: static; display: inline-block; justify-self: start; margin: -6px 0 -6px; transform: rotate(-2deg); }
      }

      /* ---- compliance badges (inside the dark hero) ---- */
      .trusthero { text-align: center; padding: 54px 0 10px; }
      .trusthero .tkick {
        font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
        color: #8aa39a; margin: 0 0 22px;
      }
      .trustbadges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
      .trustbadge {
        display: inline-flex; align-items: center; gap: 11px;
        padding: 10px 18px 10px 11px; border-radius: 13px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
        border: 1px solid rgba(110, 231, 168, 0.2);
        font-size: 13.5px; font-weight: 600; color: #e7efe9; white-space: nowrap;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 26px -18px rgba(0, 0, 0, 0.8);
      }
      .trustbadge .ic {
        flex: none; display: grid; place-items: center; width: 28px; height: 28px;
        border-radius: 8px; background: rgba(110, 231, 168, 0.13); color: #6ee7a8;
      }
      @media (max-width: 560px) {
        .trusthero { padding-top: 40px; }
        .trustbadges { gap: 9px 10px; }
        .trustbadge { padding: 9px 13px 9px 9px; gap: 9px; font-size: 12.5px; }
        .trustbadge .ic { width: 24px; height: 24px; }
      }


      /* ---- built for your practice (tabbed) ---- */
      .builtfor { margin-top: 96px; }
      .bf-grid {
        display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 44px; align-items: start; margin-top: 34px;
      }
      .bf-tabs { display: flex; flex-direction: column; }
      .bf-tab {
        display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
        background: transparent; border: 0; border-bottom: 1px solid var(--line);
        padding: 17px 4px; font-family: var(--body); font-size: 18.5px; font-weight: 600;
        color: var(--ink); cursor: pointer; transition: color 0.2s, border-color 0.2s;
      }
      .bf-tab svg { flex: none; color: var(--faint); transition: color 0.2s; }
      .bf-tab:hover { color: var(--brand); }
      .bf-tab:hover svg { color: var(--brand); }
      .bf-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
      .bf-tab[aria-selected="true"] svg { color: var(--brand); }
      .bf-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
      .bf-allsol {
        display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;
        font-size: 14px; font-weight: 600; color: var(--brand);
      }

      .bf-card {
        background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
        box-shadow: 0 26px 56px -32px rgba(15, 23, 42, 0.4); padding: 26px 26px 24px;
      }
      .bf-panel { display: none; }
      .bf-panel.on { display: block; animation: bffade 0.32s ease; }
      @keyframes bffade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
      .bf-card h3 { font-family: var(--heading); font-weight: 700; font-size: 22px; color: var(--ink); margin: 0 0 16px; }
      .bf-card .im { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #eef2f7; }
      .bf-card .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .bf-card p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 18px 0 18px; }
      .bf-card .more {
        display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14.5px;
        color: var(--ink); border-bottom: 2px solid var(--brand); padding-bottom: 2px;
      }
      .bf-card .more:hover { color: var(--brand); }
      @media (prefers-reduced-motion: reduce) { .bf-panel.on { animation: none; } }
      @media (max-width: 820px) {
        .bf-grid { grid-template-columns: 1fr; gap: 24px; }
        .bf-tabs {
          flex-direction: row; overflow-x: auto; gap: 4px; margin: 0 -22px; padding: 0 22px 2px;
          border-bottom: 1px solid var(--line); scrollbar-width: none;
        }
        .bf-tabs::-webkit-scrollbar { display: none; }
        .bf-tab {
          flex: none; border-bottom: 2px solid transparent; padding: 12px 4px; font-size: 15px; white-space: nowrap;
        }
        .bf-allsol { display: none; }
      }

      /* ---- dark treatment: "Built for healthcare" reads as a dark band ---- */
      .builtfor {
        background:
          radial-gradient(680px 360px at 82% -6%, rgba(16, 185, 129, 0.14), transparent 70%),
          #0a1a15;
        border: 1px solid rgba(110, 231, 168, 0.14);
        border-radius: 26px; padding: 52px 54px;
        box-shadow: 0 36px 80px -42px rgba(8, 20, 17, 0.75);
      }
      .builtfor h2 { color: #f8fafc; margin-top: 0; }
      .builtfor .sectionlead { color: #a9b8af; }
      .builtfor .bf-tab { color: #c3d0c8; border-bottom-color: rgba(255, 255, 255, 0.1); }
      .builtfor .bf-tab svg { color: #74857c; }
      .builtfor .bf-tab:hover,
      .builtfor .bf-tab[aria-selected="true"] { color: #6ee7a8; border-bottom-color: #6ee7a8; }
      .builtfor .bf-tab:hover svg,
      .builtfor .bf-tab[aria-selected="true"] svg { color: #6ee7a8; }
      .builtfor .bf-tab:focus-visible { outline-color: #6ee7a8; }
      .builtfor .bf-allsol { color: #6ee7a8; }
      @media (max-width: 820px) {
        .builtfor .bf-tabs { border-bottom-color: rgba(255, 255, 255, 0.1); margin: 0 -54px; padding: 0 54px 2px; }
      }
      @media (max-width: 640px) {
        .builtfor { padding: 30px 20px; border-radius: 20px; }
        .builtfor .bf-tabs { margin: 0 -20px; padding: 0 20px 2px; }
      }

      /* private-map demo: styled map canvas with office pins (product's "clean" palette) */
      .newpill {
        display: block; width: max-content; margin: 0 auto 16px;
        font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
        padding: 4px 12px; border-radius: 99px; background: var(--brand-tint); color: var(--brand);
      }
      .mapdemo { padding: 12px; }
      .mapcanvas { position: relative; height: 150px; border-radius: 10px; overflow: hidden; background: #f8f7f2; border: 1px solid var(--line); }
      .mapcanvas i { position: absolute; display: block; }
      .mapcanvas .water { right: -34px; top: -44px; width: 150px; height: 130px; border-radius: 46% 54% 60% 40%; background: #b9dbea; transform: rotate(18deg); }
      .mapcanvas .park { left: 6%; bottom: -28px; width: 110px; height: 80px; border-radius: 50% 50% 42% 58%; background: #dcebd9; }
      .mapcanvas .park.p2 { left: 56%; top: 62%; width: 70px; height: 48px; }
      .mapcanvas .road { background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.05); }
      .mapcanvas .road.r1 { left: -5%; right: -5%; top: 42%; height: 7px; transform: rotate(-7deg); }
      .mapcanvas .road.r2 { left: 30%; top: -10%; bottom: -10%; width: 6px; transform: rotate(14deg); }
      .mapcanvas .road.r3 { left: 64%; top: -10%; bottom: -10%; width: 5px; transform: rotate(-11deg); }
      .mapcanvas .road.r4 { left: -5%; right: -5%; top: 76%; height: 5px; transform: rotate(4deg); }
      .mappin { position: absolute; width: 15px; height: 15px; border: 2.5px solid #fff; border-radius: 50% 50% 50% 0; background: var(--brand); transform: rotate(-45deg); box-shadow: 0 2px 7px rgba(15,23,42,.35); }
      .mappin::after { content: ''; position: absolute; inset: -11px; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; transform: rotate(45deg); animation: pinpulse 3s ease-out infinite; }
      .mappin.d2::after { animation-delay: 1s; } .mappin.d3::after { animation-delay: 2s; }
      @keyframes pinpulse { 0% { opacity: .55; transform: rotate(45deg) scale(.4); } 70% { opacity: 0; transform: rotate(45deg) scale(1.15); } 100% { opacity: 0; } }
      .mapnear {
        position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
        background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 5px 11px;
        font-size: 10.5px; font-weight: 700; color: var(--ink); box-shadow: 0 4px 14px rgba(15,23,42,.14);
      }
      .mapnear::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
      .mapcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
      .mapcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; font-size: 11px; color: var(--muted); }
      .mapcard b { display: block; font-size: 12px; color: var(--ink); margin-bottom: 2px; }
      .mapcard a { display: inline-block; margin-top: 5px; color: var(--brand); font-weight: 700; font-size: 10.5px; }
      @media (prefers-reduced-motion: reduce) { .mappin::after { animation: none; } }
      .mapcard-br { display: none; }
      @media (min-width: 821px) { .mapcard-br { display: inline; } }

      /* section spacing (responsive) */
      .mt-xl { margin-top: 96px; }
      .mt-lg { margin-top: 64px; }
      @media (max-width: 640px) {
        .mt-xl { margin-top: 50px; }
        .mt-lg { margin-top: 40px; }
        .hero { padding: 46px 6px 16px; }
        .hero .sub { font-size: 15px; }
        .checkrow { gap: 10px 18px; }
        .flow { margin-top: 30px; }
      }