/* ═══════════════════════════════════════════════════════════════════════════════
   LANDING — THE PHONE SKIN  css/landing-mobile.css  (2026-09-11)
   Caleb: "the entire mobile landing page … completely cleaned up … do not touch
   desktop at all." Every rule in this file sits inside @media (max-width:760px), so
   desktop never sees it. This is the ONE place the phone landing is tuned:
     §1 type scale — one eyebrow, one section title, one card title, one lead
     §2 section rhythm — the same 56px of air above and below every section
     §3 per-section compactions, in page order
   Selectors are prefixed `html body` so they out-rank the equal-specificity phone
   rules that still live inline in index.html, whatever their source order; the
   !importants are there only where an inline !important had to be beaten.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ── §1 TYPE SCALE — the Services header is THE standard (Caleb 2026-09-11: "this one is
     the standard and I would think all other sections … would match"). Its three colours
     are read at load into these variables by the phone script before #pm-services, so every
     other header takes the Services header's exact accent, ink and grey on whichever
     Page Colour is active. The fallbacks are the teal skin's values. ─────────────────── */
  :root{ --pmm-accent:#0F766E; --pmm-ink:#123b42; --pmm-lead:#3c4657; }

  /* eyebrow — 11px, tracked, uppercase, accent */
  html body .pmot-eyebrow, html body .pmsvc-eyebrow, html body .pm-hww__eyebrow,
  html body .pmfc-eyebrow, html body .pmwhat-eyebrow, html body .asx__eyebrow,
  html body .hx-kicker, html body .pmts-eyebrow, html body .lm-eyebrow,
  html body .pmdemo-head__eyebrow, html body .faq-eyebrow, html body .pm-final-cta__eyebrow,
  html body .wlb__eyebrow, html body .reassure__eyebrow, html body .pm-testi-eyebrow{
    display:block; text-align:center; font-size:11px !important; font-weight:700 !important; letter-spacing:.22em !important;
    text-transform:uppercase !important; line-height:1 !important; margin:0 0 10px !important;
  }
  html body .pm-hww__eyebrow, html body .pmfc-eyebrow, html body .pmwhat-eyebrow, html body .asx__eyebrow,
  html body .hx-kicker, html body .pmts-eyebrow, html body .lm-eyebrow, html body .pmdemo-head__eyebrow,
  html body .faq-eyebrow, html body .pm-final-cta__eyebrow, html body .wlb__eyebrow{ color:var(--pmm-accent) !important; }
  html body #faq .faq-eyebrow{ color:var(--pmm-accent) !important; }   /* the skins pin this one by id */
  /* the closing title wore a green→blue gradient; on phones it is the same ink as every other title */
  html body #pmFinalCta .pm-final-cta__title .grad{ background:none !important; color:var(--pmm-ink) !important; -webkit-text-fill-color:var(--pmm-ink) !important; }
  html body .hx-kicker span{ font-weight:700 !important; color:inherit !important; }
  /* the platform showcase hides its eyebrow on phones — every section carries one now */
  html body .pmts-eyebrow, html body #pmToolShowcase .pmts-eyebrow--fav{ display:block !important; }
  html body .pmts-eyebrow .pmts-d{ display:none !important; }
  html body .pmts-eyebrow .pmts-m{ display:inline !important; }
  html body #sp-sticky .sp-archive-mark{ font-size:10px !important; letter-spacing:.2em !important; }

  /* section title — 26px, one weight, one ink; the second sentence in the accent, upright */
  html body .hero__title{ font-size:30px !important; font-weight:700 !important; line-height:1.1 !important; letter-spacing:-.02em !important; }
  html body .reassure__title, html body .pmsvc-h2, html body .pm-hww__h2, html body .wlb__title,
  html body .pmfc-title, html body .pmwhat-title, html body .ckfs-title, html body .asx__heading,
  html body .hx-title, html body .pmts-title, html body .lm-title, html body .pmdemo-head__title,
  html body #sp-sticky .sp-title, html body .pm-testi-h, html body .faq-title,
  html body .pm-final-cta__title{
    font-size:26px !important; font-weight:700 !important; line-height:1.12 !important;
    letter-spacing:-.025em !important; text-wrap:balance; margin-bottom:0 !important;
  }
  html body .reassure__title, html body .pm-hww__h2, html body .wlb__title, html body .pmfc-title,
  html body .pmwhat-title, html body .ckfs-title, html body .asx__heading, html body .hx-title,
  html body .pmts-title, html body .lm-title, html body .pmdemo-head__title, html body #sp-sticky .sp-title,
  html body .pm-testi-h, html body .faq-title, html body .pm-final-cta__title{ color:var(--pmm-ink) !important; }
  html body .pm-testi-light .pm-testi-h{ letter-spacing:-.025em !important; }   /* the type skins re-track this one; keep it on the standard */
  html body .reassure__title > span, html body .pm-hww__h2 em, html body .wlb__title em, html body .pmfc-title em,
  html body .pmwhat-title em, html body .ckfs-title em, html body .asx__heading em, html body .hx-title em,
  html body .pmts-title em, html body .lm-title em, html body .pmdemo-head__title em, html body #sp-sticky .sp-title em,
  html body .pm-testi-h em, html body .faq-title em, html body .pm-final-cta__title em{
    font-style:normal !important; font-weight:700 !important; color:var(--pmm-accent) !important;
    background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
    -webkit-text-fill-color:var(--pmm-accent) !important;
  }

  /* card / sub-section title — 18px */
  html body .pmsvc-card__title, html body .pm-hww__ctitle, html body .pmfc-card__t,
  html body .ckfs-ct, html body .asx__title, html body #sp-title{
    font-size:18px !important; font-weight:600 !important; line-height:1.25 !important; letter-spacing:-.01em !important;
  }

  /* section lead — 15px, the Services grey, 16px under the title */
  html body .ckfs-sub, html body .ckfs-cd, html body .asx__desc, html body .asx__desc.is-long,
  html body .hx-sub, html body .pmts-sub, html body .lm-sub, html body .pmdemo-head__sub,
  html body .pm-testi-sub, html body .pmsvc-sub, html body .wlb__sub, html body .pmfc-sub, html body .pmfc-desc,
  html body .reassure__sub, html body .faq-sub, html body .pm-final-cta__meta, html body .pm-hww__note{
    font-size:15px !important; line-height:1.55 !important; max-width:34ch; margin-left:auto; margin-right:auto;
    text-wrap:balance;   /* even lines, never a one-word last line (Caleb: "week is by itself") */
  }
  html body .ckfs-sub, html body .hx-sub, html body .pmts-sub, html body .lm-sub, html body .pmdemo-head__sub,
  html body .pm-testi-sub, html body .wlb__sub, html body .pmfc-desc, html body .pm-final-cta__meta{
    color:var(--pmm-lead) !important; margin-top:16px !important; margin-bottom:0 !important; letter-spacing:normal !important;
  }
  html body .pm-hww__note{ margin-top:16px !important; }

  /* ── §2 SECTION RHYTHM — 56px above and below, everywhere ────────────────── */
  html body #pm-services, html body #s-flow-editorial-v2, html body #waitlist-band,
  html body #pm-fit, html body #pm-what, html body #asx-section, html body #lm-section,
  html body #spotlight, html body #testimonials, html body #faq{
    padding-top:56px !important; padding-bottom:56px !important;
  }
  html body .reassure{ padding-top:56px !important; padding-bottom:48px !important; }
  html body #pm-food{ padding-top:56px !important; padding-bottom:48px !important; }
  html body .hx{ padding-top:56px !important; padding-bottom:40px !important; }
  html body #pm-orgs, html body #pm-schools{ padding-top:32px !important; padding-bottom:32px !important; }
  html body .pmts-wrap{ padding-top:56px !important; }
  html body .pmts-band--trust{ margin-top:36px !important; padding-bottom:48px !important; }
  html body #pmFinalCta{ padding-top:56px !important; padding-bottom:40px !important; }

  /* inner slack that the section paddings could not see */
  html body #s-flow-editorial-v2 .pm-hww{ padding:0 0 6px !important; margin-top:0 !important; }
  html body #pm-orgs, html body #pm-schools{ padding-top:20px !important; padding-bottom:20px !important; }
  html body #pm-schools{ contain-intrinsic-size:auto 100px !important; }
  html body #faq{ contain-intrinsic-size:auto 770px !important; }   /* six rows at rest + the fine print */
  html body #pm-food .ckfs{ margin-top:0 !important; padding-top:0 !important; }
  html body #pmInteractiveDemo .pmdemo-section{ padding-top:56px !important; padding-bottom:40px !important; }
  html body #pmInteractiveDemo .pmdemo-head{ margin-top:0 !important; }
  html body .pm-testi-light .pm-testi-head{ margin-bottom:28px !important; gap:0 !important; }   /* title→line = the lead's own 16px, same as the demo header */
  html body #faq .faq-fine{ margin-bottom:0 !important; }
  html body #pmFinalCta > *{ margin-top:0 !important; }

  /* ── §3 SECTIONS, in page order ─────────────────────────────────────────── */

  /* Under the hero: the arc of faces, then the words, then the frame (Caleb, from his
     phone, 2026-09-11). The arc is moved into this grid by the script before #pm-services;
     the "One thread through it all" label and the services line are gone on phones. */
  html body .reassure__in{ display:grid; gap:18px !important; }
  html body .reassure__in > .pmot-thread{ order:0; width:100%; padding:0 !important; }
  html body .reassure__in > .reassure__copy{ order:1; }
  html body .reassure__in > .reassure__art{ order:2; }
  html body .pmot-thread .pmot-eyebrow, html body .pmot-thread .pmot-line{ display:none !important; }
  html body .reassure{ padding-top:36px !important; }

  /* The frame on phones: all three slides in a swipe rail — football, then the two real
     clips — with dots in the chin. Same bezel and screen as desktop; only the track changes. */
  html body .reassure.is-phone-rail .reassure__track{
    display:flex !important; width:100% !important; height:100%; transform:none !important;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; overscroll-behavior-x:contain;
  }
  html body .reassure.is-phone-rail .reassure__track::-webkit-scrollbar{ display:none; }
  html body .reassure.is-phone-rail .reassure__slide{ flex:0 0 100% !important; width:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always; transform:none !important; }
  html body .reassure.is-phone-rail .reassure__slide--vid{ display:block !important; }
  /* phone order (Caleb 2026-09-11): the homework clip first, the hiking clip second, the
     football animation last — the reverse of the markup, which desktop keeps. The script
     sorts the slides by their on-screen position, so the dots and playback follow this. */
  html body .reassure.is-phone-rail .reassure__slide:nth-child(1){ order:3; }
  html body .reassure.is-phone-rail .reassure__slide:nth-child(2){ order:2; }
  html body .reassure.is-phone-rail .reassure__slide:nth-child(3){ order:1; }
  html body .reassure.is-phone-rail .reassure__vid{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; background:#0E2A31; }
  html body .reassure__pdots{ position:absolute; left:0; right:12px; bottom:0; height:34px; z-index:5; display:flex; justify-content:center; align-items:center; gap:8px; }
  html body .reassure__pdots button{ width:7px; height:7px; padding:0; border:0; border-radius:999px; background:rgba(28,86,120,.28); transition:width .25s ease, background .25s ease; }
  html body .reassure__pdots button.is-on{ width:20px; background:#1C5678; }

  /* "What your Assistant actually does" — the looping video used to sit BEHIND
     the accordion rows, so the row labels were white on moving footage. It is
     now a framed pane under the title (the desktop treatment), and the rows are
     ink on white. Flex + order puts the pane after the heading without touching
     the markup. */
  /* the section had no background of its own, so the page's pale blue-grey body showed through
     (Caleb: "delete this blue or grey background … should be white"); same for the FAQ below */
  html body #pm-what{ display:flex; flex-direction:column; background:#fff !important; }
  html body #faq{ background:#fff !important; }
  html body #pm-what .pmwhat-bg{
    order:1; position:relative !important; inset:auto !important; z-index:0 !important;
    height:200px !important; min-height:0 !important; border-radius:16px !important;
    margin:18px 0 0 !important; overflow:hidden !important; background:#0d1b1e !important;
    transform:none !important;
  }
  html body #pm-what .pmwhat-bg__v{ display:block !important; position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; transform:none !important; }
  html body #pm-what .pmwhat-bg__scrim{ background:linear-gradient(180deg,rgba(10,26,30,0) 60%,rgba(10,26,30,.35) 100%) !important; }
  html body #pm-what .pmws{ order:2; margin-top:18px !important; }
  /* the closing line is exactly two lines: the sentence, then the italic clause (Caleb: "with
     you on its own line looks messy"). No wrapping inside a line — the size scales with the
     phone so the sentence always fits on one. */
  html body #pm-what .pmwhat-close{ order:3; max-width:none !important; margin:26px -10px 0 !important; padding:0 !important; white-space:nowrap; text-align:center; font-size:clamp(12px, 3.6vw, 16px) !important; line-height:1.5 !important; }
  /* The accordion, one clean system (Caleb 2026-09-11: "the title should be connected to
     the colour theme and the writing description should be white … it looks weird with all
     the glow"). The colour skins paint the OPEN row with a tinted gradient and a coloured
     glow shadow (.pmws__node.is-open !important in landing-*.css); on phones that wash sat
     behind the description while the header stayed white. Now:
       closed row  — white pill, hairline, ink title, ink plus. Every one the same; the
                     :hover state is neutralised because iOS keeps it lit after a tap.
       open row    — ONE white card with a thin accent border, no gradient, no glow;
                     title and × in the theme accent; description dark grey on white. */
  html body #pm-what .pmws-acc .pmws__node{ border:1px solid transparent !important; background:none !important; box-shadow:none !important; margin:0 0 10px !important; border-radius:18px !important; }
  html body #pm-what .pmws-acc .pmws__head,
  html body #pm-what .pmws-acc .pmws__head:hover{ background:#fff !important; border:1px solid rgba(18,59,66,.14) !important; box-shadow:none !important; padding:11px 16px 11px 11px !important; gap:12px !important; }
  html body #pm-what .pmws-acc .pmws__name{ color:var(--pmm-ink) !important; font-weight:600 !important; font-size:15.5px !important; }
  html body #pm-what .pmws-acc .pmws__plus,
  html body #pm-what .pmws-acc .pmws__head:hover .pmws__plus{ width:26px !important; height:26px !important; background:#fff !important; border:1px solid rgba(18,59,66,.28) !important; }
  html body #pm-what .pmws-acc .pmws__plus::before, html body #pm-what .pmws-acc .pmws__plus::after{ background:var(--pmm-ink) !important; }
  /* open */
  html body #pm-what .pmws-acc .pmws__node.is-open{ background:#fff !important; border-color:color-mix(in srgb, var(--pmm-accent) 45%, transparent) !important; box-shadow:0 14px 28px -22px rgba(18,59,66,.22) !important; }
  html body #pm-what .pmws-acc .pmws__node.is-open .pmws__head,
  html body #pm-what .pmws-acc .pmws__node.is-open .pmws__head:hover{ background:transparent !important; border-color:transparent !important; }
  html body #pm-what .pmws-acc .pmws__node.is-open .pmws__name{ color:var(--pmm-accent) !important; font-weight:700 !important; }
  html body #pm-what .pmws-acc .pmws__node.is-open .pmws__plus{ border-color:var(--pmm-accent) !important; }
  html body #pm-what .pmws-acc .pmws__node.is-open .pmws__plus::before, html body #pm-what .pmws-acc .pmws__node.is-open .pmws__plus::after{ background:var(--pmm-accent) !important; }
  html body #pm-what .pmws-acc .pmws__txt{ color:#3c4657 !important; font-size:14.5px !important; line-height:1.55 !important; padding:2px 18px 16px 49px !important; }

  /* Waiting list — one screen, no photo (Caleb 2026-09-11: "huge and I can't even see it …
     I don't want this photo in the background on mobile"). The exhibition-hall image goes,
     the calendar animation goes, and the card tightens to ~520px so it fits a phone whole. */
  html body #waitlist-band .wlb{ background:#fff !important; padding:24px 18px 22px !important; border:1px solid rgba(18,59,66,.10) !important; border-radius:22px !important; box-shadow:0 14px 32px -24px rgba(18,59,66,.18) !important; }
  html body #waitlist-band .wlb::before, html body #waitlist-band .wlb::after{ display:none !important; }
  html body #waitlist-band .wlb__pill{ display:none !important; }   /* moved to the reassurance row below */
  html body #waitlist-band .wlb__fact--m{ display:inline-flex !important; }
  html body #waitlist-band .wlb__anim{ display:none !important; }
  html body #waitlist-band .wlb__sub{ margin:12px auto 16px !important; }
  html body #waitlist-band .wlb-spots{ gap:12px !important; margin-bottom:16px !important; }
  html body #waitlist-band .wlb-spot__head{ margin-bottom:6px !important; }
  html body #waitlist-band .wlb__row{ gap:10px !important; }
  html body #waitlist-band .wlb__row input{ height:52px !important; font-size:16px !important; }
  /* the button's glow was the base page's coral at every colour (Caleb: "why is it orange … I'm on purple") — it follows the theme accent now */
  html body #waitlist-band .wlb__go{ height:52px !important; font-size:16px !important; box-shadow:0 14px 28px -14px color-mix(in srgb, var(--pmm-accent) 55%, transparent) !important; }
  /* the four reassurance lines: a 2x2 grid under a hairline, clear of the button
     (Caleb 2026-09-11: "two on top two on bottom … right now it looks messy"). */
  html body #waitlist-band .wlb__facts{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px 12px !important; margin-top:22px !important; padding:16px 0 0 !important; border-top:1px solid rgba(18,59,66,.10); border-radius:0 !important; background:none !important; width:100%; }
  html body #waitlist-band .wlb__facts span{ font-size:12px !important; line-height:1.3 !important; align-items:flex-start !important; gap:6px !important; text-align:left; }
  html body #waitlist-band .wlb__facts svg{ width:13px !important; height:13px !important; margin-top:2px; }

  /* The faces marquee is its own beat between two sections (Caleb 2026-09-11: "too close
     … bring it down, make it a little bigger so it doesn't look so cheap"). */
  /* 59 / 68 — Caleb's own numbers, set by dragging the marquee on his phone and locking it (2026-09-11, second pass) */
  html body #pm-grocers{ padding-top:59px !important; padding-bottom:68px !important; --gs:68px; }
  html body #pm-grocers .pmgro-phrase{ font-size:27px !important; font-weight:600 !important; letter-spacing:-.02em !important; }

  /* Food — the monday-style sticky stack, back the way it worked (Caleb 2026-09-11): the
     title block scrolls away like any header, the FIRST card pins under the nav, and the
     next two slide up and stack over it. --ckfs-top (nav height + 16) is written by the
     phone script so the pin sits the same distance under the bar on every phone. */
  html body #pm-food{ --ckfs-top:84px; }
  html body #pm-food .ckfs{ margin-top:0 !important; padding-top:0 !important; }
  html body #pm-food .ckfs-head{ position:static !important; z-index:auto !important; background:none !important; margin:0 0 4px !important; padding:0 20px !important; }
  html body #pm-food .ckfs-chips{ margin:0 0 12px !important; }
  html body #pm-food .ckfs-chips .ckfs-chip{ width:36px !important; height:36px !important; }
  html body #pm-food .ckfs-chips .ckfs-chip--sym svg{ width:26px !important; height:26px !important; }
  html body #pm-food .ckfs-sub{ margin-top:12px !important; }
  html body #pm-food .ckfs-cta{ margin-top:14px !important; padding:13px 24px !important; font-size:15px !important; }
  /* 40px under the title block — Caleb's number, set by dragging on his phone and locking it (2026-09-11) */
  html body #pm-food .ckfs-stack{ position:relative; z-index:1; grid-auto-rows:1fr !important; gap:16px !important; padding:40px 14px 0 !important; }
  html body #pm-food .ckfs-card{
    position:sticky !important; top:var(--ckfs-top) !important;
    min-height:calc(100vh - var(--ckfs-top) - 12px) !important;
    min-height:calc(100svh - var(--ckfs-top) - 12px) !important;
    display:flex !important; flex-direction:column !important;
    padding:18px 18px 22px !important; border-radius:18px !important;
    box-shadow:0 -10px 22px rgba(18,59,66,.08), 0 2px 18px rgba(18,59,66,.05) !important;
  }
  html body #pm-food .ckfs-card:nth-child(1){ z-index:1; }
  html body #pm-food .ckfs-card:nth-child(2){ z-index:2; }
  html body #pm-food .ckfs-card:nth-child(3){ z-index:3; }
  /* The three cards themselves — Caleb 2026-09-11: "flimsy … I'm expecting strong … polish,
     information cards that are organised and intentional." White card, crisp hairline,
     a real layered shadow (top edge too, so each card reads as sitting on the last), a
     step number at the end of the chips row (01 / 02 / 03 — numerals, so nothing to
     translate), a 22px bold title with the accent word upright, 16px body in a firmer
     grey, and the photo on a 14px radius. The chef illustration is off on phones. */
  html body #pm-food .ckfs-card{
    background:#fff !important; border:1px solid rgba(18,59,66,.12) !important;
    border-radius:22px !important; padding:22px 20px 22px !important;
    box-shadow:0 -14px 30px -20px rgba(18,59,66,.22), 0 24px 48px -28px rgba(18,59,66,.30) !important;
  }
  html body #pm-food .ckfs-row{ margin:0 0 16px !important; align-items:center !important; }
  html body #pm-food .ckfs-row .ckfs-chip{ width:36px !important; height:36px !important; }
  html body #pm-food .ckfs-row .ckfs-chip--sym svg{ width:25px !important; height:25px !important; }
  html body #pm-food .ckfs-ct{ font-size:22px !important; font-weight:700 !important; line-height:1.15 !important; letter-spacing:-.02em !important; color:var(--pmm-ink) !important; }
  html body #pm-food .ckfs-ct em{ font-style:normal !important; font-weight:700 !important; }
  html body #pm-food .ckfs-cd{ font-size:16px !important; line-height:1.55 !important; color:#2f3d4a !important; margin-top:10px !important; max-width:none; }
  html body #pm-food .ckfs-vis{ flex:1 1 auto !important; min-height:150px !important; height:auto !important; margin-top:16px !important; border-radius:14px !important; }
  html body #pm-food .ckfs-cap{ font-size:11.5px !important; padding:7px 12px !important; }
  html body #pm-food .ckfs-chef{ display:none !important; }
  html body #pm-food .ckfs-swipe{ margin:14px 0 6px !important; }
  html body #pm-food .ckfs-menu{ margin-top:8px !important; flex:1 1 auto !important; background:#F1F4F6 !important; border-radius:14px !important; padding:10px !important; }
  html body #pm-food .ckfs-menu__col{ padding:16px !important; border-radius:12px !important; box-shadow:none !important; border:1px solid rgba(18,59,66,.08) !important; }
  html body #pm-food .ckfs-menu__t{ font-size:17px !important; font-weight:700 !important; }
  html body #pm-food .ckfs-menu__list{ font-size:13.5px !important; }
  html body #pm-food .ckfs-close{ margin-top:32px !important; }

  /* "An assistant for every use case" — the desktop card at phone size */
  /* Caleb 2026-09-11 from his phone: "these buttons can all be deleted for mobile … it already
     has a good photo and the title underneath … the title could come right over the photo."
     The seven category pills and the info note are gone on phones; the card sits under the
     heading and is swiped (touch handler in the phone script) or stepped with its arrows. */
  html body .asx__side{ display:none !important; }
  html body .asx__layout{ margin-top:20px !important; }
  html body .asx__menu{ gap:8px !important; }
  html body .asx__cat{ padding:11px 16px 11px 14px !important; gap:11px !important; }
  html body .asx__catname{ font-size:15px !important; }
  html body .asx__note{ margin-top:12px !important; padding:14px 16px !important; font-size:13px !important; line-height:1.45 !important; }
  html body .asx__feature{ padding:12px 12px 14px !important; border-radius:22px !important; }
  html body .asx__photo{ height:210px !important; }
  /* the name pill on the photo, phone-sized (Caleb 2026-09-11: "a little too big") */
  html body .asx__pill{ left:12px !important; right:auto !important; bottom:12px !important; padding:7px 12px 7px 10px !important; gap:7px !important; font-size:12.5px !important; border-radius:999px !important; box-shadow:0 6px 16px rgba(15,70,82,.12) !important; }
  html body .asx__pill .asx__ic{ width:20px !important; height:20px !important; }
  html body .asx__pill .asx__ic svg{ width:15px !important; height:15px !important; }
  html body .asx__body{ padding:14px 6px 2px !important; }
  html body .asx__desc, html body .asx__desc.is-long{ min-height:0 !important; text-align:left; margin-left:0; }
  html body .asx__strengths{ margin-top:16px !important; gap:12px !important; }
  html body .asx__st{ font-size:13px !important; }
  html body .asx__st-ic{ width:40px !important; height:40px !important; margin-bottom:6px !important; }
  html body .asx__st-ic svg{ width:18px !important; height:18px !important; }
  html body .asx__st-ic.is-img img{ max-width:56px !important; max-height:38px !important; }
  html body .asx__controls{ margin-top:14px !important; }
  html body .asx__arrow{ width:42px !important; height:42px !important; }
  html body .asx__foot{ margin-top:18px !important; font-size:14px !important; }
  /* the View Assistants button has no destination yet ("the shape only") — a
     dead button is never shown to a phone visitor */
  html body .asx-cta{ display:none !important; }

  /* "Watch your kids do the work" — the prompt rail is a desktop metaphor
     (a column of chat prompts to hover); on a phone the screen alone tells it. */
  html body .hx-stage{ height:auto !important; }
  html body .hx-left{ display:none !important; }
  html body .hx-right{ height:380px !important; padding:16px !important; }
  html body .hx-shots{ inset:16px !important; }
  html body .hx-msg{ display:none !important; }
  html body .hx-cta{ margin-top:18px !important; }
  /* the preview stage wears a soft blur with one label; the mock animates on beneath it */
  html body .hx-phone-veil{ position:absolute; inset:0; z-index:20; /* above the replay card's cursor (8) and summary pop-up (10) */ display:grid; place-items:center; border:0; padding:0; margin:0; cursor:pointer; background:rgba(255,255,255,.28); -webkit-backdrop-filter:blur(6px) saturate(1.05) !important; backdrop-filter:blur(6px) saturate(1.05) !important; -webkit-tap-highlight-color:transparent; }
  /* (the !important above out-ranks index.html's phone perf rule `*{backdrop-filter:none !important}` — this is the ONE live blur on the phone page, and Caleb asked for it) */
  html body .hx-phone-veil__pill{ display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:999px; background:#fff; color:#123b42; font:700 14px/1 'Inter',system-ui,sans-serif; letter-spacing:-.01em; box-shadow:0 14px 30px -14px rgba(18,59,66,.45), 0 0 0 1px rgba(18,59,66,.08); }
  html body .hx-phone-veil__pill svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  /* The platform showcase — one shelf of real screens, the recorder replay,
     the trust line. The two scroll-drift shelves and the 184vh pin are desktop
     theatre that cost a screen and a half of blank scroll on a phone. */
  html body .pmts-mx{ height:auto !important; margin-top:24px !important; }
  html body .pmts-mx__stage{ position:static !important; }
  html body .pmts-mx__shelf--drift{ display:none !important; }
  html body .pmts-band--ws{ display:none !important; }
  html body .pmts-band--rec{ margin-top:44px !important; }   /* air between the two veiled cards (Caleb 2026-09-11) */
  /* The two other blurred cards wear the recorder preview's frame (Caleb 2026-09-11: "the
     same purple border … make it 100% like the first good one"): the same radial gradient,
     16px inset, 28px radius and themed shadow as .hx-stage/.hx-right. The --hx-* colours are
     the theme's (set on .hx by the colour skins); the phone script copies them onto
     #pmToolShowcase so these frames follow the picked colour exactly as the recorder does. */
  html body #pmToolShowcase .pmts-band--rec,
  html body #pmToolShowcase .pmts-mx__shelf:not(.pmts-mx__shelf--drift){
    position:relative; overflow:hidden; border-radius:28px !important;
    background:radial-gradient(120% 120% at 80% 0%, var(--hx-l,#818CF8), var(--hx-p,#6161F6) 55%, var(--hx-d,#4F46E5)) !important;
    box-shadow:0 26px 58px -40px rgba(var(--hx-drgb,79,70,229),.34), 0 4px 18px -6px rgba(30,34,72,.12) !important;
  }
  html body #pmToolShowcase .pmts-band--rec{ padding:16px !important; }
  html body #pmToolShowcase .pmts-mx__shelf:not(.pmts-mx__shelf--drift){ margin:0 16px !important; padding:16px 11px !important; }
  html body #pmToolShowcase .pmts-mx__shelf:not(.pmts-mx__shelf--drift) .pmts-mx__track{ padding:0 !important; }
  html body #pmToolShowcase .pmts-band--rec .hx-phone-veil,
  html body #pmToolShowcase .pmts-mx__shelf .hx-phone-veil{ border-radius:inherit; }
  /* the trust line and stats marquee are off on phones (Caleb 2026-09-11) */
  html body .pmts-band--trust{ display:none !important; }
  /* white, like the rest of the phone page (Caleb: "it looks grey or blue — I want it white") */
  html body #pmToolShowcase > .pmts{ padding-bottom:56px !important; background:#fff !important; }
  /* the grading / worksheet screens wear the veil too; the shelf keeps auto-advancing beneath it */

  /* Family Journey map — the desktop map-size rule (`[data-mapsize]`, 2026-09-11) fixes the
     stage height at every width. On phones the entries list sits BELOW the map inside that
     stage, and #pmFamilyMap's content-visibility paint containment clipped it off ("the list
     of entries is not showing"). The stage sizes to its content on phones. */
  html body #pmFamilyMap .lm-stage{ height:auto !important; min-height:0 !important; }
  /* 38px between the map and the entries card — Caleb's lock from his phone (2026-09-11) */
  html body #pmFamilyMap .lm-map{ margin-bottom:38px !important; }        /* the 38px gap lives on the map so the sticky card carries no margin */
  html body #pmFamilyMap .lm-overlay{ margin-top:0 !important; }
  /* The card PINS under the nav and the Interactive Preview slides up over it (Caleb
     2026-09-11: "stick at the header and when swiping … pulled over it nicely"). Same
     mechanics as the food stack: the card is sticky, the map section keeps 62vh of scroll
     room below it, and the next section is pulled up over that room on a higher layer with
     a rounded, shadowed top edge. --ckfs-top (nav height + 16) is written by the phone script. */
  html body #pmFamilyMap .lm-overlay{ position:sticky !important; top:var(--ckfs-top,84px) !important; }
  html body #pmFamilyMap .lm-stage::after{ content:''; display:block; height:62vh; }   /* the room is a real box after the card — padding on the parent does not extend a sticky's range */
  html body #pmInteractiveDemo{ position:relative; z-index:3; margin-top:-62vh !important; }
  html body #pmInteractiveDemo .pmdemo-section{ background:#fff !important; border-radius:28px 28px 0 0; box-shadow:0 -22px 48px -28px rgba(16,24,40,.32); }
  /* The entries card, exactly as on desktop (Caleb 2026-09-11: "same colour and buttons …
     every inch"). Desktop's card is the same frosted gradient laid OVER the dark satellite
     map; an old phone rule painted it flat white. The chips, search and rows already share
     desktop's rules — only the card ground differed. The gradient is desktop's, verbatim,
     over a slate base the colour of the blurred map beneath it on desktop. */
  html body #pmFamilyMap .lm-overlay{
    background:linear-gradient(150deg, rgba(255,255,255,.8) 0%, rgba(237,245,255,.72) 55%, rgba(255,255,255,.7) 100%), #3E4B4F !important;
  }

  /* Interactive demo — the live dashboard iframe is replaced by a still of the
     same screen and a button; the button opens a notice that the demo is a
     desktop experience (js/landing-demo.js builds both, phones only). */
  html body #pmInteractiveDemo .pmdemo-stage{ display:none !important; }
  html body #pmInteractiveDemo .pmdemo-viewpick{ display:none !important; }
  html body #pmInteractiveDemo .pmdemo-head{ margin-bottom:0 !important; }
  html body .pmdemo-phone{ margin:22px auto 0; max-width:440px; padding:0 20px; text-align:center; }
  html body .pmdemo-phone__shot{
    position:relative; display:block; aspect-ratio:4 / 3; border-radius:18px; overflow:hidden; background:#f1f5f9;
    box-shadow:0 0 0 1px rgba(18,40,60,.10), 0 18px 40px -22px rgba(15,23,42,.28), 0 46px 96px -40px rgba(15,23,42,.26);
  }
  html body .pmdemo-phone__shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
  html body .pmdemo-phone__shot::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,0) 70%,rgba(255,255,255,.55) 100%); pointer-events:none; }
  html body .pmdemo-phone__btn{ margin-top:18px; }
  html body .pmdemo-phone__hint{ margin:12px 0 0; font-size:12.5px; line-height:1.4; color:#617696; }
  /* the notice */
  html body .pmdemo-sheet{ position:fixed; inset:0; z-index:2147483000; }
  html body .pmdemo-sheet[hidden]{ display:none; }
  html body .pmdemo-sheet__bg{ position:absolute; inset:0; border:0; padding:0; background:rgba(8,12,24,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .24s ease; }
  html body .pmdemo-sheet__card{
    position:absolute; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px));
    background:#fff; border-radius:22px; padding:26px 22px 18px; text-align:center;
    box-shadow:0 30px 70px -30px rgba(8,12,24,.5);
    transform:translateY(28px); opacity:0; transition:transform .3s cubic-bezier(.22,.9,.32,1), opacity .24s ease;
  }
  html body .pmdemo-sheet.is-open .pmdemo-sheet__bg{ opacity:1; }
  html body .pmdemo-sheet.is-open .pmdemo-sheet__card{ transform:none; opacity:1; }
  html body .pmdemo-sheet__ic{ display:grid; place-items:center; width:52px; height:52px; margin:0 auto 14px; border-radius:16px; background:#EEF2F7; color:#123b42; }
  html body .pmdemo-sheet__ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  html body .pmdemo-sheet__t{ margin:0; font-size:19px; font-weight:700; line-height:1.2; letter-spacing:-.02em; color:#123b42; }
  html body .pmdemo-sheet__p{ margin:8px auto 0; max-width:32ch; font-size:14.5px; line-height:1.55; color:#617696; }
  html body .pmdemo-sheet__url{ display:block; margin:12px auto 0; font-size:14px; font-weight:700; letter-spacing:.01em; color:#123b42; }
  html body .pmdemo-sheet__ok{ display:block; width:100%; margin-top:18px; border:0; border-radius:999px; padding:15px 18px; background:#123b42; color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
  html body .pmdemo-sheet__ok:active{ transform:scale(.985); }
  @media (prefers-reduced-motion:reduce){
    html body .pmdemo-sheet__bg, html body .pmdemo-sheet__card{ transition:none; }
  }

  /* "Real Moments. Real Growth." — 42 stories used to be a 42-SCREEN scroll pin
     (29,600px of the page). It is one card now: swipe or tap through it
     (script.js, phone branch). */
  html body #sp-space{ height:auto !important; }
  html body #sp-sticky{
    position:static !important; top:auto !important; height:auto !important; overflow:visible !important;
    margin:0 16px !important; border-radius:16px !important;
  }
  html body #sp-sticky > div:nth-of-type(1){ padding:18px 18px 14px !important; }
  /* the content row is flex:1 1 0 inline (it filled the pinned card); unpinned it must size to its content */
  html body #sp-sticky > div:nth-of-type(2){ flex:0 0 auto !important; height:auto !important; overflow:visible !important; padding:16px 18px 6px !important; gap:14px !important; }
  html body #sp-photo-wrap{ width:100% !important; height:auto !important; aspect-ratio:4 / 5 !important; border-width:0 !important; outline:0 !important; border-radius:12px !important; touch-action:pan-y; }
  html body #sp-desc{ -webkit-line-clamp:4 !important; }
  /* colour on phones (Caleb 2026-09-11): desktop's photos rest in grayscale until the cursor
     hovers; a phone has no cursor, so they would never show colour. Desktop untouched. */
  html body #sp-img-a, html body #sp-img-b{ filter:none !important; }
  html body #sp-sound-btn, html body #sp-skip{ display:none !important; }
  html body #sp-sticky > div:nth-of-type(3){ padding:12px 18px 14px !important; }
  html body #sp-prev, html body #sp-next{ width:34px !important; height:34px !important; }

  /* Testimonials — the columns auto-scroll; two cards of it is the message. (A pin here was
     tried and pulled the same day — Caleb: "looks weird … I like people scrolling through the
     same amount of reviews as before".) */
  html body .pm-testi-light .pm-testi-cols{ max-height:600px !important; }

  /* The FAQ pins instead (Caleb 2026-09-11): its bottom sits at the viewport bottom — never
     above the nav — and the closing "Be one of the first" slides up over it on a rounded,
     shadowed edge. --faq-top is measured by the phone script (the FAQ grows when a question
     opens; a ResizeObserver keeps the number honest). */
  html body #faq{ position:sticky; top:var(--faq-top, 0px); z-index:0; }
  html body #pmFinalCta{ position:relative; z-index:5; background:#fff !important; border-radius:28px 28px 0 0; box-shadow:0 -22px 48px -28px rgba(16,24,40,.32); }
  html body > footer, html body #ages{ position:relative; z-index:5; }

  /* Final call — nothing to change but its air, set in §2 */
}