/* Frogku mobile composition. Shared controls keep their complete vendor owners;
   only their layout tracks change here. Desktop's moving phone windows stay in
   presentation.css. A short or zoomed viewport can grow instead of clipping. */
@media (max-width:999px) {
 html.section-snap{scroll-snap-type:none;scroll-behavior:smooth}
 :root{--header-height:calc(72px + env(safe-area-inset-top));--gutter:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));--mobile-bottom-reserve:env(safe-area-inset-bottom);--mobile-section-inset:16px}
 .header{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px}
 .header .language-wrap{width:80px;flex-basis:80px}
 .product-story{--device-width:min(64vw,280px,max(124px,calc((100svh - 380px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .461894)))}
 .product-story .story-chapter{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:100svh;height:auto;min-width:0;
  padding:calc(var(--header-height) + var(--mobile-section-inset)) var(--gutter) calc(env(safe-area-inset-bottom) + var(--mobile-section-inset));
 }
 .product-story .chapter-hero{padding-bottom:calc(var(--dock-height) + env(safe-area-inset-bottom) + var(--mobile-section-inset))}
 .product-story .chapter-layout{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  width:100%;max-width:600px;min-height:0;height:auto;
 }
 .product-story .chapter-title,.product-story .chapter-copy{
  width:100%;max-width:420px;margin:0;padding:0;text-align:center;transform:none;
 }
 .product-story .chapter-title{order:0}
 .product-story .chapter-title :is(h1,h2){font-size:34px;line-height:1.05;letter-spacing:-.055em}
 .product-story .chapter-title>p{font-size:15px;line-height:22px;margin-top:8px}
 .product-story .chapter-copy{order:1}
 .product-story .chapter-copy>p{font-size:16px;line-height:24px;letter-spacing:-.2px;margin:0}
 .product-story .chapter-earn .chapter-detail{display:none} /* Repeated in the app and rate condition below. */
 .product-story .story-chapter .device-visual{
  order:2;width:var(--device-width);margin:0!important;align-self:center;justify-self:center;transform:none;
 }
 .product-story .chapter-earn{gap:12px}
 .product-story .chapter-earn .chapter-layout,.product-story .chapter-earn .chapter-copy{display:contents}
 .product-story .chapter-earn .chapter-copy>p{order:1;max-width:360px;text-align:center}
 .product-story .chapter-earn .chapter-copy>.pill{order:4;margin:0;align-self:center}
 .product-story .chapter-footnote{
  position:static;order:3;width:100%;max-width:560px;margin:0 auto;
  font-size:12px;line-height:18px;text-align:center;white-space:normal;
 }
 :root:lang(zh-CN) .product-story .chapter-footnote{max-width:320px}
 .product-story .story-footer{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;translate:-50% 0;width:min(100%,300px);margin:0;display:flex;justify-content:center}
 .product-story .story-footer .media-toggle{display:none}
 .product-story .story-scroll{position:static;translate:none}
 /* Mobile presents one camera, one message and one primary action. Detailed
    onboarding remains on desktop and in the signup/FAQ flows. */
 .product-story .chapter-how .chapter-layout{
  display:flex;flex-direction:column;gap:16px;max-width:540px;
 }
 .product-story .chapter-how .chapter-title{grid-column:1/-1;max-width:none}
 .product-story .chapter-how .device-visual{grid-column:1;grid-row:2}
 .product-story .chapter-how .chapter-copy{display:contents}
 .product-story .onboarding-steps,.product-story .chapter-how .chapter-requirements,.product-story .chapter-actions>.install-trigger{display:none}
 .product-story .chapter-actions{order:3;justify-content:center;flex-direction:row;gap:8px;margin:0}
 .product-story .chapter-actions>:is(.pill,.install-trigger){min-height:44px;padding-inline:14px}
 .product-story .chapter-requirements{
  position:static;flex-direction:column;align-items:center;gap:2px;width:100%;
  margin:16px auto 0;font-size:12px;line-height:18px;text-align:center;
 }
 .tasks-section{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;
  align-content:center;gap:24px;min-height:100svh;
  padding:calc(var(--header-height) + var(--mobile-section-inset)) 0 calc(var(--mobile-bottom-reserve) + var(--mobile-section-inset));
 }
 .tasks-section .section-top{display:block;text-align:center}
 .tasks-section .section-top .eyebrow{margin-bottom:12px}
 .tasks-section .section-top h2{font-size:34px;line-height:1.05}
 .tasks-section .section-top-side{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
 .tasks-section .section-top-side>p{font-size:14px;line-height:20px}
 .tasks-section .carousel-buttons{display:none} /* Native swipe; the next card stays visible. */
 .tasks-section>.task-track{
  width:100%;height:clamp(240px,calc(100svh - 550px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),470px);
  padding-block:0;gap:16px;align-items:stretch;min-height:0;
 }
 .tasks-section .sample-card{flex-basis:82vw;max-width:360px}
 .tasks-section .sample-image{flex:1;min-height:100px;aspect-ratio:auto}
 .tasks-section .sample-card-copy{flex:none;padding-top:16px;gap:8px}
 .tasks-section .sample-card p{min-height:0;margin-bottom:12px}
 .tasks-section .sample-count{padding-top:8px}
 .tasks-section .task-foot{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding-bottom:0}
 .tasks-section .task-foot p{max-width:640px;font-size:12px;line-height:18px;white-space:normal}
 .tasks-section .task-foot>a{align-self:center;justify-content:center;min-height:44px}
 .download-section{gap:20px;padding:calc(var(--header-height) + var(--mobile-section-inset)) var(--gutter) calc(var(--mobile-bottom-reserve) + var(--mobile-section-inset));align-content:center}
 .download-intro{text-align:center;max-width:600px;justify-self:center}
 .download-intro>.eyebrow{translate:var(--optical-label-shift,0px) 0}
 .download-intro h2{font-size:32px;line-height:1.08;margin:8px auto 12px}
 .download-intro>p{font-size:14px;line-height:20px;margin-inline:auto;max-width:540px}
 .download-section .download-platforms{gap:20px}
 .download-section .platform{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:center;padding:20px}
 .download-section .platform-icon{grid-column:1;grid-row:1;margin:0;align-self:center;width:34px;height:34px}
 .download-section .platform h3{grid-column:2;grid-row:1;margin:0;align-self:center;font-size:24px;line-height:30px}
 .download-section .platform>p{grid-column:1/-1;grid-row:2;margin:0}
 .download-section .platform>.pill{grid-column:1/-1;grid-row:3;margin:0}
 .download-section .download-note{margin-top:28px;font-size:12px;line-height:18px;justify-content:center}
 .footer{padding-block:calc(var(--header-height) + 24px) calc(var(--mobile-bottom-reserve) + 24px)}
 .footer .faq-section{gap:24px;padding-bottom:40px;max-width:640px;margin-inline:auto}
 .faq-intro{text-align:center}
 .faq-intro h2{font-size:34px;line-height:1.05;margin-bottom:16px}
 .faq-intro>p{margin-bottom:16px}
 .faq-intro .ui-secondary{margin-inline:auto}
 .faq-question{padding-block:16px;min-height:56px}
 .faq-more{margin-top:20px}
 .footer-top{gap:12px}
 .footer-links{grid-template-columns:minmax(0,1fr);gap:28px 20px}
 .footer-links>div:not(.footer-language){grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
 .legal-note{white-space:normal}
 .chat-panel{max-height:calc(100dvh - 100px - env(safe-area-inset-bottom))}
 .faq-category-full{display:none}
 .faq-filters .faq-category-compact{display:inline}
 .faq-filter-scroll{width:100%;overflow:visible}
 .faq-filters{width:100%;max-width:100%}
 .faq-filters button,.faq-filters button.active{flex:1;min-width:0;padding-inline:8px;white-space:nowrap}
}
@media (max-width:699px) {
 :root{--mobile-bottom-reserve:calc(var(--dock-height) + env(safe-area-inset-bottom))}
 .chat-panel{left:var(--gutter);right:var(--gutter);width:auto;margin-inline:0;transform-origin:bottom center}
 .mobile-apply{
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  background:#fff;border-top-color:#e8e8e5;
  transition:transform .3s var(--ease),opacity .2s,background .2s,border-color .2s;
 }
 .mobile-apply[data-surface=dark]{background:#121212;border-top-color:#ffffff25}
 .mobile-apply[data-surface=green]{background:var(--brand-field);border-top-color:#12121218}
 .chat-launcher{right:calc(16px + env(safe-area-inset-right))}
 .download-section .download-platforms{grid-template-columns:1fr}
 .download-section .platform{padding:20px}
 .download-section .platform h3{font-size:24px;line-height:30px}
 .download-section .platform>p{font-size:13px;line-height:20px}
 .footer .faq-section{padding-bottom:32px}
 .faq-intro .eyebrow{margin-bottom:8px}
 .faq-intro h2{font-size:24px;line-height:30px;margin:0;white-space:nowrap}
 .faq-intro h2 br{display:none}
 .faq-intro>p:not(.eyebrow),.faq-intro>[data-cta="faq"]{display:none} /* Persistent corner help owns the same action. */
 .footer .faq-section{gap:20px}
 .faq-search{margin-bottom:12px}
 .faq-filters{margin-bottom:12px}
 .faq-more{margin-top:16px}
 .footer-links>div>span{grid-column:1/-1;margin-bottom:4px}
 .footer-links>div>a{overflow-wrap:anywhere}
 .footer-links>div>a[href^="mailto:"]{grid-column:1/-1}
 .footer-top>p{display:block;font-size:14px;line-height:22px}
 #application-dialog .application-dialog-header{padding:16px;font-size:20px;line-height:26px}
 #application-dialog .join-form-shell{gap:16px;padding:0 16px 16px}
 #application-dialog .form-heading{position:relative;padding:16px}
 #application-dialog .application-frog{position:absolute;float:none;top:16px;right:16px;width:32px;height:32px;margin:0}
 #application-dialog .form-heading .eyebrow{display:none}
 #application-dialog .form-heading h3{font-size:22px;line-height:26px;padding-right:44px}
 #application-dialog .form-heading>p{font-size:13px;line-height:18px;margin:8px 0 0}
 #qualification-form{gap:10px}
 #qualification-form .form-row.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #qualification-form label{gap:6px;font-size:14px;line-height:20px}
 #qualification-form input:not([type=checkbox]),#qualification-form .product-select-trigger{min-height:44px;padding:9px 12px;font-size:16px;line-height:24px}
 #qualification-form .form-check{font-size:13px;line-height:20px;margin:0}
 #qualification-form .pill{min-height:44px;padding-block:11px;font-size:14px;line-height:20px}
 #qualification-form .form-local-note{font-size:12px;line-height:18px;margin:0}
}
@media (max-width:699px) and (max-height:740px) {
 #application-dialog .form-heading{display:none}
 #qualification-form{gap:8px}
 #qualification-form textarea,.application-activities summary{min-height:44px;padding-block:9px}
}
@media (max-width:359px) {
 :root{--header-height:calc(64px + env(safe-area-inset-top))}
 .header{gap:8px;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
 .header .brand{font-size:21px;gap:6px;letter-spacing:-1px}
 .header .brand-icon{width:32px;height:32px;border-radius:9px}
 .header .brand-icon svg{width:28px;height:28px}
 .header .language-wrap{width:72px;flex-basis:72px}
 .header .header-join{width:56px;min-width:56px}
 .legal-page .header .brand>span:last-child{display:none}
 .legal-page .header .header-join{width:72px;min-width:72px}
 .header-actions{gap:4px}
 .product-story .chapter-title :is(h1,h2){font-size:30px}
 .product-story{--device-width:min(64vw,calc((100svh - 406px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .461894))}
 :root{--mobile-section-inset:12px}
 .menu-dialog nav>a{font-size:24px;line-height:30px}
 .product-story .chapter-layout,.product-story .chapter-how .chapter-layout{gap:10px}
 .product-story .chapter-copy>p{font-size:15px;line-height:22px}
 .product-story .chapter-actions>:is(.pill,.install-trigger){padding-inline:12px;font-size:13px}
 .download-section{gap:16px}
 .download-intro>.eyebrow{display:none}
 .download-section .platform{padding:16px}
}
/* Landscape and accessibility zoom remain a normal reading flow. Content is
   never clipped or hidden to force a viewport fit. */
@media (max-width:999px) and (max-height:649px) {
 .product-story{--device-width:min(34vw,180px)}
 .product-story .chapter-layout{max-width:650px}
 .product-story .chapter-how .chapter-layout{max-width:560px}
}
@media (min-width:600px) and (max-width:999px) and (max-height:649px) {
 .product-story{--device-width:calc((100svh - var(--header-height) - 80px - env(safe-area-inset-bottom)) * .461894)}
 .product-story .story-chapter{position:relative}
 .product-story .chapter-layout,.product-story .chapter-how .chapter-layout{
  display:grid;grid-template-columns:minmax(0,1fr) var(--device-width) minmax(0,1fr);
  align-items:center;gap:24px;max-width:900px;
 }
 .product-story .chapter-earn .chapter-layout{display:grid}
 .product-story .chapter-title,.product-story .chapter-how .chapter-title{grid-column:1;grid-row:1;text-align:left}
 .product-story .chapter-title :is(h1,h2){font-size:30px}
 .product-story .chapter-copy,.product-story .chapter-earn .chapter-copy{display:block;grid-column:3;grid-row:1;text-align:left}
 .product-story .chapter-copy>p{font-size:15px;line-height:22px;text-align:left!important}
 .product-story .story-chapter .device-visual{grid-column:2;grid-row:1}
 .product-story .chapter-earn .chapter-copy>.pill{margin-top:16px}
 .product-story .story-footer{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;translate:-50% 0;margin:0}
 .product-story .chapter-footnote,.product-story .chapter-requirements{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom));left:16px;width:calc(100% - 92px);margin:0;max-width:none;justify-content:center}
 .product-story .chapter-how .chapter-copy{display:contents}
 .product-story .chapter-how .chapter-title{align-self:start}
 .product-story .chapter-actions{grid-column:3;grid-row:1;align-self:center;justify-content:center}
 .product-story .chapter-actions>.install-trigger{display:none} /* Download remains in the header menu. */
 .product-story .chapter-requirements{flex-direction:row;gap:16px;flex-wrap:wrap}
}
@media (max-width:999px) and (prefers-reduced-motion:reduce){html.section-snap{scroll-behavior:auto}}