/* A shared design scale: 1440 viewport pixels = 16px per rem.
   All desktop typography, controls, borders, radii and spacing follow it. */
html{font-size:100%}
.wrap{width:100%;max-width:none}
.brand>img{width:2.75rem;height:2.75rem}
.hero-copy,.hero-art{min-width:0}
.hero-copy>.btn{min-height:5.125rem;min-width:min(100%,28rem);padding:1.125rem 1.875rem;font-size:1.5rem;gap:1.25rem}
.hero-copy>.btn>span{font-size:1.875rem}
.journey{font-size:1.0625rem;font-weight:600;gap:1.625rem;margin-bottom:1.875rem}
.journey li{padding:.625rem .875rem;min-height:3rem;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.journey li+li:before{left:-1.5rem;width:1.375rem;text-align:center;font-size:1.125rem}
.cta-note{font-size:.875rem;max-width:33rem;margin-block:1.125rem 1.5rem}
.hero-proof{font-size:.9375rem;gap:.875rem}
.proof-number{font-size:3.5rem}
.hero-proof i{height:2.5rem;margin-inline:.625rem}
.motion-toggle{width:2.75rem;height:2.75rem;font-size:1rem}
.dialog-close{width:2.75rem;height:2.75rem}

@media(min-width:1101px){
  html{font-size:calc(100vw / 90)}
  .wrap{padding-inline:4rem}
  .top{padding-block:1.5rem;gap:1.375rem}
  .hero{grid-template-columns:1.04fr 1fr;gap:3rem;min-height:calc(100svh - 6.5rem);padding-block:1.75rem 3.5rem}
  h1{font-size:5.875rem}
  .h1-small{font-size:.62em}
  h2{font-size:3.25rem}
  .hello{font-size:1.625rem;margin-bottom:.75rem}
  .tag{font-size:1.1875rem;padding:.4375rem .8125rem;margin-block:1.1875rem 1.4375rem}
  .lead{font-size:1.1875rem;max-width:33rem;margin-bottom:1.4375rem}
  .hero-art{margin-right:0}
  .sticker{width:9.75rem;font-size:.8125rem;padding:.75rem .875rem;border-radius:.9375rem}
  .sticker b{font-size:1rem}
  .sketch-label{font-size:.875rem}
  .section{padding-block:4.375rem}
  .service p{font-size:.9375rem}
  .service h3{font-size:1.375rem}
  .card-foot{font-size:.75rem}
  .format p,.format li,.process-list p,.faq details p{font-size:.9375rem}
  .facts span,.principle p,.contact-handle{font-size:.875rem}
}

/* Tablets keep readable text and move the scene below the copy. */
@media(min-width:681px) and (max-width:1100px){
  .wrap{padding-inline:2.5rem}
  .hero{grid-template-columns:minmax(0,1fr);gap:4rem;min-height:0;padding-block:2rem 3rem}
  .hero-copy{max-width:48rem}
  h1{font-size:clamp(4.25rem,8.7vw,6rem)}
  .h1-small{font-size:.62em}
  .hello{font-size:1.75rem}
  .tag{font-size:1.1875rem}
  .lead{font-size:1.1875rem;max-width:40rem}
  .hero-art{width:min(90%,43rem);margin:0 auto}
  .sticker{width:9.75rem;font-size:.8125rem;padding:.75rem .875rem}
  .sticker b{font-size:1rem}
  .sketch-label{font-size:.875rem}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service p,.format p,.format li,.process-list p{font-size:.9375rem}
  .card-foot{font-size:.75rem}
  .tool-panel{grid-template-columns:minmax(0,1fr)}
  .input-grid label{font-size:.875rem}
}

/* Phone layout: large controls and two clearly ordered rows of steps. */
@media(max-width:680px){
  .wrap{padding-inline:1.25rem}
  .top{padding-block:1rem;gap:.75rem}
  .top .brand{min-width:0;flex-shrink:1;gap:.5rem}
  .top .brand img{width:2.25rem;height:2.25rem;flex-shrink:0}
  .top .brand b{font-size:.875rem}
  .top .brand small{font-size:.625rem;line-height:1.35;max-width:11rem}
  .top .btn{min-height:2.75rem;font-size:.75rem;padding:.625rem .75rem;gap:.375rem;flex-shrink:0}
  .hero{grid-template-columns:minmax(0,1fr);gap:3rem;padding-block:1.5rem 2rem;min-height:0}
  .hero-copy{max-width:none}
  h1{font-size:clamp(2.875rem,12.6vw,5rem);line-height:1.08}
  .h1-small{font-size:.64em}
  .hello{font-size:1.5rem;margin-bottom:1rem}
  .tag{max-width:100%;font-size:1rem;line-height:1.4;padding:.625rem .75rem;margin-block:1.25rem 1.5rem}
  .lead{font-size:1.0625rem;line-height:1.6;max-width:none;margin-bottom:1.5rem}
  .journey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;font-size:1rem;margin-bottom:1.5rem;counter-reset:patient-step}
  .journey li{min-height:3.25rem;padding:.625rem .5rem;gap:.4rem}
  .journey li:before,.journey li+li:before{counter-increment:patient-step;content:counter(patient-step,decimal-leading-zero);position:static;width:auto;font-size:.6875rem;color:var(--blue-ink);font-weight:700}
  .journey li:nth-child(odd):after{content:'→';position:absolute;right:-1.375rem;width:1.25rem;text-align:center;color:var(--blue);font-size:1.25rem}
  .hero-copy>.btn{width:100%;min-width:0;min-height:4.5rem;padding:1rem .875rem;font-size:clamp(1.0625rem,4.7vw,1.375rem);gap:.75rem;box-shadow:.25rem .3125rem 0 var(--ink)}
  .hero-copy>.btn>span{font-size:1.625rem}
  .cta-note{font-size:.875rem;line-height:1.55;margin-block:1.25rem 1.5rem}
  .desktop-break{display:none}
  .hero-proof{font-size:.8125rem;gap:.625rem}
  .proof-number{font-size:3rem}
  .hero-proof i{margin-inline:.25rem;height:2.5rem;flex-shrink:0}
  .hero-art{width:100%;max-width:34rem;gap:1rem;margin:0 auto 1rem}
  .hero-art .sticker{font-size:.8125rem;padding:1rem .875rem;line-height:1.5}
  .hero-art .sticker b{font-size:.9375rem;margin-bottom:.375rem}
  .hero-art .sketch-label{font-size:.6875rem;left:8%;top:-.625rem}
  .hero-art .sketch-label svg{width:3.5rem;right:-2.75rem}
  .hero-art .motion-toggle{width:2.75rem;height:2.75rem;top:.75rem}
  .section{padding-block:3rem}
  .section-head>p,.strategy p,.about-lead,.about>div>p,.system-row>p,.format p,.format li,.process-list p,.faq details p,.contact-card p{font-size:1rem}
  .service-grid{grid-template-columns:minmax(0,1fr);gap:1rem}
  .service{padding:1.5rem}
  .service h3{font-size:1.5rem}
  .service p{font-size:1rem}
  .step-mark{font-size:2.25rem;margin-bottom:1.25rem}
  .card-foot{font-size:.8125rem}
  .check-list li{font-size:.9375rem;line-height:1.5}
  .facts span,.principle p{font-size:.875rem}
  .format .btn,.contact-card .btn{width:100%;min-height:3.25rem;font-size:1rem;padding:.875rem 1rem}
  .format .pill{font-size:.75rem}
  .process-list{gap:1.75rem 1.25rem}
  .process-list h3{font-size:1.125rem;overflow-wrap:break-word}
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .tabs button{min-height:3.25rem;padding:.75rem;font-size:.875rem}
  .tool-panel{padding:1.5rem 1.25rem}
  .tool-panel p{font-size:1rem}
  .tool-panel .fineprint{font-size:.875rem}
  .formula-note{font-size:.8125rem}
  .input-grid{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .input-grid label{display:grid;grid-template-columns:1fr 5.5rem;gap:1rem;align-items:center;font-size:.9375rem}
  .input-grid input{font-size:1.375rem;margin:0;min-height:3.25rem;padding:.625rem}
  .calc-output span,.calc-bottom span{font-size:.8125rem}
  .calc-bottom{flex-wrap:wrap;gap:.5rem}
  .checklist label{font-size:.9375rem;padding:.875rem;gap:.75rem}
  .checklist input{width:1.25rem;height:1.25rem}
  .text-button{min-height:2.75rem;font-size:.875rem}
  .faq summary{font-size:1rem;padding-block:1.25rem}
  .contact-handle{font-size:.875rem}
  .chat-header b{font-size:.9375rem}
  .chat-header div span,.message-label,.message-bottom{font-size:.75rem}
  .message-card .chat-bubble{font-size:.9375rem}
  .footer>p,.footer>a:not(.brand){font-size:.8125rem}
  .dialog-content{padding:3.5rem 1.25rem 1.5rem}
  .dialog-content .btn{width:100%;min-height:3.5rem;font-size:1rem;padding:.875rem}
  .brief-list li{font-size:1rem}
  .brief-list span,.dialog-content [role=status]{font-size:.875rem}
}
@media(max-width:370px){
  .wrap{padding-inline:1rem}
  .top .brand small{max-width:8rem;font-size:.5625rem}
  .top .brand b{font-size:.8125rem}
  .top .brand img{width:2rem;height:2rem}
  .top .btn{font-size:.6875rem;padding-inline:.625rem}
  .hero-proof{font-size:.75rem;gap:.5rem}
  .proof-number{font-size:2.75rem}
  .contact-card{padding:1.5rem 1.125rem}
}