/* CoreMed, generated. Do not edit site/assets/site.css; edit gen/css.js. */
:root{
  --navy:#16283A; --navy2:#22405C; --mint:#B7DCCD; --mint-deep:#2F7D63;
  --mint-bg:#EAF5F0; --orange:#E0872F; --bg:#F7F9F8;
  --ink:#132231; --muted:#5C6F7E; --orange-text:#9A5A12; --line:#DDE5E9; --card:#fff;
  --max:1180px; --r:12px; --navh:84px;
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* scrollbar-gutter reserves the scrollbar's width whether or not a scrollbar is showing.
   The GHL chat widget sets overflow:hidden on the body when it opens, which removes the
   scrollbar, widens the page by ~15px and spreads the nav out, because .nlinks grows to fill
   .nwrap. Reserving the gutter means that no longer changes anything. Added 2026-09-16.
   Unverified against the live widget: the site was not yet resolvable from Sean's network
   when this was written, so this is the standard fix for the standard cause, not a
   confirmed diagnosis. Re-check with the widget open once DNS settles. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--f);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--navy2);text-decoration-color:rgba(34,64,92,.3);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
h1,h2,h3,h4{letter-spacing:-.022em;line-height:1.12;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}
.skip:focus{left:14px;top:10px;z-index:99;background:var(--navy);color:#fff;padding:14px 20px;
  border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;z-index:200;border-radius:8px}

/* demo ribbon */
.demobar{background:var(--navy);color:#BCD4E4;font-size:12px;letter-spacing:.06em;
  text-align:center;padding:6px 12px}
.demobar b{color:var(--mint)}

/* nav */
.nav{position:sticky;top:0;z-index:100;background:rgba(247,249,248,.88);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nwrap{max-width:var(--max);margin:0 auto;padding:0 22px;height:var(--navh);display:flex;align-items:center;gap:26px}
.brand{font-weight:800;font-size:24px;letter-spacing:.06em;color:var(--navy);text-decoration:none;flex:0 0 auto}
.brand span{color:var(--orange-text)}
.brand.light{color:#fff;font-size:22px}
.nlinks{display:flex;align-items:center;gap:20px;flex:1 1 auto}
.nlinks a{font-size:16px;color:var(--ink);text-decoration:none;white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
.nlinks a:hover{border-bottom-color:var(--mint)}
.nlinks a.on{border-bottom-color:var(--orange);font-weight:600}
.nlinks a.quiet{color:var(--muted);font-size:15px}
.ndiv{width:1px;height:18px;background:var(--line);margin:0 2px}
.nact{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.lgn{font-size:16px;color:var(--ink);text-decoration:none}
.burger{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--navy)}
@media(max-width:1040px){
  /* Tightened 2026-09-16: the open menu was a 12px gap on top of 4px padding per link, so
     each row sat ~46px from the next and five links read as very spread out. Gap down to 4px
     with the padding moved into the link itself, which pulls the rows ~6px closer each while
     making the tappable area bigger, not smaller. Links go full width so the target spans the
     row rather than just the text. Row height lands around 38px: under the 44px ideal, but
     these are stacked with clear separation and the alternative is a menu that needs
     scrolling on a small phone. */
  .nlinks{position:absolute;top:var(--navh);left:0;right:0;background:var(--bg);flex-direction:column;
    align-items:stretch;padding:8px 22px 12px;gap:4px;border-bottom:1px solid var(--line);display:none}
  .nlinks a{display:block;width:100%;padding:6px 0}
  .nlinks.open{display:flex}
  .ndiv{display:none}
  .burger{display:block;order:3}
  .nact{margin-left:auto}
}
@media(max-width:560px){.lgn{display:none}}
/* Below ~360px the brand, the price pill and the burger no longer fit on one row at the
   desktop padding and gaps, and the burger was pushed 8px past the right edge on every page.
   Tighten the gutter and the pill rather than dropping anything: the price button is the
   primary conversion path and the burger is the only way to the nav. */
@media(max-width:380px){
  .nwrap{padding:0 14px;gap:10px}
  .nact{gap:8px}
  .pill.sm{padding:11px 14px;font-size:13.5px}
  .burger{font-size:20px}
}
/* Touch targets. The burger is the only way into the nav on a phone and was 22x25; the
   header pill and the newsletter submit were both a couple of pixels under. 44px is the
   WCAG 2.5.5 / Apple HIG floor. */
@media(max-width:1040px){
  .burger{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
    margin-right:-8px}
  /* .tlink reads as a text link but behaves as a button — it is the only action on a lot of
     cards. Pad it into a real target without moving anything around it. */
  .tlink{display:inline-flex;align-items:center;min-height:44px}
  .pdchip,.cashstrip a{min-height:44px;display:inline-flex;align-items:center}
  /* the explainer toggles in the calculator were 20px tall */
  .qinfo{min-height:44px;display:inline-flex;align-items:center}
  .pill.sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .brand{min-height:44px;display:flex;align-items:center}
  .nf-submit{min-height:44px}
}

/* buttons */
/* line-height is explicit so an <a> pill and a <button> pill are the same height. Without
   it they differ by a few pixels, which only shows up when the two sit side by side — which
   is exactly what the chat button and the email link do. */
.pill{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.4;
  border:1.5px solid var(--navy);
  transition:transform .12s ease,background .15s ease;cursor:pointer}
.pill:hover{background:#0D1B28;transform:translateY(-1px)}
.pill.ghost{background:transparent;color:var(--navy)}
.pill.ghost:hover{background:rgba(22,40,58,.06)}
.pill.sm{padding:9px 18px;font-size:14px}
.pill.lg{padding:16px 34px;font-size:17px}
.pill.block{display:block;text-align:center;width:100%;margin-top:14px}

/* Spacing between a call to action and whatever sits above it. .dek carries no bottom
   margin by design (it hangs directly off a heading), so a button placed after one used to
   sit flush against the text. These adjacency rules make the CTA supply the gap itself,
   which is more reliable than remembering to wrap every button in a spacer. */
/* A .tlink used inside a sentence stays inline; one standing on its own as a sibling of a
   paragraph or a button becomes inline-block so it can take a top margin at all. */
.dek + .tlink,p + .tlink,.pill.block + .tlink{display:inline-block}
.dek + .pill,.dek + .tlink{margin-top:24px}
p + .pill,p + .tlink{margin-top:14px}
p + .pill.block{margin-top:18px}
.pill.block + .tlink,.pill.block + .pill.block{margin-top:12px}
.tlink{color:var(--navy2);font-weight:600;text-decoration:none;font-size:15px}
.tlink:hover{text-decoration:underline}

/* layout */
.swrap,.bwrap,.hwrap,.fwrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.swrap.narrow{max-width:820px}
.sec{padding:76px 0}
.sec.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kick{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint-deep);
  font-weight:700;margin:0 0 14px}
.kick a{color:inherit;text-decoration:none}
.dek{font-size:19px;color:var(--muted);max-width:70ch;margin:16px 0 0;line-height:1.55}
/* .dek is capped at 70ch with a zero left margin, so inside a centred block its TEXT centred
   but its BOX still sat hard left — which is why the last section of /guides/ looked off.
   Centre the box too, wherever the container asks for centring. */
.center .dek,.center p,.center h2{margin-left:auto;margin-right:auto}
.center{text-align:center;margin-top:34px}
.fineprint{font-size:12.5px;color:var(--muted);margin-top:26px;line-height:1.5;max-width:75ch}
/* Zion notice at the foot of the Zion-backed membership pages. Deliberately quiet: it is a
   required disclosure, not a selling point, but it must stay legible — small and grey, never
   small and invisible. */
.zdisc{padding:0 0 44px;background:var(--bg)}
.zdisc p{font-size:12px;color:#5A6B78;line-height:1.55;margin:0 0 8px;max-width:78ch}
.zdisc p:last-child{margin-bottom:0}
.zdisc a{color:#3F5666;text-decoration:underline;text-underline-offset:2px}
.zdisc a:hover{color:var(--navy)}
.microcopy{font-size:13.5px;color:var(--muted);margin-top:14px}

/* hero */
.hero{padding:96px 0 92px;text-align:center}
.hero .eyebrow{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint-deep);font-weight:700;margin:0 0 22px}
.hero h1{font-size:clamp(38px,6vw,68px);margin:0 auto;max-width:16ch}
.hero .lede{font-size:20px;color:var(--muted);max-width:62ch;margin:26px auto 0;line-height:1.55}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
/* the gap above already comes from .cta itself; a .dek sitting directly on top of one
   should not also collapse against it */
.dek + .cta{margin-top:26px}
.phead .cta{justify-content:flex-start}
.hstats{max-width:var(--max);margin:64px auto 0;padding:0 22px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hstats div{background:var(--bg);padding:28px 14px;text-align:center}
.hstats b{display:block;font-size:34px;letter-spacing:-.03em;color:var(--navy)}
.hstats span{font-size:13px;color:var(--muted)}
@media(max-width:720px){.hstats{grid-template-columns:repeat(2,1fr)}}

/* dark band */
.band{background:var(--navy);color:#fff;padding:80px 0;margin-top:0}
.band h2{font-size:clamp(32px,5vw,58px);max-width:34ch;line-height:1.06;letter-spacing:-.025em}
.band p{color:#B9CBD9;font-size:18px;max-width:72ch;margin:22px 0 0;line-height:1.6}
.band.haspic .bwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:56px;align-items:center}
.band.haspic h2{max-width:18ch}
.band.haspic p{max-width:none}
.bandpic{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:14px;background:#16293a}
@media(max-width:900px){.band.haspic .bwrap{grid-template-columns:1fr;gap:32px}
  .band.haspic h2,.band.haspic p{max-width:34ch}
  .band.haspic p{max-width:72ch}
  .bandpic{aspect-ratio:16/10;max-height:340px}}

/* page head */
.phead{padding:72px 0 8px;background:linear-gradient(180deg,var(--mint-bg),var(--bg))}
.phead.tight{padding:56px 0 4px}
.phead h1{font-size:clamp(32px,5vw,54px);max-width:18ch}
.phead.region h1{max-width:22ch}
.sec h2{font-size:clamp(25px,3.2vw,36px);max-width:24ch}
.sec h3{font-size:17px;margin-bottom:8px}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
@media(max-width:940px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px 26px;position:relative;display:flex;flex-direction:column}
.plan.pop{border-color:var(--mint-deep);box-shadow:0 10px 34px rgba(47,125,99,.11)}
.badge{position:absolute;top:-11px;left:24px;background:var(--mint-deep);color:#fff;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:4px 12px;border-radius:999px}
.plan h2,.plan h3{font-size:24px}
.ptag{font-size:13px;color:var(--mint-deep);font-weight:600;margin:6px 0 0;letter-spacing:.02em}
/* compact plan card: icon inline with the name, no price slot */
.plan.compact{padding:24px 22px 22px}
.pmast{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pmast>div{min-width:0}
.pmast h2,.pmast h3{font-size:21px;line-height:1.15;margin:0}
.pmast .ptag{margin:3px 0 0}
.ptile.sm{width:84px;margin:0;flex:0 0 84px}
.ptile.sm img{border-radius:19px}
.plan.compact .pline{margin:0 0 14px}
.plan.compact .pticks{margin:0 0 14px}
.plan.compact .pbest{margin:0 0 12px}
.plan.compact .pnote{margin:0 0 16px}
.pacts{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.pacts .pill.block{margin:0}
.tlink.sm{font-size:13.5px}
.plan.compact .badge{white-space:nowrap}
/* The membership price display. Scoped away from tables: a table also carrying a "price"
   modifier used to inherit display:flex here, which drops thead and tbody out of table
   layout and lands them side by side. */
.price:not(table){display:flex;align-items:baseline;gap:2px;margin:20px 0 2px}
.price .cur{font-size:22px;color:var(--muted)}
.price b{font-size:46px;letter-spacing:-.035em;line-height:1}
.price .per{font-size:15px;color:var(--muted);margin-left:3px}
.price.pending .slot{font-size:46px;color:#C3D0D8;letter-spacing:-.03em;line-height:1;border-bottom:2px dashed #C3D0D8}
.pnote{font-size:13px;color:var(--muted);margin:6px 0 0}
.pline{font-size:15.5px;color:var(--muted);margin:18px 0 0;flex:1 1 auto}
.pbest{font-size:14px;color:var(--muted);margin:16px 0 0}
.pticks{list-style:none;padding:0;margin:18px 0 0;font-size:14.5px}
.pticks li{padding-left:22px;position:relative;margin-bottom:7px}
.pticks li:before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--mint)}
.pricerow{display:flex;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:26px}
.pricerow .pnote{width:100%;margin-top:-2px}

/* comparison table */
.tablewrap{overflow-x:auto;margin-top:30px}
/* On a phone a wide table scrolls inside this wrapper, but nothing told the reader that.
   A right-edge fade plus a one-line hint is the difference between "the table is cut off"
   and "there is more to the right". The fade is painted on the wrapper itself so it does
   not scroll away with the content. */
@media(max-width:720px){
  .tablewrap{position:relative;-webkit-overflow-scrolling:touch}
  .tablewrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;
    background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.92));
    pointer-events:none}
  .sec.alt .tablewrap::after,.bgsec.alt .tablewrap::after{
    background:linear-gradient(to right,rgba(241,239,234,0),rgba(241,239,234,.94))}
  .tablewrap[data-scrolls]::before{content:"Scroll for the rest of the table \2192";
    display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px;letter-spacing:.01em}
}
table.cmp{width:100%;border-collapse:collapse;background:#fff;font-size:15px;min-width:620px}
table.cmp th,table.cmp td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left}
table.cmp thead th{background:var(--navy);color:#fff;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
table.cmp tbody th{font-weight:500;color:var(--ink)}
table.cmp td{text-align:center;width:130px}
td.yes{color:var(--mint-deep);font-size:19px}
td.no{color:#C3D0D8}
td.pend{color:#C3D0D8;text-align:left}
/* .wide means left-aligned, auto-width columns — a label/value or descriptive table rather
   than a numeric comparison grid. It does not need the 620px floor that keeps comparison
   columns legible, and that floor was pushing 43 pages into a sideways scroll on a phone. */
table.cmp.wide{min-width:0}
h2 + table.cmp,h3 + table.cmp,p + table.cmp{margin-top:22px}

/* Headings ship with margin:0 and every component supplies its own spacing, which works
   until a component turns up that supplies none — then the heading sits flush on it. These
   fill in the combinations that had nothing, instead of putting a blanket margin on h2 and
   then fighting it back off inside every card. */
h2 + p,h2 + .bodyp,h3 + .bodyp{margin-top:16px}
h2.relh + .rel{margin-top:18px}
.three + h2,.inc + h2,.dek + h2{margin-top:40px}
table.cmp.wide td{text-align:left;width:auto}
/* On a phone the 16px cell padding and 15px type were costing ~50px of width per table,
   which is the difference between fitting and forcing a sideways drag. Every .cmp table is
   inside a .tablewrap so it can still scroll if a long cell needs it — this just means most
   of them no longer have to. */
@media(max-width:520px){
  table.cmp{font-size:14px}
  table.cmp th,table.cmp td{padding:10px 10px}
  table.cmp thead th{font-size:12.5px;letter-spacing:.04em}
}

/* generic grids */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.two{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
@media(max-width:860px){.three,.two,.four{grid-template-columns:1fr}}
@media(min-width:861px) and (max-width:1040px){.four{grid-template-columns:repeat(2,1fr)}}
.three>div h3,.four>div h3{font-size:17px}
.three>div p,.four>div p{font-size:15px;color:var(--muted);margin:8px 0 0}
/* .three.steps — the numbered run-up on /join/. Bordered tiles so the three steps read as a
   discrete band, with real air before the enrolment card rather than butting into it. */
.three.steps{gap:18px;margin-bottom:60px}
.three.steps>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px}
.three.steps>div h3{font-size:16.5px}
.three.steps>div p{margin-top:10px}
@media(max-width:860px){.three.steps{margin-bottom:40px}}
.four>div .pill{margin-top:12px}

/* The block that replaced "call us on ...". Chat first, email as the always-works fallback. */
.helpline{background:#F4F8F9;border:1px solid var(--line);border-radius:14px;
  padding:20px 24px;margin:26px 0}
.helpline.tight{padding:14px 18px;margin:18px 0}
.helpline p{margin:0;color:#41535F;line-height:1.6;font-size:15.5px}
.helpacts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px !important}
/* A <button> does not inherit the page font and brings its own line-height, so a button
   .pill came out shorter than an <a> .pill beside it. Normalise, or the chat button and the
   email link are visibly different heights depending on which one the config renders. */
/* font-family, not the font shorthand: the shorthand also resets font-size, so the button
   picked up the body's 17px and no longer matched the pill beside it. */
button.pill{font-family:inherit;cursor:pointer}
button.pill.ghost{border-color:var(--navy)}
/* a button that has to read as a link, because it opens the chat rather than navigating */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--mint-deep);font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{color:var(--navy)}

/* ---- explainer modal --------------------------------------------------------------
   One dialog, reused by the calculator and the enrolment form. Inline explainers pushed
   the Continue button off a laptop screen; this sits over the page instead, and <dialog>
   brings the focus trap, Escape key and backdrop with it. */
.modal{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 64px);overflow:visible;color:inherit}
.modal::backdrop{background:rgba(15,29,42,.55);backdrop-filter:blur(2px)}
.modalbox{background:#fff;border-radius:18px;padding:32px 34px 26px;position:relative;
  box-shadow:0 24px 60px rgba(15,29,42,.28);max-height:calc(100vh - 64px);overflow-y:auto}
.modalbox h2{font-size:clamp(21px,3vw,26px);margin:0 0 14px;padding-right:34px}
.modalbody{color:#41535F;line-height:1.7;font-size:16px}
.modalbody p{margin:0 0 12px}
.modalbody p:last-child{margin-bottom:0}
.modalbody b{color:var(--navy)}
.modalfoot{margin-top:22px}
.modalx{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;
  border:0;background:#F1F5F6;color:#5A6C77;font-size:22px;line-height:1;cursor:pointer}
.modalx:hover{background:#E4EBED;color:var(--navy)}
@media(max-width:600px){.modalbox{padding:26px 22px 20px}}

/* ---- calculator result: price on the left, what to do next on the right -------------
   Both halves are on screen at the same width, so choosing "email me this quote" swaps
   the buttons for the form in place rather than adding a screenful below the number. */
.qcols{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
@media(max-width:900px){.qcols{grid-template-columns:1fr;gap:26px}}
.qcolnext{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.qactsh{margin:0 0 14px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--mint-deep)}
.qacts .pill{display:block;width:100%;text-align:center;margin:0 0 10px}
.qacts .qmicro{margin-top:14px}
/* Two-up inside the right-hand column: the form is short enough to sit entirely beside the
   price on a laptop, which is the whole point of the side-by-side layout. */
/* The divider and top padding are there for the stacked layout, where the form follows the
   buttons down the page. In the side-by-side card the form REPLACES the buttons, so a rule
   above it separates it from nothing. */
.qcolnext .qlead{margin-top:0;padding-top:0;border-top:0}
.qlead .qgrid{grid-template-columns:1fr 1fr;gap:12px 16px}
.qlead .qfield.wide{grid-column:1 / -1}
.qleadh{margin:0 0 6px;font-size:19px}
.qlead .nf-demo{padding:10px 14px;font-size:13px;margin:0 0 12px}
.qlead .qleadgo{display:block;width:100%;margin-top:18px}
.qleadback{margin:14px 0 0;text-align:center}
.qcolprice .qeditline{margin-top:18px}

/* ---- the price gives way to the form ----------------------------------------------
   Once someone has decided (sign up, or email it to me) the number has done its job and
   the inputs are what matters. The quote shrinks to a compact receipt and hands most of
   the width to the form, so the fields are comfortable rather than squeezed into a third
   of the page. Reverting is just removing the class. */
/* The calculator lives in a .swrap narrow, which is right for reading the questions and
   too tight for a two-column form — it was capping the whole card at 820px and squeezing
   the inputs. Once the form is open the card breaks out of the narrow column and centres
   itself at the site's normal content width. */
.qcalc.leadopen{width:min(1060px,calc(100vw - 44px));max-width:none;
  margin-left:50%;transform:translateX(-50%)}
@media(max-width:900px){.qcalc.leadopen{width:auto;margin-left:0;transform:none}}
.qcalc.leadopen .qcols{grid-template-columns:minmax(210px,.58fr) 1.42fr;gap:36px}
.qcalc.leadopen .qcolprice{background:#F4F8F9;border:1px solid var(--line);border-radius:14px;
  padding:20px 22px}
.qcalc.leadopen .qrlab{font-size:11.5px;letter-spacing:.1em}
.qcalc.leadopen .qrprice{margin:0 0 14px}
.qcalc.leadopen .qrprice b{font-size:40px}
.qcalc.leadopen .qrprice .qcur{font-size:18px}
.qcalc.leadopen .qrprice .qper{font-size:14px}
.qcalc.leadopen .qsummary{margin-bottom:12px}
/* In the narrow receipt a long value like "Comprehensive" will not sit beside its label.
   Let the row wrap instead of letting the two collide: it stays one line when it fits and
   drops the value underneath when it does not. */
.qcalc.leadopen .qsummary li{padding:6px 0;font-size:13.5px;flex-wrap:wrap;gap:0 12px}
.qcalc.leadopen .qsummary span{flex:0 1 auto}
.qcalc.leadopen .qsummary b{margin-left:auto}
.qcalc.leadopen .qnote{font-size:12.5px;line-height:1.55;text-align:left}
.qcalc.leadopen .qcolprice .qeditline{text-align:left}
.qcalc.leadopen .qcolnext{padding:26px 30px}
.qcalc.leadopen .qcolprice .qeditline{margin-top:12px}
.qcalc.leadopen .qeditline button{font-size:13.5px}
@media(prefers-reduced-motion:no-preference){
  .qcols{transition:grid-template-columns .28s ease}
  .qrprice b{transition:font-size .28s ease}
  .qcalc{transition:width .28s ease,margin-left .28s ease,transform .28s ease}
}
@media(max-width:900px){
  /* stacked: there is no width to hand over, so keep the compact receipt but full bleed */
  .qcalc.leadopen .qcols{grid-template-columns:1fr}
}
/* On a phone the two-up grid leaves the region select too narrow for its own option text
   ("Somewhere else in Montana" clipped mid-word). Give it the full row. */
@media(max-width:560px){.qlead .qregion{grid-column:1 / -1}}
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media(max-width:900px){.inc{grid-template-columns:1fr}}
.incitem{background:#fff;padding:26px 24px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.incitem h3{font-size:16.5px}
.incitem p{font-size:14.5px;color:var(--muted);margin:8px 0 0}

.bigcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.bigcard:hover{border-color:var(--mint-deep);transform:translateY(-2px)}
.bigcard.haspic{padding-top:0;overflow:hidden}
.bigcard .cardpic{display:block;width:calc(100% + 56px);max-width:none;margin:0 -28px 22px;height:auto;
  aspect-ratio:16/9;object-fit:cover;background:var(--bg)}
@media(max-width:600px){.bigcard .cardpic{margin-bottom:18px}}
.bigcard.static:hover{transform:none;border-color:var(--line)}
/* the how-it-works pair carries a taller photo so the tile reads picture-first */
.bigcard.static.haspic .cardpic{aspect-ratio:3/2}
@media(max-width:600px){.bigcard.static.haspic .cardpic{aspect-ratio:16/9}}

/* ---- testimonials ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media(max-width:940px){.tgrid{grid-template-columns:1fr}}
.mquote{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px 24px;margin:0;position:relative;display:flex;flex-direction:column}
.mquote blockquote{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink);flex:1 1 auto}
.mquote blockquote::before{content:"\201C";display:block;font-size:44px;line-height:.6;
  color:var(--mint-deep);opacity:.42;margin:0 0 12px}
.mquote figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px}
.mqname{font-weight:700;font-size:15px;color:var(--ink)}
.mqdetail{font-size:14px;color:var(--muted)}
.mqsince{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
/* sample styling exists so placeholder copy can never be mistaken for a real endorsement */
.mquote.sample{border-style:dashed;border-color:#D8B27A;background:#FDFAF4}
.stag{position:absolute;top:-10px;right:18px;background:#8A5A12;color:#fff;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding:3px 10px;border-radius:999px}
.samplewarn{margin:18px 0 0;padding:12px 16px;border-radius:10px;background:#FBF3E4;
  border:1px solid #E6CFA4;color:#6B4C12;font-size:14px;line-height:1.5}

/* ---- footer newsletter column ----
   Sits last in the footer grid, beside Regions. The column is narrow, so the form stacks
   rather than running the input and button side by side the way the old top band did. */
.fnewscol .fnewsub{margin:0 0 14px;font-size:13.5px;color:#D7E2EA;line-height:1.5;max-width:26ch}
.foot .fnewscol .nfwrap{max-width:none;margin:0;padding:0;background:none;border:0}
.foot .fnewscol .nform{display:block;margin:0}
.foot .fnewscol .nf-row{margin:0 0 10px;max-width:none}
.foot .fnewscol .nf-row label{color:#D7E2EA;font-size:12.5px;margin-bottom:6px}
.foot .fnewscol input[type=email]{width:100%;box-sizing:border-box;font-size:14px;padding:10px 13px}
.foot .fnewscol .nf-submit{width:100%;margin:0;background:var(--mint);color:#0F1D2A;
  border-color:var(--mint);font-size:14px;padding:10px 16px}
.foot .fnewscol .nf-submit:hover{background:#fff;border-color:#fff;color:#0F1D2A}
.foot .fnewscol .nf-done{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);
  padding:18px 18px;margin:0}
.foot .fnewscol .nf-done h3{color:#fff;font-size:16px}
.foot .fnewscol .nf-done p{color:#D7E2EA;font-size:13.5px}
.foot .fnewscol .nf-tick{width:30px;height:30px;font-size:16px;color:#0F1D2A;background:var(--mint)}
.foot .fnewscol .nf-payload{display:none}
@media(max-width:940px){.fnewscol .fnewsub{max-width:none}}

/* ---- decorative Montana outline ---- */
.mtbg{position:relative;overflow:hidden}
.mtmark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(720px,86%);height:auto;color:var(--mint-deep);opacity:.07;
  pointer-events:none;z-index:0}
.mtbg>.swrap{position:relative;z-index:1}
@media(max-width:700px){.mtmark{width:120%;opacity:.06}}
.bigcard > .ico{width:34px;height:34px;margin:0 0 15px}
.bigcard h2,.bigcard h3{font-size:22px}
.bigcard p{font-size:15px;color:var(--muted);margin:12px 0 16px}
.segsize{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:14px;
  color:var(--muted);letter-spacing:.02em}
.segsize .ico{margin:0;width:22px;height:22px}

/* regions */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.rgrid.big{grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.rgrid,.rgrid.big{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.rgrid,.rgrid.big{grid-template-columns:1fr}}
.rcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.rcard:hover{border-color:var(--mint-deep);transform:translateY(-2px)}
.rcard h2,.rcard h3{font-size:20px}
.rcard p{font-size:14px;color:var(--mint-deep);font-weight:600;margin:6px 0 10px}
.rcard .towns{font-size:13px;color:var(--muted);display:block;line-height:1.5}
.rcard.soon{background:#F4F7F8}
.rcard.soon p{color:var(--orange-text)}
/* photo band on region tiles */
.rcard.haspic{padding:0;overflow:hidden}
.rcard .rpic{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--mint-bg,#EAF5F0)}
.rcard .rpic img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
.rcard:hover .rpic img{transform:scale(1.045)}
.rcard .rbody{display:block;padding:20px 24px 24px}
.rgrid.big .rcard .rpic{aspect-ratio:16/9}
.rcard.soon .rpic img{filter:saturate(.45) opacity(.75)}

/* provider list */
.catblock{margin-top:44px}
.cathead{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-deep);
  padding-bottom:10px;border-bottom:2px solid var(--mint);margin-bottom:20px}
.plist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.plist{grid-template-columns:1fr}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px}
.pcard h3{font-size:16.5px}
/* Provider photos. Every card image is square at source, so a round crop is uniform across
   the grid whether the subject is a clinician or a storefront. */
.pphoto.card{width:62px;height:62px;border-radius:50%;object-fit:cover;display:block;
  margin:0 0 13px;background:var(--bg);border:1px solid var(--line)}
.pportrait{margin:24px 0 4px}
.pphoto.portrait{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}
.pphoto.card.logo{object-fit:contain;background:#fff;padding:0}
.pportrait.ismark{margin-top:22px}
.pportrait.ismark .pphoto.portrait{border:0;border-radius:0;background:transparent}
.pphoto.card.mono{display:flex;align-items:center;justify-content:center;
  background:var(--mint-bg);border-color:#CFE5DB;color:var(--mint-deep);
  font-weight:700;font-size:19px;letter-spacing:.03em}
@media(max-width:600px){.pphoto.card{width:54px;height:54px;margin-bottom:11px}
  .pphoto.card.mono{font-size:17px}}
.pcat{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:5px 0 10px}
.paddr{font-size:14px;color:var(--muted);margin:0 0 6px;line-height:1.45}
.pphone a{font-size:15px;font-weight:600;text-decoration:none}
.pnoteS{font-size:12.5px;color:var(--orange-text);margin:8px 0 0}
.pweb{margin:6px 0 0}
.pweb a{font-size:12.5px;color:var(--mint-deep);text-decoration:none}
.pweb a:hover{text-decoration:underline}

/* provider hours, Google rating, directions */
.grating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;
  color:var(--muted);margin:14px 0 4px}
.grating b{color:var(--navy);font-size:15.5px}
.stars{color:#E8A33D;letter-spacing:1px;font-size:15px;line-height:1}
.grating a{color:var(--mint-deep);text-decoration:none}
.grating a:hover{text-decoration:underline}
.phours{margin:36px 0 40px}
.phours h3{font-size:1.05rem;margin:0 0 12px}
.hourstab{border-collapse:collapse;width:100%;max-width:400px;font-size:15px}
.hourstab th,.hourstab td{text-align:left;padding:9px 14px 9px 0;
  border-bottom:1px solid var(--line);font-weight:400}
.hourstab th{color:var(--navy);font-weight:600;white-space:nowrap;width:9em}
.hourstab td{color:#41535F}
.hourstab tr.hclosed td{color:#8A97A0}
.hnote{font-size:12.5px;color:#7C8B95;margin:10px 0 0;max-width:52ch}
.pcardrate{font-size:13px;color:var(--muted);margin:8px 0 0;display:flex;align-items:center;gap:6px}
.pcardrate .stars{font-size:12.5px}

/* cash-pay price tables */
.cptab .cpamt{font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy);white-space:nowrap}
.cpunit{font-weight:400;color:var(--muted);font-size:13px}
.cpnote{font-weight:400;color:#7C8B95;font-size:12.5px;line-height:1.5}

/* clickable what's-included tiles */
a.incitem{text-decoration:none;color:inherit;display:block;position:relative;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
a.incitem:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(22,50,63,.11);
  border-color:var(--mint)}
a.incitem:focus-visible{outline:3px solid var(--mint-deep);outline-offset:3px}
a.incitem h3{transition:color .16s ease}
a.incitem:hover h3{color:var(--mint-deep)}
.incgo{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;
  color:var(--mint-deep);letter-spacing:.01em}
.incgo::after{content:"\00a0\2192";transition:margin-left .16s ease;display:inline-block}
a.incitem:hover .incgo::after{margin-left:5px}
@media(prefers-reduced-motion:reduce){
  a.incitem,a.incitem h3,.incgo::after{transition:none}
  a.incitem:hover{transform:none}
}

/* what's-included explainer pages */
.inplans{font-size:15px;color:var(--muted);margin:10px 0 0}
.inplans a{color:var(--mint-deep);font-weight:600}
.bodyp{color:#41535F;line-height:1.72;margin:0 0 14px;font-size:16.5px}
.rlinks{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.rlinks a{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:14px;text-decoration:none;color:var(--navy)}
.rlinks a:hover{border-color:var(--mint);color:var(--mint-deep)}
.incheroimg{margin:26px 0 0;max-width:520px;border-radius:var(--r);overflow:hidden}
.incheroimg img{width:100%;height:auto;display:block}

/* which-membership diagnostic */
.fit{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 30px;margin-top:8px}
.fitprog{margin:0 0 26px}
.fbar{height:5px;background:#EBF1EE;border-radius:999px;overflow:hidden}
.fbar i{display:block;height:100%;width:0;background:var(--mint-deep);border-radius:999px;
  transition:width .3s ease}
.fcount{font-size:12.5px;color:var(--muted);margin:9px 0 0}
.fq h2{font-size:1.42rem;line-height:1.28;margin:0 0 8px}
.fhelp{font-size:14.5px;color:var(--muted);margin:0 0 20px;line-height:1.6}
.fopts{display:grid;gap:11px}
.fopt{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:17px 20px;font:inherit;font-size:16px;color:var(--navy);cursor:pointer;
  transition:border-color .14s ease,background .14s ease,transform .14s ease}
.fopt:hover{border-color:var(--mint);background:var(--mint-bg);transform:translateX(2px)}
.fopt:focus-visible{outline:3px solid var(--mint-deep);outline-offset:2px}
.fopt.on{border-color:var(--mint-deep);background:var(--mint-bg);font-weight:600}
.fback{margin:20px 0 0}
.flink{background:none;border:0;color:var(--mint-deep);font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
.fresult .fkick{font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mint-deep);font-weight:700;margin:0 0 6px}
.fresult h2{font-size:1.72rem;margin:0 0 10px}
.fline{font-size:16.5px;color:#41535F;line-height:1.65;margin:0 0 22px}
.fwhy{background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:12px;padding:20px 24px;margin:0 0 18px}
.fwhy h3{font-size:1rem;margin:0 0 10px}
.fwhy ul{margin:0;padding-left:20px}
.fwhy li{font-size:15px;color:#41535F;line-height:1.62;margin:0 0 9px}
.fwhy li:last-child{margin-bottom:0}
.fwhy a{color:var(--mint-deep);font-weight:600}
.fnote{background:#FFF6E8;border:1px solid #F0DDBE;border-radius:12px;padding:16px 20px;
  font-size:14.5px;color:#5A4A32;line-height:1.6;margin:0 0 18px}
.fnote a{color:var(--mint-deep);font-weight:600}
.fcaveat{font-size:14.5px;color:var(--muted);margin:0 0 22px;line-height:1.6}
.fredo{font-size:13.5px;color:var(--muted);margin:18px 0 0}
.fredo a{color:var(--mint-deep)}
@media(max-width:600px){.fit{padding:24px 20px}.fq h2{font-size:1.24rem}}
@media(prefers-reduced-motion:reduce){.fopt,.fbar i{transition:none}.fopt:hover{transform:none}}
.qfitnote{grid-column:1/-1;font-size:13.5px;color:var(--mint-deep);background:var(--mint-bg);
  border:1px solid #CFE5DB;border-radius:9px;padding:10px 14px;margin:0}
.qfitnote a{color:var(--mint-deep);font-weight:700}

/* member stories */
.storygrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:820px){.storygrid{grid-template-columns:1fr}}
.story{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;margin:0}
.story blockquote{margin:0;padding:0;border:0}
.story blockquote p{font-size:17px;line-height:1.62;color:var(--navy);margin:0}
.story blockquote p::before{content:"\201C";color:var(--mint);font-size:34px;line-height:0;
  vertical-align:-8px;margin-right:2px}
.story figcaption{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.sattrib{font-size:14px;font-weight:700;color:var(--navy)}
.smeta{font-size:12.5px;color:var(--muted)}
.storypull{margin:30px 0}
.consentlist{margin:12px 0 18px 20px}
.consentlist li{color:#41535F;line-height:1.68;margin:0 0 9px;font-size:16px}
.consentlist b{color:var(--navy)}
.center{text-align:center}

/* prescription lookup */
.rxlook{margin:34px 0 0}
.rxsearchlab{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--navy);margin:0 0 8px}
.rxsearch{width:100%;max-width:520px;font:inherit;font-size:17px;padding:14px 18px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--navy)}
.rxsearch:focus{outline:none;border-color:var(--mint-deep);box-shadow:0 0 0 3px var(--mint-bg)}
.rxcount{font-size:13px;color:var(--muted);margin:10px 0 16px}
.rxtab{width:100%;border-collapse:collapse;margin:0}
.rxtab thead th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:0 16px 10px 0;border-bottom:2px solid var(--line)}
.rxtab td,.rxtab th[scope=row]{padding:15px 16px 15px 0;border-bottom:1px solid var(--line);
  vertical-align:top;text-align:left;font-weight:400}
.rxtab th[scope=row]{width:38%}
.rxname{display:flex;flex-direction:column;gap:2px}
.rxcost{font-weight:700;color:var(--navy)}
@media(max-width:700px){
  .rxtab thead{position:absolute;left:-9999px}
  .rxtab tr{display:block;border-bottom:1px solid var(--line);padding:14px 0}
  .rxtab td,.rxtab th[scope=row]{display:block;width:auto;border:0;padding:0 0 6px}
}
.rxgen{font-weight:700;color:var(--navy);font-size:15.5px}
.rxbrand{font-weight:400;color:var(--muted);font-size:13px}
.rxcond{font-weight:400;color:#8A97A0;font-size:12.5px}
.rxtier{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:999px;
  white-space:nowrap}
.rxt-included{background:var(--mint-bg);color:var(--mint-deep);border:1px solid #CFE5DB}
.rxt-discounted{background:#FFF6E8;color:#8A6520;border:1px solid #F0DDBE}
.rxt-ask{background:#F1F4F3;color:#5A6B75;border:1px solid var(--line)}
.rxnote{font-size:14px;color:#41535F;line-height:1.55}
.rxempty{margin-top:20px}
.rxempty h3{font-size:1.1rem;margin:0 0 8px}
@media(max-width:600px){.rxsearch{font-size:16px}}

/* reference guides */
.glede{font-size:19px;line-height:1.62;color:var(--navy);font-weight:500;margin:0 0 26px;
  padding-left:18px;border-left:3px solid var(--mint)}
.srcbox{background:#F7FAF9;border:1px solid var(--line);border-radius:12px;
  padding:20px 24px;margin:32px 0 0}
.srcbox h3{font-size:.94rem;margin:0 0 10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted)}
.srcbox ul{margin:0;padding-left:19px}
.srcbox li{font-size:14.5px;line-height:1.55;margin:0 0 7px}
.srcbox a{color:var(--mint-deep)}
.srcnote{font-size:12.5px;color:#7C8B95;margin:12px 0 0;line-height:1.5}
.ico{display:block;margin:0 0 12px;color:var(--mint-deep);flex:0 0 auto}
.incitem .ico,.three .ico{margin-bottom:11px}
@media(max-width:600px){.ico{width:23px;height:23px;margin-bottom:9px}}
.disclose{background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:12px;
  padding:18px 22px;margin:18px 0 0}
.disclose p{font-size:14px;color:#41535F;line-height:1.62;margin:0}
.disclose b{color:var(--navy)}
.relh{margin-top:38px}
.rel{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:760px){.rel{grid-template-columns:1fr}}
.relcard{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease}
.relcard:hover{border-color:var(--mint);transform:translateY(-2px)}
.relcard h3{font-size:1rem;margin:0 0 6px;color:var(--navy)}
.relcard:hover h3{color:var(--mint-deep)}
.relcard p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}
@media(prefers-reduced-motion:reduce){.relcard{transition:none}.relcard:hover{transform:none}}

/* glossary */
.glookwrap{margin:0 0 26px}
.gloss{margin:0}
.gterm{padding:22px 0;border-bottom:1px solid var(--line)}
.gterm:first-child{border-top:1px solid var(--line)}
.gterm dt{font-size:1.06rem;font-weight:700;color:var(--navy);margin:0 0 8px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.gcat{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mint-deep);background:var(--mint-bg);border:1px solid #CFE5DB;
  border-radius:999px;padding:3px 9px}
.gterm dd{margin:0}
.gterm dd p{font-size:15.5px;line-height:1.66;color:#41535F;margin:0 0 8px}
.ghonest{background:#FFF6E8;border-left:3px solid #E8C88A;padding:10px 14px;
  border-radius:0 8px 8px 0;font-size:14.5px!important;color:#5A4A32!important}
.ghonest b{color:#6B5424}
.gsee{margin:6px 0 0!important}
.gsee a{color:var(--mint-deep);font-weight:600;font-size:14px}
.gnone{margin:22px 0 0;color:var(--muted);font-size:15px}
.gnone a{color:var(--mint-deep)}

/* notices */
.notice{background:var(--mint-bg);border:1px solid var(--mint);border-radius:var(--r);padding:26px 28px;margin-bottom:40px}
.notice h2{font-size:22px}
.notice p{font-size:15.5px;color:var(--muted);margin:12px 0 18px}
.legal{max-width:74ch}
.legal h2{margin:38px 0 10px;font-size:1.32rem;scroll-margin-top:calc(var(--navh) + 14px)}
.legal h3{margin:22px 0 6px;font-size:1.02rem;color:var(--navy)}
.legal p,.legal li{color:#41535F;line-height:1.72}
.legal ul{margin:10px 0 10px 20px}
.legal li{margin:5px 0}
.legal .updated{font-size:.86rem;color:#7C8B95;border-bottom:1px solid #E3EAE7;padding-bottom:14px;margin-bottom:6px}
.toc{background:var(--mint-bg,#EAF5F0);border:1px solid #D3E7DE;border-radius:12px;padding:18px 22px;margin:26px 0}
.toc p{font-weight:700;color:var(--navy);margin:0 0 8px;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase}
.toc ol{margin:0 0 0 18px;columns:2;column-gap:30px}
.toc li{margin:3px 0;break-inside:avoid}
.toc a{color:#245C48;text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{border-bottom-color:#245C48}
@media(max-width:640px){.toc ol{columns:1}}
.datanotice{background:#FDF3E7;border:1px solid #F0D4AF;border-left:4px solid var(--orange);
  border-radius:8px;padding:14px 18px;font-size:14px;color:#7A4A10;margin:26px 0}
.datanotice b{color:#9A5A12}

/* cash pay */
.searchbar{display:flex;gap:10px;margin-top:28px;max-width:560px}
.searchbar .pill{flex:0 0 auto}
@media(max-width:400px){.searchbar{flex-direction:column}.searchbar .pill{width:100%}}
.searchbar input{flex:1 1 0;min-width:0;padding:14px 18px;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:16px;background:#fff}
.searchbar input:focus{outline:2px solid var(--mint-deep);outline-offset:1px}
.cashstrip{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.cashstrip a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-size:14px;text-decoration:none;color:var(--ink)}
.cashstrip a:hover{border-color:var(--mint-deep)}
.cpgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
@media(max-width:1000px){.cpgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cpgrid{grid-template-columns:1fr}}
.cpcard{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;
  text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.cpcard:hover{border-color:var(--mint-deep);transform:translateY(-2px)}
.cpcard h3{font-size:17px}
.cpcard p{font-size:14px;color:var(--muted);margin:8px 0 12px}
.cpcard .ex{font-size:12.5px;color:var(--mint-deep)}

/* faq */
.faq{margin-top:30px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 0;font-size:17.5px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--mint-deep);font-size:24px;font-weight:400;flex:0 0 auto}
.faq details[open] summary:after{content:"–"}
.faq details>div{padding:0 0 22px}
.faq p{margin:0;color:var(--muted);font-size:16px;max-width:72ch}

/* quote */
.quotecard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;margin-top:30px}
.qstep{margin-bottom:22px}
.qstep label{display:block;font-weight:600;font-size:15.5px;margin-bottom:9px}
.qstep select,.frow input,.frow select,.frow textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:16px;background:#fff}
.qstep select:focus,.frow input:focus,.frow textarea:focus,.frow select:focus{outline:2px solid var(--mint-deep);outline-offset:1px}
.qresult{margin-top:22px}
.contactform{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}
.frow{margin-bottom:18px}
.frow label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}

/* team */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px}
@media(max-width:760px){.team{grid-template-columns:1fr}}
.tcard{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;gap:26px;align-items:flex-start}
/* 200px, up from 116 with the photo pinned to 66px inside it — the headshot was rendering
   at barely a third of its container. Source files are only 132px square, so these are
   upscaled: get higher-resolution headshots from Nathan and Mandy when convenient. */
.tavatar{flex:0 0 200px;height:200px;width:200px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,var(--mint),var(--mint-deep));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:32px;letter-spacing:.04em}
.tavatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.tcard b{display:block;font-size:19px}
.tcard span{display:block;font-size:13.5px;color:var(--mint-deep);font-weight:600;margin-bottom:12px}
.tcard p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}
@media(max-width:520px){.tcard{flex-direction:column;gap:18px;padding:26px}
  .tavatar{flex:0 0 150px;height:150px;width:150px}}

/* ---- CoreMed Rx lookup ---- */
.rxwarn{margin:0 0 22px;padding:13px 17px;border-radius:10px;background:#FBF3E4;
  border:1px solid #E6CFA4;color:#6B4C12;font-size:14px;line-height:1.55}
.rxtools{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:end;
  padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
@media(max-width:640px){.rxtools{grid-template-columns:1fr;padding:18px}}
.rxsearchlab{display:block;font-weight:600;font-size:13px;margin-bottom:7px;color:var(--navy)}
.rxsearch,.rxtools select{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:15.5px;background:#fff;color:var(--ink)}
.rxsearch:focus,.rxtools select:focus{outline:2px solid var(--mint-deep);outline-offset:1px}
.rxsummary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media(max-width:760px){.rxsummary{grid-template-columns:1fr}}
.rxsummary>div{background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:var(--r);
  padding:18px 20px;text-align:center}
.rxsummary b{display:block;font-size:30px;letter-spacing:-.02em;color:var(--navy);line-height:1.05}
.rxsummary span{display:block;margin-top:7px;font-size:13.5px;color:#2C4A3D;line-height:1.45}
.rxcount{margin:24px 0 0;font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.02em}
/* Three across on desktop, two at tablet width, one on a phone. A single column of 1fr auto
   rows left most of the page empty and made the list feel far longer than it is. */
.rxlist{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:14px;
  grid-template-columns:repeat(3,1fr);align-items:start}
@media(max-width:1000px){.rxlist{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.rxlist{grid-template-columns:1fr;gap:10px}}
.rxrow{display:flex;flex-direction:column;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.rxmain{min-width:0;flex:0 0 auto}
.rxgen{margin:0;font-size:16.5px;font-weight:700;color:var(--navy);text-transform:capitalize}
.rxbrand{margin:3px 0 0;font-size:13.5px;color:var(--muted)}
.rxcond{margin:5px 0 0;font-size:13px;color:var(--mint-deep);font-weight:600}
/* Side by side under the name, not beside it. In a one-third column the two prices read as a
   comparison, which is the whole point of showing them together. They share the width evenly
   and must be free to shrink, so no min-width and no nowrap. */
.rxprices{display:flex;flex-direction:row;gap:8px;align-items:stretch;margin-top:auto}
.rxprice{flex:1 1 0;min-width:0;text-align:center;padding:10px 10px;border-radius:10px;
  display:flex;flex-direction:column;justify-content:center}
.rxmine{background:var(--mint-bg);border:1px solid #CFE5DB}
.rxtheirs{background:var(--bg);border:1px solid var(--line)}
.rxplab{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:#4A6157;margin-bottom:4px}
.rxtheirs .rxplab{color:var(--muted)}
.rxfree{display:block;font-size:24px;font-weight:800;color:#256250;line-height:1}
.rxask{display:block;font-size:15px;font-weight:700;color:var(--mint-deep);line-height:1.2}
.rxretail{display:block;font-size:21px;font-weight:700;color:var(--muted);line-height:1;
  text-decoration:line-through;text-decoration-thickness:1.5px}
.rxretail.rxna{text-decoration:none}
.rxpsub{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}
.rxnote{margin:0;font-size:13px;color:var(--muted);
  padding-top:12px;border-top:1px solid var(--line)}
.rxempty{margin-top:20px}

/* ---- preventive sharing ---- */
.narrowprose{max-width:70ch}
.prevgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:28px}
.prevcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.prevcard h3{margin:0 0 12px;font-size:17.5px;color:var(--navy)}
.prevlimit{margin:0 0 14px;display:flex;align-items:baseline;gap:8px}
.prevlimit b{font-size:27px;font-weight:800;color:#256250;line-height:1}
.prevlimit span{font-size:13px;color:var(--muted)}
.prevmeta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13.5px}
.prevmeta dt{color:var(--muted);font-weight:600}
.prevmeta dd{margin:0;color:var(--ink)}
.prevnotes{margin:14px 0 0;padding-left:18px;font-size:13.5px;color:var(--muted);line-height:1.55}
.prevnotes li{margin-bottom:5px}
.prevsteps{margin:26px 0 30px;padding-left:22px;max-width:70ch;line-height:1.65}
.prevsteps li{margin-bottom:10px}

/* ---- support centre: reach-a-person cards and jump bar ---- */
.sreach{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 26px}
@media(max-width:860px){.sreach{grid-template-columns:1fr 1fr}}
.sreachcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 24px;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sreachic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--mint-bg);color:var(--mint-deep);margin-bottom:2px}
.sreachic svg{width:22px;height:22px}
.sreachcard h3{margin:0;font-size:17px;color:var(--navy)}
.sreachcard p{margin:0;font-size:14px;color:var(--muted);line-height:1.5;flex:1 1 auto}
.sreachcard .pill{margin-top:8px}
/* Long strings — an email address, a phone number — must not push the card wider than its
   grid track on a phone. */
.sreachcard .pill{max-width:100%;overflow-wrap:anywhere}
/* The call-or-email card carries two pills stacked. The card is a column flex with its own
   gap, so the second pill does not need the top margin the first one uses. */
.sreachcard .pill + .pill{margin-top:0}

.sjump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}
.sjump a{font-size:13.5px;font-weight:600;color:var(--navy);text-decoration:none;
  background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:999px;padding:8px 15px}
.sjump a:hover{background:#DCEDE5}

/* ---- guides hub: icons ---- */
.ghgroup{display:flex;align-items:center;gap:11px}
.ghgroupic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--mint-bg);color:var(--mint-deep);flex:0 0 auto}
.ghgroupic svg{width:19px;height:19px}
.incitem.hasic .gic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;background:var(--mint-bg);color:var(--mint-deep);margin-bottom:12px}
.incitem.hasic .gic svg{width:21px;height:21px}

.sforms{margin-top:48px;padding-top:12px;border-top:1px solid var(--line)}
.sforms h2{margin-top:40px}
.sforms h2:first-child{margin-top:24px}
@media(max-width:560px){
  .sreach{grid-template-columns:1fr;gap:12px}
  .sreachcard{padding:18px 18px 20px}
  .sjump{gap:7px}
  .sjump a{font-size:13px;padding:9px 13px}
}
@media(max-width:560px){
  .prevcard{padding:18px 18px}
  .prevlimit b{font-size:24px}
}
@media(max-width:720px){
  .rxrow{grid-template-columns:1fr}
  /* "THROUGH COREMED RX" under white-space:nowrap set a min-content floor wider than the
     phone column, which pushed the whole row past the viewport. Let it wrap down here. */
  /* Back to side by side on a phone: stacked, two full-width boxes under the name made every
     row about 150px tall and the list unscannable. */
  .rxprices{margin-top:14px;white-space:normal;flex-direction:row;gap:10px}
  .rxprice{flex:1 1 0;min-width:0;padding:10px 12px}
  .rxplab{white-space:normal;line-height:1.3}
}

/* ---- business guide article (gen/bizguide.js) ----
   A full-bleed editorial layout that mirrors the PDF CoreMed sends to business owners. Scoped
   entirely under .bizguide so none of it leaks into the normal article template. */
.bizguide{--bgrule:#D9DEE3}
.bizguide .swrap{max-width:1120px}
.bizguide h1,.bizguide h2,.bizguide h3{letter-spacing:-.02em}

.bgeye{margin:0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--orange);display:flex;align-items:center;gap:18px}
.bgeye::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}

.bghero{background:var(--navy);color:#fff;padding:66px 0 62px}
.bghero h1{font-size:clamp(32px,5vw,56px);margin:22px 0 0;line-height:1.06;max-width:19ch}
.bgdek{color:#B9CBD9;font-size:17.5px;line-height:1.6;margin:20px 0 0;max-width:62ch}
.bgacts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.bgbtn{display:inline-block;padding:13px 26px;border-radius:8px;background:var(--orange);
  color:#20160A;font-weight:700;font-size:15.5px;text-decoration:none;border:1px solid var(--orange);
  transition:transform .14s,background .14s}
.bgbtn:hover{transform:translateY(-2px);background:#F0A45E;border-color:#F0A45E}
.bgbtn.ghost{background:transparent;color:#fff;border-color:#4C6A85}
.bgbtn.ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.bgtoc{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:1fr 1fr;
  gap:0 56px;counter-reset:none}
@media(max-width:760px){.bgtoc{grid-template-columns:1fr;gap:0}}
.bgtoc li{display:flex;gap:16px;align-items:baseline;padding:13px 0;font-size:15.5px;
  color:#DCE5EC;border-bottom:1px solid rgba(255,255,255,.13)}
.bgnum{color:var(--orange);font-weight:700;font-size:13px;letter-spacing:.04em;flex:0 0 auto}

.bgsec{padding:70px 0}
.bgsec.alt{background:#F1EFEA}
.bgsec h2{font-size:clamp(25px,3.4vw,38px);margin:16px 0 0;max-width:24ch}
.bgsub{font-size:16.5px;color:var(--muted);margin:16px 0 0;max-width:74ch;line-height:1.6}
.bgcols{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:24px}
@media(max-width:760px){.bgcols{grid-template-columns:1fr;gap:18px}}
.bgcols p{margin:0;font-size:15.5px;line-height:1.68;color:var(--muted)}

.bgfour{display:grid;grid-template-columns:repeat(4,1fr);margin-top:42px;
  border-top:2px solid var(--navy)}
@media(max-width:860px){.bgfour{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.bgfour{grid-template-columns:1fr}}
.bgfour>div{padding:24px 26px 8px;border-left:1px solid var(--bgrule)}
.bgfour>div:first-child{border-left:0;padding-left:0}
.bgfour .ico{color:var(--orange);margin-bottom:14px}
.bgfour h3{font-size:16.5px;margin:0}
.bgfour p{font-size:14px;color:var(--muted);margin:9px 0 0;line-height:1.55}

.bgrules{display:grid;grid-template-columns:400px 1fr;gap:44px;margin-top:30px;align-items:start}
@media(max-width:900px){.bgrules{grid-template-columns:1fr;gap:28px}}
.bgstat{background:var(--navy);color:#fff;border-radius:4px;padding:28px 30px 30px}
.bgstateye{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--orange)}
.bgstatbig{margin:10px 0 0;font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1}
.bgstattext{margin:14px 0 0;font-size:14.5px;color:#B9CBD9;line-height:1.6}
.bgrulelist>div{padding:18px 0;border-bottom:1px solid var(--bgrule)}
.bgrulelist>div:first-child{padding-top:0}
.bgrulelist h3{font-size:16.5px;margin:0}
.bgrulelist p{font-size:14.5px;color:var(--muted);margin:8px 0 0;line-height:1.6}

.bgopts{display:grid;grid-template-columns:1fr 1fr;margin-top:34px;
  border:1px solid var(--bgrule)}
@media(max-width:820px){.bgopts{grid-template-columns:1fr}}
.bgopt{padding:26px 28px 28px;border-right:1px solid var(--bgrule);border-bottom:1px solid var(--bgrule)}
.bgopt:nth-child(2n){border-right:0}
@media(max-width:820px){.bgopt{border-right:0}}
.bgopt h3{font-size:19px;margin:0;display:flex;gap:12px;align-items:baseline}
.bgopt>p{font-size:14.5px;color:var(--muted);margin:11px 0 0;line-height:1.6}
.bgfit,.bgwatch{font-size:13.5px;line-height:1.55;margin:13px 0 0 !important;color:var(--muted)}
.bgfit span,.bgwatch span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.bgfit span{color:var(--mint-deep)}
.bgwatch{color:#7A5A2E}
.bgwatch span{color:var(--orange-text)}
.bgopt.own{border-left:3px solid var(--orange);background:#FDFAF4}

.bgcallout{display:flex;gap:14px;align-items:flex-start;margin:26px 0 0;padding:16px 20px;
  background:#F1EFEA;border-top:2px solid var(--navy);font-size:14.5px;color:var(--muted);line-height:1.6}
.bgsec.alt .bgcallout{background:#fff}
.bgi{flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--navy);
  color:var(--navy);font-size:12px;font-weight:700;font-style:italic;display:flex;
  align-items:center;justify-content:center;margin-top:1px}

.bgnumbers{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;border-top:2px solid var(--navy)}
@media(max-width:860px){.bgnumbers{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.bgnumbers{grid-template-columns:1fr}}
.bgnumbers>div{padding:20px 24px 22px;border-left:1px solid var(--bgrule)}
.bgnumbers>div:first-child{border-left:0;padding-left:0}
.bgnumlab{margin:0;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--orange)}
.bgnumbers h3{font-size:16.5px;margin:8px 0 0}
.bgnumbers p{font-size:13.5px;color:var(--muted);margin:8px 0 0;line-height:1.55}

.bgtable{width:100%;border-collapse:collapse;margin-top:30px;font-size:14px}
.bgtable th,.bgtable td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--bgrule);
  vertical-align:top}
.bgtable thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--navy);border-bottom:2px solid var(--navy);background:transparent}
.bgtable thead th.bgfirst{background:var(--navy);color:#fff;border-radius:3px 3px 0 0}
.bgtable tbody th{font-weight:700;color:var(--navy);white-space:nowrap}
.bgtable td{color:var(--muted)}
.bgtable tr.bgown{background:#FDF3E7}
.bgtable tr.bgown th{color:#8A5A12}

.bgh3{font-size:21px;margin:46px 0 0}
.bgstarts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;border-top:2px solid var(--navy)}
@media(max-width:820px){.bgstarts{grid-template-columns:1fr}}
.bgstarts>div{padding:20px 24px 22px;border-left:1px solid var(--bgrule)}
.bgstarts>div:first-child{border-left:0;padding-left:0}
.bgstartlab{margin:0 0 9px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--orange-text)}
.bgstarts p{font-size:14px;color:var(--muted);margin:0;line-height:1.6}

.bgsteps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:30px;border-top:2px solid var(--navy)}
@media(max-width:900px){.bgsteps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.bgsteps{grid-template-columns:1fr}}
.bgsteps>div{padding:20px 22px 24px;border-left:1px solid var(--bgrule)}
.bgsteps>div:first-child{border-left:0;padding-left:0}
.bgstepnum{margin:0;font-size:28px;font-weight:800;color:var(--orange);letter-spacing:-.02em;line-height:1}
.bgsteps h3{font-size:15.5px;margin:12px 0 0}
.bgsteps p{font-size:13.5px;color:var(--muted);margin:8px 0 0;line-height:1.55}

.bgtwolists{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:52px}
@media(max-width:820px){.bgtwolists{grid-template-columns:1fr;gap:34px}}
.bglisthead{margin:0 0 6px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--orange);display:flex;align-items:center;gap:16px}
.bglisthead::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.bgask,.bgterms{list-style:none;padding:0;margin:0}
.bgask li,.bgterms li{padding:13px 0;border-bottom:1px solid var(--bgrule);font-size:14.5px;
  line-height:1.55;color:var(--muted)}
.bgterms b{color:var(--navy)}

.bgres{display:grid;grid-template-columns:repeat(3,1fr);margin-top:52px;border-top:2px solid var(--navy)}
@media(max-width:760px){.bgres{grid-template-columns:1fr}}
.bgres>div{padding:20px 24px 22px;border-left:1px solid var(--bgrule)}
.bgres>div:first-child{border-left:0;padding-left:0}
.bgres h3{font-size:15.5px;margin:0}
.bgres p{font-size:13.5px;color:var(--muted);margin:8px 0 0;line-height:1.6}
.bgres a{color:var(--mint-deep)}

/* The divider columns above all use border-left, which turns into a staircase indent the
   moment they stack. Below the widest stacking breakpoint, flip every one to a top rule. */
@media(max-width:860px){
  .bgfour>div,.bgnumbers>div,.bgstarts>div,.bgsteps>div,.bgres>div{
    border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--bgrule)}
  .bgfour>div:first-child,.bgnumbers>div:first-child,.bgstarts>div:first-child,
  .bgsteps>div:first-child,.bgres>div:first-child{border-top:0}
}
@media(max-width:520px){
  .bgfour>div{border-left:0;padding-left:0}
}
/* Every small-caps label in the guide sits at 10.5-11.5px, which is fine on a desktop and
   under the readable floor on a phone. Lift them together and drop the tracking a touch so
   they still fit the line. */
@media(max-width:640px){
  .bgeye,.bgstateye,.bgnumlab,.bgstartlab,.bglisthead{font-size:12.5px;letter-spacing:.1em}
  .bgfit span,.bgwatch span{font-size:12px;letter-spacing:.07em}
  .bgpaneleye{font-size:12px}
  .bgtable thead th{font-size:12px}
}
.bgfoot{background:var(--navy);color:#fff;padding:60px 0 64px}
.bgfootgrid{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start}
@media(max-width:900px){.bgfootgrid{grid-template-columns:1fr;gap:34px}}
.bgfoot h2{font-size:clamp(22px,3vw,30px);margin:16px 0 0;max-width:22ch}
.bgfoot>.swrap p{font-size:15px;color:#B9CBD9;line-height:1.65;margin:16px 0 0;max-width:60ch}
.bgfootacts{display:flex;flex-direction:column;gap:12px}
.bgpanel{display:block;padding:16px 20px;border:1px solid #3A5670;border-radius:6px;
  text-decoration:none;transition:border-color .15s,background .15s}
.bgpanel:hover{border-color:var(--orange);background:rgba(255,255,255,.04)}
.bgpaneleye{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--orange)}
.bgpanelval{display:block;margin-top:6px;font-size:17px;font-weight:700;color:#fff}
.bgfootacts .bgbtn{text-align:center}

/* ---- get the app ----
   Two columns: a feature list that drives the phone, and a phone that drives itself. Light
   ground rather than the dark hero the rest of the site uses for heroes, because the screen
   has to be the brightest thing on the page. */
.appsec{background:linear-gradient(180deg,#FBFCFD 0%,var(--bg) 100%);padding:64px 0 76px}
.appgrid{display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:start}
@media(max-width:980px){.appgrid{grid-template-columns:1fr;gap:44px}}
.appeye{margin:0;font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--mint-deep)}
.appsec h1{font-size:clamp(32px,4.4vw,52px);margin:18px 0 0;letter-spacing:-.025em;line-height:1.06}
.appdek{color:var(--muted);font-size:17.5px;line-height:1.62;margin:20px 0 0;max-width:46ch}

.appfeat{list-style:none;padding:0;margin:34px 0 0;max-width:520px}
.appfeat li + li{border-top:1px solid var(--line)}
.appfbtn{display:flex;gap:15px;align-items:flex-start;width:100%;text-align:left;
  background:none;border:0;font:inherit;cursor:pointer;padding:16px 8px 16px 0;color:inherit;
  border-radius:8px;transition:background .13s}
.appfbtn:hover{background:rgba(47,125,99,.05)}
.appfbtn:focus-visible{outline:2px solid var(--mint-deep);outline-offset:2px}
.appfdot{flex:0 0 17px;width:17px;height:17px;border-radius:50%;border:1.5px solid #C2CFD8;
  margin-top:3px;position:relative;transition:border-color .15s}
.appfbtn.on .appfdot{border-color:var(--navy);border-width:2px}
.appfbtn.on .appfdot::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--navy)}
.appftxt{min-width:0}
.appftxt b{display:block;font-size:16px;color:var(--navy);letter-spacing:-.005em}
.appftxt span{display:block;font-size:14.5px;color:var(--muted);margin-top:4px;line-height:1.5}

.storerow{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.storebtn{display:inline-flex;align-items:center;gap:11px;position:relative;
  padding:11px 20px;border-radius:11px;background:var(--navy);color:#fff;
  text-decoration:none;border:1px solid var(--navy);transition:transform .14s,background .14s}
a.storebtn:hover{transform:translateY(-2px);background:#1B3348}
.storesub{display:block;font-size:11px;letter-spacing:.03em;opacity:.78;font-weight:500;line-height:1.3}
.storelab{display:block;font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.storebtn.soon{padding-right:84px;opacity:.9}
.storetag{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#0F1D2A;
  background:var(--mint);padding:3px 8px;border-radius:999px}
.appsoon{margin:18px 0 0;font-size:14px;color:var(--muted);max-width:52ch;line-height:1.6}
.appcap{margin:16px 0 0;font-size:13.5px;color:var(--muted)}

/* ---- the phone ---- */
.appphone{display:flex;flex-direction:column;align-items:center;position:sticky;top:96px}
@media(max-width:980px){.appphone{position:static}}
.phone{width:340px;max-width:100%;background:#0B1620;border-radius:46px;padding:11px;
  box-shadow:0 2px 3px rgba(14,28,40,.16),0 26px 60px -22px rgba(14,28,40,.5)}
.phscreen{background:#fff;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;
  height:600px}
.phbar{display:flex;align-items:center;gap:9px;padding:15px 17px 13px;border-bottom:1px solid var(--line2);
  flex:0 0 auto}
.phlogo{display:flex;line-height:0}
.phtitle{font-weight:700;font-size:15px;color:var(--navy);flex:1;letter-spacing:-.01em}
.phout{font-size:12.5px;color:var(--mint-deep);font-weight:600}
.phbody{flex:1 1 auto;overflow-y:auto;padding:16px 17px 20px;-webkit-overflow-scrolling:touch}
.phtabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line2);
  background:#fff}
.phtab{background:none;border:0;font:inherit;cursor:pointer;padding:10px 2px 13px;
  font-size:10.5px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:color .13s}
.phtab:hover{color:var(--navy)}
.phtab:focus-visible{outline:2px solid var(--mint-deep);outline-offset:-2px;border-radius:6px}
.phtabdot{width:15px;height:15px;border-radius:4px;border:1.5px solid currentColor;opacity:.75}
.phtab.on{color:var(--mint-deep);font-weight:700}
.phtab.on .phtabdot{background:var(--mint-deep);border-color:var(--mint-deep);opacity:1;
  box-shadow:inset 0 0 0 2.5px #fff}
.appdemonote{margin:16px 0 0;font-size:12.5px;color:var(--muted);text-align:center}

/* ---- phone screen contents ---- */
.mcard{background:linear-gradient(150deg,#25445E 0%,var(--navy) 100%);border-radius:15px;
  padding:16px 17px 15px;color:#fff}
.mcardtop{display:flex;justify-content:space-between;align-items:center}
.mcardlab{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#A9C0D2;font-weight:700}
.mpill{background:var(--mint);color:#0F1D2A;font-size:10px;font-weight:700;padding:3px 9px;
  border-radius:999px}
.mcardname{margin:12px 0 0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.mcardnum{margin:3px 0 0;font-size:12.5px;color:#A9C0D2;letter-spacing:.05em;
  font-variant-numeric:tabular-nums}
.mcardfoot{display:flex;gap:26px;margin-top:16px}
.mcardfoot span{display:block;font-size:10px;color:#A9C0D2;letter-spacing:.03em}
.mcardfoot b{display:block;font-size:13.5px;margin-top:2px}
.mrows{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mrow{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;font-size:13.5px}
.mrow + .mrow{border-top:1px solid var(--line2)}
.mrow span{color:var(--muted)}
.mrow b{color:var(--navy);font-variant-numeric:tabular-nums}
.mfine{margin:14px 0 0;font-size:11.5px;color:var(--muted);line-height:1.55}
.mhead{margin:0 0 9px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--muted)}
.mhead + * + .mhead{margin-top:18px}
.mprov{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;
  padding:12px 13px}
.mprovmark{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--mint-bg);
  color:var(--mint-deep);display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:12.5px;aspect-ratio:1}
/* scoped to the text block: a bare .mprov div selector also matched the avatar and stretched it */
.mprov .mprovtxt{min-width:0;flex:1 1 auto}
.mprov b{display:block;font-size:13.5px;color:var(--navy);line-height:1.25}
.mprov span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.mcall{background:var(--navy);color:#fff;font-size:11px;font-weight:700;padding:6px 12px;
  border-radius:999px;flex:0 0 auto}
.mlist{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mlrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px}
.mlrow + .mlrow{border-top:1px solid var(--line2)}
.mlrow b{display:block;font-size:13px;color:var(--navy);line-height:1.3}
.mlrow span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.mchev{color:#B6C4CE;font-size:19px;line-height:1;flex:0 0 auto}
.mamt{font-size:13.5px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;flex:0 0 auto}
.mnext{background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:12px;padding:13px 15px;
  margin-bottom:16px}
.mnext span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#3B6B57}
.mnext b{display:block;font-size:25px;color:var(--navy);letter-spacing:-.02em;margin-top:4px;
  font-variant-numeric:tabular-nums}
.mnext i{display:block;font-style:normal;font-size:12px;color:#3B6B57;margin-top:2px}
.mchecks{display:grid;gap:2px}
.mcheck{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink);
  padding:8px 0;border-bottom:1px solid var(--line2);line-height:1.4}
.mcheck:last-child{border-bottom:0}
.mcheck i{flex:0 0 17px;width:17px;height:17px;border-radius:50%;background:var(--mint-bg);
  color:var(--mint-deep);font-style:normal;font-size:10px;font-weight:700;display:flex;
  align-items:center;justify-content:center;margin-top:1px}
.mqrwrap{border:1px solid var(--line);border-radius:14px;padding:20px 16px 16px;text-align:center}
.mqr{display:grid;grid-template-columns:repeat(21,1fr);gap:1px;width:168px;margin:0 auto}
.mqr i{aspect-ratio:1;background:transparent;border-radius:.5px}
.mqr i.on{background:var(--navy)}
.mqrname{margin:15px 0 0;font-size:12.5px;font-weight:700;color:var(--navy);
  font-variant-numeric:tabular-nums}
.mqrnote{margin:7px 0 0;font-size:11.5px;color:var(--muted);display:flex;align-items:center;
  justify-content:center;gap:6px}
.mdot{width:7px;height:7px;border-radius:50%;background:var(--mint-deep);flex:0 0 7px}
@media(prefers-reduced-motion:no-preference){
  .mdot{animation:mpulse 2s ease-in-out infinite}
  @keyframes mpulse{0%,100%{opacity:1}50%{opacity:.28}}
}
.applist{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.applist li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 20px;
  font-size:15px;color:var(--muted);line-height:1.55}
.applist b{color:var(--navy)}
@media(max-width:520px){
  .phone{width:100%;border-radius:38px;padding:9px}
  .phscreen{border-radius:30px;height:560px}
}

/* ---- login: the Zion portal block ---- */
.zionport{display:grid;grid-template-columns:1fr 260px;gap:34px;align-items:center;margin-top:22px;
  background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:var(--r);padding:28px 30px}
@media(max-width:820px){.zionport{grid-template-columns:1fr;gap:22px}}
.zionmain h2{font-size:20px;margin:0}
.zionmain p{font-size:15px;color:#2C4A3D;margin:12px 0 0;line-height:1.6;max-width:68ch}
.zionacts{display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:center}

/* ---- provider directory ---- */
.pdtools{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:14px;align-items:end;
  margin-top:30px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
@media(max-width:900px){.pdtools{grid-template-columns:1fr 1fr}
  .pdsearchwrap{grid-column:1 / -1}}
@media(max-width:560px){.pdtools{grid-template-columns:1fr;padding:18px}}
.pdlab{display:block;font-weight:600;font-size:13px;margin-bottom:7px;color:var(--navy)}
.pdsearch,.pdtools select{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:15.5px;background:#fff;color:var(--ink)}
.pdsearch:focus,.pdtools select:focus{outline:2px solid var(--mint-deep);outline-offset:1px}
.pdclear{align-self:end;padding:12px 18px;border:1px solid var(--line);background:#fff;
  border-radius:9px;font:inherit;font-size:14.5px;font-weight:600;color:var(--navy);cursor:pointer}
.pdclear:hover{border-color:var(--mint-deep);color:var(--mint-deep)}
.pdchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pdchip{padding:7px 14px;border:1px solid var(--line);background:#fff;border-radius:999px;
  font:inherit;font-size:13.5px;color:var(--muted);cursor:pointer;transition:all .13s}
.pdchip:hover{border-color:var(--mint-deep);color:var(--mint-deep)}
.pdchip[aria-pressed="true"]{background:var(--mint-bg);border-color:var(--mint-deep);
  color:#1E4A3A;font-weight:600}
.pdcount{margin:22px 0 0;font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.pdlist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.pdrow{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.pdrow:hover{border-color:var(--mint-deep)}
.pdpic .pphoto.card{margin:0;width:56px;height:56px;flex:0 0 56px}
.pdmain{min-width:0}
.pdmain h3{font-size:17px;margin:0}
.pdmain h3 a{color:var(--navy);text-decoration:none}
.pdmain h3 a:hover{color:var(--mint-deep)}
.pdmeta{display:flex;flex-wrap:wrap;gap:6px 10px;margin:6px 0 0;font-size:13px;align-items:center}
.pdcat{color:var(--mint-deep);font-weight:600}
.pdregion{color:var(--muted)}
.pdregion::before{content:"·";margin-right:10px;color:var(--line)}
.pdaddr{font-size:14px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.pdnote{font-size:13px;color:#8A5A12;background:#FBF3E4;border-radius:6px;
  padding:4px 9px;margin:9px 0 0;display:inline-block}
.pdside{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:7px;white-space:nowrap}
.pdrate{margin:0;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.pdrate .stars{color:var(--orange);letter-spacing:-1px;font-size:12px}
.pdrev{color:var(--muted)}
.pdphone{font-size:15px;font-weight:600;color:var(--navy);text-decoration:none}
.pdphone:hover{color:var(--mint-deep)}
.pdempty{margin-top:20px}
@media(max-width:760px){
  .pdrow{grid-template-columns:auto 1fr;gap:16px}
  .pdside{grid-column:2;align-items:flex-start;text-align:left;margin-top:10px}
  /* the phone number and Details sat 7px apart, which is a mis-tap waiting to happen */
  .pdside{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 18px}
  .pdphone,.pdside .tlink.sm{padding:8px 0;min-height:28px;display:inline-flex;align-items:center}
}

/* ---- about page ---- */
/* the wrap is full width so the grids can breathe; running text is held to a reading measure */
.abwrap-prose{max-width:78ch}

.abstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
@media(max-width:900px){.abstats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.abstats{grid-template-columns:1fr}}
.abstats>div{background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:var(--r);
  padding:22px 20px;text-align:center}
.abstats b{display:block;font-size:34px;letter-spacing:-.025em;color:var(--navy);line-height:1.05}
.abstar{font-size:20px;color:var(--orange);margin-left:3px;letter-spacing:0}
.abstats span{display:block;margin-top:8px;font-size:13.5px;color:#2C4A3D;line-height:1.45}
/* generous air above each About heading: the page is a sequence of distinct blocks and they
   were running together, the Where-we-are heading worst of all */
h2.abh{margin-top:64px}
@media(max-width:700px){h2.abh{margin-top:48px}}
.abfaces{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.abfaces .pphoto.card{width:74px;height:74px;flex:0 0 74px;margin:0}
@media(max-width:600px){.abfaces .pphoto.card{width:60px;height:60px;flex:0 0 60px}}
.abfaceslink{margin-top:20px}
.abregions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
@media(max-width:800px){.abregions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.abregions{grid-template-columns:1fr}}
.abregion{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.abregion:hover{border-color:var(--mint-deep);transform:translateY(-2px)}
.abregion b{display:block;font-size:16px;color:var(--navy)}
.abregion span{display:block;margin-top:5px;font-size:13.5px;color:var(--muted)}
.abregion.soon span{color:var(--orange-text)}
/* Region cards with photography. The image is the card's top half; text sits under it, so the
   grid stays even whether or not every region has a photo yet. */
.abregion.haspic{padding:0;overflow:hidden}
.abrpic{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--mint-bg)}
.abrpic img{width:100%;height:100%;object-fit:cover;display:block}
.abregion.haspic .abrbody{display:block;padding:14px 16px 16px}
.abregion.haspic:hover .abrpic img{transform:scale(1.03)}
.abrpic img{transition:transform .25s ease}
.abregion.soon .abrpic img{filter:grayscale(.55)}

/* the second line on an include tile: the "why it matters" sentence from that service's page */
.incdetail{margin-top:8px;font-size:13.5px;color:var(--mint-deep);line-height:1.5}

/* posts */
.postlist{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
.postlist.small{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.postlist,.postlist.small{grid-template-columns:1fr}}
.post{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.post:hover{border-color:var(--mint-deep);transform:translateY(-2px)}
.post.haspic{padding-top:0;overflow:hidden}
.pthumb{display:block;margin:0 -26px 18px;line-height:0;background:var(--bg);aspect-ratio:16/9}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.postlist.small .post.haspic{padding-top:0}
.postlist.small .pthumb{margin-bottom:14px}
@media(max-width:600px){.pthumb{margin-bottom:16px}}
.paud{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text);font-weight:700}
.post h2{font-size:21px;margin:8px 0 0}
.post h3{font-size:17px}
.post p{font-size:15px;color:var(--muted);margin:10px 0 14px}
.pmeta{font-size:13px;color:var(--muted)}
.article{padding:64px 0 40px}
.article h1{font-size:clamp(30px,4.6vw,46px);margin:14px 0 0}
.article .lede{font-size:20px;color:var(--muted);margin-top:24px;line-height:1.6}
.logincards{margin-top:34px}

/* ---- media layer (only rendered when media.enabled) ---- */
.mfig{margin:0}
.mfig img{display:block;width:100%;height:auto}
.brand.haslogo{display:flex;align-items:center}
.navlogo{height:50px;width:auto;display:block}
@media(max-width:900px){.navlogo{height:38px}}
.foot .fbadge{margin:18px 0 0;order:9}
.foot .fbadge img{width:86px;height:auto;opacity:.9}

/* .heroshot / .hstats — home hero photo and the four-stat row. Removed from the hero
   2026-08-18 at client request. The homeHero media slot stays mapped, so restoring is one
   M.figure("homeHero", {class:"heroshot", eager:true}) call in gen/build.js. */
.heroshot{max-width:1000px;margin:52px auto 0;padding:0 22px}
.heroshot img{border-radius:16px;box-shadow:0 18px 48px rgba(22,40,58,.16);aspect-ratio:16/9;object-fit:cover;object-position:center 35%}

.pagehero{margin:34px 0 0;max-width:960px}
.pagehero img{border-radius:14px;aspect-ratio:21/9;object-fit:cover;box-shadow:0 12px 34px rgba(22,40,58,.12)}
.phead .pagehero{margin-bottom:8px}

/* .cmpshot — the insurance-vs-CoreMed comparison graphic. Removed from the home band
   2026-08-17 at client request. The homeCompare slot stays mapped in content/media/slots.json,
   so restoring it is one M.figure("homeCompare", {class:"cmpshot"}) call in gen/build.js. */
.cmpshot{float:right;width:250px;margin:0 0 24px 40px}
.cmpshot img{border-radius:12px;background:#fff}
@media(max-width:820px){.cmpshot{float:none;width:100%;max-width:320px;margin:0 0 26px}}

.ptile{width:84px;margin:0 0 16px}
.ptile img{border-radius:18px}
.ptile.lg{width:132px;margin:0 32px 0 0}
.pricerow .ptile.lg{align-self:center}

.incitem.haspic{padding:0 0 24px}
.incpic{margin:0 0 18px}
.incpic img{aspect-ratio:16/10;object-fit:cover}
/* The image goes edge to edge, so the text inside a picture card carries its own side
   padding. "Read more" has to be in that list too or it sits flush against the card edge,
   out of line with the heading and copy above it. */
.incitem.haspic h3,.incitem.haspic p,.incitem.haspic .incgo{padding-left:24px;padding-right:24px}

.tavatar.haspic{padding:0;overflow:hidden;background:none}
/* Fill the circle. This used to pin the photo to 66px, which is what made the headshots
   look tiny inside a much larger ring. */
.tavatar.haspic img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* GHL embeds */
.ghlform{margin:26px 0 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ghlform iframe{display:block;width:100%;height:var(--fh,700px);border:0}
.ghlform.survey iframe{height:auto;min-height:620px}
.foot .fnews{margin:18px 0 0;max-width:320px}
.foot .fnewsh{color:#fff;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px;font-weight:700}
.foot .ghlform{margin:0;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);border-radius:10px}
.foot .ghlform iframe{height:var(--fh,464px)}
.quotecard.slim{padding:20px 24px;margin-top:18px}

.plainlist{margin:14px 0 16px;padding-left:20px}
.plainlist li{margin:8px 0;color:#41535F;line-height:1.65}
.fnote{font-size:13.5px;color:var(--muted);line-height:1.6}
.fnote code,.plainlist code{background:#EDF2F0;padding:2px 6px;border-radius:5px;font-size:12.5px;
  font-family:ui-monospace,Menlo,monospace;color:#1E4A3A}
/* ---------- enrolment ---------- */
#fit,.enroll,.qcalc,.nfwrap,.estep,.qcarry{scroll-margin-top:calc(var(--navh) + 20px)}
.enroll{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 32px;margin:24px 0}
.esteps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 26px;padding:0 0 22px;
  border-bottom:1px solid var(--line);counter-reset:s}
.esteps li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);
  padding:5px 12px 5px 5px;border-radius:999px}
.esteps li span{width:23px;height:23px;border-radius:50%;background:#E7EDEA;color:#6B7C86;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 23px}
.esteps li.on{background:var(--mint-bg);color:#1E4A3A;font-weight:600}
.esteps li.on span{background:var(--mint-deep);color:#fff}
.esteps li.did span{background:var(--mint);color:#1E4A3A}
/* ---- enrolment: quote on the left, questions on the right --------------------------
   The same shape as the calculator's result, carried through the whole of sign-up. The
   rail is sticky, so the number is beside the question being answered rather than
   scrolled off the top after the first screen. */
.ecols{display:grid;grid-template-columns:minmax(230px,.6fr) 1.4fr;gap:36px;align-items:start}
@media(max-width:900px){.ecols{grid-template-columns:1fr;gap:22px}}
.ecolquote{position:sticky;top:96px}
@media(max-width:900px){.ecolquote{position:static}}
.equotecard{background:#F4F8F9;border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.equotecard.fromquote,.ecolquote.fromquote .equotecard{background:var(--mint-bg);
  border-color:#CFE5DB;box-shadow:0 6px 18px rgba(22,50,63,.06)}
.equotecard .qrlab{font-size:11.5px;letter-spacing:.1em}
.equotecard .qrprice{margin:0 0 6px}
.equotecard .qrprice b{font-size:40px}
.equotecard .qrprice .qcur{font-size:18px}
.equotecard .qrprice .qper{font-size:14px}
.equotepend{margin:0 0 12px;font-size:13px;color:#7C8B95;line-height:1.5;text-align:center}
/* Before there is a number to show, the placeholder should read as waiting rather than as a
   heavy black dash sitting where the price belongs. */
.equotecard .qrprice.pending b,.equotecard .qrprice.pending .qcur,
.equotecard .qrprice.pending .qper{color:#C3D0D8}
.equotecard .qsummary{margin:8px 0 12px;max-width:none}
.equotecard .qsummary li{padding:6px 0;font-size:13.5px;flex-wrap:wrap;gap:0 12px}
.equotecard .qsummary b{margin-left:auto}
.equotecard .qnote{font-size:12.5px;line-height:1.55;text-align:left;margin:0}
.equotecard .qeditline{margin:12px 0 0;text-align:left}
.erfee{font-size:12.5px;color:#3B5A4C;margin:0 0 10px;line-height:1.5}
.erchange{font-size:13px}
/* On a phone the rail becomes a compact header above the questions rather than a tall card
   that has to be scrolled past to reach the first one. */
@media(max-width:900px){
  .equotecard{padding:14px 18px;display:grid;grid-template-columns:auto 1fr;
    align-items:baseline;gap:0 14px}
  .equotecard .qrlab{grid-column:1;margin:0}
  .equotecard .qrprice{grid-column:2;justify-content:flex-start;margin:0}
  .equotecard .qrprice b{font-size:28px}
  .equotecard .qsummary,.equotecard .qnote,.equotecard .equotepend,
  .equotecard .erfee,.equotecard .qeditline{grid-column:1 / -1}
  .equotecard .qnote{display:none}
  .equotecard .qsummary{display:flex;flex-wrap:wrap;gap:0 16px;margin:8px 0 0}
  .equotecard .qsummary li{border:0;padding:2px 0;gap:0 6px}
  .equotecard .qsummary b{margin-left:0}
}
.estep h2{font-size:22px;margin:0 0 6px}
.edek{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.eassist{background:var(--mint-bg);border-radius:9px;padding:11px 15px;font-size:13.5px;color:#1E4A3A;margin-top:22px}
.enroll fieldset{border:1px solid var(--line);border-radius:12px;padding:18px 20px 4px;margin:0 0 18px}
.enroll fieldset legend{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--mint-deep);padding:0 8px}
.enroll .nf-row{margin-bottom:16px}
.enroll input,.enroll select{width:100%;font:inherit;font-size:16px;color:var(--navy);background:#fff;
  border:1px solid #CBD8D2;border-radius:10px;padding:11px 13px;-webkit-appearance:none;appearance:none}
.enroll input[type=checkbox],.enroll input[type=radio]{width:auto}
.enroll select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6E7A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.enroll :is(input,select):focus{outline:none;border-color:var(--mint-deep);box-shadow:0 0 0 3px rgba(47,125,99,.16)}
.enroll .nf-row.bad :is(input,select){border-color:#C0472F}
/* ---- card step ----------------------------------------------------------------------
   The mount is where the processor's iframe lands. It is styled to match our own inputs so
   the hosted field does not look bolted on, and carries a .ready state the processor sets
   once the card validates. */
.cardmount{border:1px solid var(--line);border-radius:10px;padding:13px 14px;background:#fff;
  min-height:50px;transition:border-color .16s ease,box-shadow .16s ease}
.cardmount.ready{border-color:var(--mint);box-shadow:0 0 0 3px rgba(56,142,110,.12)}
.cardpending{display:flex;flex-direction:column;gap:4px}
/* iPOS hosted payment page. The mount is a frame well: it holds the placeholder at a
   modest height, then grows when the real form loads. Height is fixed rather than
   auto because a cross-origin frame cannot report its own content height. */
.paymount{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;
  min-height:132px;transition:border-color .18s ease,box-shadow .18s ease}
.paymount .cardpending{padding:13px 14px}
.paymount.ready{border-color:var(--mint);box-shadow:0 0 0 3px rgba(56,142,110,.12)}
.payframe{display:block;width:100%;height:760px;border:0;background:#fff}
@media(max-width:560px){.payframe{height:820px}}
.enroll.assurvey .payrow{margin-top:22px}
.paymanual{margin:10px 0 0;font-size:13px;color:var(--muted)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--mint-deep);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linkbtn:hover{color:var(--navy)}
.nf-err.ok{color:var(--mint-deep)}
.qgrid.one{grid-template-columns:minmax(0,320px)}
.cardpendh{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#8A97A0}
.cardpending p{margin:0;font-size:13.5px;color:#7C8B95;line-height:1.55}
.enroll.assurvey .cardrow{margin-top:22px}
.cardsecure{display:flex;align-items:flex-start;gap:8px;margin:20px 0 0;font-size:12.5px;
  color:#5A6C77;line-height:1.55}
/* Explicit columns rather than auto-fit: a street address needs the room and a ZIP does
   not, and auto-fit gives all three the same width. */
.cardbill{display:grid;grid-template-columns:2fr 1.25fr .85fr;gap:20px;margin-top:22px}
@media(max-width:760px){.cardbill{grid-template-columns:1fr 1fr}
  .cardbill > .nf-row:first-child{grid-column:1 / -1}}

/* Sits under the ACH / Credit Card choice and reacts to it, so it needs to read as a
   consequence of that choice rather than as part of the same control. */
.efeebox{background:#FDF8F1;border:1px solid #F0D4AF;border-radius:10px;padding:15px 18px;
  margin:22px 0 0;font-size:14px}
.efeebox p{margin:0;color:#6B4310}
.efeebox b{color:var(--orange-text);font-size:17px}
.efeebreak{margin:7px 0 0 !important;font-size:12.5px;color:#8A6A3A}
.ehelp{font-size:13px;color:var(--muted);margin:-6px 0 16px}
.ereview{margin:0 0 24px}
.ereview .qsummary{max-width:none;background:#FAFCFB;border:1px solid var(--line);border-radius:12px;padding:8px 20px}
.econsents .nf-check{align-items:flex-start;margin-bottom:14px}
.econsents label{font-size:13.5px;line-height:1.6;color:#41535F;font-weight:400}
.enav{display:flex;gap:11px;justify-content:flex-end;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.enav .pill{border:0;cursor:pointer;font:inherit;font-weight:700;min-width:150px}
.enav .pill.ghost{border:1px solid var(--line)}
.edonebox{background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:var(--r);padding:34px 36px;margin:24px 0}
.edonebox h2{margin:0 0 8px;font-size:25px}
.edonebox>p{color:#3B5A4C;max-width:56ch}
@media(max-width:600px){.enroll{padding:22px 18px}.enav{flex-direction:column-reverse}.enav .pill{width:100%}
  .esteps li{font-size:0;padding:4px;gap:0}.esteps li span{font-size:12px}.esteps li.on{font-size:13px;padding:5px 12px 5px 5px;gap:7px}}

/* date of birth: three boxes */
.dobparts{display:flex;gap:10px;align-items:flex-start}
.dobparts span{display:flex;flex-direction:column;gap:4px}
.dobparts span.yr{flex:0 0 92px}
.dobparts i{font-style:normal;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding-left:2px}
.enroll .dobpart{width:64px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.enroll .dobparts span.yr .dobpart{width:92px}
.dobage{font-size:13px;color:var(--mint-deep);font-weight:600;margin:10px 0 0}
.nf-row.bad .dobpart{border-color:#C0472F}
.enroll.assurvey .dobpart{font-size:19px;padding:13px 8px}
.enroll.assurvey .dobparts span.yr{flex:0 0 108px}
.enroll.assurvey .dobparts span.yr .dobpart{width:108px}
.enroll.assurvey .dobpart{width:76px}

/* inline explainers */
.explainpanel{background:var(--mint-bg);border:1px solid #CFE5DB;border-left:4px solid var(--mint-deep);
  border-radius:12px;padding:20px 24px;margin:18px 0 0;max-width:60ch;
  animation:explainIn .22s cubic-bezier(.4,0,.2,1)}
@keyframes explainIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.explainpanel h3{margin:0 0 10px;font-size:17px;color:var(--navy);letter-spacing:-.01em}
.explainpanel p{margin:0 0 11px;font-size:14.5px;line-height:1.66;color:#335143}
.explainpanel p:last-child{margin-bottom:0}
.explainpanel b{color:var(--navy)}
.explaintoggle{background:none;border:0;padding:0;margin:9px 0 0;font:inherit;font-size:13.5px;
  font-weight:600;color:var(--mint-deep);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.explaintoggle:hover{color:#245C48}
.enav .eexplain{margin-right:auto}
.enroll.assurvey .explainpanel{margin-top:24px;padding:22px 26px}
.enroll.assurvey .explainpanel h3{font-size:18px}
.enroll.assurvey .explainpanel p{font-size:15px}
@media(max-width:600px){.enav .eexplain{margin-right:0;order:3}}

/* survey layout: one question at a time */
.enroll.assurvey{padding:38px 40px;min-height:430px;display:flex;flex-direction:column}
.enroll.assurvey .eform{flex:1}
.sprog{margin:0 0 30px}
.sbar{height:5px;background:#E7EDEA;border-radius:99px;overflow:hidden}
.sbar i{display:block;height:100%;width:0;background:var(--mint-deep);border-radius:99px;
  transition:width .35s cubic-bezier(.4,0,.2,1)}
.scount{font-size:12.5px;color:var(--muted);margin:9px 0 0;letter-spacing:.02em}
.enroll.assurvey .estep h2{font-size:15px;letter-spacing:.02em;color:var(--mint-deep);
  font-weight:700;margin:0 0 22px;text-transform:none}
.enroll.assurvey .edek,.enroll.assurvey .ehelp{display:none}
/* One question per screen means the question IS the heading, so a lone .nf-row label is set
   large. It needs real air under it at that size — 8px under a 24px heading reads as the
   label falling into the box. */
.enroll.assurvey .nf-row>label,.enroll.assurvey fieldset legend{font-size:22px;line-height:1.3;
  letter-spacing:-.015em;color:var(--navy);font-weight:700;margin:0 0 14px;text-transform:none}
.enroll.assurvey fieldset{border:0;padding:0;margin:0}
.enroll.assurvey fieldset legend{padding:0;color:var(--navy)}
.enroll.assurvey fieldset .nf-row>label{font-size:14.5px;font-weight:600;margin:0 0 7px}
.enroll.assurvey fieldset .qgrid{margin-top:18px}
.enroll.assurvey .nf-help{font-size:14.5px;margin:0 0 18px;max-width:52ch}
/* Survey mode zeroes the row margin because a one-question screen wants no trailing gap.
   That was fine when every screen held exactly one row. Now that related questions share a
   screen the rule was gluing them together — two headline questions with 0px between them,
   and seven consent checkboxes in a single block. Space is restored per context rather than
   by putting the blanket margin back and fighting it again on the single-question screens. */
.enroll.assurvey .nf-row{margin-bottom:0}
.enroll.assurvey [data-group] > .nf-row + .nf-row{margin-top:30px}
.enroll.assurvey [data-group] > .qgrid + .qgrid,
.enroll.assurvey [data-group] > .nf-row + .qgrid,
.enroll.assurvey [data-group] > .qgrid + .nf-row{margin-top:22px}
.enroll.assurvey .efields > .nf-row + .nf-row{margin-top:22px}
.enroll.assurvey .econsents .nf-check{margin-bottom:16px}
.enroll.assurvey .econsents .nf-check:last-child{margin-bottom:0}
.enroll.assurvey .econsents + .econsents{margin-top:26px}
.enroll.assurvey .nf-row input,.enroll.assurvey .nf-row select{font-size:16px;padding:12px 15px;max-width:440px}

/* ---- grouped field clusters (name/DOB/contact, address) --------------------------------
   Several plain inputs sharing one screen. Here the labels are labels, not questions: at
   heading size they dwarf their own boxes and the screen reads as four questions rather
   than one address. */
.enroll.assurvey .efields .nf-row>label{font-size:13.5px;line-height:1.35;font-weight:600;
  letter-spacing:.005em;color:#41535F;margin:0 0 7px}
.enroll.assurvey .efields .nf-row input,.enroll.assurvey .efields .nf-row select{
  font-size:15.5px;padding:11px 14px;max-width:none}
.enroll.assurvey .efields{max-width:760px}
.enroll.assurvey .efields .qgrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;margin-bottom:0}
.enroll.assurvey .efields>.nf-row{margin-bottom:18px}
.enroll.assurvey .efields .nf-help{font-size:13px;margin:0 0 8px}
.enroll.assurvey .efields .dobpart{font-size:16px;padding:10px 8px;width:64px}
/* span.yr is a COLUMN flex container, so a flex shorthand on its child sets the input's
   HEIGHT rather than its width, and the year box grew into a square. Width belongs on the
   input, flex on the span. */
.enroll.assurvey .efields .dobparts span.yr{flex:0 0 88px}
.enroll.assurvey .efields .dobparts span.yr .dobpart{width:88px}
.enroll.assurvey .efields .dobparts i{font-size:11.5px}
.enroll.assurvey .nf-radios{gap:11px;margin-top:8px}
.enroll.assurvey .nf-chip{padding:13px 26px;font-size:16px}
.enroll.assurvey #ach-block .nf-row input{font-size:16px;padding:11px 13px}
/* The button row is the end of the screen, so it wants clear separation from the last
   field rather than reading as one more element in the stack. The gap has to be a margin:
   padding sits inside the nav's own box and does not push it away from the field above. */
.enroll.assurvey .enav{justify-content:space-between;border-top:0;margin-top:38px;padding-top:0}
.enroll.assurvey .esteps{display:none}
@media(max-width:600px){.enroll.assurvey{padding:24px 20px}
  .enroll.assurvey .nf-row>label,.enroll.assurvey fieldset legend{font-size:20px}}

/* ---------- quote calculator ---------- */
.qcalc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 32px;margin:24px 0}
.qfs{border:0;padding:0;margin:0 0 26px}
.qfs legend{font-weight:700;font-size:15px;color:var(--navy);padding:0;margin:0 0 12px}
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:720px){.qcards{grid-template-columns:1fr}}
.qcards input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.qcard{display:block;border:1.5px solid #CBD8D2;border-radius:13px;padding:16px 18px;cursor:pointer;
  transition:all .15s;background:#fff;height:100%}
.qcard b{display:block;font-size:17px;color:var(--navy);margin-bottom:2px}
.qcard .qtag{display:block;font-size:13px;color:var(--mint-deep);font-weight:600;margin-bottom:7px}
.qcard .qd{display:block;font-size:13.5px;color:var(--muted);line-height:1.5}
.qcard:hover{border-color:var(--mint-deep)}
.qcards input:checked+.qcard{border-color:var(--mint-deep);background:var(--mint-bg);
  box-shadow:0 6px 20px rgba(47,125,99,.12)}
.qcards input:focus-visible+.qcard{box-shadow:0 0 0 3px rgba(47,125,99,.25)}
.qchips{display:flex;flex-wrap:wrap;gap:9px}
.qchips input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.qchip{border:1px solid #CBD8D2;border-radius:999px;padding:9px 18px;font-size:14.5px;cursor:pointer;
  background:#fff;transition:all .14s;user-select:none}
.qchip:hover{border-color:var(--mint-deep)}
.qchips input:checked+.qchip{background:var(--mint-bg);border-color:var(--mint-deep);color:#1E4A3A;font-weight:600}
.qchips input:focus-visible+.qchip{box-shadow:0 0 0 3px rgba(47,125,99,.22)}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:24px}
.qfield label{display:block;font-weight:600;font-size:14.5px;color:var(--navy);margin:0 0 6px}
.qfield input,.qfield select{width:100%;font:inherit;font-size:16px;color:var(--navy);background:#fff;
  border:1px solid #CBD8D2;border-radius:10px;padding:11px 13px;-webkit-appearance:none;appearance:none}
.qfield select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6E7A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.qfield :is(input,select):focus{outline:none;border-color:var(--mint-deep);box-shadow:0 0 0 3px rgba(47,125,99,.16)}
.qfield input.bad{border-color:#C0472F}
.qinfo{background:none;border:0;color:var(--mint-deep);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;text-decoration:underline;padding:0;margin-left:7px}
.qhelp{font-size:13px;color:var(--muted);margin:7px 0 0;line-height:1.55;
  background:var(--mint-bg);border-radius:8px;padding:10px 12px}
.qgo{border:0;cursor:pointer;font:inherit;font-weight:700;width:100%}
.qmicro{font-size:13px;color:var(--muted);text-align:center;margin:11px 0 0}
/* result */
.qresult{text-align:center}
.qrlab{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-deep);
  font-weight:700;margin:0 0 4px}
.qrprice{display:flex;align-items:baseline;justify-content:center;gap:2px;margin:0 0 20px}
.qrprice .qcur{font-size:26px;color:var(--muted)}
.qrprice b{font-size:64px;letter-spacing:-.04em;line-height:1;color:var(--navy)}
.qrprice .qper{font-size:17px;color:var(--muted);margin-left:4px}
.qsummary{list-style:none;margin:0 auto 18px;padding:0;max-width:340px;text-align:left}
.qsummary li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:14.5px}
.qsummary li:last-child{border-bottom:0}
.qsummary span{color:var(--muted)}
.qsummary b{color:var(--navy)}
.qnote{font-size:13px;color:var(--muted);max-width:46ch;margin:0 auto 20px;line-height:1.6}
.qacts{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.qacts .pill{border:0;cursor:pointer;font:inherit;font-weight:700}
.qacts .pill.ghost{border:1px solid var(--line)}
.qlead{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);text-align:left}
.qlead h3{margin:0 0 4px;font-size:19px}
.qlead .qmicro{text-align:left;margin:0 0 16px}
.qleadgo{border:0;cursor:pointer;font:inherit;font-weight:700;width:100%}
.qdone{margin-top:26px;background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:var(--r);
  padding:26px 28px;text-align:left}
.qdone h3{margin:0 0 6px;font-size:20px}
.qdone .nf-tick{margin:0 0 13px !important}
@media(max-width:600px){.qcalc{padding:22px 20px}.qrprice b{font-size:52px}}

.qeditline{text-align:center;margin:14px 0 0}
.qedit{background:none;border:0;color:var(--mint-deep);font:inherit;font-size:13.5px;
  font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
.qacts .qgoto{min-width:190px}
.qdoneacts{margin:16px 0 0}
/* Revealed by JS when a quote is carried over from /quote/, so it lands between the steps
   above and the form below and has to carry its own space on both sides. */
.qcarry{background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:var(--r);
  padding:24px 28px;margin:36px 0 26px;text-align:center}
.qcarrylab{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--mint-deep);
  font-weight:700;margin:0 0 2px}
.qcarryprice{display:flex;align-items:baseline;justify-content:center;gap:2px;margin:0 0 16px}
.qcarryprice .qcur{font-size:20px;color:var(--muted)}
.qcarryprice b{font-size:44px;letter-spacing:-.035em;line-height:1;color:var(--navy)}
.qcarryprice .qper{font-size:15px;color:var(--muted);margin-left:3px}
.qcarry .qsummary{background:#fff;border-radius:10px;padding:6px 16px;margin:0 auto 16px}
.qcarrynote{font-size:13.5px;color:#3B5A4C;max-width:52ch;margin:0 auto 10px;line-height:1.6}
.qcarryedit{margin:0;font-size:13px}
.qcarryedit a{color:var(--mint-deep)}

/* ---------- native forms ---------- */
.nfwrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin:22px 0}
.nfwrap.compact{background:none;border:0;padding:0;margin:0}
.nf-demo{background:#FDF3E7;border:1px solid #F0D4AF;border-left:4px solid var(--orange);
  border-radius:9px;padding:11px 15px;margin:0 0 20px;font-size:13.5px;color:#6B4310}
.nf-demo b{color:var(--orange-text)}
.nform{display:block}
.nform[hidden]{display:none}
[hidden]{display:none !important}
.nf-row{margin:0 0 17px}
.nf-row>label{display:block;font-weight:600;font-size:14.5px;color:var(--navy);margin:0 0 6px}
.nf-req{color:var(--orange-text)}
.nf-help{font-size:13px;color:var(--muted);margin:0 0 7px;line-height:1.5}
.nform input[type=text],.nform input[type=email],.nform input[type=tel],
.nform input[type=number],.nform select,.nform textarea{
  width:100%;font:inherit;font-size:16px;color:var(--navy);background:#fff;
  border:1px solid #CBD8D2;border-radius:10px;padding:11px 13px;
  transition:border-color .14s,box-shadow .14s;-webkit-appearance:none;appearance:none}
.nform textarea{resize:vertical;min-height:96px;line-height:1.55}
.nform select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6E7A' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.nform :is(input,select,textarea):focus{outline:none;border-color:var(--mint-deep);
  box-shadow:0 0 0 3px rgba(47,125,99,.16)}
.nform .bad :is(input,select,textarea),.nform :is(input,select,textarea).bad{
  border-color:#C0472F;box-shadow:0 0 0 3px rgba(192,71,47,.12)}
.nf-err{font-size:13px;color:#A83A26;margin:6px 0 0;min-height:0;display:none}
.nf-row.bad .nf-err{display:block}
.nf-formerr{background:#FBEDEA;border:1px solid #EFC9C0;border-radius:9px;padding:11px 14px;
  color:#A83A26;font-size:14px;margin:0 0 16px}
/* radio chips */
.nf-radios{display:flex;flex-wrap:wrap;gap:9px}
.nf-radios input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.nf-chip{display:inline-block;border:1px solid #CBD8D2;border-radius:999px;padding:8px 17px;
  font-size:14.5px;cursor:pointer;background:#fff;transition:all .14s;user-select:none}
.nf-chip:hover{border-color:var(--mint-deep)}
.nf-radios input:checked+.nf-chip{background:var(--mint-bg);border-color:var(--mint-deep);
  color:#1E4A3A;font-weight:600}
.nf-radios input:focus-visible+.nf-chip{box-shadow:0 0 0 3px rgba(47,125,99,.22)}
/* checkbox row */
.nf-check{display:flex;gap:11px;align-items:flex-start;margin-bottom:20px}
.nf-check input{width:19px;height:19px;margin:2px 0 0;flex:0 0 19px;accent-color:var(--mint-deep)}
.nf-check label{font-weight:500;font-size:14.5px;color:var(--navy);display:block;cursor:pointer}
.nf-check .nf-help{margin:4px 0 0}
/* honeypot */
.nf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* submit */
.nf-submit{border:0;cursor:pointer;font:inherit;font-weight:700;margin-top:4px}
.nf-submit[disabled]{opacity:.6;cursor:progress}
/* success */
.nf-done{background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:var(--r);padding:28px 30px;margin:22px 0}
.nf-done h3{margin:0 0 8px;font-size:21px}
.nf-done p{margin:0;color:#3B5A4C}
.nf-tick{width:38px;height:38px;border-radius:50%;background:var(--mint-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 0 14px !important}
.nf-payload{margin-top:18px;font-size:13.5px}
.nf-payload summary{cursor:pointer;color:var(--mint-deep);font-weight:600}
.nf-payload table{width:100%;border-collapse:collapse;margin-top:11px;background:#fff;
  border:1px solid #CFE5DB;border-radius:8px;overflow:hidden}
.nf-payload td{padding:7px 11px;border-top:1px solid #E3EEE8;vertical-align:top;font-size:13px}
.nf-payload tr:first-child td{border-top:0}
.nf-payload td:first-child{font-family:ui-monospace,Menlo,monospace;color:#1E4A3A;white-space:nowrap;width:1%}
/* footer variant */
.foot .nfwrap{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);padding:16px 18px;max-width:340px}
.foot .nf-row>label{color:#fff}
.foot .nf-demo{display:none}
.foot .nf-done{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);padding:18px 20px;max-width:340px}
.foot .nf-done h3{color:#fff;font-size:17px}
.foot .nf-done p{color:#D7E2EA;font-size:14px}
.foot .nf-payload{display:none}
/* field map table on the internal preview */
.nfmap{width:100%;border-collapse:collapse;margin:14px 0 30px;font-size:14px;background:#fff;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.nfmap th{background:var(--navy);color:#fff;text-align:left;padding:9px 12px;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase}
.nfmap td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.nfmap tr:nth-child(even) td{background:#FAFCFB}
.nfmap code{font-size:12.5px;background:#EDF2F0;padding:2px 6px;border-radius:5px;color:#1E4A3A}
.nfsame{color:var(--muted)}

/* article prose */
.prose{margin-top:34px;font-size:17px;line-height:1.72;max-width:74ch}
.prose h2{font-size:26px;margin:44px 0 14px;letter-spacing:-.02em}
.prose h3{font-size:20px;margin:32px 0 10px}
.prose h4{font-size:17px;margin:26px 0 8px}
.prose p{margin:0 0 18px;color:#2B3D4C}
.prose ul,.prose ol{margin:0 0 20px;padding-left:24px}
.prose li{margin-bottom:9px;color:#2B3D4C}
.prose strong{color:var(--ink)}
.prose em{color:var(--muted)}
.prose code{background:#EFF3F5;padding:2px 6px;border-radius:4px;font-size:14.5px}
.prose .tablewrap{margin:26px 0}
.prose table.cmp{font-size:14.5px;min-width:0}
.prose table.cmp td{text-align:left;width:auto}
.prose > p:first-child{font-size:18.5px;color:var(--muted)}
.prose a{color:var(--mint-d);font-weight:600}

/* closer */
.closer{background:var(--navy);color:#fff;text-align:center;padding:82px 0}
.closer h2{font-size:clamp(28px,4vw,42px)}
.closer p{color:#B9CBD9;font-size:18px;margin:16px 0 30px}
.closer .pill{background:var(--mint);color:var(--navy);border-color:var(--mint)}
.closer .pill:hover{background:#fff;border-color:#fff}
.closer .pill.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);margin-left:10px}

/* ---- Montana hospital price comparison ---------------------------------- */
/* The table is the page. It has four numeric columns and long hospital names, so it
   scrolls horizontally inside its own wrapper rather than letting the page scroll. */
.ptabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 20px;
  border:1px solid var(--line);border-radius:14px;background:#fff}
.ptab{width:100%;border-collapse:collapse;font-size:15px;min-width:660px}
.ptab thead th{background:#F4F8F9;color:var(--navy);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;text-align:right;padding:13px 16px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.ptab thead th:first-child{text-align:left}
.ptab tbody th{text-align:left;padding:14px 16px;font-weight:600;color:var(--navy);
  border-bottom:1px solid var(--line);vertical-align:top}
.ptab tbody tr:last-child th,.ptab tbody tr:last-child td{border-bottom:0}
.ptab tbody tr:hover{background:#FAFCFC}
.phname{display:block;line-height:1.35}
.phcity{display:block;font-weight:400;font-size:12.5px;color:#7C8B95;margin-top:2px}
.ptab td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.pnum{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pgross{color:#8A97A0}
.pstrike{text-decoration:line-through;text-decoration-color:#CBD5DA}
.pcash{font-weight:700;color:var(--navy)}
.prange{color:#41535F}
.ppay{display:block;font-size:12px;color:#8A97A0;font-weight:400;margin-top:2px;
  text-decoration:none;white-space:nowrap}
.ptab .pend{color:#9AA7AF;font-style:italic;font-size:13.5px;font-weight:400;
  text-decoration:none}

/* the one number we want someone to remember */
.bigfind{background:linear-gradient(180deg,#F2FAF8 0%,#EAF6F3 100%);
  border:1px solid #CFE8E1;border-radius:18px;padding:34px 32px;text-align:center}
.bfkick{margin:0;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--mint-deep)}
.bfnum{margin:6px 0 10px;font-size:clamp(52px,9vw,78px);line-height:1;font-weight:800;
  color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bfline{margin:0 auto;max-width:56ch;color:#41535F;line-height:1.65;font-size:16.5px}
.bfline a{color:var(--mint-deep);font-weight:600}
.bfsub{margin:16px auto 0;max-width:58ch;color:#5A6C77;line-height:1.6;font-size:14.5px;
  padding-top:14px;border-top:1px solid #CFE8E1}
.bfsub a{color:var(--mint-deep);font-weight:600}

.pfinding{background:#FDF3E7;border-left:4px solid var(--orange);border-radius:0 12px 12px 0;
  padding:16px 20px;margin:0 0 20px;color:#41535F;line-height:1.65;font-size:15.5px}
.pfinding b{color:#9A5A12}

/* a published figure we can see is not a like-for-like line item */
.podd{color:#B08A5A;text-decoration:none}
.poddm{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#B08A5A;
  margin-top:2px;white-space:nowrap}
.poddnote{font-size:13.5px;color:#7C8B95;line-height:1.6;margin:-6px 0 20px;max-width:78ch}
.poddnote b{color:#41535F}

/* Below tablet the four columns cannot coexist. Rather than a horizontal scroll that hides
   the two columns the page exists to compare, each hospital becomes a card. */
@media(max-width:700px){
  .ptabwrap{border:0;border-radius:0;background:transparent;overflow:visible}
  .ptab{min-width:0;display:block}
  .ptab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}
  .ptab tbody,.ptab tr{display:block}
  .ptab tr{background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:4px 16px 10px;margin:0 0 12px}
  .ptab tbody th{display:block;padding:12px 0 10px;border-bottom:1px solid var(--line)}
  .ptab td{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
    gap:0 16px;padding:9px 0;border-bottom:1px solid #EEF2F4;text-align:right}
  .ptab tr td:last-child{border-bottom:0}
  .ptab td::before{content:attr(data-l);font-size:12.5px;font-weight:600;color:#7C8B95;
    text-align:left;flex:0 0 auto}
  .ptab td>.pv,.ptab td>.pend{margin-left:auto}
  .ppay,.poddm{flex:0 0 100%;text-align:right;margin-top:2px}
}

/* Guide hero. Labelled "Illustration" in the corner, permanently: these are AI-generated
   and a reader deserves to know that a picture on a page full of verified numbers is the one
   thing on it that is not evidence. */
.ghero,.phero{margin:30px 0 0;position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);line-height:0}
.ghero img,.phero img{width:100%;height:auto;display:block}
.ghero figcaption{position:absolute;right:10px;bottom:10px;background:rgba(15,29,42,.72);
  color:#E8EFF3;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  padding:5px 10px;border-radius:99px;line-height:1;backdrop-filter:blur(3px)}
.phero{margin:26px 0 34px}
@media(max-width:600px){.ghero,.phero{margin-top:22px;border-radius:12px}}
/* the ILLUSTRATION badge is 11px, which is under the phone reading floor */
@media(max-width:600px){.ghero figcaption{font-size:12px;letter-spacing:.06em;padding:5px 9px}}
/* the ILLUSTRATION badge is 11px, which is under the phone reading floor */
@media(max-width:600px){.ghero figcaption{font-size:12px;letter-spacing:.06em;padding:5px 9px}}

/* ---- savings comparison in the calculator ---------------------------------------------
   The number is the point, but the subsidy line sits directly under it in readable type
   rather than in a footnote — for most Montanans a tax credit changes this comparison, and
   a reader who finds that out elsewhere stops believing the rest of the page. */
.qsave{background:var(--mint-bg);border:1px solid #CFE5DB;border-radius:14px;
  padding:20px 22px;margin:22px 0 0;text-align:left}
.qsavelab{margin:0;font-size:14px;letter-spacing:0;text-transform:none;
  font-weight:600;color:#256250;line-height:1.45;max-width:34ch}
.qsavefig{display:flex;align-items:baseline;gap:2px;margin:6px 0 0;flex-wrap:wrap}
.qsavefig b{font-size:38px;letter-spacing:-.03em;line-height:1;color:var(--navy)}
.qsavefig .qcur{font-size:18px;color:var(--muted)}
.qsavefig .qper{font-size:14px;color:var(--muted);margin-left:2px}
.qsaveyr{font-size:13.5px;color:#3B5A4C;margin-left:8px;font-weight:600}
.qsavesrc{margin:14px 0 0;font-size:12px;color:#5A6B75;line-height:1.5}
.qsavesrc a{color:#4A6157;text-decoration:underline;text-underline-offset:2px}
.qcalc.leadopen .qsave{padding:14px 16px}
.qcalc.leadopen .qsavefig b{font-size:28px}
.qcalc.leadopen .qsavesrc{display:none}

.mkth{font-size:17px;margin:30px 0 10px;color:var(--navy)}
.mktnat{display:block;font-size:12px;color:#9A5A12;font-weight:600;margin-top:3px}

/* ---- guide visuals ---------------------------------------------------------------------
   Charts are inline SVG generated at build time, so there is no client-side charting code
   and they survive printing and a dead JS bundle. Text inside the SVG wears ink tokens, never
   a series colour — the marks carry identity, the labels stay readable. */
.gchart{margin:30px 0 34px;padding:24px 26px;background:#fff;border:1px solid var(--line);
  border-radius:16px}
.gchead h3{font-size:19px;margin:0 0 8px;color:var(--navy);letter-spacing:-.01em}
.gchead p{margin:0 0 18px;color:#41535F;font-size:15px;line-height:1.6;max-width:66ch}
.gchead b{color:var(--navy)}
.gcplot svg{display:block;overflow:visible}
.gclab{font-size:13px;fill:#41535F}
.gcval{font-size:13.5px;font-weight:700;fill:var(--navy)}
.gcval.hot{fill:#9A5A12}
.gckey{font-size:12.5px;fill:var(--muted)}
.gctick{font-size:11.5px;fill:#8A97A0}
.gcband{font-size:12px;font-weight:600;fill:#0C3D2E}
.gcsrc{margin:14px 0 0;font-size:12.5px;color:#7C8B95;line-height:1.55}
.gcsrc a{color:var(--mint-deep)}
.gctable{margin:16px 0 0}
.gctable summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--mint-deep);
  padding:6px 0}
.gctable summary:hover{color:var(--navy)}
.gctable .tablewrap{margin-top:10px}
.gctable table{font-size:14px}
@media(max-width:640px){
  .gchart{padding:18px 16px;margin:24px 0 28px}
  .gchead h3{font-size:17px}
  /* the bar labels are sized for a wide plot; below this the SVG scales down and they get
     too small to read, so the table is the primary view and opens by default */
  .gcplot{overflow-x:auto}
  .gcplot svg{min-width:520px}
}

/* stat tiles — a handful of headline numbers is a KPI row, not a chart */
.gstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;
  margin:26px 0 10px}
.gstat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 20px 18px}
.gsfig{margin:0;font-size:30px;font-weight:800;color:var(--navy);letter-spacing:-.03em;
  line-height:1.05}
.gslab{margin:8px 0 0;font-size:13.5px;font-weight:700;color:var(--mint-deep);
  letter-spacing:.02em}
.gssub{margin:6px 0 0;font-size:12.5px;color:#7C8B95;line-height:1.5}

/* timeline — a sequence of deadlines is not a chart either */
.gtl{margin:28px 0 32px;padding:24px 26px;background:var(--mint-bg);border:1px solid #CFE5DB;
  border-radius:16px}
.gtlh{font-size:18px;margin:0 0 8px;color:var(--navy)}
.gtldek{margin:0 0 18px;color:#3B5A4C;font-size:14.5px;line-height:1.6;max-width:62ch}
.gtlist{list-style:none;margin:0;padding:0;position:relative}
.gtlist::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;
  background:#CFE5DB}
.gtlist li{position:relative;padding:0 0 20px 34px;display:grid;
  grid-template-columns:minmax(96px,auto) 1fr;gap:4px 16px;align-items:baseline}
.gtlist li:last-child{padding-bottom:0}
.gtlist li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;
  border-radius:50%;background:#fff;border:2px solid #9FCBB9}
.gtlist li.now::before{background:var(--mint-deep);border-color:var(--mint-deep);
  box-shadow:0 0 0 4px rgba(47,125,99,.15)}
.gtlwhen{font-size:13px;font-weight:800;color:var(--mint-deep);letter-spacing:.02em}
.gtlwhat{font-size:15px;color:#2C4A3D;line-height:1.6}
.gtlwhat b{color:var(--navy)}
@media(max-width:560px){
  .gtl{padding:18px 16px}
  .gtlist li{grid-template-columns:1fr;gap:2px}
}

/* footer */
.foot{background:#0F1D2A;color:#FFFFFF;padding:64px 0 0;font-size:14.5px}
.fwrap{display:grid;grid-template-columns:1.7fr .95fr .95fr 1.1fr .95fr 1.45fr;gap:32px;padding-bottom:48px}
@media(max-width:1080px){.fwrap{grid-template-columns:1.4fr 1fr 1.25fr;gap:38px 30px}}
@media(max-width:940px){.fwrap{grid-template-columns:1fr 1fr;gap:34px 26px}}
/* Phone: a single column stacked all six blocks and made the footer enormous. Keep two
   columns so the four link columns sit as 2x2, with the brand block and the newsletter
   spanning the full width above and below them. Tap padding stays at the 44px floor. */
@media(max-width:560px){
  .fwrap{grid-template-columns:1fr 1fr;gap:24px 20px;padding-bottom:32px}
  .fwrap>.fbrand,.fwrap>.fnewscol{grid-column:1/-1}
  /* Signup is the first thing in the footer on a phone. It used to be last, after the brand
     block and four link columns. Full width: at this breakpoint a half column leaves the
     email field about 170px wide, which is not a usable input. */
  .fwrap>.fnewscol{order:1}
  .fwrap>.fbrand{order:2}
  .fwrap>.fcol:not(.fbrand):not(.fnewscol){order:3}
  .fwrap>.fnewscol .nfwrap{max-width:none}
  .foot{padding-top:40px}
  .fbrand p{max-width:none}
  .fbot{padding:20px 22px 34px}
}
.fcol .fh{margin:0 0 14px;font-weight:700}
.fcol .fh a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.fcol .fh a:hover{border-bottom-color:#fff}
.fcol h4,.fcol .fh{color:#fff;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.fcol a{display:block;color:#FFFFFF;text-decoration:none;margin-bottom:9px;font-size:14.5px}
/* Phone: footer links were 23px tall, well under the 44px tap floor, and the phone number
   and email sat 7px apart. Pad them into real targets rather than shrinking the footer. */
@media(max-width:820px){
  .fcol a{padding:11px 0;margin-bottom:0;min-height:22px}
  .fcol .fh{margin-bottom:6px}
  .fcontact a{display:inline-block;padding:8px 0}
  .fcontact{line-height:1.9}
}
.fcol a:hover{color:var(--mint)}
.fbrand p{margin:14px 0 0;line-height:1.6;max-width:34ch}
.fcontact a{display:inline;color:var(--mint)}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:26px 22px 42px;max-width:var(--max);margin:0 auto}
.fbot .disc{font-size:12px;color:#D7E2EA;line-height:1.55;margin:0 0 10px;max-width:none}
.fbot .disc a{color:#FFFFFF;text-decoration:underline;text-underline-offset:2px}
.fbot .disc a:hover{color:#fff}
.fmeta{font-size:12.5px;color:#D7E2EA;margin:16px 0 0}
.fmeta a{color:#FFFFFF}


/* ---- mobile type floor -----------------------------------------------------------------
   Last in the sheet on purpose. Every one of these labels is defined further up at 10.5-11px,
   which reads fine on a desktop and is under the floor at arm's length on a phone. Placing
   the overrides here means they win on source order without bumping specificity. */
@media(max-width:640px){
  .badge{font-size:12px;letter-spacing:.05em;padding:4px 10px}
  .gcat{font-size:12px;letter-spacing:.05em}
  .storesub{font-size:12px}
  .storetag{font-size:12px;letter-spacing:.04em}
  .paud{font-size:12.5px;letter-spacing:.05em}
  .bgpaneleye{font-size:12px;letter-spacing:.07em}
  .qrlab,.qcarrylab,.equotecard .qrlab,.qcalc.leadopen .qrlab{font-size:12.5px;letter-spacing:.06em}
  .rxplab{font-size:12px;letter-spacing:.04em}
  .rxpsub{font-size:12.5px}
}