/* Phone and tablet layouts. The approved desktop theme and button finishes stay in place. */
.mobile-menu{display:none}

@media(max-width:860px){
 :root{--gutter:clamp(20px,5vw,32px);--mobile-safe:max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
 html{scroll-padding-top:calc(88px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
 .wrap{width:calc(100% - 2 * max(var(--gutter),var(--mobile-safe)))}
 .nav{position:relative;min-height:72px;height:auto;padding-block:max(12px,env(safe-area-inset-top,0px)) 12px;gap:16px}
 .nav>.brand{font-size:23px;gap:9px;flex:none}
 .nav .brand-mark{width:25px;height:27px}
 .nav>.links,.nav>.nav-install{display:none}
 .mobile-menu{display:block;margin-left:auto}
 .mobile-menu>summary{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px 0 16px;list-style:none;font:500 15px/1.4 var(--text);color:var(--ink);cursor:pointer}
 .mobile-menu>summary::-webkit-details-marker{display:none}
 .mobile-menu[open]>summary{text-decoration:underline;text-underline-offset:6px}
 .mobile-menu nav{position:absolute;z-index:2;top:calc(100% - 1px);left:0;right:0;display:grid;padding:10px 18px;background:#fcfcf8;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 35px -22px #23315966}
 .mobile-menu nav a{display:flex;align-items:center;min-height:48px;padding:9px 0;font-size:15px;line-height:1.5;color:#4a5344}
 .mobile-menu nav a+a{border-top:1px solid #e5e7de}

 .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:14px;gap:30px}
 .hero-copy{min-width:0;display:block;padding:12px 0 0}
 .hero h1{font-size:clamp(40px,10.8vw,64px);line-height:1.08;letter-spacing:-.055em;white-space:normal;overflow-wrap:normal}
 .hero-description{max-width:36em;margin-top:24px;font-size:17px;line-height:1.7}
 .hero-actions{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;margin-top:26px;max-width:none;width:100%}
 .hero-actions>.btn.primary,.hero-actions>.btn.secondary{min-width:0;max-width:100%;min-height:56px}
 .hero-art{height:auto;min-height:0;max-height:none;aspect-ratio:16/10;border-radius:4px}
 .hero-image{object-position:71% 50%}
 .hero-save-card{left:20px;right:20px;bottom:20px;padding:18px;max-width:440px;gap:13px}
 .hero-save-card>span:nth-child(2){min-width:0;font-size:15px;line-height:1.5}
 .hero-save-card small{font-size:13px;line-height:1.5}
 .save-card-icon{width:34px;height:34px}

 .demo-section{padding-top:64px}
 .section-heading{margin-bottom:24px}
 .section-heading h2,.kept-heading h2{font-size:clamp(34px,6.5vw,46px);line-height:1.1;letter-spacing:-.055em}
 #demo{padding:14px 12px 16px;border-radius:16px;scroll-margin-top:calc(88px + env(safe-area-inset-top,0px))}
 #demo .chapters{position:relative;justify-content:flex-start;flex-wrap:nowrap;gap:7px;margin:0;padding:2px 2px 9px;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:2px;scrollbar-width:thin;scrollbar-color:#b6c0d8 transparent;background:transparent;border:0;-webkit-overflow-scrolling:touch}
 #demo .chapters::-webkit-scrollbar{display:block;height:3px}
 #demo .chapters::-webkit-scrollbar-thumb{background:#b6c0d8;border-radius:10px}
 #demo .chapter{flex:none;width:auto;min-height:44px;padding:0 14px 0 7px;gap:8px;font-size:13px;scroll-snap-align:start}
 #demo .chapter i{width:25px;height:25px;padding:0;font-size:12px}
 #demo .screen{height:580px;height:clamp(520px,calc(100svh - 250px),640px);margin-top:14px;min-width:0;overflow:hidden;border-radius:14px}
 #demo .layer{position:absolute;inset:0;width:100%!important;height:100%;min-width:0;max-height:none;transform:none!important;filter:none!important}
 #demo .layer[data-off],#demo .layer.ghost{display:none}
 #demo .win{box-shadow:0 8px 24px -16px #2e3a5c66}
 #demo .chat{display:flex;flex-direction:column;overflow:hidden}
 #demo .winbar{flex:none;height:42px;min-height:42px;padding:0 12px;gap:9px}
 #demo .dots{gap:4px}
 #demo .dots i{width:7px;height:7px}
 #demo .addr{font-size:11px;padding:5px 8px}
 #demo .chat .body{min-height:0;flex:1;padding:20px 18px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd2e3 transparent;-webkit-overflow-scrolling:touch}
 #demo .chat .t3{font-size:19px;line-height:1.35;margin-bottom:18px}
 #demo .msg{grid-template-columns:28px minmax(0,1fr);gap:10px;margin-top:17px;font-size:14px;line-height:1.6}
 #demo .msg>div{min-width:0}
 #demo .av{width:28px;height:28px;font-size:11px}
 #demo .you{padding:11px 12px;overflow-wrap:anywhere}
 #demo .file{max-width:100%;min-width:0;padding:8px 9px;gap:6px;font-size:12px;white-space:normal;overflow-wrap:anywhere}
 #demo .ico{width:16px;height:16px}
 #demo .saved-label{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;margin:0;display:flex;justify-content:center;gap:8px;font-size:11px;line-height:1.5;padding:10px}
 #demo[data-step="1"] .saved-label{display:none}
 #demo[data-step="2"] .saved-label{display:none}
 #demo[data-step="2"] .chat .body{filter:blur(3px);opacity:.3;overflow:hidden}
 #demo[data-step="3"] .chat .body{overflow:hidden}
 #demo .lock{inset:42px 0 0;padding:20px 16px 70px}
 #demo .lock b{font-size:21px;line-height:1.3}
 #demo .lock span{max-width:24em;font-size:14px;line-height:1.6}
 #demo[data-step="2"] .pop{position:absolute;inset:auto 14px auto;top:50%;width:auto!important;height:auto;max-height:calc(100% - 28px);margin:0;padding:22px 20px;transform:translateY(-50%)!important;overflow-y:auto;z-index:3;box-shadow:0 20px 50px -22px #273c7473}
 #demo[data-step="3"] .pop{display:none}
 #demo .arch{display:block;grid-template-columns:minmax(0,1fr)}
 #demo .arch .side{display:none}
 #demo .sheet{height:100%;min-width:0;padding:22px 18px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd2e3 transparent;-webkit-overflow-scrolling:touch}
 #demo .sheet-head{flex-direction:column;align-items:flex-start;gap:16px}
 #demo .sheet-head>div{min-width:0;width:100%}
 #demo .sheet .t3{font-size:23px;line-height:1.25}
 #demo .sheet .meta{flex-wrap:wrap;font-size:12px;line-height:1.5;gap:6px}
 #demo .turn{grid-template-columns:minmax(0,1fr);gap:7px;padding-top:20px;font-size:14px;line-height:1.65}
 #demo .turn>div{min-width:0}
 #demo .turn .who{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;font-size:12px}
 #demo .frow{grid-template-columns:30px minmax(0,1fr) auto;gap:9px;padding-block:12px;font-size:12px}
 #demo .frow>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
 #demo .ftype{width:30px;height:36px;font-size:9px}
 #demo .frow small{font-size:11px}
 #demo .frow .get{font-size:11px}
 #demo .stage-foot{flex-direction:column;align-items:stretch;gap:16px;margin-top:18px;padding-top:17px}
 #demo .caption{max-width:none;min-height:6.4em;font-size:14px;line-height:1.6}
 #demo .stage-tools{justify-content:space-between;gap:12px;margin:0}
 #demo .play,#demo .next{min-height:44px;padding-inline:17px;font-size:12px}
 #demo .next{margin-right:0;order:2}

 .kept-section{padding-block:64px}
 .kept-grid{grid-template-columns:minmax(0,1fr);gap:34px;margin-top:28px}
 .kept-item,.kept-item+.kept-item,.kept-item:last-child{display:block;min-width:0;padding:0;border:0}
 .kept-item h3{margin-top:19px;font-size:22px;line-height:1.35}
 .kept-item>p{max-width:38em;margin-top:10px;font-size:16px;line-height:1.7}
 .specimen{height:230px;border-radius:4px}
 .specimen-messages{padding:20px 24px}
 .specimen-message{font-size:13px;line-height:1.6;padding:13px 15px}
 .specimen-message.reply{margin-top:14px}
 .specimen-files{padding:0}
 .paper{width:130px;height:152px}
 .paper-back{padding:18px;font-size:11px;transform:translate(-26px,-5px) rotate(-12deg)}
 .paper-front{padding:18px 14px;transform:translate(23px,7px) rotate(8deg)}
 .paper-front>span{font-size:10px}
 .paper-front>small{font-size:10px}
 .paper-front>.icon{width:29px;height:29px}
 .specimen-code{padding:18px}
 .code-window>span,.code-version{font-size:12px;padding:11px 14px}
 .code-window pre{font-size:clamp(10px,2.6vw,12px);line-height:1.85;padding:18px 12px;overflow:hidden}
 .limits{margin-top:30px}
 .limits>summary{min-height:60px;padding-block:19px;font-size:14px;line-height:1.6;align-items:center}
 .limits>div{grid-template-columns:minmax(0,1fr);gap:14px;padding-bottom:22px;font-size:15px;line-height:1.75}

 .privacy-section{grid-template-columns:minmax(0,1fr)}
 .privacy-copy{order:0;padding:48px max(var(--gutter),var(--mobile-safe));min-width:0}
 .privacy-copy h2{font-size:clamp(38px,8.5vw,56px);line-height:1.08;letter-spacing:-.055em;margin:0}
 .privacy-description{font-size:17px;line-height:1.7;margin-top:23px}
 .privacy-facts{max-width:none;margin-top:24px}
 .privacy-facts>div{padding-block:19px}
 .privacy-facts p{font-size:16px;line-height:1.75}
 .privacy-copy>.line-link{font-size:14px;min-height:44px;max-width:100%;margin-top:19px;white-space:normal}
 .privacy-portrait{order:1;height:auto;min-height:0;max-height:none;aspect-ratio:16/10}
 .privacy-portrait img{object-position:55% 50%}
 .faq-section{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:64px}
 .faq-section h2{font-size:clamp(36px,7vw,46px);margin:0}
 .faq-list{min-width:0}
 .faq-list summary{font-size:16px;line-height:1.6;padding-block:22px;gap:18px;min-height:64px}
 .answer{font-size:16px;line-height:1.75;padding:0 0 23px;overflow-wrap:anywhere}
 .install-section{grid-template-columns:minmax(0,1fr);gap:25px;padding-block:42px 52px}
 .install-section h2{font-size:clamp(48px,10vw,62px);line-height:1.02;margin:0}
 .install-cta{min-width:0;justify-self:stretch;padding:0}
 .install-cta>p{max-width:35em;font-size:17px;line-height:1.7;margin-bottom:23px}
 .install-cta>.btn.primary{max-width:100%;min-height:56px;white-space:normal;text-align:center}
 .install-cta>.btn>span{min-width:0}
 .footer{padding-top:18px}
 .footer-top{flex-wrap:wrap;align-items:flex-start;gap:8px 20px}
 .footer-top nav{flex-wrap:wrap;gap:0 20px;font-size:14px;min-width:0}
 .footer-top a{display:inline-flex;align-items:center;min-height:44px;padding-block:10px}
 .back-top{margin-left:0;font-size:14px}
 .footer-wordmark{font-size:19.6vw;line-height:1;margin:25px 0 22px;letter-spacing:-.095em}
 .footer-bottom{flex-direction:column;gap:10px;padding:18px 0 max(26px,env(safe-area-inset-bottom,0px));font-size:12px;line-height:1.8}
 .footer-bottom>p{margin:0;text-align:left}

 .doc{min-width:0;padding-block:30px 54px}
 .doc h1{font-size:clamp(34px,7vw,48px);line-height:1.1;letter-spacing:-.055em;overflow-wrap:anywhere}
 .doc .lead,.doc p,.doc li{font-size:16px;line-height:1.75;overflow-wrap:anywhere}
 .doc .updated{font-size:13px;line-height:1.6}
 .doc h2{font-size:27px;line-height:1.2;margin-top:42px;overflow-wrap:anywhere}
 .doc .toc{columns:1;margin-top:26px;padding-block:12px}
 .doc .toc li{padding:0}
 .doc .toc a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:15px}
 .table-scroll{min-width:0;overflow:visible}
 .doc table,.doc tbody,.doc tr,.doc td{display:block;width:100%;min-width:0}
 .doc thead{display:none}
 .doc tr{padding:14px 0;border-bottom:1px solid var(--line)}
 .doc td{border:0;padding:2px 0;font-size:15px;line-height:1.7;overflow-wrap:anywhere}
 .doc td:first-child{white-space:normal;padding-bottom:5px}
 .doc-footer{flex-direction:column;align-items:flex-start;gap:10px;padding-block:20px max(28px,env(safe-area-inset-bottom,0px));font-size:14px}
 .doc-footer a{display:inline-flex;align-items:center;min-height:44px}
}

@media(max-width:560px){
 .hero h1{font-size:clamp(38px,10.8vw,60px)}
 .hero-description{font-size:16px}
 .hero-actions{flex-direction:column;align-items:stretch;max-width:none;gap:12px}
 .hero-actions>.btn.primary,.hero-actions>.btn.secondary{width:100%;min-height:56px;font-size:14px;padding-inline:18px;white-space:normal;text-align:center}
 .hero-actions>.btn>span{min-width:0}
 .hero-art{aspect-ratio:1.05}
 .hero-save-card{left:14px;right:14px;bottom:16px;padding:15px;gap:11px}
 .hero-save-card>span:nth-child(2){font-size:14px}
 .hero-save-card small{font-size:12px}
 .save-card-icon{width:31px;height:31px}
 .privacy-portrait{aspect-ratio:6/5}
 .install-cta>.btn.primary{width:100%;font-size:14px;padding-inline:18px}
 .footer-top nav{column-gap:18px;font-size:13px}
}

@media(max-width:360px){
 #demo .chat .body,#demo .sheet,#demo .hand-off{padding-inline:13px}
 #demo .msg{grid-template-columns:25px minmax(0,1fr);gap:8px}
 #demo .av{width:25px;height:26px;font-size:10px}
 #demo[data-step="2"] .pop{inset-inline:10px;padding-inline:15px}
 #demo .frow{grid-template-columns:30px minmax(0,1fr)}
 #demo .frow .get{grid-column:2}
 #demo .play,#demo .next{padding-inline:13px;font-size:11px}
 .privacy-copy h2{font-size:38px}
}