:root{
  /* RST hues mapped onto MedCare's color roles */
  --blue:#1266B8;          /* vivid field / feature headings  (their #0878B8 role) */
  --blue-2:#0E5AA6;
  --blue-d:#0D4E8F;        /* heading royal blue (their #044F94 role) */
  --navy:#0F2E4C;          /* heading ink */
  --teal:#18A89E;          /* CTA / accent — logo brand teal, unified 16 Sep 2026 */
  --teal-d:#0E615C;--teal-l:#62D2C4;--teal-p:#E8F8F5;
  --ink:#22313D;--gray:#5F6E7B;--gray-l:#5A6873;
  --band:#F1F6FA;--tint:#EAF3FB;--line:#E4EBF1;--white:#fff;
  --f:'Poppins','Poppins Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sh:0 6px 22px -8px rgba(18,63,115,.14);
  --sh-big:0 26px 60px -24px rgba(15,46,76,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--ink);background:#fff;overflow-x:hidden}
img{max-width:100%;display:block}
/* skip link: off-screen until focused, then a real 44px target */
/* B1: the header sat flush against a white hero with nothing between them. The scroll
   shadow already existed (.sc, toggled in mc.js) — what was missing was the boundary at
   rest, so a hairline goes on .hd and hands over to the shadow once .sc applies. */
.hd{border-bottom:1px solid #E4EDF2}
.hd.sc{border-bottom-color:transparent}

/* The off-screen state needs the 44px box too. Without it the element measures 25px
   and trips the touch-target gate, which is the same defect the build log records as
   fixed once before — reintroduced when I added this skip link. */
.skiplink{position:absolute;left:-9999px;top:0;z-index:999;display:flex;align-items:center;
  min-height:44px;padding:0 18px;font:600 14px/1 var(--f);text-decoration:none}
.skiplink:focus{left:12px;top:12px;background:var(--blue-d);color:#fff;
  border-radius:8px;box-shadow:0 8px 24px -10px rgba(11,28,57,.6)}
#main:focus{outline:none}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap{width:min(1300px,90%);margin:0 auto;padding:0}
.pill{display:inline-block;background:var(--teal);color:#fff;font:600 14px/18px var(--f);padding:13px 26px;border-radius:30px;transition:.4s;box-shadow:0 8px 20px -10px rgba(16,160,144,.5)}
/* The header CTA is the primary action on every page, so it is deliberately larger
   than the body pills and carries a ring that separates it from the white bar. */
.hd .bar .pill{font-size:15.5px;padding:16px 34px;letter-spacing:.005em;
  box-shadow:0 10px 24px -10px rgba(24,168,158,.55), 0 0 0 4px rgba(24,168,158,.12)}
.hd .bar .pill:hover{box-shadow:0 12px 28px -10px rgba(24,168,158,.62), 0 0 0 5px rgba(24,168,158,.18)}
.pill:hover{background:#148A82;transform:translateY(-1px)}
.pill.dark{background:#101820;box-shadow:none}
.pill.dark:hover{background:#000}
/* Get Free Audit: graceful attention pulse. Ring only, so no layout cost and
   no CLS. Paused on hover/focus so the hover state stays responsive, and the
   global prefers-reduced-motion block above disables it outright. */
/* D: the old version animated box-shadow only, which was imperceptible against a
   busy header. This scales the button on a double beat then rests, which also rhymes
   with the heartbeat in the logo. Amplitude kept low (4%) so the label stays crisp;
   transform-origin is centred so it grows evenly rather than drifting. */
@keyframes pillBeat{
  0%,46%,100%{transform:scale(1);box-shadow:0 8px 20px -10px rgba(24,168,158,.5)}
  12%{transform:scale(1.04);box-shadow:0 12px 26px -10px rgba(24,168,158,.62)}
  22%{transform:scale(1);box-shadow:0 8px 20px -10px rgba(24,168,158,.5)}
  32%{transform:scale(1.028);box-shadow:0 10px 24px -10px rgba(24,168,158,.56)}
}
.pill--pulse{animation:pillBeat 2.9s ease-in-out infinite;transform-origin:50% 50%;
  will-change:transform;backface-visibility:hidden}
.pill--pulse:hover,.pill--pulse:focus-visible{animation-play-state:paused}
.pill--pulse.dark{animation:none}
h2.sec{font:700 45px/1.1 var(--f);color:var(--blue-d);letter-spacing:1px}
.sub{font:400 16px/24px var(--f);color:#000}
/* reveal animation only when JS is present to finish it — without this gate
   every .rev node was invisible with JS off (progressive-enhancement rule) */
html.js .rev{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
html.js .rev.vis{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--teal-l);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.js .rev{opacity:1;transform:none}}

/* ================= header + mega menu ================= */
.hd{position:sticky;top:0;z-index:200;background:#fff;
  transition:box-shadow .25s ease,border-color .25s ease}
.hd.sc{box-shadow:0 2px 16px -6px rgba(15,46,76,.16)}
.hd .bar{width:min(1300px,90%);margin:0 auto;padding:0;height:92px;display:flex;align-items:center;gap:30px}
.hd .bar>a img{height:66px;width:auto}
/* The right-hand group was pushed over by margin-left:auto on the nav. That
   works until the nav is hidden, and then the job passed to the CTA pill,
   and when the pill is hidden too (below 768px) nothing carried it at all and
   the burger collapsed back against the logo. The logo now claims the free
   space instead, so everything after it is right-aligned no matter which of
   nav / pill / burger a breakpoint happens to show. */
.hd .bar>a:first-child{margin-right:auto}
.hd nav{display:flex}
.hd .ni{position:relative}
.hd .ni>a{font:400 14px/21px var(--f);color:var(--blue-d);display:flex;align-items:center;gap:6px;padding:30px 14px;transition:color .2s}
.hd .ni>a:hover{color:var(--teal)}
.hd .ni>a.drop::after{content:"";width:7px;height:7px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:.2s}
.hd .ni:hover>a.drop::after{transform:rotate(225deg) translateY(-2px)}
.hd .ni{position:static}
.mega{position:absolute;top:100%;left:0;right:0;transform:translateY(10px);background:#fff;border-top:1px solid var(--line);box-shadow:0 40px 70px -30px rgba(15,46,76,.3);padding:40px calc((100vw - 1300px)/2);opacity:0;visibility:hidden;transition:.22s;display:flex;gap:60px;justify-content:center}
.hd .ni:hover .mega,.hd .ni:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega .mh6{font:600 12px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--gray-l);margin-bottom:14px;white-space:nowrap}
.mega ul{min-width:225px}
.mega li a{display:flex;align-items:center;gap:12px;font:400 16px/1.5 var(--f);color:var(--teal-d);padding:9px 8px;border-radius:8px;transition:.15s;white-space:nowrap}
.mega li a:hover{background:var(--teal-p);color:var(--teal-d)}
.mega li svg{width:17px;height:17px;stroke:var(--teal);flex:none}
.mega .feat2{width:230px;background:var(--band);border-radius:10px;padding:18px}
.mega .feat2 svg{width:26px;height:26px;stroke:var(--teal);margin-bottom:10px}
.mega .feat2 b{display:block;font:500 13.5px/1.4 var(--f);color:var(--navy);margin-bottom:6px}
.mega .feat2 p{font:300 12px/1.6 var(--f);color:var(--gray);margin-bottom:12px;white-space:normal}
.mega .feat2 a{font:500 12px/1 var(--f);color:var(--teal-d)}

/* burger + mobile nav (shown <=1200 per their collapse point) */
.burger{display:none;flex-direction:column;gap:5px;margin-left:14px;padding:13px 10px;min-width:44px;min-height:44px;justify-content:center;align-items:center;cursor:pointer}
.burger i{display:block;width:24px;height:2.5px;background:var(--navy);border-radius:2px;transition:.25s}
.burger.open i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mnav{display:none;position:fixed;left:0;right:0;top:var(--hdh,78px);bottom:0;background:#fff;z-index:190;padding:18px 5% 40px;overflow:auto}
.mnav.open{display:block}
.mnav a{display:block;font:500 17px/1.4 var(--f);color:var(--navy);padding:14px 2px;border-bottom:1px solid var(--line)}
.mnav a:active{color:var(--teal)}
.mnav .pill{display:inline-block;margin-top:20px;border:none}

/* ================= hero ================= */
.hero{position:relative;background:#FFFFFF;color:var(--navy);overflow:hidden}
.hero h1,.hero .hh1{color:var(--blue-d)}
.hero .lead{color:#546089}
.hero .pts li{color:#3d4b63}
.hero .ghost{border-color:var(--blue-d);color:var(--blue-d)}
.hero .ghost:hover{background:#F1F6FA}
.hero .nav2 button{background:#EDF3F8;color:var(--navy);border:1px solid var(--line)}
.hero .nav2 button:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.hero .float{border:1px solid var(--line);box-shadow:0 14px 30px -16px rgba(7,42,74,.30)}
.hero .blob{position:absolute;right:-60px;top:-24px;width:1010px;height:1010px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #C7EAE3 0%, #D5F0EA 46%, #E6F6F2 72%, #F4FBF9 86%, rgba(244,251,249,0) 94%)}
.hero .blob2{display:none}
html.js .hero .slide{display:none}
html.js .hero .slide.on{display:block}
.hero .in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 548px;gap:34px;align-items:start;padding:88px 0 12px}
/* Hero text was 95 words in six stacked blocks, and every badge in it also
   appears in the trust strip below. The four badge cards are hidden here rather
   than deleted (one line to restore), the lead is cut to a single sentence, and
   the headline finally gets hero scale — 95 words down to 55. */
/* The three slides have headlines of different lengths (3, 4 and 4 lines), so
   without a reserved block the CTAs and stats moved up to 226px between slides
   and the whole page below the hero jumped as it rotated. Reserve the tallest. */
.hero h1,.hero .hh1{font:700 58px/70px var(--f);margin:0 0 20px;max-width:17.4ch;
  min-height:210px;min-height:3lh;display:grid;align-content:end}
.hero .lead{min-height:93px;min-height:4lh}
@media(max-width:1280px){.hero .lead{min-height:0}}
.hero .badges{display:none}
.hero .lead{font:400 17px/31px var(--f);color:#546089;max-width:60ch;margin-bottom:26px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.hero .ghost{display:inline-block;border:1.5px solid #B9C6D4;color:var(--blue-d);font:500 14px/1 var(--f);padding:15px 28px;border-radius:999px;transition:.2s}
.hero .ghost:hover{background:#F1F6FA;border-color:var(--blue-d)}
.hero .pts{display:flex;gap:14px 24px;flex-wrap:wrap}
.hero .pts li{font:400 12.5px/1.5 var(--f);color:#3d4b63;display:flex;align-items:center;gap:7px}
.hero .pts li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.4 4.6 8.4 10.5 1.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px 7px no-repeat}
/* On the hero's blue ground four solid-white cards read as a wall and compete
   with the CTA for attention. Translucent keeps them legible without shouting;
   the icon chip stays opaque so the duotone marks still read. */
.hero .badges .b{background:#fff;border:1px solid var(--line);color:var(--navy);
  box-shadow:0 10px 24px -14px rgba(7,42,74,.30)}
.hero .badges .b .dt{background:#F2F7FB}
.hero .vis1{position:relative}
.hero .vis1{justify-self:end;position:relative;min-width:0}
.hero .shot{width:722px;max-width:none;border-radius:18px;overflow:hidden;box-shadow:var(--sh-big);border:6px solid rgba(255,255,255,.9);margin-right:-10px;margin-top:-90px}
.hero .shot img{width:100%;height:589px;object-fit:cover}
/* Frameless hero figure — the MedCare arrangement the client asked for: a
   background-removed cutout standing directly on the hero ground, overlapping
   the brand shape and bleeding off the bottom edge, so headline, badges and
   figure read as one surface instead of a card pasted onto one. */
.hero .vis1--cut{align-self:end;justify-self:end;margin-bottom:-12px}
.hero .shot--cut{width:auto;max-width:none;border:0;border-radius:0;overflow:visible;
  box-shadow:none;margin:0 -30px -156px 0;display:block}
.hero .shot--cut picture{display:block}
.hero .shot--cut img{width:auto;max-width:none;height:806px;object-fit:contain;display:block;
  filter:drop-shadow(0 22px 34px rgba(15,60,100,.16))}
/* the stat pill moves into the text column, the way the reference puts its
   trust pill under the CTA — so nothing floats on top of the figure */
.hero .float.float--inline{position:static;margin:26px 0 0;align-self:start;width:fit-content}
.hero .float{position:absolute;left:-26px;bottom:-18px;background:#fff;border-radius:12px;padding:14px 18px;color:var(--navy);box-shadow:var(--sh-big);display:flex;gap:12px;align-items:center}
.hero .float b{font:600 20px/1 var(--f);color:var(--teal-d);display:block}
.hero .float span{font:400 12px/1.3 var(--f);color:var(--gray)}
.hero .nav2{position:relative;z-index:3;display:flex;gap:10px;padding:34px 0 30px}
.hero .nav2 button{width:44px;height:44px;border-radius:50%;background:#EDF3F8;color:var(--navy);border:1px solid var(--line);font-size:16px;display:grid;place-items:center;transition:.2s}
.hero .nav2 button:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.badges .b{flex:1 1 0;min-width:118px;display:flex;align-items:center;gap:8px;background:#fff;border-radius:8px;padding:10px 10px;font:500 12px/1.35 var(--f);color:var(--navy);box-shadow:0 10px 22px -12px rgba(7,42,74,.5);height:auto;min-height:50px}
.badges svg{width:16px;height:16px;stroke:var(--teal);flex:none}
/* receipt (slide 2 visual) */
.rc{background:#fff;border-radius:16px;padding:24px 24px 14px;color:var(--ink);box-shadow:var(--sh-big)}
.rc .rh{display:flex;justify-content:space-between;gap:10px;font:600 12px/1.3 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);padding-bottom:12px;border-bottom:1px solid var(--line)}
.rc .rh s{color:var(--gray-l);text-decoration:none;font-weight:400;letter-spacing:.02em}
.rc li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:7.5px 0;border-bottom:1px solid #F0F5F9;font:400 12.5px/1.45 var(--f);color:var(--gray)}
.rc li b{font-weight:600;color:var(--teal-d);white-space:nowrap}
.rc li i{display:block;font:400 12px/1.4 var(--f);font-style:normal;color:var(--gray-l)}
.rc .tot{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0 4px;font:600 13px/1 var(--f);color:var(--navy)}
.rc .tot b{font-size:22px;color:var(--teal-d)}
.rc .fine{font:400 9.5px/1.5 var(--f);color:var(--gray-l);padding-top:6px}

/* ================= intro statement ================= */
.intro{padding:5% 0 24px}
.intro p{font:300 40px/58px var(--f);color:#000;max-width:939px}
.intro p b{font-weight:500;color:var(--teal-d)}

/* ================= flagship cards — expanding system (measured behavior) ================= */
/* B2/B3: the row used a 1% top padding (resolved to 14.39px) and 14px side gutters,
   so it sat on a third edge that matched neither the 72px grid nor a true bleed. Now
   it is a proper 5-up grid on the same container as everything else. The old
   hover-slide is gone: the row exactly fitted 1440px, so the slide did nothing there
   and moving content under the cursor is a poor interaction anyway. */
.flag{padding:24px 0 0;overflow-x:clip}
.flag .bleed{width:min(1300px,90%);margin:0 auto;padding:0}
.flag .row{display:flex;gap:16px;transition:transform .5s ease}
.flag .row:has(.x4:hover){transform:translateX(-5%)}
.flag .row:has(.x5:hover){transform:translateX(-18%)}
.xcard{position:relative;flex:0 0 auto;width:calc(20% - 12.8px);height:428px;border-radius:10px;overflow:hidden;color:#fff;display:block;background-color:rgba(19,19,19,.4);background-size:cover;background-position:center;transition:width .5s ease}
/* Scrims, not a wash: the type sits in a dark band top and bottom and the
   middle of the photograph is left alone, so the picture still reads. */
/* The old scrim was two gradients that faded to fully transparent across the middle
   of the card. That worked when the background was a dark stock photo. The owned
   document scenes are light cream, so a dark band at top, a pale middle and a dark
   band at the bottom read as grey mud. It is now one even veil across the whole card
   with a slight lift at the top where the type sits: the document stays legible as a
   texture, the white type has a consistent ground, and there is no banding. */
/* Scrim for photographic cards: a strong band under the type at the top and under
   the CTA at the bottom, clearing through the middle so the photograph reads. The
   even full-card veil that replaced this was built for light cream document scenes
   and made a dark photo look flat. Band depths are set by the measured contrast of
   white type against the real composited pixels, not by eye. */
.xcard::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(6,17,30,.95) 0%,rgba(6,17,30,.92) 26%,rgba(6,17,30,.72) 38%,rgba(6,17,30,.34) 50%,rgba(6,17,30,.08) 62%),
  linear-gradient(0deg,rgba(6,17,30,.92) 0%,rgba(6,17,30,.76) 12%,rgba(6,17,30,.28) 22%,rgba(6,17,30,0) 32%)}
.xcard:hover{width:calc(20% - 12.8px + 295px)}
.xcard:hover::before{background:
  linear-gradient(180deg,rgba(9,22,38,.94) 0%,rgba(9,22,38,.88) 28%,rgba(9,22,38,.62) 52%,rgba(9,22,38,.34) 72%,rgba(9,22,38,.16) 100%),
  linear-gradient(0deg,rgba(9,22,38,.92) 0%,rgba(9,22,38,.74) 14%,rgba(9,22,38,.28) 30%,rgba(9,22,38,0) 44%)}
.xcard .box{position:relative;z-index:2;height:100%;padding:26px 22px 24px;display:flex;flex-direction:column}
.xcard .box::after{content:"";position:absolute;left:0;right:0;bottom:70px;height:1px;background:#fff}
.xcard .kick{font:400 12px/14px var(--f);letter-spacing:3px;text-transform:capitalize;color:#fff;margin-bottom:28px}
.xcard .mainhead{display:flex;justify-content:space-between;align-items:flex-start;gap:0px}
/* Sized to the card, not the viewport. The binding constraint is the longest single
   unbreakable word ("Credentialing", 13 characters) inside cardWidth - 40px of padding.
   24px keeps it at roughly 175px against 202px available, with headroom at 1280 too.
   The expanded state can afford more, so it steps up on hover. */
.xcard .bigh{font:700 25px/1.2 var(--f);color:#fff;flex:1 1 auto;min-width:0;
  letter-spacing:-.01em;hyphens:auto;overflow-wrap:break-word;transition:font-size .35s ease}
.xcard:hover .bigh{font-size:31px}
.xcard .icon{margin-top:104px;transition:.3s}
.xcard .icon svg{width:60px;height:60px;stroke:#fff;opacity:.95;stroke-width:1.1}
.xcard:hover .icon{opacity:0;height:0;margin:0;overflow:hidden}
html.js .xcard .xdesc{opacity:0;flex:0 0 0%;max-width:0;max-height:0;overflow:hidden;transition:.5s;font:400 13px/1.75 var(--f);color:#fff;margin-top:8px}
html.js .xcard .xlist{opacity:0;max-height:0;overflow:hidden;transition:.5s;margin-top:10px}
.xcard .xlist li{font:400 14px/1.5 var(--f);color:#fff;padding:5px 0 5px 22px;position:relative}
.xcard .xlist li::before{content:"\2713";position:absolute;left:0;color:var(--teal-l);font-weight:700}
.xcard:hover .xdesc,html.js .xcard:hover .xdesc{opacity:1;flex-basis:55%;max-width:55%;max-height:300px}
.xcard:hover .mainhead{gap:16px}
.xcard:hover .xlist,html.js .xcard:hover .xlist{opacity:1;max-height:150px}
.xcard .cfoot{margin-top:auto;display:flex;column-gap:10px;align-items:baseline;font:500 12.8px/19px var(--f);color:#5ECDBF}
.xcard .cfoot .txt{transition:.5s;margin-right:10px}
.xcard:hover .cfoot .txt{margin-right:20px}

/* ================= KPI band — their 4-col topology (measured) ================= */
/* ═════════ KPI band — rebuilt 16 Sep 2026 ═════════
   The inherited topology put the heading and paragraph in columns 1-2 and then
   hung two stats in columns 3-4 of the paragraph's row, with the remaining four
   on a third row pushed down 111px. That produced: an empty right half beside
   the heading, a void under the paragraph, a 111px dead band across the middle,
   two stats aligned to nothing, and centre-aligned numbers sitting next to
   left-aligned prose — two alignment systems in one section. Nothing lined up
   with anything, which is why it did not hold the eye.

   Now: the claim on the left, the evidence on the right, as a 3x2 block on one
   baseline grid. The grouping carries meaning too — top row is what we commit
   to operationally, bottom row is what is structurally true of the firm. */
.kpi{background:#F2F7FC;padding:5.5% 0;position:relative;overflow:hidden}
/* The two decorative circles were 820px and 560px anchored off the right edge,
   so they cropped mid-arc and cut through two stats and not the other four —
   the lopsided background the section was read as having. The dashed rule at
   left:40px began and ended in empty space, attached to nothing. Both gone. */
.kpi .dash{display:none}
.kpi .grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:96px;align-items:center}

.kpi .kcol{grid-column:1}
.kkick{display:block;font:600 12px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-d);margin-bottom:16px}
.kpi h2.sec{font:700 45px/56px var(--f);letter-spacing:-.005em;color:var(--blue-d);margin:0 0 18px}
.kpi .para{font:400 16px/27px var(--f);color:#3F4C58;margin:0;max-width:44ch}
.kpi .talk{margin-top:30px;text-align:left}

/* Evidence grid. align-content:start inside each cell keeps the labels on a
   shared baseline even though one stat carries a third line. */
.kpi .stats{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:30px;row-gap:46px}
.kpi .st{text-align:left;display:flex;flex-direction:column;align-items:flex-start;
  padding-left:22px;border-left:1px solid #DCE6EF}
.kpi .n{font:700 50px/1.06 var(--f);color:var(--navy);letter-spacing:-.02em;
  display:flex;align-items:baseline}
/* 11px between the figure and its unit split "97 %+" into two separate tokens.
   The unit also now carries the accent colour, so the eye has somewhere to go —
   teal-d rather than --teal, which measures only 2.73:1 on this background and
   fails even the large-text threshold. */
.kpi .n small{font:400 .56em/1 var(--f);color:var(--teal-d);margin-left:4px;letter-spacing:0}
.kpi .l{font:500 15.5px/23px var(--f);color:#42505E;margin-top:12px}
.kpi .x{font:400 12.5px/19px var(--f);color:var(--gray-l);margin-top:6px}

/* ================= feature slider ================= */
.feat{padding:5% 0 0}
.feat .in{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.feat .q{font:700 78px/0.55 Georgia,serif;color:var(--teal-l)}
html.js .feat .fs{display:none}
html.js .feat .fs.on{display:block;animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.feat h3{font:700 43.2px/60px var(--f);color:var(--blue-d);margin:16px 0 14px}
.feat .fs p{font:400 16px/24px var(--f);color:var(--blue-d);max-width:46ch}
.feat .ctl{display:flex;align-items:center;gap:16px;margin-top:28px}
.feat .ar{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);color:var(--navy);display:grid;place-items:center;transition:.2s;background:#fff}
.feat .ar:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.dots{display:flex}
.dots button{width:44px;height:44px;border-radius:50%;background:none;display:grid;place-items:center}
.dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:#C7D5DF;transition:.2s}
.dots button.on::before{background:var(--teal);transform:scale(1.3)}
.browser{width:648px;max-width:100%;justify-self:end;margin-bottom:-48px;position:relative;z-index:2;background:#fff;border-radius:14px;box-shadow:var(--sh-big);overflow:hidden;border:1px solid var(--line)}
.browser .tb{display:flex;gap:6px;align-items:center;background:#F2F6F9;border-bottom:1px solid var(--line);padding:11px 14px}
.browser .tb i{width:10px;height:10px;border-radius:50%;background:#D9E2E9}
.browser .tb i:first-child{background:#F4A9A0}
.browser svg{display:block;width:100%;height:auto;aspect-ratio:640/640}.browser .tb i:nth-child(2){background:#F6D48E}.browser .tb i:nth-child(3){background:#9FD8B4}
.browser .tb span{margin-left:10px;font:400 12px/1 var(--f);color:var(--gray-l);background:#fff;border-radius:6px;padding:5px 12px;flex:1}

/* ================= care programs ================= */
/* ---- Care programs -------------------------------------------------------
   Wide screens: the eight programs orbit a "$0 setup" hub. Each node shows
   its code and name; hovering (or tabbing to) one pushes it further out and
   opens its description. Below 1200px the same markup falls back to the plain
   two-column card grid, so touch users lose nothing.                        */
.care{background:var(--tint);padding:5% 0}
.care .cin{display:grid;grid-template-columns:392px 1fr;gap:44px;align-items:center}
.care .head{max-width:none;margin:0;text-align:left}
.care .head .sec{margin-bottom:14px}
.care .head .sub{font:400 16px/27px var(--f);color:#4E5C68;margin-bottom:24px}
.care .zh{font:600 12px/1 var(--f);color:var(--teal-d);text-transform:uppercase;letter-spacing:.11em;
  margin:0 0 13px;padding-top:18px;border-top:1px solid #C9DDE6}
.care .zl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.care .zl li{font:400 14.5px/22px var(--f);color:#3F5060;padding-left:26px;position:relative}
.care .zl li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.4 4.6 8.4 10.5 1.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px 7px no-repeat}
.care .zcta{display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  font:600 14px/1 var(--f);color:var(--teal-d);min-height:44px}
.care .zcta:hover{color:var(--blue-d)}

/* --- fallback / small-screen card grid --- */
.care .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.care .hub{display:none}
.care .c{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:19px 20px 20px 62px;position:relative;transition:.25s}
.care .c:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--teal-l)}
.care .ab{display:inline-block;font:600 12px/1 var(--f);letter-spacing:.08em;color:var(--teal-d);
  background:var(--teal-p);border-radius:6px;padding:5px 8px}
.care h3{font:600 15.5px/1.4 var(--f);color:var(--blue);margin:6px 0 5px}
.care p{font:400 13.5px/1.65 var(--f);color:#4E5C68}

/* --- the ring, wide screens only ---
   Cards sit on an ELLIPSE (wider than tall, because the cards themselves are
   wide and short) at explicit x/y offsets, and every card is the same fixed
   size. Both are needed for the gaps to read as even: equal angles on a circle
   with variable-height cards is what made the spacing look random. */
@media(min-width:1440px){
  .care .cin{grid-template-columns:384px 1fr;gap:32px}
  .care .grid.ring{position:relative;display:block;width:880px;max-width:100%;height:600px;margin:0 auto}

  .care .hub{display:grid;place-content:center;text-align:center;gap:2px;
    position:absolute;left:50%;top:50%;width:232px;height:232px;border-radius:50%;
    transform:translate(-50%,-50%);color:#fff;
    background:linear-gradient(160deg,#0F3B57 0%,#0C5C63 58%,#0E7A73 100%);
    box-shadow:0 26px 52px -26px rgba(8,50,70,.55),0 0 0 14px rgba(16,160,144,.09)}
  .care .hub b{font:700 60px/1 var(--f);letter-spacing:-.02em}
  .care .hub span{font:500 12.5px/1.45 var(--f);color:#B8E7E0;
    text-transform:uppercase;letter-spacing:.1em}

  .care .grid.ring .c{position:absolute;left:50%;top:50%;width:190px;height:100px;
    padding:13px 16px;border-radius:14px;border-color:#DCE7EE;
    box-shadow:0 10px 26px -18px rgba(12,48,74,.42);overflow:hidden;
    transition:transform .34s cubic-bezier(.4,1.3,.5,1),box-shadow .34s,width .34s,height .34s,opacity .5s;
    --k:1;z-index:1}
  /* the elliptical placement has to out-rank the reveal animation's transform */
  .care .grid.ring .c,
  html.js .care .grid.ring .c.rev,
  html.js .care .grid.ring .c.rev.vis{
    transform:translate(-50%,-50%) translate(calc(var(--x) * var(--k)),calc(var(--y) * var(--k)))}
  html.js .care .grid.ring .c.rev{opacity:0}
  html.js .care .grid.ring .c.rev.vis{opacity:1}

  .care .grid.ring .c .cmark{display:flex;align-items:center;gap:9px;margin:0 0 5px}
  .care .grid.ring .c .cmark .dt{position:static;width:30px;height:30px;border-radius:9px;margin:0}
  .care .grid.ring .c .cmark .dt svg{width:19px;height:19px}
  .care .grid.ring .c h3{font:600 14px/19px var(--f);margin:0}
  .care .grid.ring .c p{max-height:0;opacity:0;overflow:hidden;margin:0;
    transition:max-height .34s,opacity .28s,margin .34s}

  .care .grid.ring .c:hover,.care .grid.ring .c:focus-within,
  html.js .care .grid.ring .c.rev.vis:hover,
  html.js .care .grid.ring .c.rev.vis:focus-within{--k:1.13;width:262px;height:186px;z-index:6;
    box-shadow:0 26px 52px -22px rgba(12,48,74,.5);border-color:var(--teal-l)}
  .care .grid.ring .c:hover p,.care .grid.ring .c:focus-within p{max-height:110px;opacity:1;margin-top:7px}

  /* ellipse rx 350 / ry 223: chosen so the edge gap is ~57px on every side */
  .care .grid.ring .c:nth-of-type(2){--x:0px; --y:-223px}
  .care .grid.ring .c:nth-of-type(3){--x:247px; --y:-158px}
  .care .grid.ring .c:nth-of-type(4){--x:350px; --y:0px}
  .care .grid.ring .c:nth-of-type(5){--x:247px; --y:158px}
  .care .grid.ring .c:nth-of-type(6){--x:0px; --y:223px}
  .care .grid.ring .c:nth-of-type(7){--x:-247px; --y:158px}
  .care .grid.ring .c:nth-of-type(8){--x:-350px; --y:0px}
  .care .grid.ring .c:nth-of-type(9){--x:-247px; --y:-158px}
}
@media(prefers-reduced-motion:reduce){.care .grid.ring .c{transition:none}}

/* ================= audit defense (icon-list rows) ================= */
.aud{padding:5% 0}
.aud .top{max-width:800px;margin-bottom:28px}
.aud .in{display:grid;grid-template-columns:1fr 648px;gap:56px;align-items:start}
/* One hanging-icon column, one text column. Heading and body share the same
   left edge, so the block reads as a list instead of a ragged stack. */
.aud .list{display:flex;flex-direction:column;gap:42px;max-width:none;padding-left:0}
.aud .it{position:relative;padding-left:56px}
.aud .it .h{display:block;margin-bottom:4px}
.aud .it .h .dt{position:absolute;left:0;top:1px;margin:0}
.aud .it svg{width:22px;height:22px;stroke:var(--teal);flex:none}
.aud .it h3{font:600 19px/27px var(--f);color:var(--blue-d);margin:0}
.aud .it p{font:400 15px/26px var(--f);color:#46546B;margin:0;max-width:56ch}

.aud .shot2{border-radius:14px;overflow:hidden;box-shadow:var(--sh-big);position:relative;width:648px}
.aud .shot2 img{width:100%;height:689px;object-fit:cover}
.aud .shot2 .cap{position:absolute;left:16px;bottom:16px;right:16px;background:#fff;border-radius:10px;padding:14px 16px;display:flex;gap:20px}
.aud .shot2 .cap b{font:600 19px/1 var(--f);color:var(--teal-d);display:block;margin-bottom:4px}
.aud .shot2 .cap span{font:400 12px/1.4 var(--f);color:var(--gray)}

/* ================= specialties (bare icons, MedCare treatment) ================= */
.spec{padding:5% 0;background:#F2F7FC}
.spec .head{max-width:780px;margin:0 auto 20px;text-align:center}
.spec .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px 13px;margin-bottom:48px}
.spec .s{text-align:center;transition:.2s;min-height:164px}
.spec .s:hover{transform:translateY(-4px)}
.spec .s svg{width:86px;height:86px;margin:0 auto 13px;stroke-width:1.1}
.spec .s svg .a{stroke:var(--blue)}
.spec .s svg .b{stroke:var(--teal)}
.spec .s span{font:500 18px/24px var(--f);color:#4F4F4F}
.spec .all{text-align:center}
.spec .more{text-align:center;font:400 12px/1.6 var(--f);color:var(--gray-l);margin-top:18px}

/* ================= testimonials (photo-left, MedCare treatment) ================= */

/* ================= trust band — three logo slots, no captions =================
   Drop hipaa.png / iso.png / aapc.png into assets/img/logos/ and they appear.
   Until then each slot renders as an empty dashed frame. No text either way. */
.trust{background:linear-gradient(180deg,#EAF7F4 0%,#E9F3F9 60%,#EFF8FB 100%);
  padding:5% 0;position:relative;overflow:hidden;border-top:3px solid var(--teal)}
.trust::before{content:"";position:absolute;left:-160px;bottom:-260px;width:620px;height:620px;
  border-radius:50%;background:radial-gradient(circle,rgba(16,160,144,.16) 0%,rgba(16,160,144,.05) 55%,rgba(16,160,144,0) 74%)}
.trust::after{content:"";position:absolute;right:-190px;top:-280px;width:700px;height:700px;
  border-radius:50%;background:radial-gradient(circle,rgba(18,102,184,.13) 0%,rgba(18,102,184,.04) 55%,rgba(18,102,184,0) 74%)}
.trust .wrap{position:relative;z-index:1}
.trust .row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.trust .tc{background:#fff;border-radius:12px;height:170px;display:flex;align-items:center;justify-content:center;padding:26px 30px;box-shadow:var(--sh)}
.trust .tc img{width:100%;height:120px;object-fit:contain;display:block}
.trust .lslot{display:none;width:100%;height:100px;border:1.5px dashed #C3D4E2;border-radius:8px}
.trust .note{display:none}

/* ================= contact ================= */
.ct{padding:5% 0;position:relative;overflow:hidden}
.ct::before{content:"";position:absolute;left:38px;top:110px;height:340px;border-left:2px dashed #C9D6E2}
.ct::after{content:"";position:absolute;left:-240px;top:-160px;width:760px;height:760px;border-radius:50%;background:var(--tint);z-index:0}
.ct .in{position:relative;z-index:1}
.ct .in{display:grid;grid-template-columns:1fr 700px;gap:66px;align-items:start}
.ct .side h2{font:600 45px/54px var(--f);color:#000;letter-spacing:1px;margin-bottom:50px}
.ct .side .sub{font:400 22px/37px var(--f);color:#000;margin-bottom:26px}
.ct .side li{font:400 13.5px/1.6 var(--f);color:var(--gray);padding:9px 0 9px 30px;position:relative}
.ct .side li::before{content:"✓";position:absolute;left:0;top:9px;width:19px;height:19px;border-radius:50%;background:var(--teal);color:#fff;font-size:10px;display:grid;place-items:center}
.ct form{padding:6px 0}
.ct .fr{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.ct .fld{display:flex;flex-direction:column;margin-bottom:12px}
.ct .fld label em,.modal .fld label em{font-style:normal;color:#5F6E80;font-weight:400}
.ct label{font:400 14px/22px var(--f);color:#546089;margin-bottom:6px}
.ct input,.ct textarea{border:none;border-bottom:1.5px solid #D6E0E8;font:400 14px/1.5 var(--f);color:var(--ink);padding:14px 2px;background:transparent;transition:.2s}
.ct input:focus,.ct textarea:focus{outline:none;border-color:var(--teal)}
.ct textarea{resize:vertical;min-height:81px}
.ct .cons{display:flex;gap:2px;align-items:flex-start;font:500 12px/1.5 var(--f);color:rgba(14,20,60,.66);margin:18px 0 38px}
.ct .cons input{appearance:none;-webkit-appearance:none;flex:0 0 44px;width:44px;height:44px;margin:-13px 0 -13px -10px;display:grid;place-items:center;cursor:pointer;border:none;background:none}
.ct .cons input::before{content:"";width:19px;height:19px;border:2px solid #B9C6CF;border-radius:5px;background:#fff;transition:.15s}
.ct .cons input:checked::before{background:var(--teal);border-color:var(--teal);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:12px 10px;background-position:center;background-repeat:no-repeat}
.ct .cons input:focus-visible{outline:2px solid var(--teal-d);outline-offset:-8px;border-radius:12px}
.ct .send{width:100%;background:var(--teal);color:#fff;font:500 18px/1 var(--f);padding:20.5px;border-radius:8px;transition:.4s}
.ct .send:hover{background:#148A82}

/* ================= footer (light, MedCare treatment) ================= */
.ft{border-top:1px solid var(--line);padding:42px 0 0;background:#F2F7FC;position:relative;overflow:hidden}
.ft::before{content:"";position:absolute;right:-200px;top:-180px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,160,144,.16) 0%,rgba(16,160,144,.05) 55%,rgba(16,160,144,0) 76%)}
.ft > *{position:relative;z-index:1}
.ft .cols{display:grid;grid-template-columns:repeat(4,209px) 1fr;gap:24px;padding-bottom:46px}
.ft .fh{font:700 16px/1 var(--f);letter-spacing:0;text-transform:uppercase;color:#4F4F4F;margin-bottom:26px}
.ft li a{font:400 13px/16px var(--f);color:#42526E;transition:.2s;display:inline-block;padding:6px 0}
.ft li a:hover{color:var(--teal-d)}
.ft .vm{font:500 12.5px/2.6 var(--f);color:var(--teal-d)}
.ft .news .fld2{display:flex;flex-direction:column;margin-bottom:16px}
.ft .news label{font:400 12px/1.4 var(--f);color:var(--gray-l);margin-bottom:4px}
.ft .news input{border:none;border-bottom:1.5px solid #D6E0E8;font:400 13px/1.5 var(--f);padding:7px 2px;background:transparent;min-height:44px}
.ft .news input:focus{outline:none;border-bottom-color:var(--teal)}
.ft .news .pill.dark{background:var(--teal);font:500 18px/1 var(--f);padding:20.5px 40px;border-radius:100px}
.ft .legal{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;font:300 12px/1.6 var(--f);color:var(--gray)}
.ft .legal .lk a{color:var(--gray);margin-right:16px}
.ft .legal .lk a:hover{color:var(--teal-d)}
.ft .soc{display:flex;gap:10px}
.ft .soc a{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:.2s}
.ft .soc a:hover{background:var(--teal);border-color:var(--teal)}
.ft .soc svg{width:16px;height:16px;stroke:var(--gray)}
.ft .soc a:hover svg{stroke:#fff}

/* ================= popup ================= */
.modal{position:fixed;inset:0;z-index:500;display:none;place-items:center;background:rgba(9,30,50,.55);padding:20px}
.modal.on{display:grid}
.modal .card{background:#fff;border-radius:16px;max-width:560px;width:100%;padding:38px;position:relative;box-shadow:var(--sh-big);max-height:92vh;overflow:auto}
.modal .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--band);color:var(--navy);font-size:16px;display:grid;place-items:center;transition:.2s}
.modal .x:hover{background:var(--teal);color:#fff}
.modal h3{font:600 22px/1.35 var(--f);color:var(--navy);margin-bottom:6px}
.modal .ms{font:300 13px/1.7 var(--f);color:var(--gray);margin-bottom:22px}
.modal .fr{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.modal .fld{display:flex;flex-direction:column;margin-bottom:18px}
.modal label{font:400 12px/1.4 var(--f);color:var(--gray-l);margin-bottom:5px}
.modal input,.modal textarea{border:none;border-bottom:1.5px solid #D6E0E8;font:400 13.5px/1.5 var(--f);padding:7px 2px}
.modal input:focus,.modal textarea:focus{outline:none;border-bottom-color:var(--teal)}
.modal .send{width:100%;background:var(--teal);color:#fff;font:500 14px/1 var(--f);padding:15px;border-radius:8px;transition:.2s;margin-top:6px}
.modal .send:hover{background:#148A82}

.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:150;background:#1B2733;border-radius:10px 0 0 10px;padding:14px 12px;display:flex;flex-direction:column;gap:22px}
.rail a{display:grid;place-items:center}
.rail svg{width:20px;height:20px;stroke:var(--teal-l);transition:.2s}
.rail a:hover svg{stroke:#fff}

/* ============ responsive ladder — their measured breakpoints ============ */
.browser svg{width:100%;height:auto}
.feat .in>*{min-width:0}
.fslides,.fs{min-width:0;max-width:100%}
@media(max-width:1200px){
  .hd nav{display:none}
  .burger{display:flex}
  .hd .bar{gap:16px}
  /* margin-left:auto no longer needed here — see .hd .bar>a:first-child */
  .hero .in{grid-template-columns:1fr 557px;gap:30px;padding-top:80px}
  .hero .shot{width:557px;margin-right:0;margin-top:0}
  .hero .shot img{height:455px;width:100%;object-fit:cover}
  .hero .shot--cut{width:auto;margin:0 -18px -140px 0}
  .hero .shot--cut img{width:auto;height:700px;object-fit:contain}
  .hero .blob{width:560px;height:560px;right:-130px;top:-120px}
  .flag .row{flex-wrap:wrap;gap:36px;transition:none}
  .flag .bleed{width:90%;margin:0 auto;padding:0}
  .flag .row:has(.x4:hover),.flag .row:has(.x5:hover){transform:none}
  /* Five cards in two columns leaves the last row half empty, so the fifth spans the
     full width instead of sitting beside a gap. Height comes down too: the collapsed
     card holds about 155px of content and 585px left most of it dark and empty. */
  .xcard{width:calc(50% - 18px);height:452px}
  .xcard:hover{width:calc(50% - 18px)}
  .xcard.x5{width:100%;height:300px}
  .xcard.x5:hover{width:100%}
  .xcard.x5 .box{max-width:560px}
  .xcard .xdesc,.xcard .xlist{display:none}
  .xcard:hover .icon{opacity:.95;height:auto;margin-top:104px}
  .xcard .bigh{font-size:22px}
  /* The unit is sized in em off the figure now, so setting it here pinned it to
     40px and made it larger than the number it belongs to at narrow widths. */
  .kpi .n{font-size:40px}
  .kpi .l{font-size:16px;line-height:24px}
  .kpi h2.sec,.aud h2.sec,.care h2.sec,.spec h2.sec{font-size:40px;line-height:46px}
  .ft .cols{grid-template-columns:repeat(4,1fr) 1.35fr;gap:18px}
  .ft .news{grid-column:auto;max-width:100%}
  .browser{width:100%}
  .aud .in{grid-template-columns:1fr 1fr;gap:36px}
  .aud .shot2{width:100%}
  .rail{display:none}
}
/* between the tablet stack and the full desktop hero the headline still had
   58px type in a ~400px column — six lines on the longest slide */
@media(min-width:1025px) and (max-width:1280px){
  .hero h1,.hero .hh1{font-size:40px;line-height:52px}
  .hero .lead{font-size:16px;line-height:27px}
  .hero .in{grid-template-columns:1fr 470px;gap:28px}
}
@media(max-width:1024px){
  .care .cin{grid-template-columns:1fr;gap:34px}
  .care .zpanel{max-width:520px}

  .hd .bar{height:90px}
  .hero .blob{width:420px;height:420px;right:-150px;top:-180px}
  .hero .in{grid-template-columns:1fr;padding-top:56px}
  .hero .vis1,.hero .rc{display:none}
  .hero h1,.hero .hh1{font-size:40px;line-height:60px}
  .xcard{width:32.3vw;height:630px}
  .xcard:hover{width:32.3vw}
  .flag .row{justify-content:center}
  .xcard .kick{font-size:14px;line-height:20px}
  .xcard .bigh{font-size:24px}
  /* One column below 1025: the claim, then the evidence grid full width. */
  .kpi .grid{grid-template-columns:1fr;row-gap:44px}
  .kpi .kcol,.kpi .stats{grid-column:1}
  .kpi .stats{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:38px}
  .kpi .n{font-size:38px}
  .kpi .l{font-size:15px;line-height:22px}
  .kpi .talk{margin-top:26px}
  .feat .in{grid-template-columns:1fr;gap:36px}
  .browser{justify-self:center;margin-bottom:0}
  .aud .in{grid-template-columns:1fr;gap:34px}
  .aud .shot2{width:100%}
  .aud .shot2 img{height:420px}
  .spec .grid{grid-template-columns:repeat(4,1fr)}
  .trust{padding:70px 0 60px}
  .trust .row{grid-template-columns:repeat(3,1fr)}
  .trust .tc{height:170px}
  .ct .in{grid-template-columns:1fr;gap:34px}
  .ct::before,.ct::after{display:none}
  .ct .side .sub{font-size:20px;line-height:34px}
  .ft .cols{grid-template-columns:repeat(4,1fr)}
  .ft .news{grid-column:1/-1;max-width:420px}
  .care .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  .intro p{font-size:30px;line-height:44px}
  .hero h1,.hero .hh1{font-size:30px;line-height:45px}
  .kpi h2.sec,.aud h2.sec,.care h2.sec,.spec h2.sec{font-size:30px;line-height:38px}
  .ct .side h2{font-size:40px;line-height:48px}
  .xcard .bigh{font-size:24.6px}
  .aud .it h3{font-size:18px;line-height:26px}
  .aud .it p{font-size:13px;line-height:22px}
  .spec .s span{font-size:15px}
  .ct .side .sub{font-size:16px;line-height:28px}
}
@media(max-width:767px){
  .hd .bar{height:55px}
  .hd .bar>a img{height:46px}
  .hd .bar .pill{display:none}
  .mnav{--hdh:55px}
  .hero .blob,.hero .blob2{display:none}
  .hero{background:#fff;color:var(--navy)}
  .hero h1,.hero .hh1{color:var(--blue-d)}
  .hero .lead{color:#546089}
  .hero .pts li{color:#3d4b63}
  .hero .ghost{border-color:var(--blue-d);color:var(--blue-d)}
  .badges .b{border:1px solid var(--line)}
  .hero .ar{border-color:#B9C6D4;color:var(--navy)}
  .hero .nav2{padding:0 0 14px}
  .hero .nav2 button{background:#F1F6FA;color:var(--navy);border:1px solid var(--line)}
  .hero .in{padding:44px 0 8px;text-align:center}
  .hero .ctas{justify-content:center}
  .badges{justify-content:center}
  .hero h1,.hero .hh1{font-size:22px;line-height:33px}
  .hero .lead{font-size:16px;line-height:26px}
  .hero .ctas .pill,.hero .ctas .ghost{padding:13px 20px;font-size:13px;line-height:18px}
  .badges .b{min-width:calc(50% - 5px);height:auto}
  .intro p{font-size:22px;line-height:34px}
  .intro{padding:10% 0 3%}
  .flag{padding:3% 0 10%}
  .xcard,.xcard:hover{width:48.5vw;height:630px}
  .xcard .bigh{font-size:24px}
  .kpi{padding:10% 0}
  .kpi .grid{row-gap:34px}
  .kpi .stats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:30px}
  .kpi .st{padding-left:16px}
  .kpi .n{font-size:31px}
  .kpi .l{font-size:14px;line-height:21px;margin-top:9px}
  .kpi .x{font-size:12px;line-height:17px}
  .kpi .para{font-size:15.5px;line-height:26px;max-width:none}
  .kpi .talk .pill{width:100%}
  .kpi h2.sec,.aud h2.sec,.care h2.sec,.spec h2.sec{font-size:26px;line-height:32px}
  .ct .side h2{font-size:26px;line-height:32px}
  .feat h3{font-size:26px;line-height:36px}
  .feat .q{font-size:48px}
  .care{padding:10% 0}
  .care .grid{grid-template-columns:1fr}
  .aud{padding:10% 0}
  .aud .shot2 img{height:300px}
  .aud .list{padding-left:0}
  .spec{padding:10% 0}
  .spec .grid{grid-template-columns:repeat(2,1fr);gap:24px 12px}
  .spec .s svg{width:64px;height:64px}
  .spec .s span{font-size:16px}
  .spec .s{min-height:130px}
  .trust .row{gap:16px}
  .trust .tc{height:120px;padding:16px}
  .trust .tc img{height:74px}
  .trust .lslot{height:66px}
  .ct{padding:10% 0}
  .ct .side .sub{font-size:17px;line-height:29px}
  .ct .fr{grid-template-columns:1fr}
  .ft .cols{grid-template-columns:1fr;gap:8px}
  .ft h5{margin:22px 0 10px}
  .ft .legal{flex-direction:column;align-items:flex-start}
  .modal .fr{grid-template-columns:1fr}
}
@media(max-width:560px){
  .xcard,.xcard:hover{width:100%;height:450px}
}

/* ================= widescreen layer (their >=1441 desktop styles, measured 1512/1728/1920) ================= */
@media(min-width:1441px){
  .hero h1,.hero .hh1{font-size:48px;line-height:68px}
  .hero .in{grid-template-columns:1fr 46vw}
  .hero .shot{width:46vw}
  .hero .shot img{width:100%;height:auto;aspect-ratio:722/589;object-fit:cover}
  .hero .shot--cut{width:auto}
  .hero .shot--cut img{width:auto;height:800px;aspect-ratio:auto;object-fit:contain}
  .aud .in{grid-template-columns:1fr 41.6vw}
  .aud .shot2{width:100%}
  .aud .shot2 img{height:auto;aspect-ratio:648/689}
  .feat .in{grid-template-columns:1fr 41.6vw}
  .browser{width:100%}
  .ct .in{grid-template-columns:1fr 43.2vw}
  .wrap{max-width:none;width:82.5%;padding:0}
  .hd .bar{max-width:none;width:82.5%;padding:0}
  /* The card row was the one container the widescreen layer never picked up: every
     other block switches to 82.5% above 1441px while .flag .bleed stayed capped at
     min(1300px,90%). At 2000px that put the text at 175px and the cards at 350px.
     Same container now, so the row starts on the text's left edge with equal gutters
     and the cards expand to fill it. */
  .flag .bleed{max-width:none;width:82.5%;padding:0}
  h2.sec{font-size:55px;line-height:61px}
  .intro p{font-size:48px;line-height:70px;max-width:1120px}
  .kpi .grid{grid-template-columns:minmax(0,30%) minmax(0,1fr);column-gap:7%}
  .kpi .n{font-size:clamp(50px,3.4vw,64px)}
  .kpi .l{font-size:17px;line-height:26px}
  .kpi h2.sec{font-size:clamp(45px,3vw,55px);line-height:1.18;margin-bottom:22px}
  .kpi .para{font-size:17px;line-height:29px}
  .kpi .stats{column-gap:2.6%;row-gap:5.2%}
  .intro{padding:5% 0 30px}
                .ct .side h2{font-size:55px;line-height:66px}
  .xcard{height:428px}
  .xcard .kick{font-size:14px;line-height:20px}
  /* The card stays 242px above 1441px because the container caps at 1300px, so a
     viewport-scaled clamp here resolved to 38px inside 202px of usable width. The
     card width does not change, so neither does the type. */
  /* Above 1441px the card width now tracks the viewport (82.5% container), so the
     title can scale with it. Bounded so the longest unbreakable word ("Credentialing",
     ~7.3x the font size) always fits card width minus 44px of padding: at 1441 the
     card is 225px and takes 24px, at 2560 it is 410px and takes 34px. */
  .xcard .bigh{font-size:clamp(24px,1.55vw,34px)}
  .aud .it h3{font-size:28px;line-height:34px}
  .aud .it p{font-size:16px;line-height:26px}
  .spec .s span{font-size:20px}
  .ct .side .sub{font-size:30px;line-height:50px}
  .ft li a{font-size:14px}
  .feat h3{font-size:53px;line-height:70px}
  .hero .in{padding-left:0;padding-right:0}
}

@media (max-width:520px){
  .ft li a{padding:14px 0}
  .ft .vm{display:inline-flex;align-items:center;min-height:44px}
  .ft .legal .lk a{display:inline-flex;align-items:center;min-height:44px;margin-right:14px}
  .ft .legal{padding:4px 0 12px}
}

/* ================= inner pages ================= */
.phero{background:#F2F7FC;color:var(--ink);position:relative;overflow:hidden;padding:5% 0}
.phero::after{content:"";position:absolute;right:-220px;top:-260px;width:640px;height:640px;border-radius:50%;background:var(--tint)}
.phero .wrap{position:relative;z-index:2}
.crumbs{font:400 12.5px/1 var(--f);color:var(--gray);margin-bottom:22px;display:flex;gap:8px;align-items:center}
.crumbs a{color:var(--blue-d);display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.crumbs a:hover{color:var(--teal-d)}
.phero h1{font:700 42px/54px var(--f);max-width:760px;margin-bottom:16px;color:var(--blue-d)}
.phero .plead{font:400 16px/27px var(--f);color:#000;max-width:640px;margin-bottom:24px}
.phero .grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.phero .rc{margin-top:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;box-shadow:var(--sh)}
.phero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.phero .ghost{display:inline-flex;align-items:center;border:1.5px solid var(--blue-d);color:var(--blue-d);font:500 14px/1 var(--f);padding:15px 28px;border-radius:999px;transition:.2s}
.phero .ghost:hover{background:rgba(13,78,143,.08)}
.g3{grid-template-columns:repeat(3,1fr)!important}
.pkick{display:inline-block;font:600 12px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d);margin-bottom:14px}
.svc{display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:start;padding:54px 0;border-bottom:1px solid var(--line)}
.svc:last-of-type{border-bottom:none}
.svc--alt{background:var(--tint);border-radius:16px;padding:44px;border-bottom:none;margin:10px 0}
@media(max-width:767px){.svc--alt{padding:26px 20px}}
.svc .n{font:700 13px/1 var(--f);letter-spacing:.14em;color:var(--teal-d);margin-bottom:12px;display:block}
.svc h2{font:600 27px/36px var(--f);color:var(--blue-d);margin-bottom:10px}
.svc .d{font:400 15.5px/26px var(--f);color:#46545F;max-width:56ch;margin-bottom:16px}
.svc ul{display:flex;flex-direction:column;gap:9px}
.svc>div>ul li{font:400 14px/22px var(--f);color:var(--ink);padding-left:26px;position:relative}
.svc>div>ul li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--teal-p) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.4 4.6 8.4 10.5 1.6' fill='none' stroke='%230A6B61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px 7px no-repeat}
.svc .rc{box-shadow:var(--sh);border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:#fff}
.featband{background:linear-gradient(115deg,#0D4E8F 0%,var(--blue) 74%);border-radius:16px;color:#fff;padding:46px 48px;margin:56px 0;display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:center}
.featband .n{color:#A9EFE7}
.featband h2{color:#fff}
.featband .d{color:#E8F1FA}
.featband>div>ul{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.featband>div>ul li{color:#fff;font:400 14px/22px var(--f);padding-left:26px;position:relative}
.featband>div>ul li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.24) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.4 4.6 8.4 10.5 1.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px 7px no-repeat}
.featband .tl{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:600 15px/1 var(--f);color:#A9EFE7;min-height:44px}
.featband .tl:hover{color:#fff}
.featband .rc{background:#fff}
.featband .rc li{color:var(--gray)}
.featband .rc li i{color:var(--gray-l)}
.imgband{margin:26px 0 8px;border-radius:14px;overflow:hidden;box-shadow:var(--sh-big);position:relative;border-left:4px solid var(--teal)}
.imgband img{width:100%;height:380px;object-fit:cover;display:block}
.imgband figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.95);border-radius:8px;padding:10px 14px;font:400 12.5px/1.5 var(--f);color:#33414D;max-width:520px}
.steps2{display:flex;flex-direction:column;gap:26px;counter-reset:st}
.steps2 li{display:flex;gap:18px;align-items:flex-start}
.steps2 .sd{flex:none;width:44px;height:44px;border-radius:50%;background:var(--teal-p);color:var(--teal-d);font:700 16px/1 var(--f);display:grid;place-items:center}
.steps2 h3{font:600 17px/24px var(--f);color:var(--blue-d);margin-bottom:5px}
.steps2 p{font:400 14px/23px var(--f);color:#46545F;max-width:58ch}
.acc{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden}
.acc__btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;text-align:left;font:600 15.5px/22px var(--f);color:var(--navy);padding:18px 20px;min-height:44px}
.acc__btn:hover{color:var(--teal-d)}
.acc__btn .chev{flex:none;transition:.25s;stroke:currentColor}
.acc__btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc__panel{display:none;padding:0 20px 18px;font:400 14.5px/24px var(--f);color:#46545F}
.acc__panel.open{display:block}
html:not(.js) .acc__panel{display:block}
.cta2{background:var(--tint);color:var(--ink);text-align:center;padding:5% 0}
.cta2 h2{font:700 34px/44px var(--f);margin-bottom:14px;color:var(--blue-d)}
.cta2 p{font:400 15.5px/26px var(--f);color:#000;max-width:60ch;margin:0 auto 26px}
.callgrid{display:flex;flex-direction:column;gap:22px}
.callgrid .co{border-left:3px solid var(--teal);padding:2px 0 2px 18px}
.callgrid .co .n2{font:700 12.5px/1 var(--f);letter-spacing:.12em;color:var(--teal-d);display:block;margin-bottom:8px}
.callgrid .co p{font:400 14.5px/24px var(--f);color:#46545F}
.pgband{padding:5% 0}
/* 404 */
.e404{padding:92px 0 104px}
.e404 h1{font:700 44px/1.1 var(--f);color:var(--blue-d);margin:10px 0 14px;max-width:22ch}
.e404 .e404h2{font:700 17px/24px var(--f);color:var(--blue-d);margin:0 0 6px}
.e404 .e404list{list-style:none;margin:0 0 34px;padding:0;max-width:640px;border-top:1px solid #E3EDF2}
.e404 .e404list li{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid #E3EDF2}
.e404 .e404list li a{min-width:0;display:inline-flex;align-items:center;min-height:44px;
  font:600 16px/1 var(--f);color:var(--teal-d);text-decoration:none}
.e404 .e404list li a:hover{text-decoration:underline}
.e404 .e404list li span{min-width:0;font:400 14px/22px var(--f);color:#56646F}
@media(max-width:700px){.e404{padding:56px 0 72px}.e404 h1{font-size:32px}}
.pgband.tint{background:var(--tint)}
/* B5: the FAQ wrap carried an inline max-width:900px, which centred it and gave the
   page a second left edge (270px against 72px everywhere else). Now a two-column band
   in the same language as the feature rows: heading left, accordion right, one edge. */
.pgband.band2{background:#F2F7FC}
.pgband.band2 .wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:74px;align-items:start}
.pgband.band2 h2.sec{margin-bottom:14px}
.pgband.band2 .accwrap{min-width:0}
@media(max-width:900px){
  .pgband.band2 .wrap{grid-template-columns:1fr;gap:28px}
}
.pgband h2.sec{margin-bottom:12px}

/* ===== audit-defense method band ===============================================
   Reuses .pgband / .sec / .sub2 / .steps2. Adds a lead block, a four-up finding
   grid and a limits panel. Grid items carry min-width:0 so a long word cannot
   set the track floor and overflow at 320px. */
/* homepage teaser into the audit-defense method.
   .aud is a LIGHT band, so this uses the light-surface tokens. Verified against
   composited pixels, not against declared colours. */
.aud .mteaser{margin-top:22px;padding:20px 22px;border-radius:0 14px 14px 0;
  background:#F2F7FC;border-left:4px solid var(--teal)}
.aud .mteaser .mtk{display:block;font:700 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-d);margin-bottom:10px}
.aud .mteaser p{font:400 14.5px/24px var(--f);color:#3D4A57;margin:0 0 10px}
.aud .mteaser .tlink2{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font:600 14px/1 var(--f);color:var(--teal-d);text-decoration:none}
.aud .mteaser .tlink2:hover{color:#0A6F64;text-decoration:underline}
.aud .mteaser .tlink2 svg{flex:none}

/* B6: the section had four different measures stacked (1296 / 630 / 612 / 820), so the
   right edge went ragged down the page. Now two: full width for headings and grids,
   and one prose measure for every run of text. */
.method{--measure:78ch}
.method .mtop{display:grid;grid-template-columns:1fr 372px;gap:56px;align-items:start;margin:0 0 52px}
.method .mlead{min-width:0;max-width:none;margin:0}
.method .mfig{min-width:0;background:var(--blue-d);border-radius:16px;padding:28px 26px 24px;
  box-shadow:0 22px 44px -28px rgba(11,28,57,.55)}
.method .mfig .mfk{display:block;font:700 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;
  color:#7FE3D6;margin-bottom:12px}
.method .mfig h4{font:700 18px/25px var(--f);color:#fff;margin:0 0 20px}
.method .mfig .mrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.method .mfig .mlab{font:400 13px/19px var(--f);color:#C6D6E4}
.method .mfig .mrow b{font:700 20px/1 var(--f);color:#fff;font-variant-numeric:tabular-nums}
.method .mbar{margin:20px 0 18px}
.method .mtrack{position:relative;height:10px;border-radius:6px;background:rgba(255,255,255,.14);
  overflow:hidden}
.method .mtrack i{position:absolute;top:0;bottom:0;border-radius:6px}
.method .mtrack .msamp{left:0;width:1.3%;min-width:7px;background:#FFC24D;z-index:2}
.method .mtrack .mbench{left:10%;width:3px;border-radius:2px;background:#7FE3D6;z-index:3;
  box-shadow:0 0 0 2px rgba(11,28,57,.55)}
.method .mkey{display:flex;gap:18px;margin-top:11px;flex-wrap:wrap}
.method .mkey span{display:inline-flex;align-items:center;gap:7px;font:500 12px/1.4 var(--f);color:#C6D6E4}
.method .mkey em{width:10px;height:10px;border-radius:3px;display:block}
.method .mkey .k1{background:#FFC24D}
.method .mkey .k2{background:#7FE3D6;width:3px;height:12px;border-radius:2px}
.method .mfig p{font:400 13.5px/22px var(--f);color:#D3E0EC;margin:0 0 14px}
.method .mfig .mnote2{font:400 12px/18px var(--f);color:#B9CBDD;border-top:1px solid rgba(255,255,255,.14);
  padding-top:11px}
@media(max-width:1100px){.method .mtop{grid-template-columns:1fr;gap:34px}
  .method .mfig{max-width:520px}}
.method .mlead h3{font:700 23px/32px var(--f);color:var(--blue-d);margin:0 0 14px}
.method .mlead p{font:400 15.5px/27px var(--f);color:#46545F;margin:0 0 14px}
.method .mlead p:last-child{margin-bottom:0}
.method h3.mh{font:700 19px/27px var(--f);color:var(--blue-d);margin:0 0 8px}
.method .mnote{font:400 15px/25px var(--f);color:#56646F;max-width:var(--measure);margin:0 0 26px}
.method .fcat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 52px}
.method .fcat .fc{min-width:0;background:#fff;border:1px solid #E3EDF2;border-radius:14px;
  padding:24px 22px 26px;box-shadow:0 10px 26px -20px rgba(11,28,57,.28)}
.method .fcat .fn{display:block;font:700 12px/1 var(--f);letter-spacing:.14em;color:var(--teal-d);
  margin-bottom:12px}
.method .fcat .fc h4{font:700 16px/23px var(--f);color:var(--blue-d);margin:0 0 9px}
.method .fcat .fc p{font:400 14px/23px var(--f);color:#4E5C68;margin:0}
.method .msteps{max-width:var(--measure);margin:0 0 52px}
.method .msteps h4{font:700 17px/25px var(--f);color:var(--blue-d);margin:0 0 7px}
.method .msteps p{font:400 15px/26px var(--f);color:#46545F;margin:0}
.method .limits{background:#fff;border-left:4px solid var(--teal);border-radius:0 14px 14px 0;
  padding:30px 34px;max-width:var(--measure);box-shadow:0 14px 34px -26px rgba(11,28,57,.3)}
.method .limits .ln2{display:block;font:700 12px/1 var(--f);letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-d);margin-bottom:12px}
.method .limits h3{font:700 21px/29px var(--f);color:var(--blue-d);margin:0 0 14px}
.method .limits p{font:400 15px/26px var(--f);color:#46545F;margin:0 0 12px}
.method .limits p:last-child{margin-bottom:0}
@media(max-width:1100px){.method .fcat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .method .fcat{grid-template-columns:1fr;gap:16px}
  .method .mlead h3{font-size:20px;line-height:29px}
  .method .limits{padding:24px 22px}
}
.pgband .sub2{font:400 15.5px/26px var(--f);color:#46545F;max-width:74ch;margin-bottom:34px}
.annot{display:grid;grid-template-columns:520px 1fr;gap:56px;align-items:start}
.annot--r520{grid-template-columns:1fr 520px}
.annot--r480{grid-template-columns:1fr 480px}
.annot .fig{border-radius:14px;overflow:hidden;box-shadow:var(--sh-big)}
.annot .fig img{width:100%;height:auto;display:block}
@media(max-width:1024px){
  .phero .grid2{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr;gap:28px}
  .featband{grid-template-columns:1fr;padding:36px 30px}
  .annot,.annot--r520,.annot--r480{grid-template-columns:1fr}
}
@media(max-width:767px){
  .g3{grid-template-columns:1fr!important}
  .phero h1{font-size:29px;line-height:38px}
  .svc h2{font-size:22px;line-height:30px}
  .cta2 h2{font-size:25px;line-height:33px}
  .imgband img{height:240px}
  .imgband figcaption{position:static;max-width:none;border-radius:0}
}

/* focus ring re-asserted at end of cascade (see UI review FINDING-021) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--teal-l);outline-offset:2px;border-radius:4px}

/* ═══════════════════ BRIGHT VARIANT ═══════════════════
   Colourful duotone icons + photo drop-in slots. The hue classes are set
   per-icon in the markup so a grid reads as a palette, not a row of grey
   wire drawings. Warm hues (amber/rose) are deliberate: an all-teal grid
   is what made the previous pass read cold and characterless. */
.i-teal{--ic:#18A89E;--is:#D6F2EE;--ict:#0B6B60}
.i-blue{--ic:#1266B8;--is:#DCEBF9;--ict:#0F5496}
.i-sky{--ic:#0E9BC9;--is:#D8F0F9;--ict:#0A6C8C}
.i-mint{--ic:#16B378;--is:#DAF5EA;--ict:#0A6B47}
.i-indigo{--ic:#4F63C4;--is:#E4E8F9;--ict:#3A4A9E}
.i-amber{--ic:#B87415;--is:#FCEFD8;--ict:#8A5308}
.i-rose{--ic:#C94A40;--is:#FBE5E3;--ict:#A5342C}
.i-violet{--ic:#7B47BD;--is:#EEE6F9;--ict:#5B2E93}

.dt{display:grid;place-items:center;flex:none;border-radius:26%;
  background:linear-gradient(150deg,var(--is) 0%,#fff 155%)}
.dt svg{display:block}
.dt svg .f,.sdisc svg .f{fill:var(--ic);opacity:.18;stroke:none}
.dt svg .l,.sdisc svg .l{fill:none;stroke:var(--ic);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dt--lg{width:92px;height:92px}      .dt--lg svg{width:48px;height:48px}
.dt--md{width:64px;height:64px}      .dt--md svg{width:34px;height:34px}
.dt--sm{width:42px;height:42px}      .dt--sm svg{width:24px;height:24px}
.dt--xs{width:30px;height:30px;border-radius:9px} .dt--xs svg{width:18px;height:18px}

/* white line variant for icons that sit on the dark photo cards */
.ln .f{fill:#fff;opacity:.22;stroke:none}
.ln .l{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* the old size/stroke rules targeted bare <svg>; re-point them at the container */
.spec .s .dt{margin:0 auto 13px}
.spec .s .dt svg{width:48px;height:48px;margin:0;stroke-width:0}
.badges .b .dt svg{width:18px;height:18px;stroke:none}
.aud .it .h .dt svg{width:24px;height:24px;stroke:none;margin:0}
.xcard .icon svg.ln{width:56px;height:56px;stroke:none;opacity:1}

/* care cards: were eight flat white boxes with a code chip and nothing else */
.care .c .cmark{display:block;margin:0}
.care .c .cmark .dt{position:absolute;left:20px;top:20px;margin:0}
.care .c .cmark .ab{margin:0}
.care .c{border-top:3px solid transparent}
.care .c:has(.i-teal){border-top-color:#18A89E}
.care .c:has(.i-rose){border-top-color:#C94A40}
.care .c:has(.i-blue){border-top-color:#1266B8}
.care .c:has(.i-violet){border-top-color:#7B47BD}
.care .c:has(.i-mint){border-top-color:#16B378}
.care .c:has(.i-indigo){border-top-color:#4F63C4}
.care .c:has(.i-sky){border-top-color:#0E9BC9}
.care .c:has(.i-amber){border-top-color:#B87415}

/* ── photo slots ────────────────────────────────────────────────
   Every slot is a fixed-ratio frame. Drop a file at the named path and it
   fills the frame with no layout work. Until then the frame shows a bright
   branded panel rather than a broken-image box, so the page reads finished. */
.pslot{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(148deg,var(--is,#DCEBF9),#fff)}
.pslot>img{width:100%;height:100%;object-fit:cover;display:block}
.pslot--16x9{aspect-ratio:16/9}
.pslot--4x5{aspect-ratio:4/5}
.pslot--3x2{aspect-ratio:3/2}
.pslot .ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;padding:22px}
.pslot .ph .dt{background:#fff;box-shadow:0 8px 22px -10px rgba(15,46,76,.3)}
.pslot .ph b{font:600 13.5px/1.4 var(--f);color:var(--navy)}
.pslot .ph code{font:500 11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#42566B;
  background:rgba(255,255,255,.78);border-radius:6px;padding:4px 9px;word-break:break-all}

/* ── the "cutout on a brand swoosh" device MedCare uses behind their people ──
   Drop a background-removed PNG in and it lands on a brand-coloured ribbon. */
.cutout{position:relative;display:grid;place-items:end center;min-height:420px}
.cutout::before{content:"";position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:min(400px,88%);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 210deg,#18A89E,#5ECDBF 38%,#1266B8 62%,#18A89E);
  opacity:.9;filter:blur(0.5px)}
.cutout::after{content:"";position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:min(300px,66%);aspect-ratio:1;border-radius:50%;background:#fff}
.cutout>*{position:relative;z-index:2}
.cutout img{max-height:440px;width:auto;filter:drop-shadow(0 22px 30px rgba(12,40,64,.28))}
/* ---- Credentials band -------------------------------------------------
   Deliberately not a logo strip. RST holds one real credential today, so the
   band shows that one with a verification link, describes the HIPAA practice
   (HHS recognises no HIPAA certification, so a seal would be decoration), and
   names what is being pursued in the site's existing dashed pending style. */
/* The band was 82% white with no brand accent on screen — the composition gate
   reads that as a dead zone, and it looked like one. A pale brand wash and a
   teal rule give the section its own surface without shouting. */
.cred{background:
    radial-gradient(60% 70% at 88% 8%, rgba(16,160,144,.10), rgba(16,160,144,0) 62%),
    radial-gradient(52% 62% at 6% 96%, rgba(18,102,184,.09), rgba(18,102,184,0) 64%),
    linear-gradient(180deg,#F4FAF9,#EEF5FA);
  padding:84px 0 88px;border-top:3px solid var(--teal)}
.cred h2.sec{margin-bottom:14px}
.cred .para{font:400 16px/28px var(--f);color:var(--gray-l);max-width:70ch;margin-bottom:40px}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.cc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px 24px;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 30px -22px rgba(7,42,74,.34)}
.cc b{font:600 19px/1.3 var(--f);color:var(--navy)}
.cc p{font:400 14.5px/25px var(--f);color:var(--gray-l);margin:0}
.cver{margin-top:auto;font:500 14px/1 var(--f);color:var(--teal-d);
  display:inline-flex;align-items:center;min-height:44px;align-self:flex-start}
.cver:hover{color:var(--blue-d)}
.cnext{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.cnext li{font:400 13.5px/22px var(--f);color:var(--gray-l)}
.cnext .slotp{display:inline-block;margin-bottom:3px}
@media(max-width:980px){.cgrid{grid-template-columns:1fr}.cred{padding:60px 0 64px}}

/* ---- badge seals: drawn in RST's own language, no borrowed trademarks ---- */
.seals{display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-start;margin:0 0 44px}
.seal{flex:1 1 172px;max-width:210px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:24px 16px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  box-shadow:0 14px 30px -22px rgba(7,42,74,.34)}
.seal .sdisc{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:var(--is);position:relative}
.seal .sdisc::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1.5px dashed var(--ic);opacity:.42}
.seal .sdisc svg{width:38px;height:38px}
.seal b{font:700 17px/1.15 var(--f);color:var(--navy);letter-spacing:.01em}
.seal i{font:400 12.5px/1.45 var(--f);color:var(--gray-l);font-style:normal}
@media(max-width:900px){.seal{flex:1 1 140px;padding:18px 12px 16px}
  .seal .sdisc{width:52px;height:52px}.seal .sdisc svg{width:26px;height:26px}
  .seal b{font-size:15px}}

/* ---- logo strip: neutral placeholder marks at real certification-logo
   proportions, so the layout can be judged before any licensed artwork
   exists. Drop a real logo in place of .lmk and nothing else changes. */
.lstrip{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin:0 0 44px}
.lgo{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;gap:9px;
  filter:grayscale(1);opacity:.72}
.lgo img{width:100%;height:auto;max-height:56px;object-fit:contain;display:block}
.lgo img+.lmk{display:none}
.lgo .lmk{width:100%;display:block}
.lgo .lmk svg{width:100%;height:auto;display:block}
.lgo .lmk svg rect,.lgo .lmk svg circle{fill:#CFD8E0}
.lgo .lmk svg rect:first-child{fill:none;stroke:#BFCAD4;stroke-width:1.5;stroke-dasharray:5 4}
.lgo b{font:700 14px/1 var(--f);color:#5A6873;letter-spacing:.04em;text-transform:uppercase}
.lgo i{font:400 12px/1.3 var(--f);color:#8797A4;font-style:normal}
@media(max-width:820px){.lstrip{gap:18px;justify-content:center}.lgo{flex:0 0 118px}}

/* ═══════════ alternating feature rows — services & care-programs ═══════════
   One row per service: copy on one side, a purpose-built product panel on the
   other, sides swapping every row. Each row carries its own accent hue via the
   .i-* classes, which is what stops eight rows of the same shape reading flat. */
/* C1: two surfaces, not eight. White and one pale tint, alternating. The service's
   own hue is kept but demoted to the icon chip and the rule under the row number, so
   the page reads as one system instead of a colour swatch catalogue. */
.frow{padding:5% 0;position:relative;overflow:hidden;background:#fff}
.frow.tintbg{background:#F4F9FA}
/* the alternating layout leaves one outer track empty on every row; a soft wash of
   the row's own accent fills it purposefully instead of leaving a white void */
.frow::before{content:"";position:absolute;top:-28%;right:-10%;width:46%;height:156%;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--ic,#18A89E) 9%, transparent) 0%,
    transparent 72%);pointer-events:none}
.frow--alt::before{right:auto;left:-6%}
.frow .in{position:relative;z-index:1}
/* Three tracks: the panel always sits in the centre one, so every panel down the
   page shares the same vertical axis. The copy alternates into the outer track on
   the left, then the right, then the left. */
/* Option 3, chosen 16 Sep 2026. Balanced two-column row: text and panel each take
   roughly half the width and swap sides on alternate rows. The panels no longer sit
   on one page-centre axis, which is the trade-off; in exchange no track is ever
   empty. The previous 1fr/436px/1fr grid left 430px of 1296 unused on every row. */
.frow .in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:80px;align-items:center}
.frow .in>*{min-width:0}
.frow .ftext{grid-column:1;grid-row:1}
.frow .fvis{grid-column:2;grid-row:1}
.frow--alt .ftext{grid-column:2;grid-row:1}
.frow--alt .fvis{grid-column:1;grid-row:1}

/* C2: the rows were within 60px of each other in height with no visual progression,
   so eight of them read as one repeated movement. The service number becomes a quiet
   display numeral in the service's own hue, which gives each row an anchor and the
   page a sense of counting down. It also carries the per-service colour that used to
   be carried by eight different background tints. */
.ftext .kick{display:flex;align-items:baseline;gap:12px;font:600 12px/1 var(--f);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ict,var(--teal-d));
  background:none;border-radius:0;padding:0;margin:0 0 18px}
.ftext .kick::before{content:"";width:26px;height:2px;background:var(--ic,var(--teal));
  border-radius:2px;flex:none;transform:translateY(-4px)}
.ftext .kick[data-n]::after{content:attr(data-n);margin-left:auto;font:700 52px/1 var(--f);
  letter-spacing:-.02em;color:var(--ic,var(--teal));opacity:.17;transform:translateY(12px)}
.ftext h2{font:700 34px/43px var(--f);color:var(--blue-d);margin:0 0 13px;letter-spacing:-.01em}
.ftext .d{font:400 16px/27px var(--f);color:#4E5C68;margin:0 0 22px}
.ftext ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.ftext ul li{font:400 15px/24px var(--f);color:#3F5060;padding-left:31px;position:relative}
.ftext ul li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--ic,var(--teal)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.4 4.6 8.4 10.5 1.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px 8px no-repeat}
.ftext .more{display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font:600 14.5px/1 var(--f);color:var(--teal-d);min-height:44px}
.ftext .more:hover{color:var(--blue-d)}

.fvis{position:relative}
.fvis .pane{position:relative;border-radius:24px;padding:36px 34px;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.58) 58%,rgba(255,255,255,.30) 100%)}
.fvis .pane::before{content:"";position:absolute;right:-100px;top:-110px;width:320px;height:320px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 72%)}
.fvis .app{position:relative;background:#fff;border-radius:16px;padding:22px 22px 20px;
  box-shadow:0 28px 54px -30px rgba(10,45,72,.40),0 0 0 1px rgba(19,63,97,.05)}
.fvis .ah{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid #EDF2F6}
.fvis .ah .dt{flex:none}
.fvis .ah b{font:600 14px/1.3 var(--f);color:var(--blue-d);flex:1 1 auto}
.fvis .ah s{text-decoration:none;font:500 12px/1 var(--f);letter-spacing:.08em;
  text-transform:uppercase;color:#4A5A6B}

.fvis .arow,.fvis .acode,.fvis .astep{list-style:none;margin:0;padding:0}
.fvis .arow li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid #F2F6F9;font:400 14.5px/1.4 var(--f);color:#3F5060}
.fvis .arow li:last-child{border-bottom:0;padding-bottom:2px}
.fvis .arow b{font:600 12.5px/1 var(--f);color:var(--ict,var(--teal-d));background:var(--is,#E6F5F1);
  border-radius:20px;padding:7px 12px;white-space:nowrap}

.fvis .acode li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #F2F6F9}
.fvis .acode li:last-child{border-bottom:0;padding-bottom:2px}
.fvis .acode code{flex:none;font:600 13.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ict,var(--teal-d));background:var(--is,#E6F5F1);border-radius:7px;padding:9px 11px}
.fvis .acode i{font-style:normal;font:400 14px/1.4 var(--f);color:#4E5C68}

.fvis .astep li{display:flex;gap:15px;padding:0 0 20px;position:relative}
.fvis .astep li:last-child{padding-bottom:0}
.fvis .astep li::before{content:"";position:absolute;left:14px;top:30px;bottom:2px;width:2px;background:#E7EEF3}
.fvis .astep li:last-child::before{display:none}
.fvis .astep .sn{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:600 12.5px/1 var(--f);color:#fff;background:var(--ic,var(--teal));position:relative;z-index:1}
.fvis .astep .st{font:600 14.5px/21px var(--f);color:var(--blue-d)}
.fvis .astep .sm{font:400 13.5px/20px var(--f);color:#68788A;margin-top:2px}
.fvis .rt{position:relative;margin-top:16px;font:400 12px/1.5 var(--f);color:#4A5A6B;text-align:center}

@media(max-width:1180px){
  .frow{padding:58px 0}
  .frow .in,.frow--alt .in{grid-template-columns:1fr;gap:34px}
  .frow .ftext,.frow--alt .ftext{grid-column:1;grid-row:1}
  .frow .fvis,.frow--alt .fvis{grid-column:1;grid-row:2}
  .fvis .pane{max-width:560px}
  .fvis .pane{padding:30px 26px}
  .ftext h2{font-size:28px;line-height:37px}
}
@media(max-width:560px){
  .fvis .pane{padding:20px 14px;border-radius:18px}
  .ftext h2{font-size:25px;line-height:33px}
  .fvis .app{padding:18px 16px 16px}
  .fvis .ah{flex-wrap:wrap;row-gap:6px}
  .fvis .ah b{flex:1 1 100%;order:2}
  .fvis .ah s{order:3}
  .fvis .arow li{gap:10px}
  .fvis .acode i{font-size:13px}
}

/* ═══════════ care-programs: included cards + program grid ═══════════ */
.secintro{max-width:820px;margin:0 0 40px}
.secintro .sec{margin-bottom:12px}
.secintro .sub2{font:400 16.5px/28px var(--f);color:#4E5C68;margin:0;max-width:64ch}

.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.icard{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:30px 26px 28px;border-top:3px solid var(--ic,var(--teal));transition:.25s}
.icard:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.icard .num{display:inline-block;font:700 13px/1 var(--f);letter-spacing:.1em;color:var(--ict,var(--teal-d));
  background:var(--is,#E6F5F1);border-radius:6px;padding:8px 10px;margin-bottom:16px}
.icard h3{font:600 18px/26px var(--f);color:var(--blue-d);margin:0 0 10px}
.icard p{font:400 14.5px/24px var(--f);color:#4E5C68;margin:0}

.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px 22px;
  border-top:3px solid var(--ic,var(--teal));transition:.25s;scroll-margin-top:110px}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--teal-l)}
.pcard .ab{display:inline-block;font:600 12px/1 var(--f);letter-spacing:.08em;color:var(--ict,var(--teal-d));
  background:var(--is,#E6F5F1);border-radius:6px;padding:6px 9px;margin-bottom:14px}
.pcard h3{font:600 15.5px/22px var(--f);color:var(--blue);margin:0 0 8px}
.pcard p{font:400 13.5px/22px var(--f);color:#4E5C68;margin:0}

@media(max-width:1024px){
  .igrid{grid-template-columns:1fr;gap:16px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .secintro{margin-bottom:30px}
}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}}

/* Touch targets: on pointer-coarse / narrow viewports the footer's link lists and
   the legal row were 28px and 17px tall. Hit area grows to 44px; the type and the
   visual rhythm stay where they were. */
@media(max-width:1024px){
  .ft li a{display:flex;align-items:center;min-height:44px;padding:0}
  .ft .legal{row-gap:4px}
  .ft .legal .lk{display:flex;flex-wrap:wrap;gap:0 6px}
  .ft .legal .lk a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin-right:0}
  .ft .cols{padding-bottom:34px}
}
@media(pointer:coarse){
  .ft li a{display:flex;align-items:center;min-height:44px;padding:0}
  .ft .legal .lk a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin-right:0}
}


/* A5: 60% aged A/R reduction is an outcome that varies by practice, so it carries an
   explicit "up to". Done as a pseudo-element because the counter script writes to
   childNodes[0] and a real text node would break it. */
b[data-count="60"]::before{content:"up to ";font:600 13px/1 var(--f);color:#5A6875;
  letter-spacing:.01em;margin-right:4px;vertical-align:.32em}

/* B8: the method section ran 2471px as one unbroken surface, three times the next
   tallest band on the page. Split at the content break: the payer's method and the
   finding categories on white, the disciplines and the limits on the pale tint. */
.method--b{background:#F4F9FA}
.method--b h3.mh:first-of-type{margin-top:0}

/* 404 secondary action: .ghost has no intrinsic height, so give it a real box. */
.e404 .ctas .ghost{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}

/* ═══════════════════ mobile correction layer — 16 Sep 2026 ═══════════════════
   Found by rendering every page viewport-by-viewport at 320–768px and looking
   at the images. The element-level sweep (overflow, clipping, type size, touch
   targets, container edges) reported all five pages clean at every width, and
   all of the defects below were present at the same time. Element checks pass,
   composition fails — the same failure mode as process correction #1. */

/* M1 — h2.sec had no mobile size. Only .kpi/.aud/.care/.spec h2.sec were ever
   overridden, so every bare h2.sec on the inner pages rendered at 45px/50px on
   a 390px screen: "New recurring revenue your practice may not be billing yet"
   came out five lines of near-viewport-width type. Eight headings across
   care-programs and audit-defense were affected. The section-scoped rules are
   more specific and keep their own values. */
@media(max-width:1024px){ h2.sec{font-size:36px;line-height:46px} }
@media(max-width:880px) { h2.sec{font-size:31px;line-height:40px} }
@media(max-width:767px) { h2.sec{font-size:27px;line-height:35px} }
@media(max-width:400px) { h2.sec{font-size:24.5px;line-height:33px} }

/* M2 — .kpi .dash is an element, not a pseudo, so the 1024 block that hid
   .kpi::before/::after left this 2px dashed rule drawn at left:40px straight
   through the stat labels once the grid collapsed to two columns. */
@media(max-width:1024px){ .kpi .dash{display:none} }

/* M3 — the three hero slides measured 728 / 703 / 677px at 390px, so every
   9-second auto-advance moved the entire page below the hero by up to 51px.
   Stacking the slides in one grid cell makes the container hold the tallest,
   so nothing below it moves. visibility:hidden also keeps the inactive slides
   out of the tab order, which display:none was doing before. */
@media(max-width:1024px){
  html.js .hero{display:grid;grid-template-rows:auto auto}
  html.js .hero .slide{display:block;grid-row:1;grid-column:1;
    visibility:hidden;opacity:0;pointer-events:none;transition:opacity .3s ease}
  html.js .hero .slide.on{visibility:visible;opacity:1;pointer-events:auto}
  html.js .hero .nav2{grid-row:2;grid-column:1}
}

/* M4 — the certification band rendered as three empty white boxes: the <img>
   tags came out when the marks were unconfirmed, and .lslot (the dashed
   replacement frame) is display:none. An empty band is worse than no band, so
   the section stays out of the page. Delete this rule and restore the <img>
   tags in index.html once a confirmed, licensed badge file exists — see
   RST-pre-build-decisions.md item 4.1. */
.trust{display:none}

/* M5 — .box::after is a full-width white rule 70px above the card's bottom
   edge. Across five narrow desktop cards it reads as a divider above the
   footer link; on a full-width 450px mobile card, landing exactly where the
   bottom scrim goes near-opaque, it reads as the photograph having been cut
   off mid-frame. Same rule, a quarter of the weight. */
@media(max-width:767px){ .xcard .box::after{background:rgba(255,255,255,.26)} }

/* M6 — superseded 16 Sep 2026 by the KPI rebuild, which sets the figure/unit
   gap to 4px at every width rather than only at mobile. */

/* M7 — the 52px section watermark ran to the container's right edge at mobile
   and read as a clipped number rather than a background digit. */
@media(max-width:767px){
  .ftext .kick[data-n]::after{font-size:34px;transform:translateY(7px)}
}

/* M8 — the footer collapsed to a single column of roughly thirty 44px rows:
   two full screens of scrolling to get past it. Two columns down to 430px. */
@media(max-width:767px){ .ft .cols{grid-template-columns:1fr 1fr;gap:6px 22px} }
@media(max-width:430px){ .ft .cols{grid-template-columns:1fr} }

/* M9 — the reporting mock is a 640-wide SVG. Inside a 348px column every label
   renders at 54% of its authored size, so the 12px labels came out at 6.5px:
   present, unreadable, and the densest panel (payer mix) was four rows of it.
   A compact 380-wide variant carries the same three figures and the trend at
   legible size; the wide one stays for tablet and up. */
.browser .dnar{display:none}
@media(max-width:767px){
  .browser .dwide{display:none}
  .browser .dnar{display:block}
}

/* M10 — the mock's fake address bar ran to two lines inside a one-line pill at
   mobile, and .browser svg carries a hard 640/640 aspect-ratio that does not
   match the compact variant's box. */
@media(max-width:767px){
  .browser .dnar{aspect-ratio:380/372}
  .browser .tb span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* M11 — the fifth card kept the 300px height from the 1200px rule that makes it
   span the last row of a 2-up grid: .xcard.x5 is more specific than the bare
   .xcard height set at 767 and 560, so at mobile it stayed 300px tall holding
   318px of content, and overflow:hidden cut its "Learn More" link off. Below
   767 the row is one card per line, so the fifth is no longer a special case. */
@media(max-width:767px){ .xcard.x5,.xcard.x5:hover{width:48.5vw;height:630px} }
@media(max-width:560px){ .xcard.x5,.xcard.x5:hover{width:100%;height:450px} }

/* M12 — card heights in the two middle bands were never retuned when the
   desktop card came down from 540px to 428px. Measured content is 313–370px,
   so 630px left roughly 270px of empty card at every width from 561 to 1024,
   the same dead space that was fixed at desktop. The wide fifth card needed
   314px and had 300, clipping its footer link by 14px at 768–1200. */
@media(min-width:768px) and (max-width:1024px){
  .xcard,.xcard:hover{height:500px}
}
@media(min-width:561px) and (max-width:767px){
  .xcard,.xcard:hover{height:480px}
  .xcard.x5,.xcard.x5:hover{height:480px}
}
@media(min-width:768px) and (max-width:1200px){
  .xcard.x5,.xcard.x5:hover{height:340px}
}

/* M13 — at 768–1024 the cards were 32.3vw (sized for 3 across) inside a row
   that only fits 2, so each line held two 265px cards and ~170px of empty
   gutter. Two cards that fill the row instead. */
@media(min-width:768px) and (max-width:1024px){
  .xcard,.xcard:hover{width:calc(50% - 18px)}
}
/* M5b — same reasoning as M5: wherever the card is wide enough that the rule
   spans most of the viewport, it reads as a cut photograph rather than a
   divider. That is every width below the 5-across desktop row. */
@media(max-width:1200px){ .xcard .box::after{background:rgba(255,255,255,.26)} }

/* M14 — the hero's slider controls read as five dots at mobile: two 44px arrow
   circles in the same light fill, then three dot buttons at the same pitch.
   The arrows get a visible edge and the dot group gets separated from them. */
@media(max-width:767px){
  .hero .nav2{justify-content:center;gap:8px;padding:2px 0 16px}
  .hero .nav2 .dots{margin-left:14px}
  .hero .nav2 button.ar,.hero .nav2>button{border-color:#C6D4E0}
}

/* M15 — the hero stat pair sat in two ~140px columns, which wrapped
   "first-pass clean-claim target" to three lines and left "target" alone on
   the last one, and the "up to " prefix on the second number pushed the two
   figures off a shared baseline. One per row below 560px: full width, one
   line per label, numbers aligned. */
@media(max-width:560px){
  .hero .float.float--inline{flex-direction:column;gap:12px;width:100%;
    align-items:center;text-align:center;padding:16px 18px}
  .hero .float.float--inline>div{width:100%}
}

/* ═══════════════════ live forms — 16 Sep 2026 ═══════════════════
   The forms were inert placeholders (onsubmit="return false", no name
   attributes, so no field would have posted anywhere). They now POST to the
   host's form handler. These rules cover the parts that had no styling
   because they did not exist before: the honeypot, the modal's consent row,
   and the invalid state a required field can now enter. */

/* Spam honeypot. display:none keeps it out of the accessibility tree and out
   of the tab order, so it is invisible to people and visible to bots. */
.hp{display:none}

.ct .cons>span,.modal .cons>span{flex:1 1 auto;min-width:0}
.ct .cons a,.modal .cons a{display:inline;color:var(--teal-d);text-decoration:underline;text-underline-offset:2px}
.ct .cons a:hover,.modal .cons a:hover{color:var(--blue-d)}

.modal .cons{display:flex;gap:2px;align-items:flex-start;font:500 11.5px/1.5 var(--f);
  color:rgba(14,20,60,.66);margin:6px 0 14px}
.modal .cons input{appearance:none;-webkit-appearance:none;flex:0 0 44px;width:44px;height:44px;
  margin:-13px 0 -13px -10px;display:grid;place-items:center;cursor:pointer;border:none;background:none}
.modal .cons input::before{content:"";width:18px;height:18px;border:2px solid #B9C6CF;
  border-radius:5px;background:#fff;transition:.15s}
.modal .cons input:checked::before{background:var(--teal);border-color:var(--teal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px 10px;background-position:center;background-repeat:no-repeat}
.modal .cons input:focus-visible{outline:2px solid var(--teal-d);outline-offset:-8px;border-radius:12px}
.modal textarea{resize:vertical;min-height:62px}

/* Invalid state only after the person has interacted — :user-invalid does not
   fire on an untouched empty field the way :invalid does. */
.ct input:user-invalid,.ct textarea:user-invalid,
.modal input:user-invalid,.modal textarea:user-invalid{border-bottom-color:#B3261E}

/* ═══════════════════ legal + thank-you pages — 16 Sep 2026 ═══════════════════
   Three new pages: /privacy/, /terms/, /thank-you/. They reuse the inner-page
   hero (.phero, .cru, .pkick) and the footer, and add a single readable text
   column. Measure is capped near 72 characters because these are the only
   pages on the site anyone reads end to end. */

.legalpage{background:#fff;padding:4% 0 6%}
/* The wrap keeps the site container so the text starts on the same left edge
   as every other page; the measure is capped on the children instead. */
.lgwrap>*{max-width:760px}

.legalpage h2.mh{font:700 26px/34px var(--f);color:var(--blue-d);letter-spacing:-.01em;
  margin:46px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
/* With the review banner gone the first heading's top rule had nothing above
   it and read as a stray hairline. */
.legalpage h2.mh:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legalpage h3.mh3{font:600 17px/25px var(--f);color:var(--blue);margin:26px 0 8px}
.lgp{font:400 16px/28px var(--f);color:#3F4C58;margin:0 0 16px}
.lgp--sm{font-size:13.5px;line-height:22px;color:#5D6B78;margin-top:14px}
.lgp a,.lgul a{color:var(--teal-d);text-decoration:underline;text-underline-offset:2px}
.lgp a:hover,.lgul a:hover{color:var(--blue-d)}
.lgul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:12px}
.lgul li{font:400 16px/28px var(--f);color:#3F4C58;padding-left:26px;position:relative}
.lgul li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:7px;
  border-radius:50%;background:var(--teal)}
.lgul b,.lgp b{color:var(--blue-d);font-weight:600}
.lgdate{font:500 13px/1.5 var(--f);color:#5D6B78;margin:14px 0 0}

/* Review banner. Removed from both legal pages on request, 16 Sep 2026 — the
   rule is kept so the banner can be put back in one line of markup if the
   pages ever go out for review again. */
.lawnote{background:#FFF8E9;border:1px solid #F0DDB2;border-left:4px solid #D9A227;
  border-radius:8px;padding:16px 18px;font:400 14.5px/24px var(--f);color:#4A3C1E;margin:0 0 10px}
.lawnote b{color:#3A2E13;font-weight:600}
/* Inline, not inline-block: some of these notes are a full sentence and a
   nowrap inline-block pushed the page 60px wider than a 320px viewport.
   box-decoration-break keeps the dashed frame intact across a line break. */
.pend{display:inline;border:1px dashed #B9C6CF;border-radius:4px;padding:1px 7px;
  font:500 max(.84em,12.5px)/1.5 var(--f);color:#4E5D6B;background:#F7F9FB;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* thank-you: numbered steps */
.tysteps{list-style:none;counter-reset:ty;margin:0 0 10px;padding:0;
  display:flex;flex-direction:column;gap:18px}
.tysteps li{counter-increment:ty;position:relative;padding-left:52px;
  font:400 16px/28px var(--f);color:#3F4C58}
.tysteps li::before{content:counter(ty);position:absolute;left:0;top:1px;width:34px;height:34px;
  border-radius:50%;background:var(--teal-p);color:var(--teal-d);
  font:700 15px/34px var(--f);text-align:center}
.tysteps b{display:block;color:var(--blue-d);font-weight:600}

/* thank-you: optional intake. Radio groups render as chips — one tap each,
   nothing required except the email that ties the answers to the request. */
.intake{margin-top:8px}
.intake .ifs{border:0;margin:0 0 26px;padding:0}
.intake legend{font:600 12px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal-d);padding:0;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips label{position:relative;display:inline-flex}
.chips input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 17px;
  border:1.5px solid #D6E0E8;border-radius:24px;background:#fff;
  font:500 14px/1 var(--f);color:#3F4C58;transition:.18s}
.chips label:hover span{border-color:var(--teal-l);color:var(--blue-d)}
.chips input:checked+span{background:var(--teal);border-color:var(--teal);color:#fff}
.chips input:focus-visible+span{outline:2px solid var(--teal-d);outline-offset:2px}

.intake .fld{display:flex;flex-direction:column;margin:0 0 20px;max-width:420px}
.intake .fld label{font:500 14px/1.5 var(--f);color:#3F4C58}
.intake .fld label em{font-style:normal;color:#5F6E80;font-weight:400}
.intake input[type=email]{border:none;border-bottom:1.5px solid #D6E0E8;font:400 15px/1.5 var(--f);
  color:var(--ink);padding:12px 2px;background:transparent;transition:.2s}
.intake input[type=email]:focus{outline:none;border-color:var(--teal)}
.intake input[type=email]:user-invalid{border-bottom-color:#B3261E}
.intake .send{background:var(--teal);color:#fff;font:500 16px/1 var(--f);padding:18px 34px;
  border-radius:8px;transition:.25s;min-height:44px}
.intake .send:hover{background:#148A82}

@media(max-width:767px){
  .legalpage{padding:8% 0 12%}
  .legalpage h2.mh{font-size:22px;line-height:30px;margin-top:36px}
  .lgp,.lgul li,.tysteps li{font-size:15.5px;line-height:27px}
  .tysteps li{padding-left:46px}
  .intake .send{width:100%}
}

/* The optional intake's confirmation state, swapped in when the form posts
   back to /thank-you/?sent=1. */
.intakedone{background:var(--teal-p);border:1px solid #BCE6DF;border-radius:10px;
  padding:20px 22px;max-width:760px}
.intakedone b{display:block;font:600 17px/1.4 var(--f);color:var(--teal-d);margin-bottom:6px}
.intakedone p{font:400 15px/25px var(--f);color:#3F4C58;margin:0}