/* ============================================================================
   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}
@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)}
.rev{display:flex;flex-direction:column}
.rev .stars{color:var(--amber-d);font-size:1rem;letter-spacing:.14em;margin-bottom:.7rem}
.rev blockquote{margin:0 0 1.1rem;font-size:.99rem;line-height:1.65;flex:1 0 auto}
.rev cite{font-style:normal;font-weight:700;color:var(--ink);font-size:.95rem;display:block;
  padding-top:.85rem;border-top:1px solid var(--rule-s)}
.rev .when{color:var(--muted);font-size:.87rem;display:block;margin-top:.15rem}

/* ---------- 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;
  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}
@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 ---------- */
.sortbar{display:flex;align-items:center;gap:.7rem;margin:0 0 1.3rem;flex-wrap:wrap}
.sortbar label{font-weight:700;color:var(--navy-t);font-size:.95rem}
.sortbar select{min-height:50px;padding:.55rem 2.4rem .55rem .9rem;border-radius:11px;
  border:1.5px solid var(--rule);background:var(--paper);color:var(--navy-t);
  font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F4E79' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center}
.sortbar select:hover{border-color:#BBCBDA}

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