/* Responsive refinement — 2026-11-12 */
.premium{--page-gutter:clamp(20px,5vw,64px)}
.premium header,.premium main,.premium footer{min-width:0}
.premium header{gap:24px;flex-wrap:wrap;padding:24px var(--page-gutter)}
.premium .brand{font-size:clamp(24px,2.5vw,32px);line-height:1.5;letter-spacing:.04em;max-width:100%;overflow-wrap:anywhere}
.premium .brand small{font-size:10px;line-height:1.6;letter-spacing:.16em}
.premium nav{flex-wrap:wrap;gap:20px}
.premium .hero,.premium.clinic .hero{width:100%;max-width:1240px;margin-inline:auto;padding:36px var(--page-gutter) 64px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.premium .hero-copy{container-type:inline-size}
.premium .hero h1{font-size:clamp(25px,3.25vw,44px);font-size:clamp(25px,8cqi,44px);letter-spacing:.015em;line-height:1.65}
.premium .heading-line{display:inline;white-space:normal!important;overflow-wrap:normal;line-break:strict}
.premium h1,.premium h2,.premium h3{word-break:normal;overflow-wrap:break-word;line-break:strict;text-wrap:wrap}
.premium h2{font-size:clamp(23px,2.5vw,34px);letter-spacing:.02em;line-height:1.65;margin:14px 0 24px}
.premium h3{font-size:20px;letter-spacing:.015em;line-height:1.7}
.premium .section{padding:72px var(--page-gutter)}
.premium .split{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,4vw,56px)}
.premium .three,.premium .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.premium .photo-story{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px}
.premium .copy-unit{display:inline}
.premium .hero p,.premium .story-copy p,.premium .feature p,.premium .step p,.premium .caption-body,.premium .flow-intro{font-size:15px;line-height:2;letter-spacing:.02em}
.premium .ribbon{gap:16px 32px;flex-wrap:wrap;padding:22px var(--page-gutter)}
.premium .ribbon span{white-space:normal}
.premium .art{width:100%;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.premium .photo-frame{width:100%;aspect-ratio:4/5;box-shadow:none;flex:none}
.premium .photo-frame img,.premium .story-image-frame img{display:block;width:100%;height:100%;object-fit:cover}
.premium .art-label,.premium .photo-caption{position:static;inset:auto;max-width:100%;margin:0;transform:none}
.premium .art-label{padding:16px 18px;font-size:13px;line-height:1.85;box-shadow:none}
.premium .photo-caption{font-size:20px;line-height:1.5}
.premium .story-image-frame{width:100%;aspect-ratio:16/9;overflow:hidden}
.premium .photo-story .story-image-frame{aspect-ratio:5/4}
.premium .story-photo figcaption{padding:18px 0;letter-spacing:.025em}
.premium .btn{min-height:48px;max-width:100%;gap:18px;padding:16px 24px;white-space:normal;line-height:1.65;align-items:center}
.premium summary{min-height:44px;gap:16px;align-items:flex-start}
.premium summary:after{flex:none}
.premium dialog{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;padding:28px;width:min(540px,calc(100% - 32px));margin:auto}
.premium dialog h2{font-size:24px;padding-right:24px}
.premium .choice{min-height:48px;font-size:15px;overflow-wrap:anywhere}
.premium .close{min-width:44px;min-height:44px}
.premium footer{flex-wrap:wrap;padding:32px var(--page-gutter)}
@media(min-width:701px) and (max-width:1000px){
 .premium .three,.premium .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .premium .three>:last-child,.premium .steps>:last-child{grid-column:1/-1}
 .premium header nav{display:none}
 .premium .hero,.premium.clinic .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
 .premium .hero h1{font-size:clamp(25px,3.35vw,33px)}
 .premium .split,.premium .photo-story{grid-template-columns:minmax(0,1fr);gap:28px}
 .premium .art{max-width:none}
 .premium .hero-watermark{display:none}
}
@media(max-width:700px){
 .premium header{padding:22px var(--page-gutter);flex-direction:row;gap:12px}
 .premium .brand{font-size:clamp(23px,6.2vw,28px);letter-spacing:.015em;white-space:normal}
 .premium header nav{display:none}
 .premium .hero,.premium.clinic .hero{grid-template-columns:minmax(0,1fr);gap:32px;padding:18px var(--page-gutter) 44px}
 .premium .hero-copy{padding:0}
 .premium .hero h1{font-size:clamp(24px,7.3vw,39px);letter-spacing:0;margin:18px 0 22px}
 .premium .hero-copy>.eyebrow{font-size:11px;letter-spacing:.09em}
 .premium .hero p{font-size:14px;line-height:1.95;margin-bottom:24px}
 .premium .mobile-break{display:none!important}
 .premium .hero-watermark{display:none}
 .premium .hero:before{inset:48% 0 0 12%}
 .premium .hero .btn,.premium .cta .btn{width:100%;justify-content:space-between}
 .premium .art{width:100%;max-width:420px;margin:0 auto;gap:12px}
 .premium .photo-frame{aspect-ratio:5/6;border-radius:48% 48% 3px 3px}
 .premium .photo-caption{font-size:18px}
 .premium .section{padding:48px var(--page-gutter)}
 .premium .split,.premium .three,.premium .steps,.premium .photo-story{grid-template-columns:minmax(0,1fr);gap:24px}
 .premium .three,.premium .steps{gap:8px}
 .premium .feature,.premium .step{padding:24px 0}
 .premium h2{font-size:clamp(23px,5.9vw,29px);line-height:1.7;margin:12px 0 22px}
 .premium h3{font-size:19px;text-wrap:wrap}
 .premium .feature p,.premium .step p,.premium .story-copy p,.premium .caption-body,.premium .flow-intro{font-size:14px;line-height:2}
 .premium .flow-intro{margin-bottom:28px}
 .premium .story-photo{margin:0 0 28px}
 .premium .story-image-frame,.premium .photo-story .story-image-frame{aspect-ratio:4/3}
 .premium .caption-lead{font-size:16px;line-height:1.8}
 .premium .ribbon{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:12px}
 .premium .cta{padding:48px var(--page-gutter)}
 .premium .cta p{font-size:14px}
 .premium dialog{padding:24px 20px}
 .premium dialog h2{font-size:22px}
 .premium details p{padding:8px 0;font-size:14px}
 .premium footer{flex-direction:column;gap:16px;line-height:1.85}
}
@media(prefers-reduced-motion:reduce){.premium *{animation:none!important;transition:none!important}}

/* 2026-11-13: wrap headings by phrase and use a readable tablet composition. */
.premium h2 .heading-line{display:inline-block;max-width:100%;vertical-align:top;white-space:normal!important;overflow-wrap:break-word}
.premium .hero-copy,.premium .story-copy,.premium .split>div,.premium .feature,.premium .step{min-width:0}
.premium .hero-photo,.premium .story-image-frame img{max-width:100%}
.premium .caption-body .desktop-break{display:none}
@media(min-width:701px) and (max-width:900px){
 .premium .hero,.premium.clinic .hero{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:24px;padding-bottom:52px}
 .premium .hero-copy{width:100%;max-width:620px;margin-inline:auto}
 .premium .hero h1{font-size:clamp(32px,4.5vw,40px)}
 .premium .art{width:100%;max-width:460px;margin-inline:auto}
 .premium .section{padding-top:56px;padding-bottom:56px}
 .premium .hero:before{inset:42% 0 0 15%}
 .premium .ribbon{gap:14px 24px}
}
@media(max-width:700px){
 .premium h2 .heading-line{letter-spacing:0}
 .premium .story-photo figcaption{padding-top:16px;padding-bottom:20px}
 .premium .photo-story{padding-top:32px;padding-bottom:40px}
 .premium .hero h1 .heading-line{display:inline-block;max-width:100%;letter-spacing:0}
 .premium .btn{min-height:52px}
 .premium dialog{padding-top:22px;padding-bottom:max(22px,env(safe-area-inset-bottom));max-height:calc(100dvh - 24px)}
}
@media(max-width:360px){
 .premium{--page-gutter:18px}
 .premium h2{font-size:22px}
 .premium .hero h1{font-size:24px}
 .premium .hero-copy>.eyebrow{letter-spacing:.035em;font-size:10px}
 .premium .hero-copy>.eyebrow:before{width:20px;margin-right:8px}
 .premium .btn{padding-inline:18px;gap:12px}
 .premium footer strong{font-size:10px;letter-spacing:0}
}