/* build-fingerprint 8f38fbb229c624e6 — this file is generated; edits here are lost on the next build */
/* AUTO-GENERATED from css/landing-skin.tmpl.css by build-landing-skins.mjs.
   DO NOT EDIT THIS FILE. Edit the template or the recipe, then re-run the
   builder. Colour: CORAL RED (red lab — warmest of the set) */

/* ============================================================================
   LANDING COLOUR-SKIN MASTER TEMPLATE  ·  DO NOT EDIT THE GENERATED FILES.
   ----------------------------------------------------------------------------
   This is the SINGLE source of truth for every landing colour option.
   `build-landing-skins.mjs` stamps this out once per colour recipe into
   css/landing-<name>.css. Change a spot HERE, re-run the builder, and EVERY
   colour updates together — nothing can get left out.

   GREEN is NOT built from this file. Green = the untouched base index.html CSS
   (all override sheets disabled). Never themed here. Caleb's revert baseline.

   Tokens (filled per recipe): CORAL RED (red lab — warmest of the set) #df5b38=primary #cf4720=deep/hover
   #f1785c=light #f8a08d=lighter #fff2f0=soft-bg 223,91,56=primary r,g,b
   207,71,32=deep r,g,b  #df5b38=ACCENT TEXT — every eyebrow and every title's second sentence
   (2026-09-11: Rose wants its bright red here, the others keep their deep)  #fff2f0#fff2f0#feeae7=reassure band  #f1785c#df5b38#cf4720=hero
   gradient stops  #f88e77#e75e3b#d84d27=hero hover stops  #fdf3f2=light-button
   bg  #b13c19=light-button text.  KEPT constant across all colours: logo, gold
   booklet dot + gold pulse flash, Ch3/Ch4 orange-coral accents + donut arcs,
   navy ink #123b42, semantic red/amber.
   ============================================================================ */

/* ── 0. THE PRIMARY AS A TOKEN (2026-09-11) — the type skins colour their callout links with
   this, so hue stays the Page Colour's business and weight/size stay the type skin's. ── */
:root{ --pmm-link:#df5b38; --pmm-link-deep:#cf4720;
  /* 2026-09-14 — #df5b38 as a token. It is the page's ACCENT TEXT colour, the one every
     eyebrow and every title's second sentence already uses, and until now it existed
     only as a literal stamped into each rule. The footer headings needed it, and
     anything else that has to agree with the eyebrows will too. */
  --pmm-accent:#df5b38; }

/* ── 1. HERO — coral CTA button → theme (base; premium gradient below) ─────── */
.hero__btn { background:#df5b38 !important; color:#fff !important; }
.hero__btn:hover { background:#cf4720 !important; }

/* ── 2. OUR SERVICES — bold phrase, checkmark, dots, "Learn more" buttons ──── */
#pm-services .pmsvc-note b { color:#df5b38 !important; }
#pm-services .pmsvc-note svg { stroke:#df5b38 !important; }
#pm-services .pmsvc-dots button.is-on { background:#df5b38 !important; }
#pm-services .pmsvc-card__btn { background:#df5b38 !important; }
#pm-services .pmsvc-card__btn:hover { background:#cf4720 !important; }

/* ── 2b. "Your kid's pretty great." band — pale mint bg → pale theme (desktop) */
@media (min-width:701px){
  .reassure { background:linear-gradient(180deg,#fff2f0 0%,#fff2f0 55%,#feeae7 100%) !important; }
}

/* ── 3. THE BRIEF (booklet) — every teal accent → theme, keep orange/coral ─── */
#pm-book { --teal:#df5b38 !important; --teal-2:#f1785c !important; --teal-3:#f8a08d !important; --teal-soft:#fff2f0 !important; }
.pm-book__chapter[data-chapter="1"], .pm-book__page[data-page="1"] { --chapter-color:#df5b38 !important; }
.pm-book__chapter[data-chapter="2"], .pm-book__page[data-page="2"] { --chapter-color:#f1785c !important; }
.pm-book__chapter[data-chapter="5"], .pm-book__page[data-page="5"] { --chapter-color:#df5b38 !important; }
.pm-book__chapter:hover { background:rgba(223,91,56,0.08) !important; color:rgba(18,59,66,0.95) !important; }
/* 2026-09-14 — the selected chapter takes the page's finish, like every other
   selected control. Caleb: "i want the selected ones to have that very nice button
   and nice look and premium hover — right now when i select and hover its very
   weak. make it like the rest."

   It was weak by construction: a radial wash topping out at 22% alpha plus an inset
   ring, and nothing else. No fill, no glow, and — because .is-active is declared
   after :hover at equal specificity — no hover response at all once it was picked.
   The same fault as the switch controls and the accordion ×: a state that was
   designed, and a hover on that state that was never written.

   Full finish now, the same three ingredients as the hero and the tabs: a three-stop
   gradient, a coloured glow over a contact shadow, the one-pixel inset highlight.
   The text goes white with it — a dark navy title on a saturated fill is unreadable,
   and every other selected control on this page already turns its label white. */
.pm-book__chapter.is-active {
  color:#fff !important;
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 10px 24px -8px rgba(223,91,56,.52), 0 2px 5px -2px rgba(207,71,32,.34),
             inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.pm-book__chapter.is-active .pm-book__chapter-title,
.pm-book__chapter.is-active .pm-book__chapter-sub,
.pm-book__chapter.is-active .pm-book__chapter-roman,
.pm-book__chapter.is-active .pm-book__chapter-num{ color:#fff !important; }
.pm-book__chapter.is-active .pm-book__chapter-sub{ color:rgba(255,255,255,.82) !important; }
/* …and it lifts when you hover it, instead of sitting there. */
.pm-book__chapter.is-active:hover {
  background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 14px 30px -8px rgba(223,91,56,.62), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.pm-book__chapter:hover .pm-book__chapter-num { color:#df5b38 !important; }   /* active's numeral is white, set above */
.pm-book__chapter:focus-visible { box-shadow:inset 0 0 0 2px rgba(223,91,56,0.55) !important; }
.pm-book__chapter + .pm-book__chapter::after { background:linear-gradient(180deg, transparent, rgba(18,59,66,0.16), rgba(223,91,56,0.45), rgba(18,59,66,0.16), transparent) !important; }
.pm-book__chapter.is-active::before { box-shadow:0 0 0 3px rgba(223,91,56,0.26), 0 0 14px rgba(223,91,56,0.55) !important; }
@keyframes pmBookPulse { 0%,100%{ box-shadow:0 0 0 3px rgba(223,91,56,0.26), 0 0 14px rgba(223,91,56,0.55);} 50%{ box-shadow:0 0 0 5px rgba(223,91,56,0.16), 0 0 24px rgba(245,215,130,1);} }
.pm-book__chapters { box-shadow: 0 0 0 1px rgba(18,59,66,0.28), 0 0 0 2px #ffffff, 0 0 0 3px rgba(223,91,56,0.28), inset 0 1px 0 rgba(255,255,255,1), 0 30px 60px -28px rgba(20,20,30,0.18), 0 8px 18px -8px rgba(20,20,30,0.10) !important; }
.pm-book-scroll__progress { background:rgba(223,91,56,0.10) !important; }
.pm-book-scroll__progress-fill { background:linear-gradient(90deg,#df5b38,#f1785c,#df5b38) !important; background-size:200% 100%; }
#pm-book .pm-ed__donut svg circle[stroke="#0E7C82"] { stroke:#df5b38 !important; }

/* ── 3b. THE BRIEF — PHONE DECK (`.pm-hww__*`, ≤760px) ─────────────────────
   Caleb 2026-08-04: the desktop booklet above has been themed since day one,
   but the PHONE deck that REPLACES it (`.pm-book-scroll` is display:none
   ≤760px) was never touched — chapter cards, the swipe hint, the dots and the
   two arrows all still wore base teal. Mirrors the desktop chapter map EXACTLY:
   Ch1 + Ch5 = primary, Ch2 = light, **Ch3 orange + Ch4 coral stay put** (same
   constant the desktop `--chapter-color` rules keep). Every card is covered.
   `--cc` is an INLINE style on each <article>, so these need !important to win
   — that is what repaints the head band, roman numeral, eyebrow, folio, row
   icons/numbers, card border and dashed foot in one go. */
.pm-hww__card[data-page="1"] { --cc:#df5b38 !important; }
.pm-hww__card[data-page="2"] { --cc:#f1785c !important; }
.pm-hww__card[data-page="5"] { --cc:#df5b38 !important; }
.pm-hww__h2 em { color:#df5b38 !important; }                       /* "One contract." */
.pm-hww__note b { color:#df5b38 !important; }                      /* "Swipe through the five chapters" */
.pm-hww__note svg { stroke:#df5b38 !important; }                   /* its tick — inline stroke attr */
.pm-hww__dots button.is-on { background:#df5b38 !important; }
.pm-hww__arrow { border-color:rgba(223,91,56,.40) !important; color:#df5b38 !important; }
.pm-hww__arrow:not([disabled]):active { background:rgba(223,91,56,.06) !important; border-color:#df5b38 !important; }
.pm-book__page-body .pm-ed__donut::after { background-image: radial-gradient(circle at 14% 20%, rgba(223,91,56,0.85) 0px, transparent 1.6px), radial-gradient(circle at 86% 22%, rgba(230,138,61,0.85) 0px, transparent 1.4px), radial-gradient(circle at 88% 80%, rgba(221,84,64,0.85) 0px, transparent 1.5px), radial-gradient(circle at 12% 78%, rgba(255,255,255,0.9) 0px, transparent 1.2px), radial-gradient(circle at 50% 6%, rgba(255,255,255,0.7) 0px, transparent 1px), radial-gradient(circle at 50% 96%, rgba(255,255,255,0.7) 0px, transparent 1px) !important; }
#pm-book .pm-ed__area[style*="#0E7C82"] { --area-color:#df5b38 !important; }
#pm-book .pm-ed__step[style*="#0E7C82"] { --step-color:#df5b38 !important; }
#pm-book .pm-ed__step[style*="#36A6A4"] { --step-color:#f1785c !important; }
#pm-book .pm-ed__journey::before { background:linear-gradient(to right, #df5b38 0%, #f1785c 30%, #E68A3D 65%, #DD5440 100%) !important; }
#pm-book .pm-ed__bar-fill[style*="#0E7C82"] { --bar-1:#df5b38 !important; --bar-2:#f1785c !important; }
#pm-book .pm-ed__plan-letter { box-shadow:0 0 0 1px rgba(14,23,33,0.06), 0 5px 14px -3px rgba(223,91,56,0.4) !important; }
#pm-book .pm-ed__scene-icon { background:linear-gradient(135deg, rgba(223,91,56,0.14) 0%, rgba(223,91,56,0.04) 100%) !important; border-color:rgba(223,91,56,0.22) !important; }
#pm-book .pm-ed__pillar:hover { box-shadow:0 24px 48px -16px rgba(223,91,56,0.45) !important; }

/* ── 4. "The waiting list is open." — pill, numbers, dots, trust icons + button */
.wlb__pill { color:#df5b38 !important; border-color:rgba(223,91,56,.32) !important; }
.wlb-spot__count b { color:#df5b38 !important; }
.wlb-spot__pips i.is-taken { background:linear-gradient(90deg,#df5b38,#f1785c) !important; box-shadow:0 1px 4px -1px rgba(223,91,56,.5) !important; }
.wlb-spot__pips i.is-next { background:rgba(223,91,56,.22) !important; }
.wlb__facts svg { stroke:#df5b38 !important; }
.wlb__row:focus-within { border-color:#df5b38 !important; box-shadow:0 0 0 3px rgba(223,91,56,.12) !important; }
@media (max-width:720px){ .wlb__row input:focus { border-color:#df5b38 !important; box-shadow:0 0 0 4px rgba(223,91,56,.14) !important; } }
.wlb__go { background:#df5b38 !important; }
.wlb__go:hover { background:#cf4720 !important; }

/* ── 5. WHO THIS FITS + LIMITLESS + its CTA + the tab/card greens ─────────── */
.pmfc-eyebrow { color:#df5b38 !important; }
.pmfc-title em { color:#df5b38 !important; }
.ckfs-title em { color:#df5b38 !important; }
@media (max-width:600px){ .ckfs-title em { color:#df5b38 !important; } }
.ckf-close__hire a { color:#df5b38 !important; border-bottom-color:rgba(223,91,56,.35) !important; }
/* PHONES (Caleb 2026-08-04): under 601px that same link is rendered as a full-
   width SOLID BUTTON (see index.html @media max-width:600.98px). It was still
   wearing the base coral #e56a45 while the rule above painted its label theme-
   coloured — theme text on orange. Give it the whole button: theme fill, white
   label, theme-tinted lift. Breakpoint must stay matched to index.html's. */
@media (max-width:600.98px){
  .ckf-close__hire a {
    background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
    color:#fff !important;
    box-shadow:0 16px 34px -16px rgba(223,91,56,.62), 0 2px 6px -2px rgba(207,71,32,.34), inset 0 1px 0 rgba(255,255,255,.28) !important;
  }
  .ckf-close__hire a:active { background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important; }
}
/* Caleb 2026-09-12: "please do all of these buttons now, all the 'Get more done with an
   assistant'." All eight are worked on — but not all eight the same way, and that is deliberate.
   These are TABS, not calls to action: fill all eight with the CTA gradient and the group stops
   saying which one is picked, which is the one job it has. So the SELECTED tab takes the full
   finish (gradient, coloured glow over a contact shadow, the inset highlight) and the other
   seven get a proper resting and hover state that previews it. The treatment is what marks the
   active one — which is exactly how it reads premium. Say the word and all eight can be filled. */
.pmfc-tab.is-on { border-color:#df5b38 !important; color:#fff !important;
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 8px 20px -6px rgba(223,91,56,.48), 0 2px 5px -2px rgba(207,71,32,.34),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
/* the seven that are not picked: a warmer hairline than the default slate, and a hover that
   shows where the fill is going without pretending to be selected */
.pmfc-tab:not(.is-on) { border-color:rgba(223,91,56,.28) !important; }
.pmfc-tab:not(.is-on):hover { border-color:rgba(223,91,56,.65) !important; color:#b13c19 !important;
  background:#fff2f0 !important;
  box-shadow:0 6px 16px -8px rgba(223,91,56,.30), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.pmfc-card[style*="#0E7C82"] { --pc:#df5b38 !important; }
.pmfc-card[style*="#36A6A4"] { --pc:#f1785c !important; }
.pmfc-chip { background:rgba(223,91,56,.12) !important; color:#df5b38 !important; }

/* ── 6. FEATURES — "Try every tool" explorer (js/landing-tools.js) ────────── */
/* section headline italic — "Our featured *education* tool." on phones / "Yours
   also gets *the platform.*" on desktop. Base is teal #0E7C82, set inside the
   STYLE string that landing-tools.js injects into <head>, so it needs the
   override here (Caleb 2026-08-04). */
.pmts-title em { color:#df5b38 !important; }
.pmts-rail__item.is-active { background:#df5b38 !important; box-shadow:0 12px 26px -12px rgba(223,91,56,.55) !important; }
.pmts-panel__chip { color:#df5b38 !important; background:rgba(223,91,56,.07) !important; border-color:rgba(223,91,56,.16) !important; }
.pmts-panel__demo { color:#df5b38 !important; border-bottom-color:rgba(223,91,56,.3) !important; }
.pmts-pv-asn__count { color:#df5b38 !important; background:rgba(223,91,56,.08) !important; }
.pmts-pv-asn__blank { border-bottom-color:rgba(223,91,56,.4) !important; color:#df5b38 !important; }
.pmts-pv-asn__caret { background:#df5b38 !important; }
.pmts-pv-asn__opt.is-picked { border-color:rgba(223,91,56,.55) !important; background:rgba(223,91,56,.05) !important; }
.pmts-pv-asn__opt.is-picked .pmts-pv-asn__radio { border-color:#df5b38 !important; }
.pmts-pv-asn__opt.is-picked .pmts-pv-asn__radio::after { background:#df5b38 !important; }
.pmts-pv-asn__save { color:#df5b38 !important; border-color:rgba(223,91,56,.25) !important; }

/* ── PREMIUM BUTTONS ── hero = theme gradient + soft glow; "Learn more" +
   waitlist = LIGHT theme by default, fill to solid on hover; service card border. */
.hero__btn { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important; color:#fff !important;
  box-shadow:0 12px 28px -8px rgba(223,91,56,.55), 0 2px 6px -2px rgba(207,71,32,.40), inset 0 1px 0 rgba(255,255,255,.30) !important; }
.hero__btn:hover { background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important; color:#fff !important;
  box-shadow:0 18px 40px -10px rgba(223,91,56,.70), inset 0 1px 0 rgba(255,255,255,.36) !important; }
/* Caleb 2026-09-12, after seeing the header pill: "now change all these buttons on the service,
   all 4, to be just like that." Same three ingredients as the hero and the header — a three-stop
   135° gradient, a coloured glow over a tight contact shadow, and the one-pixel inset highlight
   along the top edge. Scaled again for their size: these are the smallest of the three, so the
   glow is the smallest of the three. They were a pale tint that filled in on hover; now they are
   a finished object from the start, and the hover lifts rather than introduces. */
#pm-services .pmsvc-card__btn { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  color:#fff !important;
  box-shadow:0 7px 18px -6px rgba(223,91,56,.46), 0 2px 4px -2px rgba(207,71,32,.34),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
#pm-services .pmsvc-card__btn:hover { background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 26px -8px rgba(223,91,56,.60), inset 0 1px 0 rgba(255,255,255,.34) !important; }

/* Caleb 2026-09-12: "make this Join the waiting list the same as the top hero one." So it takes
   the hero's own numbers, not a scaled set — this button is the same size as the hero's and sits
   alone on a pale panel, which is exactly where the full glow belongs. */
.wlb__go { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 28px -8px rgba(223,91,56,.55), 0 2px 6px -2px rgba(207,71,32,.40),
             inset 0 1px 0 rgba(255,255,255,.30) !important; }
.wlb__go:hover { background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  color:#fff !important;
  box-shadow:0 18px 40px -10px rgba(223,91,56,.70), inset 0 1px 0 rgba(255,255,255,.36) !important; }
#pm-services .pmsvc-card { border-color:rgba(223,91,56,.45) !important; }
#pm-services .pmsvc-card:hover { border-color:#df5b38 !important; box-shadow:0 26px 54px -26px rgba(223,91,56,.38) !important; }

/* ── 7. CONNECTED REFINEMENTS (Caleb 2026-08-01) — leaks the old per-colour
   files missed; now defined once so ALL colours share them. ──────────────── */
/* (a) Who-This-Fits carousel: arrow circles + < > chevrons → theme; the dot
   you're ON → theme (others stay grey); white fill; soft hover. */
/* Caleb 2026-09-12: "do the two < and > buttons." Same three ingredients again, sized for a
   38px circle — the smallest thing to carry the finish, so the smallest glow of the set. The
   arrow goes white; the border becomes the deep tone rather than a tint, so the circle still
   has an edge against the pale panel behind it instead of bleeding into it.
   `[disabled]` keeps the existing .32 opacity: a disabled arrow that still glows would be
   lying about being pressable. */
.pmfc-arrow { border-color:#cf4720 !important; color:#fff !important;
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 6px 15px -5px rgba(223,91,56,.45), 0 1px 3px -1px rgba(207,71,32,.32),
             inset 0 1px 0 rgba(255,255,255,.26) !important; }
.pmfc-arrow:hover { border-color:#d84d27 !important; color:#fff !important;
  background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 10px 22px -7px rgba(223,91,56,.58), inset 0 1px 0 rgba(255,255,255,.32) !important; }
.pmfc-arrow[disabled] { box-shadow:none !important; }
.pmfc-dots button.is-on { background:#df5b38 !important; }
/* (b) closing line → theme. Caleb 2026-08-04: the WHOLE sentence is theme now,
   not just the italic tail — "One trusted adult who carries it with you" was
   still navy while "— not five strangers." went colour, which read as two
   different thoughts. One line, one colour; the italic keeps the emphasis. */
.pmwhat-close { color:#df5b38 !important; }
.pmwhat-close em { color:#df5b38 !important; }
/* (b2) the phone-only "One thread through it all" band under the hero — its
   eyebrow and the "Education, life skills, childcare & personal support" line
   both read `var(--teal)` (#178A62, a green) off the section root, so with the
   thread graphic gone this was the last green left in an otherwise themed
   phone page. One token, both lines. (Caleb 2026-08-04 — NOT specifically
   asked for; flagged to him. Revert = delete this rule.) */
.pmot-thread { --teal:#df5b38 !important; }
/* (c) italic accents "in your home." / "themselves." / "as they do." (base
   green #2F7D46) → theme. */
.ckfs-ct em { color:#df5b38 !important; }
/* (d) FEATURES explorer mint stage/rails → soft theme blush. */
.pmts-explorer { background:linear-gradient(180deg, rgba(223,91,56,.04) 0%, rgba(223,91,56,.07) 100%) !important; border-color:rgba(223,91,56,.12) !important; }
.pmts-panel__prev { background:linear-gradient(165deg, rgba(223,91,56,.05) 0%, rgba(223,91,56,.08) 60%, rgba(223,91,56,.11) 100%) !important; }
.pmts-rail { background:linear-gradient(180deg, rgba(223,91,56,.04) 0%, rgba(223,91,56,.07) 100%) !important; }
/* (e) the two BASE-coloured buttons that used to ignore the theme:
   the nav "Waiting List" pill (a.nav-cta beats shared.css) + the food-section
   "Get started" (.ckfs-cta). */
/* Caleb 2026-09-12: "the big hero Join the Waiting List button is very premium — I don't know
   why. Keep the SHAPE of the header Waiting List button but give it whatever premium quality
   this has." What the hero has, and this now has, is three things and only three:
     1. a 135° gradient in three stops — bright, primary, deep — so the fill is lit, not flat;
     2. a layered shadow: a wide COLOURED glow plus a tight dark contact shadow, which is what
        separates "floating" from "stuck on";
     3. `inset 0 1px 0 rgba(255,255,255,.30)` — a one-pixel white line along the top edge. This
        is the one that does the work: it reads as light catching a bevel, and it is why the
        hero button looks like an object instead of a rectangle.
   The numbers are scaled DOWN from the hero's: a hero-sized glow under a small header pill
   looks like a mistake. Same language, proportional amount.
   Geometry is deliberately untouched — no padding, radius, size or weight here. */
a.nav-cta { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 8px 20px -6px rgba(223,91,56,.50), 0 2px 5px -2px rgba(207,71,32,.38),
             inset 0 1px 0 rgba(255,255,255,.30) !important; }
a.nav-cta:hover { background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 12px 28px -8px rgba(223,91,56,.62), inset 0 1px 0 rgba(255,255,255,.36) !important;
  /* pm-nav.css also brightens on hover; on top of a brighter gradient that blows the top stop
     out to pink, so the gradient does the lift on its own here */
  filter:none !important; }
/* Caleb 2026-09-12: "do this Get started button." Same three ingredients, at hero scale —
   it is a hero-sized CTA sitting alone under a headline, which is where the full glow belongs. */
.ckfs-cta { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 28px -8px rgba(223,91,56,.55), 0 2px 6px -2px rgba(207,71,32,.40),
             inset 0 1px 0 rgba(255,255,255,.30) !important; }
.ckfs-cta:hover { background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  color:#fff !important;
  box-shadow:0 18px 40px -10px rgba(223,91,56,.70), inset 0 1px 0 rgba(255,255,255,.36) !important; }

/* ── 8. "What your Assistant actually does" (#pm-what · .pmws accordion) — had
   its OWN hard-coded pink; RE-DESIGNED to use the theme with real hierarchy:
   NAVY titles anchor each card · theme carries the subtitle · closed rows stay
   calm with a faintly-tinted + · the OPEN row is the focal "moment" (soft theme
   wash + themed label + filled × + theme shadow). Colour with depth, not flat. */
.pmwhat-title em { color:#df5b38 !important; }
.pmwhat-eyebrow { color:#df5b38 !important; }
/* 2026-09-12 — the whole sheet now uses ONE deep red, #BE123C. It was #BE185D, which leans
   magenta: Caleb spotted it first in the "every use case" heading ("like a cherry red, not the
   same red all the other colour theme parts have") and it was the last thing separating the two
   big CTAs from every button rebuilt today. Swept, hexes and the rgb pair the shadows mix from.
   2026-09-11 — the last two accents Caleb asked for. #BE123C throughout, so every
   accented phrase on the landing page resolves to exactly the same colour. */
#pm-services .pmsvc-eyebrow { color:#df5b38 !important; }
#pm-services .pmsvc-h2 em { color:#df5b38 !important; }
.reassure__title span { color:#df5b38 !important; }
#faq .faq-eyebrow { color:#df5b38 !important; }
#faq .faq-title em { color:#df5b38 !important; }
.pm-testi-light .pm-testi-h em { color:#df5b38 !important; }
.pmws__card { border-color:rgba(223,91,56,.30) !important; }
.pmws__ctitle { color:#123b42 !important; }                    /* strong navy anchor */
.pmws__csub { color:#df5b38 !important; }                        /* theme accent line  */
/* timeline variant bits (mobile) stay themed */
.pmws__no { color:#df5b38 !important; }
.pmws__dot { border-color:#df5b38 !important; box-shadow:0 0 0 3px rgba(223,91,56,.14) !important; }
.pmws__tl::before { background:#df5b38 !important; }
.pmws__arrow { border-color:rgba(223,91,56,.40) !important; color:#df5b38 !important; }
.pmws__dots button.is-on { background:#df5b38 !important; }
.pmws__head:focus-visible { outline-color:#df5b38 !important; }
/* PHONE CATEGORY TABS (Caleb 2026-08-04) — ≤720px the two cards collapse behind
   an "In the Session" / "The Off-Duty Strategy" switcher, and it was the one bit
   of this section still hard-navy while everything under it went theme. Desktop
   hides .pmws__tabs entirely, so these need no media query. The ACTIVE tab is
   the mobile stand-in for the desktop .pmws__csub accent — same theme colour. */
.pmws__tab { border-color:rgba(223,91,56,.26) !important; color:#123b42 !important; }
.pmws__tab[aria-pressed="true"] {
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  border-color:#df5b38 !important; color:#fff !important;
  box-shadow:0 12px 24px -12px rgba(223,91,56,.58), inset 0 1px 0 rgba(255,255,255,.26) !important;
}
/* CLOSED rows — calm: whisper outline + a faintly-tinted + circle. Hover lifts
   with a soft theme wash, deeper border, and the + turns theme. */
.pmws__head { border-color:rgba(223,91,56,.20) !important; }
.pmws__head:hover { border-color:rgba(223,91,56,.50) !important; background:rgba(223,91,56,.04) !important; }
.pmws__plus { border-color:rgba(223,91,56,.34) !important; background:rgba(223,91,56,.045) !important; }
.pmws__head:hover .pmws__plus { border-color:#df5b38 !important; }
.pmws__head:hover .pmws__plus::before,
.pmws__head:hover .pmws__plus::after { background:#df5b38 !important; }
/* OPEN row — the theme moment: soft wash, themed label + filled ×, theme shadow. */
.pmws__node.is-open { border-color:rgba(223,91,56,.30) !important;
  background:linear-gradient(180deg, rgba(223,91,56,.06) 0%, rgba(223,91,56,.02) 100%) !important;
  box-shadow:0 26px 50px -30px rgba(223,91,56,.38) !important; }
.pmws__node.is-open .pmws__head { border-color:transparent !important; background:transparent !important; }
.pmws__node.is-open .pmws__name { color:#df5b38 !important; }
/* Caleb 2026-09-12: "do these buttons, + and ×." Same three ingredients again, at the smallest
   size yet. The OPEN row's × takes the full finish — gradient, glow over a contact shadow, the
   inset highlight, and the mark itself goes white. The closed +es stay a quiet tint: eight
   glowing circles stacked down a column would read as eight alarms, and the whole point of this
   list is that one row is open. Their hover now previews the fill instead of only darkening a
   border, so every one of them is worked on without every one of them shouting. */
.pmws__node.is-open .pmws__plus { border-color:#cf4720 !important;
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 6px 14px -5px rgba(223,91,56,.48), 0 1px 3px -1px rgba(207,71,32,.32),
             inset 0 1px 0 rgba(255,255,255,.26) !important; }
.pmws__node.is-open .pmws__plus::before,
.pmws__node.is-open .pmws__plus::after { background:#ffffff !important; }
/* the closed ones: a real hover, still quiet */
.pmws__head:hover .pmws__plus { border-color:#df5b38 !important;
  background:linear-gradient(135deg,rgba(241,120,92,.16) 0%, rgba(223,91,56,.13) 100%) !important;
  box-shadow:0 4px 10px -4px rgba(223,91,56,.30), inset 0 1px 0 rgba(255,255,255,.65) !important; }
/* …and the OPEN one keeps its fill when you hover it. 2026-09-14, Caleb: "when i hover
   over The Transition, why does it look weird white the button with the x — it goes white
   that looks bad." The rule above is written for a CLOSED +, and it was landing on the
   open × too: both selectors carry three simple pieces and both are !important, so the
   later one simply won. Hovering the open row swapped its solid gradient for the closed
   state's 16% tint, leaving a white × on pale pink.
   Declared after it, so the open row lifts on hover instead of reverting — the hover
   stops, the same brighten every other button on this page uses. */
.pmws__node.is-open .pmws__head:hover .pmws__plus { border-color:#d84d27 !important;
  background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 9px 20px -6px rgba(223,91,56,.58), inset 0 1px 0 rgba(255,255,255,.32) !important; }
.pmws__node.is-open .pmws__head:hover .pmws__plus::before,
.pmws__node.is-open .pmws__head:hover .pmws__plus::after { background:#ffffff !important; }

/* ── 9. "An assistant for every use case" (.apx monday-style section) — the one
   themed accent in that otherwise-neutral light section: the "We don't play
   games" lead-in of the subtitle. ─────────────────────────────────────────── */
.apx__sub-a { color:#df5b38 !important; }
/* premium theme-connected .apx (2026-08-02): the category pills, open item, main
   card glow, CTA + dots all follow the theme colour. Base (green) = teal in index.html. */
.apx__item { border-color:rgba(223,91,56,.26) !important; }
.apx__item:hover:not(.is-open) { background:rgba(223,91,56,.05) !important; border-color:#df5b38 !important; box-shadow:0 6px 15px -8px rgba(223,91,56,.24) !important; }
.apx__item.is-open { border-color:rgba(223,91,56,.30) !important;
  background:linear-gradient(180deg,#fff 0%, rgba(223,91,56,.05) 100%) !important;
  box-shadow:0 16px 38px -18px rgba(223,91,56,.30) !important; }
.apx__item.is-open .apx__head-t { color:#df5b38 !important; }
.apx__card.is-c .apx__inner { box-shadow:0 30px 56px -26px rgba(223,91,56,.26) !important; border-color:rgba(223,91,56,.14) !important; }
.apx__cta--card { color:#df5b38 !important; border-color:#df5b38 !important; }
.apx__cta--card:hover { background:#df5b38 !important; color:#fff !important; box-shadow:0 12px 24px -12px rgba(223,91,56,.5) !important; }
.apx__dot.is-on { background:#df5b38 !important; }

/* ── 10. "Watch your kids do the work." — Homework Recorder showcase (.hx) ───
   The section's BASE look in index.html is the original monday purple and is
   left alone (green = untouched baseline, Caleb's revert point). Everything
   coloured in it reads from 5 vars on `.hx`, so overriding those recolours the
   right-hand preview panel, the selector card's input-box border, the little
   "family assistant" heart and the card/frame shadows; the section wash, the
   left rail tint + its two edge fades and the stage shadow are re-tinted just
   below (their base values are literal purple greys). ────────────────────── */
/* 2026-09-12 — "Watch a real session" already had the full recipe; it is one of the two buttons
   the rest of the page was modelled on. What it still carried was the OLD deep stop, #BE123C, the
   magenta-leaning cherry every other button moved off earlier today. Brought onto #BE123C so the
   page has exactly one deep red. Same for the rgb pair the shadows are mixed from. */
.hx { --hx-p:#df5b38 !important; --hx-d:#cf4720 !important; --hx-l:#f1785c !important;
      --hx-rgb:223,91,56 !important; --hx-drgb:207,71,32 !important; }
.hx { background:linear-gradient(0deg,rgba(223,91,56,.045),rgba(223,91,56,.045)),#fff !important; }
.hx-stage { box-shadow:0 26px 58px -40px rgba(207,71,32,.34),0 4px 18px -6px rgba(30,34,72,.12) !important; }
/* Caleb 2026-09-10: the old 44/100/-44 shadow reached ~100px BELOW the card, past the section's
   own edge and into the schools marquee — the coloured haze he kept seeing under the logos was
   this, not a background. Pulled in so the glow stays inside its own section on every colour. */
/* rail tint + fades: the fade layers the same tint over a white fade, so it
   lands on the rail's exact colour without a per-colour opaque token. */
.hx-left { background:linear-gradient(0deg,rgba(223,91,56,.075),rgba(223,91,56,.075)),#fff !important; }
.hx-left::before { background:linear-gradient(180deg,rgba(223,91,56,.075),rgba(223,91,56,0)),linear-gradient(180deg,#fff,rgba(255,255,255,0)) !important; }
.hx-left::after { background:linear-gradient(0deg,rgba(223,91,56,.075),rgba(223,91,56,0)),linear-gradient(0deg,#fff,rgba(255,255,255,0)) !important; }

/* ── §11. CLOSING CTA (#pmFinalCta) — the "Join the Waiting List" button under
   the arc of faces. Base (green) keeps its original orange; every colour skin
   gives it the same gradient + glow treatment as the hero button. ────────── */
/* Caleb 2026-09-12: "'Share your experience' — make this the premium button design we are doing
   as well, and wire it to the theme colour and font." It was a white ghost button with a grey
   hairline, the last unthemed control on the page. Colour here; the FACE is wired separately in
   index.html to --pmt-ui so it follows the type skin too. Sized like the service buttons, which
   it matches for height. */
.pm-testi-share__btn { border-color:#cf4720 !important; color:#fff !important;
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 7px 18px -6px rgba(223,91,56,.46), 0 2px 4px -2px rgba(207,71,32,.34),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
.pm-testi-share__btn:hover { border-color:#d84d27 !important; color:#fff !important;
  background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 12px 26px -8px rgba(223,91,56,.60), inset 0 1px 0 rgba(255,255,255,.34) !important; }

.pm-final-cta__btn { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important; color:#fff !important;
  box-shadow:0 12px 28px -8px rgba(223,91,56,.55), 0 2px 6px -2px rgba(207,71,32,.40), inset 0 1px 0 rgba(255,255,255,.30) !important; }
.pm-final-cta__btn:hover { background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important; color:#fff !important;
  box-shadow:0 18px 40px -10px rgba(223,91,56,.70), inset 0 1px 0 rgba(255,255,255,.36) !important; }

/* ── §12. FAQ (#faq) — everything EXCEPT the "Frequently Asked Questions"
   heading, which stays ink on every colour: the small FAQ kicker, the numbered
   badge (rest / hover / open), the question text, the + that twists, and a
   whisper-thin wash on the open row. ─────────────────────────────────────── */
#faq .faq-eyebrow { color:#df5b38 !important; }
.faq-badge { background:rgba(223,91,56,.07) !important; color:#cf4720 !important; }
.faq-btn:hover .faq-badge { background:rgba(223,91,56,.16) !important; color:#df5b38 !important;
  box-shadow:0 8px 18px -10px rgba(223,91,56,.55) !important; }
.faq-btn:hover .faq-question { color:#df5b38 !important; }
.faq-btn:hover .faq-toggle svg { stroke:#df5b38 !important; }
.faq-row.open .faq-badge { background:linear-gradient(135deg,#f1785c 0%,#df5b38 55%,#cf4720 100%) !important; color:#fff !important;
  box-shadow:0 12px 26px -12px rgba(223,91,56,.60) !important; }
.faq-row.open .faq-question { color:#df5b38 !important; }
.faq-row.open .faq-toggle svg { stroke:#df5b38 !important; }
.faq-row.open { background:linear-gradient(90deg,rgba(223,91,56,.05),rgba(223,91,56,0) 62%) !important; }
.faq-row:hover { background:linear-gradient(90deg,rgba(223,91,56,.03),rgba(223,91,56,0) 62%) !important; }
/* 2026-08-03 — "Show all questions" expander (only 5 questions show at rest).
   Caleb asked for it clean, thin and light, with the ring "connected to the
   colour": so the border carries a soft tint of the theme AT REST (not only on
   hover), the count is plain theme-coloured type rather than a filled chip, and
   the label stays quiet ink at weight 500. No shadow, no lift — thin ring only. */
.faq-more { border-color:rgba(223,91,56,.26) !important; }
.faq-more:hover { border-color:rgba(223,91,56,.55) !important; background:rgba(223,91,56,.028) !important; }
.faq-more__n { color:#df5b38 !important; }
.faq-more:hover .faq-more__chev { color:#df5b38 !important; }
.faq-more:focus-visible { outline-color:#df5b38 !important; }

/* ── §12b. "Skip gallery" pill (#sp-skip, the Real Moments gallery) ─────────
   2026-08-03 — was a white ghost button on a white card and nobody saw it. It
   is now a solid pill in the theme's hero-button gradient, with the attention
   halo tinted to match. Motion + shape live in index.html next to the button;
   only colour is themed here. ─────────────────────────────────────────────── */
#sp-skip { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 10px 26px -10px rgba(223,91,56,.70), 0 2px 6px -2px rgba(207,71,32,.30),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
#sp-skip:hover { background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 16px 34px -12px rgba(223,91,56,.85),
             inset 0 1px 0 rgba(255,255,255,.34) !important; }
#sp-skip::after { border-color:rgba(223,91,56,.55) !important; }

/* ── §13. FAMILY JOURNEY MAP (#pmFamilyMap) — the chrome AROUND the map only.
   The pins and the category dots keep their fixed meanings (orange = activities,
   blue = educational, green = support, red HOME, teal ASSISTANT); recolouring
   those would break the legend. Themed: the section kicker, the mode toggle's
   active pill, the three headline numbers, the family avatar tile, the search
   focus ring and the zoom control's hover. ─────────────────────────────────── */
#pmFamilyMap .lm-eyebrow { color:#df5b38 !important; }
/* 2026-09-11 — the accented half of the headline follows the picker, the same
   way .asx__heading em does. Caleb: "make this colour theme wired: before you
   sign up … and make sure actually happen. is also." */
#pmFamilyMap .lm-title em { color:#df5b38 !important; }   /* #cf4720, to match .asx__heading em */
/* Caleb 2026-09-12: "also the one selected item in Family Journey." The selected half of a
   two-way switch, so it takes the finish the way the picked tab and the open accordion row
   do — it is the thing marking a choice. Its partner stays plain, which is the whole point. */
#pmFamilyMap .lm-toggle__btn.is-active { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important; color:#fff !important;
  box-shadow:0 7px 17px -6px rgba(223,91,56,.48), 0 2px 4px -2px rgba(207,71,32,.34),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
#pmFamilyMap .lm-ostats b { color:#df5b38 !important; }
/* 2026-09-10 — the family panel's avatar is the real PM logo now, not a monogram, so no skin
   tints its tile (Caleb: "remove the PM green and put the real logo there"). */
#pmFamilyMap .lm-search:focus { border-color:#df5b38 !important; box-shadow:0 0 0 3px rgba(223,91,56,.14) !important; }
#pmFamilyMap .leaflet-control-zoom a:hover { color:#df5b38 !important; }

/* ── §14. INTERACTIVE DEMO (#pmInteractiveDemo) — the section's own chrome, not
   the dashboard inside it. The replica is meant to read as the REAL product, so
   its sidebar, badges and status colours stay exactly as the app ships; only the
   parts that belong to the landing page follow the picker: the eyebrow's
   gradient wordmark and the "open the dashboard" button (fill + glow). ─────── */
#pmInteractiveDemo .pmdemo-head__title em { color:#df5b38 !important; }   /* #cf4720, to match .asx__heading em */

/* ── §15. PHOTO ARCHIVE (#spotlight) — the lead half of the eyebrow and the
   second sentence of the headline, nothing else. The archive's own frame,
   rules and captions stay neutral: it is a museum wall, not an accent. ─── */
#spotlight .sp-archive-mark--lead { color:#df5b38 !important; }
#spotlight .sp-title em { color:#df5b38 !important; }
#pmInteractiveDemo .pmdemo-head__eyebrow { background:linear-gradient(90deg,#f1785c 0%,#df5b38 55%,#cf4720 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important; }
/* --pmdemo-cta-ink is read by the play triangle inside the button, so the white
   disc's arrowhead matches whatever colour the pill is. */
/* Caleb 2026-09-12 asked for this one; it already had the finish — it is one of the page's
   original gradient CTAs. Two things did differ and are now in line with everything else: its
   mid-stop sat at 60% where every other button uses 52% (enough to read as a slightly different
   red beside them), and its hover only grew the shadow instead of also lifting the gradient. */
#pmInteractiveDemo .pmdemo-cta__button { --pmdemo-cta-ink:#df5b38;
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 16px 36px -10px rgba(223,91,56,.65),0 0 0 6px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.30) !important; }
#pmInteractiveDemo .pmdemo-cta__button:hover { --pmdemo-cta-ink:#e75e3b;
  background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 24px 56px -10px rgba(223,91,56,.75),0 0 0 6px rgba(255,255,255,.24),inset 0 1px 0 rgba(255,255,255,.34) !important; }
/* "plus do the one Parent account that's selected there" — same control, same treatment. */
#pmInteractiveDemo .pmdemo-viewpick__opt.is-active { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important; color:#fff !important;
  box-shadow:0 7px 17px -6px rgba(223,91,56,.48), 0 2px 4px -2px rgba(207,71,32,.34),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
/* 2026-09-11 — the ring + halo around the preview frame NO LONGER follows the
   picker, and no longer exists. Caleb, against the mockup: "the border is
   supposed to look like this also you made it all red and color theme here it
   doesnt look like that". A real window on a light page is a hairline and a
   soft shadow, not a coloured edge, so the frame is now neutral on every skin
   (js/landing-demo.js owns it). The button and the eyebrow above still follow
   the picker — those he asked for. Do not reinstate this block without him. */

/* ── 11. "An assistant for every use case" (.asx) — Caleb 2026-09-10 ─────────
   Same trick as .hx above: everything coloured in that section reads from five
   vars on `.asx`, so overriding those recolours the whole thing — eyebrow, the
   note card, the info badge, the active pill, the tag and the progress dots.
   The verified tick stays #3B82F6 on every skin: it is a "verified" mark, not
   an accent, and a red or gold tick would read as a warning.
   Caleb on the category buttons: "i dont want it overdone but i want it nicely
   connected" — so the pills stay white with a tinted hairline, and only the
   chosen one carries colour. ─────────────────────────────────────────────── */
.asx { --asx-teal:#df5b38 !important; --asx-teal-d:#cf4720 !important;   /* 2026-09-12: was #BE123C, a magenta-leaning cherry that read as a different red beside #E11D48; #BE123C is the true deepened rose the consoles use */
       --asx-mint:#fff2f0 !important; --asx-line:rgba(223,91,56,.20) !important; }
.asx { background:radial-gradient(circle at 72% 18%,rgba(223,91,56,.055),transparent 28%),#fff !important; }

/* category pills — restraint on the seven, colour on the one */
.asx__cat { border-color:rgba(223,91,56,.26) !important; }
.asx__cat:hover:not(.is-on) { background:rgba(223,91,56,.05) !important; border-color:#df5b38 !important;
  box-shadow:0 6px 15px -8px rgba(223,91,56,.26) !important; }
/* the one of seven that is picked. It is a wide row, not a button, so it does NOT take the
   full fill — a 300px block of gradient down the side of the page would swamp the card it is
   pointing at. It gets the finish's language at row scale instead: the same lit top edge, a
   real coloured lift underneath, and its own little + marked the way the accordion's × is. */
/* 2026-09-14 — the selected category is a filled button now, like every other
   selected control on this page. It used to be white fading to a 9% tint with a
   deep-red label: Caleb, on a screenshot of it, "where is the button selected, not
   full nice premium button?"

   AND THE PART THAT WAS MY FAULT. An hour earlier I gave .asx__cat.is-on:hover the
   full gradient without touching the label, which was still #cf4720. Hovering the
   selected row therefore painted red text on a red fill — unreadable. Caleb, on the
   next screenshot: "when i hover why is the button red and the text red, isnt it
   supposed to be red and white text. this seems like a miss." It was. The label and
   the mark are handled here and in the hover rule below, together, so the two can
   never drift apart again. */
.asx__cat.is-on { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  border-color:#cf4720 !important;
  box-shadow:0 12px 28px -10px rgba(223,91,56,.52), 0 2px 5px -2px rgba(207,71,32,.34),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
.asx__cat.is-on .asx__catname { color:#fff !important; }
/* inverted: a red disc on a red row disappears, so the mark becomes white-on-accent */
/* 2026-09-14, third pass, and Caleb's answer is better than either of mine.
   "the X inside should be white and there should be like a premium darker red
   kinda thing like the (i) has. i thought we had it like that before, it was very
   nice."

   He is describing .asx__badge — the (i) — which is a gradient disc with a WHITE
   mark, and it is the page's own language for a small round control. My first cut
   kept that language and failed for one reason: the disc was the SAME red as the
   row, so it vanished. My second cut fixed the vanishing by inverting to a white
   disc, which solved visibility and lost the language.

   Darker is the answer to both. The disc keeps the (i)'s shape, its white mark and
   its layered shadow, and drops well below the row's bright fill so it separates
   without inverting. A white hairline rim gives it a defined edge on the red.
   color-mix does the darkening from #cf4720 so it follows every palette; the flat
   #cf4720 above it is the fallback where color-mix is unavailable. */
/* 2026-09-14, and this is the one. Caleb: "that dark red is not it … its supposed
   to be lighter, the circle around the X looks weird. i want premium high end."

   Three attempts before this, and each failed for a reason worth keeping:
     same red as the row   — vanished
     solid white           — visible, but a sticker punched into the button
     darker red            — visible and separate, but heavy and muddy at size

   All three treated the disc as a solid object that had to out-shout the fill.
   It should not be solid at all. A light translucent token — white at 18% with a
   brighter rim and an inset highlight along its top edge — lets the fill show
   through, so the disc belongs to the button instead of sitting on top of it.
   That is the treatment every high-end product uses for a glyph on a coloured
   button, and it is the only one of the four that needs no colour of its own:
   it works on all 13 palettes because it is made of the fill underneath. */
.asx__cat.is-on .asx__plus { border:1px solid rgba(255,255,255,.42) !important;
  color:#fff !important;
  background:rgba(255,255,255,.18) !important;
  -webkit-backdrop-filter:saturate(1.2) blur(2px) !important;
  backdrop-filter:saturate(1.2) blur(2px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50), 0 1px 2px rgba(12,20,30,.12) !important; }

/* The × is two ::before/::after bars painted with `background`, not currentColor, so setting
   `color` on the disc never reached them. The base sheet hard-codes them to #0E7C82 — this
   section's original teal — whenever the row is open, which is why the mark measured as
   rgb(14,124,130) no matter what the disc was doing. Painted white here, to sit on the dark
   red disc above. */
.asx__cat.is-on .asx__plus::before,
.asx__cat.is-on .asx__plus::after { background:#ffffff !important; }

/* the note card and its info badge */
.asx__note { background:linear-gradient(135deg,rgba(223,91,56,.075),rgba(223,91,56,.035)) !important;
  border-color:rgba(223,91,56,.16) !important; }
/* Caleb 2026-09-12: "also do the (i) in the corner." 28px, the smallest circle on the page, so
   the smallest glow of the set. The "i" is a real text character here — not a pseudo-element bar
   like the × was — so `color` reaches it and it simply goes white.
   Its hover and open states hard-code rgba(14,124,130,…) in the base sheet — the same teal that
   was hiding in the × — which would have flashed a green ring the moment the circle went red.
   Both overridden; checked rather than assumed, after the × taught that lesson an hour ago. */
.asx__badge { border-color:#cf4720 !important; color:#fff !important;
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 5px 12px -4px rgba(223,91,56,.45), 0 1px 3px -1px rgba(207,71,32,.30),
             inset 0 1px 0 rgba(255,255,255,.26) !important; }
.asx__badge:hover,
.asx__badge[aria-expanded="true"] { border-color:#d84d27 !important; color:#fff !important;
  background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 9px 20px -6px rgba(223,91,56,.58), 0 0 0 4px rgba(223,91,56,.12),
             inset 0 1px 0 rgba(255,255,255,.32) !important; }
.asx__badge:focus-visible { outline-color:#df5b38 !important; }

/* the carousel's progress dots */
.asx__dot { background:rgba(223,91,56,.18) !important; }
.asx__dot.is-on { background:rgba(223,91,56,.22) !important; }
.asx__fill { background:#df5b38 !important; }
/* the < > pair in this section — 50px circles, so the glow sits between the 38px carousel
   arrows and the header pill. The mark goes white and the border takes the deep tone so the
   circle keeps an edge against the white card behind it. */
.asx__arrow { border-color:#cf4720 !important; color:#fff !important;
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 7px 17px -6px rgba(223,91,56,.46), 0 1px 3px -1px rgba(207,71,32,.32),
             inset 0 1px 0 rgba(255,255,255,.26) !important; }
.asx__arrow:hover { border-color:#d84d27 !important; color:#fff !important;
  background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 11px 24px -7px rgba(223,91,56,.60), inset 0 1px 0 rgba(255,255,255,.32) !important; }
.asx__arrow[disabled] { box-shadow:none !important; }

/* "View Assistants" — the same recipe as "Watch a real session" so the page's
   two big buttons are one design in every colour */
/* Same story: "View Assistants" was already built to this recipe — these two were the template
   the hero and everything since copied. Only the deep stop and its shadow mix move to #BE123C.
   The hover also gains the brighter gradient the rest of the page got, so it lifts the same way. */
.asx-cta__btn { background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 14px 32px -10px rgba(223,91,56,.55),0 2px 6px -2px rgba(207,71,32,.38),
    inset 0 1px 0 rgba(255,255,255,.42) !important; }
.asx-cta__btn:hover { background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 18px 38px -12px rgba(223,91,56,.62),0 3px 8px -2px rgba(207,71,32,.42),
    inset 0 1px 0 rgba(255,255,255,.5) !important; }

/* ── FOOTER — link colour follows the picker (Caleb 2026-08-06) ─────────────
   One variable, set once. css/footer.css reads
   `var(--pm-footer-accent, var(--brand, #2563EB))` for every hover colour and
   for the wipe-in rule under each link, so this single line themes the whole
   footer — the four link columns and the legal row — without restating a rule.

   Deliberately NOT themed: the tagline and the © line stay quiet grey, and the
   "Soon" entries stay muted with no hover at all. A footer where everything
   lights up reads cheap; the restraint is what makes the accent land. ─────── */
footer {
  --pm-footer-accent: #df5b38 !important;   /* hover / underline  */
  --pm-footer-soft:   #fff2f0 !important;   /* hairline + wash    */
}

/* ── SWITCH CONTROLS: the SELECTED one lifts on hover (2026-09-14) ───────────
   Caleb: "when i hover over this button and click it, it doesnt have that premium
   hover or select like the other Share your experience … i found alot of buttons
   dont have that."

   Measured before writing this. All four of these DID get the full finish on their
   selected half on 2026-09-12 — gradient, glow, inset highlight. What none of them
   got was a HOVER on that selected half:

       Parent / Child account      1 hover rule,  no finish
       Family Journey toggle       0 hover rules, nothing at all
       Who this fits tabs          2 hover rules, both :not(.is-on)
       Every use case categories   2 hover rules, both :not(.is-on)

   Every one of those hover rules was written for the UNSELECTED half and explicitly
   excludes the selected one, so the button you have actually chosen is the only
   thing on the page that does not respond to the pointer. Against "Share your
   experience" and the hero CTA, which both brighten, it reads as dead.

   The same three ingredients as every other hover on this page: the hover STOPS,
   a wider glow, the inset kept. Geometry untouched — nothing moves, it only lifts.

   The unselected halves are deliberately NOT given this. That was settled on
   2026-09-12 and the reasoning holds: fill all nine and the group stops saying
   which one is picked, which is its only job. Their existing quiet hover stays. */
#pmInteractiveDemo .pmdemo-viewpick__opt.is-active:hover,
#pmFamilyMap .lm-toggle__btn.is-active:hover,
.pmfc-tab.is-on:hover,
#asx-section .asx__cat.is-on:hover .asx__catname{ color:#fff !important; }
#asx-section .asx__cat.is-on:hover{
  background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 12px 26px -8px rgba(223,91,56,.60), inset 0 1px 0 rgba(255,255,255,.34) !important;
  border-color:#d84d27 !important;
}
/* NO hover on the map toggle's empty half — removed 2026-09-14, and it was mine.
   When I gave these controls their selected-hover I also noticed the map toggle had
   no hover of any kind and "fixed" that too, tinting the unselected half pink. Caleb
   compared it against Parent account / Child account, which is the same control
   built the same way: "the hover for Family Journey / Assistants Near You shows red
   in the empty, but the other one shows nothing which is better. please make the
   same button and hover and everything the same."

   He is right and the demo toggle was the correct model all along. In a two-state
   switch the empty half is not a button waiting to be admired — it is the other
   option, and lighting it up competes with the half that is actually chosen. The
   two are now identical in every state: selected fill, selected hover lift, and
   nothing on the empty half. */

/* ── THE BOOKLET, finished (2026-09-14) ─────────────────────────────────────
   Caleb: "you didnt do the buttons in the booklet i noticed … do it cleanly and
   iterate until its right. also make sure the buttons match, even the < > buttons."

   The Brief appeared in the Söhne skin exactly once — a desktop rule covering
   __title, __cover-title and __page-title — so those three sat at 500 and the
   other 23 parts kept whatever weight they had. The 549-element audit was
   generated off the phone page and never reached this section at all.

   These four are the only ones off the audit's own rule (bold 600+ at 13px and up
   becomes 500; small UI bold becomes 400). Not new values — the same rule applied
   to the part of the page it missed. */
.pm-book__chapter-title{ font-weight:500 !important; }   /* 600 @ 14px */
.pm-book__eyebrow,
.pm-book__page-folio,
.pm-book__pager-status{ font-weight:400 !important; }    /* 600 @ 11px, small UI */

/* The pager. Prev/Next were plain white with no shadow and no hover of any kind —
   the only navigation on the page that did not answer the pointer. Same three
   ingredients as every other button here, sized for a small control. Disabled
   keeps its flat state: a dead arrow that glows is lying about being pressable. */
.pm-book__pager-btn:not([disabled]){
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  border-color:#cf4720 !important; color:#fff !important;
  box-shadow:0 6px 15px -5px rgba(223,91,56,.45), 0 1px 3px -1px rgba(207,71,32,.32),
             inset 0 1px 0 rgba(255,255,255,.26) !important; }
.pm-book__pager-btn:not([disabled]):hover{
  background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 10px 22px -7px rgba(223,91,56,.58), inset 0 1px 0 rgba(255,255,255,.32) !important; }
.pm-book__pager-btn[disabled]{ box-shadow:none !important; }

/* ── THE BOOKLET'S ARROWS (2026-09-14) ──────────────────────────────────────
   Caleb: "the buttons < > i dont see they look like in photo 2 … the booklet isnt
   having it? i thought the booklet will have the same."

   He is comparing them against .pmfc-arrow and .asx__arrow, which took the finish
   on 2026-09-12 and are filled. The Brief's own arrows are different elements and
   were never in that sweep:

       .pm-ed__jarrow   step arrows inside a chapter    transparent, no shadow
       .pm-hww__arrow   chapter-to-chapter arrows       30% wash, no shadow

   They are also invisible on page load — the booklet opens closed, so a scan of
   the page never sees them. That is why they were missed twice: once on 2026-09-12,
   and again when I "finished the booklet" an hour ago and styled .pm-book__pager-btn
   instead, which is the Prev/Next text control, not these circles.

   Same recipe as .pmfc-arrow exactly, not a new one. [disabled] keeps its flat
   state, like every other disabled arrow here. */
.pm-ed__jarrow:not([disabled]),
.pm-hww__arrow:not([disabled]) { border-color:#cf4720 !important; color:#fff !important;
  background:linear-gradient(135deg,#f1785c 0%,#df5b38 52%,#cf4720 100%) !important;
  box-shadow:0 6px 15px -5px rgba(223,91,56,.45), 0 1px 3px -1px rgba(207,71,32,.32),
             inset 0 1px 0 rgba(255,255,255,.26) !important; }
.pm-ed__jarrow:not([disabled]):hover,
.pm-hww__arrow:not([disabled]):hover { border-color:#d84d27 !important; color:#fff !important;
  background:linear-gradient(135deg,#f88e77 0%,#e75e3b 52%,#d84d27 100%) !important;
  box-shadow:0 10px 22px -7px rgba(223,91,56,.58), inset 0 1px 0 rgba(255,255,255,.32) !important; }
.pm-ed__jarrow[disabled], .pm-hww__arrow[disabled] { box-shadow:none !important; }
.pm-ed__jarrow svg, .pm-hww__arrow svg { stroke:currentColor !important; }

/* ── FULL AUDIT OF EVERY CONTROL (2026-09-14) ───────────────────────────────
   Caleb: "if we keep having this same problem i want you to audit everything and
   fix everything, im tired of finding it."

   Opened every chapter, accordion, FAQ row, category and tab first — the last
   three misses were all things that do not exist in the DOM until you click
   something — then walked all 408 buttons and links on the page and compared each
   class against the themed rules the skin actually defines. 41 control groups.

   THE GOOD NEWS: nothing is dead. Every single one already has SOME hover, so
   there is no repeat of the accordion × or the map toggle. What the audit found is
   narrower and more specific — controls whose hover exists but is NOT themed,
   sitting beside siblings whose hover is.

   FIXED HERE, and only these:

     .pm-ed__area / __step / __plan / __scene — the four clickable card types
     inside The Brief's chapters. Their fifth sibling, .pm-ed__pillar, has had a
     themed hover all along; these four never did. Five card types in one component,
     one of them different, which is exactly the kind of thing Caleb keeps catching.
     They take the pillar's own rule, not a new one.

     .asx__dot — the category carousel's dots. Themed at rest and themed when
     selected, but no themed hover, so the one thing you aim at did not answer.

   DELIBERATELY LEFT ALONE, so this is not re-litigated later. These carry no
   themed rule because they should not: .pm-book__close and .pmdemo-close (close
   buttons stay neutral), .leaflet-control-zoom-in/out (Leaflet's own chrome),
   .pm-fab__btn (the chat bubble is its own system), .pmlang__btn (the flag),
   .pm-testi-card (a card, not a button), and everything inside #pmEdit, which was
   locked to Söhne on purpose earlier today. */
#pm-book .pm-ed__area:hover,
#pm-book .pm-ed__step:hover,
#pm-book .pm-ed__plan:hover,
#pm-book .pm-ed__scene:hover { box-shadow:0 24px 48px -16px rgba(223,91,56,0.45) !important; }

.asx__dot:hover { background:rgba(223,91,56,.55) !important; }
.asx__dot.is-on:hover { background:#df5b38 !important; }