/* Self-hosted type. Generated by engine/fetch-fonts.js, do not edit by hand.
   Variable weight axes, latin subsets only, swap so text paints immediately. */

@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/karla-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Petrona';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/petrona-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Petrona';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/petrona-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* findabaproviders.com shared stylesheet
   Extracted verbatim from design-03.html (Warm Guide), the approved direction.
   design-03.html stays frozen as the signed-off homepage comp; this file is the
   production system every other page type is built from. Page-specific rules are
   appended in the PAGE TYPES section at the bottom.
*/
:root{
  --bg:        oklch(1 0 0);
  --surface:   oklch(0.974 0.004 300);
  --surface-2: oklch(0.948 0.008 300);
  --line:      oklch(0.898 0.008 300);
  --ink:       oklch(0.235 0.030 300);
  --muted:     oklch(0.470 0.026 300);
  --primary:   oklch(0.420 0.130 295);
  --primary-700:oklch(0.355 0.115 295);
  --primary-900:oklch(0.255 0.078 295);
  --primary-050:oklch(0.966 0.016 295);
  --primary-100:oklch(0.930 0.030 295);
  --amber:     oklch(0.545 0.125 62);   /* the one warm mark: featured, and nothing else */
  --amber-050: oklch(0.972 0.024 72);
  --amber-200: oklch(0.888 0.062 72);

  --voice:"Petrona",Georgia,"Times New Roman",serif;
  --ui:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r:10px; --r-lg:18px; --r-xl:24px;
  --shadow-soft:0 18px 40px -22px oklch(0.235 0.03 300/.35), 0 2px 8px oklch(0.235 0.03 300/.05);
  --shadow-card:0 2px 4px oklch(0.235 0.03 300/.05), 0 12px 30px -20px oklch(0.235 0.03 300/.30);
  --z-sticky:100; --z-skip:600;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.62 var(--ui); -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--primary); text-underline-offset:3px}
a:hover{color:var(--primary-700)}
:focus-visible{outline:3px solid oklch(0.56 0.16 295); outline-offset:3px; border-radius:4px}
h1,h2,h3{margin:0; font-family:var(--voice); font-weight:700; line-height:1.16; letter-spacing:-0.018em; text-wrap:balance}
h4{margin:0; font-family:var(--ui)}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:min(1180px, 100% - 2.5rem); margin-inline:auto}
.skip{position:absolute; left:1rem; top:-4rem; z-index:var(--z-skip); background:var(--primary-900); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r); font-weight:600; text-decoration:none; transition:top .2s var(--ease)}
.skip:focus{top:1rem; color:#fff}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.75rem 1.4rem; border-radius:100px; border:1.5px solid transparent;
  font:600 .98rem/1 var(--ui); text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn--solid{background:var(--primary-700); color:#fff}
.btn--solid:hover{background:var(--primary-900); color:#fff; transform:translateY(-1px)}
.btn--line{background:transparent; color:var(--primary-700); border-color:var(--primary-100)}
.btn--line:hover{border-color:var(--primary); background:var(--primary-050); color:var(--primary-700)}
.btn--lg{min-height:56px; padding:.9rem 1.75rem; font-size:1.04rem}

/* ---------- header ---------- */
.top{position:sticky; top:0; z-index:var(--z-sticky); background:oklch(1 0 0/.94); backdrop-filter:blur(12px) saturate(1.3); border-bottom:1px solid var(--line)}
.top__in{display:flex; align-items:center; gap:2rem; min-height:72px}
.brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--voice); font-weight:700; font-size:1.16rem; letter-spacing:-0.02em}
.brand svg{color:var(--primary); flex:none}
.top nav{display:flex; align-items:center; gap:1.7rem; margin-left:auto}
.top nav a{color:var(--ink); text-decoration:none; font-size:.96rem; font-weight:500}
.top nav a:hover{color:var(--primary)}

/* ---------- hero: let the photograph be the design ---------- */
.hero{position:relative}
.hero__img{position:relative; height:clamp(360px,52vw,560px); overflow:hidden; background:var(--surface-2)}
.hero__img img{width:100%; height:100%; object-fit:cover; object-position:64% 30%}
.hero__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, oklch(0.235 0.05 300/.86) 0%, oklch(0.235 0.05 300/.68) 42%, oklch(0.235 0.05 300/.22) 78%, transparent 100%);
}
.hero__say{position:absolute; inset:0; display:flex; align-items:center; z-index:1}
.hero__say .wrap{width:min(1180px, 100% - 2.5rem)}
.hero h1{color:#fff; font-size:clamp(2.1rem,4.6vw,3.7rem); max-width:16ch; letter-spacing:-0.026em; text-shadow:0 2px 24px oklch(0.2 0.03 300/.35)}
.hero .lede{margin-top:1rem; color:oklch(0.94 0.012 300); font-size:clamp(1.06rem,1.5vw,1.22rem); max-width:42ch; line-height:1.55}

/* search card overlapping the photo */
.finder{margin-top:-4.25rem; position:relative; z-index:2}
.finder__card{background:var(--bg); border-radius:var(--r-xl); box-shadow:var(--shadow-soft); padding:1.6rem 1.6rem 1.4rem; border:1px solid var(--line)}
.finder h2{font-size:1.22rem; margin-bottom:1.1rem}
.finder__row{display:grid; grid-template-columns:1.4fr 1fr 1.15fr auto; gap:.9rem; align-items:end}
.f{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.f label{font-family:var(--ui); font-size:.8rem; font-weight:700; color:var(--muted); letter-spacing:.01em}
.f input,.f select{
  width:100%; min-height:54px; padding:.8rem 1rem; border-radius:var(--r);
  border:1.5px solid var(--line); background:var(--bg); color:var(--ink);
  font:500 1rem var(--ui); appearance:none;
}
.f input::placeholder{color:var(--muted); opacity:1}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23514a60' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem}
.f input:focus,.f select:focus{border-color:var(--primary); outline:3px solid oklch(0.56 0.16 295/.25); outline-offset:0}
.finder__row .btn{min-height:54px}
.finder__note{margin-top:1rem; font-size:.9rem; color:var(--muted)}

.trust{margin-top:2.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem}
.trust li{display:flex; gap:.65rem; align-items:flex-start; font-size:.96rem; line-height:1.45}
.trust svg{flex:none; margin-top:.2rem; color:var(--primary)}
.trust b{display:block; font-weight:700}
.trust span{color:var(--muted); font-size:.9rem}

section{padding-block:clamp(3rem,6vw,5.5rem)}
.head{max-width:60ch}
.head h2{font-size:clamp(1.7rem,3.1vw,2.45rem)}
.head p{margin-top:.85rem; color:var(--muted); font-size:1.1rem}
.tint{background:var(--surface)}

/* ---------- featured ---------- */
.feat{
  display:grid; grid-template-columns:280px minmax(0,1fr); gap:0;
  border:2px solid var(--amber-200); border-radius:var(--r-lg); overflow:hidden; background:var(--amber-050);
}
.feat__img{position:relative; background:var(--surface-2)}
.feat__img img{width:100%; height:100%; object-fit:cover; min-height:240px}
.feat__b{padding:1.6rem 1.75rem 1.75rem}
.feat__tag{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--ui);
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:var(--amber); padding:.3rem .65rem; border-radius:100px;
}
.feat h3{margin-top:.85rem; font-size:1.6rem}
.feat .where{margin-top:.3rem; font-size:.96rem; color:var(--muted); font-weight:500}
.feat p.say{margin-top:.9rem; font-family:var(--voice); font-size:1.1rem; max-width:56ch}
.pills{margin-top:1rem; display:flex; flex-wrap:wrap; gap:.4rem}
.pill{font-family:var(--ui); font-size:.82rem; font-weight:600; padding:.3rem .7rem; border-radius:100px; background:var(--bg); border:1px solid var(--amber-200); color:var(--muted)}
.feat__acts{margin-top:1.35rem; display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}
.feat__note{margin-top:1.15rem; font-size:.86rem; line-height:1.55; color:var(--muted); max-width:70ch}

/* ---------- steps ---------- */
.steps{margin-top:2.75rem; display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem}
.steps li{position:relative; padding-left:3.4rem}
.steps .n{
  position:absolute; left:0; top:-.1rem; width:2.5rem; height:2.5rem; border-radius:50%;
  display:grid; place-items:center; background:var(--primary-050); color:var(--primary-700);
  font-family:var(--ui); font-weight:700; font-size:1rem; border:1.5px solid var(--primary-100);
}
.steps h3{font-size:1.24rem}
.steps p{margin-top:.5rem; color:var(--muted); font-size:1rem}

/* ---------- reassurance band with photo ---------- */
.calm{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,4.5rem); align-items:center}
.calm__img{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); background:var(--surface-2)}
.calm__img img{width:100%; aspect-ratio:4/3; object-fit:cover}
.calm h2{font-size:clamp(1.6rem,2.9vw,2.3rem)}
.calm ol{margin-top:1.5rem; display:grid; gap:1.15rem}
.calm ol li{display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start}
.calm ol svg{flex:none; margin-top:.3rem; color:var(--primary)}
.calm ol b{display:block; font-weight:700; font-size:1.03rem}
.calm ol span{color:var(--muted); font-size:.98rem}

/* ---------- payers ---------- */
.payers{margin-top:2.25rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.payers a{
  display:flex; flex-direction:column; gap:.3rem; padding:1.2rem 1.35rem; text-decoration:none;
  background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-lg); color:var(--ink);
  font-family:var(--voice); font-weight:700; font-size:1.14rem;
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.payers a:hover{border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-card); color:var(--ink)}
.payers em{font-family:var(--ui); font-style:normal; font-size:.86rem; font-weight:500; color:var(--muted)}

/* ---------- geography ---------- */
.geo{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(2rem,4vw,3.5rem); align-items:start}
.states{margin-top:1.75rem; columns:5 8rem; column-gap:1.5rem}
.states li{break-inside:avoid; margin-bottom:.45rem}
.states a{font-size:.95rem; color:var(--ink); text-decoration:none}
.states a:hover{color:var(--primary); text-decoration:underline}
.deep{background:var(--primary-900); color:#fff; border-radius:var(--r-lg); padding:1.75rem 1.7rem; margin-top:1.75rem}
.deep h3{color:#fff; font-size:1.3rem}
.deep p{margin-top:.8rem; color:oklch(0.88 0.02 295); font-size:1rem}
.deep ul{margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.45rem}
.deep a{font-family:var(--ui); font-size:.88rem; font-weight:500; text-decoration:none; padding:.35rem .8rem; border-radius:100px; color:#fff; background:oklch(0.34 0.09 295); border:1px solid oklch(0.45 0.10 295)}
.deep a:hover{background:oklch(0.42 0.12 295); color:#fff}

/* ---------- guides ---------- */
.guides{margin-top:2.25rem; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
.guide img{border-radius:var(--r-lg); aspect-ratio:3/2; object-fit:cover; background:var(--surface-2); transition:transform .4s var(--ease)}
.guide a.shot{display:block; overflow:hidden; border-radius:var(--r-lg)}
.guide:hover img{transform:scale(1.03)}
.guide h3{margin-top:1.1rem; font-size:1.22rem}
.guide h3 a{color:var(--ink); text-decoration:none}
.guide:hover h3 a{color:var(--primary)}
.guide p{margin-top:.5rem; color:var(--muted); font-size:.98rem}
.guide time{display:block; margin-top:.8rem; font-family:var(--ui); font-size:.82rem; color:var(--muted); font-weight:600}

/* ---------- provider CTA ---------- */
.prov{background:var(--primary-900); color:#fff; border-radius:var(--r-xl); padding:clamp(2.25rem,4vw,3.5rem); display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:2.5rem; align-items:center}
.prov h2{color:#fff; font-size:clamp(1.7rem,3vw,2.35rem)}
.prov p{margin-top:.9rem; color:oklch(0.89 0.02 295); font-size:1.08rem; max-width:52ch}
.prov__acts{display:flex; flex-direction:column; gap:.75rem}
.prov .btn--solid{background:#fff; color:var(--primary-900)}
.prov .btn--solid:hover{background:oklch(0.93 0.02 295); color:var(--primary-900)}
.prov .btn--line{color:#fff; border-color:oklch(0.45 0.10 295)}
.prov .btn--line:hover{background:oklch(0.34 0.09 295); border-color:oklch(0.58 0.12 295); color:#fff}

/* ---------- faq ---------- */
.faq{margin-top:2rem; max-width:80ch}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:1.25rem 2.5rem 1.25rem 0; position:relative; font-family:var(--voice); font-weight:700; font-size:1.14rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:.5rem; top:50%; width:12px; height:2px; background:var(--primary); margin-top:-1px}
.faq summary::before{content:""; position:absolute; right:.5rem; top:50%; width:12px; height:2px; background:var(--primary); margin-top:-1px; transform:rotate(90deg); transition:transform .25s var(--ease)}
.faq details[open] summary::before{transform:rotate(0)}
.faq summary:hover{color:var(--primary)}
.faq .a{padding:0 0 1.4rem; color:var(--muted); font-size:1.03rem; max-width:66ch}

/* ---------- footer ---------- */
.foot{background:var(--surface); border-top:1px solid var(--line); padding-block:3.25rem 2.25rem; font-size:.95rem}
.foot__cols{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:2.5rem}
.foot h4{font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700}
.foot ul{margin-top:.9rem; display:grid; gap:.55rem}
.foot a{color:var(--ink); text-decoration:none}
.foot a:hover{color:var(--primary); text-decoration:underline}
.foot__about p{margin-top:.85rem; color:var(--muted); max-width:38ch}
.foot__legal{margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; display:grid; gap:.6rem}

/* ---------- motion ---------- */
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}}
@keyframes slowZoom{from{transform:scale(1.06)}}
.hero__img img{animation:slowZoom 1.4s var(--ease)}
.hero h1{animation:fadeUp .8s var(--ease)}
.hero .lede{animation:fadeUp .8s .08s var(--ease) backwards}
.finder{animation:fadeUp .9s .16s var(--ease) backwards}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .guide:hover img{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .top nav a:not(.btn){display:none}
  .finder__row{grid-template-columns:1fr 1fr}
  .finder__row .btn{grid-column:1 / -1; width:100%}
  .calm,.geo,.prov{grid-template-columns:1fr}
  .payers,.guides,.steps{grid-template-columns:1fr 1fr}
  .states{columns:4 8rem}
  .feat{grid-template-columns:1fr}
  .feat__img img{min-height:220px; max-height:260px}
}
@media (max-width:720px){
  body{font-size:16px}
  .hero__img{height:clamp(340px,68vw,440px)}
  .hero__img::after{background:linear-gradient(to top, oklch(0.235 0.05 300/.92) 10%, oklch(0.235 0.05 300/.62) 60%, oklch(0.235 0.05 300/.35) 100%)}
  .hero__say{align-items:flex-end; padding-bottom:1.75rem}
  .finder{margin-top:-2rem}
  .finder__row{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr 1fr; gap:1rem}
  .payers,.guides,.steps{grid-template-columns:1fr}
  .states{columns:2 7rem}
  .foot__cols{grid-template-columns:1fr 1fr}
  .foot__about{grid-column:1 / -1}
  .prov__acts .btn{width:100%}
}
@media (max-width:440px){ .trust{grid-template-columns:1fr} }

/* ==========================================================================
   PAGE TYPES
   Everything above is the homepage system, extracted verbatim from design-03.
   Below are the rules the other templates add: breadcrumbs, page headers,
   provider lists, profiles, claim banners, filter rails, and fact boxes.
   ========================================================================== */

/* ---------- breadcrumb ---------- */
.crumbs{padding-block:1.1rem .4rem; font-size:.9rem; color:var(--muted)}
.crumbs ol{display:flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:center}
.crumbs li{display:flex; align-items:center; gap:.5rem}
.crumbs li+li::before{content:"/"; color:var(--line); font-size:.95rem}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--primary); text-decoration:underline}
.crumbs [aria-current]{color:var(--ink); font-weight:600}

/* ---------- page header ---------- */
.phead{padding-block:.75rem clamp(1.75rem,3vw,2.5rem); border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(1.9rem,3.8vw,3rem); letter-spacing:-0.026em; max-width:20ch}
.phead .sum{margin-top:1rem; font-size:clamp(1.04rem,1.4vw,1.18rem); color:var(--muted); max-width:62ch}
.phead .stats{margin-top:1.35rem; display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; font-size:.94rem; color:var(--muted)}
.phead .stats b{color:var(--ink); font-weight:700}

/* refine bar: the homepage search, restated in the context of the current page */
.refine{
  margin-top:1.6rem; display:grid; grid-template-columns:1.3fr 1fr 1.15fr auto; gap:.75rem; align-items:end;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1rem;
}
.refine .f label{font-size:.78rem}
.refine .f input,.refine .f select{min-height:48px; background:var(--bg)}
.refine .btn{min-height:48px}

/* ---------- two column shell ---------- */
.shell{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(2rem,4vw,3.5rem); align-items:start; padding-block:clamp(2rem,4vw,3rem)}
.rail{position:sticky; top:92px; display:grid; gap:1.5rem}
.railbox{border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3rem 1.35rem}
.railbox h2,.railbox h3{font-size:1.1rem}
.railbox p{margin-top:.6rem; font-size:.95rem; color:var(--muted)}
.railbox ul{margin-top:.9rem; display:grid; gap:.5rem}
.railbox a{font-size:.95rem; color:var(--ink); text-decoration:none}
.railbox a:hover{color:var(--primary); text-decoration:underline}
.railbox .btn{margin-top:1.1rem; width:100%}
.railbox--tint{background:var(--surface)}

/* ---------- provider list ---------- */
.listhead{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-bottom:.9rem; border-bottom:2px solid var(--ink)}
.listhead h2{font-size:1.45rem}
.listhead .count{margin-top:.3rem; font-size:.93rem; color:var(--muted)}
.sortby{display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--muted)}
.sortby select{
  font:600 .9rem var(--ui); color:var(--ink); border:1.5px solid var(--line); border-radius:var(--r);
  padding:.5rem 2.2rem .5rem .7rem; appearance:none; min-height:44px;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23514a60' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center;
}

.plist{display:grid; gap:0}
.prow{padding:1.5rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:1.75rem}
.prow__name{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap}
.prow h3{font-size:1.3rem}
.prow h3 a{color:var(--ink); text-decoration:none}
.prow:hover h3 a{color:var(--primary)}
.prow__meta{margin-top:.45rem; display:flex; flex-wrap:wrap; gap:.3rem 1.15rem; font-size:.93rem; color:var(--muted)}
.prow p.say{margin-top:.7rem; font-size:1rem; max-width:64ch}
.prow__act{display:grid; gap:.55rem; align-content:start}
.prow__act .btn{width:100%}
.prow__act .tel{text-align:center; font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums}

/* status + plan pills */
.status{display:inline-flex; align-items:center; gap:.4rem; font-size:.79rem; font-weight:700; padding:.26rem .65rem; border-radius:100px}
.status .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.status--open{background:oklch(0.960 0.030 155); color:oklch(0.400 0.095 155); border:1px solid oklch(0.860 0.055 155)}
.status--wait{background:var(--amber-050); color:oklch(0.450 0.105 62); border:1px solid var(--amber-200)}
.plans{margin-top:.8rem; display:flex; flex-wrap:wrap; gap:.35rem}
.plan{font-size:.8rem; font-weight:600; padding:.26rem .6rem; border-radius:100px; background:var(--surface); color:var(--muted); border:1px solid var(--line)}

/* featured row keeps the list shape but is unmistakably marked */
.prow--feat{background:var(--amber-050); border:2px solid var(--amber-200); border-radius:var(--r-lg); padding:1.5rem 1.6rem; margin-bottom:.75rem}
.prow--feat .plan{background:var(--bg); border-color:var(--amber-200)}
.feat-tag{
  display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.75rem;
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:var(--amber); padding:.3rem .7rem; border-radius:100px;
}
.feat-note{margin-top:1rem; font-size:.86rem; line-height:1.55; color:var(--muted); max-width:72ch}

/* ---------- county / state fact box ---------- */
.facts{margin-top:2.5rem; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.facts h2{padding:1rem 1.35rem; background:var(--surface); border-bottom:1px solid var(--line); font-size:1.12rem}
.facts dl{margin:0; display:grid; grid-template-columns:auto 1fr}
.facts dt{padding:.85rem 1.35rem; font-size:.87rem; font-weight:700; color:var(--muted); border-bottom:1px solid var(--line); white-space:nowrap}
.facts dd{margin:0; padding:.85rem 1.35rem .85rem 0; font-size:.98rem; border-bottom:1px solid var(--line)}
.facts dl>:nth-last-child(-n+2){border-bottom:0}

/* ---------- link clouds (cities, nearby counties) ---------- */
.cloud{margin-top:1rem; display:flex; flex-wrap:wrap; gap:.45rem}
.cloud a{
  font-size:.92rem; font-weight:500; text-decoration:none; padding:.4rem .85rem; border-radius:100px;
  border:1px solid var(--line); color:var(--ink); background:var(--bg);
  min-height:40px; display:inline-flex; align-items:center;
}
.cloud a:hover{border-color:var(--primary); background:var(--primary-050); color:var(--primary-700)}
.cloud span{font-size:.92rem; padding:.4rem .85rem; color:var(--muted); border:1px dashed var(--line); border-radius:100px; display:inline-flex; align-items:center; min-height:40px}

/* ---------- provider profile ---------- */
.claim{
  background:var(--primary-050); border:1px solid var(--primary-100); border-radius:var(--r-lg);
  padding:1.15rem 1.35rem; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-top:1.5rem;
}
.claim p{font-size:.98rem; max-width:64ch}
.claim b{font-weight:700}
.claim .btn{flex:none}

.profile{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(2rem,4vw,3.5rem); align-items:start; padding-block:clamp(1.75rem,3vw,2.75rem)}
.profile h2{font-size:1.4rem; margin-top:2.25rem; padding-bottom:.7rem; border-bottom:1px solid var(--line)}
.profile h2:first-of-type{margin-top:0}
.profile .body{margin-top:1.1rem; font-size:1.05rem; max-width:68ch}
.profile .body p+p{margin-top:.9rem}
.profile .body li{position:relative; padding-left:1.6rem; margin-top:.6rem; max-width:68ch}
.profile .body li::before{content:""; position:absolute; left:.35rem; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--primary)}

.card{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.card__hd{padding:.9rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--line); font-family:var(--voice); font-weight:700; font-size:1.05rem}
.card__b{padding:1.25rem}
.card .btn{width:100%}
.card .btn+.btn{margin-top:.6rem}
.kv{display:grid; grid-template-columns:auto 1fr; gap:.7rem 1rem; font-size:.95rem; margin:0}
.kv dt{color:var(--muted); font-weight:600; font-size:.87rem}
.kv dd{margin:0}
.tel-big{display:flex; align-items:center; min-height:46px; font-family:var(--voice); font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums}
.tel-big:hover{color:var(--primary)}
.verified{margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.86rem; color:var(--muted); display:flex; gap:.5rem; align-items:flex-start}
.verified svg{flex:none; margin-top:.15rem; color:var(--primary)}

/* ---------- responsive additions ---------- */
@media (max-width:1040px){
  .shell,.profile{grid-template-columns:1fr}
  .rail{position:static}
  .refine{grid-template-columns:1fr 1fr}
  .refine .btn{grid-column:1 / -1; width:100%}
}
@media (max-width:720px){
  .prow,.prow--feat{grid-template-columns:1fr}
  .prow__act{grid-auto-flow:column; grid-auto-columns:1fr; margin-top:1rem}
  .prow__act .tel{display:flex; align-items:center; justify-content:center}
  .refine{grid-template-columns:1fr}
  .facts dl{grid-template-columns:1fr}
  .facts dt{padding-bottom:.2rem; border-bottom:0}
  .facts dd{padding-left:1.35rem}
  .claim{flex-direction:column; align-items:flex-start}
  .claim .btn{width:100%}
  .listhead{align-items:flex-start}
}

.orderby{margin-top:.9rem; font-size:.9rem; color:var(--muted)}

/* Unreported fields on an unclaimed listing. Shown, not hidden: the gap is the argument for
   claiming the profile, and pretending we have the data would be worse than admitting we do not. */
.kv dd.gap{color:var(--muted); font-style:italic}
.gapnote{margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); font-size:.86rem; line-height:1.5; color:var(--muted)}

.status--unknown{background:var(--surface); color:var(--muted); border:1px solid var(--line)}

.claimed-tick{display:inline-flex; align-items:center; gap:.3rem; font-size:.76rem; font-weight:700; letter-spacing:.03em; padding:.22rem .55rem; border-radius:100px; background:var(--primary-050); color:var(--primary-700); border:1px solid var(--primary-100)}
.claimed-tick::before{content:"✓"}

/* ==========================================================================
   GENERATED PAGE TYPES
   Components introduced by engine/build.js. Kept here so the lab comps and the
   generated site render from one stylesheet and cannot drift apart.
   ========================================================================== */

/* ---------- index lists: counties on a state page, states on the home page ----------
   A directory index, not a card grid. Rows are dense and scannable, the count is a real
   data column rather than decoration, and the whole row is the target. */
.countylist{
  margin-top:1.5rem; display:grid; gap:0 2rem;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  border-top:1px solid var(--line);
}
.countylist li{border-bottom:1px solid var(--line)}
.countylist a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  min-height:48px; padding:.7rem .5rem .7rem 0; text-decoration:none; color:var(--ink);
  font-size:.99rem; font-weight:500;
  /* transform, not padding: these lists run to 1,264 rows and animating a layout
     property would thrash the whole column on every hover */
  transition:color .15s var(--ease), transform .15s var(--ease);
}
.countylist a:hover{color:var(--primary); transform:translateX(.4rem)}
.countylist a em{
  font-style:normal; font-size:.86rem; font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums; flex:none;
}
.countylist a:hover em{color:var(--primary)}
.countylist--states a{font-family:var(--voice); font-weight:700; font-size:1.06rem; letter-spacing:-0.015em}

/* These are <section> elements used as in-page components, so they must opt out of the
   global section padding or it lands INSIDE their border as a large empty band. */
.facts,.linkset{padding-block:0}

/* ---------- generic linked section ---------- */
.linkset{margin-top:2.75rem}
.linkset h2{font-size:1.35rem}
.linkset .sub,.sub{margin-top:.6rem; color:var(--muted); font-size:1rem}

/* ---------- notes ---------- */
.facts__note{
  padding:.95rem 1.35rem; background:var(--surface); border-top:1px solid var(--line);
  font-size:.87rem; line-height:1.55; color:var(--muted);
}
.card__hint{margin-top:.45rem; font-size:.9rem; color:var(--muted); line-height:1.5}
.empty{
  margin-top:1.5rem; padding:1.25rem 1.4rem; border:1px dashed var(--line);
  border-radius:var(--r-lg); color:var(--muted); font-size:1rem; background:var(--surface);
}

/* ---------- constrained prose for the standing pages ---------- */
.narrow{max-width:74ch; padding-block:clamp(1.75rem,3vw,2.75rem)}
.narrow .body{font-size:1.06rem}
.narrow .body h2{
  font-family:var(--voice); font-size:1.4rem; font-weight:700; letter-spacing:-0.018em;
  margin-top:2.25rem; padding-bottom:.6rem; border-bottom:1px solid var(--line);
}
.narrow .body h2:first-child{margin-top:0}
.narrow .body p{margin-top:1rem; max-width:68ch}
.narrow .body ul{margin-top:1rem}
.narrow .body li{position:relative; padding-left:1.6rem; margin-top:.6rem; max-width:68ch}
.narrow .body li::before{
  content:""; position:absolute; left:.35rem; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--primary);
}
.narrow .btn{margin-top:.5rem}

/* ---------- home: the honesty section beside the provider CTA ---------- */
.two{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:start;
}
.two .body{max-width:64ch}
.two .body p{margin-top:1rem}
/* .prov is a two-column band on the homepage comp. Inside this narrower column it has to
   collapse, or the heading and the buttons both get squeezed into unreadable slivers. */
.two .prov{margin-top:0; grid-template-columns:1fr; gap:1.75rem; align-content:start}
.two .prov h2{font-size:clamp(1.5rem,2.4vw,1.95rem)}
.two .prov p{max-width:none}
.two .prov__acts{gap:.7rem}

@media (max-width:1000px){
  .two{grid-template-columns:1fr}
}
@media (max-width:640px){
  .countylist{grid-template-columns:1fr; gap:0}
}

/* ==========================================================================
   CLAIM FORM  ·  /claim/  and the managed-listing state
   ========================================================================== */

.claimform{margin-top:2.5rem; max-width:none}
.claimform fieldset{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem 1.6rem 1.75rem;
  margin:0 0 1.5rem;
}
.claimform legend{
  padding:0 .6rem; margin-left:-.6rem;
  font-family:var(--voice); font-weight:700; font-size:1.2rem; letter-spacing:-0.018em;
}
.cf-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem 1.5rem}
.claimform .f{gap:.45rem}
.claimform label{font-family:var(--ui); font-weight:700; font-size:.9rem; color:var(--ink)}
.claimform .req{
  margin-left:.4rem; font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--primary-700); background:var(--primary-050); border-radius:100px; padding:.12rem .45rem;
  vertical-align:1px;
}
.claimform input,.claimform select,.claimform textarea{
  width:100%; min-height:52px; padding:.75rem 1rem; border-radius:var(--r);
  border:1.5px solid var(--line); background:var(--bg); color:var(--ink);
  font:500 1rem var(--ui);
}
.claimform textarea{min-height:0; resize:vertical; line-height:1.55}
.claimform select{
  appearance:none; padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23514a60' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.claimform input:focus,.claimform select:focus,.claimform textarea:focus{
  border-color:var(--primary); outline:3px solid oklch(0.56 0.16 295/.25); outline-offset:0;
}
.claimform input::placeholder,.claimform textarea::placeholder{color:var(--muted); opacity:1}
.claimform .hint{margin-top:.4rem; font-size:.88rem; line-height:1.5; color:var(--muted); font-weight:400}
.claimform fieldset > .hint{margin:-.4rem 0 1.2rem}

/* checkbox groups: real 44px targets, wrapping naturally */
.cf-checks{display:flex; flex-wrap:wrap; gap:.5rem}
.chk{
  display:inline-flex; align-items:center; gap:.55rem; min-height:44px;
  padding:.4rem .95rem .4rem .8rem; border:1.5px solid var(--line); border-radius:100px;
  font-weight:500; font-size:.94rem; cursor:pointer; background:var(--bg);
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.chk:hover{border-color:var(--primary-100); background:var(--primary-050)}
.chk input{width:auto; min-height:0; margin:0; accent-color:var(--primary-700); width:17px; height:17px}
.chk:has(input:checked){border-color:var(--primary); background:var(--primary-050); color:var(--primary-700)}

.cf-submit{display:flex; flex-direction:column; gap:.75rem; align-items:flex-start; margin-top:.5rem}
.cf-submit .hint{margin:0; max-width:52ch}

/* the honeypot must be unreachable for people but present for bots */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.cf-msg{margin-top:1.5rem; padding:1.25rem 1.4rem; border-radius:var(--r-lg); font-size:1rem}
.cf-msg--ok{background:oklch(0.965 0.028 155); border:1.5px solid oklch(0.86 0.055 155); color:oklch(0.32 0.07 155)}
.cf-msg--ok h2{font-size:1.3rem; margin-bottom:.5rem; border:0; padding:0; margin-top:0}
.cf-msg--bad{background:var(--amber-050); border:1.5px solid var(--amber-200); color:oklch(0.40 0.10 55)}
.cf-msg--bad ul{margin-top:.5rem}
.cf-msg--bad li{margin-top:.3rem; padding-left:1.1rem; position:relative}
.cf-msg--bad li::before{content:"\00b7"; position:absolute; left:.3rem; font-weight:700}

/* ---------- a listing the provider actually manages ---------- */
.managed{
  margin-top:1.5rem; display:flex; align-items:flex-start; gap:.6rem;
  padding:.95rem 1.25rem; border-radius:var(--r-lg);
  background:oklch(0.965 0.028 155); border:1px solid oklch(0.88 0.05 155);
  color:oklch(0.30 0.07 155); font-size:.97rem; line-height:1.55;
}
.managed svg{flex:none; margin-top:.25rem}
.managed a{color:oklch(0.34 0.09 155)}

@media (max-width:720px){
  .claimform fieldset{padding:1.25rem 1.1rem 1.4rem}
  .cf-grid{grid-template-columns:1fr}
  .cf-submit .btn{width:100%}
}
