/* Mobile reading flow and touch targets; desktop choreography stays intact. */
@media (max-width: 1024px) {
  #life-next, .ubl-section, .faq-section, .site-footer { scroll-margin-top: 96px; }
  .site-logo { min-width: 44px; min-height: 44px; }
  .site-menu-toggle { min-height: 44px; }
  .footer-social { gap: 4px; }
  .footer-social a { width: 44px; height: 44px; display: grid; place-items: center; }
  .footer-social img { width: 20px; height: 20px; }
  .site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
  input[type="email"] { font-size: 16px; min-height: 44px; min-width: 0; }
}
@media (max-width: 767px) {
  .life-intro { padding-top: 102px; }
  .life-intro h1 { font-size: clamp(34px, 10vw, 44px); line-height: 1.08; letter-spacing: -.045em; margin-top: 8px; }
  .life-bottom { bottom: max(24px, env(safe-area-inset-bottom)); }
  .has-product-sequence .capture-visual { top: 49%; height: min(27svh, 230px); }
  .has-product-sequence .capture-footer { bottom: max(24px, env(safe-area-inset-bottom)); }
  .has-product-sequence .capture-footer .capture-labels { grid-auto-rows: 48px; gap: 20px; }
  .privacy-detail p, .faq-answer-inner { font-size: 16px; line-height: 1.5; }
}
@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) {
  .privacy-stage { height: auto; min-height: 0; overflow: hidden; --hand-size: min(62vw, 290px); --hand-bottom: 24px; }
  .privacy-inner { padding: 98px 22px calc(var(--hand-size) * 1.7 + 48px); }
  .privacy-layout { display: block; height: auto; width: auto; margin: 0; }
  .privacy-content { margin-top: 32px; }
  .privacy-details { max-width: 620px; margin: 0 auto; }
  .privacy-detail { min-height: 0; padding: 18px; }
  .privacy-detail p { font-size: 16px; line-height: 1.5; }
  .privacy-heading { font-size: clamp(28px, 5vw, 36px); }
}
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 500px) {
  .life-story.has-product-sequence .life-stage { min-height: 0; height: 100svh; }
  .life-intro { padding-top: 78px; }
  .life-intro h1 { font-size: 38px; }
  .has-product-sequence .capture-heading { top: 190px; }
  .has-product-sequence .capture-visual { top: 310px; height: 310px; }
  .has-product-sequence .capture-footer { top: 750px; }
  .has-product-sequence .capture-labels { font-size: calc(16px / var(--product-fit)); }
  .life-bottom { bottom: 12px; }
}

/* More compact mobile headings and Capture composition. */
@media (max-width: 767px) {
  :root { --section-heading-size: clamp(24px, 6.2vw, 28px); }
  .has-product-sequence .wearable-copy { top: 68%; left: 32px; }
  .has-product-sequence .capture-heading { padding-inline: 14px; }
  .has-product-sequence .capture-heading h2 {
    grid-template-columns: max-content max-content;
    font-size: clamp(21px, calc(5.2vw + 4px), 28px);
    column-gap: .18em;
    row-gap: 4px;
    line-height: 1.3;
    letter-spacing: -.035em;
  }
  .has-product-sequence .capture-title-before { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .has-product-sequence .capture-wordmark { grid-column: 1; grid-row: 2; justify-self: end; }
  .has-product-sequence .capture-title-after { grid-column: 2; grid-row: 2; text-align: left; }
  .has-product-sequence .capture-visual { top: 46%; height: min(22svh, 190px); }
  .has-product-sequence .capture-frame { width: 223px; }
  .has-product-sequence .capture-strip { --capture-frame-width: 223px; }
  .has-product-sequence .capture-footer { top: 66%; bottom: auto; }
}

@media (max-width: 767px) {
  .life-intro h1 { font-size: clamp(32px, 9.2vw, 40px); }
  .privacy-heading { font-size: var(--section-heading-size); }
  .ubl-title, .faq-title { font-size: 32px; line-height: 1.15; }
}

/* Small, predictable controls and semantic visibility. */
.faq-answer[hidden] { display: none; }
.site-menu-items[inert] { visibility: hidden; }
.site-menu-item { min-height: 28px; }
.privacy-detail p { color: #bcbcbc; }
@media (max-width: 1024px) {
  .site-menu-item { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .site-menu-panel.is-open { min-height: 320px; }
  .site-menu-items { gap: 8px; }
}
@media (max-width: 767px) {
  .dark-yes-text, .dark-info-copy { font-size: 16px; line-height: 1.45; }
  .dark-email-form { flex-wrap: wrap; }
  .dark-email-form input { flex: 1 1 120px; width: 0; }
  .dark-email-form button { flex: 0 1 auto; min-height: 44px; }
}
@media (max-width: 1024px), (max-height: 700px) {
  .privacy-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) {
  .privacy-inner { height: auto; padding: 96px 22px calc(var(--hand-size) * 1.45 + 56px); }
  .privacy-heading { line-height: 1.25; }
  .privacy-content { margin-top: 28px; }
  .privacy-detail { padding: 18px; }
  .privacy-detail > div { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .privacy-inner { height: auto; }
}
@media (max-width: 767px) {
  .site-menu { width: 206px; height: 56px; }
  .site-menu-panel { position: absolute; top: 0; right: 0; }
  .site-menu-panel.is-open { max-width: calc(100vw - 32px); }
  .dark-email-form { flex: 0 0 auto; height: auto; min-height: 52px; gap: 6px; }
}
@media (max-width: 360px) {
  .dark-email-form { border-radius: 18px; }
  .dark-email-form input { flex-basis: 100%; width: 100%; }
  .dark-email-form button { width: 100%; flex-basis: 100%; }
}

/* One centered scroll hint becomes the skip action after the intro begins. */
.life-bottom .life-skip { padding: 0; opacity: 1; text-decoration: none; cursor: default; }
.life-bottom .life-skip.is-skippable { cursor: pointer; }
.life-bottom .life-skip.is-skippable:hover .life-scroll-copy { color: #292929; }
.life-bottom .life-skip:focus-visible { outline: 2px solid #ff6400; outline-offset: 8px; border-radius: 8px; }

/* Header actions are separate keyboard targets, sharing the existing capsule. */
.site-menu-cta, .site-menu-hamburger { border: 0; cursor: pointer; }
.site-menu-cta:focus-visible, .site-menu-hamburger:focus-visible { outline: 2px solid #ff6400; outline-offset: 2px; }
html { scrollbar-gutter: stable; }
.early-access-dialog { position: fixed; inset: 0; margin: auto; width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 40px; border: 0; border-radius: 28px; background: #f9f8f5; color: #292929; font-family: var(--font-gilroy); box-shadow: 0 24px 80px #0003; }
.early-access-dialog::backdrop { background: #17151399; backdrop-filter: blur(5px); }
.early-access-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #555; font: 28px/1 var(--font-gilroy); cursor: pointer; }
.early-access-eyebrow { font-family: 'Life Quip', sans-serif; font-size: 28px; line-height: 1; letter-spacing: -.065em; color: #292929; margin-bottom: 24px; }
.early-access-brand-clip { color: var(--accent-orange); }
.early-access-dialog h2 { font-size: clamp(28px, 7vw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; margin-bottom: 0; }
.early-access-form { display: grid; gap: 12px; margin-top: 16px; }
.early-access-form label { font-size: 15px; }
.early-access-form input { width: 100%; min-width: 0; height: 52px; border: 1px solid #d4d0cb; border-radius: 12px; padding: 0 16px; background: #fff; font: 16px var(--font-gilroy); color: #292929; }
.early-access-form button { min-height: 48px; border: 0; border-radius: 24px; background: #292929; color: #fff; font: 16px var(--font-gilroy); cursor: pointer; }
.early-access-dialog :focus-visible { outline: 2px solid #bf4900; outline-offset: 3px; }
.early-access-status { font-size: 14px; line-height: 1.5; color: #666; }
.early-access-status:empty { display: none; }
@media (max-width: 480px) { .early-access-dialog { padding: 32px 24px; border-radius: 24px; } }

/* Capture captions — Figma 267:695, 20px titles with 16px supporting text. */
.capture-footer .capture-labels { font-family: var(--font-instrument-sans); font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: -.4px; color: #000; align-items: start; }
.capture-label-title, .capture-label-detail { display: block; }
.capture-label-title { font-size: 1em; line-height: 1.2; }
.capture-label-detail { font-size: .8em; line-height: 1.5; }
.capture-label-detail--objects { font-size: .8em; line-height: 1.5; }
@media (min-width: 768px) {
  .has-product-sequence .capture-footer .capture-labels { font-size: calc(20px / var(--product-fit, 1)); letter-spacing: calc(-.4px / var(--product-fit, 1)); }
  .has-product-sequence .capture-footer .capture-labels { width: calc(100% - 120px / var(--product-fit, 1)); max-width: none; margin-inline: auto; }
  .capture-labels li { justify-self: center; text-align: center; }
}
@media (max-width: 767px) {
  .capture-footer .capture-labels { font-size: 20px; gap: 14px; }
}

/* Mobile Capture: upright footage flowing vertically behind the device. */
@media (max-width: 767px) {
  .has-product-sequence .capture-visual { height: min(36svh, 310px); overflow: hidden; }
  .has-product-sequence .capture-strip { top: 0; left: calc(50% - 85px); width: 170px; height: 100%; }
  .capture-loop-track { flex-direction: column; width: 170px; animation-name: capture-drift-vertical; }
  .capture-loop-group { flex-direction: column; padding-right: 0; padding-bottom: 12px; }
  .has-product-sequence .capture-frame { width: 170px; }
  .has-product-sequence .capture-visual::before,
  .has-product-sequence .capture-visual::after { left: 0; right: 0; width: 100%; height: 36px; bottom: auto; backdrop-filter: none; }
  .has-product-sequence .capture-visual::before { top: 0; mask-image: linear-gradient(#000, transparent); }
  .has-product-sequence .capture-visual::after { top: auto; bottom: 0; mask-image: linear-gradient(transparent, #000); }
}
@keyframes capture-drift-vertical { to { transform: translateY(-50%); } }
.video-float { transform-origin: bottom right; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.ubl-founder a { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .video-float:hover { transform: scale(1.2); }
  .ubl-founder a:hover { background-color: #fff; color: #000; border-color: #fff; }
}
.ubl-founder a:focus-visible { background-color: #fff; color: #000; border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .video-float, .ubl-founder a { transition: none; }
}

/* Desktop section headings: add 8 visible pixels, including scaled product scenes. */
@media (min-width: 1025px) {
  .life-intro h1 { font-size: clamp(65px, calc(6.75vw + 8px), 110px); }
  .has-product-sequence .wearable-copy h2 { font-size: calc(40px + 8px / var(--product-fit, 1)); }
  .hero-scene-title { font-size: clamp(44px, calc(5vw + 8px), 104px); }
  .footer-partnership h2 { font-size: clamp(33px, calc(2.4vw + 8px), 42px); }
}

/* Shared heading size: 54px on wide screens, fluid down to 40px on tablets. */
@media (min-width: 768px) {
  :root { --section-heading-size: clamp(40px, 3.75vw, 54px); }
  .dark-section-title, .privacy-heading, .ubl-title, .faq-title {
    font-size: var(--section-heading-size);
    line-height: 1.2;
  }
  .has-product-sequence .capture-heading h2 {
    font-size: calc(var(--section-heading-size) / var(--product-fit, 1));
    line-height: 1.2;
  }
}