/* Smartphone and small tablet layout. Loaded after all base styles. */
@media(max-width:800px){
 body{font-size:16px;overflow-x:clip}
 .wrap{width:calc(100% - 32px);max-width:100%}
 .topbar .nav{height:68px;gap:10px}
 .topbar .brand img{width:88px;height:46px;max-height:46px}
 .topbar .menu-toggle{width:44px;height:44px}
 .topbar .nav>.button{min-height:44px;padding:10px 12px;font-size:12px}
 .topbar .nav nav{top:68px;gap:6px;display:none;padding:15px 16px}
 .topbar .nav nav.open{display:grid;grid-template-columns:1fr 1fr}
 .topbar .nav nav a{min-height:46px;font-size:14px;justify-content:flex-start;padding:10px}
 .hero-grid{display:flex;flex-direction:column;min-height:0;gap:0}
 .hero-copy{text-align:center;width:100%;padding:30px 0 0}
 .hero h1{font-size:clamp(32px,6.7vw,43px);line-height:1.1;margin:16px 0}
 .hero-copy>p{font-size:16px;line-height:1.6;max-width:560px;margin:auto}
 .hero .pill{font-size:11px}
 .hero .actions{justify-content:center;margin:22px 0 17px}
 .hero .actions .button{min-height:48px;font-size:15px;padding:13px 23px}
 .hero .checks{justify-content:center;font-size:12px;gap:8px 14px}
 .hero-art{width:100%;height:auto;aspect-ratio:1.6;max-width:580px;margin:23px auto 12px}
 .hero-art .real-chat-laptop{width:93%;bottom:26px}
 .hero-art .phone{width:clamp(90px,21vw,130px);height:clamp(174px,40vw,239px);left:0;bottom:8px}
 .hero-art .phone .mini-brand{font-size:12px}
 .hero-art .phone .play-disc{left:calc(50% - 20px);width:40px;height:40px;top:32%}
 .hero-art .float-icon{top:8px;right:0;width:48px;height:48px}
 .hero-wave{opacity:.12}
 .radios{padding:27px 0}
 .radios h2,.features h2{font-size:26px;line-height:1.2}
 .radio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .radio-card{height:80px}
 .sub{font-size:14px;line-height:1.65;margin-top:10px}
 .features{padding:31px 0 22px}
 .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .feature-grid article{display:flex;flex-direction:column;padding:18px 15px;gap:11px;min-width:0}
 .feature-grid h3{font-size:17px;line-height:1.25;margin-bottom:8px}
 .feature-grid p{font-size:14px;line-height:1.6}
 .feature-grid .icon{width:29px;height:29px}
 .feature-deep-toggle>summary{min-height:48px;font-size:14px;padding:16px}
 .feature-deep-toggle .onepage-products{padding:13px}
 .onepage-product>summary{padding:14px;gap:11px;min-height:64px}
 .onepage-product>summary b{font-size:16px}
 .onepage-product>summary small{font-size:12px}
 .onepage-benefits,.onepage-mini-steps{grid-template-columns:1fr}
 .onepage-product-body>p,.onepage-product-faq p{font-size:14px;line-height:1.7}
 .stories{padding:30px 0 15px}
 .section-heading h2,.onepage-section-head h2{font-size:28px;line-height:1.2}
 .section-heading p,.onepage-section-head p{font-size:15px;line-height:1.65}
 .stories .story,.stories .story.reverse{display:flex;flex-direction:column;gap:13px;padding:12px 0 28px}
 .story.reverse>div:first-child{order:2}
 .story>div:not(.story-art){width:100%}
 .story-art{height:225px;width:100%;max-width:440px;margin:auto}
 .story h2{font-size:27px;line-height:1.2}
 .story p{font-size:16px;line-height:1.65}
 .story .checks{font-size:13px;gap:10px 17px}
 .story .note{font-size:13px;line-height:1.65}
 .app-art .phone{left:23%;width:113px;height:200px}
 .android-badge{right:17%;top:43px;width:68px;height:68px}
 .app-label{right:9%;bottom:25px;font-size:14px}
 .player-card{width:88%;height:157px;padding:20px}
 .player-card h3{font-size:17px}
 .player-card p{font-size:13px}
 .microphone{right:7px}
 .community-extras{padding:31px 0!important}
 .extra-grid{grid-template-columns:1fr;gap:12px}
 .extra-grid article{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 15px;padding:21px 17px}
 .extra-art{grid-row:1/3;height:100%;font-size:24px;gap:5px}
 .extra-grid h3{font-size:20px;line-height:1.25;margin:0 0 9px}
 .extra-grid p{font-size:15px;line-height:1.6}
 .live-design-section{padding:32px 0!important}
 .live-design-intro{grid-template-columns:1fr;gap:21px}
 .live-design-intro h2{font-size:29px}
 .live-design-intro p{font-size:16px;line-height:1.65}
 .live-design-capabilities{grid-template-columns:1fr;gap:9px}
 .live-design-capabilities li{flex-direction:row;align-items:center;padding:14px}
 .live-design-capabilities li b{font-size:15px}
 .live-design-capabilities li span{font-size:13px}
 .editor-workspace{display:block;min-height:0}
 .editor-elements,.editor-settings{display:none}
 .editor-toolbar{padding:12px 10px;gap:9px;min-height:58px}
 .editor-title>b{width:28px;height:28px}
 .editor-title>span{font-size:13px}
 .editor-title small{font-size:9px}
 .editor-page,.editor-preview-badge{display:none}
 .editor-devices{margin-left:auto}
 .editor-devices button{min-height:36px;padding:7px 8px;font-size:10px}
 .editor-stage{padding:18px 9px}
 .editor-canvas{width:100%}
 .editor-canvas[data-device=tablet]{width:92%}
 .editor-canvas[data-device=mobile]{width:78%}
 .editor-stage-caption{font-size:12px;line-height:1.5;margin-top:12px}
 .editor-mobile-settings{display:flex;flex-wrap:wrap;gap:14px;font-size:13px}
 .editor-mobile-settings button{width:34px;height:34px}
 .live-design-bottom{font-size:12px;gap:12px;line-height:1.6;flex-direction:column;align-items:flex-start}
 .live-design-bottom>a{font-size:14px;min-height:40px;display:flex;align-items:center}
 .start-section-heading{padding-top:32px}
 .start-section-heading h2{font-size:28px}
 .start-section-heading p{font-size:15px;line-height:1.65}
 .start-info{display:grid;grid-template-columns:1fr;gap:16px;padding-top:5px;padding-bottom:24px}
 .beta-card,.requirements-card{padding:25px;min-width:0}
 .beta-card h2,.requirements-card h2{font-size:26px;line-height:1.2}
 .beta-card>p{font-size:15px;line-height:1.7}
 .price{font-size:62px}
 .price small{font-size:14px;line-height:1.5}
 .requirements-card li b{font-size:16px;line-height:1.4}
 .requirements-card li span{font-size:14px;line-height:1.65}
 .requirements-card ul{gap:21px}
 .steps{padding:5px 0 29px}
 .steps h2{font-size:27px;line-height:1.2}
 .step-grid{display:grid;grid-template-columns:1fr;gap:23px;padding:8px 4px}
 .step-grid article{align-items:center;gap:17px}
 .step-grid article:not(:last-child):after{content:none}
 .step-icon{width:57px;height:57px}
 .step-grid article>div:last-child{display:grid;grid-template-columns:25px minmax(0,1fr);gap:4px 10px}
 .step-grid article>div:last-child>span{margin:0}
 .step-grid h3{font-size:20px}
 .step-grid article p{font-size:15px;line-height:1.6;max-width:none;grid-column:2}
 .register-shell{display:block}
 .register-pitch{display:flex;padding:27px 23px;align-items:stretch}
 .register-pitch h2{font-size:29px}
 .register-pitch>p{font-size:15px;line-height:1.65;max-width:none}
 .register-pitch .checks{display:grid;grid-template-columns:1fr;gap:10px}
 .register-pitch .checks li{font-size:14px}
 .register-pitch .register-laptop{width:100%;max-width:430px;margin:26px auto 3px;align-self:center}
 .register-form{padding:27px 20px}
 .register-form>h2{font-size:25px}
 .register-form>.sub{font-size:14px}
 .form-progress{font-size:12px;gap:8px}
 .form-progress span{gap:5px}
 .registration-step legend{font-size:18px}
 .form-grid{grid-template-columns:1fr;gap:16px}
 .form-grid .full{grid-column:auto}
 .form-grid label{font-size:15px;line-height:1.5}
 .form-grid input,.registration-captcha input{font-size:16px;min-height:48px}
 .form-grid small,.registration-step-intro{font-size:13px;line-height:1.65}
 .slug-field span{font-size:12px;padding:0 7px}
 .registration-public-preview span,.registration-public-preview small{font-size:12px}
 .registration-public-preview strong{font-size:17px}
 .availability-status,.privacy-note{font-size:13px;line-height:1.65}
 .check{font-size:14px;gap:12px;padding:13px}
 .check input{width:26px;height:26px;flex-basis:26px}
 .step-controls{gap:10px;flex-wrap:wrap}
 .step-controls .btn,.btn-wide{min-height:48px;font-size:14px;padding:12px 15px}
 .faq{display:flex;flex-direction:column;gap:22px;padding:33px 0 23px}
 .faq-title h2{font-size:27px}
 .faq-title p{font-size:15px;line-height:1.65}
 .faq-list{width:100%}
 .faq-list details{font-size:15px;padding:15px 16px;margin-bottom:9px}
 .faq-list summary{line-height:1.5;min-height:24px}
 .help-hub-links{grid-template-columns:1fr;gap:11px}
 .help-hub-links>a{padding:19px 16px}
 .help-hub-links b{font-size:16px}
 .help-hub-links small{font-size:13px}
 .compact-legal-inner nav{gap:10px 17px}
 .compact-legal-inner nav a,.compact-legal-inner nav button{min-height:36px;display:flex;align-items:center;font-size:13px}
 .compact-legal-inner>p{font-size:12px}
 .preview-vision-button{right:10px;bottom:10px;min-height:44px;padding:10px 12px;font-size:12px}
 .preview-cookie-actions>button{min-height:48px;font-size:14px}
}
@media(max-width:380px){
 .wrap{width:calc(100% - 26px)}
 .feature-grid{grid-template-columns:1fr}
 .feature-grid article{display:grid;grid-template-columns:30px minmax(0,1fr);gap:13px}
 .feature-grid h3{font-size:17px}.feature-grid p{font-size:14px}
 .form-progress{font-size:10px;gap:5px}
 .form-progress b{width:21px;height:21px}
 .editor-title small{display:none}.editor-devices button{padding:6px;font-size:9px}
 .extra-grid article{grid-template-columns:55px minmax(0,1fr);gap:0 12px}
}

/* Readable cards and a compact registration introduction. */
@media(max-width:800px){
 .feature-grid{grid-template-columns:1fr}
 .feature-grid article{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:18px}
 .feature-grid h3{margin-bottom:6px}
 .register-pitch{padding:24px 22px;gap:0}
 .register-pitch h2{font-size:26px;margin:12px 0}
 .register-pitch>p{margin:0}
 .register-pitch>.checks,.register-pitch>.register-laptop{display:none}
}
.preview-expand{display:block;margin:12px auto 0;border:1px solid #bedbff;border-radius:10px;background:#fff;color:#0755bd;padding:12px 18px;min-height:44px;font-family:inherit;font-weight:600;font-size:14px;line-height:1.4;cursor:pointer;position:relative;z-index:3}
.preview-expand:focus-visible,.preview-detail-close:focus-visible{outline:3px solid #137aff;outline-offset:3px}
.hero-art>.preview-expand{position:absolute;bottom:0;right:0;font-size:12px;padding:8px 12px}
.preview-detail-dialog{padding:0;width:min(1200px,96vw);max-width:96vw;max-height:92dvh;border:1px solid #9fc6ef;border-radius:16px;background:#eef6ff;color:#092746;box-shadow:0 25px 90px #00152c70}
.preview-detail-dialog::backdrop{background:#03162cce}
.preview-detail-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 16px;background:#fff;position:sticky;top:0;z-index:10}
.preview-detail-head h2{font-size:18px;margin:0}
.preview-detail-close{border:1px solid #b8cce3;border-radius:8px;background:#fff;color:#123253;min-width:44px;min-height:44px;padding:10px;font-size:16px;cursor:pointer}
.preview-detail-scroll{overflow:auto;max-height:calc(92dvh - 100px);padding:20px;overscroll-behavior:contain}
.preview-detail-hint{font-size:13px;padding:0 16px 12px;margin:0;background:#fff}
.preview-detail-scroll>.real-chat-laptop{position:relative!important;width:1050px!important;min-width:1050px;max-width:none!important;inset:auto!important;transform:none!important;margin:0 auto}
.preview-detail-scroll>.editor-showcase{width:1100px;min-width:1100px;margin:0 auto}
.preview-detail-scroll .editor-workspace{display:grid;grid-template-columns:155px minmax(0,1fr) 180px}
.preview-detail-scroll .editor-elements,.preview-detail-scroll .editor-settings{display:flex}
.preview-detail-scroll .editor-canvas{width:100%}
@media(prefers-reduced-motion:reduce){.preview-detail-dialog{scroll-behavior:auto}}