/* ============================================================================ TYPE SKIN — "SÖHNE STRIPE" · Stripe's typeface in NUNITO'S LAYOUT (Caleb 2026-09-11) ---------------------------------------------------------------------------- The brief, after a wrong turn: the FACE changes, the inks are Stripe's, the accent is the Page Colour's — and every size, position, alignment, case and margin is exactly the Nunito Console page's. Caleb: "I expect the text to be in the same spot on each section … laid out identical each letter and word." So this sheet touches ONE property: font-weight. Nothing else. (An earlier version restated sizes, alignment, buttons and spacing to copy stripe.com's layout — it moved text, and it was reverted the same night.) THE WEIGHT MAP — Nunito's numbers, translated so Söhne looks the way Nunito looks (the static Söhne files run heavy: its 500/600 at small sizes read "pudgy" to Caleb): titles, any size → 400, tracking 0 — Stripe's own title weight ("way less thick"; 600 read chunky, 500 still dense, measured side by side 2026-09-11) sub-titles 15–19px → 400 as well — hierarchy comes from size and ink, as on stripe.com emphasis b/strong → 500 buttons ≥ 16px → 500 buttons, tabs, chips < 16px → 400 ("thinner") everything small → 400 (eyebrows, labels, names, meta, facts, numbers, footer) body stays 400 — never 300 ("thin paper") — plus +.012em of air: Söhne's letters sit closer than Nunito's and the reading text felt "stacked" Colours: titles take Stripe's ink #061b31 through the Services standard (--pmm-ink); every other colour — leads, body, eyebrows, the title's second sentence — is the page's own, so the accent follows the Page Colour and the Nunito relationships hold. THE FILES ARE KLIM'S TEST FONTS — evaluation licence only (Caleb asked Klim and was told he may try them). fonts/soehne-test/ is gitignored and named in serve-mobile.py's LOCAL_ONLY_PREFIXES; it cannot ship. 69 glyphs (A–Z a–z 0–9 , - . Ö ö): apostrophes, dashes and accents fall to the phone's SF Pro until the licensed files land. TO GO LIVE: buy the Klim web licence — static styles used here are Buch 400, Kräftig 500, Halbfett 600 — or the variable web font if offered; put the files in fonts/soehne/, repoint the @font-face rows, delete the rest, drop the gitignore line and the server exception. Weight numbers below are for the STATIC files; a variable file may need them re-measured (Stripe's variable "300" renders like static 400 — see the memory notes). ============================================================================ */ @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Extraleicht.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-ExtraleichtKursiv.otf') format('opentype'); font-weight:200; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Leicht.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-LeichtKursiv.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Buch.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-BuchKursiv.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Kraftig.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-KraftigKursiv.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Halbfett.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-HalbfettKursiv.otf') format('opentype'); font-weight:600; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Dreiviertelfett.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-DreiviertelfettKursiv.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Fett.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-FettKursiv.otf') format('opentype'); font-weight:800; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Extrafett.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-ExtrafettKursiv.otf') format('opentype'); font-weight:900; font-style:italic; font-display:swap; } /* ── the four roles → Söhne. The fallback order matters: characters the test faces lack go to -apple-system (SF Pro on iPhone/Mac — Stripe's own fallback). --pmt-cjk stays second so Chinese still lands in its designed face. --pmt-app is NOT re-pointed: the product replicas follow the app, never the marketing skin. ── */ :root{ --pmt-display:'Soehne',var(--pmt-cjk),-apple-system,'SF Pro Display',system-ui,'Inter',sans-serif; --pmt-heading:'Soehne',var(--pmt-cjk),-apple-system,'SF Pro Display',system-ui,'Inter',sans-serif; --pmt-body:'Soehne',var(--pmt-cjk),-apple-system,'SF Pro Text',system-ui,'Inter',sans-serif; --pmt-ui:'Soehne',var(--pmt-cjk),-apple-system,'SF Pro Text',system-ui,'Inter',sans-serif; } /* ── DESKTOP — family only, plus the one number that keeps Söhne from going heavy where the base page says 700/800: display type at 600. Sizes untouched (desktop is out of scope, Caleb 2026-09-11). Wrapped in min-width so nothing here can leak onto phones. ── */ @media (min-width:761px){ .hero__title, .reassure__title, #pm-services .pmsvc-h2, .pm-ed__title, .pm-book__title, .pm-book__cover-title, .pm-book-hero__title, .pm-book__page-title, .pm-hww__h2, .wlb__title, .pmfc-title, .pmwhat-title, .ckf-head__title, .ckfs-title, .apx__title, .hx-title, .pmts-title, .pm-testi-light .pm-testi-h, #sp-sticky h2, .pm-final-cta__title{ font-weight:500 !important; } } /* ── THE HEADER, AT EVERY WIDTH (2026-09-14) ──────────────────────────────── Caleb: "this is the header — please make sure this has the Söhne font, i think its other font." It was Söhne. It was wearing Poppins' WEIGHTS: Explore and Sign In at 600, Waiting List at 700, while the page around them sat at 500. Söhne Dreiviertelfett beside Söhne Kräftig really does read as a different typeface, which is what he was seeing. Deliberately OUTSIDE the phone block below. That block is the whole weight sweep and it is max-width:760px, so on desktop this sheet has only ever changed the font FAMILY and left every weight to index.html — which is why the header kept its 600 and 700 there. The first attempt at this fix went inside the phone block and changed nothing on desktop at all; measuring it is what caught that. The other three type skins pin .nav a / a.nav-cta at 600 and are right to — none of them flattens the page the way this one does. ONLY the header bar. The first version of this rule swept the Explore PANEL in too — "it hangs off this header, so it would be mismatched" — which was scope I invented. Caleb had just approved that panel's weights and immediately saw what it cost: "it was really nice how you did it the first time inside the mega menu, now it looks paper thin." He was right; every title in it had dropped a step, 600 to 500 and 500 to 400. The panel is a control surface, not page prose. It carries its own hierarchy — 600 heading / 500 option / 400 description — and that hierarchy is the point of it. Flattening a menu to one weight because the page around it is flat removes the only thing telling a reader which line is the label. .pmm-trigger stays, because "Explore" IS the header bar, sitting between Sign In and Waiting List. SCOPED TO #nav, and that matters. The first version copied the other three skins' selector list, which carries a bare `a.nav-cta` — and that also matches .nav-mobile__cta, the Join the Waiting List button inside the phone drawer (#navMobileMenu), which is not the header at all. It went 700 to 500 without being asked, leaving the drawer's one action button LIGHTER than the plain links above it. Caleb asked "did anything else change?" and that was the answer. Scoping to #nav leaves the drawer exactly as it was. */ /* #pmFamilyMap .lm-toggle__btn moved out of the 400 group, 2026-09-14. The 549-element map classified it as small UI bold, which was correct when it was a 39px chip. It is a 46px section control now — the switch for that whole section, twin to Parent account / Child account, which is 500. Leaving it at 400 is what made Caleb's two "identical" toggles still not match. */ html body #pmFamilyMap .lm-toggle__btn, html body #nav .nav-links a, html body #nav a.nav-cta, html body .pmm-trigger{ font-weight:500 !important; } /* ── THE FAQ, AT EVERY WIDTH (2026-09-14) ─────────────────────────────────── Caleb: "the faq items there 12345 is too thick … right now its too thick for the title." He is reading a real fault, and the numbers say why. .faq-badge asks for font-weight:650. Nunito is variable, so 650 is a genuine weight there and the badge sits neatly between the question and the title. Söhne is not variable — it ships 200/300/400/500/600/700 as separate files — and CSS matching for a weight above 500 searches UPWARDS first, so 650 resolves to 700, Dreiviertelfett. The one number on the row was rendering in the heaviest face on the page. These three values are NOT invented. The phone block below already sets the badge and question to 500 and the answer to 400 — the whole point of that sweep. They simply never reached desktop, because the entire sweep is max-width:760px. Lifting the FAQ's share of it to every width. */ html body #faq .faq-badge{ font-weight:500 !important; } html body #faq .faq-question{ font-weight:500 !important; } /* The ANSWER stays at 500, the weight it has always had on desktop. It went to 400 in the first cut of this fix and Caleb saw it immediately: "why is the faq answer so small?" It is not small — 15.5px, mid-pack for this page — but it carries the site's quiet grey #64748B, and at 400 that is three soft signals at once: light weight, pale colour, middling size. What he asked for was the TITLE made lighter ("its too thick for the title"); the answer was never the complaint. */ html body #faq .faq-answer{ font-weight:500 !important; } /* ── THE 549-ELEMENT AUDIT, NOW ON DESKTOP TOO (2026-09-14) ───────────────── Caleb: "we did a full title, subtitle, and text and we worked hard and you audited and fixed it all perfect … now it feels a bit weird. this is when we first introduced Söhne." He was right, and right about the date. The audit below this — 549 elements measured off the Nunito page's own emphasis map — was written 2026-09-11 and headed PHONE. The next evening, 2026-09-12 21:36 (c0f85cef), Söhne was made the DESKTOP default. Desktop got the typeface, the button finish sweep and two button weights; it never got the audit. So for two days desktop has been Söhne letterforms wearing Poppins' weights. What that actually looked like, measured before this block existed: the min-width:761px rule above set 20 headings to 500 but reached neither the four it missed nor ANY of their halves — so "One person." rendered at 500 while "Four kinds of help." rendered at 700, in the same line, while "Frequently Asked Questions" was 700 throughout. Three different states across seven section headings. This is not a new decision. It is the same emphasis map, the same two rules — bold 600+ at 13px and up becomes 500, small UI bold becomes 400 — applied at every width instead of below 760px. 119 selectors. TWO CARVE-OUTS, because Caleb settled them today and they postdate the map: #faq .faq-answer -> 500 — "why is the faq answer so small?" (2026-09-14). Phone map says 400. footer .footer-col h4 -> 600 — "the titles should be a little bolder" (2026-09-14). Phone map says 400. Both are set by their own rules above and are deliberately absent here. */ html body p b, html body p strong, html body li b, html body li strong, html body #asx-section .asx__eyebrow, html body #asx-section .asx__heading, html body #asx-section .asx__heading em, html body #asx-section .asx__title, html body #faq .faq-badge, html body #faq .faq-eyebrow, html body #faq .faq-fine a, html body #faq .faq-title, html body #faq .faq-title em, html body #pm-fit .pmfc-card__t, html body #pm-fit .pmfc-eyebrow, html body #pm-fit .pmfc-tab, html body #pm-fit .pmfc-title, html body #pm-fit .pmfc-title em, html body #pm-food .ckf-close__hire a, html body #pm-food .ckf-close__p b, html body #pm-food .ckfs-ct, html body #pm-food .ckfs-ct em, html body #pm-food .ckfs-cta, html body #pm-food .ckfs-menu__t, html body #pm-food .ckfs-title, html body #pm-food .ckfs-title em, html body #pm-grocers .pmgro-phrase, html body #pm-services .pmsvc-card__btn, html body #pm-services .pmsvc-card__title, html body #pm-services .pmsvc-eyebrow, html body #pm-services .pmsvc-h2, html body #pm-services .pmsvc-h2 em, html body #pm-services b, html body #pm-what .pmwhat-close, html body #pm-what .pmwhat-close__x em, html body #pm-what .pmwhat-eyebrow, html body #pm-what .pmwhat-title, html body #pm-what .pmwhat-title em, html body #pm-what .pmws__name, html body #pm-what .pmws__tab, html body #pmFamilyMap .lm-eyebrow, html body #pmFamilyMap .lm-gpin__num, html body #pmFamilyMap .lm-title, html body #pmFamilyMap .lm-title em, html body #pmFinalCta .grad, html body #pmFinalCta .pm-final-cta__btn, html body #pmFinalCta .pm-final-cta__eyebrow, html body #pmInteractiveDemo .pmdemo-cta__label, html body #pmInteractiveDemo .pmdemo-head__eyebrow, html body #pmInteractiveDemo .pmdemo-head__title, html body #pmInteractiveDemo .pmdemo-head__title em, html body #pmToolShowcase .hx-phone-veil__pill span, html body #pmToolShowcase .pmts-m em, html body #s-flow-editorial-v2 .pm-hww__ctitle, html body #s-flow-editorial-v2 .pm-hww__eyebrow, html body #s-flow-editorial-v2 .pm-hww__h2, html body #s-flow-editorial-v2 .pm-hww__h2 em, html body #s-flow-editorial-v2 .pm-hww__mix-num, html body #s-flow-editorial-v2 .pm-hww__mix-title, html body #s-flow-editorial-v2 .pm-hww__rn, html body #s-flow-editorial-v2 .pm-hww__roman, html body #s-flow-editorial-v2 .pm-hww__rpct span, html body #s-flow-editorial-v2 .pm-hww__rt strong, html body #s-flow-editorial-v2 b, html body #spotlight .sp-title, html body #spotlight .sp-title em, html body #spotlight h3, html body #testimonials .pm-testi-h, html body #testimonials .pm-testi-h em, html body #testimonials .pm-testi-name, html body #testimonials .pm-testi-share__btn span, html body #waitlist-band .wlb__go, html body #waitlist-band .wlb__title, html body .hero .hero__btn, html body .hero .hero__eyebrow, html body .hero .hero__title, html body .hx .hx-cta, html body .hx .hx-kicker, html body .hx .hx-phone-veil__pill span, html body .hx .hx-title, html body .hx .hx-title em, html body .reassure .k, html body .reassure .k em, html body .reassure .reassure__title, html body .reassure .reassure__title span, html body .reassure strong, html body #faq .faq-question, html body #pm-what .pmws-acc .pmws__name, html body #pm-what .pmws-acc .pmws__node.is-open .pmws__name, html body #pmToolShowcase .pmts-eyebrow .pmts-m{ font-weight:500 !important; } html body #asx-section .asx__pill span, html body #pm-fit .pmfc-about, html body #pm-fit .pmfc-cue, html body #pm-food .ckfs-cap, html body #pm-food .ckfs-menu__age, html body #pm-food .ckfs-swipe, html body #pmFamilyMap .lm-cat, html body #pmFamilyMap .lm-fam__name, html body #pmFamilyMap .lm-group__h, html body #pmFamilyMap .lm-place__name, html body #pmFamilyMap span, html body #s-flow-editorial-v2 .pm-hww__folio, html body #s-flow-editorial-v2 .pm-hww__mix-lab, html body #spotlight .sp-archive-mark, html body #spotlight div, html body #waitlist-band .wlb-spot__count span, html body #waitlist-band .wlb-spot__label, html body #waitlist-band .wlb__fact--m, html body #waitlist-band .wlb__facts span, html body .hx .hx-cta em, html body .hx .hx-kicker span, html body footer .footer-brand p, html body footer .is-locked-link, html body footer .nav-lock-soon, html body footer a, html body #pmFamilyMap .lm-fam b, html body #pmToolShowcase .hx-phone-veil__pill span, html body #faq .faq-fine a{ font-weight:400 !important; } /* ═══════════════════════════════════════════════════════════════════════════ PHONE — WEIGHT ONLY, generated from the Nunito page's own emphasis map (549 elements measured in Nunito Console mode, 2026-09-11). Caleb: "look at the older one to see where those emphasis points are … in the middle of a text, through the title, the subtitle, in the information boxes … exactly like that." The rule, applied to every element: Nunito bold (600+) at 13px and up → Söhne 500 (titles, sub-titles, bold words, questions, names, buttons, eyebrows) Nunito bold under 15px, UI text → 400 (names, share pill, Learn more, tabs, chips, fine print — "so thick"; tiny labels: "FAMILY SPOTS", "Where kids start" — Caleb ruled these must stay light) Nunito 500 (barely-there) → 400 (waitlist facts, map rows, toggles) b / strong inside prose → 500, always everything else → 400 (body is never 300 — "thin paper") Two legibility exceptions stay 500: map pin numerals and the chapter chips (white on colour). Same size, same colour, same case, same spot as Nunito — this sheet changes weight only, plus the header signature on the left. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:760px){ :root{ --pmm-eyebrow-w:500; --pmm-hero-w:500; --pmm-hero-track:0; --pmm-title-w:500; --pmm-title-track:0; --pmm-title-em-w:500; --pmm-card-w:500; --pmm-card-track:0; } /* THE ONE LAYOUT EXCEPTION — the header signature sits LEFT under this face (Caleb 2026-09-11) */ html body #nav .nav-logo--swap{ left:20px !important; transform:translate(0,-50%) !important; } html body #nav.scrolled .nav-logo--swap, html body #nav.is-menu .nav-logo--swap{ left:18px !important; } /* Stripe's ink for titles, through the standard (index.html paintStandard → --pmm-ink) */ html body #pm-services .pmsvc-h2{ color:#061b31 !important; } /* reading text: +.012em of air (Caleb: "no breathing room … stacked full of text") */ html body :is(.pmsvc-sub,.pmsvc-card__body,.ckfs-sub,.ckfs-cd,.asx__desc,.hx-sub,.pmts-sub,.lm-sub,.pmdemo-head__sub,.pmdemo-sub-m, .pm-testi-sub,.wlb__sub,.pmfc-sub,.pmfc-desc,.pmfc-card__s,.reassure__sub,.faq-sub,.pm-final-cta__meta,.pm-hww__note,.pm-hww__note-rest, .pmsvc-note,.pmsvc-note__rest,.pmws__txt,.pm-testi-quote,.faq-answer,.pmts-mx__sr,.ckf-close__p,.ckf-close__hire,.pm-hww__cfoot,.pm-hww__rd, .pm-hww__csub,.hero__sub,.asx__foot,.lm-listnote,.pmdemo-phone__hint,.faq-fine), html body .reassure p, html body #pm-food .ckfs-menu__list li{ letter-spacing:.012em !important; } /* emphasis inside prose */ html body p b, html body p strong, html body li b, html body li strong{ font-weight:500 !important; } /* ── Nunito bold → 500 ── */ html body #asx-section .asx__eyebrow, html body #asx-section .asx__heading, html body #asx-section .asx__heading em, html body #asx-section .asx__title{ font-weight:500 !important; } html body #faq .faq-badge, html body #faq .faq-eyebrow, html body #faq .faq-fine a, html body #faq .faq-title{ font-weight:500 !important; } html body #faq .faq-title em, html body #pm-fit .pmfc-card__t, html body #pm-fit .pmfc-eyebrow, html body #pm-fit .pmfc-tab{ font-weight:500 !important; } html body #pm-fit .pmfc-title, html body #pm-fit .pmfc-title em, html body #pm-food .ckf-close__hire a, html body #pm-food .ckf-close__p b{ font-weight:500 !important; } html body #pm-food .ckfs-ct, html body #pm-food .ckfs-ct em, html body #pm-food .ckfs-cta, html body #pm-food .ckfs-menu__t{ font-weight:500 !important; } html body #pm-food .ckfs-title, html body #pm-food .ckfs-title em, html body #pm-grocers .pmgro-phrase, html body #pm-services .pmsvc-card__btn{ font-weight:500 !important; } html body #pm-services .pmsvc-card__title, html body #pm-services .pmsvc-eyebrow, html body #pm-services .pmsvc-h2, html body #pm-services .pmsvc-h2 em{ font-weight:500 !important; } html body #pm-services b, html body #pm-what .pmwhat-close, html body #pm-what .pmwhat-close__x em, html body #pm-what .pmwhat-eyebrow{ font-weight:500 !important; } html body #pm-what .pmwhat-title, html body #pm-what .pmwhat-title em, html body #pm-what .pmws__name, html body #pm-what .pmws__tab{ font-weight:500 !important; } html body #pmFamilyMap .lm-eyebrow, html body #pmFamilyMap .lm-gpin__num, html body #pmFamilyMap .lm-title, html body #pmFamilyMap .lm-title em{ font-weight:500 !important; } html body #pmFinalCta .grad, html body #pmFinalCta .pm-final-cta__btn, html body #pmFinalCta .pm-final-cta__eyebrow, html body #pmInteractiveDemo .pmdemo-cta__label{ font-weight:500 !important; } html body #pmInteractiveDemo .pmdemo-head__eyebrow, html body #pmInteractiveDemo .pmdemo-head__title, html body #pmInteractiveDemo .pmdemo-head__title em, html body #pmToolShowcase .hx-phone-veil__pill span{ font-weight:500 !important; } html body #pmToolShowcase .pmts-m em, html body #s-flow-editorial-v2 .pm-hww__ctitle, html body #s-flow-editorial-v2 .pm-hww__eyebrow, html body #s-flow-editorial-v2 .pm-hww__h2{ font-weight:500 !important; } html body #s-flow-editorial-v2 .pm-hww__h2 em, html body #s-flow-editorial-v2 .pm-hww__mix-num, html body #s-flow-editorial-v2 .pm-hww__mix-title, html body #s-flow-editorial-v2 .pm-hww__rn{ font-weight:500 !important; } html body #s-flow-editorial-v2 .pm-hww__roman, html body #s-flow-editorial-v2 .pm-hww__rpct span, html body #s-flow-editorial-v2 .pm-hww__rt strong, html body #s-flow-editorial-v2 b{ font-weight:500 !important; } html body #spotlight .sp-title, html body #spotlight .sp-title em, html body #spotlight h3, html body #testimonials .pm-testi-h{ font-weight:500 !important; } html body #testimonials .pm-testi-h em, html body #testimonials .pm-testi-name, html body #testimonials .pm-testi-share__btn span, html body #waitlist-band .wlb__go{ font-weight:500 !important; } html body #waitlist-band .wlb__title, html body .hero .hero__btn, html body .hero .hero__eyebrow, html body .hero .hero__title{ font-weight:500 !important; } html body .hx .hx-cta, html body .hx .hx-kicker, html body .hx .hx-phone-veil__pill span, html body .hx .hx-title{ font-weight:500 !important; } html body .hx .hx-title em, html body .reassure .k, html body .reassure .k em, html body .reassure .reassure__title{ font-weight:500 !important; } html body .reassure .reassure__title span, html body .reassure strong{ font-weight:500 !important; } /* ── Nunito 500, and bold under 13px → 400 ── */ html body #asx-section .asx__pill span, html body #faq .faq-answer, html body #pm-fit .pmfc-about, html body #pm-fit .pmfc-cue{ font-weight:400 !important; } html body #pm-food .ckfs-cap, html body #pm-food .ckfs-menu__age, html body #pm-food .ckfs-swipe, html body #pmFamilyMap .lm-cat{ font-weight:400 !important; } html body #pmFamilyMap .lm-fam__name, html body #pmFamilyMap .lm-group__h, html body #pmFamilyMap .lm-place__name, html body #pmFamilyMap .lm-toggle__btn{ font-weight:400 !important; } html body #pmFamilyMap span, html body #s-flow-editorial-v2 .pm-hww__folio, html body #s-flow-editorial-v2 .pm-hww__mix-lab, html body #spotlight .sp-archive-mark{ font-weight:400 !important; } html body #spotlight div, html body #waitlist-band .wlb-spot__count span, html body #waitlist-band .wlb-spot__label, html body #waitlist-band .wlb__fact--m{ font-weight:400 !important; } html body #waitlist-band .wlb__facts span, html body .hx .hx-cta em, html body .hx .hx-kicker span, html body footer .footer-brand p{ font-weight:400 !important; } html body footer .footer-col h4, html body footer .is-locked-link, html body footer .nav-lock-soon, html body footer a{ font-weight:400 !important; } /* ── hand-set: the three the generator could not decide ── */ html body #faq .faq-question{ font-weight:500 !important; } /* Nunito 600 questions (the "Read more" row rides along) */ html body #pm-what .pmws-acc .pmws__name, html body #pm-what .pmws-acc .pmws__node.is-open .pmws__name{ font-weight:500 !important; } /* §3 sets these by id */ html body #pmToolShowcase .pmts-eyebrow .pmts-m{ font-weight:500 !important; } /* the eyebrow span shares .pmts-m with its title */ /* ── hand-set 2 (Caleb, from his phone) ── */ /* the map card's numbers are tags but they are numerals, not bold words — Nunito has them at its barely-there 500, so they read light there; here they go to 400 with the rest of the card */ html body #pmFamilyMap .lm-ostats b, html body #pmFamilyMap .lm-place__stat b, html body #pmFamilyMap .lm-place b, html body #pmFamilyMap .lm-fam b{ font-weight:400 !important; } /* "If this is what you want in your home," — Söhne's narrower letters let "this" climb onto the bold line; end the lead-in's line so "this is exactly the kind of person we send." reads whole, as in Nunito */ html body #pm-food .ckf-close__p b{ display:block; } /* ── hand-set 3 (Caleb: "Share your experience … everything is just so thick") — small UI text under 15px keeps Nunito's shape but not its bold: names, the share pill, "Learn more", tabs, chips, fine print. Lead-in bold words and titles stay at 500. ── */ html body #testimonials .pm-testi-name, html body #testimonials .pm-testi-share__btn, html body #testimonials .pm-testi-share__btn span, html body #pm-services .pmsvc-card__btn, html body #pm-fit .pmfc-tab, html body #pm-what .pmws__tab, html body #pm-what .pmwhat-close, html body #pm-what .pmwhat-close em, html body .hx .hx-phone-veil__pill span, html body #pmToolShowcase .hx-phone-veil__pill span, html body #faq .faq-fine a{ font-weight:400 !important; } /* ── hand-set 4 (2026-09-15) — THE CARVE-OUT THIS FILE ALREADY SAYS IT MADE ── The header comment above, at "TWO CARVE-OUTS", reads: footer .footer-col h4 -> 600 — "the titles should be a little bolder" (2026-09-14). Phone map says 400. Both are set by their own rules above and are deliberately absent here. It is not absent. `html body footer .footer-col h4` is still sitting in the 400 list a few lines up, so on a phone the footer headings render at 400 — the exact weight the carve-out was written to prevent. Nothing above it sets 600, so the note described an intention that was never coded. Caleb found it from his phone the next day: the footer "looks very weird". It looked weird because heading and link were the same size AND the same weight, leaving colour as the only signal of structure. ONLY the headings. The tagline was given 500 here on the same day and taken back out within the hour — Caleb: "this is too bold." It keeps the map's 400 and gets its presence from a darker ink instead (css/footer.css). The four headings are the one thing in this footer that should carry weight. Placed here rather than edited into the generated list above, because that list is machine-written from the emphasis map and will be regenerated. A hand-set block after it is how this file has taken every one of Caleb's phone corrections (see hand-set 2 and 3). Same specificity, later wins. */ html body footer .footer-col h4{ font-weight:600 !important; } }