/* The hero has its own width AND height budget. The rest of the page keeps
   its readable fluid scale. svh accounts for the browser bars on phones. */
:root{--header-height:clamp(64px,9svh,120px)}
.top{height:var(--header-height);padding-block:0}
.hero-context{display:none}

/* Two columns on laptops, desktop monitors and landscape tablets. */
@media(min-width:1101px) and (min-height:600px), (min-width:960px) and (min-height:600px) and (orientation:landscape){
  .top{--header-unit:min(1rem,calc(100svh / 58))}
  .top .brand{gap:calc(var(--header-unit)*.6875)}
  .top .brand img{width:calc(var(--header-unit)*2.75);height:calc(var(--header-unit)*2.75)}
  .top .brand b{font-size:max(14px,var(--header-unit))}
  .top .brand small{font-size:max(10px,calc(var(--header-unit)*.6875))}
  .top .nav{font-size:max(12px,calc(var(--header-unit)*.8125));gap:calc(var(--header-unit)*1.4375)}
  .top .btn{font-size:max(12px,calc(var(--header-unit)*.8125));padding:calc(var(--header-unit)*.6875) calc(var(--header-unit)*1.1875);gap:calc(var(--header-unit)*.75);min-height:44px}
  .top .btn>span{font-size:calc(var(--header-unit)*1.4375)}
  .hero{--u:min(calc(100vw / 90),calc(100svh / 57));min-height:0;padding-block:calc(var(--u)*1.25) calc(var(--u)*2);grid-template-columns:1.04fr 1fr;gap:calc(var(--u)*3)}
  .hero-copy{max-width:none}
  .hero h1{font-size:calc(var(--u)*5.875);line-height:1.07}
  .hero .h1-small{font-size:.62em}
  .hero .hello{font-size:max(20px,calc(var(--u)*1.625));margin-bottom:calc(var(--u)*.75)}
  .hero .tag{font-size:max(14px,calc(var(--u)*1.1875));padding:calc(var(--u)*.4375) calc(var(--u)*.8125);margin-block:calc(var(--u)*1.1875) calc(var(--u)*1.4375)}
  .hero .lead{font-size:max(14px,calc(var(--u)*1.1875));max-width:calc(var(--u)*33);margin-bottom:calc(var(--u)*1.4375)}
  .hero .journey{display:flex;font-size:max(14px,calc(var(--u)*1.0625));gap:calc(var(--u)*1.625);margin-bottom:calc(var(--u)*1.875)}
  .hero .journey li{min-height:calc(var(--u)*3);padding:calc(var(--u)*.625) calc(var(--u)*.875)}
  .hero .journey li+li:before{left:calc(var(--u)*-1.5);width:calc(var(--u)*1.375);font-size:calc(var(--u)*1.125)}
  .hero-copy>.btn{min-width:min(100%,calc(var(--u)*28));min-height:calc(var(--u)*5.125);padding:calc(var(--u)*1.125) calc(var(--u)*1.875);font-size:max(18px,calc(var(--u)*1.5));gap:calc(var(--u)*1.25)}
  .hero-copy>.btn>span{font-size:calc(var(--u)*1.875)}
  .hero .cta-note{font-size:max(12px,calc(var(--u)*.875));max-width:calc(var(--u)*33);margin-block:calc(var(--u)*1.125) calc(var(--u)*1.5)}
  .hero .hero-proof{font-size:max(12px,calc(var(--u)*.9375));gap:calc(var(--u)*.875)}
  .hero .proof-number{font-size:calc(var(--u)*3.5)}
  .hero .hero-proof i{height:calc(var(--u)*2.5);margin-inline:calc(var(--u)*.625)}
  .hero-art{width:min(100%,calc((100svh - var(--header-height) - var(--u)*7)*1.066667));max-width:none;margin:0;justify-self:center}
  .hero .sticker{width:calc(var(--u)*9.75);font-size:calc(var(--u)*.8125);padding:calc(var(--u)*.75) calc(var(--u)*.875);border-radius:calc(var(--u)*.9375)}
  .hero .sticker b{font-size:calc(var(--u)*1)}
  .hero .sketch-label{font-size:calc(var(--u)*.875)}
  .hero .motion-toggle{width:max(44px,calc(var(--u)*2.75));height:max(44px,calc(var(--u)*2.75));font-size:calc(var(--u)*1);bottom:calc(var(--u)*-2);right:0}
}
@media(min-width:960px) and (max-width:1100px) and (min-height:600px) and (orientation:landscape){
  .hero{--u:min(calc(100vw / 78),calc(100svh / 57))}
}

/* On wide, shallow windows the copy uses the width of its actual column.
   Shorter lines and a narrow measure otherwise leave a hole in the middle. */
@media(min-width:1101px) and (min-height:600px) and (min-aspect-ratio:2/1){
  .hero{--u:min(calc(100vw / 90),calc(100svh / 50));gap:calc(var(--u)*2);padding-block:calc(var(--u)*.75) calc(var(--u)*1.75)}
  .hero h1{font-size:min(8vw,20svh);line-height:.96}
  .hero .h1-small{font-size:.55em;line-height:1.1}
  .hero .hello{font-size:max(20px,calc(var(--u)*1.5));margin-bottom:calc(var(--u)*.5)}
  .hero .tag{margin-block:calc(var(--u)*.6) calc(var(--u)*.8)}
  .hero .lead{max-width:none;font-size:max(14px,calc(var(--u)*1.125));line-height:1.5;margin-bottom:calc(var(--u)*.75)}
  .hero .journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*1.25);font-size:max(14px,calc(var(--u)*1.125));margin-bottom:calc(var(--u)*.875)}
  .hero .journey li{min-height:calc(var(--u)*3);padding-inline:calc(var(--u)*.5)}
  .hero .journey li+li:before{left:calc(var(--u)*-1.2);width:calc(var(--u)*1.125)}
  .hero-copy>.btn{min-width:min(100%,calc(var(--u)*40));min-height:calc(var(--u)*4.25)}
  .hero .cta-note{max-width:none;font-size:max(12px,calc(var(--u)*.75));margin-block:calc(var(--u)*.5) calc(var(--u)*.75)}
  .hero .desktop-break{display:none}
  .hero .hero-proof{font-size:max(12px,calc(var(--u)*.875))}
  .hero .proof-number{font-size:calc(var(--u)*3)}
  .hero-art{display:grid;place-items:center;width:100%;justify-self:stretch}
  .hero .clinic-art{width:min(100%,calc((100svh - var(--header-height) - var(--u)*6)*1.066667))}
}

/* Compact layouts have the same essential content in the viewport. Long
   explanations are directly below it, also available without JavaScript. */
@media(max-width:959px),(max-height:599px),(max-width:1100px) and (orientation:portrait){
  :root{--header-height:64px}
  .top{padding-block:0}
  .top .nav{display:none}
  .hero .lead,.hero .cta-note,.hero .hero-proof{display:none}
  .hero-context{display:grid;gap:20px;padding-block:28px 16px;border-top:1px solid #e7e9ed}
  .hero-context>p{max-width:680px;margin:0;font-size:16px;line-height:1.65}
  .hero-context>p:last-child{font-size:14px;color:var(--muted)}
  .hero-context .hero-proof{font-size:13px;gap:12px}
  .hero-context .proof-number{font-size:44px}
  .hero-context .hero-proof i{height:36px;margin-inline:8px}
  .hero .sticker,.hero .sketch-label{display:none}
  .hero .journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;font-size:clamp(12px,3.25vw,17px);margin:0;align-items:stretch}
  .hero .journey li{min-height:38px;padding:6px 4px;border-radius:12px;gap:0;line-height:1.3;animation:none}
  .hero .journey li:before,.hero .journey li:after{display:none}
  .hero .journey li:nth-child(1){background:var(--green)}
  .hero .journey li:nth-child(2){background:var(--lilac)}
  .hero .journey li:nth-child(3){background:var(--pink)}
  .hero .journey li:nth-child(4){background:#a9c3ff}
  .hero-copy>.btn{width:100%;min-width:0;min-height:56px;font-size:clamp(17px,4.7vw,23px);padding:12px 14px;gap:12px;border-width:2px;box-shadow:3px 4px 0 var(--ink)}
  .hero-copy>.btn>span{font-size:25px}
  .hero .motion-toggle{top:auto;bottom:4px;right:0;width:44px;height:44px;font-size:16px}
}

/* Portrait: heading → complete scene → patient journey → large CTA. */
@media(max-width:959px) and (min-height:600px), (max-width:599px) and (orientation:portrait), (max-width:1100px) and (min-height:600px) and (orientation:portrait){
  .hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(120px,1fr) auto auto;gap:10px;align-items:stretch;min-height:calc(100svh - var(--header-height));height:calc(100svh - var(--header-height));padding-block:12px 22px}
  .hero-copy{display:contents}
  .hero .hello{grid-row:1;font-size:clamp(18px,2.8svh,28px);line-height:1.2;margin:0}
  .hero h1{grid-row:2;font-size:clamp(36px,min(12vw,7svh),76px);line-height:1.05;margin:0}
  .hero .h1-small{font-size:.64em;line-height:1.2}
  .hero .tag{grid-row:3;justify-self:start;font-size:clamp(12px,3.4vw,20px);line-height:1.35;padding:5px 8px;margin:0 0 4px;max-width:100%}
  .hero-art{grid-row:4;display:grid;place-items:center;width:100%;max-width:none;height:100%;min-height:0;margin:0;gap:0}
  .hero .clinic-art{width:100%;height:100%;min-height:0;max-height:100%;margin:0;aspect-ratio:auto}
  .hero .journey{grid-row:5}
  .hero-copy>.btn{grid-row:6;align-self:end}
}
@media(min-width:600px) and (max-width:959px) and (min-height:600px), (min-width:600px) and (max-width:1100px) and (min-height:600px) and (orientation:portrait){
  .hero{padding-inline:40px;gap:14px;padding-block:14px 30px}
  .hero-copy>.btn{min-height:68px;max-width:640px;justify-self:center}
  .hero .journey{width:100%;max-width:640px;justify-self:center;font-size:18px;gap:12px}
  .hero .journey li{min-height:48px}
  .hero .motion-toggle{right:3%;bottom:12px}
}
@media(max-width:599px) and (max-height:620px) and (orientation:portrait){
  :root{--header-height:56px}
  .hero{gap:7px;padding-block:6px 14px}
  .hero .hello{font-size:17px}
  .hero h1{font-size:clamp(32px,6.5svh,39px)}
  .hero .tag{font-size:12px;padding:4px 6px;margin-bottom:0}
  .hero .journey li{min-height:32px}
  .hero-copy>.btn{min-height:52px;padding-block:10px}
}
@media(max-width:599px) and (min-height:650px) and (orientation:portrait){
  .hero .journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:clamp(14px,3.9vw,17px);counter-reset:patient-step}
  .hero .journey li{min-height:42px;gap:7px}
  .hero .journey li:before{display:inline;position:static;width:auto;content:counter(patient-step,decimal-leading-zero);counter-increment:patient-step;font-size:11px;color:var(--ink)}
  .hero-copy>.btn{min-height:64px}
}

/* A phone turned sideways keeps text and the whole scene side by side. */
@media(min-width:600px) and (max-height:599px), (max-height:599px) and (orientation:landscape){
  :root{--header-height:52px}
  .top{padding-inline:24px;font-size:14px}
  .top .brand img{width:32px;height:32px}
  .top .brand b{font-size:14px}
  .top .brand small{font-size:10px}
  .top .btn{font-size:12px;min-height:40px;padding:8px 14px;gap:10px}
  .hero{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;align-items:center;min-height:calc(100svh - var(--header-height));padding:10px 24px 18px}
  .hero-copy{display:block;max-width:none}
  .hero .hello{font-size:clamp(16px,4svh,24px);margin-bottom:6px}
  .hero h1{font-size:clamp(32px,min(6.5vw,10svh),60px);line-height:1.05}
  .hero .h1-small{font-size:.64em}
  .hero .tag{font-size:clamp(11px,2.8svh,16px);line-height:1.3;padding:4px 6px;margin:10px 0 14px}
  .hero .journey{font-size:clamp(12px,2.8svh,16px);gap:6px;margin-bottom:12px}
  .hero .journey li{min-height:32px;padding:4px 2px;border-radius:9px}
  .hero-copy>.btn{min-height:48px;padding:10px;font-size:clamp(16px,4svh,22px)}
  .hero-art{display:block;width:min(100%,calc((100svh - var(--header-height) - 40px)*1.066667));max-width:none;margin:0;justify-self:center}
  .hero .clinic-art{width:100%;height:auto;aspect-ratio:640/600;margin:0}
  .hero .motion-toggle{bottom:0;right:0}
  .hero-context{grid-template-columns:1.5fr 1fr;column-gap:32px}
}
@media(max-width:700px) and (max-height:599px) and (orientation:landscape){
  .hero{grid-template-columns:1.35fr 1fr;gap:14px;padding-inline:16px}
  .hero .hello{font-size:15px}
  .hero h1{font-size:32px}
  .hero .tag{font-size:10px;margin-block:8px 10px}
  .hero .journey{font-size:11px;gap:4px;margin-bottom:10px}
  .hero-copy>.btn{font-size:15px;gap:8px}
}