/* Public-site readability and form-field polish, loaded after each page's own styles.
   Body 18px (17px on phones), controls 17px, supporting text 16px, small print at least 14px. */
html{-webkit-text-size-adjust:100%}
body{font-size:18px;line-height:1.6;color:#17332f}
p,li,dd,td,th,label,summary,figcaption{line-height:1.6}
p{margin-top:0;margin-bottom:.85em}
h1,h2{font-weight:700;line-height:1.18}
h3{font-weight:700;line-height:1.3}
.small,.muted,small{font-size:16px;line-height:1.55}
@media (max-width:600px){body{font-size:17px}}

/* Fields: clean white, subtle border, one chevron on selects. Native controls and keyboard/mobile pickers are kept. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:17px;line-height:1.4;color:#17332f}
select{-webkit-appearance:none;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23153e3c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px!important;text-overflow:ellipsis;cursor:pointer}
select::-ms-expand{display:none}
select:not(.dc-bare),input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],textarea{border:1px solid #c9d6cb;border-radius:10px;background-color:#fff;box-shadow:none}
select:hover{border-color:#9fb5a8}
select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #21675b;outline-offset:2px}
button,.btn{font-size:17px}
/* Homepage search: the label box already provides the border, so the select inside stays borderless. */
#dr-simple .dc-search select{border:0!important;background-color:transparent;font-size:17px;padding-left:0;padding-top:4px;padding-bottom:4px;min-height:32px}
#dr-simple .dc-search label{font-size:14px;letter-spacing:.8px}
#dr-simple .dc-search-panel .dc-search select{font-size:17px}
/* Long addresses (emails, URLs) wrap instead of widening the page on phones. */
a,.textlink{overflow-wrap:anywhere}
.join>*,.wrap>*{min-width:0}
/* Homepage hero, per the approved mockup: larger intro text with comfortable spacing. */
#dr-simple .dc-hero-copy>p{font-size:19px;line-height:1.6;max-width:520px;color:#2f4a46}
#dr-simple .dc-hero-copy li{font-size:16px;color:#2f4a46}
#dr-simple h1{font-weight:700}
@media (max-width:600px){#dr-simple .dc-hero-copy>p{font-size:17px}}

/* Heading hierarchy shared by all public pages (homepage mockup scale):
   page title 36-54px, section heading 28-38px, sub-heading 20-22px; bold, tight tracking. */
main h1,#dr-simple h1,body>h1{font-size:clamp(36px,4.4vw,54px)!important;font-weight:700!important;line-height:1.12!important;letter-spacing:-.025em!important}
main h2,#dr-simple h2,body>h2{font-size:clamp(28px,3vw,38px)!important;font-weight:700!important;line-height:1.2!important;letter-spacing:-.02em!important}
main h3,#dr-simple h3{font-size:clamp(20px,1.7vw,22px)!important;font-weight:700!important;line-height:1.3!important;letter-spacing:-.01em!important}
#dr-simple .dc-search-head h2{font-size:clamp(24px,2.2vw,28px)!important}
#dr-simple .dc-hero h1,#dr-simple h1{font-size:clamp(38px,4.6vw,56px)!important}
/* Card and panel titles stay one step smaller than section headings. */
.clinic-card h3,.dc-card h3,.ds-tier h3,article h3{font-size:clamp(19px,1.5vw,21px)!important}
.profile-hero h1,.vp-hero h1{font-size:clamp(34px,4vw,48px)!important}
@media (max-width:600px){main h2,#dr-simple h2{font-size:28px!important}}
#dr-simple .dc-hero h1,#dr-simple h1{font-size:clamp(34px,3.9vw,50px)!important}
#dr-simple .dc-hero-copy{padding-bottom:64px}
@media (max-width:900px){#dr-simple .dc-hero-copy{padding-bottom:0}}

/* Homepage search panel: compact fields and buttons (mockup refinement). */
#dr-simple .dc-search-panel{padding:22px 28px 20px}
#dr-simple .dc-search-head{margin-bottom:14px}
#dr-simple .dc-search-head h2{font-size:clamp(24px,2.1vw,28px)!important;line-height:1.2!important}
#dr-simple .dc-search-head p{font-size:17px;margin-top:2px}
#dr-simple .dc-search-panel .dc-search{align-items:center;gap:14px}
#dr-simple .dc-search-panel .dc-search label{display:flex;flex-direction:column;justify-content:center;min-height:56px;height:56px;padding:6px 14px;gap:0;font-size:14px;line-height:1.1;letter-spacing:.06em}
#dr-simple .dc-search-panel .dc-search select{font-size:17px;line-height:1.3;min-height:0;height:auto;margin:2px 0 0;padding-top:0;padding-bottom:0}
#dr-simple .dc-search-panel .dc-search-button{height:48px;min-height:48px;width:auto;min-width:160px;max-width:180px;justify-self:end;align-self:center;padding:0 22px;gap:14px;font-size:17px}
#dr-simple .dc-search-panel .dc-help-find{margin-top:16px;padding-top:16px}
#dr-simple .dc-search-panel .dc-help-find strong{font-size:17px}
#dr-simple .dc-search-panel .dc-help-find span{font-size:16px}
#dr-simple .dc-search-panel .dc-help-find a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;font-size:17px}
@media (max-width:760px){
  #dr-simple .dc-search-panel{padding:18px 16px}
  #dr-simple .dc-search-panel .dc-search label{height:60px;min-height:60px}
  #dr-simple .dc-search-panel .dc-search-button{width:100%;max-width:none;min-height:52px;height:52px;justify-self:stretch}
  #dr-simple .dc-search-panel .dc-help-find a{width:100%;min-height:48px}
}

/* ---- Type scale for every public page except the homepage (which has its own approved sizes) ----
   Cause of the earlier inconsistency: body size only reached text that inherited it, while most pages
   set explicit px sizes on paragraphs, cards, FAQs and lists. These rules state the scale once:
   body prose 18px (17px on phones), supporting text and clinic details 16px, controls 17px, small print 14px+. */
body:not(:has(#dr-simple)) :is(main,.wrap) :is(p,li,dd,blockquote){font-size:18px!important;line-height:1.6!important}
body:not(:has(#dr-simple)) :is(main,.wrap) :is(details p,details li){font-size:18px!important}
body:not(:has(#dr-simple)) :is(main,.wrap) summary{font-size:18px!important;line-height:1.45}
/* Supporting text: cards, assessment tiers, credentials, story cards, clinic profile details, captions, notes */
body:not(:has(#dr-simple)) :is(.ds-tier,.ds-rule,.vf-card,.credential-detail,.credential-item,.story-body,.profile-section,.uk-support-grid,.contact-panel,.profile-gallery,.gf-note,.gf-msg,.ab-notes,.question-list,.tool-demo,.small,.muted,.local-note,.draft-copy) :is(p,li,div,span,a,label,small,figcaption,strong){font-size:16px!important;line-height:1.55!important}
body:not(:has(#dr-simple)) :is(.small,.muted,.local-note,figcaption,small){font-size:16px!important}
body:not(:has(#dr-simple)) :is(.eyebrow,.credential-kind,.ds-subtitle,.badge,.tag){font-size:14px!important}
/* Controls */
body:not(:has(#dr-simple)) :is(main,.wrap) :is(button,.btn,select,input:not([type=checkbox]):not([type=radio]),textarea,.ds-action){font-size:17px!important}
body:not(:has(#dr-simple)) :is(main,.wrap) :is(label){font-size:16px}
/* Article body (blog posts) stays at the full 18px even though it sits in a card-like wrapper */
body:not(:has(#dr-simple)) article :is(p,li){font-size:18px!important}
body:not(:has(#dr-simple)) .story-body :is(p,li){font-size:16px!important}
@media (max-width:600px){
  body:not(:has(#dr-simple)) :is(main,.wrap) :is(p,li,dd,blockquote,details p,details li,summary,article p,article li){font-size:17px!important}
  body:not(:has(#dr-simple)) :is(.ds-tier,.ds-rule,.vf-card,.credential-detail,.credential-item,.story-body,.profile-section,.uk-support-grid,.contact-panel,.profile-gallery,.gf-note,.gf-msg,.ab-notes,.question-list,.tool-demo,.small,.muted,.local-note,.draft-copy) :is(p,li,div,span,a,label,small,figcaption,strong){font-size:16px!important}
  body:not(:has(#dr-simple)) .story-body :is(p,li){font-size:16px!important}
}

/* Homepage search: visible decorative chevron on both fields (Treatment, Destination).
   Drawn with borders on the label rather than a background image, so it shows in Safari and Chromium alike,
   sits above the select's own appearance, and never takes clicks (pointer-events:none). */
#dr-simple .dc-search-panel .dc-search label{position:relative}
#dr-simple .dc-search-panel .dc-search label::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-2px;border-right:2.5px solid #153e3c;border-bottom:2.5px solid #153e3c;transform:translateY(-50%) rotate(45deg);pointer-events:none;z-index:1}
#dr-simple .dc-search-panel .dc-search select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:34px!important;background-image:none!important;width:100%}
#dr-simple .dc-search-panel .dc-search label:focus-within::after{border-color:#21675b}