/* Phones and tablets (≤ 1023 px wide, the width where the site nav turns to its tablet menu). The desktop deck of fixed frames becomes one long page that scrolls natively; landing.js
   switches its wheel and swipe engine off at the same width. Loaded last; nothing here applies above 1023 px. */
@media (max-width:1023px) {
  html { overflow-x:hidden; overflow-y:auto; overscroll-behavior:auto; height:auto; }
  body { overflow:visible; height:auto; min-height:100%; }

  /* ---------- the frames, stacked ---------- */
  .panel, .panel.on { position:relative; inset:auto; height:auto; min-height:0; visibility:visible; overflow:visible; display:block; z-index:auto; }
  /* no frame scrolls inside itself any more: a frame that stays a scroll box (or contains its overscroll) would trap the swipe */
  .panel:not(.hero):not(.end) { padding:88px 0 56px; overflow:visible !important; overscroll-behavior:auto !important; }
  .fit { transform:none !important; }
  .fbg, .ctr, .dock, .product .stops { display:none !important; }
  /* section titles at the site's size (the design system's --type-h2-mobile, 26 px, as on every other page) */
  .sec h2, .faq h2, .spirit .lead h2, .gal-p .gal h2, .product .ph2 { font:700 26px/1.35 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:0; text-align:left; text-wrap:balance; }

  /* ---------- the header: clear over the café's sky, a frosted bar once the page moves, dark over the night ---------- */
  .top { padding:10px 16px; padding-top:max(10px, env(safe-area-inset-top,0px)); transition:background-color .25s, box-shadow .25s; }
  .logo { width:104px; height:32px; }
  .top .btn { padding:10px 14px; font-size:15px; border-radius:10px; }
  body .top, body:not(.at-hero) .top { background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  body.m-sc .top { background:rgba(244,247,251,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(21,29,32,.08); }
  body.m-sc.m-night .top { background:rgba(8,14,32,.72); box-shadow:0 1px 0 rgba(255,255,255,.08); }
  /* .dk is the white logo (for dark grounds), .lt the ink one */
  body .top .logo .dk { display:block !important; } body .top .logo .lt { display:none !important; }
  body.m-sc:not(.m-night) .top .logo .lt { display:block !important; } body.m-sc:not(.m-night) .top .logo .dk { display:none !important; }

  /* ---------- 1 · intro: the words over the sky, the laptop standing whole on the bottom edge. The section is as tall as
     the words and the laptop, not the screen; the page's script sets --lift so the laptop's top sits as far under the form
     as the headline sits under the nav (the glass above the laptop runs up behind the words) ---------- */
  .hero.panel { height:auto; min-height:0; padding-bottom:calc(var(--sh) - var(--lift, 0px)); overflow:hidden;
    /* the stage's height: the whole laptop (807.9 of the stage's 1774) nearly full width, smaller on a short phone so it stays above the fold */
    --sh:min(calc(92vw * 887 / 807.9), calc(100vh - 388px)); --sh:min(calc(92vw * 887 / 807.9), calc(100svh - 388px));
    /* never narrower than the screen (the photo is 2 : 1): a short, wide tablet takes the full width over keeping the laptop above the fold */
    --sh:max(50vw, min(calc(92vw * 887 / 807.9), calc(100svh - 388px)));
    background:linear-gradient(180deg,#F4F7FB 0%,#E6EEF6 100%); }
  .hero .stage { width:calc(var(--sh) * 2); bottom:0; transform:translate(-50%, 0); }
  /* the glass melts into the section's pale ground, so there is no seam */
  .hero .stage.back, .hero .stage.front { -webkit-mask:linear-gradient(transparent 0, #000 22%); mask:linear-gradient(transparent 0, #000 22%); }
  .hero .shade, .hero .midf { display:none; }
  .hero .copy { padding:120px 16px 20px; }
  .hero .title { font-size:clamp(38px, 11vw, 48px); line-height:1.04; }
  .hero .title .sub { margin-top:4px; }
  .hero .underline { margin-top:-.45rem; }
  .hero .body { margin-top:18px; max-width:none; font-size:17px; line-height:1.45; }
  .hero .cta { margin-top:24px; gap:10px; }

  /* ---------- 2 · product: the headline, the parts as a chip row, one live window cropped to what matters ---------- */
  .product.panel { background:linear-gradient(180deg,#FBF8F3 0%,#EEF3F8 55%,#E3ECF5 100%); }
  .product .sbg { display:none; }
  .product .pfit { width:auto; margin:0; padding:0 16px; }
  .product .prow { display:block; margin-top:14px; padding:0; }
  .product .prow p { font-size:17px; line-height:1.5; color:#3C4A51; }
  .product .pbody { display:block; margin-top:28px; }
  .product .side { display:block; }
  .product .tabs { position:relative; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; gap:8px; margin:0 -16px; padding:2px 16px 6px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; scroll-padding:0 16px;
    -webkit-mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent); mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent); }
  .product .tabs::-webkit-scrollbar { display:none; }
  .product .tab { flex:none; flex-direction:row; gap:7px; height:42px; padding:0 15px 0 13px; border-radius:999px; font:600 15px/1 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; color:#3C4A51;
    background:rgba(255,255,255,.75); box-shadow:inset 0 0 0 1px rgba(21,29,32,.1); }
  .product .tab span, .product .tab.on span { display:inline; }
  .product .tab svg { width:17px; height:17px; }
  .product .tab.on { color:#fff; background:#151D20; box-shadow:none; }
  /* under the chips: the picked part's name, then its one line */
  .product .say { margin-top:16px; padding:0; min-height:10em; font-size:16px; line-height:1.5; color:#55636B; }
  .product .say b { display:block; font:700 20px/1.2 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:-.01em; color:#151D20; }
  .product .say span { display:block; margin-top:6px; font-size:16px; line-height:1.5; color:#55636B; }
  .product .dev { margin-top:16px; padding:5px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(21,29,32,.1), 0 1.6rem 3rem -1.6rem rgba(28,60,90,.45); }
  .product .dev::after { display:none; }
  .product .dev .scr { border-radius:12px; }
  /* the window is a live picture of the app: touches scroll the page */
  .product .dev iframe { pointer-events:none; }
  /* a tablet shows the whole window, laid out at 1280 × 800 like the desktop's (landing.js APPW) */
  @media (min-width:768px) { .product .dev iframe { width:1280px; height:800px; } .product .say { min-height:5.5em; } }

  /* ---------- 3 · why: the line, then four figures as compact rows ---------- */
  .spirit.panel { background:#FAF7F0; }
  .spirit .wrap { width:auto; margin:0 16px; }
  .spirit .lead { max-width:none; }
  .spirit .lead p { margin-top:14px; max-width:none; font:400 17px/1.5 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; color:var(--mut); }
  .spirit .figs { display:grid; grid-template-columns:1fr; gap:28px; margin-top:36px; }
  .spirit .fig, .spirit .fig:first-child { display:grid; grid-template-columns:96px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:16px; align-items:start; padding:0; border:0; }
  .spirit .art { grid-row:1 / 3; width:96px; max-width:none; margin:0; }
  .spirit .fig h3 { font:600 18px/1.3 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:-.012em; }
  .spirit .fig p { margin-top:4px; max-width:none; font-size:16px; line-height:1.5; color:var(--mut); }

  /* ---------- 4 · features: one column of tiles, each caption on two short lines ---------- */
  .gal-p.panel { overflow:visible; }
  .gal-p .gal { width:auto; margin:0 16px; padding:0; }
  .gal-p .gal h2 { margin-bottom:24px; }
  .gal-p .gal h2 .sf { display:inline; }
  .gal .bento { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:12px; }
  /* each tile is its picture, then its caption under it, so no picture runs under the words */
  .gal .tile, .gal .tile.w2, .gal .tile.tall { grid-column:auto; grid-row:auto; display:flex; flex-direction:column; border-radius:12px; }
  .gal .tile .tart { position:relative; inset:auto; flex:none; height:270px; padding-bottom:0; }
  .gal .tile.tall .tart { height:360px; }
  .gal .tile .cap { position:relative; margin-top:auto; column-gap:10px; align-items:start; padding:6px 16px 16px; }
  .gal .tile .cap h3 { font-size:18px; line-height:1.2; }
  .gal .tile .cap p { margin-top:3px; font-size:15px; line-height:1.4; }

  /* tablets: two tiles a row, every picture the same height so the pairs line up; the last two (the run trace and cover
     mode, wide pictures) run the full width, which closes the grid */
  @media (min-width:768px) {
    .gal .bento { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row dense; }
    .gal .tile .tart, .gal .tile.tall .tart { height:300px; }
    .gal .bento > .tile.w2:last-child, .gal .bento > .tile.tall:nth-last-child(2) { grid-column:span 2; }
    .gal .bento > .tile.tall:nth-last-child(2) .tart { height:400px; }
    .gal .tile .a-ticket .tc2 { width:calc(100% - 32px); }
  }
  /* the pictures drawn for a wide tile, refitted to a phone's column */
  .gal .a-team .pill { padding:.6rem .8rem; }
  .gal .a-team .pill > * { width:54px; height:54px; margin-left:-11px; border-width:2px; }
  .gal .a-team .pill > :first-child { margin-left:0; }
  /* the ANIMA mark inside its white disc (not the faces: the entrance animation leaves an inline style on every child) */
  .gal .a-team .pill > span > img { width:34px !important; }
  .gal .a-team .pill .ico svg { width:28px; height:28px; }
  /* the strip never squeezes its faces into ovals */
  .gal .a-team .pill > * { flex:none; }
  /* the pictures were drawn to sit above a caption laid over the tile's foot; here the caption is below, so each is brought to
     the middle of its picture and given room */
  .gal .a-orbit .rg, .gal .a-orbit .ring, .gal .a-orbit .core { top:50%; }
  .gal .a-orbit .rg.r1 { width:32%; } .gal .a-orbit .rg.r2 { width:56%; }
  .gal .a-search { place-items:center; align-content:center; padding:0; }
  .gal .a-search .sb, .gal .a-search .rs { width:86%; }
  .gal .a-mx { transform:translateY(10%); }
  /* 04 · one inbox: the messages, ANIMA and the tasks spread out with more air between them, and the group centred */
  .gal .a-flowin { transform:translateY(12%); }
  .gal .a-flowin > .chp:nth-child(1) { left:9% !important; top:16% !important; } .gal .a-flowin > .chp:nth-child(2) { left:22% !important; top:9% !important; }
  .gal .a-flowin > .chp:nth-child(3) { left:9% !important; top:38% !important; } .gal .a-flowin > .chp:nth-child(4) { left:22% !important; top:67% !important; }
  .gal .a-flowin > .chp:nth-child(5) { left:9% !important; top:59% !important; }
  .gal .a-flowin .fun { left:39%; }
  .gal .a-flowin .tr4 { left:56%; }
  .gal .a-flowin .tr4:nth-of-type(1) { top:12% !important; } .gal .a-flowin .tr4:nth-of-type(2) { top:25% !important; } .gal .a-flowin .tr4:nth-of-type(3) { top:38% !important; }
  .gal .a-flowin .tr4:nth-of-type(4) { top:51% !important; } .gal .a-flowin .tr4:nth-of-type(5) { top:64% !important; }
  .gal .a-flowin .ln4 { max-width:3.2rem; }
  /* 06 · the project page runs past the picture's foot: it fades out there instead of being cut */
  .gal .tall .a-inbox { -webkit-mask:linear-gradient(#000 70%,transparent); mask:linear-gradient(#000 70%,transparent); }
  /* 06 · the project page fills the phone tile's width; gallery.js scales it to fit */
  .gal .tall .a-inbox .d-orch { left:16px; right:16px; top:20px; zoom:.9; }
  .gal .a-inbox .cols3 > .colx:not(:first-child) { display:none; }
  .gal .a-eco .bx { left:4%; right:4%; top:50%; transform:translateY(-50%); }
  /* 07 · the workflow takes the left column, the learned fan-out shrinks to the right */
  .gal .a-eco .flow { position:absolute; left:calc(16px - 40%); top:50%; width:auto; gap:.7rem; transform:translateY(-50%); }
  .gal .a-eco .flow .sn { width:1.45rem; height:1.45rem; } .gal .a-eco .flow .sn img, .gal .a-eco .flow .sn svg { width:.8rem; height:.8rem; }
  .gal .a-eco .flow::before { left:.725rem; }
  .gal .a-eco .flow .sl { font-size:.74rem; }
  .gal .a-eco .flow { --fh:4.85rem; } .gal .a-eco .flow::before, .gal .a-eco .flow::after { top:.725rem; } .gal .a-eco .flow::before { bottom:.725rem; } .gal .a-eco .flow::after { left:.725rem; }
  .gal .a-eco .bx { left:28%; right:3%; }
  .gal .a-eco .nd { width:1.7rem; height:1.7rem; margin:-.85rem 0 0 -.85rem; border-radius:.5rem; } .gal .a-eco .nd img, .gal .a-eco .nd svg { width:.95rem; height:.95rem; }
  .gal .a-eco .core2 { width:2.6rem; height:2.6rem; margin:-1.3rem 0 0 -1.3rem; } .gal .a-eco .cnode img { width:1.3rem; }
  .gal .a-ticket { align-items:flex-start; padding-top:16px; -webkit-mask:linear-gradient(#000 82%,transparent); mask:linear-gradient(#000 82%,transparent); }
  .gal .a-ticket .tc2 { width:calc(100vw - 64px); zoom:1; }
  .gal .a-trace { place-items:center; }
  .gal .a-trace .tw { width:34rem; zoom:.64; }
  /* gallery.js sizes the night bar and the check card for the wide tile inline: on a phone they stack instead */
  .gal .a-cov .shr { left:16px; right:16px; width:auto; top:4.9rem; }
  .gal .a-cov .rs2 { flex-wrap:nowrap; }
  .gal .a-cov .rs2 { gap:5px; }
  .gal .a-cov .r2 { gap:5px; font-size:12px; padding:4px 8px 4px 5px; white-space:nowrap; }
  .gal .a-cov .r2 .ico { width:16px; height:16px; }
  .gal .a-cov .tln { left:16px !important; right:16px; width:auto !important; top:9rem; }
  .gal .a-cov .chk { left:16px !important; right:16px !important; width:auto; top:14.4rem !important; padding:.8rem 1rem; display:grid; grid-template-columns:1fr auto; column-gap:.8rem; }
  .gal .a-cov .chk .t, .gal .a-cov .chk .s, .gal .a-cov .chk .who { grid-column:1; }
  .gal .a-cov .chk .acts { grid-column:2; grid-row:1 / 4; align-self:end; margin:0; }
  .gal .tile:has(.a-cov) .tart { height:340px; }

  /* ---------- 5 · FAQ ---------- */
  /* one photo for the night: the end's (the laptop with the app on it); the questions sit on its sky colour above it */
  .faq.panel { padding-top:88px; background:#0B1430; }
  .faq .fq { width:auto; margin:0 20px; }
  .faq h2 { margin-bottom:32px; font:700 26px/1.35 var(--font-sans); letter-spacing:0; text-align:center; }
  .faq summary { padding:20px 0; font-size:16px; }
  .faq details p { padding:0 32px 22px 0; font-size:15px; }

  /* ---------- 6 · join: one still shot, the words over the night sky, ANIMA on the table, the footer under it ---------- */
  .end.panel { height:100vh; height:100svh; min-height:600px; max-height:1000px; overflow:hidden; background:#0B1430; }
  .end::after { height:45%; }
  /* the night above (the FAQ's colour) runs down into the photo with no seam: solid at the top edge, gone by the table */
  .end::before { content:""; position:absolute; inset:0 0 auto; height:62%; z-index:1; pointer-events:none;
    background:linear-gradient(#0B1430 0%,rgba(11,20,48,.92) 16%,rgba(11,20,48,.6) 34%,rgba(11,20,48,.22) 50%,rgba(11,20,48,0) 100%); }
  .end .txt { top:88px; left:16px; right:16px; width:auto; transform:none; }
  .end h2 { font:700 32px/1.1 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:-.01em; text-align:center; }
  .end p { margin-top:12px; font-size:16px; line-height:1.5; }
  .end .row { margin-top:20px; }
  /* the mascot is hidden here; front.css brings Nami back on phones and tablets */
  .end .buddy, .end .buddy.on, .end .drop, .end .glow { display:none !important; }
  .end .foot { flex-wrap:wrap; gap:8px 16px; padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px)); font-size:14px; }
  .end .foot b { font-size:18px; }
  .end .foot nav { gap:16px; }
  .end .foot nav a { padding:6px 0; }
}
@media (max-width:380px) { .gal .a-cov .r2 { font-size:11px; padding:4px 6px 4px 4px; } .gal .a-cov .rs2 { gap:4px; } }

/* tablets on the stacked page: the waitlist forms and the launch video keep a phone's width, centred, instead of running across */
@media (min-width:768px) and (max-width:1023px) {
  .hero .cta, .end .row { max-width:440px; margin-left:auto; margin-right:auto; }
}