/* Emotly / a journey through your inner world.
   The native document supplies scroll input; flight.js places each chapter
   along the camera's forward axis. No chapter slides vertically. */

:root {
  --ink: #11231d;
  --muted: #4f655b;
  --mint: #51CE7F;
  --accent: #51CE7F;
  --line: #193d2729;
  --page-gutter: clamp(28px, 4.25vw, 100px);
  --frame-top: max(110px, 12.5svh);
  --frame-bottom: max(76px, 8svh);
}

html {
  scrollbar-width: none;
  scrollbar-gutter: auto;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.modal-open { overflow: hidden !important; overscroll-behavior: none; }
body { color: var(--ink); background: #e8f0ed; }
::selection { background: #51CE7F; color: #11231d; }
em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }
h1, h2, h3 { font-family: Manrope, Arial, sans-serif; }
:is(.hero, .weather, .gallery-section, .pixels-section, .privacy-section, .download-section) :is(h1, h2) {
  font-family: Manrope, Arial, sans-serif;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -.073em;
  line-height: .87;
  white-space: nowrap;
  text-wrap: nowrap;
  color: #11231d;
}
:is(.hero, .weather, .gallery-section, .pixels-section, .privacy-section, .download-section) :is(h1, h2) em {
  color: #51CE7F;
  font-family: inherit;
  font-weight: 800;
  font-style: normal;
  letter-spacing: inherit;
  line-height: inherit;
}
.hero h1 { font-size: clamp(116px, min(13.7vw, 26svh), 288px); margin-top: 22px; }
.section-copy h2 { font-size: clamp(80px, min(9.8vw, 19svh), 184px); margin-top: 22px; }
.pixels-copy h2 { font-size: clamp(80px, min(8.2vw, 18svh), 164px); }
.gallery-heading h2 { font-size: clamp(92px, min(10.7vw, 16svh), 196px); margin-top: 12px; }
.gallery-heading h2 br { display: none; }
.privacy-heading h2 { font-size: clamp(102px, min(10.9vw, 21svh), 208px); margin-top: 18px; }
.download-content h2 { font-size: clamp(140px, min(16.8vw, 22svh), 300px); margin-top: 18px; line-height: .83; }
.download-content h2 em { display: inline; margin: 0; }
.title-second { padding-bottom: 0; }
[data-i18n="heroLine2"]:empty { display: none; }
.eyebrow { font-size: 10px; letter-spacing: .15em; line-height: 1.5; font-weight: 750; }
.chapter-number { color: #325c42; opacity: .65; }
.status-dot { background: #51CE7F; box-shadow: 0 0 0 4px #51ce7f16; }
.body-copy, .hero-description { color: #41584c; font-size: 14px; line-height: 1.7; }
.hero-description { max-width: 360px; margin-top: 24px; }
.hero-cta { margin-top: 26px; gap: 20px; }
.availability { color: #41584c; font-size: 10px; opacity: 1; }
.button-primary { background: #51CE7F; color: #11231d; border-color: #51CE7F; box-shadow: 0 10px 40px -23px #17623866; }
.button-primary:hover { background: #75dfa0; box-shadow: 0 14px 42px -19px #17623855; }
.button-arrow { background: #eaffef7a; }
.button-dark { background: #11231d; }
.button-dark:hover { background: #214b31; }
.button-outline { border: 1px solid #294b3e66; background: #ffffff3b; padding: 13px 24px; min-height: 46px; color: #11231d; font-size: 11px; }
.button-outline:hover { background: #ffffffa1; border-color: #11231d; }
.brand-period, .stat-dot, .year-asterisk { color: #51CE7F; }

/* Open navigation, with the app mark large enough to read as a brand. */
.header, .header.scrolled {
  top: max(23px, env(safe-area-inset-top, 0px));
  left: var(--page-gutter);
  right: var(--page-gutter);
  width: auto;
  max-width: none;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.brand { font-size: 35px; gap: 12px; letter-spacing: -.065em; }
.brand-mark { width: 62px; height: 62px; border-radius: 18px; box-shadow: 0 9px 24px -15px #28513c70; }
.brand-mark img { width: 100%; height: 100%; }
.desktop-nav { margin-left: 0; gap: 36px; }
.desktop-nav a { font-size: 11px; font-weight: 750; }
.header .button-small { min-height: 44px; padding: 11px 19px; gap: 13px; font-size: 10px; }
.chapter-nav { display: none; }
.mobile-menu:not([hidden]) { border-radius: 4px 4px 24px 24px; background: #eef8f0f5; }
.sky { background: var(--sky, #C2DDEF); }
.sky-photo { inset: -3%; opacity: .82; filter: saturate(1.12); transform: scale(calc(1.025 + var(--page-progress) * .14)); }
.sky-wash { background: var(--sky, #C2DDEF); mix-blend-mode: normal; opacity: .32; }
.sky-sun { top: 44%; left: 50%; width: 62vmin; height: 62vmin; background: #fffdf0; opacity: .35; }
.film-grain { opacity: .012; }
.hero-orbit, .download-orbit, .download-planet, .download-landscape { display: none; }

/* The fixed flight camera and independent depth planes. */
#flight-scroll-space { display: none; width: 1px; max-width: 1px; pointer-events: none; }
html.flight-mode { scroll-behavior: auto; scroll-padding-top: 0; }
.flight-mode #flight-scroll-space { display: block; }
.flight-mode .flight-viewport {
  position: fixed;
  inset: 0;
  width: var(--viewport-width, 100%);
  max-width: 100%;
  height: var(--viewport-height, 100svh);
  perspective: 1000px;
  perspective-origin: 50% 48%;
  overflow: hidden;
  overflow: clip;
  z-index: 2;
}
.flight-mode .flight-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  display: block;
  overflow: visible;
  transform-origin: 50% 48%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  pointer-events: none;
  isolation: auto;
}
.flight-mode .panel-inner {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: var(--frame-top) var(--page-gutter) var(--frame-bottom);
}
.flight-mode .reveal,
.flight-mode .reveal.in-view { opacity: 1; transform: none; transition: none; }
.flight-mode .hero-inner { display: flex; align-items: center; }
.flight-mode .hero-copy { width: 88%; max-width: 1160px; margin-top: -14px; }
.flight-mode .hero-mascot { width: min(47vw, 66svh, 810px); right: -1%; top: 51%; transform: translateY(-50%); z-index: 2; }
.flight-mode .hero-mascot > img { filter: drop-shadow(0 35px 55px #3a985329); }
.flight-mode .hero-mascot .note-one { bottom: 18%; left: 20%; background: #ffffffa1; border-radius: 4px 20px 20px 20px; font-size: 11px; padding: 13px 20px; }
.flight-mode .hero-bottom { left: var(--page-gutter); right: var(--page-gutter); bottom: calc(var(--frame-bottom) + 5px); }
.hero-footnote { color: #43684d; }
.scroll-invite { text-transform: uppercase; font-size: 9px; font-weight: 750; letter-spacing: .08em; gap: 11px; }
.scroll-mouse { width: 30px; height: 30px; border: 1px solid #315c4866; border-radius: 50%; display: grid; place-items: center; padding: 0; overflow: hidden; }
.scroll-mouse i { width: 11px; height: 11px; border: 1px solid #315c48; border-radius: 50%; background: transparent; animation: forward-invite 2.3s ease-out infinite; }
@keyframes forward-invite { 0% { transform: scale(.3); opacity: 0; } 25% { opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

/* The feeling is an object in the sky; the control stays within reach. */
.flight-mode .weather-scene { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(340px, .85fr); gap: 5vw; align-items: center; }
.flight-mode .weather-copy { width: 100%; max-width: none; }
.flight-mode .weather-copy .body-copy { max-width: 375px; margin-top: 24px; }
.flight-mode .feature-line { margin-top: 28px; }
.flight-mode .mood-experience { width: 100%; min-width: 0; max-width: 510px; height: min(560px, 100%); margin: 0 auto; padding-bottom: 0; }
.flight-mode .emotion-orb { width: 245px; height: 231px; top: 0; }
.mood-console { color: #183b29; background: linear-gradient(135deg, #ffffffbd, #f0fff19c); border-color: #ffffffed; box-shadow: 0 32px 70px -42px #2e6a555e; border-radius: 24px; }
.mood-value-line output { color: #23643c; font-weight: 800; }
.mood-tags button:hover, .mood-tags button.selected { background: #51ce7f38; border-color: #51ce7f94; }
.mood-orbit { opacity: .75; }
.mood-orbit span + span { border-color: #51ce7f40; }

/* A real spatial carousel, with its caption and controls in the same plane. */
.flight-mode .gallery-scene { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding-inline: 0; overflow: visible; }
.flight-mode .gallery-heading { flex: 0 0 auto; padding-inline: var(--page-gutter); }
.flight-mode .gallery-heading > p:last-child { max-width: 530px; margin-top: 17px; color: #41584c; font-size: 12px; }
.flight-mode .spatial-gallery { flex: 1 1 0; min-height: 0; height: auto; max-height: none; width: 100%; margin: 8px 0 0; transform-origin: 50% 50%; perspective: 1200px; perspective-origin: 50% 47%; }
.flight-mode .gallery-track { width: 100%; max-width: 100%; }
.flight-mode .spatial-card { width: var(--gallery-card-width, 185px); top: 49%; border-radius: 14px; border-color: #ffffffef; background: linear-gradient(140deg, #ffffff, #9bffd359); box-shadow: 0 22px 52px -27px #164d6880, 0 0 0 4px #ffffff24; }
.flight-mode .spatial-card.is-active { box-shadow: 0 28px 62px -23px #23574966, 0 0 42px #c6fff77a; }
.flight-mode .spatial-card:after { background: radial-gradient(ellipse, #a0f4ee8f, transparent 66%); }
.flight-mode .gallery-floor { bottom: -1%; }
.flight-mode .gallery-ring { width: 90%; max-width: 90%; height: 340px; bottom: -11%; border-color: #ffffffab; }
.flight-mode .gallery-ring.ring-back { width: 105%; max-width: 105%; height: 385px; border-color: #51ce7f30; }
.flight-mode .gallery-bottom { position: relative; inset: auto; flex: 0 0 auto; margin: 0; padding: 0 var(--page-gutter); }
.gallery-caption { min-height: 60px; }
.gallery-caption .micro-label { color: #467d59; font-size: 9px; }
.gallery-caption h3 { font-size: 18px; font-weight: 800; letter-spacing: -.035em; }
.gallery-caption p { color: #45604e; font-size: 11px; }
.gallery-controls { margin-top: 6px; }
.circle-button { color: #193b29; border-color: #325b3733; background: #ffffff83; }
.circle-button:hover { background: #b9f4cc; }
.gallery-dots button.active:after { background: #31a25c; }
.gallery-hint { margin-top: 7px; font-size: 10px; color: #496650; }
.gallery-autoplay { min-height: 30px; border-color: #325b3733; background: #ffffff80; color: #193b29; }
.gallery-autoplay:hover { background: #b9f4cc; }

/* 365 days occupy one view, with room for each real interactive cell. */
.flight-mode .pixels-scene { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .8fr); gap: 5vw; align-items: center; }
.flight-mode .pixels-copy { width: 100%; max-width: none; }
.flight-mode .pixels-copy .body-copy { max-width: 380px; }
.flight-mode .pixel-stat { margin-top: 25px; gap: 22px; }
.flight-mode .pixel-stat > span { font-size: 83px; font-weight: 800; }
.flight-mode .text-link { margin-top: 24px; }
.flight-mode .year-constellation { width: 100%; max-width: 450px; min-width: 0; margin: 0 auto; }
.flight-mode .year-card { width: 100%; max-width: 430px; padding: 26px; border-radius: 23px; background: linear-gradient(135deg, #ffffffcb, #f1fff29e); box-shadow: 0 30px 75px -40px #2c604a66; }
.flight-mode .year-card h3 { font-size: 43px; font-weight: 800; letter-spacing: -.06em; }
.flight-mode .pixel-grid { grid-auto-rows: clamp(5px, .8svh, 8px); gap: 3px; }
.flight-mode .pixel-months { gap: 3px; color: #446f51; }
.flight-mode .pixel-tooltip { font-size: 9px; min-height: 27px; color: #385642; }
.flight-mode .year-orbit { width: 123%; left: -11.5%; height: 92%; opacity: .7; }
.flight-mode .year-note { right: -13px; bottom: -20px; padding: 12px 16px; font-size: 10px; border-radius: 4px 18px 18px 18px; }
.pixel.selected { outline-color: #26934e; }

/* Private by design. Detailed answers have their own calm reading space. */
.flight-mode .privacy-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.flight-mode .privacy-heading { position: relative; flex: 0 0 auto; max-width: 1160px; width: 100%; margin: 0; }
.flight-mode .privacy-heading .eyebrow { margin: 0; }
.flight-mode .privacy-symbol { position: absolute; top: 40%; left: calc(50% + min(33vw, 560px)); width: 64px; height: 64px; border-radius: 20px; background: #ffffff8f; color: #31814c; }
.flight-mode .privacy-heading .body-copy { margin-top: 20px; color: #41584c; font-size: 13px; }
.flight-mode .privacy-points { width: 100%; max-width: 1000px; margin: 32px auto 0; gap: 40px; flex: 0 0 auto; }
.flight-mode .privacy-points article { padding-top: 14px; border-color: #3154383b; }
.flight-mode .privacy-points h3 { margin-top: 11px; font-size: 20px; font-weight: 800; }
.flight-mode .privacy-points p { max-width: 280px; font-size: 11px; line-height: 1.7; margin-top: 9px; color: #45604e; }
.flight-mode #faq-open { flex: 0 0 auto; margin-top: 24px; }
.faq-viewer { position: fixed; inset: 0; width: min(820px, calc(100% - 48px)); max-width: 820px; max-height: calc(100dvh - 80px); margin: auto; padding: 0; color: #11231d; background: #eff8f1; border: 1px solid #ffffffbf; border-radius: 28px; box-shadow: 0 35px 110px #102d3040; overflow: auto; overscroll-behavior: contain; }
.faq-viewer::backdrop { background: #17332999; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.faq-dialog-content { position: relative; padding: 58px 52px 46px; }
.faq-viewer .faq-wrap { display: block; margin: 0; max-width: none; }
.faq-viewer .faq-wrap > h3 { max-width: 570px; font-size: clamp(36px, 4.7vw, 58px); line-height: 1; margin: 0 0 25px; font-weight: 800; letter-spacing: -.065em; text-transform: uppercase; }
.faq-viewer .faq-list summary { font-size: 14px; min-height: 72px; color: #183b29; }
.faq-viewer .faq-list details > p { font-size: 13px; line-height: 1.8; color: #45604e; padding-bottom: 24px; }
.faq-viewer .reveal { opacity: 1; transform: none; }
#faq-close { position: absolute; right: 17px; top: 17px; width: 38px; height: 38px; min-width: 38px; color: #193b29; background: #ffffff80; border-color: #31543833; z-index: 2; }

/* A final open horizon. Original store artwork is intentionally unchanged. */
.flight-mode .download-inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.flight-mode .download-content { width: 100%; max-width: none; margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.flight-mode .download-icon { display: none; }
.flight-mode .download-content .body-copy { margin-top: 19px; font-size: 13px; line-height: 1.65; }
.flight-mode .store-links { flex: 0 0 auto; margin-top: 26px; }
.flight-mode .download-small { font-size: 9px; margin-top: 17px; color: #415e49; }
.flight-mode .footer { width: 100%; flex: 0 0 auto; min-height: 0; margin-top: 18px; padding: 18px 0 0; background: none; border-color: #31543829; gap: 22px; }
.flight-mode .footer-brand { font-size: 25px; letter-spacing: -.07em; }
.flight-mode .footer > p { display: none; }
.flight-mode .footer nav { width: auto; margin-left: auto; gap: 26px; }
.flight-mode .footer nav a { font-size: 10px; padding: 7px 0; }
.flight-mode .copyright { color: #415e49; font-size: 9px; margin: 0; }

/* Viewport furniture stays still while the world passes the camera. */
.experience-controls { left: var(--page-gutter); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); gap: 5px; }
.experience-button { background: #ffffff69; border-color: #ffffff8a; color: #284d35; font-size: 8px; padding: 8px 11px; }
.experience-button[aria-pressed="true"] { background: #a1ebbd80; }
.flight-progress { right: var(--page-gutter); bottom: calc(30px + env(safe-area-inset-bottom, 0px)); color: #385d43; }
.flight-progress i { background: #31a85d; }
.flight-hud { position: fixed; bottom: calc(29px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; z-index: 20; pointer-events: none; color: #385d43; font-size: 8px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.flight-depth-label { font-variant-numeric: tabular-nums; opacity: .6; }
.viewer-info h2 { font-weight: 800; letter-spacing: -.055em; }
.viewer-info h2 em { font-style: normal; }

@media (min-width: 801px) and (max-width: 950px) {
  .flight-mode .pixels-copy h2 { font-size: clamp(64px, 8vw, 76px); }
}

/* The full-motion scene uses the phone's real frame, never a desktop canvas. */
@media (max-width: 800px) {
  :root {
    --page-gutter: 20px;
    --frame-top: calc(100px + env(safe-area-inset-top, 0px));
    --frame-bottom: calc(65px + env(safe-area-inset-bottom, 0px));
  }
  .header, .header.scrolled { top: calc(17px + env(safe-area-inset-top, 0px)); left: var(--page-gutter); right: var(--page-gutter); height: 54px; gap: 10px; padding: 0; }
  .brand { font-size: 30px; gap: 9px; }
  .brand-mark { width: 52px; height: 52px; border-radius: 15px; }
  .header-actions { gap: 3px; }
  .header .button-small { min-height: 40px; padding: 9px 13px; font-size: 9px; gap: 8px; }
  .header .button-small .icon { width: 14px; height: 14px; }
  .menu-toggle { width: 30px; min-width: 30px; height: 40px; margin: 0; }
  .menu-toggle span { width: 19px; height: 1.5px; }
  .mobile-menu:not([hidden]) { left: var(--page-gutter); right: var(--page-gutter); top: calc(83px + env(safe-area-inset-top, 0px)); }
  .hero h1 { font-size: clamp(67px, min(21.5vw, 13svh), 136px); margin-top: 16px; line-height: .88; }
  .section-copy h2 { font-size: clamp(53px, min(16.9vw, 9.65svh), 100px); margin-top: 13px; line-height: .9; }
  .pixels-copy h2 { font-size: clamp(51px, min(16.3vw, 9.35svh), 95px); }
  .gallery-heading h2 { font-size: clamp(57px, min(18vw, 10svh), 104px); line-height: .85; margin-top: 10px; }
  .privacy-heading h2 { font-size: clamp(43px, min(14.2vw, 8.6svh), 92px); line-height: .91; margin-top: 13px; }
  .download-content h2 { font-size: clamp(81px, min(26.7vw, 15svh), 155px); line-height: .83; margin-top: 18px; }
  .hero .eyebrow, .section-copy .eyebrow, .gallery-heading .eyebrow, .privacy-heading .eyebrow, .download-content .eyebrow { font-size: 8px; gap: 7px; letter-spacing: .12em; }
  .chapter-number { font-size: 8px; margin-right: 3px; }
  .body-copy, .hero-description { font-size: 12px; line-height: 1.6; }
  .button-primary { min-height: 48px; font-size: 10px; padding: 8px 8px 8px 20px; gap: 15px; }
  .button-arrow { width: 32px; height: 32px; }
  .button-arrow .icon { width: 17px; height: 17px; }
  .hero .availability { font-size: 8px; max-width: 62px; }
  .flight-mode .flight-viewport { perspective: 850px; perspective-origin: 50% 48%; }
  .flight-mode .flight-panel { min-height: 0; height: 100%; max-height: none; overflow: visible; }
  .flight-mode .panel-inner { position: relative; top: auto; width: 100%; height: 100%; min-height: 0; max-height: none; padding: var(--frame-top) var(--page-gutter) var(--frame-bottom); }
  .flight-mode .hero-inner { display: flex; align-items: flex-start; }
  .flight-mode .hero-copy { width: 100%; max-width: none; margin: 0; }
  .flight-mode .hero-description { max-width: 278px; margin-top: 20px; font-size: 12px; }
  .flight-mode .hero-cta { gap: 14px; margin-top: 20px; }
  .flight-mode .hero-mascot { width: min(69vw, 34svh, 350px); right: -12px; top: auto; bottom: 31px; transform: none; opacity: 1; }
  .flight-mode .hero-mascot .note-one { display: none; }
  .flight-mode .hero-bottom { bottom: calc(var(--frame-bottom) + 26px); }
  .flight-mode .hero-footnote { display: none; }
  .flight-mode .scroll-invite { max-width: 140px; font-size: 8px; line-height: 1.5; gap: 9px; }
  .flight-mode .scroll-invite > span:last-child { max-width: 90px; }
  .scroll-mouse { width: 27px; height: 27px; min-width: 27px; }
  .flight-mode .weather-scene { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
  .flight-mode .weather-copy { width: 100%; max-width: 590px; margin: 0 auto; }
  .flight-mode .weather-copy .body-copy { font-size: 12px; line-height: 1.6; max-width: 375px; margin-top: 14px; }
  .flight-mode .feature-line { display: none; }
  .flight-mode .mood-experience { width: 100%; max-width: 375px; min-width: 0; min-height: 0; height: 100%; max-height: 410px; align-self: center; margin: 0 auto; justify-content: flex-end; }
  .flight-mode .emotion-orb { width: clamp(96px, 17svh, 156px); height: clamp(91px, 16svh, 147px); top: 0; }
  .flight-mode .orb-eye { width: 14px; height: 25px; }
  .flight-mode .orb-eye i { width: 7px; height: 13px; left: 4px; top: 5px; }
  .flight-mode .orb-mouth { height: 35px; stroke-width: 5.5; }
  .flight-mode .orb-cheek { width: 21px; height: 10px; }
  .flight-mode .mood-orbit { width: 110%; left: -5%; height: 125px; top: 12px; }
  .flight-mode .mood-cloud { top: 65px; width: 140px; height: 40px; }
  .flight-mode .mood-console { width: 100%; max-width: 375px; padding: 15px 18px 13px; border-radius: 20px; }
  .flight-mode .console-top .micro-label, .flight-mode .live-dot { font-size: 8px; }
  .flight-mode .mood-value-line { margin: 8px 0 4px; }
  .flight-mode .mood-value-line > span { font-size: 15px; max-width: 190px; line-height: 1.3; font-weight: 650; }
  .flight-mode .mood-value-line output { font-size: 35px; line-height: 1.15; }
  .flight-mode .mood-console input[type="range"] { height: 10px; margin: 14px 0; }
  .flight-mode .range-labels { font-size: 9px; line-height: 1.4; }
  .flight-mode .mood-tags { gap: 5px; margin-top: 12px; flex-wrap: nowrap; }
  .flight-mode .mood-tags button { min-width: 0; min-height: 33px; padding: 7px 9px; gap: 4px; font-size: 9px; flex: 1 1 auto; justify-content: center; white-space: nowrap; }
  .flight-mode .mood-tags button > span:first-child { font-size: 12px; }
  .flight-mode .demo-note { font-size: 8px; line-height: 1.5; margin-top: 10px; }
  .flight-mode .gallery-scene { display: flex; flex-direction: column; gap: 0; padding-inline: 0; overflow: visible; }
  .flight-mode .gallery-heading { width: 100%; padding-inline: var(--page-gutter); }
  .flight-mode .gallery-heading h2 > span, .flight-mode .gallery-heading h2 > em { display: block; }
  .flight-mode .gallery-heading > p:last-child { display: none; }
  .flight-mode .spatial-gallery { min-height: 0; height: auto; max-height: none; flex: 1 1 0; margin-top: 5px; perspective: 850px; }
  .flight-mode .spatial-card { width: var(--mobile-card-width, 170px); padding: 4px; top: 49%; }
  .flight-mode .gallery-ring { width: 128%; max-width: 128%; height: 230px; bottom: -12%; }
  .flight-mode .gallery-ring.ring-back { width: 147%; max-width: 147%; height: 268px; bottom: -10%; }
  .flight-mode .gallery-bottom { width: 100%; padding: 0 var(--page-gutter); margin-top: 0; }
  .flight-mode .gallery-caption { min-height: 53px; }
  .flight-mode .gallery-caption .micro-label { font-size: 8px; line-height: 1.3; }
  .flight-mode .gallery-caption h3 { font-size: 16px; margin-top: 3px; line-height: 1.2; }
  .flight-mode .gallery-caption p { font-size: 10px; line-height: 1.4; margin-top: 4px; max-width: 350px; }
  .flight-mode .gallery-controls { margin-top: 3px; gap: 12px; }
  .flight-mode .gallery-controls .circle-button { width: 37px; height: 37px; min-width: 37px; }
  .flight-mode .gallery-dots button { min-width: 21px; width: 21px; height: 35px; }
  .flight-mode .gallery-hint { font-size: 8px; line-height: 1.35; gap: 9px; margin-top: 4px; flex-wrap: nowrap; }
  .flight-mode .gallery-hint > span { max-width: 230px; min-width: 0; }
  .flight-mode .gallery-autoplay { min-height: 29px; font-size: 8px; padding: 4px 8px; flex-shrink: 0; }
  .flight-mode .gallery-autoplay .icon { width: 11px; height: 11px; }
  .flight-mode .pixels-scene { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px; align-items: center; }
  .flight-mode .pixels-copy { max-width: 590px; margin: 0 auto; }
  .flight-mode .pixels-copy .body-copy { margin-top: 14px; max-width: 390px; font-size: 12px; line-height: 1.6; }
  .flight-mode .pixel-stat, .flight-mode .pixels-copy .text-link { display: none; }
  .flight-mode .year-constellation { width: 100%; max-width: 365px; min-width: 0; height: auto; margin: 0 auto; }
  .flight-mode .year-card { max-width: 365px; padding: 17px 18px 14px; border-radius: 20px; transform: rotateY(-4deg) rotateX(3deg) rotateZ(2deg); }
  .flight-mode .year-card-header { margin-bottom: 10px; }
  .flight-mode .year-card .micro-label { font-size: 8px; line-height: 1.4; }
  .flight-mode .year-card h3 { font-size: 32px; line-height: 1.1; margin-top: 3px; }
  .flight-mode .year-asterisk { font-size: 23px; }
  .flight-mode .year-example { font-size: 8px; }
  .flight-mode .pixel-months { font-size: 7px; gap: 2px; margin-bottom: 5px; line-height: 1.4; }
  .flight-mode .pixel-grid { grid-auto-rows: clamp(3.5px, calc((var(--viewport-height, 100svh) - 510px) / 31), 7px); gap: 2px; }
  .flight-mode .pixel { border-radius: 2px; }
  .flight-mode .pixel-tooltip { margin-top: 11px; font-size: 9px; min-height: 22px; line-height: 1.5; }
  .flight-mode .pixel-legend { margin-top: 8px; padding-top: 8px; font-size: 8px; }
  .flight-mode .year-note { display: none; }
  .flight-mode .year-orbit { width: 112%; left: -6%; height: 85%; }
  .flight-mode .privacy-inner { justify-content: center; align-items: center; }
  .flight-mode .privacy-heading { text-align: left; max-width: 590px; }
  .flight-mode .privacy-heading .eyebrow { justify-content: flex-start; }
  .flight-mode .privacy-symbol { display: none; }
  .flight-mode .privacy-heading .body-copy { font-size: 12px; line-height: 1.6; max-width: 320px; margin: 14px 0 0; }
  .flight-mode .privacy-points { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 590px; gap: 12px; margin: 21px 0 0; }
  .flight-mode .privacy-points article { display: grid; grid-template-columns: 23px minmax(0, 1fr); gap: 0 9px; padding-top: 11px; }
  .flight-mode .privacy-count { grid-row: 1 / 3; font-size: 8px; margin-top: 4px; }
  .flight-mode .privacy-points h3 { font-size: 18px; line-height: 1.25; margin-top: 0; }
  .flight-mode .privacy-points p { max-width: none; font-size: 11px; line-height: 1.55; margin-top: 5px; }
  .flight-mode #faq-open { align-self: flex-start; margin-top: 20px; min-height: 42px; padding: 10px 19px; font-size: 10px; }
  .flight-mode .download-inner { padding-top: calc(var(--frame-top) - 5px); }
  .flight-mode .download-content { flex: 1 1 auto; margin: 0; justify-content: center; }
  .flight-mode .download-content .body-copy { font-size: 12px; line-height: 1.6; margin-top: 17px; }
  .flight-mode .store-links { gap: 12px; margin-top: 24px; }
  .flight-mode .download-small { max-width: 300px; margin-top: 14px; font-size: 9px; line-height: 1.5; }
  .flight-mode .footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px 16px; margin-top: 16px; padding: 14px 0 0; width: 100%; }
  .flight-mode .footer-brand { font-size: 24px; }
  .flight-mode .footer nav { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; gap: 26px; justify-content: flex-start; }
  .flight-mode .footer nav a { padding: 4px 0; font-size: 10px; }
  .flight-mode .copyright { grid-column: 2; grid-row: 1; font-size: 8px; }
  .experience-controls { left: 17px; bottom: calc(15px + env(safe-area-inset-bottom, 0px)); gap: 4px; }
  .experience-button { font-size: 8px; padding: 8px 9px; min-height: 33px; gap: 5px; }
  .experience-button .icon { width: 12px; height: 12px; }
  .flight-progress { right: 20px; bottom: calc(27px + env(safe-area-inset-bottom, 0px)); gap: 7px; }
  .flight-progress > div { width: 30px; }
  .flight-progress b { font-size: 8px; }
  .flight-hud { display: none; }
  .faq-viewer { width: calc(100% - 28px); max-height: calc(100dvh - 42px - env(safe-area-inset-top, 0px)); border-radius: 22px; }
  .faq-dialog-content { padding: 58px 25px 30px; }
  .faq-viewer .faq-wrap > h3 { font-size: clamp(34px, 9.5vw, 52px); max-width: 380px; margin-bottom: 19px; }
  .faq-viewer .faq-list summary { font-size: 13px; gap: 15px; min-height: 68px; }
  .faq-viewer .faq-list details > p { padding-right: 0; font-size: 12px; line-height: 1.75; }
}

/* Small portrait displays retain all controls without growing the document. */
@media (max-width: 800px) and (max-height: 730px) and (orientation: portrait) {
  :root { --frame-top: calc(91px + env(safe-area-inset-top, 0px)); --frame-bottom: calc(55px + env(safe-area-inset-bottom, 0px)); }
  .header, .header.scrolled { top: calc(15px + env(safe-area-inset-top, 0px)); }
  .flight-mode .hero-description { font-size: 11px; line-height: 1.55; max-width: 266px; margin-top: 17px; }
  .flight-mode .hero-cta { margin-top: 17px; }
  .flight-mode .hero-mascot { width: min(65vw, 32svh); bottom: 31px; }
  .flight-mode .hero-bottom { bottom: calc(var(--frame-bottom) + 16px); }
  .flight-mode .weather-scene { gap: 8px; }
  .flight-mode .weather-copy .body-copy { max-width: 370px; font-size: 11px; line-height: 1.5; margin-top: 12px; }
  .flight-mode .mood-console { padding: 12px 16px 11px; }
  .flight-mode .mood-tags { margin-top: 10px; }
  .flight-mode .demo-note { margin-top: 8px; }
  .flight-mode .gallery-heading h2 { font-size: clamp(53px, min(17.1vw, 9.5svh), 87px); margin-top: 7px; }
  .flight-mode .gallery-caption { min-height: 48px; }
  .flight-mode .gallery-caption h3 { font-size: 14px; }
  .flight-mode .gallery-caption p { font-size: 9px; }
  .flight-mode .gallery-controls { margin-top: 1px; }
  .flight-mode .gallery-hint { margin-top: 2px; }
  .flight-mode .pixels-copy .body-copy { display: none; }
  .flight-mode .pixels-scene { gap: 11px; }
  .flight-mode .year-card { padding-top: 14px; padding-bottom: 12px; }
  .flight-mode .privacy-points { margin-top: 17px; gap: 10px; }
  .flight-mode .privacy-points p { font-size: 10.5px; }
  .flight-mode .privacy-heading .body-copy { font-size: 11px; margin-top: 11px; }
  .flight-mode #faq-open { margin-top: 15px; min-height: 39px; }
  .flight-mode .download-content .body-copy { font-size: 11px; margin-top: 14px; }
  .flight-mode .store-links { margin-top: 20px; }
  .flight-mode .download-small { margin-top: 12px; font-size: 8px; }
  .flight-mode .footer { margin-top: 11px; padding-top: 11px; gap: 6px 14px; }
}

@media (max-width: 370px) {
  :root { --page-gutter: 18px; }
  .header, .header.scrolled { left: 16px; right: 16px; gap: 7px; }
  .brand { font-size: 27px; gap: 7px; }
  .brand-mark { width: 48px; height: 48px; border-radius: 14px; }
  .header .button-small { padding: 9px 11px; gap: 6px; font-size: 8px; }
  .header .button-small .icon { width: 12px; height: 12px; }
  .menu-toggle { width: 25px; min-width: 25px; }
  .hero h1 { font-size: clamp(58px, 21.6vw, 80px); }
  .section-copy h2 { font-size: clamp(47px, 16.3vw, 58px); }
  .pixels-copy h2 { font-size: clamp(46px, 15.9vw, 57px); }
  .privacy-heading h2 { font-size: clamp(43px, 14.2vw, 53px); }
  .flight-mode .hero-description { max-width: 250px; }
  .flight-mode .hero-cta { gap: 10px; }
  .flight-mode .mood-tags { gap: 4px; }
  .flight-mode .mood-tags button { padding-inline: 6px; font-size: 8px; gap: 3px; }
  .flight-mode .mood-value-line > span { font-size: 14px; max-width: 170px; }
  .flight-mode .gallery-hint { gap: 7px; }
  .flight-mode .gallery-hint > span { max-width: 177px; font-size: 7px; }
  .flight-mode .gallery-autoplay { padding-inline: 6px; font-size: 7px; }
  .flight-mode .gallery-controls { gap: 10px; }
  .flight-mode .gallery-dots button { min-width: 19px; width: 19px; }
  .flight-mode .year-card { padding-inline: 14px; }
  .flight-mode .year-example { font-size: 7px; }
  .flight-mode .privacy-points article { grid-template-columns: 18px minmax(0, 1fr); gap: 0 8px; }
  .flight-mode .privacy-points h3 { font-size: 16px; }
  .flight-mode .privacy-points p { font-size: 10px; }
  .flight-mode .store-links { gap: 10px; }
  .experience-controls { left: 12px; }
  .experience-button { font-size: 7px; padding-inline: 7px; }
  .flight-progress { right: 16px; }
}

@media (max-width: 800px) and (max-height: 600px) and (orientation: portrait) {
  :root { --frame-top: calc(82px + env(safe-area-inset-top, 0px)); --frame-bottom: calc(51px + env(safe-area-inset-bottom, 0px)); }
  .header, .header.scrolled { top: calc(12px + env(safe-area-inset-top, 0px)); }
  .hero h1 { margin-top: 12px; font-size: clamp(58px, min(21vw, 12svh), 76px); }
  .flight-mode .hero-description { margin-top: 14px; }
  .flight-mode .hero-cta { margin-top: 14px; }
  .flight-mode .hero-mascot { width: min(58vw, 30svh); bottom: 30px; }
  .flight-mode .hero-bottom { bottom: calc(var(--frame-bottom) + 14px); }
  .flight-mode .hero .button-primary { min-height: 43px; }
  .flight-mode .hero .button-arrow { width: 28px; height: 28px; }
  .flight-mode .weather-copy .body-copy { display: none; }
  .flight-mode .section-copy h2 { margin-top: 10px; }
  .flight-mode .mood-experience { max-height: 315px; }
  .flight-mode .emotion-orb { width: 98px; height: 93px; }
  .flight-mode .gallery-heading h2 { font-size: clamp(45px, min(16.2vw, 8.8svh), 58px); margin-top: 7px; }
  .flight-mode .gallery-caption { min-height: 43px; }
  .flight-mode .gallery-caption h3 { font-size: 12px; }
  .flight-mode .gallery-caption p { font-size: 8px; }
  .flight-mode .gallery-caption .micro-label { font-size: 7px; }
  .flight-mode .gallery-controls .circle-button { width: 33px; height: 33px; min-width: 33px; }
  .flight-mode .gallery-dots button { height: 32px; }
  .flight-mode .gallery-hint { font-size: 7px; }
  .flight-mode .gallery-autoplay { min-height: 26px; }
  .flight-mode .year-card-header { margin-bottom: 8px; }
  .flight-mode .year-card h3 { font-size: 28px; }
  .flight-mode .year-card .micro-label { font-size: 7px; }
  .flight-mode .year-card { padding: 12px 14px 11px; }
  .flight-mode .pixel-tooltip { margin-top: 8px; font-size: 8px; min-height: 20px; }
  .flight-mode .pixel-legend { margin-top: 6px; padding-top: 6px; font-size: 7px; }
  .flight-mode .privacy-heading .body-copy { margin-top: 10px; font-size: 10px; }
  .flight-mode .privacy-points { margin-top: 13px; gap: 8px; }
  .flight-mode .privacy-points article { padding-top: 8px; }
  .flight-mode .privacy-points h3 { font-size: 15px; }
  .flight-mode .privacy-points p { font-size: 9px; line-height: 1.5; margin-top: 4px; }
  .flight-mode #faq-open { min-height: 35px; padding: 8px 16px; margin-top: 12px; font-size: 9px; }
  .flight-mode .download-content h2 { font-size: clamp(74px, min(25vw, 14.6svh), 88px); margin-top: 14px; }
  .flight-mode .download-content .body-copy { margin-top: 12px; font-size: 10px; }
  .flight-mode .store-links { margin-top: 16px; }
  .flight-mode .download-small { max-width: 250px; font-size: 7px; margin-top: 10px; }
  .flight-mode .footer { gap: 5px 12px; padding-top: 9px; margin-top: 8px; }
  .flight-mode .footer-brand { font-size: 21px; }
  .flight-mode .footer nav a { font-size: 9px; }
  .flight-mode .copyright { font-size: 7px; }
}

/* Landscape is another camera aspect ratio, not a return to a tall web page. */
@media (max-height: 650px) and (orientation: landscape) {
  :root { --frame-top: calc(74px + env(safe-area-inset-top, 0px)); --frame-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); --page-gutter: clamp(22px, 4vw, 60px); }
  .header, .header.scrolled { top: calc(12px + env(safe-area-inset-top, 0px)); height: 44px; }
  .brand { font-size: 26px; }
  .brand-mark { width: 43px; height: 43px; border-radius: 13px; }
  .header .button-small { min-height: 34px; padding: 8px 13px; font-size: 8px; }
  .header .button-small .icon { width: 13px; height: 13px; }
  .desktop-nav { gap: 24px; }
  .desktop-nav a { font-size: 10px; }
  .hero h1 { font-size: clamp(62px, min(12vw, 23svh), 143px); margin-top: 12px; }
  .section-copy h2 { font-size: clamp(45px, min(7.4vw, 15.5svh), 100px); margin-top: 12px; }
  .pixels-copy h2 { font-size: clamp(42px, min(6.8vw, 14svh), 91px); }
  .gallery-heading h2 { font-size: clamp(38px, min(7.2vw, 11.4svh), 74px); margin-top: 7px; }
  .privacy-heading h2 { font-size: clamp(48px, min(9vw, 15.2svh), 92px); margin-top: 10px; }
  .download-content h2 { font-size: clamp(64px, min(11.5vw, 19svh), 119px); margin-top: 12px; }
  .flight-mode .flight-panel { position: absolute; inset: 0; height: 100%; min-height: 0; max-height: none; padding: 0; }
  .flight-mode .panel-inner { position: relative; inset: auto; height: 100%; min-height: 0; max-height: none; padding: var(--frame-top) var(--page-gutter) var(--frame-bottom); }
  .flight-mode .hero-inner { display: flex; align-items: center; }
  .flight-mode .hero-copy { width: 80%; margin: 0; }
  .flight-mode .hero-description { max-width: 305px; font-size: 10px; line-height: 1.55; margin-top: 13px; }
  .flight-mode .hero-cta { margin-top: 13px; gap: 12px; }
  .flight-mode .hero .button-primary { min-height: 39px; font-size: 9px; padding: 6px 6px 6px 16px; }
  .flight-mode .hero .button-arrow { width: 26px; height: 26px; }
  .flight-mode .hero-mascot { width: min(43vw, 72svh); top: 48%; right: 0; bottom: auto; transform: translateY(-50%); }
  .flight-mode .hero-mascot .note-one { display: none; }
  .flight-mode .hero-bottom { display: none; }
  .flight-mode .weather-scene { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .9fr); grid-template-rows: minmax(0, 1fr); gap: 4vw; align-items: center; }
  .flight-mode .weather-copy .body-copy { display: block; max-width: 310px; font-size: 10px; line-height: 1.55; margin-top: 14px; }
  .flight-mode .feature-line { display: none; }
  .flight-mode .mood-experience { width: 100%; min-height: 0; height: 100%; max-height: 380px; }
  .flight-mode .emotion-orb { width: clamp(68px, 20svh, 126px); height: clamp(64px, 19svh, 118px); top: -7px; }
  .flight-mode .orb-eye { width: 10px; height: 20px; }
  .flight-mode .orb-eye i { width: 6px; height: 10px; left: 3px; top: 4px; }
  .flight-mode .orb-mouth { height: 27px; }
  .flight-mode .mood-console { padding: 10px 13px 8px; max-width: 340px; border-radius: 17px; }
  .flight-mode .console-top .micro-label, .flight-mode .live-dot { font-size: 7px; }
  .flight-mode .mood-value-line { margin: 5px 0 3px; }
  .flight-mode .mood-value-line > span { font-size: 12px; }
  .flight-mode .mood-value-line output { font-size: 27px; line-height: 1.1; }
  .flight-mode .mood-console input[type="range"] { height: 8px; margin: 12px 0; }
  .flight-mode .range-labels { font-size: 8px; }
  .flight-mode .mood-tags { margin-top: 8px; gap: 4px; flex-wrap: nowrap; }
  .flight-mode .mood-tags button { padding: 5px 6px; font-size: 7px; min-height: 29px; justify-content: center; gap: 3px; flex: 1 1 auto; white-space: nowrap; }
  .flight-mode .demo-note { font-size: 7px; margin-top: 7px; }
  .flight-mode .mood-orbit { height: 110px; width: 112%; left: -6%; }
  .flight-mode .mood-cloud { top: 35px; }
  .flight-mode .gallery-scene { display: flex; flex-direction: column; padding-inline: 0; }
  .flight-mode .gallery-heading h2 > span, .flight-mode .gallery-heading h2 > em { display: inline; }
  .flight-mode .gallery-heading > p:last-child { display: none; }
  .flight-mode .spatial-gallery { height: auto; min-height: 0; max-height: none; flex: 1 1 0; margin-top: 0; }
  .flight-mode .spatial-card { width: var(--gallery-card-width, var(--mobile-card-width, 105px)); }
  .flight-mode .gallery-bottom { padding-inline: var(--page-gutter); display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: left; }
  .flight-mode .gallery-caption { min-height: 0; }
  .flight-mode .gallery-caption .micro-label { font-size: 7px; }
  .flight-mode .gallery-caption h3 { font-size: 12px; line-height: 1.2; margin-top: 2px; }
  .flight-mode .gallery-caption p { display: none; }
  .flight-mode .gallery-controls { margin: 0; gap: 6px; }
  .flight-mode .gallery-controls .circle-button { width: 31px; height: 31px; min-width: 31px; }
  .flight-mode .gallery-controls .icon { width: 15px; height: 15px; }
  .flight-mode .gallery-dots button { width: 17px; min-width: 17px; height: 30px; }
  .flight-mode .gallery-hint { margin: 0; justify-content: flex-end; gap: 7px; }
  .flight-mode .gallery-hint > span { display: none; }
  .flight-mode .gallery-autoplay { font-size: 7px; min-height: 29px; padding-inline: 8px; }
  .flight-mode .pixels-scene { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(265px, .95fr); grid-template-rows: minmax(0, 1fr); gap: 5vw; align-items: center; }
  .flight-mode .pixels-copy .body-copy { display: block; font-size: 10px; line-height: 1.6; max-width: 315px; margin-top: 14px; }
  .flight-mode .pixel-stat, .flight-mode .pixels-copy .text-link { display: none; }
  .flight-mode .year-constellation { max-width: 350px; }
  .flight-mode .year-card { max-width: 350px; padding: 12px 15px 10px; border-radius: 17px; }
  .flight-mode .year-card-header { margin-bottom: 6px; }
  .flight-mode .year-card h3 { font-size: 27px; line-height: 1; margin-top: 3px; }
  .flight-mode .year-card .micro-label, .flight-mode .year-example { font-size: 7px; }
  .flight-mode .year-asterisk { font-size: 20px; }
  .flight-mode .pixel-grid { grid-auto-rows: clamp(2px, calc((var(--viewport-height, 100svh) - 293px) / 31), 6px); gap: 1.5px; }
  .flight-mode .pixel-months { font-size: 6px; gap: 1.5px; margin-bottom: 3px; }
  .flight-mode .pixel-tooltip { min-height: 18px; font-size: 7px; margin-top: 7px; }
  .flight-mode .pixel-legend { margin-top: 5px; padding-top: 5px; font-size: 6px; }
  .flight-mode .year-note { display: none; }
  .flight-mode .privacy-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); grid-template-rows: 1fr auto; column-gap: 4vw; row-gap: 10px; align-items: center; }
  .flight-mode .privacy-heading { grid-column: 1; grid-row: 1; text-align: left; max-width: none; }
  .flight-mode .privacy-heading .eyebrow { justify-content: flex-start; }
  .flight-mode .privacy-heading .body-copy { margin: 13px 0 0; max-width: 300px; font-size: 10px; }
  .flight-mode .privacy-heading h2 { white-space: normal; text-wrap: wrap; }
  .flight-mode .privacy-symbol { display: none; }
  .flight-mode .privacy-points { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
  .flight-mode .privacy-points article { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 7px; padding-top: 8px; }
  .flight-mode .privacy-count { grid-row: 1 / 3; font-size: 7px; margin-top: 3px; }
  .flight-mode .privacy-points h3 { margin-top: 0; font-size: 14px; line-height: 1.25; }
  .flight-mode .privacy-points p { font-size: 9px; max-width: none; line-height: 1.5; margin-top: 4px; }
  .flight-mode #faq-open { grid-column: 1; grid-row: 2; justify-self: start; margin: 0; min-height: 34px; padding: 8px 17px; font-size: 9px; }
  .flight-mode .download-inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  .flight-mode .download-content { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 0 28px; text-align: left; width: 100%; min-height: 0; align-items: center; }
  .flight-mode .download-content .eyebrow { grid-column: 1; grid-row: 1; justify-content: flex-start; font-size: 7px; }
  .flight-mode .download-content h2 { grid-column: 1; grid-row: 2 / 4; align-self: start; }
  .flight-mode .download-content .body-copy { grid-column: 2; grid-row: 1; margin: 0; font-size: 10px; text-align: center; }
  .flight-mode .store-links { grid-column: 2; grid-row: 2; gap: 11px; margin: 14px 0 0; align-self: center; }
  .flight-mode .store-badge { height: clamp(31px, 3.9vw, 52px); border-radius: 10px; }
  .flight-mode .download-small { grid-column: 2; grid-row: 3; margin: 9px auto 0; text-align: center; max-width: 300px; font-size: 7px; line-height: 1.4; }
  .flight-mode .footer { display: flex; flex-wrap: nowrap; grid-column: 1; grid-row: 2; margin-top: 0; padding-top: 9px; gap: 18px; }
  .flight-mode .footer-brand { font-size: 20px; }
  .flight-mode .footer nav { width: auto; margin-left: auto; gap: 23px; }
  .flight-mode .footer nav a { font-size: 8px; padding: 4px 0; }
  .flight-mode .copyright { font-size: 7px; }
  .experience-controls { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .experience-button { font-size: 7px; min-height: 28px; padding: 7px 9px; }
  .flight-progress { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .flight-hud { bottom: calc(19px + env(safe-area-inset-bottom, 0px)); font-size: 7px; }
  .faq-viewer { max-height: calc(100dvh - 28px); }
}

@media (max-height: 430px) and (orientation: landscape) {
  .flight-mode .hero h1 { font-size: clamp(57px, min(12vw, 21.5svh), 94px); }
  .flight-mode .hero-description, .flight-mode .privacy-heading .body-copy { display: none; }
  .flight-mode .hero-cta { margin-top: 15px; }
}

@media (max-height: 355px) and (orientation: landscape) {
  .flight-mode .year-card { padding: 10px 14px 9px; }
  .flight-mode .year-card-header { margin-bottom: 5px; }
  .flight-mode .year-card h3 { font-size: 22px; }
  .flight-mode .pixel-grid { grid-auto-rows: 1.5px; gap: 1px; }
  .flight-mode .pixel-months { gap: 1px; }
  .flight-mode .pixel-tooltip { min-height: 17px; margin-top: 5px; }
  .flight-mode .pixel-legend { margin-top: 4px; padding-top: 4px; }
  .flight-mode .emotion-orb { top: -15px; }
  .flight-mode .mood-console .demo-note { display: none; }
}

/* Reduced motion and no-script keep a complete, naturally readable page. */
html:not(.flight-mode) .hero-inner { position: relative; width: 100%; }
html:not(.flight-mode) .hero-copy { width: 100%; max-width: none; }
html:not(.flight-mode) .privacy-inner { width: 100%; }
html:not(.flight-mode) .privacy-heading { max-width: 1250px; }
html:not(.flight-mode) .download-inner { width: 100%; }
html:not(.flight-mode) .download-content { margin-top: 0; }
html:not(.flight-mode) .download-section { height: auto; max-height: none; min-height: 100svh; padding-bottom: 110px; }
html:not(.flight-mode) .download-inner .footer { margin-top: 80px; padding: 25px 0 0; min-height: 0; background: none; flex-wrap: wrap; }
html:not(.flight-mode) #faq-open { display: flex; width: max-content; margin: 35px auto 0; }
html:not(.flight-mode) .flight-hud { display: none; }
html:not(.flight-mode) .hero h1 { font-size: clamp(82px, 11.2vw, 215px); }
html:not(.flight-mode) .section-copy h2 { font-size: clamp(60px, 7vw, 132px); }
html:not(.flight-mode) .pixels-copy h2 { font-size: clamp(58px, 6.2vw, 122px); }
html:not(.flight-mode) .gallery-heading h2 { font-size: clamp(70px, 8.5vw, 164px); }
html:not(.flight-mode) .privacy-heading h2 { font-size: clamp(78px, 9.3vw, 176px); }
html:not(.flight-mode) .download-content h2 { font-size: clamp(110px, 14vw, 240px); }
@media (max-width: 800px) {
  html:not(.flight-mode) .hero h1 { font-size: clamp(61px, 19vw, 116px); }
  html:not(.flight-mode) .hero-inner { min-height: 660px; }
  html:not(.flight-mode) .hero { height: auto; max-height: none; min-height: 100svh; }
  html:not(.flight-mode) .hero-mascot { width: min(79vw, 450px); right: -28px; bottom: 30px; }
  html:not(.flight-mode) .hero-bottom { left: 0; right: 0; bottom: 28px; }
  html:not(.flight-mode) .section-copy h2 { font-size: clamp(46px, 14.4vw, 80px); }
  html:not(.flight-mode) .pixels-copy h2 { font-size: clamp(43px, 13.4vw, 77px); }
  html:not(.flight-mode) .gallery-heading h2 { font-size: clamp(33px, 9.8vw, 69px); }
  html:not(.flight-mode) .privacy-heading h2 { font-size: clamp(40px, 12.1vw, 76px); }
  html:not(.flight-mode) .download-content h2 { font-size: clamp(81px, 24vw, 135px); }
  html:not(.flight-mode) .privacy-section { min-height: auto; }
  html:not(.flight-mode) .download-inner .footer { margin-top: 55px; padding-top: 22px; }
}

/* Stable mobile flight: one composited chapter, with 3D confined to the
   carousel. Browser chrome changes the visible area, not the camera frame. */
html.flight-mobile,
html.flight-mobile body {
  overflow-anchor: none;
  overscroll-behavior-y: none;
}

.flight-mobile.flight-mode .flight-viewport {
  perspective: none;
  transform-style: flat;
  width: var(--viewport-width, 100%);
  height: var(--viewport-height, 100svh);
}
.flight-mobile.flight-mode .flight-panel {
  transform-style: flat;
  transform-origin: 50% 48%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: auto;
  transition: none;
}
.flight-mobile.flight-mode .flight-panel:is(.is-flight-visible, .is-flight-prepared) {
  will-change: transform, opacity;
}
.flight-mobile.flight-mode .spatial-gallery {
  perspective: 850px;
  perspective-origin: 50% 47%;
  transform-style: preserve-3d;
}
.flight-mobile.flight-mode .gallery-track,
.flight-mobile.flight-mode .spatial-card {
  transform-style: preserve-3d;
}
.flight-mobile.flight-mode .spatial-card {
  width: var(--mobile-card-width, var(--gallery-card-width, 170px));
}
.flight-mobile.flight-mode :is(.mood-console, .year-card, .floating-note) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.flight-mobile.flight-mode .hero-mascot > img,
.flight-mobile.flight-mode .gallery-floor {
  filter: none;
}
.flight-mobile .sky,
.flight-mobile #world {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: var(--viewport-width, 100%);
  max-width: 100%;
  height: var(--world-height, 100lvh);
}
.flight-mobile .sky-photo {
  filter: none;
  will-change: auto;
}
.flight-mobile .sky-sun {
  filter: none;
  background: radial-gradient(circle, #fffdf08f 0%, #fffdf033 35%, transparent 70%);
}
.flight-mobile .cursor-aura { display: none; }

/* Preserve the phone's navigation when it rotates wider than 800px. */
.flight-mobile .desktop-nav { display: none; }
.flight-mobile .menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 30px;
  min-width: 30px;
  height: 40px;
  margin: 0;
  background: none;
}
.flight-mobile .menu-toggle span {
  width: 19px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s;
}
.flight-mobile .menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.flight-mobile .menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}
.flight-mobile .mobile-menu:not([hidden]) {
  display: flex;
  position: fixed;
  z-index: 29;
  left: var(--page-gutter);
  right: var(--page-gutter);
  top: calc(var(--frame-top) - 9px);
  max-height: calc(var(--viewport-height, 100svh) - var(--frame-top) - 16px);
  padding: 16px 22px;
  border: 1px solid #ffffffbd;
  border-radius: 4px 4px 24px 24px;
  background: #eef8f0fa;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.flight-mobile .mobile-menu a { padding: 13px 0; font-size: 16px; }
@media (max-width: 370px) {
  .flight-mobile .menu-toggle { width: 25px; min-width: 25px; }
}

/* The pre-paint bootstrap holds a still hero until the first measured frame.
   Removing this class restores the native scroll surface and its inertia. */
html.flight-boot,
html.flight-boot body {
  overflow: hidden !important;
  overflow-anchor: none;
  overscroll-behavior: none;
}
.flight-boot .flight-viewport {
  position: fixed;
  inset: 0;
  width: var(--viewport-width, 100%);
  height: var(--viewport-height, 100svh);
  overflow: hidden;
  overflow: clip;
}
.flight-boot .flight-panel {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  will-change: auto !important;
}
.flight-boot #home.flight-panel {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}