/* Find Service Dogs - visual design system
 * Ported verbatim from the ChatGPT website-builder output
 * (design-reference/complete-site/app/globals.css) on 2026-08-03.
 * Only change: the Tailwind @import was dropped, because the design
 * uses semantic class names only and loads no Tailwind utilities.
 * Fonts come from fonts.css. Laravel-specific additions are at the end.
 */



:root{--blue:#0455BF;--blue2:#0669BF;--navy:#033159;--gold:#D99923;--cream:#F8F6F1;--mist:#F2F6F9;--line:#DDE5EA;--muted:#5C6F7D;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--navy);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select{font:inherit}h1,h2,h3{font-family:Lora,Georgia,serif;margin:0;line-height:1.12;letter-spacing:-.025em}h1{font-size:clamp(2.65rem,5.1vw,4.8rem);max-width:790px}h2{font-size:clamp(2rem,3.4vw,3.15rem)}h3{font-size:1.35rem}.truthbar{height:32px;background:var(--navy);color:#fff;text-align:center;font-size:.72rem;letter-spacing:.075em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px}.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,80px);border-bottom:1px solid var(--line);background:#fff}.logo{display:flex;align-items:center;gap:11px;line-height:1}.logo-symbol{width:47px;height:47px;border:2px solid var(--blue);border-radius:50%;font-family:Georgia;font-size:36px;color:var(--blue);display:grid;place-items:center;position:relative;line-height:.7}.logo-symbol .check{position:absolute;right:-8px;bottom:-4px;border:3px solid #fff}.logo b{font-family:Lora,Georgia,serif;font-size:1.17rem}.logo small{display:block;font-size:.55rem;font-weight:700;letter-spacing:.14em;color:var(--muted);margin-top:7px}.site-header nav{display:flex;gap:34px;font-size:.86rem;font-weight:700}.site-header nav a:hover{color:var(--blue)}.button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;padding:0 21px;font-size:.83rem;font-weight:800;letter-spacing:.01em;border:1px solid transparent;cursor:pointer}.button-outline{border-color:var(--blue);color:var(--blue)}.button-primary{background:var(--blue);color:#fff;box-shadow:0 5px 12px #0455bf22}.button-gold{background:var(--gold);color:#142f43}.hero{min-height:620px;background:linear-gradient(115deg,#f5f8fa 0%,#fff 58%,#eef4f6 100%);display:grid;grid-template-columns:minmax(0,1.65fr) minmax(340px,.7fr);gap:8vw;padding:86px clamp(24px,6vw,96px) 74px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:440px;height:440px;border:1px solid #0455bf13;border-radius:50%;right:-190px;top:-180px;box-shadow:0 0 0 78px #0455bf09,0 0 0 150px #0455bf06}.hero-copy{position:relative;z-index:1}.eyebrow,.kicker{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--blue2)}.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:22px}.check{width:18px;height:18px;display:inline-grid;place-items:center;border-radius:50%;font-size:.72rem;font-weight:900;background:var(--blue);color:#fff;flex:0 0 auto}.check.gold{background:var(--gold);color:#fff}.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:650px;color:var(--muted);margin:23px 0 31px}.search-panel{max-width:860px;background:#fff;padding:13px;display:grid;grid-template-columns:1.1fr 1fr auto;gap:0;border:1px solid var(--line);box-shadow:0 13px 34px #03315913}.search-panel label{padding:0 18px;border-right:1px solid var(--line)}.search-panel label>span{font-size:.6rem;font-weight:800;letter-spacing:.12em;color:var(--muted)}.input-wrap{display:flex;align-items:center;gap:8px}.input-wrap i{font-style:normal;color:var(--gold);font-size:1.2rem}.input-wrap input,.input-wrap select{width:100%;border:0;outline:0;background:transparent;color:var(--navy);height:30px;font-size:.88rem}.input-wrap select{appearance:none}.search-panel button{margin-left:12px;min-width:155px}.search-note{font-size:.75rem;color:var(--muted);margin:13px 0 0 5px}.search-note span{color:var(--gold)}.verification-card{align-self:center;background:var(--navy);color:#fff;padding:38px 38px 34px;position:relative;z-index:1;box-shadow:10px 10px 0 #d99923}.shield{width:52px;height:58px;background:#ffffff13;border:1px solid #ffffff2e;clip-path:polygon(50% 0,95% 18%,86% 75%,50% 100%,14% 75%,5% 18%);display:grid;place-items:center;margin-bottom:18px}.verification-card .kicker{color:#9dc9f2}.verification-card h2{font-size:2rem;margin:7px 0 24px}.verification-card ul{list-style:none;padding:0;margin:0 0 26px}.verification-card li{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid #ffffff15;font-size:.82rem}.verification-card a{font-size:.78rem;color:#fff;font-weight:800}.verification-card a span{color:var(--gold);margin-left:7px}.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 clamp(24px,6vw,96px);background:#fff}.trust-strip>div{min-height:102px;display:flex;align-items:center;justify-content:center;gap:16px;border-right:1px solid var(--line)}.trust-strip>div:last-child{border:0}.trust-strip b,.trust-strip small{display:block}.trust-strip b{font-family:Lora,Georgia,serif;font-size:.95rem}.trust-strip small{font-size:.68rem;color:var(--muted)}.seal{font-size:1.4rem;color:var(--gold)}.section{padding:96px clamp(24px,6vw,96px)}.section-intro{text-align:center;max-width:750px;margin:0 auto 52px}.section-intro h2{margin:9px 0 15px}.section-intro>p:last-child{color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(3,1fr);max-width:1150px;margin:auto}.steps article{padding:28px 44px 32px;position:relative;border-right:1px solid var(--line);text-align:center}.steps article:last-child{border:0}.steps article>span{position:absolute;top:0;left:24px;font:700 .67rem Inter;color:#9aabb7}.steps i{display:grid;place-items:center;width:52px;height:52px;background:var(--mist);border-radius:50%;margin:0 auto 20px;color:var(--blue);font-style:normal;font-size:1.4rem}.steps p{font-size:.83rem;color:var(--muted)}.featured{background:var(--mist)}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.section-head h2{margin-top:7px}.section-head>a{font-size:.8rem;font-weight:800;color:var(--blue)}.trainer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.trainer-card{background:#fff;border:1px solid var(--line);padding:28px;box-shadow:0 6px 16px #03315909}.trainer-top{display:flex;align-items:start;justify-content:space-between;margin-bottom:21px}.avatar{width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 1rem Lora}.verified{font-size:.58rem;font-weight:900;letter-spacing:.1em;display:flex;align-items:center;gap:5px}.verified .check{width:16px;height:16px}.trainer-card .place{font-size:.76rem;color:var(--muted);margin:8px 0 15px}.tags{display:flex;gap:6px;flex-wrap:wrap}.tags span{font-size:.62rem;background:#eef4fa;color:var(--blue);padding:4px 8px;font-weight:800;border-radius:2px}.trainer-card>p:last-of-type{font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:17px}.trainer-card>a{display:flex;justify-content:space-between;color:var(--blue);font-size:.76rem;font-weight:800;border-top:1px solid var(--line);padding-top:16px;margin-top:18px}.education{display:grid;grid-template-columns:1.5fr .7fr;gap:8vw;align-items:center}.education-main h2{margin:9px 0 20px;max-width:700px}.education-main>p:not(.kicker){color:var(--muted);max-width:730px}.education-links{display:grid;margin-top:28px;border-top:1px solid var(--line)}.education-links a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--blue);font-size:.8rem;font-weight:800;display:flex;justify-content:space-between}.education aside{background:var(--cream);border-left:4px solid var(--gold);padding:35px}.seal-big{font-size:2rem;color:var(--gold)}.education aside p{font-size:.62rem;letter-spacing:.12em;font-weight:800}.education blockquote{font:italic 1.35rem/1.45 Lora,Georgia,serif;margin:13px 0}.education aside small{color:var(--muted);font-size:.72rem}.letter-wrap{background:var(--navy)}.letter-card{background:#fff;display:grid;grid-template-columns:1.7fr .65fr;gap:6vw;padding:48px 52px;border-top:4px solid var(--gold)}.separate{float:right;background:#eef4f7;padding:6px 10px;font-size:.56rem;font-weight:900;letter-spacing:.12em;color:var(--muted)}.letter-card h2{margin:8px 0 15px}.letter-card>div>p:not(.kicker){color:var(--muted);max-width:720px}.letter-actions{display:flex;align-items:center;gap:25px;margin-top:25px}.letter-actions>a:last-child{color:var(--blue);font-size:.8rem;font-weight:800}.letter-note{border-left:1px solid var(--line);padding-left:42px;align-self:center}.letter-note b{font-family:Lora,serif;display:block;margin:10px 0 2px}.letter-note p{font-size:.74rem!important;color:var(--muted);margin:0}.claim{display:flex;justify-content:space-between;align-items:center;gap:70px;background:#f8fafb}.claim>div:first-child{max-width:800px}.claim h2{margin:8px 0 14px}.claim p:not(.kicker){color:var(--muted)}.claim>div:last-child{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}.claim small{text-align:center;color:var(--muted);font-size:.65rem}footer{background:#021f37;color:#fff;padding:65px clamp(24px,6vw,96px) 25px}.footer-top{display:grid;grid-template-columns:1fr 1.1fr 2fr;gap:5vw;align-items:start}.footer-top .logo-symbol{border-color:#fff;color:#fff}.footer-top .logo-symbol .check{border-color:#021f37}.footer-top>p{font-size:.8rem;color:#c4d2dc;margin:4px 0}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.footer-links div{display:grid;gap:8px}.footer-links b{font-size:.6rem;letter-spacing:.12em;color:#8eabbf;margin-bottom:6px}.footer-links a{font-size:.75rem;color:#d4e0e8}.footer-bottom{border-top:1px solid #ffffff1c;margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;font-size:.62rem;color:#94aabc}
@media(max-width:960px){.site-header nav{display:none}.hero{grid-template-columns:1fr}.verification-card{max-width:560px}.trainer-grid{grid-template-columns:1fr 1fr}.trainer-card:last-child{display:none}.education{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr}.footer-links{grid-column:1/-1}.claim{align-items:flex-start}}
@media(max-width:680px){.truthbar{font-size:.55rem}.site-header{height:76px;padding:0 18px}.site-header>.button{display:none}.logo b{font-size:1rem}.logo-symbol{width:40px;height:40px}.hero{padding:58px 20px 50px;min-height:auto}.search-panel{grid-template-columns:1fr;padding:12px;gap:7px}.search-panel label{border-right:0;border-bottom:1px solid var(--line);padding:8px 10px}.search-panel button{margin:5px 0 0;width:100%}.verification-card{padding:30px 26px;margin-right:8px}.trust-strip{grid-template-columns:1fr;padding:0 20px}.trust-strip>div{justify-content:flex-start;border-right:0;border-bottom:1px solid var(--line);min-height:82px}.section{padding:70px 20px}.steps{grid-template-columns:1fr}.steps article{border-right:0;border-bottom:1px solid var(--line)}.trainer-grid{grid-template-columns:1fr}.trainer-card:last-child{display:block}.section-head{align-items:start;gap:20px}.section-head>a{white-space:nowrap;margin-top:10px}.education{gap:35px}.education aside{padding:28px 24px}.letter-card{grid-template-columns:1fr;padding:32px 24px}.separate{float:none;display:inline-block;margin-bottom:20px}.letter-actions{align-items:stretch;flex-direction:column}.letter-note{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}.claim{flex-direction:column;gap:25px}.claim>div:last-child,.claim .button{width:100%}.footer-top{grid-template-columns:1fr}.footer-links{grid-template-columns:1fr 1fr}.footer-bottom{gap:14px;flex-direction:column}.hero:after{display:none}}
.detail-page{min-height:100vh;background:#f7f9fa}.detail-header{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,6vw,90px)}.back{font-family:Lora,Georgia,serif;font-weight:700;color:var(--blue)}.detail-crumb{padding:22px clamp(22px,6vw,90px);font-size:.72rem;color:var(--muted);max-width:1440px;margin:auto}.detail-crumb a{color:var(--blue)}.profile-hero{max-width:1260px;margin:0 auto;background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);padding:42px;display:flex;align-items:center;justify-content:space-between;gap:40px}.profile-main{display:flex;align-items:center;gap:27px}.profile-avatar{width:98px;height:98px;background:var(--navy);color:#fff;border-radius:50%;display:grid;place-items:center;font:700 1.7rem Lora;box-shadow:0 0 0 8px var(--mist)}.profile-main h1{font-size:clamp(2.2rem,4vw,3.8rem);margin:8px 0}.profile-main p{color:var(--muted);font-size:.85rem}.profile-hero>aside{min-width:240px;display:grid;gap:10px}.profile-hero>aside small{text-align:center;color:var(--muted);font-size:.65rem}.detail-grid{max-width:1260px;margin:24px auto 80px;display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}.profile-content{background:#fff;border:1px solid var(--line);padding:44px}.profile-content>section{padding-bottom:38px;margin-bottom:38px;border-bottom:1px solid var(--line)}.profile-content>section:last-child{border:0;margin:0;padding:0}.profile-content h2{font-size:2rem;margin:8px 0 16px}.profile-content p{color:var(--muted)}.specialty-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.specialty-grid div{background:var(--mist);padding:20px;border-left:3px solid var(--blue)}.specialty-grid b{font-family:Lora,Georgia,serif}.specialty-grid p{font-size:.75rem;margin-bottom:0}.process{list-style:none;padding:0;counter-reset:steps}.process li{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--line);counter-increment:steps}.process b:before{content:"0" counter(steps) "  ";color:var(--gold);font-size:.7rem}.process span{font-size:.8rem;color:var(--muted)}.credential-panel{background:var(--navy);color:#fff;padding:30px;position:sticky;top:20px}.credential{display:flex;gap:12px;align-items:start;padding:18px 0;border-bottom:1px solid #ffffff18}.credential b,.credential small{display:block}.credential b{font-family:Lora,Georgia,serif;font-size:.9rem}.credential small{font-size:.64rem;color:#b6c8d6}.credential-panel hr{border:0;border-top:1px solid #ffffff18;margin:20px 0}.panel-note{font-size:.7rem;color:#b6c8d6}.credential-panel>a{font-size:.72rem;color:#fff;font-weight:800}
@media(max-width:960px){.detail-grid{grid-template-columns:1fr;margin:20px}.profile-hero{margin:0 20px}.credential-panel{position:static}.profile-content{padding:32px}}
@media(max-width:680px){.detail-header{padding:0 16px}.detail-header .button{font-size:.68rem;padding:0 12px}.profile-hero{margin:0 14px;padding:28px 22px;align-items:stretch;flex-direction:column}.profile-main{align-items:flex-start;flex-direction:column}.profile-avatar{width:74px;height:74px}.detail-grid{margin:14px}.profile-content{padding:26px 20px}.specialty-grid{grid-template-columns:1fr}.process li{grid-template-columns:1fr;gap:4px}.detail-crumb{padding-left:16px}}

/* State directory */
.state-page{background:#f7f9fa}.state-hero{padding:38px clamp(24px,6vw,96px) 58px;background:linear-gradient(120deg,#f4f7fa,#fff 70%);border-bottom:1px solid var(--line)}.state-breadcrumb{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.74rem;margin-bottom:42px}.state-breadcrumb a{color:var(--blue);font-weight:700}.state-hero-row{display:flex;align-items:end;justify-content:space-between;gap:50px;max-width:1340px}.state-hero-row h1{font-size:clamp(2.65rem,5vw,4.65rem);margin:8px 0 18px}.state-hero-row>div:first-child>p:last-child{max-width:770px;color:var(--muted);font-size:1.02rem}.state-stat{display:flex;align-items:center;gap:14px;padding:22px 28px;border-left:4px solid var(--gold);background:#fff;box-shadow:0 8px 28px #03315910;flex:0 0 auto}.state-stat b{font:700 3rem Lora;color:var(--blue)}.state-stat span{font-size:.72rem;line-height:1.4;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:800}.state-hero-actions{display:flex;gap:12px;margin-top:28px}.share-button,.reset-button{border:1px solid var(--line);background:#fff;color:var(--navy);min-height:44px;padding:0 16px;border-radius:4px;font-weight:750;font-size:.76rem;cursor:pointer}.share-button:hover,.reset-button:hover{border-color:var(--blue);color:var(--blue)}.state-featured{padding:64px clamp(24px,6vw,96px);background:#fff}.featured-label{display:flex;justify-content:space-between;align-items:center;max-width:1320px;margin:0 auto 12px}.featured-label span{font-size:.68rem;font-weight:900;letter-spacing:.13em;color:#8d6013}.featured-label small{color:var(--muted);font-size:.67rem}.featured-state-card{max-width:1320px;margin:auto;border:2px solid var(--gold);border-top-width:6px;background:linear-gradient(120deg,#fffdf7,#fff);box-shadow:0 16px 40px #5d481018;padding:34px 38px}.featured-state-main{display:flex;gap:23px;align-items:center}.featured-logo{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font:700 1.45rem Lora;box-shadow:0 0 0 7px #d999231d}.featured-badges{display:flex;gap:8px;margin-bottom:10px}.featured-badges>span:last-child{background:#fff2d7;color:#7b5210;font-size:.63rem;text-transform:uppercase;font-weight:900;letter-spacing:.08em;padding:5px 9px;border-radius:3px}.featured-state-main h2{font-size:clamp(2rem,3vw,3rem)}.state-location{color:var(--muted);font-size:.77rem}.verified-line{display:flex;align-items:center;gap:7px;font-size:.68rem;font-weight:800;color:#45606f}.verified-line .check{width:16px;height:16px}.featured-details{display:grid;grid-template-columns:1.7fr .7fr;gap:55px;margin-top:30px;padding-top:28px;border-top:1px solid #ead9b7}.featured-details h3{font-size:1.2rem}.featured-details>div>p{font-size:.84rem;color:var(--muted)}.featured-details aside{border-left:1px solid #ead9b7;padding-left:34px}.featured-details aside p{margin:4px 0;font-size:.74rem}.featured-details aside .button{margin-top:18px}.availability-dot{color:#2d7658!important;font-weight:800}.sponsor-disclosure{max-width:1320px;margin:10px auto 0;color:var(--muted);font-size:.62rem}.tier-badge{display:inline-flex;align-items:center;min-height:29px;padding:4px 9px;border-radius:3px;font-size:.6rem;font-weight:900;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;cursor:help}.tier-badge:focus{outline:2px solid var(--blue);outline-offset:2px}.tier-1{color:#596b78;background:#eef1f3}.tier-2{color:#fff;background:var(--blue)}.tier-3{color:#fff;background:#b7760d}.tier-4{color:#17324a;background:var(--gold)}.state-results{padding:72px clamp(24px,6vw,96px) 85px}.results-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.results-heading h2{margin:7px 0 8px}.results-heading p:last-child{color:var(--muted);font-size:.83rem}.filter-bar{display:grid;grid-template-columns:1fr 1.55fr 1fr auto;gap:18px;align-items:end;padding:20px;background:#fff;border:1px solid var(--line);box-shadow:0 5px 20px #0331590a;margin-bottom:26px}.filter-bar>label{display:grid;gap:5px}.filter-bar>label>span,.filter-bar legend{font-size:.62rem;text-transform:uppercase;font-weight:900;letter-spacing:.09em;color:var(--muted)}.filter-bar select{height:42px;border:1px solid var(--line);padding:0 11px;color:var(--navy);background:#fff;border-radius:3px}.filter-bar fieldset{border:0;margin:0;padding:0}.filter-bar fieldset>label{display:inline-flex;gap:5px;align-items:center;margin:8px 12px 0 0;font-size:.72rem}.filter-bar input{accent-color:var(--blue);width:17px;height:17px}.tier-notice{background:#fff8e8;border-left:4px solid var(--gold);padding:14px 18px;margin-bottom:24px;color:#654e27;font-size:.76rem}.state-trainer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.state-trainer-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);padding:26px;box-shadow:0 7px 20px #0331590b;min-width:0}.state-trainer-card.tier-card-4{border:2px solid var(--gold)}.state-card-top{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:18px}.state-avatar{width:50px;height:50px;border-radius:50%;background:#eaf1f6;color:var(--navy);display:grid;place-items:center;font:700 1rem Lora}.state-trainer-card h3{font-size:1.32rem}.state-tags{display:flex;gap:6px;flex-wrap:wrap;margin:13px 0}.state-tags span{background:#edf4fa;color:var(--blue);padding:4px 8px;border-radius:3px;font-size:.62rem;font-weight:800}.state-description{font-size:.76rem;color:var(--muted);line-height:1.7;flex:1}.state-trainer-card details{border-top:1px solid var(--line);padding:14px 0}.state-trainer-card summary{cursor:pointer;color:var(--blue);font-size:.7rem;font-weight:800}.state-trainer-card dl{font-size:.68rem;margin:12px 0 0}.state-trainer-card dl div{display:grid;grid-template-columns:90px 1fr;padding:4px 0}.state-trainer-card dt{font-weight:800}.state-trainer-card dd{margin:0;color:var(--muted)}.state-card-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:14px}.state-card-actions>a:first-child{color:var(--blue);font-size:.72rem;font-weight:800}.state-card-actions .button{min-height:38px;padding:0 13px;font-size:.7rem}.empty-results{text-align:center;background:#fff;border:1px dashed var(--line);padding:55px}.empty-results .button{margin-top:18px}.pagination-note{text-align:center;color:var(--muted);font-size:.64rem;margin-top:24px}.state-verification{padding:72px clamp(24px,6vw,96px);display:grid;grid-template-columns:1fr 1.2fr;gap:7vw;background:#fff;border-top:1px solid var(--line)}.state-verification h2{margin:8px 0 16px}.state-verification>div:first-child>p:last-child{color:var(--muted)}.tier-key{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tier-key>div{border:1px solid var(--line);padding:18px}.tier-key p{font-size:.7rem;color:var(--muted);margin-bottom:0}.state-footer{display:flex;justify-content:space-between;gap:50px}.state-footer>div:first-child{max-width:460px}.state-footer b{font:700 1.35rem Lora}.state-footer p{font-size:.78rem;color:#b7c9d5}.state-footer>div:last-child{display:grid;gap:7px}.state-footer a{font-size:.76rem;color:#d7e3eb}
@media(max-width:1050px){.state-trainer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-bar{grid-template-columns:1fr 1fr}.featured-details{grid-template-columns:1fr}.featured-details aside{border-left:0;border-top:1px solid #ead9b7;padding:22px 0 0}.state-verification{grid-template-columns:1fr}.state-hero-row{align-items:flex-start}.state-stat{margin-top:15px}}
@media(max-width:680px){.state-hero{padding:26px 20px 44px}.state-breadcrumb{margin-bottom:30px}.state-hero-row{display:block}.state-stat{width:100%;margin-top:28px}.state-hero-actions{display:grid;grid-template-columns:1fr 1fr}.state-hero-actions .button{grid-column:1/-1}.state-featured{padding:48px 18px}.featured-label{align-items:flex-start;gap:8px;flex-direction:column}.featured-state-card{padding:27px 20px}.featured-state-main{align-items:flex-start;flex-direction:column}.featured-badges{flex-wrap:wrap}.featured-details{gap:20px}.featured-details aside .button{width:100%}.state-results{padding:55px 18px}.results-heading{align-items:flex-start}.results-heading>.share-button{display:none}.filter-bar{grid-template-columns:1fr}.filter-bar fieldset>label{min-height:35px}.state-trainer-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:12px}.state-trainer-card{flex:0 0 92%;scroll-snap-align:start}.state-tags span:nth-child(n+3){display:none}.state-card-actions{align-items:stretch;flex-direction:column}.state-card-actions .button{width:100%}.state-verification{padding:55px 20px}.tier-key{grid-template-columns:1fr}.state-footer{flex-direction:column}.state-footer>div:last-child{margin-top:8px}}
@media print{.truthbar,.site-header,.state-hero-actions,.share-button,.filter-bar,.state-card-actions,.state-footer,.footer-bottom{display:none!important}.state-page,.state-results,.state-featured,.state-verification{background:#fff!important;padding:20px!important}.state-trainer-grid{display:grid!important;grid-template-columns:1fr 1fr!important}.state-trainer-card{break-inside:avoid;box-shadow:none}.featured-state-card{box-shadow:none}.state-description{font-size:9pt}.state-page footer{display:none}}

/* ESA service comparison */
.esa-page{background:#fff}.esa-hero{padding:32px clamp(24px,6vw,96px) 72px;background:linear-gradient(120deg,#f3f7fa 0%,#fff 62%,#fff9ed 100%);border-bottom:1px solid var(--line)}.esa-breadcrumb{display:flex;gap:10px;color:var(--muted);font-size:.72rem;margin-bottom:48px}.esa-breadcrumb a{color:var(--blue);font-weight:800}.esa-hero-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.65fr);gap:7vw;align-items:center;max-width:1340px}.esa-hero h1{margin:10px 0 20px}.hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:27px}.hero-pills>span{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);padding:8px 11px;font-size:.68rem;font-weight:800}.hero-pills .check{width:15px;height:15px;font-size:.6rem}.legal-card{background:var(--navy);color:#fff;padding:36px;border-top:4px solid var(--gold);box-shadow:10px 10px 0 #d99923}.legal-card .kicker{color:#a9cdec}.legal-card h2{font-size:2rem;margin:8px 0 16px}.legal-card>p:last-of-type{color:#d1dde5;font-size:.82rem}.legal-card a{display:block;border-top:1px solid #ffffff24;margin-top:24px;padding-top:18px;color:#fff;font-size:.75rem;font-weight:800}.affiliate-disclosure{padding:16px clamp(24px,6vw,96px);display:flex;gap:13px;justify-content:center;background:#fff8e8;border-bottom:1px solid #eeddbd;font-size:.68rem;color:#6b542c}.affiliate-disclosure b{text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.provider-section{background:var(--mist)}.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1320px;margin:auto}.provider-card{background:#fff;border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;box-shadow:0 8px 26px #0331590b}.provider-card.preferred{border:2px solid var(--gold);border-top-width:6px}.provider-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.provider-mark{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font:700 1rem Lora}.provider-badge{background:#fff3d9;color:#805716;padding:5px 8px;font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;font-weight:900}.provider-card h3{font-size:1.75rem}.provider-description{color:var(--muted);font-size:.78rem;min-height:78px}.provider-card ul{list-style:none;padding:17px 0;margin:0 0 17px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.provider-card li{display:flex;gap:9px;align-items:center;padding:7px 0;font-size:.74rem}.provider-card li .check{width:16px;height:16px;font-size:.6rem}.provider-note{color:var(--muted);font-size:.68rem;flex:1}.provider-card>.button{width:100%;margin-top:16px;justify-content:space-between}.selection-note{text-align:center;color:var(--muted);font-size:.63rem;margin:20px 0 0}.rights-section{display:grid;grid-template-columns:.7fr 1.4fr;gap:7vw;align-items:center}.rights-section>div:first-child p:last-child{color:var(--muted)}.rights-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.rights-grid article{border:1px solid var(--line);padding:28px}.rights-grid h3{margin:12px 0}.rights-grid ul{padding-left:20px;color:var(--muted);font-size:.76rem}.rights-grid li{margin:8px 0}.rights-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-weight:900}.rights-icon.yes{background:#e4f3ec;color:#287056}.rights-icon.no{background:#fae9e7;color:#a4483d}.process-section{background:#f8fafb;border-top:1px solid var(--line)}.caution{background:var(--navy);color:#fff;display:grid;grid-template-columns:.7fr 1.3fr;gap:7vw;align-items:center}.caution .kicker{color:#9fc9ec}.caution ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;list-style:none;padding:0}.caution li{border-bottom:1px solid #ffffff22;padding:13px 0;font-size:.78rem}.caution li:before{content:"×";color:var(--gold);font-weight:900;margin-right:10px}
@media(max-width:960px){.esa-hero-grid,.rights-section{grid-template-columns:1fr}.legal-card{max-width:650px}.provider-grid{grid-template-columns:1fr 1fr}.provider-card:last-child{grid-column:1/-1}.provider-description{min-height:0}}
@media(max-width:680px){.esa-hero{padding:25px 20px 54px}.esa-breadcrumb{margin-bottom:34px}.affiliate-disclosure{align-items:flex-start;flex-direction:column}.provider-grid,.rights-grid{grid-template-columns:1fr}.provider-card:last-child{grid-column:auto}.caution{grid-template-columns:1fr}.caution ul{grid-template-columns:1fr}.hero-pills{display:grid}.legal-card{padding:28px 24px;margin-right:8px}.detail-header .logo small{display:none}}

.provider-price{display:flex;align-items:end;gap:10px;padding:16px 0;border-top:1px solid var(--line)}
.provider-price strong{font:700 2.35rem/1 Lora;color:var(--blue)}
.provider-price span{color:var(--muted);font-size:.62rem;line-height:1.35;max-width:150px}
.provider-timing{margin:0 0 17px;color:#476271;font-size:.68rem;font-weight:800}
.provider-info{border-top:1px solid var(--line);padding:16px 0 7px}
.provider-info h4{font:700 .88rem Lora;margin:0 0 8px}
.provider-info ol{counter-reset:provider-steps;list-style:none;margin:0;padding:0}
.provider-info ol li{counter-increment:provider-steps;display:grid;grid-template-columns:23px 1fr;gap:8px;padding:5px 0;font-size:.69rem;color:var(--muted)}
.provider-info ol li:before{content:counter(provider-steps);width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-size:.56rem;font-weight:900}
.provider-card .provider-info ul{list-style:none;padding:0;margin:0;border:0}
.provider-card .provider-info ul li{display:flex;gap:8px;align-items:flex-start;padding:5px 0;font-size:.69rem;color:var(--muted)}
.provider-card .provider-info li .check{width:15px;height:15px;font-size:.55rem;margin-top:2px}
.provider-card .provider-note{background:#f6f8fa;border-left:3px solid var(--gold);padding:11px;color:var(--muted);font-size:.64rem;flex:1}

/* ==========================================================================
   Laravel additions (not in the original design)
   ========================================================================== */

/* The design drew its mark as a CSS glyph (a magnifying-glass character with
   a gold check). We have the approved logo artwork, so the glyph rules are
   overridden with an image in the same lockup. */
.logo-image {
  height: 56px;
  width: auto;
  flex: none;
  display: block;
}

.site-header .logo,
footer .logo { text-decoration: none; }

/* Bridge to the approved palette file so both naming schemes resolve to the
   same colors. colors.css is the source of truth for --color-* names used by
   any markup not yet converted to the design's class names. */
:root {
  --color-primary-bright: var(--blue);
  --color-primary-medium: var(--blue2);
  --color-primary-dark: var(--navy);
  --color-accent-gold: var(--gold);
}

/* City pill grid on state pages. The design had no equivalent, because its
   state page listed trainers directly rather than linking out to cities. */
.city-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 8px;
}

.city-pills a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--navy);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.city-pills a:hover { border-color: var(--blue); background: var(--mist); color: var(--blue); }
.city-pills a b { font-weight: 700; }
.city-pills a span {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
}
.city-pills a:hover span { color: var(--blue2); }

/* Laravel pagination */
.pagination-wrap { margin: 30px 0 10px; }
.pagination-wrap nav { display: flex; justify-content: center; }
.pagination-wrap svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
  .logo-image { height: 46px; }
  .city-pills { gap: 8px; }
  .city-pills a { padding: 7px 12px; font-size: 0.8rem; }
}

/* --------------------------------------------------------------------------
   State sponsor card additions
   The design shipped this card with mock data. These rules cover the pieces
   real data needs: a verification badge sitting next to the "Featured in"
   chip, and a clickable phone number in the aside.
   -------------------------------------------------------------------------- */

.featured-badges .verified {
  background: var(--navy);
  color: #fff;
  padding: 5px 9px;
  border-radius: 3px;
  font-size: 0.63rem;
  letter-spacing: 0.08em;
}

.featured-badges .verified .check {
  width: 13px;
  height: 13px;
  font-size: 0.6rem;
}

.featured-details aside a:not(.button) {
  color: var(--blue);
  font-weight: 700;
}

.featured-details aside a:not(.button):hover { text-decoration: underline; }

/* The sponsor's own profile page shows a star rather than a checkmark. */
.credential-panel .check.gold { line-height: 1; }

@media (max-width: 700px) {
  .featured-details aside .button { width: 100%; text-align: center; }
}

/* The design's .state-featured assumed it sat directly under the header. On our
   state and city pages it follows the page intro, so the stacked padding left a
   large empty band above the card. */
.section + .state-featured { padding-top: 8px; }

/* Page header block on state and city pages. The design's .section is built
   for mid-page bands (96px of vertical padding), which pushed the paid sponsor
   card below the fold. This keeps the h1 and count, then hands over quickly. */
.section.page-intro {
  padding-top: 26px;
  padding-bottom: 0;
}

.section.page-intro .section-intro { margin-bottom: 28px; }

.section.page-intro h1 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
}

@media (max-width: 700px) {
  .section.page-intro { padding-top: 18px; }
  .section.page-intro .section-intro { margin-bottom: 20px; }
}

/* --------------------------------------------------------------------------
   Provider logos
   The design's avatar is a navy circle holding initials. Real logos do not fit
   that: of the 70 gathered, 18 are wide wordmarks and the widest is 8:1, which
   a circle would crop to nothing. So when a provider has a logo the disc
   becomes a light plate and the artwork is contained inside it at its own
   aspect ratio. Providers without a logo keep the original initials disc.
   -------------------------------------------------------------------------- */

.avatar-logo,
.featured-logo-image,
.profile-avatar-logo {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: none;
  overflow: hidden;
  padding: 6px;

  /* The design uses display:grid with place-items:center on these discs. With a
     centred (non-stretched) grid item the grid area sizes itself to the image,
     so a percentage height on the image resolves against the image rather than
     the plate, and it overflows. Flex with a definite container height gives
     max-height something real to measure against. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-logo img,
.featured-logo-image img,
.profile-avatar-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Trainer card: wider than tall so a wordmark stays legible at card size. */
.avatar.avatar-logo {
  width: 92px;
  height: 52px;
  border-radius: 7px;
  flex: none;
}

/* Sponsor card: the hero logo, so give it room. */
.featured-logo.featured-logo-image {
  width: 132px;
  height: 84px;
  border-radius: 9px;
  padding: 9px;
  flex: none;
}

/* Provider detail hero. */
.profile-avatar.profile-avatar-logo {
  width: 148px;
  height: 98px;
  border-radius: 10px;
  padding: 10px;
  flex: none;
}

@media (max-width: 700px) {
  .avatar.avatar-logo { width: 80px; height: 46px; }
  .featured-logo.featured-logo-image { width: 112px; height: 72px; }
  .profile-avatar.profile-avatar-logo { width: 118px; height: 78px; }
}

/* --------------------------------------------------------------------------
   Bigger, branded header logo
   Sized to 128px (up from 101px). The header is 88px tall, so the mark is
   anchored to the top of the bar and hangs 40px below it, never above: the
   glass sits on the rule and the handle breaks through.
   z-index keeps it painting over the section that follows, since that section
   comes later in the document and would otherwise cover the overhang.
   -------------------------------------------------------------------------- */

.site-header {
  overflow: visible;
  position: relative;
  z-index: 5;
}

.site-header .logo {
  align-self: flex-start;   /* top edge flush with the bar, overhang goes down */
}

.site-header .logo-image {
  height: 128px;
}

/* Footer logo stays in normal flow: there is nothing below it to hang over. */
footer .logo-image { height: 72px; }

@media (max-width: 700px) {
  /* Below 680px the design hides both the nav and the Claim button, so the
     76px bar belongs to the logo alone. Anchor it the same way as desktop:
     never above the bar, overhang goes down. Centring it here made an 84px
     mark poke 4px above a 76px bar. Sized to 96px (up from 76px), scaled by
     the same ~27% as the desktop mark. */
  .site-header .logo { align-self: flex-start; }
  .site-header .logo-image { height: 96px; }
  footer .logo-image { height: 60px; }
}

/* The logo background was knocked out so the header mark sits cleanly on the
   page. That makes its interior white areas transparent, which reads fine on
   the white header but loses definition against the navy footer. Give the
   footer copy a white plate so one asset works in both places. */
footer .logo-image {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
}

/* Sit the glass circle down onto the header rule.
   The mark is 128px tall and the circle's bottom edge is at 88.5% of that
   (measured off the artwork: below y=354/400 only the narrow handle remains),
   so the circle bottom lands at ~113px before any nudge - already well past
   the 88px bar on its own at this size. The 13px nudge (scaled up from the
   10px used at 101px) keeps the same proportion of handle breaking through
   the line that was tuned visually at the smaller size. Nudging the image
   alone moves the circle, while the wordmark stays put because the shift is
   visual, not layout. */
.site-header .logo-image {
  position: relative;
  top: 13px;
}

@media (max-width: 700px) {
  .site-header .logo-image { top: 10px; }
}

/* --------------------------------------------------------------------------
   City list: lead with the busiest, fold the rest away
   A large state runs past 120 cities, which buried the rest of the page. The
   top 12 by listing count are always visible; the remainder sits in a
   collapsed block showing one row under a gradient, so it is obvious there is
   more without it dominating.

   Every city is in the HTML either way. The collapse is presentational only,
   so search engines and no-JS visitors still get the full set of links.
   -------------------------------------------------------------------------- */

.city-more {
  position: relative;
  overflow: hidden;
  max-height: 46px;                /* one row of pills peeking through */
  transition: max-height 0.35s ease;
}

.city-more[data-open="true"] {
  max-height: 3000px;
}

.city-more .city-pills {
  margin-top: 10px;
}

.city-more-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 88%);
  transition: opacity 0.25s ease;
}

.city-more[data-open="true"] .city-more-fade {
  opacity: 0;
}

.city-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.city-more-toggle:hover {
  border-color: var(--blue);
  background: var(--mist);
}

.city-more-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  /* Keep these separate. Grouping them put a fixed height on the wrapper,
     which pinned it open-or-shut: max-height cannot expand a box whose height
     is already fixed, so the toggle did nothing on phones. */
  .city-more { max-height: 42px; }
  .city-more[data-open="true"] { max-height: 6000px; }
  .city-more-fade { height: 42px; }
}

/* --------------------------------------------------------------------------
   Info hub: /learn
   Long-form reading, so the measure is capped near 68 characters. The design
   is built for directory cards, which run edge to edge; body copy at that
   width is unreadable.
   -------------------------------------------------------------------------- */

.learn-article {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 40px) 20px;
}

.learn-article-head { margin-bottom: 30px; }
.learn-article-head h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; margin: 8px 0 14px; }

.learn-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
}

.learn-body { font-size: 1.03rem; line-height: 1.75; color: #24404f; }
.learn-body p { margin: 0 0 1.15em; }
.learn-body h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 2em 0 0.6em; color: var(--navy); clear: both; }
.learn-body h3 { font-size: 1.08rem; margin: 1.6em 0 0.4em; color: var(--blue2); }
.learn-body ul, .learn-body ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.learn-body li { margin-bottom: 0.4em; }
.learn-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.learn-body a:hover { color: var(--navy); }
.learn-body strong { color: var(--navy); }

.learn-body blockquote {
  margin: 2em 0 0;
  padding: 16px 20px;
  border-left: 4px solid var(--gold);
  background: var(--cream);
  font-size: 0.9rem;
  color: var(--muted);
  clear: both;
}

.learn-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.86rem;
  clear: both;
}
.learn-body th, .learn-body td { padding: 9px 11px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.learn-body th { background: var(--mist); color: var(--navy); font-weight: 700; }

/* ---- Article figures: float with the text wrapping around them ---- */

.article-figure {
  margin: 6px 0 18px;
  padding: 0;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.article-figure-right {
  float: right;
  width: 340px;
  max-width: 45%;
  margin-left: 26px;
}

.article-figure-left {
  float: left;
  width: 340px;
  max-width: 45%;
  margin-right: 26px;
}

.article-figure-full {
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 26px 0;
  clear: both;
}

/* Stop a float running past the end of the article and into the pager. */
.learn-body::after { content: ""; display: block; clear: both; }

/* ---- Previous and next ---- */

.learn-pager {
  max-width: 780px;
  margin: 10px auto 0;
  padding: 26px clamp(18px, 5vw, 40px);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}

.learn-pager a {
  flex: 1 1 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.learn-pager a:hover { border-color: var(--blue); background: var(--mist); }
.learn-pager small { display: block; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.learn-pager b { font-size: 0.92rem; color: var(--navy); line-height: 1.35; }
.learn-pager-next { text-align: right; }

/* ---- Cards on the hub index ---- */

.trainer-card h3 a { color: inherit; }
.trainer-card h3 a:hover { color: var(--blue); }

@media (max-width: 700px) {
  /* Wrapping text around a 340px image inside a 350px screen leaves a column
     two words wide. Below this width figures always go full bleed. */
  .article-figure-left,
  .article-figure-right,
  .article-figure-full {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
  }

  .learn-pager { flex-direction: column; }
  .learn-pager-next { text-align: left; }
  .learn-body { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Trainer map
   -------------------------------------------------------------------------- */

.map-section { padding: 0 clamp(16px, 4vw, 40px) 10px; }

.map-shell {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: stretch;
}

#trainer-map {
  height: 560px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--mist);
  z-index: 0;              /* keep Leaflet panes under the site header */
}

#trainer-map.is-loading { cursor: progress; }

/* Clusters reuse the listing pin rather than a generic circle, with the count
   sitting above it. Keeps the map on brand and makes a cluster read as the same
   kind of thing as a single marker, only more of them. The number is total
   listings, not marker count. */
.fsd-cluster {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: 0;
}

.fsd-cluster-pin {
  display: block;
  width: 40px;
  height: 55px;
  filter: drop-shadow(0 3px 5px rgba(3, 49, 89, 0.35));
}

.fsd-cluster-count {
  display: block;
  margin-bottom: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 0.72rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(3, 49, 89, 0.3);
}

/* Denser areas get a slightly larger pin and a warmer badge, so the map still
   reads at a glance without having to compare numbers. */
.fsd-cluster-md .fsd-cluster-pin { width: 46px; height: 63px; }
.fsd-cluster-md .fsd-cluster-count { font-size: 0.76rem; background: var(--blue); }

.fsd-cluster-lg .fsd-cluster-pin { width: 54px; height: 74px; }
.fsd-cluster-lg .fsd-cluster-count { font-size: 0.8rem; background: var(--gold); color: var(--navy); }

/* markercluster animates a scale transform on the wrapper; keep the pin crisp. */
.leaflet-marker-icon.fsd-cluster { transition: none; }

/* ---- Detail panel beside the map ---- */

.map-detail {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
  overflow-y: auto;
  max-height: 560px;
}

.map-detail-empty { text-align: center; padding: 46px 10px; color: var(--muted); }
.map-detail-empty b { display: block; margin: 10px 0 6px; color: var(--navy); font-size: 0.95rem; }
.map-detail-empty p { font-size: 0.82rem; line-height: 1.5; }

.map-detail-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.map-detail-head b { font-size: 0.8rem; color: var(--muted); font-weight: 700; }

.map-detail-list { list-style: none; margin: 0 0 14px; padding: 0; }
.map-detail-list li { padding: 10px 0; border-bottom: 1px solid var(--mist); }
.map-detail-list li:last-child { border-bottom: 0; }
.map-detail-list a b { color: var(--navy); font-size: 0.9rem; line-height: 1.3; }
.map-detail-list a:hover b { color: var(--blue); }

.map-badge {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--mist);
  color: var(--blue2);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.07em;
}
.map-badge.gold { background: #fff2d7; color: #7b5210; }

.map-tags { display: block; margin-top: 5px; }
.map-tags span {
  display: inline-block;
  margin: 2px 4px 0 0;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--cream);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.map-more { display: inline-block; margin-top: 6px; font-size: 0.82rem; font-weight: 700; color: var(--blue); }
.map-more:hover { text-decoration: underline; }

.map-note {
  max-width: 1320px;
  margin: 10px auto 0;
  font-size: 0.66rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .map-shell { grid-template-columns: 1fr; }
  #trainer-map { height: 420px; }
  .map-detail { max-height: none; }
  /* Hover does not exist on touch, so the empty state has to say "tap". */
  .map-detail-empty { padding: 26px 10px; }
}

/* ---------------------------------------------------------------------------
   Mobile navigation
   ---------------------------------------------------------------------------
   Below 960px the desktop nav is display:none and below 680px the header CTA
   went with it, which left phones with no navigation at all. This is the
   replacement: a <details> disclosure, so it needs no JavaScript to open.
--------------------------------------------------------------------------- */

/* position comes from .site-header (already `position: relative`), not this
   element itself - .nav-mobile-panel needs to size against the full header
   width, not just the 44px hamburger button. */
.nav-mobile { display: none; }

.nav-mobile > summary {
  width: 44px;                      /* 44px is the minimum comfortable tap target */
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  list-style: none;                 /* kill the default disclosure triangle */
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary::marker { content: ""; }
.nav-mobile > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.nav-bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-bars i:nth-child(1) { top: 0; }
.nav-bars i:nth-child(2) { top: 6px; }
.nav-bars i:nth-child(3) { top: 12px; }

/* Open state folds the bars into an X so the control reads as a toggle. */
.nav-mobile[open] .nav-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-mobile[open] .nav-bars i:nth-child(2) { opacity: 0; }
.nav-mobile[open] .nav-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-bars i { transition: none; }
}

.nav-mobile-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  display: grid;
  gap: 2px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px #0331591f;
  z-index: 60;
}
.nav-mobile-panel a {
  padding: 13px 14px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  border-radius: 3px;
}
.nav-mobile-panel a:hover,
.nav-mobile-panel a:focus-visible { background: var(--mist); color: var(--blue); }
.nav-mobile-panel .button { margin-top: 8px; width: 100%; }
.nav-mobile-panel .button:hover { color: #fff; }

@media (max-width: 960px) {
  .nav-mobile { display: block; }
  /* The panel carries the CTA, so the header one would just be a duplicate. */
  .site-header > .header-cta { display: none; }
}

@media (max-width: 680px) {
  /* The 101px logo overhangs a 76px bar, so the panel has to clear the
     overhang rather than the header box, or it opens underneath the artwork. */
  .nav-mobile-panel { top: calc(100% + 20px); left: 0; right: 0; min-width: 0; }
}

/* ---------------------------------------------------------------------------
   Utilities
--------------------------------------------------------------------------- */

/* Visible to screen readers only. Used for table captions and for the
   "Included / Not included" text behind the tick marks in the comparison
   grid, which otherwise reads as a column of meaningless symbols. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Pricing
--------------------------------------------------------------------------- */

.pricing-intro { padding-bottom: 0; }
.pricing-intro h1 { margin: 9px auto 15px; }
.pricing-intro .section-intro > p:last-child { color: var(--muted); }

.pricing-founding-banner {
  max-width: 780px;
  margin: 34px auto 0;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--cream);
  border-left: 4px solid var(--gold);
  font-size: 0.84rem;
  color: var(--muted);
}
.pricing-founding-banner b { color: var(--navy); }

/* The promise, given the visual weight of a statement rather than a footnote. */
.pricing-promise { padding-bottom: 40px; }
.promise-card {
  max-width: 1150px;
  margin: auto;
  background: var(--navy);
  color: #fff;
  padding: 46px clamp(24px, 4vw, 54px);
  border-top: 4px solid var(--gold);
}
.promise-card .kicker { color: #9dc9f2; }
.promise-card h2 { margin: 8px 0 30px; }
.promise-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 44px;
}
.promise-grid b { font-family: Lora, Georgia, serif; font-size: 1rem; display: block; margin-bottom: 6px; }
.promise-grid p { margin: 0; font-size: 0.82rem; color: #c4d2dc; }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1150px;
  margin: auto;
  align-items: start;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  padding: 32px 28px;
  box-shadow: 0 6px 16px #03315909;
}
.plan-card-highlight {
  border-color: var(--blue);
  box-shadow: 0 14px 34px #0455bf1c;
}
.plan-flag {
  position: absolute;
  top: -11px; left: 28px;
  background: var(--blue);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  padding: 5px 10px;
}
.plan-tagline { font-family: Lora, Georgia, serif; font-size: 1.1rem; margin: 8px 0 0; }

.plan-price { margin: 22px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.plan-price b { font-family: Lora, Georgia, serif; font-size: 2.5rem; line-height: 1; }
.plan-price > span { font-size: 0.85rem; color: var(--muted); margin-left: 4px; }
.plan-price small { display: block; margin-top: 8px; font-size: 0.7rem; color: var(--muted); }
.plan-price s { color: #9aabb7; }
.plan-monthly { font-weight: 700; }

.plan-blurb { font-size: 0.82rem; color: var(--muted); margin: 0 0 18px; }

.plan-features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8rem; }
.plan-features .check { margin-top: 2px; }
.plan-limit { color: var(--muted); }
.plan-limit > span:first-child { width: 18px; text-align: center; flex: 0 0 auto; }

.plan-card > .button { margin-top: auto; width: 100%; }

.pricing-note {
  max-width: 780px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

/* State Premier ----------------------------------------------------------- */

.premier-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 34px;
  max-width: 1150px;
  margin: auto;
  align-items: start;
}
.premier-bands { display: grid; gap: 14px; }
.premier-band {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: center;
}
.premier-band-head b { font-family: Lora, Georgia, serif; font-size: 1.15rem; display: block; }
.premier-band-head span { font-size: 0.68rem; letter-spacing: 0.1em; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.premier-price { text-align: right; }
.premier-price b { font-family: Lora, Georgia, serif; font-size: 1.75rem; }
.premier-price > span { font-size: 0.76rem; color: var(--muted); }
.premier-price small { display: block; font-size: 0.66rem; color: var(--muted); }
.premier-price s { color: #9aabb7; }
.premier-states {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.premier-detail { background: #fff; border: 1px solid var(--line); padding: 30px 26px; }
.premier-detail .plan-features { margin-top: 14px; }
.premier-availability {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 0.82rem;
  color: var(--muted);
}
.premier-availability b { font-family: Lora, Georgia, serif; font-size: 1.3rem; color: var(--navy); }
.premier-detail .button { width: 100%; }
.premier-disclosure { display: block; margin-top: 14px; font-size: 0.64rem; color: var(--muted); line-height: 1.5; }

.premier-table { max-width: 1150px; margin: 26px auto 0; }
.premier-table > summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--blue);
  padding: 12px 0;
}
.premier-table > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.premier-table-scroll, .compare-scroll { overflow-x: auto; }
.premier-table table, .compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.8rem;
}
.premier-table th, .premier-table td,
.compare-table th, .compare-table td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
}
.premier-table thead th, .compare-table thead th {
  background: var(--mist);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.premier-table tbody th a { color: var(--blue); font-weight: 700; }
.premier-open { color: #1c7a4a; font-weight: 800; }
.premier-taken { color: var(--muted); }

.compare-table { max-width: 1150px; margin: auto; }
.compare-table td { text-align: center; }
.compare-table tbody th { font-weight: 700; }

/* FAQ --------------------------------------------------------------------- */

.faq-list { max-width: 860px; margin: auto; display: grid; gap: 2px; }
.faq-list details { background: #fff; border: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer;
  padding: 18px 22px;
  font-family: Lora, Georgia, serif;
  font-size: 1.02rem;
}
.faq-list summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.faq-list p { margin: 0; padding: 0 22px 20px; font-size: 0.84rem; color: var(--muted); }

@media (max-width: 1050px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 560px; }
  .premier-layout { grid-template-columns: 1fr; }
  .promise-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .promise-card { padding: 32px 22px; }
  .premier-band { grid-template-columns: 1fr; }
  .premier-price { text-align: left; }
  .pricing-founding-banner { padding: 14px 18px; }
}

/* ---------------------------------------------------------------------------
   Paid-tier card treatment
--------------------------------------------------------------------------- */

.trainer-card { position: relative; }

/* Reads as a placement label, in the same gold as paid partnership elsewhere,
   deliberately not styled like the credential badge in .verified. */
.card-ribbon {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--gold);
  color: #142f43;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
}

.trainer-card-wide {
  grid-column: 1 / -1;
  border-color: var(--gold);
  box-shadow: 0 10px 28px #d999231f;
}

.card-contact {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.card-contact .button {
  flex: 1;
  min-height: 40px;
  font-size: 0.74rem;
  padding: 0 12px;
}
.card-contact .button-primary:hover { color: #fff; }

@media (max-width: 480px) {
  .card-contact { flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Accounts, claiming, dashboard
--------------------------------------------------------------------------- */

.auth-section { background: var(--mist); min-height: 60vh; }
.auth-card {
  max-width: 520px;
  margin: auto;
  background: #fff;
  border: 1px solid var(--line);
  padding: 44px clamp(24px, 4vw, 46px);
  box-shadow: 0 10px 30px #03315912;
}
.claim-wide { max-width: 820px; margin: auto; }
.auth-card h1, .claim-wide h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 8px 0 14px; }
.auth-lede { color: var(--muted); font-size: 0.92rem; margin: 0 0 26px; }
.auth-note { font-size: 0.78rem; color: var(--muted); margin-top: 22px; line-height: 1.6; }
.auth-alt { margin-top: 24px; font-size: 0.82rem; color: var(--muted); }
.auth-alt a { color: var(--blue); font-weight: 700; }

.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field > span small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="url"], .field input[type="tel"], .field input[type="search"],
.field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px 14px;
  font-size: 0.92rem;
  color: var(--navy);
  border-radius: 3px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
  border-color: var(--blue);
}
.field > small { display: block; margin-top: 6px; font-size: 0.72rem; color: var(--muted); line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

fieldset.field { border: 0; padding: 0; margin: 0 0 18px; }
fieldset.field legend { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

.field-check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 0.85rem; }
.field-check input { margin-top: 3px; flex: 0 0 auto; }
.confirm-check { margin: 20px 0 24px; font-size: 0.8rem; color: var(--muted); line-height: 1.6; }

.code-input { font-size: 1.6rem !important; letter-spacing: 0.4em; text-align: center; font-family: Lora, Georgia, serif; }

.auth-card form > .button, .submit-form > .button { width: 100%; margin-top: 6px; }

/* A button that should read as a link (sign out, mostly). */
.linkish { background: none; border: 0; padding: 0; color: var(--blue); font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.linkish:hover { text-decoration: underline; }

.form-errors {
  border-left: 4px solid #b3261e;
  background: #fdf3f2;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 0.82rem;
}
.form-errors b { display: block; margin-bottom: 6px; color: #8c1d18; }
.form-errors ul { margin: 0; padding-left: 18px; color: #6b2b26; }

.form-status {
  display: flex; gap: 10px; align-items: flex-start;
  border-left: 4px solid var(--blue);
  background: #eef4fa;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 0.84rem;
}
.form-status .check { margin-top: 2px; }

/* Claim ------------------------------------------------------------------- */

.claim-search { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; margin-bottom: 26px; }
.claim-search .field { margin: 0; }
.claim-search .button { min-height: 46px; }

.claim-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.claim-results li {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: #fff; border: 1px solid var(--line); padding: 16px 20px;
}
.claim-results b { display: block; font-family: Lora, Georgia, serif; font-size: 1.02rem; }
.claim-results small { display: block; font-size: 0.76rem; color: var(--muted); margin: 2px 0 6px; }
.claim-results .button { flex: 0 0 auto; }
.claim-done { font-size: 0.74rem; color: var(--muted); font-weight: 700; flex: 0 0 auto; }

.claim-empty, .claim-pending {
  background: #fff; border: 1px solid var(--line); padding: 26px; font-size: 0.86rem; color: var(--muted);
}
.claim-pending { border-left: 4px solid var(--gold); }
.claim-empty b, .claim-pending b { color: var(--navy); }
.claim-empty p, .claim-pending p { margin: 0 0 8px; }
.claim-empty a, .claim-pending a, .claim-foot a { color: var(--blue); font-weight: 700; }
.claim-foot { margin-top: 26px; font-size: 0.82rem; color: var(--muted); }
.claim-intro { font-size: 0.88rem; margin-bottom: 18px; }

.claim-methods { display: grid; gap: 2px; }
.claim-method {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); padding: 18px 20px; cursor: pointer;
}
.claim-method:hover { border-color: var(--blue); }
.claim-method input { margin-top: 4px; flex: 0 0 auto; }
.claim-method:has(input:checked) { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
.claim-method b { display: block; font-size: 0.92rem; }
.claim-method small { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 4px; line-height: 1.55; }
.claim-instant, .claim-manual {
  display: inline-block; margin-top: 8px; font-style: normal;
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px;
}
.claim-instant { background: #e6f4ec; color: #1c7a4a; }
.claim-manual { background: var(--cream); color: #7b5210; }
.claim-manual-fields { margin-top: 22px; }

.submit-form { background: #fff; border: 1px solid var(--line); padding: 32px clamp(20px, 3vw, 36px); }

/* Dashboard --------------------------------------------------------------- */

.dash-heading { font-size: 1.25rem; margin: 34px 0 14px; }
.dash-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.dash-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: #fff; border: 1px solid var(--line); padding: 18px 22px;
}
.dash-list b { display: block; font-family: Lora, Georgia, serif; font-size: 1.05rem; }
.dash-list small { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.dash-plan, .dash-flag {
  display: inline-block; margin-top: 8px;
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; background: #eef4fa; color: var(--blue);
}
.dash-flag { background: var(--cream); color: #7b5210; margin-left: 4px; }
.dash-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.dash-actions .button { min-height: 40px; font-size: 0.74rem; }
.dash-signout { margin-top: 34px; }

/* Header account links ---------------------------------------------------- */
.header-account { display: flex; align-items: center; gap: 14px; }
.header-account a { font-size: 0.82rem; font-weight: 700; }

@media (max-width: 680px) {
  .field-row { grid-template-columns: 1fr; }
  .claim-search { grid-template-columns: 1fr; }
  .claim-results li, .dash-list li { align-items: flex-start; flex-direction: column; gap: 12px; }
  .claim-results .button, .dash-actions .button { width: 100%; }
  .dash-actions { width: 100%; }
  .auth-card { padding: 32px 22px; }
}

/* ---------------------------------------------------------------------------
   Admin
   ---------------------------------------------------------------------------
   Hand-rolled rather than a panel package. There is no PHP toolchain on the
   machine this was built from, so a large dependency could not be run or
   tested before it reached production, while these few screens can be read in
   full and deploy with nothing new attached.
--------------------------------------------------------------------------- */

.admin-section { background: var(--mist); }
.admin-shell { max-width: 1180px; margin: auto; }

.admin-nav { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 28px; }
.admin-nav a {
  padding: 10px 18px; background: #fff; border: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 700; color: var(--muted);
}
.admin-nav a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.admin-nav a:hover:not(.on) { color: var(--blue); }
.admin-nav .admin-out { margin-left: auto; color: var(--blue); }

.admin-shell h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 6px; }
.admin-h2 { font-size: 1.05rem; margin: 26px 0 12px; }
.admin-lede, .admin-count { color: var(--muted); font-size: 0.84rem; margin: 0 0 18px; }
.admin-crumb { font-size: 0.76rem; color: var(--muted); margin-bottom: 10px; }
.admin-crumb a { color: var(--blue); font-weight: 700; }
.admin-empty { color: var(--muted); font-size: 0.86rem; padding: 22px; background: #fff; border: 1px solid var(--line); }

.admin-queues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; }
.admin-queue {
  background: #fff; border: 1px solid var(--line); padding: 22px 24px;
  border-left: 4px solid var(--line);
}
.admin-queue.hot { border-left-color: var(--gold); }
.admin-queue b { display: block; font-family: Lora, Georgia, serif; font-size: 2.2rem; line-height: 1; }
.admin-queue span { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--muted); }
.admin-queue:hover { border-color: var(--blue); }

.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 10px; }
.admin-stats > div { background: #fff; border: 1px solid var(--line); padding: 16px 20px; }
.admin-stats b { font-family: Lora, Georgia, serif; font-size: 1.4rem; }
.admin-stats span { display: block; font-size: 0.72rem; color: var(--muted); }

.admin-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.admin-chip {
  padding: 7px 14px; background: #fff; border: 1px solid var(--line);
  font-size: 0.75rem; font-weight: 700; color: var(--muted);
}
.admin-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }

.admin-search { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: start; margin-bottom: 6px; }
.admin-search .field { margin: 0; }
.admin-search .button { min-height: 46px; }

.admin-tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); }
.admin-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 0.84rem; }
.admin-table th, .admin-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.admin-table thead th { background: var(--mist); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.admin-table tbody th { font-weight: 700; }
.admin-table tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 0.72rem; }
.admin-table .button { min-height: 34px; font-size: 0.7rem; padding: 0 12px; white-space: nowrap; }

.admin-status { font-size: 0.64rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; background: #eef4fa; color: var(--blue); }
.admin-status.s-published, .admin-status.s-approved { background: #e6f4ec; color: #1c7a4a; }
.admin-status.s-pending, .admin-status.s-review { background: var(--cream); color: #7b5210; }
.admin-status.s-rejected, .admin-status.s-unpublished { background: #fdf3f2; color: #8c1d18; }

.admin-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr); gap: 26px; align-items: start; }
.admin-form, .admin-side, .admin-decide { background: #fff; border: 1px solid var(--line); padding: 26px 28px; }
.admin-form > .button { width: 100%; margin-top: 8px; }
.admin-form .admin-h2:first-child { margin-top: 0; }

.admin-dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 18px; margin: 0 0 18px; font-size: 0.84rem; }
.admin-dl dt { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 800; padding-top: 3px; }
.admin-dl dd { margin: 0; overflow-wrap: anywhere; }
.admin-good { color: #1c7a4a; }
.admin-bad { color: #b3261e; }

.admin-note { background: #fff; border-left: 4px solid var(--line); padding: 14px 18px; font-size: 0.85rem; }
.admin-note-sm { font-size: 0.78rem; color: var(--muted); margin: 0 0 14px; }
.admin-warn { background: var(--cream); border-left: 4px solid var(--gold); padding: 12px 16px; font-size: 0.78rem; color: #6b4d16; margin-bottom: 16px; }
.admin-plain { list-style: none; padding: 0; margin: 0 0 16px; font-size: 0.82rem; display: grid; gap: 8px; }
.admin-plain a { color: var(--blue); }
.admin-history li { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.admin-history small { display: block; color: var(--muted); font-size: 0.7rem; }

.admin-decide .button { width: 100%; }
.admin-hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.admin-decided { background: var(--mist); padding: 16px; font-size: 0.84rem; }
.admin-side-link { margin-top: 20px; font-size: 0.8rem; }
.admin-side-link a { color: var(--blue); font-weight: 700; }
.admin-plan-now { font-size: 0.9rem; margin: 0 0 14px; }

.admin-log { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.admin-log li {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 16px; align-items: baseline;
  background: #fff; border: 1px solid var(--line); padding: 12px 18px; font-size: 0.83rem;
}
.admin-when { font-size: 0.72rem; color: var(--muted); }
.admin-log > li > small { color: var(--muted); font-size: 0.72rem; }
.admin-diff { display: block; margin-top: 4px; color: var(--muted); font-size: 0.72rem; }
.admin-diff span { display: block; }

@media (max-width: 900px) {
  .admin-two { grid-template-columns: 1fr; }
  .admin-queues, .admin-stats { grid-template-columns: 1fr; }
  .admin-search { grid-template-columns: 1fr; }
  .admin-log li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------------------------------------------------------------------------
   Owner listing editor
--------------------------------------------------------------------------- */

.card-tagline {
  font-size: 0.82rem;
  color: var(--navy);
  font-style: italic;
  margin: 0 0 12px;
}

.owner-note {
  background: var(--mist);
  border-left: 4px solid var(--line);
  padding: 12px 16px;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.6;
}
.owner-note a { color: var(--blue); font-weight: 700; }

.owner-pending { margin: 8px 0 0; padding-left: 18px; font-size: 0.82rem; }
.owner-pending b { color: var(--navy); }

.owner-services { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.owner-services input {
  width: 100%; border: 1px solid var(--line); padding: 10px 12px;
  font-size: 0.88rem; border-radius: 3px;
}
.owner-services input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }

.owner-hours { display: grid; gap: 6px; margin-bottom: 22px; }
.owner-hour-row {
  display: grid;
  grid-template-columns: 60px auto 26px auto 1fr;
  gap: 10px;
  align-items: center;
  background: var(--mist);
  padding: 8px 12px;
}
.owner-day { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.owner-to { font-size: 0.72rem; color: var(--muted); text-align: center; }
.owner-hour-row input[type="time"] { border: 1px solid var(--line); padding: 7px 9px; font-size: 0.82rem; border-radius: 3px; background: #fff; }
.owner-closed { display: flex; gap: 7px; align-items: center; font-size: 0.76rem; color: var(--muted); }

.owner-media { background: #fff; border: 1px solid var(--line); padding: 32px clamp(20px, 3vw, 36px); margin-top: 22px; }
.owner-media .dash-heading:first-child { margin-top: 0; }
.owner-logo-row { display: flex; gap: 24px; align-items: flex-start; }
.owner-logo-row form { flex: 1; }
.owner-logo-row .avatar { width: 84px; height: 84px; flex: 0 0 auto; }

.owner-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.owner-photos figure { margin: 0; }
.owner-photos img { width: 100%; height: 110px; object-fit: cover; border: 1px solid var(--line); display: block; }
.owner-photos form { margin-top: 5px; }

/* Admin: change-request queue --------------------------------------------- */

.admin-changes { display: grid; gap: 12px; }
.admin-change { background: #fff; border: 1px solid var(--line); padding: 20px 24px; }
.admin-change-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.admin-change-head b { font-family: Lora, Georgia, serif; font-size: 1.05rem; display: block; }
.admin-change-head small { display: block; color: var(--muted); font-size: 0.74rem; margin-top: 2px; }
.admin-change-head .button { flex: 0 0 auto; min-height: 34px; font-size: 0.7rem; }

.admin-change-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.admin-change-diff > div { background: var(--mist); padding: 12px 14px; }
.admin-change-diff span { display: block; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.admin-change-diff p { margin: 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.admin-change-diff > div:last-child { background: var(--cream); }

.admin-change-actions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.admin-reject { display: flex; gap: 8px; flex: 1; min-width: 260px; }
.admin-reject input { flex: 1; border: 1px solid var(--line); padding: 0 12px; min-height: 46px; font-size: 0.82rem; border-radius: 3px; }
.admin-change-actions .button { min-height: 46px; }

/* Four queue tiles now, not three. */
.admin-queues { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

@media (max-width: 680px) {
  .owner-services { grid-template-columns: 1fr; }
  .owner-hour-row { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .owner-day { grid-column: 1 / -1; }
  .owner-to { display: none; }
  .owner-logo-row { flex-direction: column; }
  .admin-change-diff { grid-template-columns: 1fr; }
  .admin-reject { min-width: 0; flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Billing
--------------------------------------------------------------------------- */

.billing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
  align-items: start;
}
.billing-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  padding: 28px 26px;
}
.billing-card.is-current { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
.billing-card .plan-features { margin-bottom: 20px; }

.billing-options { display: grid; gap: 8px; margin-top: auto; }
.billing-options .button { width: 100%; }
.billing-founding { margin: 10px 0 0; font-size: 0.72rem; color: var(--muted); }
.billing-current { margin: auto 0 0; font-size: 0.8rem; font-weight: 700; color: var(--blue); }

.billing-manage { margin-top: 6px; }

.owner-plan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  padding: 20px 24px;
  margin-top: 22px;
}
.owner-plan b { font-family: Lora, Georgia, serif; font-size: 1.05rem; display: block; }
.owner-plan small { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.owner-plan .dash-actions { flex: 0 0 auto; }

@media (max-width: 680px) {
  .billing-grid { grid-template-columns: 1fr; }
  .owner-plan { align-items: stretch; flex-direction: column; }
  .owner-plan .dash-actions { width: 100%; }
  .owner-plan .dash-actions .button, .owner-plan form { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Legal pages
--------------------------------------------------------------------------- */

.legal-page { background: var(--mist); }
.legal-shell { max-width: 780px; margin: auto; }

.legal-nav { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 30px; }
.legal-nav a {
  padding: 9px 16px; background: #fff; border: 1px solid var(--line);
  font-size: 0.78rem; font-weight: 700; color: var(--muted);
}
.legal-nav a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.legal-nav a:hover:not(.on) { color: var(--blue); }

.legal-shell h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 8px 0 8px; }
.legal-updated { font-size: 0.76rem; color: var(--muted); margin: 0 0 28px; }

/* The plain-language summary at the top of each document. Deliberately the
   most readable thing on the page: if someone reads only one box, it should
   be the one that actually tells them what they need to know. */
.legal-callout {
  background: var(--navy);
  color: #fff;
  border-top: 4px solid var(--gold);
  padding: 24px 28px;
  margin-bottom: 34px;
  font-size: 0.92rem;
  line-height: 1.65;
}
.legal-callout b { font-family: Lora, Georgia, serif; }

.legal-body { background: #fff; border: 1px solid var(--line); padding: 38px clamp(22px, 4vw, 44px); }
.legal-body h2 {
  font-size: 1.25rem;
  margin: 34px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1rem; margin: 22px 0 8px; color: var(--blue2); }
.legal-body p { font-size: 0.9rem; line-height: 1.75; margin: 0 0 14px; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { font-size: 0.9rem; line-height: 1.7; margin-bottom: 9px; }
.legal-body a { color: var(--blue); font-weight: 700; }
.legal-body a:hover { text-decoration: underline; }
.legal-body code {
  background: var(--mist); padding: 2px 6px; border-radius: 3px;
  font-size: 0.82rem; font-family: ui-monospace, Menlo, Consolas, monospace;
}

.legal-contact {
  margin-top: 26px; padding: 18px 22px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue);
  font-size: 0.84rem; color: var(--muted);
}
.legal-contact a { color: var(--blue); font-weight: 700; }

@media (max-width: 680px) {
  .legal-callout { padding: 20px 20px; font-size: 0.88rem; }
  .legal-body { padding: 26px 20px; }
}

/* ---------------------------------------------------------------------------
   Unsold state placement
   ---------------------------------------------------------------------------
   Sits above the directory on a page whose visitors are mostly disabled people
   looking for a trainer. It is aimed at a different reader entirely, so it is
   deliberately quiet: a note, not a billboard.
--------------------------------------------------------------------------- */

.slot-open {
  background: var(--cream);
  border-top: 1px solid #ead9b7;
  border-bottom: 1px solid #ead9b7;
  padding: 26px clamp(18px, 6vw, 96px);
}
.slot-open-inner {
  max-width: 1150px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
}
.slot-open-copy { max-width: 720px; }
.slot-open .kicker { color: var(--gold); }
.slot-open h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin: 6px 0 8px; }
.slot-open p:not(.kicker):not(.slot-open-price) {
  font-size: 0.85rem;
  color: #6b5a3c;
  margin: 0;
  line-height: 1.65;
}
.slot-open-price { margin: 10px 0 0; font-size: 0.85rem; color: #6b5a3c; }
.slot-open-price b { font-family: Lora, Georgia, serif; font-size: 1.2rem; color: var(--navy); }
.slot-open-price small { display: block; font-size: 0.68rem; }

.slot-open-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 0 0 auto;
  align-items: stretch;
  text-align: center;
}
.slot-open-alt { font-size: 0.72rem; font-weight: 700; color: var(--blue); }
.slot-open-alt:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .slot-open-inner { align-items: flex-start; flex-direction: column; gap: 18px; }
  .slot-open-actions { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Paw avatar
   ---------------------------------------------------------------------------
   Replaces the plain initials disc. The paw is an inline SVG so it inherits
   the brand navy and stays sharp at any size; the initials sit on top as real
   text, positioned over the palm pad, so they stay selectable and legible to
   assistive technology.
--------------------------------------------------------------------------- */

.avatar { --avatar-size: 52px; }

.avatar-paw {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  display: block;
  background: none;
  border-radius: 0;
  flex: 0 0 auto;
}
.avatar-paw svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--navy);
}
.avatar-paw b {
  position: absolute;
  /* Centred on the palm pad, which sits low in the viewBox, not on the
     bounding box of the whole paw. */
  left: 0;
  right: 0;
  top: 76%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  font-family: Lora, Georgia, serif;
  font-weight: 700;
  font-size: calc(var(--avatar-size) * 0.3);
  line-height: 1;
  letter-spacing: 0.01em;
  pointer-events: none;
}

/* Gold paw for an accredited program, so the strongest credential reads at a
   glance even before the badge text is scanned. */
.trainer-card .avatar-paw svg { fill: var(--navy); }

.avatar-logo { width: var(--avatar-size); height: var(--avatar-size); }

/* ---------------------------------------------------------------------------
   Homepage headline
   ---------------------------------------------------------------------------
   Sized to sit on exactly two lines. The max-width is in ch rather than px so
   the wrap point is tied to the font size and survives every breakpoint,
   instead of reflowing to three lines at some widths.
--------------------------------------------------------------------------- */

.hero-copy h1 {
  font-size: clamp(1.95rem, 4.25vw, 3.5rem);
  max-width: 27ch;
}

@media (max-width: 680px) {
  .hero-copy h1 { font-size: clamp(1.8rem, 7.4vw, 2.4rem); max-width: 24ch; }
}

/* Explanation of how State Premier levels are set. */
.premier-how {
  max-width: 720px;
  margin: 14px auto 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.7;
}
.premier-how b { color: var(--navy); }

/* Author byline and author page. */
.learn-byline { font-size: 0.85rem; color: var(--muted); margin: 10px 0 4px; }
.learn-byline a { color: var(--blue); }
.learn-byline a:hover { text-decoration: underline; }

.author-head { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.author-mark {
  width: 78px; height: 78px; flex: 0 0 auto;
  border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font: 700 1.5rem Lora, Georgia, serif;
}
.author-head h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0; }
.author-head .auth-lede { margin: 4px 0 0; }
@media (max-width: 560px) { .author-head { align-items: flex-start; flex-direction: column; gap: 14px; } }