/* ============================================
   Page Hundred — MOBILE rebuild (≤ 900px)
   ============================================
   This file is loaded AFTER styles.css and only takes effect on small
   screens. It does NOT touch the desktop experience. Strategy:

   - Mobile-first sizing rebuilt from 375px up.
   - Scroll-jacked / pinned sections are fully un-pinned: tracks become
     auto-height, sticky stages become static, transformed parents are
     reset, and content is restructured into a clean vertical stack.
   - Each "step" / scene is its own full-width card. JS toggles
     .m-in via IntersectionObserver — no scroll-position math.
   - Motion: fades + gentle Y translates only. No parallax, no scroll-tied
     transforms, no Apple-style pinned reveals. prefers-reduced-motion
     short-circuits everything.
   - 100dvh everywhere a full-height section is needed (iOS URL-bar safe).
   - 44px minimum hit target on every nav link / button.
   ============================================ */

@media (max-width: 899.98px) {

  /* -------- Reset of any transformed/animated parents that broke
              position:sticky semantics on touch devices ------------------ */
  body { overflow-x: hidden; }

  /* Lighter paper grain on mobile — was 28% which thrashed perf */
  body::before { opacity: 0.18; }

  /* ============ Type scale (mobile) ============
     Keep the brand serif but drop sizes meaningfully. */
  :root {
    --gutter: 22px;
    --fs-body: 16px;        /* never below 16 */
    --fs-lead: 18px;
    --lh-body: 1.6;
  }
  html { font-size: 16px; line-height: 1.6; }

  /* ============ Header / Nav ============ */
  .header {
    padding: 14px var(--gutter) !important;
    align-items: center;
  }
  .header.scrolled { padding: 10px var(--gutter) !important; }

  .brand.brand-img img { height: 26px; }
  .header.scrolled .brand.brand-img img { height: 24px; }

  /* Hide desktop nav + CTA, show menu button (already partly handled
     by base CSS but force it for our breakpoint). */
  .nav { display: none !important; }
  .header-cta { display: none !important; }
  .menu-btn {
    display: inline-flex !important;
    width: 44px; height: 44px;       /* 44px hit target */
    border-radius: 50%;
  }
  .menu-btn svg { width: 18px; height: 18px; }

  /* Mobile nav full screen sheet */
  .mobile-nav {
    padding: 18px var(--gutter) 32px;
    background: var(--paper);
  }
  .mobile-nav-header { margin-bottom: 32px; }
  .mobile-nav-close {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .mobile-nav-links a {
    font-size: 32px;
    line-height: 1.15;
    padding: 16px 0;            /* tall hit area */
    min-height: 48px;
  }

  /* ============ Generic full-height fix ============ */
  .ph2-hero,
  .ph2-waitlist {
    min-height: auto !important;
  }

  /* ============ HERO ============ */
  .ph4-hero,
  .ph2-hero {
    padding: 110px var(--gutter) 64px !important;
    min-height: auto !important;
    display: block !important;
    text-align: center;
  }

  /* Hero sky: keep but cap height so it doesn't stretch the section */
  .ph4-hero-sky {
    position: absolute !important;
    inset: 0 !important;
    height: 100%;
    pointer-events: none;
  }

  /* Drop the big illustration canvas on mobile — visual noise, perf cost */
  .ph2-hero-canvas,
  .ph4-hero-canvas {
    display: none !important;
  }

  .ph4-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 100%;
  }

  .ph2-eyebrow,
  .ph4-eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
    margin: 0 0 24px;
    opacity: 1 !important;     /* skip CSS keyframe — JS will fade in */
    animation: none !important;
  }

  /* Inline mark — tighter on mobile */
  .ph4-hero-mark {
    margin: 0 auto 28px;
    transform: none !important;
  }
  .ph4-hero-mark .ph2-mark-stage {
    width: min(220px, 60vw);
  }
  /* Kill parallax wrappers on mobile */
  .ph4-parallax,
  .ph4-parallax--moon,
  .ph4-parallax--book {
    transform: none !important;
  }

  /* Headline — clamp tighter and never wrap "for life" awkwardly */
  .ph2-hero-title,
  .ph4-hero-title {
    font-size: clamp(34px, 11vw, 44px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em;
    margin: 0 auto;
    max-width: 14ch;
    text-wrap: balance;
  }
  .ph2-hero-title .line { display: block; }

  /* Subhead */
  .ph4-hero-sub,
  .ph2-hero-sub {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 18px auto 28px !important;
    max-width: 36ch;
    color: var(--ink-soft);
  }
  .ph4-hero-lead {
    display: block;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 19px;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .ph4-hero-givers { display: block; font-size: 15px; }

  .ph4-hero-actions,
  .ph2-hero-actions {
    display: flex !important;
    justify-content: center;
    width: 100%;
    margin-bottom: 14px;
  }

  /* Primary CTA — full width, tall, 44px+ */
  .ph4-hero-actions .btn,
  .ph2-hero-actions .btn,
  .btn-lg {
    width: 100%;
    max-width: 360px;
    min-height: 52px;
    padding: 16px 22px !important;
    font-size: 11px;
    letter-spacing: 0.18em;
    justify-content: center;
  }

  .ph4-hero-reassure {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 12px 0 0;
  }

  /* ============ THE PROMISE ============ */
  .ph2-promise { padding: 72px var(--gutter) !important; }
  .ph2-promise-title {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.05 !important;
    margin: 0 0 40px !important;
    max-width: none;
  }
  .ph2-promise-grid { grid-template-columns: 1fr !important; border-top: 1px solid var(--rule); }
  .ph2-promise-cell {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule);
    padding: 28px 0 !important;
    min-height: auto !important;
    gap: 12px;
  }
  .ph2-promise-cell:last-child { border-bottom: 0; }
  .ph2-promise-cell h3 { font-size: 26px !important; line-height: 1.1 !important; }
  .ph2-promise-cell p { font-size: 16px !important; }

  /* ============ HOW IT WORKS — UNJACKED ============
     Replace the desktop pinned scroll with a clean vertical stack.
     Each step = its own full-width card. JS adds .m-in on intersect. */
  .ph2-how {
    padding: 0 !important;
    background: #0E1A36;
  }
  /* Track is no longer 380vh — let it size to its contents */
  .ph2-how-track {
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
  }
  /* Stage was sticky inside a transform — kill all of that */
  .ph2-how-stage {
    position: static !important;
    height: auto !important;
    display: block !important;
    grid-template-columns: 1fr !important;
    padding: 64px var(--gutter) 48px !important;
    max-width: none;
    gap: 0 !important;
  }
  /* Hide the original visual+text layout; build mobile cards via JS-rendered
     classnames .m-how-* applied to the existing data attributes */
  .ph2-how-visual { display: none !important; }
  .ph2-how-text .ph2-section-label {
    display: block;
    text-align: left;
    margin-bottom: 24px;
    color: rgba(246,241,231,0.55);
  }

  /* Steps list rebuilt as stacked cards */
  .ph2-how-steps {
    list-style: none;
    padding: 0;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 22px;
    min-height: 0 !important;
  }
  .ph2-how-steps li {
    position: static !important;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
    pointer-events: auto;
    background: rgba(246,241,231,0.04);
    border: 1px solid rgba(246,241,231,0.10);
    border-radius: 4px;
    padding: 26px 22px 28px;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ph2-how-steps li.m-in {
    opacity: 1;
    transform: none;
  }
  .ph2-how-steps .ph2-step-num {
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0.22em;
  }
  .ph2-how-steps h3 {
    font-size: 26px !important;
    line-height: 1.1 !important;
    margin: 0;
    color: #F6F1E7;
  }
  .ph2-how-steps p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(246,241,231,0.72);
    margin: 0;
  }
  .ph2-how-progress { display: none !important; }
  .ph2-how-frame { display: none !important; }

  /* ============ THE BOOK — UNJACKED ============
     The desktop section is a long pinned scrubbed scene. On mobile we replace
     it with a single hero image + the words/specs as a static block. */
  .ph2-book-section { border-top: 1px solid var(--rule); }
  /* Track loses its tall height; stage stops being sticky */
  .ph2-book-track {
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
  }
  .ph2-book-stage {
    position: static !important;
    height: auto !important;
    transform: none !important;
    --p: 0.62 !important;       /* freeze at "golden hour" */
  }
  .ph2-book-bleed {
    aspect-ratio: auto !important;
    max-height: none !important;
    height: auto !important;
  }
  /* Disable any transform-based parents that broke the pinned scene */
  .ph2-book-room { transform: none !important; }
  /* ============ MOBILE BOOK LAYOUT — stacked: window first, book below ============ */
  .ph2-book-room {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    padding: 32px 6vw !important;
    aspect-ratio: auto !important;
    height: auto !important;
  }
  /* Hide ambient room flourishes on mobile — focus is the window + book */
  .ph2-book-wall,
  .ph2-book-room-floor,
  .ph2-book-beam,
  .ph2-book-room-shelf { display: none !important; }
  /* Window: ~80vw, full visible, keeps 4/5 portrait, sits inline at top */
  .ph2-book-room-window {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 80vw !important;
    max-width: 360px !important;
    aspect-ratio: 4 / 5 !important;
    margin: 0 !important;
    z-index: 3 !important;
  }
  /* Pagination dots beneath the window, centred under it */
  .ph2-book-room .ph2-window-dots {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 80vw !important;
    max-width: 360px !important;
    margin: 12px auto 0 !important;
    z-index: 6 !important;
  }
  .ph2-window-dot { padding: 16px !important; }
  /* Book sits centred below the window */
  .ph2-book-room-book {
    position: relative !important;
    left: auto !important; top: auto !important;
    transform: rotateZ(-3deg) !important;
    width: 56vw !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
  /* Subtle fade-in on entry rather than scroll-tied transforms */
  .ph2-book-bleed {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
  }
  .ph2-book-section.m-in .ph2-book-bleed {
    opacity: 1;
    transform: none;
  }
  /* Don't run the dust motes / shelf flicker on mobile */
  .ph2-book-motes,
  .ph2-shelf-flicker { display: none !important; }

  .ph2-book-words {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 56px var(--gutter) !important;
    align-items: start !important;
  }
  .ph2-book-words h2 {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.05 !important;
    margin: 12px 0 0 !important;
  }
  .ph2-book-words p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .ph2-book-specs {
    grid-template-columns: 1fr !important;
    margin-top: 24px !important;
  }
  .ph2-book-specs li {
    border-right: 0 !important;
    padding: 20px 0 !important;
    min-height: auto !important;
  }
  .ph2-book-specs li strong { font-size: 22px !important; }
  .ph2-book-specs li span { font-size: 10px !important; }

  /* ============ WHY DIFFERENT ============ */
  .ph2-why { padding: 64px var(--gutter) !important; }
  .ph2-why-title {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.1 !important;
    margin: 12px 0 22px !important;
  }
  .ph2-why-body { font-size: 16px !important; line-height: 1.65 !important; }

  /* ============ STORIES ============ */
  .ph2-stories { padding: 64px var(--gutter) !important; }
  .ph2-stories-head { margin-bottom: 32px; }
  .ph2-stories-head h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.1 !important;
  }
  .ph2-stories-anticipation {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 36ch;
    margin: 0 auto;
    text-align: center;
  }

  /* ============ FAQ ============ */
  .ph2-faq { padding: 64px var(--gutter) !important; }
  .ph2-faq-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .ph2-faq-head h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.1 !important;
  }
  .ph2-faq-item { padding: 18px 0 !important; }
  .ph2-faq-item summary {
    font-size: 17px !important;
    line-height: 1.3 !important;
    min-height: 44px;        /* tap target */
    align-items: center;
  }
  .ph2-faq-item p { font-size: 16px !important; line-height: 1.6 !important; }

  /* ============ WAITLIST ============ */
  .ph2-waitlist {
    padding: 80px var(--gutter) !important;
  }
  .ph2-waitlist::before { font-size: 64px !important; top: 4%; left: 4%; }
  .ph2-waitlist::after  { font-size: 64px !important; bottom: 4%; right: 4%; }
  .ph2-waitlist-title {
    font-size: clamp(36px, 11vw, 56px) !important;
    line-height: 1 !important;
    margin: 12px 0 22px !important;
  }
  .ph2-waitlist-sub,
  .ph2-waitlist-givers,
  .ph2-waitlist-benefit {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 0 auto 18px !important;
    max-width: 36ch;
  }
  /* Stack the form vertically — the inline pill version is too cramped */
  .ph2-waitlist .ph-waitlist-form,
  .ph-waitlist-form {
    flex-direction: column !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: 360px !important;
    margin: 24px auto 0 !important;
  }
  .ph2-waitlist .ph-waitlist-form input,
  .ph-waitlist-form input {
    background: rgba(246,241,231,0.06);
    border: 1px solid rgba(246,241,231,0.18);
    border-radius: 999px;
    padding: 16px 22px !important;
    min-height: 52px;
    font-size: 16px !important;
    text-align: center;
  }
  .ph2-waitlist .ph-waitlist-form input:focus,
  .ph-waitlist-form input:focus { border-color: var(--gold); outline: none; }
  .ph2-waitlist .ph-waitlist-form button,
  .ph-waitlist-form button {
    width: 100%;
    min-height: 52px;
    padding: 16px 22px !important;
    border-radius: 999px;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }
  .ph2-waitlist-fineprint {
    margin-top: 28px !important;
    font-size: 14px !important;
    line-height: 1.5;
    color: rgba(246,241,231,0.55);
  }
  .ph2-waitlist-reassure {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(246,241,231,0.55);
    margin: 16px 0 0;
  }

  /* ============ FOOTER ============ */
  .ph-footer { padding: 56px var(--gutter) 28px !important; }
  .ph-footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 36px !important;
    padding-bottom: 24px !important;
  }
  .ph-footer-top .brand.brand-img--lg img { height: 40px !important; }
  .ph-footer-tag { font-size: 18px !important; }

  .ph-footer-nav {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .ph-footer-nav ul { gap: 12px; }
  .ph-footer-nav a {
    font-size: 12px !important;
    min-height: 32px;             /* legible tap area in nav lists */
    display: inline-flex;
    align-items: center;
  }
  .ph-footer-meta {
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 32px !important;
    padding-top: 22px !important;
    font-size: 10px !important;
  }

  /* ============ Disable scroll-tied / heavy effects globally on mobile ============ */
  /* Anything that the desktop JS sets via inline transform on these elements
     gets neutralised here so the mobile layout stays put. */
  .ph2-hero [data-parallax],
  .ph2-hero [data-parallax-layer],
  .ph2-book-room-book[data-parallax],
  [data-reveal-book] .ph-revealbook,
  .ph4-hero-canvas,
  .ph4-parallax,
  .ph4-parallax--moon,
  .ph4-parallax--book {
    transform: none !important;
    will-change: auto !important;
  }
  /* Stop the shooting-star/constellation overlay from being painted on mobile */
  .ph4-sky-overlay { display: none !important; }
  /* Stars: keep but stop animating after first paint to save battery */
  .ph2-stars span { animation: none !important; opacity: 0.55 !important; }

  /* All buttons / links inside main content reach 44px min */
  .btn { min-height: 44px; }

  /* Generic reveal — slightly smaller travel on mobile */
  .reveal { transform: translateY(16px); }
}

/* ============ Reduced motion (mobile) ============ */
@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .ph2-how-steps li,
  .ph2-book-bleed,
  .reveal,
  .ph2-eyebrow,
  .ph4-eyebrow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}