/* ============================================================================
   Provider Notes: the marketing site.

   One stylesheet, for every page.

   The site this replaces carried its CSS inline: 83 kilobytes of it, copied
   into each of 89 pages, in 29 versions that had drifted apart. Nothing could
   be changed everywhere at once, and nothing was uniform because nothing could
   be. This is the same design system the booking app uses, so somebody who
   crosses from providernotes.com to secure.providernotes.com never notices
   the join.

   Built for who actually reads it: 65 and over, and nine in ten on a phone.
   17px base, 56px minimum tap targets, no horizontal scrolling anywhere.
   ========================================================================= */

:root{
  --navy:#1F4E79; --navy-d:#163A5F; --navy-t:#0E2740;
  --amber:#E8A33D; --amber-d:#B8791B; --amber-s:#FEF7EB;
  --paper:#fff; --field:#F4F7FA; --off:#FAFBFC;
  --ink:#12202F; --body:#31465B; --muted:#5D7288;
  --rule:#D9E2EA; --rule-s:#EDF1F5;
  --ok:#1B6B45; --ok-s:#E9F4EE;
  --err:#A5301F; --err-s:#FCEDEA;
  --shadow:0 1px 2px rgba(18,32,47,.04), 0 10px 30px -18px rgba(18,32,47,.28);
  --tap:56px;
  --maxw:1080px; --readw:680px;
}

/* touch-action: manipulation removes the 300ms double-tap-to-zoom gesture,
   which is what makes a tap feel laggy and what causes an accidental zoom
   when somebody taps twice. It does NOT block pinch-zoom, deliberately:
   this audience is 65 and over and many of them enlarge text to read it.
   Blocking that would fail WCAG 1.4.4, which our own accessibility statement
   claims we meet. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* 18px on a phone, not 16. Every guideline written for older readers says
   the same thing and every default ignores it. The line height is generous
   for the same reason: a tight paragraph is where a reader loses their
   place and gives up. */
html{font-size:18px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(min-width:760px){html{font-size:18.5px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{margin:0;background:var(--off);color:var(--body);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}

h1,h2,h3{color:var(--navy-t);margin:0;letter-spacing:-.018em;line-height:1.18}
h1{font-size:1.75rem;font-weight:800;margin-bottom:.6rem}
h2{font-size:1.32rem;font-weight:800;margin:0 0 .7rem}
h3{font-size:1.05rem;font-weight:700;margin:0 0 .4rem}
@media(min-width:760px){h1{font-size:2.35rem}h2{font-size:1.65rem}h3{font-size:1.12rem}}
p{margin:0 0 1rem}
a{color:var(--navy);text-underline-offset:.18em}
a:hover{color:var(--navy-d)}
ul,ol{margin:0 0 1rem;padding-left:1.35rem}
li{margin:.45rem 0}
strong,b{color:var(--ink);font-weight:700}
/* An email address or a long form code has no space to break at, so at 320px
   it pushed the page sideways. Breaking one long word is better than a page
   that scrolls horizontally. */
b,strong,code,.note b{overflow-wrap:anywhere}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}
img{max-width:100%;height:auto}

/* ---------- a keyboard and a screen reader get in first ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:.8rem 1.1rem;z-index:99;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1rem;width:100%}
@media(min-width:760px){.wrap{padding:0 1.5rem}}
.read{max-width:var(--readw);margin-left:auto;margin-right:auto}
section{padding:2.4rem 0}
@media(min-width:760px){section{padding:3.4rem 0}}
section.tight{padding:1.6rem 0}
section.alt{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
section.navy{background:var(--navy)}
section.navy,section.navy p,section.navy li{color:#C7D8E8}
section.navy h2,section.navy h3,section.navy b,section.navy strong{color:#fff}
section.navy a{color:#fff}

.eyebrow{display:block;font-size:.78rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--amber-d);margin:0 0 .5rem}
section.navy .eyebrow{color:var(--amber)}
.lede{font-size:1.08rem;line-height:1.62;max-width:60ch;margin-bottom:1.15rem}
@media(min-width:760px){.lede{font-size:1.18rem}}
.sub{color:var(--muted);font-size:.95rem}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.mt0{margin-top:0}.mb0{margin-bottom:0}

/* ---------- header ---------- */
header.site{background:var(--paper);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:40}
header.site .bar{max-width:1240px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:.8rem;padding:.7rem 1rem;min-height:62px}
@media(min-width:760px){header.site .bar{padding:.8rem 1.5rem;gap:1.5rem}}
/* The two links in the header are the two most likely to be tapped, and both
   were as tall as their contents: 24 pixels for the logo, 19 for the phone
   number once its second line hides on a narrow screen. */
header.site .mark{display:flex;align-items:center;text-decoration:none;flex:none;min-height:46px}
header.site .mark img{height:24px;width:auto;max-width:170px;display:block}
@media(min-width:760px){header.site .mark img{height:30px;max-width:210px}}
header.site .right{display:flex;align-items:center;gap:.6rem;flex:none}
header.site .tel{display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;text-decoration:none;color:var(--navy);line-height:1.15;
  min-height:46px;padding:.2rem 0}
header.site .tel span{font-weight:800;font-size:.98rem;white-space:nowrap}
header.site .tel small{color:var(--muted);font-size:.72rem;font-weight:500;white-space:nowrap}
@media(max-width:420px){header.site .tel small{display:none}}
/* At 360px, which is still a common phone, the logo, the number and the
   menu button together were 22px wider than the screen. The number stays
   readable because this audience uses it; the logo gives up the space. */
/* 320px is an iPhone SE in landscape-lock or a heavily zoomed display, and
   somebody enlarging text is exactly who this site is for. Below 340 the
   wordmark goes and the header is the number plus the menu. */
/* At 320px the three header items are flex:none, so none of them could give
   way and the row simply ran off the screen. The wordmark is the one thing
   here nobody needs: it is a link home, and the page they are on already
   tells them where they are. It shrinks, and the number does not. */
@media(max-width:400px){
  header.site .mark{min-width:0;overflow:hidden;flex:0 1 auto}
  header.site .mark img{max-width:100%;height:auto;max-height:22px}
}
@media(max-width:339px){
  header.site .mark img{max-height:19px}
  header.site .tel span{font-size:.88rem}
}
@media(max-width:400px){
  header.site .mark img{height:21px;max-width:132px}
  header.site .tel span{font-size:.94rem}
  header.site .bar{gap:.5rem;padding:.6rem .7rem}
  .menubtn{min-width:44px;padding:.5rem .55rem}
}

/* The menu, and a lesson about source order.
 *
 * The first version of this put the base rules for .menubtn and .cta-sm
 * AFTER the desktop media query. Same specificity, later rule wins, so on a
 * desktop the hamburger appeared next to a full navigation (and did nothing,
 * because the panel it opens is display:none above 960px) and the header's
 * "Check if you qualify" button never appeared at all. The second of those
 * was the expensive one: the primary action was missing from the header on
 * every desktop page.
 *
 * Base rules first, media query after. Always. */
.menubtn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:none;border:1.5px solid var(--rule);border-radius:10px;
  padding:.5rem .75rem;color:var(--navy);font-weight:700;font-size:.9rem;
  min-height:46px;min-width:46px;cursor:pointer}
.menubtn svg{display:block}
header.site .cta-sm{display:none;min-height:44px;padding:.6rem 1.05rem;font-size:.95rem}
header.site nav.main{display:none}

#menu{display:none;background:var(--paper);border-bottom:1px solid var(--rule)}
#menu.open{display:block}
#menu ul{list-style:none;margin:0 auto;padding:.3rem 1rem 1rem;max-width:var(--maxw)}
#menu li{margin:0}
#menu a{display:flex;align-items:center;padding:.9rem .2rem;color:var(--navy-t);
  text-decoration:none;font-weight:600;border-bottom:1px solid var(--rule-s);min-height:var(--tap)}
#menu .btn{margin-top:.9rem}

/* The desktop header carries a logo, six links, a phone number and a button.
   At 960px that is 442 pixels more than fits, and the page scrolled sideways.
   The navigation appears at 1080, and the button waits until 1280 where
   there is room for it. Below those the hamburger does the job. */
@media(min-width:1040px){
  header.site nav.main{display:flex;gap:1.05rem;align-items:center;flex:1;justify-content:center}
  header.site nav.main a{color:var(--body);text-decoration:none;font-weight:600;
    font-size:.92rem;padding:.45rem 0;border-bottom:2px solid transparent;white-space:nowrap}
  header.site nav.main a:hover,header.site nav.main a[aria-current="page"]{
    color:var(--navy-t);border-bottom-color:var(--amber)}
  .menubtn{display:none}
  #menu{display:none!important}
}
@media(min-width:1380px){
  header.site nav.main{gap:1.25rem}
  header.site nav.main a{font-size:.94rem}
  header.site .cta-sm{display:inline-flex}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--tap);padding:.9rem 1.5rem;border-radius:12px;font-size:1.02rem;
  font-weight:800;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  text-align:center;line-height:1.25;transition:background .15s ease,border-color .15s ease}
.btn.go{background:var(--amber);color:var(--navy-t);border-color:var(--amber)}
.btn.go:hover{background:#DD9530;color:var(--navy-t)}
.btn.ghost{background:var(--paper);color:var(--navy);border-color:var(--rule)}
.btn.ghost:hover{border-color:#BBCBDA;background:#FCFDFE}
.btn.light{background:#fff;color:var(--navy-t);border-color:#fff}
.btn.light:hover{background:#F2F6FA;color:var(--navy-t)}
.btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.outline:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.btn.full{width:100%}
.btn.lg{font-size:1.06rem;padding:1.05rem 1.7rem;min-height:60px}
.acts{display:flex;flex-direction:column;gap:.7rem;margin:1.3rem 0 0}
@media(min-width:560px){
  .acts{flex-direction:row;flex-wrap:wrap}
  .acts .btn{width:auto;min-width:200px}
  .acts.center{justify-content:center}
}

/* ---------- hero ---------- */
.hero{background:linear-gradient(178deg,#fff 0%,var(--off) 100%);
  border-bottom:1px solid var(--rule);padding:2.2rem 0 2.6rem}
@media(min-width:760px){.hero{padding:3.4rem 0 3.8rem}}
.hero .grid{display:grid;gap:1.8rem;align-items:center}
@media(min-width:900px){.hero .grid{grid-template-columns:1.05fr .95fr;gap:3rem}}
.hero h1{font-size:1.95rem}
@media(min-width:760px){.hero h1{font-size:2.55rem}}
.hero .shot{border-radius:18px;overflow:hidden;border:1px solid var(--rule);
  box-shadow:var(--shadow);background:var(--paper)}
.hero .shot img{display:block;width:100%}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 0;padding:0;list-style:none}
.pills li{display:inline-flex;align-items:center;gap:.4rem;background:var(--paper);
  border:1px solid var(--rule);border-radius:99px;padding:.42rem .82rem;
  font-size:.86rem;font-weight:700;color:var(--navy-t);margin:0}
.pills svg{flex:none;color:var(--ok)}

/* ---------- cards ---------- */
.cards{display:grid;gap:1rem;margin:1.5rem 0 0}
@media(min-width:620px){.cards.two{grid-template-columns:1fr 1fr}}
@media(min-width:900px){
  .cards.three{grid-template-columns:repeat(3,1fr)}
  .cards.four{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1000px){.cards.four{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  padding:1.3rem 1.25rem;box-shadow:var(--shadow)}
.card h3{margin-bottom:.35rem}
.card p:last-child{margin-bottom:0}
/* A card in a row is a column, so its link can sit at the bottom rather than
   wherever its own text happens to end. Four cards with the call to action at
   four different heights reads as four unrelated things. */
a.card{text-decoration:none;color:var(--body);display:flex;flex-direction:column}
a.card:hover{border-color:#BBCBDA}
a.card p{flex:1 0 auto}
a.card .more{display:inline-flex;align-items:center;gap:.3rem;color:var(--navy);
  font-weight:700;font-size:.97rem;margin-top:.9rem;padding-top:.7rem;
  border-top:1px solid var(--rule-s)}
.cards{align-items:stretch}

/* ---------- numbered steps ---------- */
ol.steps{list-style:none;padding:0;margin:1.5rem 0 0;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:0 0 0 3.2rem;margin:0 0 1.6rem}
ol.steps li:last-child{margin-bottom:0}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-.1rem;
  width:2.3rem;height:2.3rem;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.02rem}
ol.steps h3{margin-bottom:.25rem}
ol.steps p:last-child{margin-bottom:0}
section.navy ol.steps li::before{background:var(--amber);color:var(--navy-t)}

/* ---------- notices ---------- */
.note{background:var(--amber-s);border-left:4px solid var(--amber);
  border-radius:0 12px 12px 0;padding:1rem 1.15rem;margin:1.3rem 0;color:#5A3D0C}
.note b{color:#4A3208}
.note p:last-child{margin-bottom:0}
.plain{background:var(--field);border:1px solid var(--rule);border-radius:12px;
  padding:1rem 1.15rem;margin:1.3rem 0}
.plain p:last-child{margin-bottom:0}
section.navy .plain{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}

/* ---------- the price, said once ---------- */
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;margin:0 0 .5rem}
.price b{font-size:2.6rem;color:var(--navy-t);font-weight:800;letter-spacing:-.03em;line-height:1}
.price span{color:var(--muted);font-size:1rem}

/* ---------- practitioners ---------- */
.docs{display:grid;gap:1rem;margin:1.5rem 0 0}
@media(min-width:620px){.docs{grid-template-columns:1fr 1fr}}
.doc{background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  padding:1.2rem;box-shadow:var(--shadow);display:flex;gap:1rem;align-items:flex-start}
.doc img{width:74px;height:74px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--rule-s)}
.doc .who{min-width:0}
.doc b{display:block;color:var(--ink);font-size:1.05rem;line-height:1.3}
.doc .cred{color:var(--muted);font-size:.9rem;display:block;margin-bottom:.4rem}
.doc p{font-size:.94rem;margin:0}
.doc .lic{display:block;color:var(--muted);font-size:.83rem;margin-top:.45rem}

/* ---------- reviews ---------- */
.ratesum{display:flex;align-items:center;gap:1.1rem;margin:.3rem 0 1.3rem}
.ratesum .big{font-size:3rem;font-weight:800;color:var(--navy-t);line-height:1;letter-spacing:-.03em}
.ratesum .stars{color:var(--amber-d);font-size:1.05rem;letter-spacing:.14em;line-height:1.2}
.revs{display:grid;gap:1rem;margin:1.5rem 0 0;align-items:stretch}
@media(min-width:760px){.revs{grid-template-columns:1fr 1fr}}
.rev{background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  padding:1.2rem;box-shadow:var(--shadow)}
/* The name sits on the bottom edge of the card, not wherever the quote
   happens to end. `margin-top:auto` on the name rather than `flex` on the
   quote: the quote can then be any length and the names in a row still line
   up, which is what makes four cards read as one set. */
.rev{display:flex;flex-direction:column}
.rev .revtop{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  margin-bottom:.8rem;flex-wrap:wrap}
.rev .stars{color:var(--amber-d);font-size:1rem;letter-spacing:.14em;line-height:1}
.rev .revtop .when{color:var(--muted);font-size:.87rem;font-weight:600;margin:0}
.rev blockquote{margin:0 0 1.1rem;font-size:.99rem;line-height:1.65}
.rev cite{font-style:normal;font-weight:700;color:var(--ink);font-size:.95rem;display:block;
  margin-top:auto;padding-top:.85rem;border-top:1px solid var(--rule-s)}


/* ---------- accordion ---------- */
details.q{background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  margin:0 0 .7rem;overflow:hidden}
details.q summary{padding:1.05rem 1.15rem;cursor:pointer;font-weight:700;color:var(--navy-t);
  font-size:1rem;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;min-height:var(--tap)}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"";flex:none;width:11px;height:11px;
  border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);
  transform:rotate(45deg);margin-top:-5px;transition:transform .18s ease}
details.q[open] summary::after{transform:rotate(-135deg);margin-top:3px}
details.q .a{padding:1rem 1.15rem 1.15rem;border-top:1px solid var(--rule-s)}
details.q .a p:last-child{margin-bottom:0}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin:1.3rem 0;-webkit-overflow-scrolling:touch;
  border-radius:12px;border:1px solid var(--rule)}
table.data{border-collapse:collapse;width:100%;min-width:400px;font-size:.95rem;background:var(--paper)}
table.data th,table.data td{text-align:left;padding:.85rem .9rem;
  border-bottom:1px solid var(--rule);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data th{background:var(--field);color:var(--navy-t);font-weight:700}

/* ---------- the closing call to action ---------- */
.cta{background:var(--navy);color:#fff;border-radius:18px;padding:1.9rem 1.3rem;text-align:center}
@media(min-width:760px){.cta{padding:2.8rem 2rem}}
.cta h2{color:#fff;margin-bottom:.5rem}
.cta p{color:#C7D8E8;max-width:50ch;margin-left:auto;margin-right:auto}
.cta .acts{justify-content:center;align-items:center}
.cta .fine{color:#9FB9D1;font-size:.88rem;margin:1rem 0 0}

/* ---------- footer ---------- */
footer.site{flex:none;background:var(--paper);border-top:1px solid var(--rule);
  padding:2.2rem 0 1.4rem;margin-top:2rem}
footer.site .help{background:var(--field);border:1px solid var(--rule);border-radius:14px;
  padding:1.15rem 1.2rem;margin:0 auto 1.9rem;text-align:center;max-width:620px}
footer.site .help b{display:block;color:var(--ink);font-size:1.08rem;margin-bottom:1rem}
footer.site .help small{display:block;margin-top:.8rem;color:var(--muted);font-size:.88rem;line-height:1.45}
.helpacts{display:flex;flex-direction:column;gap:.55rem}
.helpacts .btn{width:100%}
@media(min-width:520px){
  .helpacts{flex-direction:row;justify-content:center}
  .helpacts .btn{width:auto;min-width:200px}
}
footer.site .cols{display:grid;gap:1.5rem;margin-bottom:1.6rem}
@media(min-width:620px){footer.site .cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){footer.site .cols{grid-template-columns:repeat(4,1fr)}}
footer.site h4{margin:0 0 .5rem;font-size:.8rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--navy-t)}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:0}
/* A footer link is a tap target like any other. At .4rem of padding these
   came out around 38 pixels tall, which is under every guideline and well
   under what somebody with a tremor can hit. On a phone they are spaced to
   be hit; on a desktop, where the pointer is precise, they tighten up. */
footer.site .cols a{display:flex;align-items:center;min-height:46px;padding:.45rem 0;
  color:var(--body);text-decoration:none;font-size:.96rem}
@media(min-width:900px){footer.site .cols a{min-height:0;padding:.38rem 0;font-size:.94rem}}
footer.site .cols a:hover{color:var(--navy)}
footer.site .fine{color:var(--muted);font-size:.84rem;line-height:1.55;margin:0 0 .8rem;max-width:80ch}
footer.site .legal{display:flex;flex-wrap:wrap;gap:0 1.3rem;padding:.7rem 0 1rem;
  border-top:1px solid var(--rule);margin-bottom:.9rem}
footer.site .legal a{display:inline-flex;align-items:center;min-height:46px;
  color:var(--navy);font-size:.92rem;font-weight:600;padding:.3rem 0}
@media(min-width:900px){footer.site .legal a{min-height:0;padding:.35rem 0}}

/* ---------- announcement bar ---------- */
.annbar{background:var(--navy-t)}
.annbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;
  color:#fff;text-decoration:none;padding:.6rem 1rem;text-align:center;
  min-height:46px;font-weight:600;font-size:.92rem;line-height:1.3}
.annbar .go{display:inline-flex;align-items:center;gap:.25rem;color:var(--amber);
  font-weight:800;white-space:nowrap}
/* The second half of the line is the first thing to go on a narrow screen.
   A bar that wraps to two lines pushes its own call to action out of place. */
@media(max-width:520px){.annbar .also{display:none}}
.annbar svg{flex:none}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.88rem;color:var(--muted);padding:.4rem 0 0;display:flex;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;padding:0}
.crumb span{padding:0 .3rem}

/* ---------- print ---------- */
@media print{
  header.site,footer.site .help,footer.site .cols,.annbar,.cta,.acts,.skip{display:none}
  body{background:#fff}
  section{padding:1rem 0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}

/* ---------- the proof strip ---------- */
/* The proof strip.
 *
 * The first version was four large numbers on navy, which read as a
 * dashboard: a thing a company shows itself. These are four short statements
 * on paper, separated by rules, which is how a reassurance reads. */
.proof{background:var(--paper);border-bottom:1px solid var(--rule);padding:0}
.proof ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}
@media(min-width:760px){.proof ul{grid-template-columns:repeat(4,1fr)}}
.proof li{margin:0;padding:1rem .8rem;text-align:center;border-bottom:1px solid var(--rule-s)}
.proof li:nth-child(odd){border-right:1px solid var(--rule-s)}
@media(min-width:760px){
  .proof li{border-bottom:0;border-right:1px solid var(--rule-s);padding:1.15rem 1rem}
  .proof li:last-child{border-right:0}
}
.proof li:nth-last-child(-n+2){border-bottom:0}
.proof .k{display:block;color:var(--navy-t);font-size:1rem;font-weight:800;line-height:1.25}
.proof .v{display:block;color:var(--muted);font-size:.85rem;line-height:1.35;margin-top:.1rem}

/* ---------- ask an assistant ---------- */
.askrow{display:flex;flex-direction:column;gap:.55rem;margin:1.1rem 0 0}
@media(min-width:560px){.askrow{flex-direction:row;justify-content:center}
  .askrow .btn{min-width:0;flex:0 1 190px}}

/* ---------- a review with a photograph ---------- */
.rev .shot{border-radius:10px;overflow:hidden;margin:0 0 .9rem;border:1px solid var(--rule)}
.rev .shot img{display:block;width:100%}
.rev .cond{display:inline-block;background:var(--field);border:1px solid var(--rule);
  border-radius:99px;padding:.22rem .66rem;font-size:.8rem;font-weight:700;
  color:var(--navy-t);margin:0 0 .6rem}

/* ---------- the sticky action bar, phones only ----------
   A page read on a phone is a long scroll, and the single biggest reason a
   person does not act is that the button is somewhere they have already
   passed. This keeps it one tap away without covering the text: it sits
   below the content, not over it, until the page is scrolled.
   Hidden on tablet and desktop, where the header button is always visible. */
/* Fixed rather than sticky. Sticky inside a flex column pins to the bottom of
   its own box rather than the viewport, which on a long page means it appears
   only at the very end, where it is useless. */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:35;transition:transform .2s ease;
  background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(8px);
  border-top:1px solid var(--rule);
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom,0px))}
/* Room for it, so the last line of the footer is never underneath. */
@media(max-width:759px){footer.site{padding-bottom:96px}}
.stickybar .inner{display:flex;gap:.55rem;max-width:var(--maxw);margin:0 auto}
.stickybar .btn{flex:1;min-height:52px;font-size:1rem;padding:.8rem 1rem}
.stickybar .callbtn{flex:none;width:52px;min-height:52px;border-radius:12px;
  border:1.5px solid var(--rule);background:var(--paper);color:var(--navy);
  display:flex;align-items:center;justify-content:center}
.stickybar.off{transform:translateY(110%)}
@media(min-width:760px){.stickybar{display:none}}
@media print{.stickybar{display:none}}

/* ---------- a step that is already done ---------- */
.done{display:inline-flex;align-items:center;gap:.4rem;color:var(--ok);
  font-size:.88rem;font-weight:700}

/* ---------- what to have ready ----------
   The single largest cause of an abandoned form is somebody reaching the
   question they cannot answer without getting up. Telling them beforehand
   costs one section and saves the drop-off. */
.ready{display:grid;gap:.75rem;margin:1.5rem 0 0;padding:0;list-style:none;counter-reset:rd}
@media(min-width:700px){.ready{grid-template-columns:1fr 1fr}}
.ready li{counter-increment:rd;margin:0;background:var(--paper);border:1px solid var(--rule);
  border-radius:12px;padding:1rem 1.1rem 1rem 3.1rem;position:relative}
.ready li::before{content:"";position:absolute;left:1rem;top:1.12rem;width:20px;height:20px;
  border-radius:50%;background:var(--ok-s);border:1.5px solid #B8DCC6}
.ready li::after{content:"";position:absolute;left:1.36rem;top:1.44rem;width:9px;height:5px;
  border-left:2.2px solid var(--ok);border-bottom:2.2px solid var(--ok);transform:rotate(-45deg)}
.ready b{display:block;color:var(--ink);font-size:1rem;margin-bottom:.1rem}
.ready span{color:var(--muted);font-size:.93rem;line-height:1.5;display:block}

/* ---------- the telephone alternative ----------
   For this audience the phone is not a fallback, it is a first choice for a
   large minority, and saying so removes the fear that the website is the
   only way in. */
.phonebox{background:var(--paper);border:2px solid var(--rule);border-radius:16px;
  padding:1.5rem 1.3rem;text-align:center;box-shadow:var(--shadow)}
@media(min-width:760px){.phonebox{padding:2rem}}
.phonebox .num{display:block;font-size:1.8rem;font-weight:800;color:var(--navy);
  letter-spacing:-.02em;margin:.5rem 0 .2rem;text-decoration:none}
@media(min-width:760px){.phonebox .num{font-size:2.1rem}}
.phonebox .hrs{color:var(--muted);font-size:.95rem}
.phonebox .btn{margin-top:1.1rem}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:1.4rem 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:var(--rule)}
.tl li{position:relative;padding:0 0 1.3rem 2.6rem;margin:0}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:4px;top:.42rem;width:16px;height:16px;
  border-radius:50%;background:var(--navy);border:3px solid var(--off)}
.tl b{display:block;color:var(--ink)}
.tl span{color:var(--muted);font-size:.93rem}

/* ---------- sorting the reviews ----------
   Pills, in the same shape as the trust pills in the hero, so the control
   looks like it belongs to this site rather than to the browser. */
.sortbar{display:flex;align-items:center;gap:.7rem;margin:0 0 1.2rem;flex-wrap:wrap}
.sortbar .count{font-weight:800;color:var(--navy-t);font-size:1rem;margin-right:auto}
.sortpills{display:flex;gap:.45rem;flex-wrap:wrap}
.sortpills button{min-height:48px;padding:.6rem 1.15rem;border-radius:99px;
  border:1.5px solid var(--rule);background:var(--paper);color:var(--body);
  font-size:.95rem;font-weight:700;font-family:inherit;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease}
.sortpills button:hover{border-color:#BBCBDA;background:#FCFDFE}
.sortpills button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media(max-width:520px){
  .sortbar .count{flex:1 0 100%;margin:0 0 .1rem}
  .sortpills{width:100%}
  .sortpills button{flex:1;padding:.6rem .7rem}
}

/* ---------- the rating summary ---------- */
.ratesum{gap:1.1rem}
.ratesum .big{line-height:.95}

/* ===== the state page and brand homepage (src/florida.js) ===== */
.fx-hero .grid{align-items:center}
.fx-hero h1{max-width:none;font-size:1.8rem;line-height:1.12;text-wrap:wrap}
@media(min-width:640px){.fx-hero h1{font-size:2.4rem}}
@media(min-width:1000px){.fx-hero h1{font-size:2.7rem}.fx-hero .grid{grid-template-columns:1.2fr 1fr;gap:3rem}}
.fx-hero .nw{white-space:nowrap}
.fx-hero .shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;box-shadow:0 18px 40px -24px rgba(14,39,64,.55)}
.fx-trust{display:flex;align-items:center;gap:12px;max-width:560px;margin:1rem 0;padding:10px 12px;border:1px solid var(--rule,#D9E2EA);border-radius:14px;background:#fff;text-decoration:none;color:inherit}
.fx-trust .s{color:#B8791B;font-size:22px;letter-spacing:.06em;line-height:1}
.fx-trust b{display:block;color:var(--ink,#0E2740);font-size:16px}
.fx-trust .r{display:block;color:var(--navy,#1F4E79);font-weight:800;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.fx-note{margin-top:.6rem}
.fx-hero .acts{margin-top:0}
p,li{text-wrap:pretty}h1,h2,h3{text-wrap:balance}
/* Anchor targets stop below the sticky header instead of under it. */
[id]{scroll-margin-top:96px}
section .wrap>h2{margin-bottom:.5rem}section .wrap>.sub{margin:0 0 1.5rem;max-width:62ch}section .wrap>h2+*:not(.sub){margin-top:1.5rem}
.fx-ways{display:grid;gap:12px;margin:0 0 1.6rem}
@media(min-width:640px){.fx-ways{grid-template-columns:1fr 1fr}}
.fx-way{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;height:100%;padding:14px 16px 14px 46px;border:1.5px solid #D9E2EA;border-radius:14px;background:#fff;font:inherit;color:#31465B;cursor:pointer;position:relative}
.fx-way::before{content:"";position:absolute;left:16px;top:17px;width:18px;height:18px;border-radius:50%;border:2px solid #9FB1C3;background:#fff;box-sizing:border-box}
.fx-way.on{border-color:#1F4E79;background:#F2F6FB;box-shadow:inset 0 0 0 1px #1F4E79}
.fx-way.on::before{border-color:#1F4E79;background:#1F4E79;box-shadow:inset 0 0 0 4px #fff}
.fx-way b{display:block;font-size:18px;color:#0E2740;margin:0 0 2px}.fx-way span{display:block;font-size:15px;line-height:1.45}.fx-way em{display:block;margin-top:auto;padding-top:8px;font-style:normal;font-weight:800;font-size:14px;color:#1B6B45}
.fx-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}.fx-steps.hidden{display:none}
.fx-steps li{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;background:#fff;border:1px solid #D9E2EA;border-radius:14px;padding:20px;position:relative}
.fx-steps li.here{border:2px solid #E8A33D;background:#FFFCF6;padding:19px}
.fx-steps .n{width:40px;height:40px;border-radius:50%;background:#1F4E79;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;grid-row:1 / span 3}
.fx-steps .b{grid-column:2;max-width:68ch}.fx-steps .k{display:inline-block;background:#E8A33D;color:#0E2740;font-size:12.5px;font-weight:800;border-radius:99px;padding:3px 10px;margin:0 0 8px}
.fx-steps .t{display:block;font-size:13.5px;font-weight:800;color:#1B6B45;margin:0 0 4px}.fx-steps h3{margin:0 0 6px;font-size:19px}.fx-steps p{margin:0}
.fx-steps .a{grid-column:2;margin:16px 0 0}.fx-steps .a .btn{width:100%}
.fx-steps .c{grid-column:2;margin:12px 0 0;font-size:15px;color:#5D7288}.fx-steps .c a{color:#1F4E79;font-weight:700}
@media(min-width:760px){.fx-steps li{grid-template-columns:44px 1fr auto}.fx-steps li.here .a{grid-column:3;grid-row:1 / span 2;align-self:center;margin:0 0 0 24px}.fx-steps .a .btn{width:auto;min-width:0;padding:0 28px}.fx-steps .c{grid-row:2;margin:8px 0 0}}
.fx-2,.fx-3,.fx-4{display:grid;gap:16px;margin:0 0 16px}
@media(min-width:640px){.fx-2{grid-template-columns:1fr 1fr}.fx-3{grid-template-columns:repeat(3,1fr)}.fx-4{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.fx-4{grid-template-columns:repeat(4,1fr)}}
.fx-card{display:block;background:#fff;border:1px solid #D9E2EA;border-radius:14px;padding:20px;color:#31465B;text-decoration:none}
.fx-card.soft{background:#F7FAFD}.fx-card h3{margin:0 0 6px;font-size:18px;color:#0E2740}.fx-card p{margin:0;font-size:15.5px;line-height:1.55}.fx-card ul{margin:0;padding-left:20px;font-size:15.5px;line-height:1.6}.fx-card>b{display:block;color:#0E2740;font-size:16px;margin:0 0 6px}
.fx-card.q span{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;color:#1F4E79;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.fx-card.rv{display:flex;flex-direction:column}.fx-card.rv .s{color:#B8791B;letter-spacing:.1em}.fx-card.rv p{margin:8px 0 0}.fx-card.rv b{margin-top:auto;padding-top:12px;font-size:13.5px;color:#5D7288}
.fx-k{display:inline-block;font-size:12.5px;font-weight:800;color:#1F4E79;background:#EEF4FA;border-radius:99px;padding:3px 10px;margin:0 0 8px}
.fx-n{display:inline-flex;width:30px;height:30px;border-radius:50%;background:#1B6B45;color:#fff;font-weight:800;align-items:center;justify-content:center;margin:0 0 10px}
.fx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:24px 0 0}.fx-cta .btn{max-width:320px}.fx-cta span,.fx-cta .fx-link{font-size:15px;color:#5D7288}.fx-cta .fx-link{color:#1F4E79;font-weight:800;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
@media(max-width:639px){.fx-cta{flex-direction:column;align-items:stretch}.fx-cta .btn{max-width:none;width:100%}.fx-cta span,.fx-cta .fx-link{align-self:center;text-align:center}}
.fx-get{display:grid;gap:22px;align-items:center}.fx-get img{justify-self:center;filter:drop-shadow(0 10px 20px rgba(14,39,64,.15))}
.fx-get ul{list-style:none;margin:0;padding:0}.fx-get li{display:flex;gap:10px;padding:10px 0;border-top:1px solid #EDF1F5;font-size:16px;line-height:1.5}.fx-get li svg{flex:none;color:#1B6B45;margin-top:5px}
@media(min-width:640px){.fx-get{grid-template-columns:220px 1fr;gap:32px}}
.fx-county{margin:16px 0 0;padding:14px 16px;border-radius:12px;background:#FEF7EB;font-size:15.5px;line-height:1.55}
.fx-path{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.fx-path li{background:#fff;border:1px solid #D9E2EA;border-radius:14px;padding:16px;text-align:center}
.fx-path li.end{border-color:#E8A33D;background:#FFFCF6}.fx-path img{display:block;width:120px;height:77px;object-fit:cover;border-radius:10px;margin:0 auto 10px}
.fx-path b{display:block;color:#0E2740;font-size:15.5px}.fx-path small{display:block;color:#5D7288;font-size:13.5px}
@media(min-width:640px){.fx-path{grid-template-columns:repeat(3,1fr)}}
.fx-rvhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px}
.fx-score{display:flex;align-items:center;gap:14px}.fx-score .big{font-size:44px;font-weight:800;color:#0E2740;line-height:1}.fx-score .s{display:block;color:#B8791B;letter-spacing:.12em;font-size:18px}.fx-score small{display:block;font-size:14.5px;color:#5D7288;font-weight:700}
.fx-price{max-width:560px;background:#fff;border:1px solid #D9E2EA;border-radius:16px;padding:22px}
.fx-price .big{font-size:44px;font-weight:800;color:#0E2740;text-align:center}.fx-price .per{text-align:center;font-weight:800;color:#1F4E79;margin:0 0 12px}
.fx-price ul{list-style:none;margin:0;padding:0}.fx-price li{display:flex;gap:10px;padding:8px 0;border-top:1px solid #EDF1F5;font-size:15.5px;line-height:1.5}.fx-price li svg{flex:none;color:#1B6B45;margin-top:5px}
.fx-sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid #D9E2EA;box-shadow:0 -10px 24px -16px rgba(14,39,64,.45)}
.fx-sticky .btn{flex:1;margin:0}.fx-sticky small{color:#5D7288;font-weight:700;white-space:nowrap}
@media(max-width:639px){.fx-sticky.show{display:flex}}
/* phones: the headline fits its column, the lead stays short, the trust line stays compact */
.fx-hero h1{font-size:1.5rem}
@media(min-width:640px){.fx-hero h1{font-size:2.15rem}}
@media(min-width:1000px){.fx-hero h1{font-size:2.5rem}}
.fx-hero .lede{font-size:1rem;line-height:1.5;margin:.6rem 0 0}
.fx-trust{padding:8px 12px;margin:.8rem 0}.fx-trust .s{font-size:18px}.fx-trust b{font-size:15px}.fx-trust .r{font-size:13.5px}
@media(max-width:639px){.fx-hero{padding-top:1.2rem}}
/* what a placard gives back */
.fx-gives{display:grid;gap:20px;align-items:center}
.fx-gives-pic{margin:0}.fx-gives-pic img{display:block;width:100%;max-width:420px;height:auto;border-radius:18px;box-shadow:0 18px 40px -24px rgba(14,39,64,.55);margin:0 auto}
@media(min-width:900px){.fx-gives{grid-template-columns:1fr 1.6fr;gap:40px}.fx-gives .fx-3{grid-template-columns:1fr;gap:12px}}
/* ===== the brand homepage (src/florida.js, brand branch) ===== */
/* The state picker: one big tile per open state, two across on a phone wide
   enough, so a reader finds their state without scrolling to the footer. */
.fx-states{display:grid;gap:12px;margin:0 0 14px}
@media(min-width:480px){.fx-states{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.fx-states{grid-template-columns:repeat(3,1fr)}}
.fx-state{display:flex;flex-direction:column;justify-content:center;min-height:76px;padding:16px 18px;border:1.5px solid #D9E2EA;border-radius:14px;background:#fff;color:#31465B;text-decoration:none;transition:border-color .14s ease,background .14s ease}
.fx-state b{font-size:1.15rem;color:#0E2740;line-height:1.2}.fx-state span{font-size:15px;color:#5D7288;margin-top:3px}
.fx-state:hover{border-color:#1F4E79;background:#F7FAFD}
.fx-state:focus-visible{outline:3px solid #E8A33D;outline-offset:2px}
.fx-soon{margin:0 0 8px}.fx-soon a{color:#1F4E79;font-weight:700}
/* The price, once, under the hero button: a fact, not a headline. */
.fx-pricenote{margin:.9rem 0 0;padding:12px 14px;border-radius:12px;background:#FEF7EB;color:#31465B;font-size:1rem;line-height:1.5;max-width:560px}
.fx-pricenote b{color:#0E2740;font-size:1.05rem}
.fx-get.noimg{grid-template-columns:1fr}
.fx-compare{min-width:560px}.fx-compare td:first-child{font-weight:700;color:#0E2740}

/* =====================================================================
   Website 3.0 (Oct 28, 2026): the visual system from the CRO spec.
   Tokens first, then the band rhythm, then the components the homepage and
   the advertising landing pages are assembled from. Older pages keep their
   classes; these add to them rather than replace them.
   ===================================================================== */
:root{
  --sand:#F8F4EC; --slate:#F2F5F8; --mint:#E7F3EE; --navy9:#0E2A3F; --navy95:#0A1F30; --navy7:#1D4466;
  --ink:#0F1E2B; --ink-muted:#46566A; --muted:#46566A; --line:#DCE3EA; --star:#C98A1B; --mint6:#2E7A64; --link:#1D5080;
  --on-dark:#fff; --on-dark-muted:#C5D3E0;
  --amber-50:#FDF3E2; --amber-600:#D08A22;
  --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px; --sp-9:64px;
  --radius-card:20px; --radius-btn:14px;
  --shadow-1:0 1px 2px rgba(15,30,43,.06),0 8px 24px rgba(15,30,43,.06);
}
body{color:var(--ink)}
a{color:var(--link);text-decoration:underline;text-underline-offset:.18em}
.sub,.dsub,.micro{color:var(--ink-muted)}
h1,h2,h3{color:var(--ink);text-wrap:balance}
.btn{border-radius:var(--radius-btn);font-weight:700}
.btn.go{color:var(--ink);box-shadow:0 2px 0 var(--amber-600)}
.btn.go:hover{background:var(--amber-600);color:var(--ink)}
.btn.ghost{background:#fff;color:var(--navy7);border:2px solid var(--navy7)}
.btn.ghost:hover{background:var(--navy7);color:#fff;border-color:var(--navy7)}
@media(max-width:599px){.btn.lg,.btn.go.lg,.acts .btn{width:100%}}
/* ---- band rhythm: two neighbours never share a background ---- */
.band{padding:var(--sp-9) 0}
@media(min-width:600px){.band{padding:88px 0}}
@media(min-width:960px){.band{padding:112px 0}}
.band.slim{padding:24px 0}
@media(min-width:600px){.band.slim{padding:28px 0}}
@media(min-width:960px){.band.slim{padding:32px 0}}
.band.sand{background:var(--sand)}
.band.white{background:#fff}
.band.slate{background:var(--slate)}
.band.mint{background:var(--mint)}
.band.navy{background:var(--navy9);color:var(--on-dark)}
.band.navy h2,.band.navy h3{color:#fff}
.band.navy .lede,.band.navy .micro,.band.navy p{color:var(--on-dark-muted)}
.band.navy a{color:#fff}
.band .wrap>.eyebrow{margin-bottom:12px}
.band .wrap>h2{margin-bottom:16px;font-size:28px;line-height:1.15}
@media(min-width:960px){.band .wrap>h2{font-size:40px}}
.band .wrap>.lede{max-width:38rem;margin:0 0 var(--sp-6);font-size:20px;line-height:1.5;text-wrap:pretty}
@media(min-width:960px){.band .wrap>.lede{margin-bottom:var(--sp-8);font-size:22px}}
.band .wrap.center{text-align:center}
.band .wrap.center .lede{margin-left:auto;margin-right:auto}
.eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy7)}
.band.navy .eyebrow{color:var(--on-dark-muted)}
.sectcta{margin-top:var(--sp-6)}
@media(min-width:960px){.sectcta{margin-top:var(--sp-8)}}
.sectcta .micro{margin:12px 0 0;font-size:16px}
.micro{font-size:16px;font-weight:500;color:var(--ink-muted);margin:12px 0 0}
.micro sup a,.fn a{text-decoration:none;padding:0 4px;font-weight:700}
/* ---- hero 3.0 ---- */
.hero3{padding:32px 0 48px}
@media(min-width:600px){.hero3{padding:56px 0 72px}}
@media(min-width:960px){.hero3{padding:96px 0 112px}}
.hero3 .grid{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.hero3 .grid{grid-template-columns:1fr 1fr;gap:64px}}
.hero3 .text{max-width:34rem}
.hero3 h1{font-size:clamp(36px,5.2vw + 16px,56px);line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:12px 0 16px}
.hero3 .lede{font-size:20px;line-height:1.5;margin:0 0 32px;text-wrap:pretty}
@media(min-width:960px){.hero3 .lede{font-size:22px}}
.hero3 .acts{margin:0}
.hero3 .statelink{display:inline-block;margin:16px 0 0;font-size:18px;font-weight:600}
.hero3 .micro{margin-top:12px}
.hero3 .rating{display:flex;align-items:center;gap:8px;margin:20px 0 0;font-size:16px;color:var(--ink-muted);text-decoration:none}
.hero3 .rating .s{color:var(--star);letter-spacing:.08em;font-size:18px}
.hero3 .rating u{color:var(--link)}
.hero3 .fnline{margin:16px 0 0;font-size:15px;color:var(--ink-muted)}
.hero3 .shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-card)}
@media(min-width:960px){.hero3 .shot img{aspect-ratio:4/5}}
/* ---- proof strip ---- */
.proofstrip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
.proofstrip li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#fff}
.proofstrip li svg{color:var(--on-dark-muted)}
.proofstrip li a{color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px}
@media(min-width:960px){.proofstrip li a{flex-direction:row}}
.proofstrip li.d4{display:none}
@media(min-width:960px){.proofstrip ul{grid-template-columns:repeat(4,1fr)}.proofstrip li{flex-direction:row;justify-content:center}.proofstrip li.d4{display:flex}.proofstrip li+li{border-left:1px solid rgba(255,255,255,.18)}}
/* ---- the three-step journey ---- */
.journey{list-style:none;margin:0;padding:0;display:grid;gap:24px;position:relative}
@media(min-width:960px){.journey{grid-template-columns:repeat(3,1fr);gap:24px}}
.jstep{position:relative;padding:0 0 0 56px}
@media(min-width:960px){.jstep{padding:0}}
.jstep .disc{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--amber-50);border:2px solid var(--amber);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink)}
@media(min-width:960px){.jstep .disc{position:static;margin:0 0 16px}}
.jstep:not(:last-child)::before{content:"";position:absolute;left:19px;top:44px;bottom:-20px;border-left:2px solid var(--line)}
@media(min-width:960px){.jstep::before{display:none}}
.jstep .lab{display:block;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.jstep h3{font-size:22px;margin:4px 0 8px;line-height:1.25}
@media(min-width:960px){.jstep h3{font-size:24px}}
.jstep p{margin:0;font-size:18px;line-height:1.55}
.jstep .meta{display:inline-block;margin:10px 0 0;padding:4px 12px;border-radius:999px;background:var(--slate);font-size:15px;font-weight:600;color:var(--ink-muted)}
.band.slate .jstep .meta{background:#fff}
/* ---- soft exit and the form fork ---- */
.softexit{margin:var(--sp-6) 0 0;padding-top:var(--sp-5);border-top:1px solid var(--line);font-size:16px;color:var(--ink-muted)}
.softexit a{font-weight:600}
.formfork{margin:var(--sp-6) 0 0;padding-top:var(--sp-6);border-top:1px solid var(--line)}
.formfork .lab{display:block;font-size:16px;color:var(--ink-muted);margin:0 0 12px}
.formfork .rows{display:grid;gap:12px}
@media(min-width:600px){.formfork .rows{grid-template-columns:1fr 1fr}}
.formfork .rows a{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-btn);font-size:16px;font-weight:600;color:var(--ink);text-decoration:none}
.formfork .rows a:hover{border-color:var(--navy7)}
/* ---- what you get, tiles, caregiver, teaser, reviews, price, faq ---- */
.wyg{display:grid;gap:24px;align-items:center}
@media(min-width:960px){.wyg{grid-template-columns:1fr 1fr;gap:48px}}
.wyg img{display:block;width:100%;height:auto;border-radius:var(--radius-card)}
.iconlist{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.iconlist li{display:flex;gap:14px;align-items:flex-start;font-size:18px;line-height:1.5}
.iconlist li svg{flex:none;color:var(--navy7);margin-top:2px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:960px){.tiles{grid-template-columns:repeat(4,1fr);gap:24px}}
.tile{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:120px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);color:var(--ink);text-decoration:none;font-weight:700;font-size:18px}
.tile svg{color:var(--navy7)}
.tile:hover{border-color:var(--navy7)}
.band.slate .tile,.band.sand .tile,.band.mint .tile{border:0;box-shadow:var(--shadow-1)}
.care{display:grid;gap:24px;align-items:center}
@media(min-width:960px){.care{grid-template-columns:1.1fr .9fr;gap:48px}}
.care img{display:block;width:100%;height:auto;border-radius:var(--radius-card)}
.care .acts{margin-top:var(--sp-5)}
.care .guide{display:inline-block;margin-top:12px;font-weight:600}
.teaser{text-align:center}
.avatars{display:flex;justify-content:center;margin:0 0 12px}
.avatars img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--shadow-1)}
.avatars img+img{margin-left:-16px}
.teaser .names{font-weight:600;color:var(--ink-muted);margin:0 0 12px}
.rstory .summary{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-muted);margin:0 0 24px}
.rstory .summary .s{color:var(--star);letter-spacing:.08em;font-size:18px}
.rstory .origin{margin:-12px 0 24px;font-size:16px;color:var(--ink-muted)}
.rstory blockquote{margin:0;padding:0;font-size:22px;line-height:1.45;color:var(--ink);text-wrap:pretty}
@media(min-width:960px){.rstory blockquote{font-size:24px}}
.rstory .featured{background:#fff;border-radius:var(--radius-card);padding:24px;box-shadow:var(--shadow-1);margin:0 0 16px}
@media(min-width:960px){.rstory .featured{padding:32px}}
.rstory cite{display:block;margin-top:12px;font-style:normal;font-size:16px;color:var(--ink-muted)}
.rstory .more{display:grid;gap:16px}
@media(min-width:960px){.rstory .more{grid-template-columns:1fr 1fr;gap:24px}}
.rstory .more div{background:#fff;border-radius:var(--radius-card);padding:20px 24px;box-shadow:var(--shadow-1)}
.rstory .more p{margin:0;font-size:18px}
.rstory .all{display:inline-block;margin-top:var(--sp-5);font-weight:600}
.priceband{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:24px;text-align:center}
@media(min-width:960px){.priceband{padding:40px}}
.priceband .big{font-size:48px;font-weight:700;line-height:1;color:var(--ink)}
.priceband .for{margin:8px 0 20px;font-size:18px;color:var(--ink-muted)}
.priceband ul{list-style:none;margin:0 auto 24px;padding:0;display:grid;gap:10px;text-align:left;max-width:22rem}
.priceband li{display:flex;gap:10px;align-items:flex-start;font-size:18px}
.priceband li svg{flex:none;color:var(--mint6);margin-top:3px}
.priceband .micro{margin-top:12px}
.band.slate .priceband,.band.sand .priceband{border:0;box-shadow:var(--shadow-1)}
.faq3 details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-btn);margin:0 0 12px}
.band.slate .faq3 details,.band.sand .faq3 details{border:0;box-shadow:var(--shadow-1)}
.faq3 summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:16px 20px;cursor:pointer;font-size:18px;font-weight:600;color:var(--ink);list-style:none}
.faq3 summary::-webkit-details-marker{display:none}
.faq3 summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--navy7);border-bottom:2px solid var(--navy7);transform:rotate(45deg);transition:transform .15s}
.faq3 details[open] summary::after{transform:rotate(-135deg)}
.faq3 .a{padding:0 20px 18px;font-size:18px;line-height:1.55}
.faq3 .a p{margin:0 0 .6rem}
.faq3 .more{display:inline-block;margin-top:8px;font-weight:600}
/* ---- trust facts, objection, who qualifies, doctor cards ---- */
.facts{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:960px){.facts{grid-template-columns:repeat(3,1fr);gap:24px}}
.facts li{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:var(--radius-card);padding:20px 24px;font-size:18px;box-shadow:var(--shadow-1)}
.facts li svg{flex:none;color:var(--mint6);margin-top:2px}
.objection{max-width:38rem}
.objection h2{font-style:italic}
.whoq ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px;max-width:38rem}
.whoq li{display:flex;gap:12px;align-items:flex-start;font-size:18px}
.whoq li svg{flex:none;color:var(--mint6);margin-top:3px}
.whoq .va{font-size:16px;color:var(--ink-muted);margin:16px 0 0}
.doccards{display:grid;gap:16px}
@media(min-width:960px){.doccards{grid-template-columns:1fr 1fr;gap:24px}}
.doccard{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:var(--radius-card);padding:20px;box-shadow:var(--shadow-1)}
.band.white .doccard{border:1px solid var(--line);box-shadow:none}
.doccard img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}
.doccard b{display:block;font-size:20px;color:var(--ink)}
.doccard .cred{display:block;color:var(--ink-muted);font-size:16px;margin:2px 0 8px}
.doccard .lic{display:block;font-size:16px;color:var(--ink)}
.mini{max-width:38rem}
.learn{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0 0 var(--sp-5);font-weight:600}
/* ---- the LP header: logo, phone, button; no nav ---- */
header.site.lp nav.main,header.site.lp .menubtn{display:none}
header.site.lp .cta-sm{display:inline-flex}
@media(max-width:519px){header.site.lp .cta-sm{display:none}}
header.site .tel span{font-size:1rem}
/* ---- final band ---- */
.band.final .phone{margin:24px 0 0;font-size:18px;color:#fff}
.band.final .phone a{color:#fff;font-weight:700}
.band.final .phone span{font-size:16px;color:var(--on-dark-muted)}
.band.final h2{font-size:32px}
@media(min-width:960px){.band.final h2{font-size:40px}}
/* ---- footer on navy, footnotes on top ---- */
footer.site{background:var(--navy95);color:var(--on-dark-muted)}
footer.site h4{color:#fff}
footer.site a{color:#fff}
footer.site .fine{color:var(--on-dark-muted);font-size:15px}
.footnotes{max-width:38rem;margin:0 0 var(--sp-6);padding:0 0 var(--sp-5);border-bottom:1px solid rgba(255,255,255,.14)}
.footnotes p{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--on-dark-muted)}
.footnotes sup{font-weight:700;color:#fff;margin-right:4px}
/* ---- the state sheet ---- */
.statesheet{border:0;padding:0;background:transparent;max-width:none;width:100%;margin:auto 0 0;max-height:none}
.statesheet::backdrop{background:rgba(10,31,48,.45)}
.statesheet .sheet{background:#fff;border-radius:20px 20px 0 0;padding:16px 20px calc(16px + env(safe-area-inset-bottom));max-height:70vh;overflow:auto;width:100%;max-width:100vw}
@media(min-width:960px){.statesheet{margin:auto;width:360px}.statesheet .sheet{border-radius:20px;max-height:80vh}}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.sheet-top h2{font-size:22px;margin:0}
.sheet-x{width:48px;height:48px;border:0;background:var(--slate);border-radius:50%;font-size:26px;line-height:1;cursor:pointer;color:var(--ink)}
.sheet-rows{list-style:none;margin:0;padding:0}
.sheet-rows a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:12px 4px;border-top:1px solid var(--line);font-size:19px;font-weight:600;color:var(--ink);text-decoration:none}
.sheet-rows a span{color:var(--ink-muted);font-size:24px}
/* ---- sticky bar now hides from 960px, and anchors clear the header ---- */
@media(min-width:760px) and (max-width:959px){.stickybar{display:block}footer.site{padding-bottom:96px}}
@media(min-width:960px){.stickybar{display:none}}
[id]{scroll-margin-top:88px}
/* compare table as stacked rows on phones */
@media(max-width:599px){.cmp table,.cmp thead,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block}.cmp thead{display:none}.cmp tr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 12px}.cmp td{padding:4px 0;border:0}.cmp td[data-h]::before{content:attr(data-h) ": ";font-weight:600;color:var(--ink-muted)}.cmp td:first-child{font-weight:700;padding-bottom:8px}}

/* ---- 3.0 additions: compare table, state buttons, renewal rows, learn row ---- */
.cmp table{width:100%;border-collapse:collapse;font-size:16px;margin:0 0 12px}
.cmp th,.cmp td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp th{font-size:15px;color:var(--ink-muted);font-weight:600}
.cmp td:first-child{font-weight:700}
.cmp td:last-child{background:var(--mint);font-weight:600}
.statebtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:40rem;margin:0 auto}
@media(min-width:720px){.statebtns{grid-template-columns:repeat(3,1fr)}}
.statebtns .btn{min-height:56px;background:#fff;justify-content:center;text-align:center}
.statebtns .other{color:var(--ink-muted)}
.rulerows{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:40rem}
.rulerows a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);color:var(--ink);text-decoration:none;min-height:64px}
.rulerows a b{font-size:18px}
.rulerows a span:not(.chev){grid-column:1;font-size:16px;color:var(--ink-muted)}
.rulerows .chev{grid-row:1/3;grid-column:2;font-size:28px;color:var(--navy7)}
.rulerows a:hover{border-color:var(--navy7)}
.poa{margin-top:var(--sp-6);max-width:40rem}
.poa summary{cursor:pointer;font-weight:600;font-size:17px;padding:12px 0;list-style:none}
.poa summary::-webkit-details-marker{display:none}
.poa .a p{font-size:16px;color:var(--ink-muted)}
.learn{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 var(--sp-6);font-size:16px}
.learn a{color:var(--navy7);font-weight:600;text-decoration:none}
.learn a:hover{text-decoration:underline}
.band .faq3 details{margin:0}
.tile svg{color:var(--navy7)}
@media(max-width:599px){.crumb.lp{display:none}}
.statebtns .other{grid-column:1/-1}

/* ---- 3.0 fixes from the live review (Oct 28) ---- */
.band.navy.proofstrip li,.band.navy.proofstrip li a{color:#fff}
a[href^="#fn-"]{text-decoration:none;color:var(--ink-muted);border:0}
a[href^="#fn-"] sup{font-size:.7em;font-weight:600;padding-left:2px;line-height:0}
a[href^="#fn-"]:hover sup{color:var(--navy7)}
.tile{display:grid;grid-template-rows:32px 1fr;align-content:start;justify-content:start;gap:14px;min-height:128px}
.tile svg{width:32px;height:32px;color:var(--navy7)}
footer.site{margin-top:0;border-top:0;padding-top:var(--sp-8)}
footer.site .cols a{color:var(--on-dark-muted)}
footer.site .cols a:hover,footer.site .legal a:hover{color:#fff}
footer.site .legal a{color:var(--on-dark-muted)}
footer.site .legal{border-top:1px solid rgba(255,255,255,.1)}
.footnotes{border-bottom:0;padding-bottom:0;margin-bottom:40px}
.footnotes p{color:var(--on-dark-muted)}

/* ---- /our-doctors ---- */
.doccard .sees{margin:8px 0 0;font-size:16px;color:var(--ink-muted);line-height:1.5}
.lics table{max-width:46rem}
.lics td:last-child{background:none;font-weight:600}
.lics .sub{font-size:15px;color:var(--ink-muted);margin:12px 0 0}
.teaser .names{font-weight:700;margin:0 0 4px}
.teaser .sub{font-size:16px;color:var(--ink-muted);margin:0 0 8px}
@media(min-width:600px){.lics td.v a{white-space:nowrap}}