/* Shared sizing and deliberate layouts for desktop, tablet and phone. */
html{scroll-padding-top:24px}
body{min-width:0}
img{max-width:100%}
main,section,article,header,footer,nav,main div{min-width:0}
h2,h3,p,summary,a,button{overflow-wrap:break-word}
button,a.button{touch-action:manipulation}
.site-header,.hero,.section,footer#contact{width:100%;max-width:1200px;margin-inline:auto}
.site-header{padding:20px clamp(16px,3vw,40px) 24px}
.hero,.section{padding-inline:clamp(20px,3.5vw,42px)}
.section{padding-block:clamp(48px,6vw,80px)}
.site-controls{flex-wrap:wrap;padding:12px clamp(16px,3vw,32px);gap:10px 20px}
.site-controls>span{flex:1 1 240px}
.site-controls button{flex:0 0 auto;max-width:100%;min-height:44px}
.masthead{width:100%;max-width:1080px}
.masthead img{width:100%;height:auto}
.site-header nav{width:100%;gap:6px 28px;padding:10px 16px}
.site-header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center}
.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;min-height:0;padding-block:40px 65px}
.hero-copy>p{max-width:600px}
.hero h2{font-size:clamp(40px,5vw,68px)}
.actions{flex-wrap:wrap;gap:18px 24px}
.actions a{max-width:100%}
.button{white-space:normal;text-align:center;line-height:1.4}
.hero-art{width:100%;min-height:0;aspect-ratio:1/1.18}
.hero-owl{left:auto;bottom:auto;width:100%;max-width:440px;height:100%;max-height:530px;object-fit:contain}
.sun{width:85%;height:auto;aspect-ratio:1/1.06;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg)}
.hero-art .floating{top:3%;right:0;max-width:85%;font-size:16px}
.hero-art .bubble{left:0;bottom:0;max-width:75%;font-size:18px}
.star-one{left:0;top:8%}
.ribbon{width:100%;transform:none;gap:14px 40px;padding:20px;text-align:center}
.how-intro{grid-template-columns:minmax(0,1fr) minmax(130px,210px);gap:32px}
.intro-pencil{width:100%;height:280px;justify-self:center}
.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.step{min-height:0;padding:28px}
.step p{max-width:none}
.demo-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.demo-intro p{max-width:530px}
.playground{width:100%;max-width:680px;justify-self:center}
.playground-top{gap:8px 16px;letter-spacing:normal}
.demo-character img{width:min(220px,100%);height:260px}
.hero-picker{gap:10px;flex-wrap:wrap}
.hero-picker button{flex:0 0 58px;width:58px;min-height:64px}
.question{padding:24px}
.question h3{font-size:clamp(25px,2.5vw,30px)}
.answers{grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr));align-items:stretch}
.answers button{width:100%;height:auto;min-width:0;min-height:60px;font-size:22px;padding:12px;line-height:1.45}
.answers.text-answers{grid-template-columns:1fr}
.answers.text-answers button{font-size:20px}
.sound-button{padding:12px 20px;min-height:48px;margin:14px 0}
.demo-tools{gap:8px 16px}
.demo-tools button{padding:10px 4px;min-height:44px}
.emergency{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:16px}
.emergency button{min-height:44px;margin:0;padding:8px 16px}
.emergency p{flex-basis:100%;margin:4px 0 0}
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.feature-card{min-height:0;padding:28px}
.model-sequence{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.friend-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.friend img{height:clamp(280px,32vw,380px)}
.friend-audio button{min-height:48px}
.night-section{grid-template-columns:minmax(0,1fr) minmax(0,310px);gap:40px;margin-block:24px}
.night-phone{width:100%;max-width:310px}
.night-cradle{height:260px}
.night-contacts{flex-wrap:wrap}
.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.screen{height:380px;padding:12px}
.download-grid,.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.download-card{padding:30px}
.download-card .button{gap:10px}
.installation-video{display:block;width:100%;height:auto;max-height:480px;aspect-ratio:9/16;object-fit:contain;margin:20px auto;border-radius:18px;background:#192744}
.closing{width:100%;display:flex;gap:32px;padding:48px 24px}
.closing>div{min-width:0;max-width:650px}
.closing h2{font-size:clamp(32px,4vw,45px)}
.closing img.pencil-poses{width:clamp(100px,18vw,210px);height:280px}
footer#contact{padding:56px 24px 105px}
.contact-links{gap:16px 32px}
.contact-links a{max-width:100%;overflow-wrap:anywhere}
.global-stop{max-width:calc(100% - 24px);min-height:48px;right:12px;bottom:max(12px,env(safe-area-inset-bottom))}

/* Tablet: give the task its own row and keep cards comfortably wide. */
@media(min-width:640px) and (max-width:1023px){
  .hero{gap:24px;padding-top:28px}
  .hero h2{font-size:clamp(40px,5.5vw,56px)}
  .hero-copy>p:not(.eyebrow):not(.micro){font-size:19px}
  .hero-art .bubble{font-size:16px;padding:12px}
  .hero-art .floating{font-size:15px;padding:8px 12px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps .step:last-child{grid-column:1/-1}
  .demo-section{grid-template-columns:minmax(0,1fr);gap:28px}
  .demo-intro{padding-top:0}
  .demo-intro p{max-width:none}
  .demo-character img{width:240px;height:280px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-grid>article:last-child:nth-child(odd){grid-column:1/-1}
  .model-sequence{grid-template-columns:repeat(3,minmax(0,1fr))}
  .night-section{gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,270px)}
  .night-cradle{height:230px}
  .night-phone{padding-inline:12px}
  .night-contacts{gap:5px}
  .night-contacts span{padding:8px}
  .guide-grid{gap:18px}
  .guide-grid h3{font-size:24px}
  .screen{height:320px;padding:8px}
  .download-card{padding:24px}
}

/* Phones: one reading column, large tap targets and full-width answers. */
@media(max-width:639px){
  .site-header{padding:12px 12px 20px}
  .site-header nav{font-size:16px;gap:2px 16px;border-radius:20px;margin-top:12px;padding:8px 10px}
  .site-controls{font-size:16px;padding:10px 16px}
  .site-controls>span{flex-basis:100%}
  .site-controls button{width:auto;max-width:none;padding:9px 16px}
  .hero,.section{padding-inline:20px}
  .hero{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:24px 48px}
  .hero h2{font-size:clamp(35px,9vw,48px);line-height:1.15}
  .hero .lead{font-size:22px}
  .hero-copy>p:not(.eyebrow):not(.micro){font-size:19px}
  .eyebrow{letter-spacing:.06em;font-size:16px}
  .hero-art{width:100%;max-width:390px;aspect-ratio:1/1.15;margin:0 auto}
  .hero-owl{width:100%;height:100%;max-height:none}
  .hero-art .floating{font-size:16px;top:0}
  .hero-art .bubble{font-size:17px;padding:14px 18px}
  .actions{align-items:stretch;flex-direction:column;width:100%}
  .actions .button{width:100%}
  .actions .text-link{min-height:44px;display:inline-flex;align-items:center}
  .ribbon{gap:10px 22px;font-size:17px}
  .section{padding-block:48px}
  .section-heading{margin-bottom:30px}
  .section-heading h2,.how-intro h2{font-size:clamp(32px,8vw,40px)}
  .how-intro{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:24px}
  .intro-pencil{width:155px;height:220px}
  .steps,.demo-section,.feature-grid,.friend-grid,.guide-grid,.download-grid,.plan-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .step{padding:26px}
  .demo-intro{padding-top:0}
  .demo-intro p{max-width:none}
  .demo-character{min-height:0;padding:18px 12px 10px}
  .demo-character img{width:210px;height:245px}
  .playground{border-radius:24px;box-shadow:5px 7px 0 #e2ead8}
  .playground-top{display:flex;flex-direction:column;text-align:center;padding:14px}
  .hero-picker{padding-inline:10px;gap:8px}
  .hero-picker button{flex-basis:52px;width:52px;min-height:60px;padding:4px}
  .hero-picker img{width:42px;height:48px}
  .question{padding:20px 14px}
  .question h3{font-size:27px}
  .answers{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .answers button{font-size:22px;padding:12px 8px}
  .answers.text-answers{grid-template-columns:minmax(0,1fr)}
  .answers.text-answers button{font-size:19px}
  #feedback{font-size:18px;min-height:0;margin-block:18px}
  .emergency{gap:7px;padding-inline:10px}
  .emergency button{font-size:17px;padding:8px 13px}
  .feature-card{padding:26px}
  .feature-card h3{font-size:26px}
  .model-sequence{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .model-sequence>div:last-child{grid-column:1/-1}
  .model-sequence>div{padding:20px 12px}
  .friend{padding:24px 18px}
  .friend img{height:clamp(280px,80vw,360px)}
  .night-section{grid-template-columns:minmax(0,1fr);gap:24px;margin-block:20px;border-radius:28px;padding:36px 20px}
  .night-section h2{font-size:36px}
  .night-phone{max-width:300px;padding-inline:12px}
  .night-cradle{height:245px}
  .night-contacts span{padding:9px 10px}
  .screen{height:400px;padding:12px}
  .guide-grid article{max-width:460px;justify-self:center;width:100%}
  .guide-grid h3{font-size:26px}
  .download-card,.plan{padding:28px 22px}
  .download-card .button{padding:15px 16px}
  .closing{gap:12px;padding:36px 20px;align-items:center}
  .closing h2{font-size:32px}
  .closing img.pencil-poses{width:100px;height:190px}
  .closing .button{padding:14px 18px;font-size:16px;gap:10px}
  .contact-links{display:flex;flex-direction:column;align-items:center;gap:14px}
  .contact-links a{font-size:19px;margin:0}
}

@media(max-width:359px){
  .hero,.section{padding-inline:16px}
  .site-controls{padding-inline:16px}
  .closing{flex-direction:column;text-align:center}
  .closing img.pencil-poses{width:110px;height:170px}
  .question{padding-inline:12px}
  .question h3{font-size:25px}
  .hero-picker{gap:6px}
  .hero-picker button{flex-basis:48px;width:48px}
  .model-sequence{grid-template-columns:minmax(0,1fr)}
  .model-sequence>div:last-child{grid-column:auto}
}