/* The reveal animation starts .problem-copy / .feature-media / .order-card
   36px to the right. Without a clip that briefly produces a horizontal
   scrollbar on narrow screens. */
html { overflow-x: clip; }
/* Mobile fixes — The Align.
   Derived from measuring the live page at 360 / 390 / 430px, not from guessing.
   Two defect classes were found: touch targets under the 44px minimum, and
   body text rendering as small as 10.56px. */

@media (max-width: 760px) {

  /* ---- touch targets ----------------------------------------------------
     WCAG 2.5.5 and Apple's HIG both put the floor at 44px. Measured before:
     brand 55x30, cart 42x42, menu 42x42, announcement 349x42, email 105x19. */
  .brand {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
  /* matches .header-actions .cart-button (0,2,0) in the page's inline sheet */
  .header-actions .cart-button,
  .header-actions .menu-button,
  .menu-button {
    width: 44px;
    height: 44px;
  }
  .hero-announcement {
    min-height: 44px;
    align-items: center;
  }
  .footer-bottom a,
  .footer a[href^="mailto:"],
  .footer a[href^="tel:"] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  /* ---- readable type ----------------------------------------------------
     Nothing carrying words should sit under 12px on a phone. The count badge
     is exempt: it is a single numeral inside a 21px circle, not prose. */
  .feature-index small,
  .bento small,
  body small,
  .accuracy-note,
  .discount-badge,
  .hero-announcement-label,
  .footer-bottom,
  .footer-privacy,
  .order-note,
  .hero-note {
    font-size: max(0.75rem, 12px);
    line-height: 1.5;
  }
  body s,
  body b,
  .discount-badge { font-size: max(0.75rem, 12px); }

  /* labels lose their tracking at small sizes and start to smear */
  .eyebrow,
  .hero-announcement-label {
    letter-spacing: .12em;
  }
}

/* Mobile composition pass: keep the product cinematic, but make every screen
   faster to scan and every primary action easy to reach. */
@media (max-width: 700px) {
  .mobile-buy[hidden] { display: none; }
  .mobile-buy {
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    padding: 8px 8px 8px 16px;
    animation: mobileBuyIn .35s var(--ease) both;
  }
  .mobile-buy a { min-width: 64px; min-height: 46px; padding-inline: 18px; }

  .mobile-menu { min-height: 100dvh; padding: 92px 16px max(28px, env(safe-area-inset-bottom)); }
  .mobile-menu a { min-height: 58px; font-size: 1.2rem; }

  .hero { min-height: 0; padding: 88px 0 0; }
  .hero-grid { min-height: 0; }
  .hero-copy { padding: 26px 0 32px; }
  .hero-announcement {
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 7px;
    padding-right: 8px;
    overflow: hidden;
    white-space: normal;
  }
  .hero-announcement-label { flex: 0 0 auto; white-space: nowrap; }
  .hero-announcement > span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hero-announcement-arrow { flex: 0 0 18px; margin-left: auto; }
  .hero h1 {
    max-width: 100%;
    margin: 20px 0 18px;
    font-size: clamp(3.45rem, 17vw, 4.15rem);
    line-height: .86;
  }
  .hero-device {
    top: 350px;
    width: min(45vw, 180px);
    transform: translateX(7%);
  }
  .hero-copy .hero-lead {
    min-height: 150px;
    padding-right: 42vw;
    font-size: .95rem;
    line-height: 1.48;
  }
  .hero-copy .hero-actions {
    width: 100%;
    margin-top: 24px;
    padding-right: 0;
    gap: 10px;
  }
  .hero-actions .button { min-height: 52px; }
  .hero-proof {
    max-width: none;
    margin-top: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero-proof li {
    min-height: 104px;
    padding: 14px 8px 12px 18px;
    font-size: 12px;
    line-height: 1.32;
  }
  .hero-proof li + li { border-top: 0; border-left: 1px solid var(--line); }
  .hero-proof li::before { top: 18px; left: 6px; width: 6px; height: 6px; }
  .hero-proof strong { font-size: 12px; line-height: 1.25; }
  .hero-note { margin-top: 16px; }
  .hero-foot { display: none; }

  .signal { padding: 24px 0; }
  .signal .number { font-size: 2.6rem; }
  .signal p { margin-top: 9px; }

  .section { padding: 66px 0; }
  .section-title { font-size: clamp(2.35rem, 11.5vw, 3rem); line-height: .98; }
  .problem h2,
  .preorder h2,
  .confidence h2 { font-size: clamp(3rem, 14.5vw, 4rem); line-height: .9; }
  .problem-grid { gap: 0; }
  .problem-grid > div:first-child { margin-bottom: 32px; }
  .problem h2 {
    max-width: 9.5ch;
    margin-top: 16px;
    font-size: clamp(3rem, 13.8vw, 3.65rem);
    line-height: .88;
  }
  .problem h2 span { margin-top: 3px; line-height: .82; }
  .motion-ready .problem-copy[data-reveal].visible { transform: none; }
  .problem-copy { width: 100%; }
  .problem-copy p,
  .confidence-lead,
  .preorder-copy > p { font-size: .98rem; }
  .problem-copy > p { max-width: 35ch; line-height: 1.55; }
  .problem-list { margin-top: 26px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .problem-item {
    min-height: 104px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
  }
  .problem-item b { width: 36px; height: 36px; font-size: .72rem; }
  .problem-item strong { margin-bottom: 5px; font-size: 1rem; line-height: 1.3; }
  .problem-item span { display: block; font-size: .88rem; line-height: 1.5; }

  .workflow-track { margin-top: 34px; }
  .step { gap: 15px; padding: 16px 0; }
  .step p { margin-top: 7px; font-size: .9rem; }
  .howto-media { margin-top: 28px; gap: 28px; }
  .howto-player { max-width: 270px; border-radius: 18px; }
  .howto-copy > p { margin-bottom: 16px; }
  .howto-chapters li { padding-block: 11px; }

  .feature-shell { min-height: 0; }
  .feature-copy { padding: 30px 20px 34px; }
  .feature-copy h2 { margin: 18px 0 16px; font-size: clamp(2.8rem, 13vw, 3.6rem); }
  .feature-copy > div > p { font-size: .96rem; }
  .feature-index { margin-top: 32px; gap: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-index div { padding: 13px 0; }
  .feature-index strong { font-size: .8rem; line-height: 1.25; }
  /* Keep the square studio composition intact on phones so the device remains
     the focal point instead of being lost in a tall, right-biased crop. */
  .feature-media {
    aspect-ratio: 1;
    min-height: 0;
    isolation: isolate;
  }
  .feature-media picture { position: absolute; inset: 0; }
  .feature-media img {
    object-position: 50% 52%;
    transform: translate3d(0, var(--media-shift, 0px), 0) scale(1.015);
  }
  .feature-media::before {
    background: linear-gradient(180deg, rgba(21,18,33,.02) 45%, rgba(21,18,33,.72) 100%);
  }
  .motion-ready .feature-media[data-reveal] { transform: translate3d(0, 18px, 0); }
  .motion-ready .feature-media[data-reveal].visible { transform: none; }
  .media-caption { right: 18px; bottom: 18px; left: 18px; align-items: flex-end; }
  .media-caption b { font-size: 1.6rem; }

  .confidence-grid { gap: 46px; }
  .confidence-lead { margin-top: 20px; }
  .confidence-points { margin-top: 28px; }
  .confidence-points div { padding: 15px 0; }
  .accuracy-dial { width: min(88vw, 310px); }

  .preorder-grid { gap: 30px; }
  .preorder h2 {
    max-width: 9ch;
    margin: 16px 0 20px;
    font-size: clamp(3rem, 13.5vw, 3.65rem);
  }
  .preorder-copy > p { max-width: 36ch; line-height: 1.55; }
  .motion-ready .order-card[data-reveal].visible { transform: none; }
  .order-card {
    width: 100%;
    padding: 20px;
    box-shadow: 8px 8px 0 rgba(21,18,33,.2);
  }
  .order-card-top {
    position: relative;
    display: block;
    min-height: 132px;
    padding-bottom: 18px;
  }
  .order-card-top > div > span { margin-bottom: 8px; }
  .order-card-top strong {
    display: block;
    max-width: none;
    padding-top: 2px;
    font-size: clamp(2.15rem, 9.7vw, 2.6rem);
    white-space: nowrap;
  }
  .order-card-top s { margin-top: 6px; }
  .discount-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 30px;
    padding-inline: 9px;
    text-align: center;
  }
  .includes { margin-block: 16px 18px; }
  .includes li {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 0;
    font-size: .85rem;
    line-height: 1.4;
  }
  .order-card .button { min-height: 52px; }
  .order-note { margin-top: 13px; line-height: 1.45; }

  summary { min-height: 70px; padding: 16px 52px 16px 0; font-size: 1rem; }
  summary::after { right: 2px; width: 36px; height: 36px; }

  .footer { padding: 42px 0 calc(104px + env(safe-area-inset-bottom)); }
  .footer-top { gap: 20px; padding-bottom: 30px; }
  .footer-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .footer-social a { width: 100%; min-width: 0; justify-content: center; padding-inline: 10px; }
  .footer-social a:first-child { grid-column: 1 / -1; }
}

@keyframes mobileBuyIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Very narrow phones: the display type needs a little more room to breathe. */
@media (max-width: 380px) {
  .hero h1 { font-size: clamp(3.05rem, 15.8vw, 3.35rem); }
  .hero-device { top: 326px; width: 44vw; }
  .hero-copy .hero-lead { min-height: 136px; padding-right: 40vw; font-size: .9rem; }
  .hero-announcement-label { padding-inline: 7px; }
  .hero-actions .button,
  .hero-actions a {
    width: 100%;
  }
  .hero-proof li { padding-inline: 16px 5px; font-size: 11.5px; }
  .hero-proof strong { font-size: 11.5px; }
  .feature-index { gap: 0 12px; }
  .order-card-top { min-height: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-buy { animation: none; }
}