/* Mobile public homepage: consistent spacing, readable navigation, and a roomy demo. */
@media (max-width:760px){
  :root{--cw:calc(100vw - 48px)}
  html body .container{width:var(--cw)!important}
  html body header.header,
  html body header.header.scrolled{gap:12px!important;padding-inline:20px!important;background:#e9e8e4!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html body header.header .brand{white-space:nowrap;font-size:22px!important}
  html body header.header .account .pill{padding-inline:14px!important;font-size:12px!important}
  html body header.header .account .pill::after{display:none}
  html body header.header .account{gap:6px!important}
  html body header.header .account .menu{width:44px!important;height:44px!important;flex:none}
  html body header.header .nav.open{
    inset:64px 0 auto!important;width:100%;margin:0!important;
    max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;
    align-items:stretch!important;flex-wrap:nowrap;
    padding:10px 16px 16px!important;gap:0!important;
    background:#e9e8e4!important;opacity:1;
    border-radius:0 0 20px 20px;
    box-shadow:0 18px 32px -24px rgba(23,24,27,.35)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  html body header.header .nav.open :is(a,.m-login){
    display:flex!important;align-items:center!important;flex:none;
    width:100%;height:48px!important;margin:0;padding:0 12px!important;
    color:#17181b!important;font-size:16px!important;line-height:1.3!important;
    text-align:left;box-shadow:none!important;border-radius:8px;
  }
  html body header.header .nav.open .m-login{border-top:1px solid rgba(23,24,27,.12);border-radius:0;margin-top:4px}
  html body header.header .nav.open :is(a,.m-login):hover{background:rgba(23,24,27,.06)!important}
  html body header.header :is(a,button):focus-visible{outline-color:#17181b}
  html body .hero{padding:108px 24px 0!important}
  html body .hero .eyebrow{margin:0!important;font-size:11px!important;line-height:1.5;letter-spacing:.01em}
  html body .hero h1{width:100%;max-width:100%;margin:24px 0 0!important;font-size:clamp(26px,7.8vw,44px)!important;line-height:1.15!important;letter-spacing:-.035em!important}
  html body .hero h1 span{white-space:nowrap}
  html body .hero .hero-sub{max-width:34ch!important;margin:24px auto 0!important;font-size:16px!important;line-height:1.65!important;text-wrap:pretty}
  html body .hero .hsign{width:100%;max-width:420px;margin:32px auto 0!important}
  html body .hero .hsign-row{display:flex;flex-direction:column;gap:12px!important;width:100%}
  html body .hero .hsign-row .smsg:empty{display:none}
  html body .hero .hs-google,html body .hero .hs-email{width:100%;height:52px!important;min-height:52px;flex:none;margin:0!important}
  html body .hero .hs-google{gap:12px;font-size:15px!important}
  html body .hero .hs-email input{min-width:0;font-size:16px!important;padding-left:18px}
  html body .hero .hs-legal{max-width:36ch;margin:18px auto 0!important;font-size:12px;line-height:1.65}
  html body .hero .hero-stage{width:100%;margin-top:40px!important;padding:16px 12px 0;border-radius:24px!important}
  html body .hero .hero-stage .appwin{height:540px!important}
  html body .hero .appwin .workspace{padding:56px 14px 16px!important}
  html body .hero .appwin.chat .thread{flex:1 1 0;min-height:0;padding-bottom:14px}
  html body .hero .appwin .topbar{padding-inline:14px;gap:8px}
  html body .hero .appwin .greet{font-size:25px!important;line-height:1.2!important;text-wrap:balance}
  html body .hero .appwin .tb-title{min-width:0;font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body .hero .appwin .tb-icons{flex:none;gap:2px}
  html body .hero .appwin .composer{padding:12px!important;border-radius:20px!important}
  html body .hero .appwin .composer textarea{height:42px!important;min-height:42px!important;max-height:42px!important;font-size:16px;line-height:1.4;resize:none}
  html body .hero .appwin .compose-tools{margin-top:8px;gap:6px}
  html body .hero .appwin .ai-disclaimer{font-size:11px!important;line-height:1.5!important;margin:10px 0 0!important}
  html body .hero .appwin .think3{padding:12px}
  html body .hero .appwin .tk-l li{grid-template-columns:18px minmax(0,1fr) 16px;gap:8px;font-size:13px;line-height:1.45}
  html body .hero .appwin .tk-l li span{min-width:0;overflow-wrap:anywhere}
  html body .hero .appwin .cmp{width:100%;table-layout:fixed;font-size:12px}
  html body .hero .appwin .cmp :is(th,td){padding:8px 6px;overflow-wrap:anywhere}
  html body :is(.feat,.how-praus,.bench4,.plans2,.faq3,.end-cta){padding-top:80px!important}
  html body :is(.feat,.how-praus,.bench4,.plans2,.faq3,.end-cta)::before{top:32px}
  html body :is(.feat,.how-praus,.bench4,.plans2,.faq3,.end-cta)::after{top:27px}
  html body .s-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:32px!important}
  html body .s-head .s-title{font-size:34px!important;line-height:1.12!important;letter-spacing:-.03em}
  html body .s-head .s-copy{margin:0!important;font-size:16px!important;line-height:1.65!important}
  html body .b6{gap:24px!important}
  html body .b6 .fc{padding:20px!important;gap:24px!important}
  html body .b6 .fc-t h3{font-size:23px!important;line-height:1.2!important;margin-bottom:12px!important}
  html body .b6 .fc-t p{font-size:15px!important;line-height:1.65!important}
  html body .how-heading{gap:20px}
  html body .how-heading .s-copy{font-size:16px;line-height:1.65}
  html body .pctl{gap:24px!important;margin-bottom:32px!important}
  html body .pgrid{gap:24px!important}
}
@media (max-width:360px){
  html body header.header,html body header.header.scrolled{padding-inline:12px!important}
  html body header.header .brand{font-size:20px!important;gap:5px}
  html body header.header .account .pill{padding-inline:12px!important;font-size:12px!important;gap:8px!important}
}