/* ==========================================================================
   TooHeal — design system v2 (mobile-first)
   Rebuilt around therapist cards with photos, ratings, and scannable proof.
   ========================================================================== */
:root{
  --green:#7FCB27; --green-deep:#2F5A0E; --green-soft:#EAF6DC; --green-tint:#F4FAEC;
  --cream:#FBFBF3; --sand:#F1ECDA;
  --ink:#1B2414; --ink-soft:#54604A; --ink-mute:#6B7361;
  --orange:#FF6A2B; --orange-deep:#E2531B;
  --line:#E6E3D4; --line-soft:#EFEDE1; --white:#fff;
  --red:#C0392B; --amber:#B7791F; --star:#FF9E1F;

  --radius:16px; --r-sm:12px; --r-lg:22px; --r-xl:28px; --r-pill:40px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:88px;

  --sh1:0 1px 2px rgba(27,36,20,.05);
  --sh2:0 4px 16px -6px rgba(27,36,20,.14);
  --sh3:0 14px 32px -14px rgba(27,36,20,.20);
  --sh4:0 22px 50px -22px rgba(27,36,20,.32);

  --page:1180px; --gut:18px;
  --font-head:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.12}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
svg{display:block}
img{display:block;max-width:100%}
.wrap{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 12px 0;font-weight:700;font-size:13px}
.skip:focus{left:0}

.wordmark{font-family:var(--font-head);font-weight:600;font-size:20px;letter-spacing:-.3px;
  color:var(--ink);display:inline-flex;align-items:baseline}
.wordmark .accent{color:var(--green-deep);font-weight:800}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--green-soft);color:var(--green-deep);
  font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:7px 13px;border-radius:30px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blip 1.9s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.k{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep)}
.shead{max-width:660px}
.shead h2{font-size:clamp(25px,6.4vw,34px);font-weight:800;margin-top:10px;letter-spacing:-.018em}
.shead p{font-size:15px;color:var(--ink-soft);margin-top:12px;line-height:1.6;max-width:600px}
.muted{color:var(--ink-soft)}
.small{font-size:13px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15.5px;
  padding:14px 24px;border-radius:var(--r-pill);min-height:50px;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 20px rgba(255,106,43,.28)}
.btn-primary:hover{background:var(--orange-deep);transform:translateY(-2px)}
.btn-secondary{border:1.5px solid var(--line);background:var(--white)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-ghost{background:var(--green-soft);color:var(--green-deep)}
.btn-ghost:hover{background:#dcefc4}
.btn-block{width:100%}
.btn-sm{padding:9px 18px;min-height:42px;font-size:14px}
.btn-lg{padding:16px 30px;min-height:56px;font-size:16.5px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

nav.site{position:sticky;top:0;z-index:50;background:rgba(251,251,243,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:12px;
  max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.nav-links{display:none;gap:26px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{background:var(--ink);color:#fff;font-weight:600;font-size:13.5px;padding:10px 17px;border-radius:30px;
  white-space:nowrap;transition:background .2s ease}
.nav-cta:hover{background:var(--green-deep)}

.promo{background:var(--ink);color:#fff;font-size:12.5px}
.promo-in{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  padding:9px var(--gut);max-width:var(--page);margin-inline:auto;text-align:center}
.promo b{color:var(--green)}
.promo-code{border:1px dashed rgba(255,255,255,.42);border-radius:var(--r-sm);padding:3px 9px;
  font-weight:800;letter-spacing:.06em;font-size:11.5px;color:#fff}

.hero{position:relative;padding:var(--s7) 0 var(--s8);overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-bg span{position:absolute;border-radius:50%}
.hero-bg .g1{width:560px;height:560px;top:-300px;right:-160px;
  background:radial-gradient(circle,rgba(127,203,39,.22),rgba(127,203,39,0) 66%)}
.hero-bg .g2{width:480px;height:480px;top:40px;left:-260px;
  background:radial-gradient(circle,rgba(255,106,43,.10),rgba(255,106,43,0) 68%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:var(--s8);align-items:start}
.hero h1{font-size:clamp(31px,8vw,44px);font-weight:800;letter-spacing:-.025em;margin-top:16px}
.hero h1 em{font-style:normal;color:var(--green-deep)}
.hero .lead{font-size:16px;color:var(--ink-soft);margin-top:14px;line-height:1.58;max-width:520px}
.hero-ctas{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.hero-ctas .btn{width:100%}

.facepile{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.facepile-imgs{display:flex}
.facepile-imgs img,.facepile-imgs .more{width:40px;height:40px;border-radius:50%;border:2.5px solid var(--cream);
  margin-left:-12px;object-fit:cover;background:var(--green-soft)}
.facepile-imgs img:first-child{margin-left:0}
.facepile-imgs .more{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
  color:var(--green-deep)}
.facepile-txt{font-size:13px;line-height:1.4;color:var(--ink-soft)}
.facepile-txt b{color:var(--ink)}
.facepile-stars{color:var(--star);letter-spacing:1px;font-size:12px}

.matcher{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh4);overflow:hidden}
.matcher-top{background:var(--green-deep);color:#fff;padding:18px var(--s6)}
.matcher-top h2{font-family:var(--font-body);font-size:16px;font-weight:800;color:#fff}
.matcher-top p{font-size:12.5px;color:#CDE8B0;margin-top:3px}
.matcher-steps{display:flex;gap:6px;margin-top:14px}
.matcher-steps i{height:4px;flex:1;border-radius:4px;background:rgba(255,255,255,.22)}
.matcher-steps i.on{background:var(--green)}
.matcher-body{padding:var(--s6)}
.qlab{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.matcher-body h3{font-size:18px;font-weight:800;margin-top:7px;letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{border:1.5px solid var(--line);border-radius:30px;padding:10px 15px;font-size:13.5px;font-weight:700;
  color:var(--ink-soft);background:var(--white);min-height:44px;transition:all .15s ease}
.chip:hover{border-color:var(--green);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--ink)}

.sec{padding:var(--s9) 0}
.sec-white{background:var(--white);border-block:1px solid var(--line-soft)}
.sec-tint{background:var(--green-tint);border-block:1px solid var(--line-soft)}
.grid{display:grid;gap:14px;margin-top:var(--s7)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--sh1)}
.card h3{font-size:16px;font-weight:700}
.card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:7px}
.card-hover{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--green)}
.vnum{width:34px;height:34px;border-radius:11px;background:var(--green-soft);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:15px}
.stime{align-self:flex-start;display:inline-block;background:var(--ink);color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:12.5px;padding:6px 12px;border-radius:30px}

.tcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh1);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--sh3);border-color:#D6E8BC}
.tcard-link{display:flex;gap:14px;padding:16px 16px 14px;align-items:flex-start}
.tcard-media{position:relative;flex-shrink:0}
.tcard-media img{width:100px;height:100px;border-radius:18px;object-fit:cover;background:var(--green-soft)}
.tcard-initials{width:100px;height:100px;border-radius:18px;background:var(--green-soft);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:30px}
.tcard-verify{position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;background:var(--white);
  border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh1)}
.tcard-body{flex:1;min-width:0}
.tcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tcard-top h3{font-size:17.5px;font-weight:800;letter-spacing:-.01em}
.tcard-role{font-size:13px;color:var(--ink-soft);margin-top:2px}
.tcard-rating{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;font-size:13px;background:var(--green-tint);
  padding:4px 8px;border-radius:20px}
.tcard-rating b{font-weight:800}
.tcard-reviews{color:var(--ink-mute);font-size:11.5px}
.tcard-meta{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:13px;color:var(--ink-soft);font-weight:600}
.tcard-meta i{color:var(--line)}
.tcard-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tcard-tag{background:var(--cream);border:1px solid var(--line-soft);border-radius:8px;padding:4px 10px;
  font-size:12px;font-weight:600;color:var(--ink-soft);text-transform:capitalize}
.tcard-foot{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line-soft);
  background:#FCFCF6;margin-top:auto}
.tcard-fee{display:flex;flex-direction:column;line-height:1.1}
.tcard-fee-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute)}
.tcard-fee-amt{font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:-.02em;margin-top:2px}
.tcard-next{font-size:11.5px;color:var(--ink-soft);font-weight:600;display:inline-flex;align-items:center;gap:5px;
  margin-left:auto}
.tcard-next-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.tcard-cta{margin-left:auto}
.tcard-next + .tcard-cta{margin-left:12px}

.dir-head{padding:var(--s7) 0 var(--s5)}
.filterbar{position:sticky;top:57px;z-index:20;background:rgba(251,251,243,.94);backdrop-filter:blur(10px);
  border-block:1px solid var(--line);margin-inline:calc(var(--gut)*-1);padding:12px var(--gut)}
.filterbar-in{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filterbar-in::-webkit-scrollbar{display:none}
.filterbar select{font:inherit;font-size:13.5px;font-weight:600;padding:9px 12px;border:1.5px solid var(--line);
  border-radius:30px;background:var(--white);color:var(--ink);flex-shrink:0;min-height:42px}
.dir-count{font-size:13.5px;color:var(--ink-soft);font-weight:600;margin:var(--s5) 0 var(--s4)}
.dir-grid{display:grid;gap:14px}

.profile-hero{position:relative;padding:var(--s6) 0 var(--s7);overflow:hidden}
.profile-hero-bg{position:absolute;inset:0;background:linear-gradient(180deg,var(--green-tint),transparent)}
.profile-hero .wrap{position:relative}
.profile-back{font-size:13.5px;color:var(--ink-soft);font-weight:600;display:inline-flex;gap:5px;align-items:center}
.profile-id{display:flex;gap:16px;align-items:flex-start;margin-top:16px}
.profile-photo{position:relative;flex-shrink:0}
.profile-photo img{width:110px;height:110px;border-radius:24px;object-fit:cover;background:var(--green-soft);
  box-shadow:var(--sh2)}
.profile-photo .tcard-initials{width:110px;height:110px;border-radius:24px;font-size:34px}
.profile-id h1{font-size:clamp(24px,6.4vw,32px);font-weight:800;letter-spacing:-.02em}
.profile-id .role{font-size:14.5px;color:var(--ink-soft);margin-top:4px}
.profile-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pbadge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px}
.pbadge-verify{background:var(--green-soft);color:var(--green-deep)}
.pbadge-rating{background:#FFF1E3;color:var(--orange-deep)}
.pbadge-plain{background:var(--sand);color:var(--ink-soft)}
.profile-quickstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:var(--s6)}
.pqstat{background:var(--white);padding:14px 12px;text-align:center}
.pqstat .n{font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:-.02em}
.pqstat .l{font-size:11px;color:var(--ink-mute);font-weight:600;margin-top:3px}
.profile-section{margin-top:var(--s7)}
.profile-section h2{font-size:19px;font-weight:800;letter-spacing:-.01em}
.profile-section p{font-size:15px;color:var(--ink-soft);line-height:1.65;margin-top:10px}
.profile-detail{margin-top:var(--s6)}
.profile-detail h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)}
.profile-detail .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:7px 14px;
  font-size:13px;font-weight:600;color:var(--ink-soft);text-transform:capitalize}

.bookrail{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);
  box-shadow:var(--sh2)}
.bookrail-fee{display:flex;align-items:baseline;gap:8px}
.bookrail-fee .amt{font-family:var(--font-head);font-weight:800;font-size:32px;letter-spacing:-.02em}
.bookrail-fee .per{font-size:13px;color:var(--ink-soft)}
.bookrail-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bookrail-slot{border:1.5px solid var(--line);border-radius:10px;padding:9px 13px;font-size:13.5px;font-weight:700;
  min-height:42px;display:inline-flex;align-items:center;transition:all .15s ease}
.bookrail-slot:hover{border-color:var(--green)}

.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
.grid-2{grid-template-columns:1fr}

.dark{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:var(--s8) var(--s6)}
.dark .k{color:var(--green)}
.dark h2{font-size:clamp(24px,6vw,32px);font-weight:800;margin-top:10px;color:#fff;letter-spacing:-.018em}
.dark .sub{font-size:15px;color:#B3BDA9;margin-top:12px;line-height:1.6;max-width:560px}
.pgrid{display:grid;gap:var(--s6);margin-top:var(--s7)}
.pitem{border-top:1px solid rgba(255,255,255,.16);padding-top:15px}
.pitem h3{font-size:15.5px;font-weight:700;color:#fff}
.pitem p{font-size:13.5px;color:#A9B49E;line-height:1.55;margin-top:6px}

.field{margin-bottom:var(--s5)}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
.field .hint{font-size:12.5px;color:var(--ink-mute);margin-top:5px}
.input,.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;padding:13px 15px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--white);color:var(--ink)}
.input:focus,.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green);outline:none}
.field textarea{min-height:96px;resize:vertical}
.err{color:var(--red);font-size:12.5px;margin-top:5px;font-weight:600}

.book-step{margin-top:var(--s8)}
.book-step-h{display:flex;align-items:center;gap:11px}
.book-step-n{width:30px;height:30px;border-radius:9px;background:var(--green-deep);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:14px}
.book-step-h h2{font-size:19px;font-weight:800;letter-spacing:-.01em}
.slotday{margin-top:var(--s5)}
.slotday h4{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute)}
.slotgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* date-first slot picker: a scrollable strip of days, then that day's times */
.datestrip{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 6px;margin-top:8px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.datestrip::-webkit-scrollbar{height:6px}
.datestrip::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
.datecard{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:84px;padding:10px 14px;border:1.5px solid var(--line);background:var(--white);border-radius:14px;
  cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .12s ease;text-align:center;box-sizing:border-box;}
.datecard:hover{border-color:var(--green)}
.datecard[aria-selected="true"]{border-color:var(--green-deep);background:var(--green-soft)}
.dc-wd{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.datecard[aria-selected="true"] .dc-wd{color:var(--green-deep)}
.dc-dm{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.dc-n{font-size:10.5px;font-weight:700;color:var(--ink-mute)}
.slottimes{margin-top:6px}
.slotband{margin-top:14px}
.slotband .sb-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)}
.slotband .slotgrid{margin-top:8px}

.slot{border:1.5px solid var(--line);background:var(--white);border-radius:10px;padding:11px 15px;
  font-size:14.5px;font-weight:700;min-height:46px;transition:all .15s ease}
.slot:hover{border-color:var(--green)}
.slot[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pickmini{display:flex;gap:10px;align-items:center;padding:12px 14px;background:var(--green-tint);
  border:1px solid var(--line-soft);border-radius:var(--radius);margin-top:var(--s5)}
.pickmini img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.pickmini-i{font-size:13.5px}
.pickmini-i b{font-weight:800}

.optcards{display:grid;gap:10px;margin-top:16px}
.optcard{border:1.5px solid var(--line);border-radius:var(--radius);padding:16px;cursor:pointer;
  display:flex;align-items:flex-start;gap:12px;transition:all .15s ease}
.optcard:hover{border-color:var(--green)}
.optcard[aria-pressed="true"]{border-color:var(--green);background:var(--green-tint)}
.optcard-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;margin-top:1px;
  position:relative;transition:all .15s ease}
.optcard[aria-pressed="true"] .optcard-radio{border-color:var(--green);background:var(--green)}
.optcard[aria-pressed="true"] .optcard-radio::after{content:"";position:absolute;inset:4px;background:#fff;border-radius:50%}
.optcard-b{flex:1}
.optcard-b h4{font-size:15px;font-weight:800}
.optcard-b p{font-size:13px;color:var(--ink-soft);margin-top:3px;line-height:1.45}
.optcard-price{text-align:right;flex-shrink:0}
.optcard-price .amt{font-family:var(--font-head);font-weight:800;font-size:18px;letter-spacing:-.02em}
.optcard-price .save{font-size:11px;font-weight:800;color:var(--green-deep);background:var(--green-soft);
  padding:2px 7px;border-radius:20px;display:inline-block;margin-top:4px}

.summary{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);
  box-shadow:var(--sh2)}
.summary h2{font-family:var(--font-body);font-size:16px;font-weight:800}
.srow{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:9px 0;color:var(--ink-soft)}
.srow b{color:var(--ink)}
.srow.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:16px}
.srow.total b{font-family:var(--font-head);font-size:24px;font-weight:800;letter-spacing:-.02em}
.srow.discount{color:var(--green-deep);font-weight:700}

.status{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px}
.status.paid{background:var(--green-soft);color:var(--green-deep)}
.status.pending{background:#FDF3DC;color:var(--amber)}
.status.failed,.status.cancelled{background:#FBE6E3;color:var(--red)}
.status.refunded{background:var(--sand);color:var(--ink-soft)}

.faq{margin-top:var(--s7);border-top:1px solid var(--line)}
.fi{border-bottom:1px solid var(--line)}
.fq{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:18px;
  text-align:left;font-size:15.5px;font-weight:700;line-height:1.35;min-height:58px}
.fq .cv{font-size:22px;font-weight:400;color:var(--green-deep);flex-shrink:0;transition:transform .25s ease}
.fi.open .cv{transform:rotate(45deg)}
.fa{max-height:0;overflow:hidden;transition:max-height .3s ease}
.fa p{font-size:14.5px;line-height:1.62;color:var(--ink-soft);padding-bottom:18px;max-width:660px}
.fa p+p{padding-top:12px}

.final{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:var(--s9) var(--s6);text-align:center;
  position:relative;overflow:hidden}
.final-bg{position:absolute;inset:0;pointer-events:none}
.final-bg span{position:absolute;width:360px;height:360px;border-radius:50%;top:-180px;right:-120px;
  background:radial-gradient(circle,rgba(127,203,39,.18),transparent 66%)}
.final .wrapin{position:relative}
.final h2{font-size:clamp(26px,6.6vw,38px);font-weight:800;line-height:1.08;max-width:560px;margin-inline:auto;color:#fff}
.final p{font-size:15.5px;color:#B3BDA9;margin-top:14px;max-width:420px;margin-inline:auto;line-height:1.58}
.final .btn{margin-top:24px}
footer.site{padding:var(--s8) 0 var(--s9)}
.ftop{display:flex;flex-direction:column;gap:20px}
.flinks{display:flex;flex-wrap:wrap;gap:18px;font-size:13px}
.flinks a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.flinks a:hover{color:var(--ink)}
.crisis{margin-top:var(--s7);padding:16px 18px;background:var(--sand);border-radius:var(--radius);
  font-size:13px;line-height:1.6;color:var(--ink-soft)}
.crisis b{color:var(--ink)}
.flegal{margin-top:18px;font-size:11.5px;color:var(--ink-mute);line-height:1.6}

.notice{padding:14px 16px;border-radius:var(--radius);font-size:14px;line-height:1.55;margin-bottom:var(--s5)}
.notice-info{background:var(--green-soft);color:var(--green-deep)}
.notice-warn{background:#FDF3DC;color:var(--amber)}
.notice-err{background:#FBE6E3;color:var(--red)}

.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:12px var(--gut);
  display:flex;align-items:center;gap:12px;box-shadow:0 -6px 20px -10px rgba(27,36,20,.2)}
.stickybar-fee{display:flex;flex-direction:column;line-height:1.1}
.stickybar-fee .l{font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--ink-mute);letter-spacing:.04em}
.stickybar-fee .a{font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:-.02em}
.stickybar .btn{margin-left:auto;flex:1;max-width:200px}

@media(min-width:560px){
  .dir-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .hero-ctas{flex-direction:row}
  .hero-ctas .btn{width:auto}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s8)}
}
@media(min-width:900px){
  :root{--gut:24px}
  .nav-links{display:flex}
  .wordmark{font-size:23px}
  .hero{padding:var(--s9) 0 var(--s10)}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s10);align-items:center}
  .hero h1{font-size:clamp(42px,5.2vw,60px)}
  .hero .lead{font-size:18px}
  .matcher{position:sticky;top:80px}
  .sec{padding:var(--s11) 0}
  .grid-3{grid-template-columns:repeat(3,1fr);gap:16px}
  .grid-4{grid-template-columns:repeat(4,1fr);gap:16px}
  .dir-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .dark{padding:var(--s10) var(--s9)}
  .final{padding:var(--s11) var(--s8)}
  .ftop{flex-direction:row;align-items:center;justify-content:space-between}
  .filterbar{top:64px}
  .profile-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s8);align-items:start}
  .profile-grid .bookrail{position:sticky;top:80px}
  .profile-quickstats{max-width:420px}
  .book-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s8);align-items:start}
  .book-grid .summary{position:sticky;top:80px}
  .stickybar{display:none}
  .hide-desktop{display:none}
}
@media(max-width:899px){
  .hide-mobile{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   GUIDED MATCHING (/match and /match/results)
   ========================================================================== */
.match-wrap{max-width:680px;margin:0 auto;}
.match-head{text-align:center;max-width:620px;margin:0 auto var(--s7);}
.match-head h1{font-size:clamp(24px,5.4vw,34px);font-weight:800;letter-spacing:-.02em;margin-top:10px;line-height:1.15;}
.match-head p{margin-top:12px;line-height:1.6;}

.matchform{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--sh2);padding:26px 24px;}
.match-progress{height:6px;border-radius:6px;background:var(--green-tint);overflow:hidden;}
.match-progress span{display:block;height:100%;background:var(--green);border-radius:6px;transition:width .3s ease;}
.match-count{font-size:12.5px;font-weight:700;color:var(--ink-mute);letter-spacing:.04em;text-transform:uppercase;margin-top:12px;}
.match-step{border:0;padding:0;margin:18px 0 0;}
.match-step legend{font-size:19px;font-weight:800;letter-spacing:-.01em;padding:0;line-height:1.3;}
.mopts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.mopts-wide{flex-direction:column;}
.mopt{position:relative;cursor:pointer;}
.mopt input{position:absolute;opacity:0;width:0;height:0;}
.mopt span{display:block;padding:12px 16px;border:1.5px solid var(--line);border-radius:var(--r-pill);
  font-size:14.5px;font-weight:600;color:var(--ink-soft);background:var(--white);transition:all .15s ease;}
.mopts-wide .mopt span{border-radius:14px;}
.mopt:hover span{border-color:var(--green);color:var(--ink);}
.mopt input:checked + span{background:var(--green-deep);border-color:var(--green-deep);color:#fff;}
.mopt input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px;}
.match-nav{display:flex;gap:10px;justify-content:space-between;margin-top:26px;}
.match-nav .btn{min-width:120px;}
#mnext,#mgo{margin-left:auto;}

/* results */
.match-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px;}
.mchip{background:var(--green-soft);color:var(--green-deep);font-size:13px;font-weight:700;padding:6px 13px;border-radius:20px;}
.mchip-edit{background:none;border:1.5px dashed var(--line);color:var(--ink-soft);text-decoration:none;}
.mchip-edit:hover{border-color:var(--green);color:var(--green-deep);}
.match-list{display:flex;flex-direction:column;gap:16px;max-width:760px;margin:var(--s7) auto 0;}
.mcard{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--sh1);padding:22px;transition:box-shadow .18s ease,border-color .18s ease;}
.mcard.is-strong{border-color:var(--green);}
.mcard:hover{box-shadow:var(--sh3);}
.mcard-best{position:absolute;top:-11px;left:22px;background:var(--green-deep);color:#fff;font-size:11.5px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:20px;}
.mcard-main{display:flex;align-items:center;gap:16px;}
.mcard-photo img,.mcard-photo .tcard-initials{width:76px;height:76px;border-radius:50%;object-fit:cover;background:var(--green-tint);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--green-deep);flex-shrink:0;}
.mcard-id{flex:1;min-width:0;}
.mcard-id h3{font-size:18px;font-weight:800;letter-spacing:-.01em;}
.mcard-id .role{font-size:13.5px;color:var(--ink-soft);margin-top:2px;}
.mcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:7px;font-size:12.5px;color:var(--ink-mute);font-weight:600;}
.mcard-meta i{opacity:.5;}
.mcard-fee{text-align:right;flex-shrink:0;}
.mcard-fee b{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.02em;display:block;}
.mcard-fee small{font-size:11px;color:var(--ink-mute);}
.mcard-why{margin-top:16px;padding:14px 16px;background:var(--green-tint);border-radius:14px;}
.why-lab{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--green-deep);}
.mcard-why ul{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.mcard-why li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--ink);line-height:1.4;}
.mcard-why li svg{flex-shrink:0;margin-top:3px;}
.mcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap;}
.mcard-next{font-size:13px;color:var(--ink-soft);font-weight:600;display:inline-flex;align-items:center;gap:7px;}
.mcard-next .dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;}
.mcard-cta{display:flex;gap:8px;}
@media(max-width:520px){
  .mcard-main{flex-wrap:wrap;}
  .mcard-fee{text-align:left;width:100%;padding-left:92px;margin-top:-8px;}
  .mcard-foot{flex-direction:column;align-items:stretch;}
  .mcard-cta{justify-content:stretch;}
  .mcard-cta .btn{flex:1;}
}

/* ==========================================================================
   MOBILE-FIRST FIXES (QA pass)
   The match navigation forced a ~428px minimum layout width on phones
   (3 buttons x 120px min-width + nowrap), making the browser zoom out.
   ========================================================================== */
html,body{max-width:100%;}
img,svg{max-width:100%;height:auto;}
*,*::before,*::after{min-width:0;}

@media(max-width:560px){
  /* let the step buttons wrap and shrink instead of forcing the viewport wide */
  .match-nav{flex-wrap:wrap;gap:10px;}
  .match-nav .btn{min-width:0;flex:1 1 auto;white-space:normal;padding-left:16px;padding-right:16px;}
  .match-nav .btn:first-child{flex:0 0 auto;}
  .matchform{padding-left:16px;padding-right:16px;}

  /* long CTA labels wrap rather than overflow */
  .btn{white-space:normal;text-align:center;}

  /* single-column cards everywhere on phones */
  .tcard-grid,.profile-grid,.book-grid{grid-template-columns:1fr !important;}
  .profile-quickstats{max-width:100%;}

  /* keep the sticky pay bar clear of the iOS home indicator */
  .stickybar{padding-bottom:calc(10px + env(safe-area-inset-bottom));}
}

/* ==========================================================================
   MOBILE-FIRST BOOKING FIXES (research-led)
   - auto-scroll + focus on the first invalid field (JS) needs visible states
   - tap targets >= 48px
   - single column, no side-by-side below 768px
   - sticky CTA must acknowledge the tap where the thumb is
   ========================================================================== */

/* invalid field state — colour is paired with a visible message, never alone */
input[aria-invalid="true"], textarea[aria-invalid="true"]{
  border-color:var(--red) !important;
  box-shadow:0 0 0 3px rgba(180,68,47,.12) !important;
}
[data-err]{color:var(--red);font-size:12.5px;line-height:1.45;margin-top:6px;}

/* feedback inside the sticky bar, so a failed tap is acknowledged in place */
.stickybar{flex-wrap:wrap;}
.sb-note{
  display:none;flex-basis:100%;order:3;margin:8px 0 0;
  font-size:12.5px;font-weight:700;color:var(--red);line-height:1.4;
}

/* price labels on the session/pack cards */
.optcard-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;}
.per-unit{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ink-mute);text-transform:uppercase;}
.pack-total{font-size:11.5px;font-weight:700;color:var(--ink-soft);}

@media(max-width:600px){
  /* comfortable thumb targets throughout the booking flow */
  .btn,.optcard,.slot,.datecard{min-height:48px;}
  .slot{padding:13px 16px;}
  .datecard{min-width:76px;}

  /* single column: no side-by-side fields on a phone */
  .book-grid,.field-row,.grid2,.grid3{grid-template-columns:1fr !important;}

  /* option cards stack their price under the description rather than
     squeezing it into a narrow right column */
  .optcard{align-items:flex-start;}
  .optcard-price{align-items:flex-start;text-align:left;margin-top:8px;}
  .optcard-b p{font-size:13px;}

  /* keep the last field clear of the sticky bar + keyboard */
  .book-form{padding-bottom:96px;}
}

/* ==========================================================================
   WHATSAPP FLOAT
   Sits above the sticky pay bar on pages that have one, and clears the iOS
   home indicator. Hidden entirely when no number is configured (the PHP
   partial renders nothing), so it never appears as a dead button.
   ========================================================================== */
.wa-float{
  position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;font-size:14.5px;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 10px 24px -8px rgba(37,211,102,.55),0 2px 6px rgba(27,36,20,.14);
  transition:transform .16s ease,box-shadow .2s ease;
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(37,211,102,.6);}
.wa-float:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
/* pages with a sticky pay bar: lift the float clear of it */
body:has(.stickybar) .wa-float{bottom:calc(88px + env(safe-area-inset-bottom));}
@media(max-width:600px){
  .wa-float{right:13px;padding:0 16px 0 13px;min-height:50px;}
}

/* ==========================================================================
   BOOKING — date/time picker + session option alignment (desktop & mobile)
   ========================================================================== */

/* date strip: never collapses, scrolls cleanly, cards equal size */
.datestrip{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 8px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.datecard{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;min-width:84px;min-height:74px;
  padding:10px 12px;box-sizing:border-box;}
.slottimes{margin-top:4px;}
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}
.slot{width:100%;text-align:center;box-sizing:border-box;}

/* session / pack options: aligned rows, price block never squashed */
.optcard{display:flex;gap:12px;align-items:flex-start;width:100%;box-sizing:border-box;
  text-align:left;padding:16px;}
.optcard-radio{flex:0 0 auto;margin-top:2px;}
.optcard-b{flex:1 1 auto;min-width:0;}
.optcard-b h4{font-size:15px;font-weight:800;}
.optcard-b p{font-size:13px;line-height:1.45;margin-top:3px;}
.optcard-price{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;
  gap:2px;text-align:right;white-space:nowrap;}

@media(max-width:600px){
  /* stack the price under the text so nothing is squeezed on a phone */
  .optcard{flex-wrap:wrap;}
  .optcard-b{flex:1 1 100%;}
  .optcard-price{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:baseline;
    justify-content:flex-start;gap:8px;text-align:left;margin-top:8px;
    padding-top:10px;border-top:1px solid var(--line-soft);}
  .slotgrid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));}
  .datecard{min-width:78px;}
}

/* ==========================================================================
   MATCH RESULTS — card + action alignment
   ========================================================================== */


/* breathing room between last tag and footer line in therapist cards */
.tcard-tags{margin-bottom:14px;}

/* ==========================================================================
   THERAPIST DIRECTORY CARD — alignment fix
   ========================================================================== */
.tcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);box-shadow:var(--sh1);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--sh3);}
.tcard-link{display:flex;flex-direction:column;gap:14px;padding:20px;text-decoration:none;color:inherit;}
.tcard-media{display:flex;align-items:center;gap:14px;}
.tcard-media img{width:100px;height:100px;border-radius:50%;object-fit:cover;flex:0 0 100px;background:var(--green-tint);}
.tcard-body{flex:1;}
.tcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.tcard-top h3{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.25;}
.tcard-role{font-size:13px;color:var(--ink-soft);margin-top:2px;}
.tcard-rating{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;
  color:var(--ink-soft);white-space:nowrap;flex-shrink:0;}
.tcard-reviews{font-weight:400;color:var(--ink-mute);}
.tcard-meta{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;color:var(--ink-soft);font-weight:600;}
.tcard-meta i{color:var(--line);font-style:normal;}
.tcard-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.tcard-tag{background:var(--green-tint);color:var(--ink-soft);font-size:11.5px;font-weight:700;
  padding:5px 10px;border-radius:20px;border:1px solid var(--line);}
.tcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 20px;border-top:1px solid var(--line);margin-top:auto;}
.tcard-fee{display:flex;flex-direction:column;gap:1px;}
.tcard-fee-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute);}
.tcard-fee-amt{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;}
.tcard-next{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:6px;}
.tcard-next-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;}
.tcard-cta{flex-shrink:0;}
.tcard-verify{position:absolute;bottom:-2px;right:-2px;}
.tcard-media{position:relative;}
.tcard-initials{width:100px;height:100px;border-radius:50%;background:var(--green-tint);
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--green-deep);}

/* directory grid */
.dir-grid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:20px;padding-bottom:40px;}
@media(min-width:760px){.dir-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1060px){.dir-grid{grid-template-columns:repeat(3,1fr);}}

/* directory header */
/* directory header */
.dir-head{padding:40px var(--gut) 0;}
.dir-head .k{margin-bottom:0;}
@media(max-width:600px){.dir-head{padding:28px 18px 0;}}

/* directory card footer: fee left, two buttons right */
.tcard-actions{display:flex;gap:8px;align-items:center;margin-left:auto;}
.tcard-actions .btn{white-space:nowrap;}

/* profile quickstats: children stretch equally — 2 or 3 items fill the same width */
.profile-quickstats{display:flex;gap:0;text-align:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.pqstat{flex:1 1 0;padding:16px 8px;border-right:1px solid var(--line);}
.pqstat:last-child{border-right:none;}
.pqstat .n{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;}
.pqstat .l{font-size:11.5px;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em;margin-top:4px;}

/* STICKY HEADER — bulletproof: ensure no ancestor blocks sticky positioning */
nav.site{position:sticky;position:-webkit-sticky;top:0;z-index:100;
  background:rgba(251,251,243,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);}


/* prevent horizontal overflow WITHOUT breaking sticky positioning
   overflow-x:hidden creates a scroll container that kills position:sticky
   overflow:clip does not — it clips visually without affecting layout */
body{overflow-x:clip;}

/* consent checkbox */
.consent-label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;cursor:pointer;}
.consent-label input{margin-top:3px;accent-color:var(--green-deep);flex:0 0 auto;}
.consent-label a{color:var(--green-deep);text-decoration:underline;}

/* consent checkbox alignment fix */
.consent-label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;cursor:pointer;}
.consent-label input[type="checkbox"]{width:20px;height:20px;margin:0;flex:0 0 20px;accent-color:var(--green-deep);}