/* =====================================================================================
   MOBILE — compact, thumb-first. Long stacks become swipe rails; the product is shown first.
   ===================================================================================== */
@media (max-width: 640px) {
	:root { --sec: 56px; --gut: 16px; }
	body { font-size: 15.5px; }
	h2 { font-size: 34px; letter-spacing: -.02em; }
	.sec__head { margin-bottom: 22px; gap: 10px; }
	.sec__head p { font-size: 15px; margin-top: 10px; }
	.sec__head .arrow { font-size: 14px; }
	.eyebrow { margin-bottom: 12px; font-size: 11px; }
	.lead { font-size: 16px; }

	/* Swipe rail utility */
	.m-rail { display: grid !important; grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none !important; gap: 10px !important; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gut) * -1) !important; padding: 0 var(--gut) 6px !important; scrollbar-width: none; }
	.m-rail::-webkit-scrollbar { display: none; }
	.m-rail > * { scroll-snap-align: start; }

	/* Header */
	.annc .wrap { min-height: 32px; }
	.hdr__in { gap: 6px; }
	.logo img { height: 28px; }
	.logo .lg { height: 32px; }
	.mnav__top .lg { height: 30px; }
	.hdr .iconbtn { width: 38px; height: 38px; }
	.hdr__proj { display: none; }
	.lang > button { height: 34px; padding: 0 9px; font-size: 12px; }

	/* Hero: headline → live specimen + price → CTA → proof */
	.hx { padding: 14px 0 26px; }
	.hx__grid { display: flex; flex-direction: column; gap: 0; min-height: 0; }
	.hx__copy { display: contents; }
	.hx .welcome { order: 0; margin-bottom: 12px; font-size: 13px; padding: 8px 12px; }
	.hx .eyebrow { order: 1; }
	.hx h1 { order: 2; font-size: 44px; margin-bottom: 10px; }
	.spec { order: 3; aspect-ratio: 1 / 1.08; margin: 0 calc(var(--gut) * -1) 6px; width: calc(100% + 2 * var(--gut)); max-width: none; }
	.spec__hud { left: 16px; top: 8px; font-size: 10.5px; }
	.spec__drag { bottom: 34%; }
	.qcard { left: 12px; right: 12px; bottom: 8px; padding: 12px; gap: 8px; border-radius: 18px; }
	.qcard__mats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
	.qcard__mats button { flex: none; height: 32px; font-size: 12px; }
	.qcard__qty button { min-width: 34px; height: 30px; }
	.qcard__price b { font-size: 28px; }
	.qcard__foot { font-size: 12px; padding-top: 8px; }
	.hx__sub { order: 4; font-size: 15.5px; margin: 14px 0 16px; }
	.hx__cta { order: 5; display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
	.hx__cta .btn { width: 100%; min-height: 54px; }
	.hx__trust { order: 6; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
	.hx__trust li { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--white); font-size: 12.5px; }

	/* Marquee & KPIs */
	.marq { padding: 11px 0; margin: 4px 0 -6px; }
	.marq__in { font-size: 19px; gap: 18px; }
	.kpi { padding: 40px 0 28px; }
	.kpi__in { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scrollbar-width: none; }
	.kpi__in > div { scroll-snap-align: start; border-left: 1px solid rgba(255, 255, 255, .12) !important; padding: 4px 14px !important; }
	.kpi__in > div:first-child { border-left: 0 !important; padding-left: 0 !important; }
	.kpi__in > div:last-child { grid-column: auto; }
	.kpi b { font-size: 46px; margin-bottom: 6px; }

	/* Studio showcase */
	.studio-show { padding: 24px 0 56px; }
	.studio-show__feats { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; background: none; gap: 8px; margin: 14px calc(var(--gut) * -1) 0; padding: 0 var(--gut); border-radius: 0; scrollbar-width: none; }
	.studio-show__feats li { scroll-snap-align: start; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); padding: 16px; }

	/* How it works / why / gallery → rails */
	.how__steps { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 4px; scrollbar-width: none; gap: 10px; }
	.how__steps li { scroll-snap-align: start; min-height: 220px; padding: 20px; }
	.how__n { font-size: 60px; }
	.how__steps h3 { font-size: 22px; }
	.why__q { font-size: 32px; margin-bottom: 26px; }
	.why__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 0; gap: 10px; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scrollbar-width: none; }
	.why__i, .why__i + .why__i { scroll-snap-align: start; padding: 18px !important; border: 1px solid var(--line-2) !important; border-radius: 18px; background: var(--white); }
	.why__i h3 { margin: 10px 0 6px; font-size: 19px; }
	.gallery { grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; grid-template-rows: none; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scrollbar-width: none; }
	.gallery figure { scroll-snap-align: start; }
	.gallery .wide { grid-column: auto; grid-row: auto; }

	/* Technologies index */
	.techx__row { grid-template-columns: 74px minmax(0, 1fr) 36px; padding: 16px 0; gap: 10px; }
	.techx__abbr { font-size: 34px; }
	.techx__name b { font-size: 16px; }
	.techx__name small { font-size: 13px; display: block; line-height: 1.35; }
	.techx__go { width: 34px; height: 34px; font-size: 15px; }

	/* AI */
	.ai .lead { font-size: 15px; margin: 14px 0 18px !important; }
	.chat { padding: 14px; border-radius: 20px; }
	.chat .msg { font-size: 14px; }

	/* FAQ */
	.faq summary { padding: 16px 44px 16px 0; font-size: 16px; }
	.faq summary::after { width: 30px; height: 30px; margin-top: -15px; font-size: 18px; }

	/* Inner pages */
	.phead { padding: 18px 0 28px; }
	.phead h1 { font-size: 38px; margin-bottom: 14px; }
	.phead__media { aspect-ratio: 16 / 10; border-radius: 20px; }
	.answer { font-size: 15.5px; padding-left: 14px; margin-bottom: 18px; }
	.phead__cta .btn { flex: 1; min-height: 48px; }
	.crumbs { margin-bottom: 14px; font-size: 11px; }
	.specbar div { padding: 14px; }
	.specbar b { font-size: 16px; }
	.card { padding: 18px; }
	.prose { font-size: 16px; }

	/* Footer */
	.ftr { padding-top: 48px; }
	.ftr__top { gap: 18px; padding-bottom: 32px; }
	.ftr__top h2 { font-size: 40px; }
	.ftr__cta .row .btn { flex: 1; }
	.ftr__grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 30px 0; font-size: 13.5px; }
	.ftr h6 { margin-bottom: 10px; }
	.ftr ul { gap: 7px; }
	.ftr__legal { font-size: 11.5px; }
	.ftr__word { font-size: 21vw; }

	/* Checkout */
	.cohead h1 { font-size: 38px; }
	.costeps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.costeps li { flex: none; }
	.nsc-checkout__grid > .stack > .card { padding: 16px; }
	.nsc-checkout__grid > .side { padding: 18px; }
}

/* Studio overlay on phones: one-row buy bar, compact options */
@media (max-width: 760px) {
	.st__tech { padding: 10px; }
	.st__tech-n { display: none; }
	.st__tech-a { font-size: 19px; }
	.st__techs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
	.st__tech-p { font-size: 11px; }
	.st__tech-p b { font-size: 12.5px; display: block; }
	.st__tech-l { display: none; }
	.st__mat { grid-template-columns: minmax(0, 1fr) auto 26px; }
	.st__mat-s { display: none; }
	.st__ladder { grid-template-columns: repeat(3, 1fr); }
	.st__buy { gap: 8px; }
	.st__price { display: none; }
	.st__cta { grid-template-columns: minmax(0, 1fr) auto; }
	.st__cta .btn--acc { justify-content: space-between; padding: 0 20px; }
	.st__cta .btn--acc::before { content: attr(data-total); }
	.st__cta .st__cta-sum { display: none; }
	.st__ship .muted { display: none; }
	.st__dest { font-size: 12px; padding: 6px 8px; }
	.st__buy .prelim { display: none; }
	.st__sh { margin-bottom: 8px; }
}
@media (max-width: 640px) {
	.spec { aspect-ratio: auto; display: flex; flex-direction: column; }
	.spec__view { position: relative; inset: auto; width: 100%; aspect-ratio: 1 / .86; }
	.qcard { position: relative; left: auto; right: auto; bottom: auto; margin: -18px 12px 0; }
	.spec__drag { bottom: 6px; }
	.spec__note { display: none; }
}

/* ===== App feel (phones) ===== */
@view-transition { navigation: auto; }
@media (max-width: 760px) {
	/* App bar */
	.annc { display: none; }
	.hdr { background: rgba(244, 242, 237, .9); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); padding-top: env(safe-area-inset-top); view-transition-name: appbar; }
	.hdr.is-hidden { transform: none; }
	.tabbar { view-transition-name: tabbar; }
	/* Page transitions: content slides like a native stack */
	::view-transition-old(root) { animation: vt-out .28s var(--ease-io) both; }
	::view-transition-new(root) { animation: vt-in .38s var(--ease) both; }
	/* Tap feedback */
	.btn:active, .card:active, .chip:active, .smps__c:active, .post-c:active, .techx__row:active, .tabbar a:active, .tabbar button:active { transform: scale(.97); transition-duration: .1s; }
	a, button { -webkit-tap-highlight-color: transparent; }
	/* Tab bar: pill indicator on the active tab */
	.tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 4px; left: 50%; width: 38px; height: 30px; transform: translateX(-50%); border-radius: 10px; background: rgba(255, 255, 255, .12); z-index: -1; }
	.tabbar a, .tabbar button { isolation: isolate; }
	/* Menu as a bottom sheet */
	.mnav { top: auto; height: min(86svh, 720px); border-radius: 26px 26px 0 0; clip-path: none; transform: translateY(102%); transition: transform .5s var(--ease), visibility .5s; box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, .6); }
	.mnav.is-open { clip-path: none; transform: none; }
	.mnav__top { height: 54px; position: relative; }
	.mnav__top::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
	.mnav__body { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
	.mnav__body a { font-size: 20px; padding: 11px 0; }
	.mnav-backdrop { position: fixed; inset: 0; z-index: 89; background: rgba(13, 13, 15, .45); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
	.mnav.is-open + .mnav-backdrop, .mnav-backdrop.is-on { opacity: 1; visibility: visible; }
	/* Sections feel like cards */
	.sec--white, .mk, .ai, .studio-show { border-radius: 26px 26px 0 0; margin-top: -18px; position: relative; }
	body { overscroll-behavior-y: none; }
}
@keyframes vt-out { to { opacity: 0; transform: translateX(-12%); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(18%); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }