/* build-fingerprint 084583514f412e93 — 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: STRIPE BLURPLE (stripe.com — #533AFD, inks in the extra layer) */

/* ============================================================================
   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): STRIPE BLURPLE (stripe.com — #533AFD, inks in the extra layer) #533AFD=primary #4B34E6=deep/hover
   #7389FF=light #A5B0FF=lighter #E8E9FF=soft-bg 83,58,253=primary r,g,b
   75,52,230=deep r,g,b  #4B34E6=ACCENT TEXT — every eyebrow and every title's second sentence
   (2026-09-11: Rose wants its bright red here, the others keep their deep)  #f8fafd#eef2f9#e3ecf7=reassure band  #7389FF#533AFD#4B34E6=hero
   gradient stops  #8496FF#5F48FF#5540EA=hero hover stops  #E8E9FF=light-button
   bg  #533AFD=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:#533AFD; --pmm-link-deep:#4B34E6;
  /* 2026-09-14 — #4B34E6 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:#4B34E6; }

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

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

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

/* ── 3. THE BRIEF (booklet) — every teal accent → theme, keep orange/coral ─── */
#pm-book { --teal:#533AFD !important; --teal-2:#7389FF !important; --teal-3:#A5B0FF !important; --teal-soft:#E8E9FF !important; }
.pm-book__chapter[data-chapter="1"], .pm-book__page[data-page="1"] { --chapter-color:#533AFD !important; }
.pm-book__chapter[data-chapter="2"], .pm-book__page[data-page="2"] { --chapter-color:#7389FF !important; }
.pm-book__chapter[data-chapter="5"], .pm-book__page[data-page="5"] { --chapter-color:#533AFD !important; }
.pm-book__chapter:hover { background:rgba(83,58,253,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. */
/* 2026-09-14 — .is-sweep shares this EXACT treatment. The intro sweep on the
   chapter rail used to borrow a weaker rule from index.html, and Caleb saw the
   difference immediately: "i want this red to do the animation, not that weak
   border you showed." The real selected chapter is this saturated gradient with
   white type, and it is defined HERE, per skin, with !important — so the sweep
   has to be named here too or it can never match it. */
.pm-book__chapter.is-active,
.pm-book__chapter.is-sweep {
  color:#fff !important;
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 10px 24px -8px rgba(83,58,253,.52), 0 2px 5px -2px rgba(75,52,230,.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,
.pm-book__chapter.is-sweep .pm-book__chapter-title,
.pm-book__chapter.is-sweep .pm-book__chapter-sub,
.pm-book__chapter.is-sweep .pm-book__chapter-roman,
.pm-book__chapter.is-sweep .pm-book__chapter-num{ color:#fff !important; }
.pm-book__chapter.is-active .pm-book__chapter-sub,
.pm-book__chapter.is-sweep .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,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 14px 30px -8px rgba(83,58,253,.62), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.pm-book__chapter:hover .pm-book__chapter-num { color:#533AFD !important; }   /* active's numeral is white, set above */
.pm-book__chapter:focus-visible { box-shadow:inset 0 0 0 2px rgba(83,58,253,0.55) !important; }
.pm-book__chapter + .pm-book__chapter::after { background:linear-gradient(180deg, transparent, rgba(18,59,66,0.16), rgba(83,58,253,0.45), rgba(18,59,66,0.16), transparent) !important; }
.pm-book__chapter.is-active::before { box-shadow:0 0 0 3px rgba(83,58,253,0.26), 0 0 14px rgba(83,58,253,0.55) !important; }
@keyframes pmBookPulse { 0%,100%{ box-shadow:0 0 0 3px rgba(83,58,253,0.26), 0 0 14px rgba(83,58,253,0.55);} 50%{ box-shadow:0 0 0 5px rgba(83,58,253,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(83,58,253,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(83,58,253,0.10) !important; }
.pm-book-scroll__progress-fill { background:linear-gradient(90deg,#533AFD,#7389FF,#533AFD) !important; background-size:200% 100%; }
#pm-book .pm-ed__donut svg circle[stroke="#0E7C82"] { stroke:#533AFD !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:#533AFD !important; }
.pm-hww__card[data-page="2"] { --cc:#7389FF !important; }
.pm-hww__card[data-page="5"] { --cc:#533AFD !important; }
.pm-hww__h2 em { color:#533AFD !important; }                       /* "One contract." */
.pm-hww__note b { color:#533AFD !important; }                      /* "Swipe through the five chapters" */
.pm-hww__note svg { stroke:#533AFD !important; }                   /* its tick — inline stroke attr */
.pm-hww__dots button.is-on { background:#533AFD !important; }
.pm-hww__arrow { border-color:rgba(83,58,253,.40) !important; color:#533AFD !important; }
.pm-hww__arrow:not([disabled]):active { background:rgba(83,58,253,.06) !important; border-color:#533AFD !important; }
.pm-book__page-body .pm-ed__donut::after { background-image: radial-gradient(circle at 14% 20%, rgba(83,58,253,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:#533AFD !important; }
#pm-book .pm-ed__step[style*="#0E7C82"] { --step-color:#533AFD !important; }
#pm-book .pm-ed__step[style*="#36A6A4"] { --step-color:#7389FF !important; }
#pm-book .pm-ed__journey::before { background:linear-gradient(to right, #533AFD 0%, #7389FF 30%, #E68A3D 65%, #DD5440 100%) !important; }
#pm-book .pm-ed__bar-fill[style*="#0E7C82"] { --bar-1:#533AFD !important; --bar-2:#7389FF !important; }
#pm-book .pm-ed__plan-letter { box-shadow:0 0 0 1px rgba(14,23,33,0.06), 0 5px 14px -3px rgba(83,58,253,0.4) !important; }
#pm-book .pm-ed__scene-icon { background:linear-gradient(135deg, rgba(83,58,253,0.14) 0%, rgba(83,58,253,0.04) 100%) !important; border-color:rgba(83,58,253,0.22) !important; }
#pm-book .pm-ed__pillar:hover { box-shadow:0 24px 48px -16px rgba(83,58,253,0.45) !important; }

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

/* ── 5. WHO THIS FITS + LIMITLESS + its CTA + the tab/card greens ─────────── */
.pmfc-eyebrow { color:#4B34E6 !important; }
.pmfc-title em { color:#4B34E6 !important; }
.ckfs-title em { color:#533AFD !important; }
@media (max-width:600px){ .ckfs-title em { color:#533AFD !important; } }
.ckf-close__hire a { color:#533AFD !important; border-bottom-color:rgba(83,58,253,.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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
    color:#fff !important;
    box-shadow:0 16px 34px -16px rgba(83,58,253,.62), 0 2px 6px -2px rgba(75,52,230,.34), inset 0 1px 0 rgba(255,255,255,.28) !important;
  }
  .ckf-close__hire a:active { background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 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. */
/* 2026-09-14 — ALL NINE STAY RED. Caleb: "keep the red when they are first like
   that but when hover or clicked it bad." The hollow white selected state is gone.

   It was also genuinely broken, not just disliked: `background` and `color` were
   transitioning at different rates, so for a few frames the pill was already white
   while its label was still white — the text simply disappeared. That is why the
   picked pill looked empty in his screenshot.

   THE RULE THAT PREVENTS IT EVER COMING BACK: every state here keeps `color:#fff`.
   If the label never changes colour, it can never be caught mid-change against a
   ground that has. The selected state is carried by DEPTH instead — a darker fill,
   a white inner ring and a stronger glow — so the picked pill reads as pressed in
   and lit rather than switched off. */
/* 2026-09-14 — NO DROP SHADOW. Caleb: "take away the shadow, you can see it looks
   like a line of shadows on each button and it looks like its on a track."
   He is right and it is a row problem, not a button problem: a coloured drop
   shadow that looks correct under ONE pill becomes a continuous dark band under
   nine of them, and the eye reads that band as a rail the pills are sitting on.
   Only the inset top highlight stays — that is what gives a pill its roundness,
   and it casts nothing. */
/* 2026-09-14 — LIGHTER. Caleb: "all the buttons have the darker gradient, i want
   it slightly just a little lighter... because they are smaller with the same red
   as all, it's going to be lighter."
   He is describing how a gradient behaves at different sizes. The CTA ramp runs
   #7389FF -> #533AFD -> #4B34E6, and #4B34E6 is the deep end. Across a wide button it
   is a subtle fall-off; compressed into a 40px pill it lands as a dark mass. So
   the deep stop is dropped: these end at the MID tone. Same family as the big
   buttons, correct weight at this size. */
/* 2026-09-14 — BACK TO THE EXACT CTA RED. Caleb: "if i asked you to make it this
   red exactly is that the same as before? right now you made it too light."
   Yes — this is the identical ramp the "Learn more" buttons carry, and identical
   to what these pills had before the lightening pass.

   IT WILL NOT LOOK THE SAME AS IT DID THEN, and that is the point. When he called
   this red too dark, every pill was also casting a coloured drop shadow, and nine
   of those merged into a band beneath the row. That band is gone. The same red
   reads lighter now because the weight under it was never the red. */
.pmfc-tab, .pmfc-tab:not(.is-on), .pmfc-tab.is-on, .pmfc-tab.is-on:hover {
  border-color:#533AFD !important; color:#fff !important;
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28) !important; }
/* hover brightens — and lifts with LIGHT, never a shadow */
.pmfc-tab:hover {
  color:#fff !important;
  background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44) !important; }

/* THE PICKED ONE — 2026-09-14. Caleb: "thats ugly, a weird red border around when
   clicked... why not just make them all how they all are but when you are on one,
   see how that button vibrates with the little red vibrating ring — you can use
   the same code for that?"

   He means #sp-skip, the "Skip gallery" pill, whose attention halo he specified
   himself on 2026-08-03. That exact mechanism is reused here rather than
   reinvented: a ring on ::after that expands and fades, three times, then stops
   for good — his own note there says a permanent pulse "reads cheap".

   So the white inset border is gone. The picked pill is the same red as the rest
   with only a slightly deeper fill to mark it once the halo has finished, because
   an indicator that disappears after three seconds is not an indicator. */
.pmfc-tab { position:relative !important; }
.pmfc-tab::after {
  content:''; position:absolute; inset:-3px; border-radius:inherit;
  border:2px solid rgba(83,58,253,.62); opacity:0; pointer-events:none; }
/* 2026-09-14 — the halo now runs FOREVER on the picked pill. Caleb: "when i first
   come in the first one should be vibrating, why isnt it? it only does it if i
   click another one... it should keep doing that."

   Both halves of that were the same fault. A 3-shot animation fires when the
   element GAINS .is-on — and the first pill is born with it, at page load, six
   thousand pixels above the fold. Its three pulses were spent before anyone could
   see them; only a pill he clicked later still had them left. Running it
   continuously fixes the first pill and satisfies the ask at once.

   The rhythm is a heartbeat, not a strobe: the ring expands and fades over the
   first 55%, then the remaining 45% is dead air before it starts again. A pulse
   with no rest in it reads frantic. Transform and opacity on a pseudo-element, so
   the compositor owns it and running forever costs effectively nothing. */
.pmfc-tab.is-on::after { animation:pmfcHalo 2.6s ease-out infinite; }
@keyframes pmfcHalo {
  0%   { opacity:.8; transform:scale(1); }
  55%  { opacity:0;  transform:scale(1.2); }
  100% { opacity:0;  transform:scale(1.2); } }
@media (prefers-reduced-motion:reduce) {
  .pmfc-tab.is-on::after { animation:none !important; } }

/* 2026-09-14 — the blue ring in Caleb's screenshot was Chrome's DEFAULT focus
   outline: nothing here had ever styled :focus-visible, so a clicked pill wore a
   stock blue halo over a ruby row. Themed, and scoped to :focus-visible so it
   appears for keyboard users and not on every mouse click. */
.pmfc-tab:focus { outline:none !important; }
.pmfc-tab:focus-visible {
  outline:2px solid #fff !important;
  outline-offset:-4px !important; }

/* 2026-09-14 — THE PICKED ONE IS NOT DARKER ANY MORE. Caleb: "when its pressed i
   dont want it darker or whatever. if its selected the vibrating is enough, we
   dont need to press it in and make it dark."
   He is right, and it removes a redundancy: the pill was carrying two signals for
   one piece of state. The halo pulses forever on the picked pill, so it never
   needs a second marker — and a pressed-in look on something that is not pressed
   was always a small lie. The selected pill is now IDENTICAL to the other eight;
   only the ring moves. (Handled in the shared rule above.) */
.pmfc-card[style*="#0E7C82"] { --pc:#533AFD !important; }
.pmfc-card[style*="#36A6A4"] { --pc:#7389FF !important; }
.pmfc-chip { background:rgba(83,58,253,.12) !important; color:#533AFD !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:#533AFD !important; }
.pmts-rail__item.is-active { background:#533AFD !important; box-shadow:0 12px 26px -12px rgba(83,58,253,.55) !important; }
.pmts-panel__chip { color:#533AFD !important; background:rgba(83,58,253,.07) !important; border-color:rgba(83,58,253,.16) !important; }
.pmts-panel__demo { color:#533AFD !important; border-bottom-color:rgba(83,58,253,.3) !important; }
.pmts-pv-asn__count { color:#533AFD !important; background:rgba(83,58,253,.08) !important; }
.pmts-pv-asn__blank { border-bottom-color:rgba(83,58,253,.4) !important; color:#533AFD !important; }
.pmts-pv-asn__caret { background:#533AFD !important; }
.pmts-pv-asn__opt.is-picked { border-color:rgba(83,58,253,.55) !important; background:rgba(83,58,253,.05) !important; }
.pmts-pv-asn__opt.is-picked .pmts-pv-asn__radio { border-color:#533AFD !important; }
.pmts-pv-asn__opt.is-picked .pmts-pv-asn__radio::after { background:#533AFD !important; }
.pmts-pv-asn__save { color:#533AFD !important; border-color:rgba(83,58,253,.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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important; color:#fff !important;
  box-shadow:0 12px 28px -8px rgba(83,58,253,.55), 0 2px 6px -2px rgba(75,52,230,.40), inset 0 1px 0 rgba(255,255,255,.30) !important; }
.hero__btn:hover { background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important; color:#fff !important;
  box-shadow:0 18px 40px -10px rgba(83,58,253,.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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  color:#fff !important;
  box-shadow:0 7px 18px -6px rgba(83,58,253,.46), 0 2px 4px -2px rgba(75,52,230,.34),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
#pm-services .pmsvc-card__btn:hover { background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 26px -8px rgba(83,58,253,.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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 28px -8px rgba(83,58,253,.55), 0 2px 6px -2px rgba(75,52,230,.40),
             inset 0 1px 0 rgba(255,255,255,.30) !important; }
.wlb__go:hover { background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  color:#fff !important;
  box-shadow:0 18px 40px -10px rgba(83,58,253,.70), inset 0 1px 0 rgba(255,255,255,.36) !important; }
#pm-services .pmsvc-card { border-color:rgba(83,58,253,.45) !important; }
#pm-services .pmsvc-card:hover { border-color:#533AFD !important; box-shadow:0 26px 54px -26px rgba(83,58,253,.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:#4B34E6 !important; color:#fff !important;
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 6px 15px -5px rgba(83,58,253,.45), 0 1px 3px -1px rgba(75,52,230,.32),
             inset 0 1px 0 rgba(255,255,255,.26) !important; }
.pmfc-arrow:hover { border-color:#5540EA !important; color:#fff !important;
  background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 10px 22px -7px rgba(83,58,253,.58), inset 0 1px 0 rgba(255,255,255,.32) !important; }
.pmfc-arrow[disabled] { box-shadow:none !important; }
.pmfc-dots button.is-on { background:#533AFD !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:#533AFD !important; }
.pmwhat-close em { color:#533AFD !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:#533AFD !important; }
/* (c) italic accents "in your home." / "themselves." / "as they do." (base
   green #2F7D46) → theme. */
.ckfs-ct em { color:#533AFD !important; }
/* (d) FEATURES explorer mint stage/rails → soft theme blush. */
.pmts-explorer { background:linear-gradient(180deg, rgba(83,58,253,.04) 0%, rgba(83,58,253,.07) 100%) !important; border-color:rgba(83,58,253,.12) !important; }
.pmts-panel__prev { background:linear-gradient(165deg, rgba(83,58,253,.05) 0%, rgba(83,58,253,.08) 60%, rgba(83,58,253,.11) 100%) !important; }
.pmts-rail { background:linear-gradient(180deg, rgba(83,58,253,.04) 0%, rgba(83,58,253,.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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 8px 20px -6px rgba(83,58,253,.50), 0 2px 5px -2px rgba(75,52,230,.38),
             inset 0 1px 0 rgba(255,255,255,.30) !important; }
a.nav-cta:hover { background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 12px 28px -8px rgba(83,58,253,.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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 28px -8px rgba(83,58,253,.55), 0 2px 6px -2px rgba(75,52,230,.40),
             inset 0 1px 0 rgba(255,255,255,.30) !important; }
.ckfs-cta:hover { background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  color:#fff !important;
  box-shadow:0 18px 40px -10px rgba(83,58,253,.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:#4B34E6 !important; }
.pmwhat-eyebrow { color:#4B34E6 !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:#4B34E6 !important; }
#pm-services .pmsvc-h2 em { color:#4B34E6 !important; }
.reassure__title span { color:#4B34E6 !important; }
#faq .faq-eyebrow { color:#4B34E6 !important; }
#faq .faq-title em { color:#4B34E6 !important; }
.pm-testi-light .pm-testi-h em { color:#4B34E6 !important; }
.pmws__card { border-color:rgba(83,58,253,.30) !important; }
.pmws__ctitle { color:#123b42 !important; }                    /* strong navy anchor */
.pmws__csub { color:#533AFD !important; }                        /* theme accent line  */
/* timeline variant bits (mobile) stay themed */
.pmws__no { color:#533AFD !important; }
.pmws__dot { border-color:#533AFD !important; box-shadow:0 0 0 3px rgba(83,58,253,.14) !important; }
.pmws__tl::before { background:#533AFD !important; }
.pmws__arrow { border-color:rgba(83,58,253,.40) !important; color:#533AFD !important; }
.pmws__dots button.is-on { background:#533AFD !important; }
.pmws__head:focus-visible { outline-color:#533AFD !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(83,58,253,.26) !important; color:#123b42 !important; }
.pmws__tab[aria-pressed="true"] {
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  border-color:#533AFD !important; color:#fff !important;
  box-shadow:0 12px 24px -12px rgba(83,58,253,.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(83,58,253,.20) !important; }
.pmws__head:hover { border-color:rgba(83,58,253,.50) !important; background:rgba(83,58,253,.04) !important; }
.pmws__plus { border-color:rgba(83,58,253,.34) !important; background:rgba(83,58,253,.045) !important; }
.pmws__head:hover .pmws__plus { border-color:#533AFD !important; }
.pmws__head:hover .pmws__plus::before,
.pmws__head:hover .pmws__plus::after { background:#533AFD !important; }
/* OPEN row — the theme moment: soft wash, themed label + filled ×, theme shadow. */
.pmws__node.is-open { border-color:rgba(83,58,253,.30) !important;
  background:linear-gradient(180deg, rgba(83,58,253,.06) 0%, rgba(83,58,253,.02) 100%) !important;
  box-shadow:0 26px 50px -30px rgba(83,58,253,.38) !important; }
.pmws__node.is-open .pmws__head { border-color:transparent !important; background:transparent !important; }
.pmws__node.is-open .pmws__name { color:#533AFD !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:#4B34E6 !important;
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 6px 14px -5px rgba(83,58,253,.48), 0 1px 3px -1px rgba(75,52,230,.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; }

/* 2026-09-14 — Caleb: "when i hover over this, why is it the pill in the background
   only hover effect, why isnt the entire card im selecting. i see a horizontal pill
   pop but what about the entire opened one?"

   He is right and the cause is in the selectors above: EVERY hover on this accordion
   targets .pmws__head, which is only the title strip. On a closed row that is the
   whole row, so it looked correct and nobody noticed. On the OPEN row the body sits
   outside .pmws__head, so the strip lit up and the card it belongs to did not — a
   pill floating inside a card, which reads as a bug rather than a hover.

   Two halves to the fix. The NODE takes the hover, so the whole open card responds
   as one object. And the head's own hover is switched OFF inside an open node,
   because leaving both on is what drew the pill in the first place. Values match
   .asx__cat.is-on:hover exactly — same treatment, same language. */
.pmws__node.is-open:hover { border-color:rgba(83,58,253,.44) !important;
  background:linear-gradient(180deg, rgba(83,58,253,.10) 0%, rgba(83,58,253,.04) 100%) !important;
  box-shadow:0 28px 54px -30px rgba(83,58,253,.46) !important; }
.pmws__node.is-open .pmws__head:hover { background:transparent !important;
  border-color:transparent !important; }
/* the closed ones: a real hover, still quiet */
.pmws__head:hover .pmws__plus { border-color:#533AFD !important;
  background:linear-gradient(135deg,rgba(115,137,255,.16) 0%, rgba(83,58,253,.13) 100%) !important;
  box-shadow:0 4px 10px -4px rgba(83,58,253,.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:#5540EA !important;
  background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 9px 20px -6px rgba(83,58,253,.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:#533AFD !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(83,58,253,.26) !important; }
.apx__item:hover:not(.is-open) { background:rgba(83,58,253,.05) !important; border-color:#533AFD !important; box-shadow:0 6px 15px -8px rgba(83,58,253,.24) !important; }
.apx__item.is-open { border-color:rgba(83,58,253,.30) !important;
  background:linear-gradient(180deg,#fff 0%, rgba(83,58,253,.05) 100%) !important;
  box-shadow:0 16px 38px -18px rgba(83,58,253,.30) !important; }
.apx__item.is-open .apx__head-t { color:#533AFD !important; }
.apx__card.is-c .apx__inner { box-shadow:0 30px 56px -26px rgba(83,58,253,.26) !important; border-color:rgba(83,58,253,.14) !important; }
.apx__cta--card { color:#533AFD !important; border-color:#533AFD !important; }
.apx__cta--card:hover { background:#533AFD !important; color:#fff !important; box-shadow:0 12px 24px -12px rgba(83,58,253,.5) !important; }
.apx__dot.is-on { background:#533AFD !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:#533AFD !important; --hx-d:#4B34E6 !important; --hx-l:#7389FF !important;
      --hx-rgb:83,58,253 !important; --hx-drgb:75,52,230 !important; }
.hx { background:linear-gradient(0deg,rgba(83,58,253,.045),rgba(83,58,253,.045)),#fff !important; }
.hx-stage { box-shadow:0 26px 58px -40px rgba(75,52,230,.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(83,58,253,.075),rgba(83,58,253,.075)),#fff !important; }
.hx-left::before { background:linear-gradient(180deg,rgba(83,58,253,.075),rgba(83,58,253,0)),linear-gradient(180deg,#fff,rgba(255,255,255,0)) !important; }
.hx-left::after { background:linear-gradient(0deg,rgba(83,58,253,.075),rgba(83,58,253,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:#4B34E6 !important; color:#fff !important;
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 7px 18px -6px rgba(83,58,253,.46), 0 2px 4px -2px rgba(75,52,230,.34),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
.pm-testi-share__btn:hover { border-color:#5540EA !important; color:#fff !important;
  background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 12px 26px -8px rgba(83,58,253,.60), inset 0 1px 0 rgba(255,255,255,.34) !important; }

.pm-final-cta__btn { background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important; color:#fff !important;
  box-shadow:0 12px 28px -8px rgba(83,58,253,.55), 0 2px 6px -2px rgba(75,52,230,.40), inset 0 1px 0 rgba(255,255,255,.30) !important; }
.pm-final-cta__btn:hover { background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important; color:#fff !important;
  box-shadow:0 18px 40px -10px rgba(83,58,253,.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:#533AFD !important; }
/* 2026-09-14 — Caleb: "you see how when i click i get a very nice red (01), i
   want them all to stay like that automatically ... make it premium." So colour
   is no longer the reward for opening a row. Every badge now carries the full
   button gradient at rest — the same #7389FF/#533AFD/#4B34E6 ramp the CTAs use, so
   the numbers read as a column of real objects instead of faint placeholders.

   That leaves the open row needing a different signal, and it has to be a
   STRONGER one, not a weaker one: the answer you are actually reading must be
   the most present thing on the page, so inverting it to pale would have pushed
   it backwards (and it would have sat on the open row's own pink wash, losing
   its edge entirely). Instead the three states separate by light, not by hue:

     rest   the deep ramp, seated, one soft shadow
     hover  the brighter ramp + a stronger inner highlight — it flashes
     open   back to the deep ramp, but haloed by a 4px ruby ring and lifted on
            a wider shadow. The ring belongs to the open row alone, so nothing
            else on the page can be mistaken for it.

   The ring is drawn as the FIRST box-shadow layer so it hugs the 16px radius
   exactly; a border would have changed the badge's size and shifted the row. */
.faq-badge { background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 18px -12px rgba(75,52,230,.55), inset 0 1px 0 rgba(255,255,255,.26) !important; }
.faq-btn:hover .faq-badge { background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  color:#fff !important;
  box-shadow:0 12px 24px -12px rgba(83,58,253,.58), inset 0 1px 0 rgba(255,255,255,.42) !important; }
.faq-btn:hover .faq-question { color:#533AFD !important; }
.faq-btn:hover .faq-toggle svg { stroke:#533AFD !important; }
.faq-row.open .faq-badge { background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  color:#fff !important;
  box-shadow:0 0 0 4px rgba(83,58,253,.16), 0 16px 30px -12px rgba(83,58,253,.62), inset 0 1px 0 rgba(255,255,255,.34) !important; }
.faq-row.open .faq-question { color:#533AFD !important; }
.faq-row.open .faq-toggle svg { stroke:#533AFD !important; }
.faq-row.open { background:linear-gradient(90deg,rgba(83,58,253,.05),rgba(83,58,253,0) 62%) !important; }
.faq-row:hover { background:linear-gradient(90deg,rgba(83,58,253,.03),rgba(83,58,253,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(83,58,253,.26) !important; }
.faq-more:hover { border-color:rgba(83,58,253,.55) !important; background:rgba(83,58,253,.028) !important; }
.faq-more__n { color:#533AFD !important; }
.faq-more:hover .faq-more__chev { color:#533AFD !important; }
.faq-more:focus-visible { outline-color:#533AFD !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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 10px 26px -10px rgba(83,58,253,.70), 0 2px 6px -2px rgba(75,52,230,.30),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
#sp-skip:hover { background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 16px 34px -12px rgba(83,58,253,.85),
             inset 0 1px 0 rgba(255,255,255,.34) !important; }
#sp-skip::after { border-color:rgba(83,58,253,.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:#533AFD !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:#4B34E6 !important; }   /* #4B34E6, 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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important; color:#fff !important;
  box-shadow:0 7px 17px -6px rgba(83,58,253,.48), 0 2px 4px -2px rgba(75,52,230,.34),
             inset 0 1px 0 rgba(255,255,255,.28) !important; }
#pmFamilyMap .lm-ostats b { color:#533AFD !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:#533AFD !important; box-shadow:0 0 0 3px rgba(83,58,253,.14) !important; }
#pmFamilyMap .leaflet-control-zoom a:hover { color:#533AFD !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:#4B34E6 !important; }   /* #4B34E6, 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:#4B34E6 !important; }
#spotlight .sp-title em { color:#4B34E6 !important; }
#pmInteractiveDemo .pmdemo-head__eyebrow { background:linear-gradient(90deg,#7389FF 0%,#533AFD 55%,#4B34E6 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:#533AFD;
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 16px 36px -10px rgba(83,58,253,.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:#5F48FF;
  background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 24px 56px -10px rgba(83,58,253,.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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important; color:#fff !important;
  box-shadow:0 7px 17px -6px rgba(83,58,253,.48), 0 2px 4px -2px rgba(75,52,230,.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:#533AFD !important; --asx-teal-d:#4B34E6 !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:#E8E9FF !important; --asx-line:rgba(83,58,253,.20) !important; }
.asx { background:radial-gradient(circle at 72% 18%,rgba(83,58,253,.055),transparent 28%),#fff !important; }

/* category pills — restraint on the seven, colour on the one */
.asx__cat { border-color:rgba(83,58,253,.26) !important; }
.asx__cat:hover:not(.is-on) { background:rgba(83,58,253,.05) !important; border-color:#533AFD !important;
  box-shadow:0 6px 15px -8px rgba(83,58,253,.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 #4B34E6. 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. */
/* 2026-09-14, and this settles it. Caleb, pointing at the open "In the Session" row
   beside this one: "how its selected and the design i want the same for photo 2 ...
   the photo two one is full and i was wrong yesterday. make it look the same."

   Yesterday this row was given the solid fill — the same treatment as a button. That
   was the wrong family. This is not a button, it is a SELECTED ROW IN A LIST, and the
   page already has one of those: .pmws__node.is-open. A solid fill shouts as loudly as
   the primary CTA, and white-on-accent at 16.5px/700 reads harder than accent-on-tint.
   So the two now share one language exactly:

       panel   light tint, 30% accent hairline, the long low shadow
       title   the accent colour, weight 500 — not white, not bold
       mark    the full gradient disc with a white x  (see .asx__plus below)

   The fill did not disappear, it moved to the disc, which is the right size for it.
   Values are copied verbatim from .pmws__node.is-open so the two can never drift:
   change one, change both. */
.asx__cat.is-on { background:linear-gradient(180deg, rgba(83,58,253,.06) 0%, rgba(83,58,253,.02) 100%) !important;
  border-color:rgba(83,58,253,.30) !important;
  box-shadow:0 26px 50px -30px rgba(83,58,253,.38) !important; }
.asx__cat.is-on .asx__catname { color:#533AFD !important; font-weight:500 !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 #4B34E6 so it follows every palette; the flat
   #4B34E6 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. */
/* 2026-09-14 — superseded. The glass disc existed to survive a solid accent fill.
   The row is a light panel now, so a translucent white token would vanish on it.
   It takes the same gradient disc the open accordion row uses, verbatim. */
.asx__cat.is-on .asx__plus { border:1px solid #4B34E6 !important;
  color:#fff !important;
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:0 6px 14px -5px rgba(83,58,253,.48), 0 1px 3px -1px rgba(75,52,230,.32),
             inset 0 1px 0 rgba(255,255,255,.26) !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(83,58,253,.075),rgba(83,58,253,.035)) !important;
  border-color:rgba(83,58,253,.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:#4B34E6 !important; color:#fff !important;
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 5px 12px -4px rgba(83,58,253,.45), 0 1px 3px -1px rgba(75,52,230,.30),
             inset 0 1px 0 rgba(255,255,255,.26) !important; }
.asx__badge:hover,
.asx__badge[aria-expanded="true"] { border-color:#5540EA !important; color:#fff !important;
  background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 9px 20px -6px rgba(83,58,253,.58), 0 0 0 4px rgba(83,58,253,.12),
             inset 0 1px 0 rgba(255,255,255,.32) !important; }
.asx__badge:focus-visible { outline-color:#533AFD !important; }

/* the carousel's progress dots */
.asx__dot { background:rgba(83,58,253,.18) !important; }
.asx__dot.is-on { background:rgba(83,58,253,.22) !important; }
.asx__fill { background:#533AFD !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:#4B34E6 !important; color:#fff !important;
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 7px 17px -6px rgba(83,58,253,.46), 0 1px 3px -1px rgba(75,52,230,.32),
             inset 0 1px 0 rgba(255,255,255,.26) !important; }
.asx__arrow:hover { border-color:#5540EA !important; color:#fff !important;
  background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 11px 24px -7px rgba(83,58,253,.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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 14px 32px -10px rgba(83,58,253,.55),0 2px 6px -2px rgba(75,52,230,.38),
    inset 0 1px 0 rgba(255,255,255,.42) !important; }
.asx-cta__btn:hover { background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 18px 38px -12px rgba(83,58,253,.62),0 3px 8px -2px rgba(75,52,230,.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: #533AFD !important;   /* hover / underline  */
  --pm-footer-soft:   #E8E9FF !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{ color:#fff !important; }
/* 2026-09-14 — this brace was lost for an hour. When asx was taken off the list
   above, the final selector went with the { color:#fff } block, leaving a trailing
   comma that silently merged these three into the asx rule below. They kept
   matching, so nothing errored — they just stopped being white on hover. A
   selector list is only safe to shorten from the FRONT; take the last one and you
   take the declaration with it. */
/* asx is no longer a filled button, so its selected-hover deepens the TINT rather than
   brightening a fill — white text on hover would now be invisible on a light panel. */
#asx-section .asx__cat.is-on:hover .asx__catname{ color:#4B34E6 !important; }
#asx-section .asx__cat.is-on:hover{
  background:linear-gradient(180deg, rgba(83,58,253,.10) 0%, rgba(83,58,253,.04) 100%) !important;
  box-shadow:0 28px 54px -30px rgba(83,58,253,.46) !important;
  border-color:rgba(83,58,253,.44) !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,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  border-color:#4B34E6 !important; color:#fff !important;
  box-shadow:0 6px 15px -5px rgba(83,58,253,.45), 0 1px 3px -1px rgba(75,52,230,.32),
             inset 0 1px 0 rgba(255,255,255,.26) !important; }
.pm-book__pager-btn:not([disabled]):hover{
  background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 10px 22px -7px rgba(83,58,253,.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:#4B34E6 !important; color:#fff !important;
  background:linear-gradient(135deg,#7389FF 0%,#533AFD 52%,#4B34E6 100%) !important;
  box-shadow:0 6px 15px -5px rgba(83,58,253,.45), 0 1px 3px -1px rgba(75,52,230,.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:#5540EA !important; color:#fff !important;
  background:linear-gradient(135deg,#8496FF 0%,#5F48FF 52%,#5540EA 100%) !important;
  box-shadow:0 10px 22px -7px rgba(83,58,253,.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(83,58,253,0.45) !important; }

.asx__dot:hover { background:rgba(83,58,253,.55) !important; }
.asx__dot.is-on:hover { background:#533AFD !important; }


/* ── STRIPE BLURPLE — the extra layer (Caleb 2026-09-11) ──────────────────────
   The template can only recolour the accent; Stripe's look is as much its INKS.
   Measured off stripe.com at 375px: headings #061b31, body #50617a, the second
   half of a title #64748d. On phones every section header copies the Services
   header's colours (index.html paintStandard → --pmm-ink / --pmm-lead), so
   colouring these three Services elements colours the whole page. ─────────── */
#pm-services .pmsvc-h2 { color:#061b31 !important; }        /* → --pmm-ink on phones */
#pm-services .pmsvc-note { color:#50617a !important; }      /* → --pmm-lead on phones */
#pm-services .pmsvc-card__title { color:#061b31 !important; }
#pm-services .pmsvc-card__body { color:#50617a !important; }
@media (max-width:760px){
  /* Stripe's title + subtitle: same size, same weight, the second sentence grey.
     css/landing-mobile.css §1 reads --pmm-title-em for the accent sentence. */
  :root { --pmm-title-em:#64748d; }
  #pm-services .pmsvc-h2 em { color:#64748d !important; }   /* the standard's em is coloured by the template's own #pm-services rule above; restate it here */
  /* emphasis inside a paragraph is one step darker, never a different hue */
  html body p b, html body p strong, html body .reassure__sub b { color:#061b31 !important; }
}