/* v8: one small-screen layout, designed around a single readable product story. */
@media (max-width:760px) {
  html { scroll-padding-top:20px; }
  body { font-size:17px; line-height:1.65; }
  html[lang=en] body { font-size:16px; }
  .mobile-only { display:block; }
  .landing-shell { margin:0; border:0; border-radius:0; box-shadow:none; overflow:visible; }
  .site-header { position:relative; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:72px; height:auto; padding:13px 20px; border-bottom:1px solid var(--line); }
  .site-header .brand { gap:9px; min-width:0; }
  .site-header .brand b { font-size:21px; }
  .site-header .brand-logo { width:36px; height:38px; border-radius:11px; }
  .site-header .brand-logo .brand-mark { width:22px; height:25px; }
  .site-header .prefs { gap:4px; margin-left:auto; }
  .site-header .prefs button { min-width:44px; min-height:44px; padding:9px 5px; font-size:10px; border-radius:12px; }
  .site-header .prefs #theme { width:44px; height:44px; font:23px Arial,sans-serif; }
  .site-header .mobile-menu-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
  .site-header nav { display:none; position:absolute; left:12px; right:12px; top:calc(100% + 8px); gap:0; padding:8px; margin:0; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 15px 40px #132b4920; }
  .site-header[data-menu-open=true] nav { display:grid; }
  .site-header nav a { display:flex; align-items:center; min-height:48px; padding:12px 14px; font-size:16px; border-radius:11px; }
  .site-header nav a:focus-visible { background:var(--pale); }

  /* Action is above the handset. Nothing overlaps or crops the product screen. */
  .hero { display:block; width:100%; margin:0; border:0; border-radius:0; padding:0 20px 32px; background:linear-gradient(180deg,#fcfdff,#edf5ff 48%,#e5effb); }
  .hero-copy { display:block; position:relative; max-width:440px; margin:auto; padding:34px 0 0; text-align:center; }
  .hero .eyebrow { padding:0; margin:0 auto 15px; font:700 10px/1.5 Arial,sans-serif; letter-spacing:2px; text-transform:uppercase; color:#557392; }
  .hero h1, html[lang=en] .hero h1 { margin:0; font-size:clamp(34px,9.3vw,48px); line-height:1.08; letter-spacing:-1.3px; color:#1b3453; }
  html[lang=bn] .hero h1 { font-size:clamp(36px,9.5vw,49px); line-height:1.21; letter-spacing:-.7px; }
  .hero .intro, html[lang=en] .hero .intro { display:block; margin:15px auto 0; max-width:300px; font-size:15px; line-height:1.6; color:#5a718b; }
  .hero .cta { display:flex; flex-direction:column; align-items:stretch; gap:4px; width:100%; max-width:340px; margin:23px auto 0; }
  .hero .download-cta { display:flex; justify-content:flex-start; gap:11px; width:100%; min-height:58px; margin:0; padding:8px 13px 8px 8px; border-radius:17px; font-size:16px; line-height:1.35; }
  .hero .download-cta .cta-action { margin-left:auto; padding-left:10px; }
  .hero .cta-logo { width:39px; height:39px; border-radius:11px; }
  .hero .browser-cta { min-height:44px; padding:9px 8px; border:0; border-radius:12px; background:transparent!important; color:#47698f; box-shadow:none; font-size:13px; }
  .hero .browser-cta .ui-icon { width:17px; height:17px; }
  .scene { display:block; position:relative; width:100%; max-width:440px; height:auto; margin:24px auto 0; padding:0; perspective:none; }
  .scene:before { width:100%; height:140px; top:auto; bottom:27px; }
  .hero-phone { position:relative; left:auto; top:auto; width:min(68vw,252px); margin:0 auto; border-width:5px; border-radius:34px; transform:none; box-shadow:0 0 0 2px #b8c7d7,0 22px 40px #203e6625; }
  .hero-phone img { border-radius:25px; }
  .hero .float, .hero .garden-caption { display:none; }
  .mobile-hero-caption { position:relative; margin:24px 0 0; text-align:center; font:10px/1.6 Arial,sans-serif; letter-spacing:1px; color:#617c9b; }
  .cloudscape:before { width:620px; left:-400px; top:270px; filter:blur(8px); opacity:.7; }
  .cloudscape:after { width:620px; right:-420px; top:480px; filter:blur(8px); opacity:.55; }
  .cloud-mist { width:480px; opacity:.25; }
  .principles { display:grid; grid-template-columns:1fr 1fr; justify-items:center; gap:8px 12px; max-width:440px; margin:0 auto; padding:22px 20px; color:var(--muted); font-size:12px; letter-spacing:0; }

  .section { width:100%; max-width:520px; padding:52px 20px; }
  .section-head { display:block; margin:0 0 25px; }
  .section-head .eyebrow, .download-heading .eyebrow, .faq>.eyebrow { font-size:9px; line-height:1.65; letter-spacing:1.1px; }
  .section-head h2, html[lang=en] .section-head h2 { margin:11px 0 14px; font-size:clamp(30px,8.2vw,39px); line-height:1.24; letter-spacing:-.5px; }
  .section-head>p { display:block; max-width:390px; font-size:16px; line-height:1.65; color:var(--muted); }
  .phone { --drift:-4px; flex-shrink:0; border-color:#2a3b55; background:#2a3b55; border-width:5px; border-radius:31px; box-shadow:0 0 0 1px #ffffffb0,0 18px 30px #17375422; }
  .phone img { width:100%; height:auto; border-radius:23px; object-fit:contain; }

  /* A clear two-step explanation with a complete, uncropped screen per step. */
  #understand .feature-garden { padding:17px 18px 26px; border:1px solid #dbe5f1; border-radius:27px; background:linear-gradient(155deg,#eef5ff,#e7effa); }
  .detail-steps { display:flex; gap:6px; margin:0 0 24px; padding:5px; border:1px solid #d7e1ef; border-radius:15px; background:#ffffff9c; }
  .detail-steps button { flex:1; min-width:0; min-height:44px; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:#617896; font-size:16px; line-height:1.3; cursor:pointer; }
  .detail-steps button[aria-pressed=true] { background:#345d89; color:#fff; box-shadow:0 3px 9px #355e8320; }
  #understand .explain-grid { display:block; margin:0; padding:0; overflow:visible; }
  #understand .screen-panel { width:100%; max-width:none; height:auto; min-width:0; padding:0; margin:0; border:0; border-radius:0; background:transparent; text-align:left; overflow:visible; }
  #understand .screen-panel[hidden] { display:none!important; }
  #understand .screen-panel h3, html[lang=en] #understand .screen-panel h3 { margin:0 0 10px; font-size:22px; line-height:1.3; color:var(--ink); }
  #understand .screen-caption { margin:0 0 24px; font-size:15px; line-height:1.6; color:var(--muted); }
  #understand .screen-panel .phone { width:min(242px,94%); margin:0 auto; border-width:5px; border-radius:31px; }
  #understand .screen-panel .phone img { border-radius:23px; }
  #understand .explain-copy { display:none; }

  /* Nova keeps its own dark, calm visual identity and visible animated mark. */
  .nova { display:block; width:calc(100% - 24px); max-width:496px; margin:0 auto; padding:27px 24px 30px; border:1px solid #405a78; border-radius:28px; background:linear-gradient(145deg,#263e5b,#1b304b); color:#f2f6fd; overflow:hidden; }
  .nova>div:first-child { display:block; }
  .nova-identity { justify-content:flex-start; gap:12px; margin:0 0 17px; }
  .nova-art, .nova .nova-logo { width:88px; height:88px; }
  .nova-identity .eyebrow { font-size:9px; color:#bfd2e9; letter-spacing:1.1px; margin:0 0 6px; }
  .nova-name { font-size:31px; color:#fff; }
  .nova h2 { margin:0 0 14px; font-size:clamp(29px,8vw,37px); line-height:1.3; letter-spacing:-.5px; color:#f2f6fd; }
  .nova>div:first-child>p { display:block; font-size:16px; line-height:1.65; color:#c5d4e7; }
  .tabs { display:flex; gap:5px; width:100%; margin:23px 0 0; padding:5px; border:1px solid #53708d; border-radius:14px; background:#ffffff08; }
  .tabs button { flex:1; min-height:44px; padding:9px; border-radius:9px; font:14px/1.5 Arial,sans-serif; color:#c1d3e9; }
  .tabs .active { background:#e4edfa; color:#27466b; }
  #scaleCopy { min-height:0; padding:17px 0 0; margin:0 0 28px; }
  #scaleCopy h3 { margin:0 0 7px; font-size:21px; line-height:1.35; color:#f2f6fd; }
  #scaleCopy p { font-size:15px; line-height:1.6; color:#c2d2e6; }
  .nova-scene { display:block; height:auto; margin:0; padding:0; }
  .nova-scene .phone { width:min(236px,94%); margin:0 auto; transform:none; border-color:#97b0cc; }
  .nova-note { display:none; }

  /* One familiar native chooser replaces the crowded bank of tool buttons. */
  .tools-layout { display:block; }
  #toolList { display:none; }
  .mobile-tool-picker { display:block; margin:0 0 19px; }
  .mobile-tool-picker label { display:block; margin:0 0 8px; color:var(--muted); font-size:14px; }
  .mobile-tool-picker select { width:100%; min-width:0; min-height:50px; padding:11px 14px; font-size:16px; border-radius:14px; background:var(--surface); }
  .tool-display { display:flex; flex-direction:column-reverse; align-items:stretch; gap:27px; min-height:0; padding:25px 22px 28px; border-radius:27px; background:linear-gradient(145deg,#f0eefb,#e6e4f6); border-color:#dad5ec; color:#344365; overflow:visible; }
  .tool-display>div:not(.phone) { width:100%; }
  .tool-display small { font-size:9px; letter-spacing:1px; color:#756997; }
  .tool-display h3 { margin:10px 0 12px; font-size:26px; line-height:1.3; color:#344365; }
  .tool-display p { display:block; font-size:15px; line-height:1.65; color:#666a85; }
  .tool-display .phone { width:min(242px,94%); min-width:0; margin:0 auto; transform:none; }

  /* Each workspace card occupies the whole track, with a readable explanation. */
  .workspace { padding-top:0; padding-bottom:48px; }
  .workspace-grid { display:flex; align-items:stretch; gap:16px; width:100%; margin:0; padding:0; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding:0; scrollbar-width:none; overscroll-behavior-x:contain; }
  .workspace-grid::-webkit-scrollbar { display:none; }
  .workspace-grid article { flex:0 0 100%; width:100%; min-width:0; height:auto; margin:0; padding:25px 22px 28px; border-radius:27px; scroll-snap-align:start; scroll-snap-stop:always; background:#e6f0f8; color:var(--ink); }
  .workspace-grid article:nth-child(2) { background:#ede8f7; }
  .workspace-grid small { font-size:9px; line-height:1.6; letter-spacing:1px; color:#617a95; }
  .workspace-grid h3 { margin:11px 0 12px; font-size:27px; line-height:1.3; }
  .workspace-grid p { display:block; margin:0 0 25px; max-width:none; font-size:15px; line-height:1.6; color:var(--muted); }
  .workspace-grid .phone, .workspace-grid article:nth-child(2) .phone { width:min(242px,94%); margin:0 auto; transform:none; }
  .mobile-carousel-controls:not(.detail-steps) { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:16px 0 0; }
  .mobile-carousel-controls:not(.detail-steps) button { width:46px; height:46px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); font:21px Arial,sans-serif; }
  .mobile-carousel-controls button:disabled { opacity:.38; cursor:default; }
  .carousel-count { font:12px/1.5 Arial,sans-serif; color:var(--muted); letter-spacing:1.5px; }
  .language-banner { display:flex; align-items:center; gap:17px; padding:25px 0; margin:28px 0 0; background:none; border-bottom:1px solid var(--line); }
  .language-banner>b { font-size:39px; padding-right:0; letter-spacing:-5px; }
  .language-banner h3 { margin:0 0 6px; font-size:22px; line-height:1.35; }
  .language-banner p { display:block; font-size:15px; line-height:1.6; color:var(--muted); }
  .future { margin:0; padding:25px 0 0; background:none; }
  .future small { font-size:9px; letter-spacing:1px; }
  .future h3 { margin:9px 0 8px; font-size:22px; line-height:1.35; }
  .future p { display:block; font-size:15px; line-height:1.6; }

  /* Android is the primary mobile download, with iOS clearly marked upcoming. */
  .downloads { padding:48px 20px; background:linear-gradient(150deg,#edf4fc,#e6ecf8); }
  .download-heading { max-width:480px; text-align:left; margin:0 auto 26px; }
  .download-heading h2 { margin:12px 0 14px; font-size:clamp(31px,8.7vw,40px); line-height:1.25; letter-spacing:-.5px; }
  .download-heading p { font-size:16px; line-height:1.6; }
  .download-grid { display:flex; flex-direction:column; gap:17px; max-width:480px; margin:auto; }
  .download-grid article { display:grid; grid-template-columns:50px minmax(0,1fr); gap:0 14px; width:100%; min-width:0; padding:24px 22px; border:1px solid var(--line); border-radius:25px; background:var(--surface); }
  .download-grid .mobile-download { order:-1; border-color:#c7d9eb; background:#f8fbff; box-shadow:0 12px 24px #274d7420; }
  .download-grid .platform { grid-column:1; grid-row:1/3; width:50px; height:50px; margin:0; border-radius:15px; }
  .download-grid .platform .ui-icon { width:27px; height:27px; }
  .download-grid article>h3 { grid-column:2; margin:2px 0 7px; font-size:23px; line-height:1.2; }
  .download-grid article>p:first-of-type { grid-column:2; margin:0 0 23px; font-size:14px; line-height:1.5; }
  .download-grid article>:not(.platform):not(h3):not(p:first-of-type) { grid-column:1/-1; }
  .download-grid .mobile-row { gap:12px; padding:13px 0; font-size:15px; }
  .download-grid .mobile-row span { text-align:right; font-size:14px; }
  .download-grid .mobile-row+.mobile-row { margin-bottom:0; }
  .download-grid label { font-size:14px; margin:0 0 9px; }
  .download-grid select { min-width:0; min-height:48px; font-size:14px; line-height:1.5; padding:10px 12px; border-radius:11px; }
  #releaseStatus, #androidStatus { margin:12px 0 0; font-size:13px; line-height:1.55; color:var(--muted); }
  .download-grid .button { gap:10px; width:100%; min-height:51px; margin:19px 0 0; padding:12px; font-size:15px; line-height:1.4; border-radius:14px; }
  .download-grid .button .ui-icon { width:20px; height:20px; }
  .download-grid .web-detail { display:block; padding:0; margin:0; font-size:15px!important; line-height:1.6; }

  .faq { padding:46px 20px 50px; }
  .faq h2 { margin:11px 0 23px; font-size:31px; }
  .faq details { padding:0; }
  .faq summary { min-height:54px; padding:17px 0; font-size:17px; line-height:1.5; }
  .faq details p { margin:0 0 21px; padding-right:8px; font-size:15px; line-height:1.7; }
  .garden-footer { max-width:none; padding:31px 24px 35px; border-top:1px solid var(--line); background:#f1f5fc; color:#233d5c; }
  .footer-top { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; gap:23px 15px; }
  .footer-top .brand { gap:10px; min-width:0; }
  .footer-top .brand b { font-size:22px; }
  .footer-top .brand-logo { width:42px; height:44px; }
  .footer-top nav { display:flex; grid-column:1/-1; grid-row:2; flex-direction:column; gap:0; width:100%; }
  .footer-top nav a { display:flex; align-items:center; min-height:45px; border-bottom:1px solid #dbe4ef; font:15px/1.5 Ador,Arial,sans-serif; }
  .footer-top .back-top { grid-column:2; grid-row:1; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line); font:23px Arial,sans-serif; }
  .footer-description { margin:22px 0 0; font-size:15px; line-height:1.6; color:var(--muted); }
  .footer-wordmark { display:flex; justify-content:flex-start; width:100%; margin:32px 0 26px; font:900 clamp(48px,17.5vw,91px)/.86 Arial,sans-serif; letter-spacing:-.075em; color:#274362; }
  .footer-wordmark sup { margin-top:.1em; color:#728eaf; }
  .footer-bottom { display:grid; grid-template-columns:1fr auto; gap:13px 10px; width:100%; font:11px/1.6 Arial,sans-serif; color:var(--muted); }
  .footer-bottom>span:nth-child(2) { grid-row:2; grid-column:1/-1; font-size:13px; }
  .footer-bottom>span:last-child { grid-row:1; grid-column:2; }
  .pet-toggle { right:12px; bottom:max(12px,env(safe-area-inset-bottom)); min-width:44px; min-height:44px; padding:7px; border-radius:50%; justify-content:center; gap:4px; }
  .pet-toggle>span:nth-child(2) { display:none; }
  .pet-toggle>span:first-child { font-size:23px; }
  .pet-toggle i { width:5px; height:5px; }
  dialog { width:calc(100% - 28px); max-height:calc(100dvh - 32px); padding:23px; overflow:auto; border-radius:23px; }
  dialog select { min-height:48px; font-size:16px; }
  .dialog-head h2 { font-size:26px; }
  .dialog-head button { min-width:44px; min-height:44px; }

  html[data-theme=dark] .hero { background:linear-gradient(180deg,#1b2c43,#223d5a 48%,#2a4565); }
  html[data-theme=dark] .hero h1 { color:#f1f6fd; }
  html[data-theme=dark] .hero .eyebrow, html[data-theme=dark] .hero .intro, html[data-theme=dark] .mobile-hero-caption { color:#c0d2e8; }
  html[data-theme=dark] .hero .browser-cta { color:#c6def5; }
  html[data-theme=dark] #understand .feature-garden { background:linear-gradient(155deg,#263c58,#203550); border-color:#3f5775; }
  html[data-theme=dark] .detail-steps { background:#1a2e4966; border-color:#425d7d; }
  html[data-theme=dark] .detail-steps button { color:#c6d7eb; }
  html[data-theme=dark] .detail-steps button[aria-pressed=true] { background:#b6d0ed; color:#203b5b; }
  html[data-theme=dark] #understand .screen-panel h3 { color:#edf4fd; }
  html[data-theme=dark] .tool-display { background:linear-gradient(145deg,#3d365a,#312e4b); border-color:#584f74; color:#f1edff; }
  html[data-theme=dark] .tool-display h3 { color:#f1edff; }
  html[data-theme=dark] .tool-display p, html[data-theme=dark] .tool-display small { color:#c6bfd9; }
  html[data-theme=dark] .workspace-grid article { background:#2a425b; color:#eff4fd; }
  html[data-theme=dark] .workspace-grid article:nth-child(2) { background:#3d3554; }
  html[data-theme=dark] .workspace-grid p, html[data-theme=dark] .workspace-grid small { color:#c7d5e5; }
  html[data-theme=dark] .downloads { background:linear-gradient(150deg,#1d3049,#222e48); }
  html[data-theme=dark] .download-grid article { background:#233850; color:#eff4fd; border-color:#3e5772; }
  html[data-theme=dark] .download-grid .mobile-download { background:#2b4260; border-color:#55708f; }
  html[data-theme=dark] .garden-footer { background:#15263c; color:#e6effa; }
  html[data-theme=dark] .footer-top nav a { border-color:#334d6b; }
  html[data-theme=dark] .footer-top .back-top { background:#233c59; color:#e6effa; }
  html[data-theme=dark] .footer-wordmark { color:#bfd2ea; }
}

@media (max-width:359px) {
  .site-header { padding-inline:14px; gap:7px; }
  .site-header .brand { gap:7px; }
  .site-header .brand b { font-size:18px; }
  .site-header .brand-logo { width:31px; height:34px; }
  .site-header .brand b em { font-size:9px; padding:2px 3px; }
  .site-header .prefs { gap:1px; }
  .site-header .prefs button { padding-inline:3px; font-size:9px; }
  .hero { padding-inline:16px; }
  .hero .download-cta { font-size:14px; gap:9px; }
  .hero h1, html[lang=en] .hero h1 { font-size:32px; }
  html[lang=bn] .hero h1 { font-size:35px; }
  .section, .downloads, .faq { padding-inline:16px; }
  .nova { padding-inline:20px; }
  .nova h2 { font-size:29px; }
  #understand .feature-garden { padding-inline:15px; }
  .workspace-grid article, .tool-display, .download-grid article { padding-inline:18px; }
  .footer-bottom { font-size:10px; }
}

@media (min-width:520px) and (max-width:760px) {
  .hero-copy { padding-top:42px; }
  .hero-phone { width:270px; }
  .hero h1, html[lang=en] .hero h1 { font-size:48px; }
  .hero .intro, html[lang=en] .hero .intro { max-width:380px; font-size:17px; }
  .section { padding-block:62px; }
  .workspace { padding-top:0; }
  .nova { padding:32px; }
  .section-head h2, html[lang=en] .section-head h2 { font-size:39px; }
}