/* Praus · mobile polish (v2)
   Load last, after mobile-layout.css. Screens 900 px and narrower only; desktop is unchanged.
   One type scale, one spacing rhythm, a compact hero chat window with round controls,
   a bottom-sheet sign-in, a solid menu and a one-column FAQ. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ======================= menu ======================= */
@media (max-width:900px){
 html body .nav.open{
  background:#EDECE8!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;opacity:1!important;
  box-shadow:0 1px 0 rgba(23,24,27,.1),0 24px 48px rgba(23,24,27,.14)!important;
  border-radius:0 0 24px 24px!important;padding:6px 20px 18px!important}
 html body .nav.open a,html body .nav.open .m-login{color:#17181B!important;opacity:1!important;font:400 18px/1.3 Inter,sans-serif!important;padding:14px 0!important;
  border-bottom:1px solid rgba(23,24,27,.08);display:block;width:100%;text-align:left;background:none!important;letter-spacing:0!important}
 html body .nav.open .m-login{border-bottom:0;margin-top:4px;font-weight:500!important}
}

/* ======================= type scale and rhythm ======================= */
@media (max-width:600px){
 html body{font-size:16px}
 /* header */
 html body header.header{height:60px!important}
 html body .header .brand{font-size:20px!important}
 html body .header .brand .mark{width:20px!important;height:20px!important}
 html body .header .pill{height:38px!important;padding:0 16px!important;font-size:13.5px!important;font-weight:500!important}
 html body .header .menu{width:38px!important;height:38px!important}

 /* hero */
 html body .hero{padding-top:108px!important}
 html body .hero .eyebrow{font-size:13px!important;line-height:1.4!important;margin-bottom:14px!important;letter-spacing:0!important}
 html body .hero h1{font-size:clamp(29px,8vw,34px)!important;line-height:1.05!important;letter-spacing:-.04em!important;margin-bottom:14px!important}
 html body .hero .hero-sub{font-size:16px!important;line-height:1.5!important;max-width:31ch!important;margin-inline:auto!important;text-wrap:balance}
 html body .hero .hsign{margin-top:24px!important}
 html body .hero .hs-google,html body .hero .hs-email{height:52px!important;min-height:52px!important}
 html body .hero .hs-google span{font-size:15.5px!important}
 html body .hero .hs-email input{font-size:16px!important}
 html body .hero .hs-legal{font-size:12.5px!important;line-height:1.5!important;margin-top:14px!important}

 /* section titles and copy: one size everywhere */
 html body .s-title{font-size:32px!important;line-height:1.06!important;letter-spacing:-.035em!important;text-wrap:balance}
 html body .s-copy{font-size:16px!important;line-height:1.55!important;text-wrap:pretty;margin-top:14px!important}
 html body #faq .s-title{font-size:32px!important;white-space:nowrap}

 /* how it works */
 html body .how-flow li{padding:20px 0!important}
 html body .how-flow li h3{margin-top:12px!important;font-size:20px!important;line-height:1.25!important;letter-spacing:-.02em!important}
 html body .how-flow li p{margin-top:6px!important;font-size:15px!important;line-height:1.55!important}

 /* benchmarks */
 html body #benchmarks .bk h3{font-size:22px!important;line-height:1.15!important}
 html body #benchmarks .bk header p{font-size:14px!important;line-height:1.45!important}
 html body #benchmarks .kb .kn{overflow-wrap:normal!important;word-break:normal!important;font-size:11px!important;line-height:1.3!important}

 /* pricing */
 html body .pc-d{font-size:15px!important;line-height:1.45!important}
 html body .pc li{font-size:15px!important;line-height:1.45!important}
 html body .renewal{font-size:12px!important;line-height:1.5!important}

 /* closing */
 html body .end-cta h2{font-size:30px!important;line-height:1.08!important}
 html body .fq-contact,html body .end-cta .pill{white-space:nowrap}
 html body .end-cta{padding-top:56px!important}
 html body .foot2{margin-top:72px!important}
 html body .foot-top{padding-top:40px!important}
 html body .availability{margin-top:16px!important;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* ======================= hero chat window =======================
   Sized to the hero text above it: a compact window, a little narrower than the buttons,
   with type one step below the page copy. */
@media (max-width:600px){
 html body .hero .hero-stage{width:calc(100% - 16px)!important;margin:40px auto 0!important;padding:6px 6px 0!important;border-radius:24px!important}
 html body .hero .hero-stage .appwin{height:356px!important;min-height:0!important;border-radius:19px!important}
 html body .hero .hero-stage .workspace{padding:42px 11px 10px!important}

 /* title bar */
 html body .hero .hero-stage .topbar{height:42px!important;padding:0 8px 0 13px!important}
 html body .hero .hero-stage .tb-title{font-size:12px!important;font-weight:500!important}
 html body .hero .hero-stage .tb-icons{gap:0!important}
 html body .hero .hero-stage .tb-b{width:28px!important;height:28px!important;display:grid!important;place-items:center!important}
 html body .hero .hero-stage .tb-b svg{width:14px!important;height:14px!important}

 /* empty state */
 html body .hero .hero-stage .greet{font-size:19px!important;line-height:1.15!important;letter-spacing:-.03em!important;margin-bottom:14px!important}
 html body .hero .hero-stage .thread{padding-bottom:8px!important}

 /* composer */
 html body .hero .hero-stage .composer{padding:10px 8px 8px 12px!important;border-radius:17px!important;min-height:0!important}
 html body .hero .hero-stage .composer textarea,html body .hero .hero-stage #prompt{
  height:20px!important;min-height:20px!important;max-height:20px!important;font-size:16px!important;line-height:20px!important;padding:0!important;
  transform:scale(.75);transform-origin:0 50%;width:133.3%!important}
 html body .hero .hero-stage .composer textarea::placeholder{opacity:.55}
 html body .hero .hero-stage .compose-tools{height:28px!important;margin-top:6px!important;align-items:center!important;gap:4px!important}
 html body .hero .hero-stage .tool-left,html body .hero .hero-stage .tool-right{align-items:center!important;gap:2px!important;height:28px!important}
 html body .hero .hero-stage :is(.icon-btn,.send){
  width:28px!important;height:28px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;flex:none!important}
 html body .hero .hero-stage #attach{box-shadow:inset 0 0 0 1px rgba(245,244,242,.2)!important;background:transparent!important;border:0!important}
 html body .hero .hero-stage :is(.icon-btn,.send) svg{width:14px!important;height:14px!important}
 html body .hero .hero-stage .send .s-voice{transform:scale(.78)}
 html body .hero .hero-stage .mic .wave{transform:scale(.8)}
 html body .hero .hero-stage .tool-name{height:28px!important;min-height:0!important;min-width:0!important;padding:0 8px!important;border-radius:999px!important;font-size:12px!important}
 html body .hero .hero-stage #mode-label{font-size:12px!important}
 html body .hero .hero-stage .ai-disclaimer{font-size:9.5px!important;line-height:1.4!important;margin:6px 8px 0!important;opacity:.7}
 html body .hero .hero-stage .compose-wrap{padding-bottom:0!important}

 /* attachments */
 html body .hero .hero-stage .atts{gap:5px!important}
 html body .hero .hero-stage .att{padding:4px 9px 4px 4px!important;gap:7px!important;border-radius:10px!important}
 html body .hero .hero-stage .at-i{width:21px!important;height:25px!important;font-size:6.5px!important;border-radius:5px!important}
 html body .hero .hero-stage .at-t b{font-size:11px!important}
 html body .hero .hero-stage .at-t small{font-size:9.5px!important}
 html body .hero .hero-stage .m-files{gap:5px!important;flex-wrap:wrap;justify-content:flex-end}

 /* conversation */
 html body .hero .hero-stage .msgs>*+*{margin-top:12px!important}
 html body .hero .hero-stage .m-u{font-size:12.5px!important;line-height:1.45!important;padding:7px 11px!important;border-radius:14px!important;max-width:84%!important}
 html body .hero .hero-stage .think3{padding:9px 10px!important;border-radius:12px!important}
 html body .hero .hero-stage .tk-h{font-size:12px!important;gap:7px!important}
 html body .hero .hero-stage .tk-h canvas{width:15px!important;height:15px!important}
 html body .hero .hero-stage .tk-l{padding-top:8px!important;margin-top:8px!important}
 html body .hero .hero-stage .tk-l li{font-size:11px!important;line-height:1.4!important;grid-template-columns:15px minmax(0,1fr) 14px!important;gap:7px!important}
 html body .hero .hero-stage .tk-l li+li{margin-top:5px!important}
 html body .hero .hero-stage .tk-l li svg{width:13px!important;height:13px!important}
 html body .hero .hero-stage .think3.fold{padding:0!important}
 html body .hero .hero-stage .think3.fold .tk-h{font-size:11px!important;gap:5px!important;white-space:nowrap;flex-wrap:nowrap!important}
 html body .hero .hero-stage .think3.fold .tk-h em{margin-left:2px!important;font-size:11px!important}
 html body .hero .hero-stage .think3.fold .tk-mdl{display:none!important}
 html body .hero .hero-stage :is(.m-a,.ans){font-size:12.5px!important;line-height:1.55!important}
 html body .hero .hero-stage .ans sup.ci{font-size:8.5px!important}
 html body .hero .hero-stage table.cmp{font-size:10px!important;margin:10px 0!important;border-radius:10px!important}
 html body .hero .hero-stage table.cmp :is(th,td){padding:6px 7px!important;line-height:1.3!important}
 html body .hero .hero-stage .src2-h{font-size:11px!important;margin-bottom:6px!important}
 html body .hero .hero-stage .src2-l{gap:5px!important}
 html body .hero .hero-stage .sc{padding:6px 9px!important;border-radius:10px!important}
 html body .hero .hero-stage .sc b{font-size:11px!important}
 html body .hero .hero-stage .sc small{font-size:9.5px!important}
 html body .hero .hero-stage .mail{font-size:12px!important;line-height:1.55!important;padding:10px 12px!important;border-radius:12px!important}
}

/* ======================= sign-in: centred card =======================
   A floating card with even margins on every side, opening with a soft rise and scale
   and closing the same way in reverse. The site's script adds .is-closing before it closes. */
@media (max-width:600px){
 /* Preserve Safari readability without depending on backdrop blur. */
 html body dialog.dialog{background:linear-gradient(180deg,#414141,#242424)!important}
 html body dialog.dialog[open],html body dialog.dialog.is-closing{
  position:fixed!important;inset:auto!important;top:50%!important;left:50%!important;margin:0!important;translate:-50% -50%;transform-origin:50% 60%;
  width:calc(100% - 32px)!important;max-width:400px!important;height:fit-content!important;max-height:calc(100svh - 40px)!important;
  overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:none;
  border:0!important;border-radius:28px!important;padding:24px 20px 16px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 80px rgba(0,0,0,.35)!important}
 html body dialog.dialog[open]{animation:pm-in .5s cubic-bezier(.2,.9,.25,1) both!important}
 html body dialog.dialog[open]::backdrop{animation:pm-bd-in .4s ease both!important;background:rgba(18,18,20,.42)!important;
  -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
 html body dialog.dialog.is-closing{animation:pm-out .24s cubic-bezier(.4,0,1,1) both!important;pointer-events:none}
 html body dialog.dialog.is-closing::backdrop{animation:pm-bd-out .24s ease both!important}
 html body dialog.dialog > svg{width:24px!important;height:24px!important;margin:0 auto 8px!important;display:block}
 html body dialog.dialog h2{font:500 22px/1.15 'Inter Tight',Inter,sans-serif!important;letter-spacing:-.03em!important;margin:0 0 4px!important;text-align:center}
 html body dialog.dialog > p{font-size:14px!important;line-height:1.45!important;margin:0 0 16px!important;text-align:center;opacity:.78}
 html body dialog.dialog > p.draft:empty{display:none}

 html body dialog.dialog .age-gate{margin:0 0 14px!important;padding:12px 11px!important;border-radius:16px!important;border:1px solid rgba(245,244,242,.12)!important;background:rgba(255,255,255,.03)!important}
 html body dialog.dialog .age-gate legend{font-size:12.5px!important;font-weight:500!important;padding:0 8px!important;opacity:.85}
 html body dialog.dialog .dob-fields{gap:8px!important;display:grid!important;grid-template-columns:1fr 1fr!important}
 html body dialog.dialog .dob-fields label{font-size:12.5px!important;margin:0!important;row-gap:5px!important}
 html body dialog.dialog .month-field{row-gap:5px!important}
 html body dialog.dialog .month-field>label{margin:0!important}
 html body dialog.dialog .month-trigger,html body dialog.dialog .dob-fields input{height:44px!important;min-height:44px!important;border-radius:12px!important;font-size:16px!important}
 html body dialog.dialog .age-confirm{display:flex!important;align-items:center!important;gap:8px!important;font-size:12.5px!important;letter-spacing:-.005em;line-height:1.4!important;margin-top:11px!important}
 html body dialog.dialog .age-confirm input{width:17px!important;height:17px!important;margin:0!important;flex:none;accent-color:#F5F4F2}

 html body dialog.dialog .signin{padding:0!important;margin:0!important}
 html body dialog.dialog .sso{height:46px!important;min-height:46px!important;border-radius:999px!important;font-size:15px!important}
 html body dialog.dialog .or{margin:11px 0!important;font-size:12px!important}
 html body dialog.dialog .emailrow{display:grid!important;gap:8px!important}
 html body dialog.dialog .emailrow input{height:46px!important;min-height:46px!important;border-radius:999px!important;font-size:16px!important;padding:0 18px!important}
 html body dialog.dialog .emailrow .pill{height:46px!important;min-height:46px!important;border-radius:999px!important;font-size:15px!important;width:100%!important}
 html body dialog.dialog .secondary{margin:8px auto 0!important;font-size:14px!important;min-height:40px!important;display:flex!important;align-items:center;justify-content:center}

 html body dialog.dialog .close-dialog{top:12px!important;right:12px!important;width:30px!important;height:30px!important;border-radius:50%!important;
  border:0!important;outline:none!important;box-shadow:none!important;background:rgba(255,255,255,.09)!important}
 html body dialog.dialog .close-dialog svg{width:13px!important;height:13px!important}
 html body dialog.dialog .close-dialog:focus-visible{box-shadow:0 0 0 2px rgba(245,244,242,.6)!important}
}
@keyframes pm-in{0%{opacity:0;transform:translateY(24px) scale(.94)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pm-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes pm-bd-in{from{opacity:0}to{opacity:1}}
@keyframes pm-bd-out{from{opacity:1}to{opacity:0}}
html body dialog.dialog .close-dialog:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}
@media (prefers-reduced-motion:reduce){html body dialog.dialog[open],html body dialog.dialog.is-closing,html body dialog.dialog[open]::backdrop{animation:none!important}}

/* ======================= arrows: drawn, never emoji =======================
   iPhone shows the ↗ character as an emoji. Use the same drawn arrow as the pricing buttons. */
html body .pill:not(.sso)::after,html body .hdr-ghost::after,html body .end-ghost::after{content:''!important;width:13px;height:13px;flex:0 0 13px;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 16 16 4M5 4h11v11' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 16 16 4M5 4h11v11' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html body .month-options [aria-selected=true]::after{content:''!important;width:12px;height:12px;top:50%!important;margin-top:-6px;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5 8 14.5 16 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5 8 14.5 16 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ======================= feature cards ======================= */
@media (max-width:600px){
 html body .b6 .fc{border-radius:24px!important}
 html body .b6 .fc h3{font-size:22px!important;line-height:1.15!important;letter-spacing:-.025em!important}
 html body .b6 .fc p{font-size:15px!important;line-height:1.5!important}
}

/* ======================= FAQ ======================= */
@media (max-width:760px){
 html body #faq{display:block!important;grid-template-columns:none!important;padding:64px 0 32px!important}
 html body #faq .fq-side{width:auto!important;position:static!important;margin-bottom:20px}
 html body #faq .fq-contact{width:auto!important;white-space:nowrap;margin-top:18px!important}
 html body #faq .fq-tabs{width:auto!important;flex-wrap:nowrap!important;gap:22px!important;margin-top:26px!important;overflow-x:auto;scrollbar-width:none}
 html body #faq .fq-tabs::-webkit-scrollbar{display:none}
 html body #faq .fq-tabs button{white-space:nowrap;flex:none;font-size:14.5px!important}
 html body #faq .fq-list{width:100%!important}
 html body #faq .fq summary{grid-template-columns:1fr 22px!important;padding:18px 0!important;align-items:center!important}
 html body #faq .fq-q{font-size:17px!important;line-height:1.35!important;letter-spacing:-.015em!important}
 html body #faq .fa p{font-size:15px!important;line-height:1.6!important;margin:0 0 18px!important}
}

/* Keep the mobile menu mounted until its exit transition finishes. */
@media (max-width:760px){
 html body header.header .nav.open{
  animation:none!important;opacity:0!important;transform:translateY(-8px) scale(.985)!important;
  transform-origin:top center;pointer-events:none;
  transition:opacity 240ms ease,transform 320ms cubic-bezier(.22,1,.36,1)!important;
 }
 html body header.header .nav.open.is-visible{opacity:1!important;transform:translateY(0) scale(1)!important;pointer-events:auto}
 html body .menu .menu-line-top,html body .menu .menu-line-bottom{transition:transform 320ms cubic-bezier(.22,1,.36,1)}
 html body .menu .menu-line-top{transform-origin:12px 8px}
 html body .menu .menu-line-bottom{transform-origin:12px 16px}
 html body .menu[aria-expanded="true"] .menu-line-top{transform:translateY(4px) rotate(45deg)}
 html body .menu[aria-expanded="true"] .menu-line-bottom{transform:translateY(-4px) rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){
 html body header.header .nav.open,html body .menu .menu-line-top,html body .menu .menu-line-bottom{transition:none!important}
}