/* ═══════════════════════════════════════════════════════════════════════════════ 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; } /* 2026-09-11: the scale reads --pmm-* TOKENS whose fallbacks are today's numbers, so a type skin (css/landing-type-soehne.css first) can re-point the whole phone scale without restating one selector — the same doctrine as css/landing-type.css. Change a fallback here to change the default. */ /* 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:var(--pmm-eyebrow-size,11px) !important; font-weight:var(--pmm-eyebrow-w,700) !important; letter-spacing:var(--pmm-eyebrow-track,.22em) !important; text-transform:var(--pmm-eyebrow-case,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:var(--pmm-eyebrow-w,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:var(--pmm-hero-size,30px) !important; font-weight:var(--pmm-hero-w,700) !important; line-height:var(--pmm-hero-lh,1.1) !important; letter-spacing:var(--pmm-hero-track,-.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:var(--pmm-title-size,26px) !important; font-weight:var(--pmm-title-w,700) !important; line-height:var(--pmm-title-lh,1.12) !important; letter-spacing:var(--pmm-title-track,-.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:var(--pmm-title-track,-.025em) !important; } /* the type skins re-track this one; keep it on the standard */ html body .pmsvc-h2 em, /* the standard's own em: weight by token here; its colour is the colour skin's #pm-services rule */ 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:var(--pmm-title-em-w,700) !important; color:var(--pmm-title-em,var(--pmm-accent)) !important; background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; -webkit-text-fill-color:var(--pmm-title-em,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:var(--pmm-card-size,18px) !important; font-weight:var(--pmm-card-w,600) !important; line-height:var(--pmm-card-lh,1.25) !important; letter-spacing:var(--pmm-card-track,-.01em) !important; color:var(--pmm-ink) !important; /* = the Services title's ink, which every skin keeps at #123b42 — so no change until a skin re-inks the standard */ } /* 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:var(--pmm-lead-size,15px) !important; line-height:var(--pmm-lead-lh,1.55) !important; max-width:var(--pmm-lead-max,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:var(--pmm-sec-pad,56px) !important; padding-bottom:var(--pmm-sec-pad,56px) !important; /* 2026-09-11: token so a type skin can set its own rhythm */ } html body .reassure{ padding-top:var(--pmm-sec-pad,56px) !important; padding-bottom:var(--pmm-sec-pad-s,48px) !important; } html body #pm-food{ padding-top:var(--pmm-sec-pad,56px) !important; padding-bottom:var(--pmm-sec-pad-s,48px) !important; } html body .hx{ padding-top:var(--pmm-sec-pad,56px) !important; padding-bottom:var(--pmm-sec-pad-xs,40px) !important; } html body #pm-orgs, html body #pm-schools{ padding-top:32px !important; padding-bottom:32px !important; } html body .pmts-wrap{ padding-top:var(--pmm-sec-pad,56px) !important; } html body .pmts-band--trust{ margin-top:36px !important; padding-bottom:48px !important; } html body #pmFinalCta{ padding-top:var(--pmm-sec-pad,56px) !important; padding-bottom:var(--pmm-sec-pad-xs,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:var(--pmm-sec-pad,56px) !important; padding-bottom:var(--pmm-sec-pad-xs,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 — the last card on the site, so its air is the air a visitor leaves on. Caleb, from his phone 2026-09-15: "the button is too close to the writing and the photos near the bottom the V faces need to go down." NEITHER GAP WAS EVER SET — both were cancelled further up this file, which is why desktop looks right and the phone does not: · §1's shared lead rule ends with `margin-bottom:0`, and that killed the 30px the inline desktop CSS gives .pm-final-cta__meta. Measured at 430px: exactly 0px between the paragraph and the button, so the button's own pink glow (0 12px 28px -8px) washed up into the last line of type. · §2's `#pmFinalCta > *{ margin-top:0 }` cancels .pmarc-wrap's own margin, so the arc of faces hung 14px under the button — its padding, and nothing else. Restored here, AFTER both, so neither of those rules has to be re-stated or weakened. THE NUMBERS ARE A COMPOSITION, not a nudge: 16px title→lead (§1), then 30px lead→button reads as a deliberate step up to the action. 30px + the wrap's own 14px padding puts 44px above the faces. Both are fixed px and the row is centred by --u, so that holds at 375, 390 and 430. */ html body #pmFinalCta .pm-final-cta__btn{ margin-top:30px !important; } html body #pmFinalCta .pmarc-wrap{ margin-top:30px !important; } /* THE CLOSING SCREEN — same conversation, one step further. Caleb: "the red button join the waiting list should show when fully down. the children faces should show nicely, the logo and slogan thing and all the [pieces] in the footer." Measured at 430 before this: button-top to end-of-document was 791px, against ~740px of page area on his phone once Safari's chrome is off. So scrolling to the very bottom put the button ABOVE the fold — the page's one closing action, cut off. 77px of that was a single band of white between the faces and the logo, and no one ever chose it: §2's section pad-bottom (40) and the footer's own pad-top (30) simply landed next to each other, neither knowing the other was there. 32 + 16 instead — still 52px, still a clear break between the page and its footer, just not a hole. The rest of the saving is line-height inside the footer (css/footer.css), where the links got BIGGER. The footer pad-top has to be won by specificity, not by source order: index.html's own phone rule `#pmFinalCta + footer{padding-top:30px}` carries an id and would otherwise outrank any plain `footer` selector in this file, whatever the load order. */ /* the closing paragraph loses its second sentence on phones — see the comment on the two

s in index.html. Swapped at 760, not at the inline rules' 700, so the whole phone treatment turns over at one width. */ html body #pmFinalCta .pm-final-cta__meta--long{ display:none !important; } html body #pmFinalCta .pm-final-cta__meta--short{ display:block !important; } /* ── THE NAV TUCKS AWAY AT THE VERY BOTTOM ────────────────────────────────── Caleb, from his phone: "sometimes the red button is perfect … but if I go up and down a little it covers the red button. why isn't it just straight up perfect?" BOTH SCREENSHOTS WERE THE SAME PAGE. Nothing moved — the VIEWPORT changed size. Safari hides its toolbar as you scroll down and puts it back when you scroll up, and that is worth about 30px of height. At the end of a document, content sits at (viewport height − distance-from-the-end), so every one of those 30px moves the button 30px UP the screen. Measured with layout forced: there are 759px below the button (793 on his phone, once the home-indicator inset is counted). With the toolbar hidden the button lands clear of the nav; with it showing, the button lands underneath it. Same page, same CSS, two different answers — which is exactly the "sometimes" he is describing. So the fix cannot be a number: any padding tuned for one toolbar state is wrong in the other, and cutting 50px out of the closing screen would undo the spacing he has just approved. The nav moves instead. Once the button rises within 104px of the top — before it is covered, not after — the bar slides up and out, and it comes back the moment he scrolls up. There is nothing in it he loses: at the bottom of the page, every link the nav holds is in the footer underneath. The transition list is restated in full because it is a shorthand: declaring only transform and opacity here would silently drop the eight properties the pill already animates (pm-nav.css:19). And the transform MUST keep translate(-50%) — that is what centres the bar; a bare translateY would throw it to the right edge on the way out. */ html body #nav{ transition:max-width .34s cubic-bezier(.4,0,.2,1), top .34s cubic-bezier(.4,0,.2,1), height .34s, padding .34s, border-radius .34s, border-color .34s, box-shadow .34s, background .3s, transform .3s cubic-bezier(.4,0,.2,1), opacity .22s ease; } html body #nav.pm-nav-tuck:not(.is-menu){ transform:translate(-50%, calc(-100% - 18px)); opacity:0; pointer-events:none; } @media (prefers-reduced-motion:reduce){ html body #nav{ transition:none; } } /* ── A BEAT TO READ THE FINE PRINT ────────────────────────────────────────── Caleb: "when I scroll, the section comes quickly and pulls over 'Looking for the fine print? Read our full Terms, Privacy Policy & Policies' quickly. Not enough time to read." He is describing a real gap in the mechanism, not a speed. #faq is sticky and pins when its BOTTOM reaches the bottom of the screen; #pmFinalCta is the very next thing in the document, so its top edge reaches that same line at the same moment. The FAQ therefore finishes arriving and starts being covered on the same pixel of scroll — the fine print, which sits 56px above the section's bottom edge, gets about 56px of scroll before the card's rounded edge is over it. There was never a window. 120px of margin gives it one. The FAQ is pinned throughout, so this space is BELOW the fold the whole time it is being scrolled through — nothing opens up on screen, no white band appears, the card simply arrives 120px later. The fine print is now readable for 176px of scroll instead of 56. Margin, not padding, and on the CTA rather than on the FAQ. Padding on #faq would make the section taller, and a pinned section is measured from its bottom: every extra pixel pushes the eyebrow and title UP. They have nowhere to go — measured on Caleb's phone, the "FAQ" eyebrow already sits ~106px down with Safari's toolbar hidden and ~76px with it showing, against a nav whose bottom edge is at 79. The card cannot grow. This does not touch it. It also leaves the closing screen alone: the space is above the section, so the button-to-end-of-page distance the nav tuck depends on is unchanged. */ html body #pmFinalCta{ margin-top:120px !important; } /* ...and the seam that the beat above exposed. Caleb, immediately after: "there is this. The light shade coming and it looks bad? What is that." `.pmvibe-seam` — a 90px band of #f8fafc fading to transparent, z-index 2, sitting in flow between #faq and #pmFinalCta with `margin-bottom:-90px` so it costs no height. It exists for DESKTOP: with the vibe card switched off (data-pm-vibe="off", which is the current state), the FAQ's slate-50 would meet the CTA's mint on a hard line, and this paints the FAQ's own colour across the CTA's first 90px to soften the join. On a phone it has no job and never did: §3 forces the FAQ to #fff and the CTA is a white card with its own rounded edge and upward shadow — that shadow IS the seam. It stayed invisible only because it landed ON the CTA, near-white on white. The 120px above pulled the two apart (90 of negative margin against 120 of margin leaves it 30px clear of the card), so it came to rest over the PINNED FAQ instead — #f8fafc over #fff, at z-index 2 against the FAQ's 0. A grey wash sliding down the questions. Hiding it costs no layout: 90px of height against -90px of margin is a net zero either way, so nothing below moves. Phones only — desktop keeps its join. */ html body .pmvibe-seam{ display:none !important; } html body #pmFinalCta{ padding-bottom:32px !important; } html body #pmFinalCta + footer{ padding-top:16px !important; } /* ── §4 THE PREMIUM BUTTON FINISH, PORTED FROM DESKTOP (2026-09-12) ───────── Caleb: "I want you to do me a favour on mobile. Make sure all the buttons have the same premium design we did on desktop please." WHY THEY DIDN'T ALREADY. Every finish built on desktop today went into ONE file, css/landing-rose.css — 38 gradients there against 13 in each of the other eight skins. Phones DEFAULT TO ROYAL PURPLE (index.html picks 'purple' under 760px), so on his phone almost none of that work was ever on screen. Measured at 390px before touching anything: of the visible buttons only the hero, the final CTA, the demo button and "Watch a real session" carried gradient + layered shadow + inset highlight; Learn more, Join the waiting list, Get started, Share your experience, the selected who-this-fits tab, Family Journey, both carousel arrows and the open accordion's × had none of it. So this is written from the THEME TOKENS rather than from one colour. Every skin already declares --pmm-link (its primary) and --pmm-link-deep; on rose that pair is #E11D48 / #BE123C — exactly the middle and end stops of the desktop gradient. The bright top stop is mixed in oklab, which lightens without draining the chroma the way an sRGB mix to white does. One block, every Page Colour, phones only — desktop cannot see a line of this file. WHAT IS DELIBERATELY LEFT OUT, for the same reason as on desktop: the finish marks what ACTS or what is CHOSEN. Unselected tabs, closed accordion rows, the FAQ rows, the how-it-works rows, the testimonial cards, the theme picker and the cookie banner all stay plain. .pmts-rec__video and .lm-cat are left alone too because they were never given it on desktop either, and "same as desktop" is the whole request. .asx__badge, .asx__cat and the header's nav-cta measure 0×0 on a phone — no rule can help an element that is not on screen. */ :root{ --pmm-btn-bright : color-mix(in oklab, var(--pmm-link,#0D9488) 76%, #ffffff); --pmm-btn-glow : color-mix(in srgb, var(--pmm-link,#0D9488) 46%, transparent); --pmm-btn-contact: color-mix(in srgb, var(--pmm-link-deep,#0F766E) 33%, transparent); } /* (a) the full-size CTAs and the chosen half of a two-way control */ html body #pm-services .pmsvc-card__btn, html body #waitlist-band .wlb__go, html body #pm-food .ckfs-cta, html body .pm-testi-share__btn, html body .pmfc-tab.is-on, html body #pmFamilyMap .lm-toggle__btn.is-active{ /* plain fill first: a browser without color-mix drops the gradient line and still gets a solid themed button rather than an unstyled one */ background:var(--pmm-link,#0D9488) !important; background:linear-gradient(135deg, var(--pmm-btn-bright) 0%, var(--pmm-link,#0D9488) 52%, var(--pmm-link-deep,#0F766E) 100%) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 8px 20px -6px var(--pmm-btn-glow), 0 2px 5px -2px var(--pmm-btn-contact), inset 0 1px 0 rgba(255,255,255,.28) !important; } /* (b) the small round controls — same three ingredients, shadow scaled to the size, exactly as desktop scales .pmfc-arrow and .asx__arrow down from the CTAs */ html body .pmfc-arrow, html body .asx__arrow{ background:var(--pmm-link,#0D9488) !important; background:linear-gradient(135deg, var(--pmm-btn-bright) 0%, var(--pmm-link,#0D9488) 52%, var(--pmm-link-deep,#0F766E) 100%) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 6px 15px -5px var(--pmm-btn-glow), 0 1px 3px -1px var(--pmm-btn-contact), inset 0 1px 0 rgba(255,255,255,.26) !important; } /* NOT the accordion's ×, deliberately. §3 above already gives the phone that accordion as "ONE white card with a thin accent border, no gradient, no glow" on Caleb's own 2026-09-11 instruction, and the × is part of that card. Giving the mark a gradient while its row stays flat white would fight a decision he already made for phones, so it is left as it is and raised with him instead. */ /* a disabled arrow is not an action — it keeps the shape and loses the glow */ html body .pmfc-arrow[disabled], html body .asx__arrow[disabled]{ box-shadow:none !important; } }