/*
 | PUBLIC-SITE DISCIPLINE LAYER (main-site preview, 2026-09-28)
 |
 | Clement, 09-28: carry the typography and the rules made for the portal back onto the public site.
 | Source of each rule: public/portal-assets/portal-discipline.css (09-23, measured against Function
 | Health's member portal) and portal-refinement.css (the 09-09 approved direction), confirmed by the
 | portal session with computed values on 09-28. Loaded LAST on public pages so it can be read,
 | reviewed and folded back into the page files as one unit, the way the portal's layer was.
 |
 | Kept on purpose, because they are recorded decisions: the 24px card radius and gold ambient shadow
 | (DESIGN.md), Fraunces display with Helvetica for h3 down and every number, Plex Mono eyebrows,
 | Jacob's checkmark rows, the three tiers, the italic accent word (Jacob, 08-13 call: "I kind of
 | liked the cursive type font", recorded in ot-type.css). The portal dropped the italic on 09-23 for
 | its preview only. Here the upright version is a switch, html.type-upright, so both can be compared
 | in the preview before anyone decides (see section 7).
 |
 | Never loaded by the portal, so none of this can reach a member's pages.
 */

/* 1. ENTRANCE FROM VISIBLE. portal-discipline.css section 1. Every .reveal and .rise on these pages
   started at opacity 0, and a paused animation holds its first frame, so a background tab or a
   stalled observer showed blank sections. Settle from .8 instead; the motion stays a detail. */
.reveal:not(.in) { opacity: .8; }
/* od.css's rise keyframes name only the end state, so a visible start is all it needs; the separate
   blur animation on .pagehead.rise is left alone. */
.rise { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal:not(.in),
    .rise {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* 2. NO SYNTHESISED FACES. portal-refinement.css sets font-synthesis:none on the portal body. The
   legacy pages rendered their heading accent as a slanted Helvetica that the face does not draw
   (critique, 09-28). A face either has the style or it does not get one. */
body {
    font-synthesis: none;
}

/* 3. ONE FOCUS RING. portal-discipline.css section 3; DESIGN.md: "a visible 2px gold outline at 2px
   offset, never removed". Light gold on the dark bands, where the deep gold would disappear. */
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #7a5f22 !important;
    outline-offset: 2px !important;
}
:is(.dark, .cta, .edge, footer.site, .hero, .sj__stage, .tp-final, .vp-gap)
    :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline-color: #e2cb8c !important;
}

/* 4. THE EYEBROW VOICE. The portal renders its eyebrow at Plex Mono 11px, weight 500, 0.09em
   (portal-refinement.css:86,93, measured by the portal session). The public pages set the same
   label at 600 and 0.18 to 0.26em, which reads as shouting beside the portal. Size is left alone,
   only weight and tracking move. */
:is(
    .eyebrow,
    .pc-kicker,
    .vx-kicker,
    .sc-kicker,
    .tx-hero__kicker,
    .tp-hero__kicker,
    .tp-kicker,
    .pg-hero__kicker,
    .bk-eyebrow
) {
    font-weight: 500 !important;
    letter-spacing: 0.09em !important;
}

/* 5. GOLD IS RATIONED. portal-discipline.css section 2: gold keeps three jobs, the current nav item,
   the heading accent word and text links that act. An eyebrow is none of those, so on light ground
   it takes the portal's label grey (#6f6a5f, 5.2:1 on #FDFDFC). Anything inside a dark band or on a
   photograph keeps its light gold, because grey there fails contrast. The journey section and the two
   dark closing bands (.how-sj-on, .hiw-close, .wt-close) were missing from this list, which put grey
   on near-black at 3.4:1 (09-29 audit). */
:is(.eyebrow, .pc-kicker, .vx-kicker, .sc-kicker, .tx-hero__kicker, .tp-kicker, .pg-hero__kicker):not(:is(.dark, .cta, .edge, footer, .hero, .tp-final, .tp-hero, .vp-gap, .sj__stage, .how-sj-on, .hiw-close, .wt-close, .plan--black, .blk, [class*="--dark"]) *) {
  color: #6f6a5f !important;
}

/* 6. BUTTONS AND LINKS. portal-refinement.css:103-114: 46px pill, 14px/500, no hover lift; text
   links at least 44px tall. A lift says "this is an object"; a button already says it by being a
   pill. Keeps each page's own colours and shadows. */
:is(.btn, .tp-btn, .pg-cta-btn, .pg-aside-cta__btn, .vp-cta, .bk-btn):hover {
    transform: none !important;
}
:is(.tp-res, .vp-pair, .tp-how__step):hover {
    transform: none !important;
}

/* 7. HEADINGS ON THE OLDER PAGES. ot-type.css already makes every h1/h2 Fraunces; these pages beat it
   with their own class rules, which is why pricing, shop, treatments, about, legal and book
   rendered a 600-weight Helvetica heading (critique, 09-28). They take the portal page title here:
   Fraunces 400, tight tracking, 34px on a phone to 48px on desktop (portal-refinement.css:84,198,
   206; measured 38px at 375 in the portal). Section titles take the portal's section title. */
:is(
    .pc-title,
    .vx-title,
    .vp-name,
    .sc-h1,
    .tx-hero__title,
    .tp-hero__title,
    .pg-hero__title,
    .bk-h1
) {
    font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
    font-optical-sizing: auto;
    font-weight: 400 !important;
    font-size: clamp(2.125rem, 1.55rem + 2.2vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance;
}
.vp-name {
    font-size: clamp(1.875rem, 1.45rem + 1.7vw, 2.5rem) !important;
}
:is(
    .vx-h2,
    .vp-gap__title,
    .vp-sec__title,
    .sc-panel__h,
    .tp-h2,
    .tp-final__title,
    .pg-cta-wrap__title
) {
    font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
    font-optical-sizing: auto;
    font-weight: 400 !important;
    letter-spacing: -0.012em !important;
    line-height: 1.12 !important;
    text-wrap: balance;
}
/* CMS reading pages (/about, legal): their content headings were bold Helvetica. Section titles take
   the portal section title; h3 stays Helvetica, one step down, per DESIGN.md. */
.pg-body h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem) !important;
  letter-spacing: -.012em !important;
  line-height: 1.2 !important;
  color: #191713 !important;
}
.pg-body h3 { font-weight: 600 !important; letter-spacing: -.01em !important; color: #191713 !important; }
.tx-card__name {
    font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
    font-weight: 400 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}
/* The accent word on these headings: the brand's deep gold, set in the face's own italic. */
:is(
        .pc-title,
        .vx-title,
        .sc-h1,
        .tx-hero__title,
        .tp-hero__title,
        .pg-hero__title,
        .bk-h1,
        .vx-h2,
        .vp-gap__title,
        .vp-sec__title,
        .tp-h2,
        .tp-final__title,
        .pg-cta-wrap__title
    )
    :is(em, i) {
    font-family: inherit !important;
    font-style: italic;
    font-weight: 400 !important;
    color: #7a5f22;
}
:is(.tp-final, .vp-gap) :is(.tp-final__title, .vp-gap__title) :is(em, i) {
    color: #e2cb8c;
}

/* 8. WARM GROUND AND WARM READING TEXT. DESIGN.md's Warm-Only Rule: no pure white page, no cold grey.
   The shared layout painted body #FFFFFF (Tailwind bg-white) and the legal pages set their reading
   text in #4B5258, a blue slate. Page ground becomes the brand off-white, reading text the warm mute
   the portal uses (#565149, 7.3:1 on #FDFDFC). */
body.bg-white {
    background-color: #fdfdfc !important;
}
.pg-body {
    color: #565149 !important;
}

/* 9. NUMBERS ARE TABULAR. ot-type.css and portal-finish.css:21 set figures tabular where they are
   compared; the public price displays had not opted in. */
:is(
    .plan__amt,
    .plan__val,
    .pc-price,
    .pc-save,
    .vp-price,
    .vx-price,
    .sc-total,
    .sc-line__price,
    [class*="price"]
) {
    font-variant-numeric: tabular-nums;
}

/* 10. NO SLANTED TYPE. portal-discipline.css section 6 (Clement, 09-23: change "anything with the slant
   italic on it"), carried to the public site on his 09-28 instruction. The accent word keeps its gold;
   only the lean goes. Jacob asked for the italic on the 08-13 call (ot-type.css); ?type=italic shows
   that version in the preview for comparison, ?type=upright returns here. */
:is(em, i, cite, dfn, var, address) { font-style: normal !important; }
html.type-italic :is(h1, h2, .h1, .h2, .display) :is(em, i) { font-style: italic !important; }

/* 11. CONSENT TEXT IS READING TEXT. /membership/join: the SMS consent checkbox sits inside the phone
   field's .fg group, so funnel.css's `.fg label` (Plex Mono, uppercase, wide tracking, the field-label
   voice) cascaded into a 400-character legal sentence, 12+ lines of capitals on a phone, beside a
   marketing box set in normal sentence case. DESIGN.md: mono is for measured things, and prose never
   sets in mono. The wording is unchanged. */
.fg label.check, .fg label.check .ctext {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}
.fg label.check .ctext { font-size: 13px !important; line-height: 1.5 !important; color: #565149 !important; }


/* =====================================================================================================
   PORTAL SYSTEM, CARRIED OVER (09-28, second pass). Clement: take the portal's design choices, "from
   typography, slants, ui, frontend". Every value below was MEASURED in the portal preview
   (127.0.0.1:8792, 375px, Home and My Plan) with computed styles, not recalled:
     body     Helvetica Neue 15px/24px, -0.005em, ink #191713, page ground #FBF7EF
     title    Fraunces 400, -0.03em, 38px at 375; accent word deep gold #7a5f22, upright
     label    IBM Plex Mono 11px/500, 0.09em, uppercase, #6f6a5f; everything else is sentence case
     card     24px, 1px rgba(25,23,19,.1), #FFF to #FEFCF7, 0 1px 2px rgba(25,23,19,.03) + 0 6px 18px
              rgba(140,111,42,.05), 24px padding
     row      16px, hairline, #FDFDFC, 16px 18px, 14px gap; 38px icon tile, 11px radius, #FBF7EF with an
              inset hairline; title 16px/500 ink, line 14px/22px #565149
     button   46px pill, 14px/500, sentence case, no lift
   One portal element is NOT carried: the ink fill on primary buttons. Clement restored the gold
   gradient on the public site on 08-10 ("just doesn't match what we're going for", recorded in
   home-redesign.blade.php), and the portal itself uses gold on its dark theme. Geometry and type are.
   ===================================================================================================== */

/* 12. READING TYPE. */
body { color: #191713; letter-spacing: -.005em; }
body { font-size: 15px; line-height: 1.6; }
/* Intro lines take the portal lede (16px/1.6, warm mute) on light ground only. The photo hero keeps its
   own size and light colour: on 09-28 an earlier version of this rule set it in ink on the photograph. */
:is(.lead, .hiw-hero .lead, .tx-hero__sub, .pg-hero__sub, .vx-lede, .wte__lead):not(:is(.hero, .dark, .cta, .edge, .tp-hero, .sj__stage, .vp-gap) *) {
  font-size: 1rem !important; line-height: 1.6 !important; color: #565149;
}

/* 13. DISPLAY SCALE. The portal's title is Fraunces 400 at -0.03em; the public hero is a marketing
   display, so it keeps its two-line size on a phone (48px; one line at 41px crowded "Health." onto the
   brightest part of the photo, checked 09-28) and tops out at 80px instead of 102px, with the portal's
   weight and tracking. Section titles step down the same way the portal's do. */
.hero h1, .hero .h1, h1.hero__title { font-weight: 400 !important; letter-spacing: -.03em !important; line-height: 1.02 !important;
  font-size: clamp(3rem, 2rem + 4.2vw, 5rem) !important; }
:is(.h2, section h2):not(.tx-card__name):not(.sec-title) { font-weight: 400 !important; letter-spacing: -.02em !important; }
.h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem) !important; line-height: 1.1 !important; }
h3, .h3 { font-weight: 500 !important; letter-spacing: -.01em !important; }

/* 14. LABELS. Mono stays on eyebrows and on things read off an instrument (units, serials, step
   numbers, the card art). Prose and statuses leave it, in sentence case, the way the portal's tags,
   pills, drawer labels and status lines did (portal-refinement.css:82-151). */
:is(.plan__incl, .plan__val, .plan__val--sav, .plan__free, .plan__flag, .revcard__by, .cwms__by, .mq__pill,
    .pc-save, .pc-pending, .vp-gap__eg, .docard__role, .press__label, .hiw-hero__meta, .sj__tag, .s4__tag,
    .ring__lab, .st-eyebrow, .foot__bottom, .foot__bottom *, .foot__chip, .wt-cat__sub, .vx-ctl__label, .tx-card__cta) {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
:is(.plan__incl, .plan__val, .plan__free, .pc-pending, .vp-gap__eg, .hiw-hero__meta, .sj__tag, .s4__tag) { font-size: 13px !important; font-weight: 400 !important; }
.plan__val--sav { font-size: 13px !important; font-weight: 500 !important; }
.plan__incl { font-weight: 500 !important; }
.foot__bottom, .foot__bottom * { font-size: 12.5px !important; }
.foot__chip { font-size: 12px !important; }
.foot .foot__h { letter-spacing: .09em !important; font-weight: 500 !important; }
:is(.revcard__by, .cwms__by) { font-size: 13px !important; font-weight: 500 !important; color: #565149 !important; }
.mq__pill { font-size: 13px !important; }
/* The flag on the Gold card: Jacob, 08-28 call, "that needs to be bigger or bold... guys in their 50s
   are not going to be able to read it". Sentence case at 12px/600 does both. */
.plan__flag { font-size: 12px !important; font-weight: 600 !important; }
.pc-save { font-size: 12px !important; font-weight: 500 !important; color: #565149 !important; background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(25,23,19,.14) !important; }
/* Remaining mono labels take the portal's label voice exactly. */
:is(.eyebrow, .plan__cat, .plan__name, .hstrip__num, .sj__num, .s4__num, .ba__tag, .vx-card__eyebrow, .vp-gap__label,
    .vp-gap__kicker, .vp-sec__kicker, .vp-brand, .pc-kicker, .tp-kicker, .tp-hero__kicker, .sl, .pl, .n) {
  font-weight: 500 !important; letter-spacing: .09em !important;
}

/* 15. SURFACES. Page ground is the portal's paper; cards are the portal's card. Surfaces that sit on a
   photograph or a dark band keep their own ground. */
html body { background-color: #FBF7EF !important; }
:is(.revcard, .cred, .wtile, .docard, .wt-cat, .wt-panel, .pc-card, .vx-card, .vp-buy, .vp-tile, .tp-how__step, .tx-card, .after__item, .hiw-card, .pg-aside-cta) {
  border-radius: 24px !important;
  border: 1px solid rgba(25, 23, 19, .1) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FEFCF7 100%) !important;
  box-shadow: 0 1px 2px rgba(25, 23, 19, .03), 0 6px 18px rgba(140, 111, 42, .05) !important;
}
.vp-strip { border-radius: 16px !important; }
.plan:not(.plan--black) { border: 1px solid rgba(25, 23, 19, .1) !important;
  box-shadow: 0 1px 2px rgba(25, 23, 19, .03), 0 6px 18px rgba(140, 111, 42, .05) !important; }
/* The portal removed hover lifts and radial glows (portal log, round 33). */
:is(.plan, .revcard, .wtile, .tx-card, .vx-card, .docard):hover { transform: none !important; }
.plan--feat::before { display: none !important; }

/* 16. ROWS. Lists of "what happens" become the portal's Today rows: icon tile, a 16px/500 title and one
   14px line. /how-it-works "What happens right after you sign up" is the same content the portal
   shows a new member, so it takes the same shape. */
.after__grid { gap: 10px !important; }
.after__item { display: flex !important; align-items: flex-start !important; gap: 14px !important; padding: 16px 18px !important;
  border-radius: 16px !important; background: #FDFDFC !important; box-shadow: 0 2px 5px rgba(122, 95, 34, .03) !important; text-align: left !important; }
.after__item > svg { width: 38px !important; height: 38px !important; flex: none !important; padding: 9px !important; border-radius: 11px !important;
  background: #FBF7EF !important; box-shadow: inset 0 0 0 1px rgba(25, 23, 19, .1) !important; color: #191713 !important; stroke: #191713 !important; }
.after__item b { display: block; font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important; color: #191713 !important; }
.after__item span { display: block; margin-top: 3px; font-size: 14px !important; line-height: 1.6 !important; color: #565149 !important; }

/* 17. BUTTONS. Portal geometry and type (46px, 14px/500, sentence case, 11px 22px). Fills unchanged. */
:is(.btn, .tp-btn, .pc-cta, .vp-cta, .sc-add, .pnl-cta, .vx-kit__go, .vp-join, .stickycta__btn, .foot__newsbtn, .pc-card__btn, .cart-cta) {
  min-height: 46px !important; font-size: 14px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
.btn { padding: 11px 22px !important; }
.btn.btn--lg { min-height: 50px !important; padding: 13px 26px !important; font-size: 15px !important; }
.pc-ask { min-height: 44px !important; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }

/* 18. THE LABEL FLOOR. The portal's smallest text is 11px (portal-refinement.css --fs-micro); the public
   labels ran down to 8.5px (hero stat labels), 9px and 10px. Measured on the homepage 09-28. The
   membership-card art keeps its own sizes: it is a drawing of a card, not a label. */
:is(.pl, .sl, .stickycta__k, .docard__edu, .plan__cat, .ba__tag, .cwms__h, .foot .foot__h, .cartp__title, .vx-card__eyebrow,
    .vp-gap__label, .vp-brand, .vp-sec__kicker, .pc-kicker, .tp-kicker, .tp-hero__kicker, .pg-hero__kicker, .tx-hero__kicker) {
  font-size: 11px !important;
}
/* Prices are numbers, and numbers are Helvetica with tabular figures (DESIGN.md, Measure Boundaries). */
:is(.plan__annual, .plan__annual *, .cart-addbtn i, .vp-gap__price, .pc-m, .pc-nm) {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important; font-variant-numeric: tabular-nums;
}

/* 19. STEPS AS PORTAL ROWS. The treatment pages' four steps were tall cards with a 48px number at 12%
   opacity (a ghost numeral, a decoration). They take the portal's Today row: the number in a 38px tile
   in the label voice, a 16px/500 title, one 14px line. */
.tp-how__grid { gap: 10px !important; }
.tp-how__step { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; column-gap: 14px !important;
  align-items: start !important; padding: 16px 18px !important; border-radius: 16px !important; background: #FDFDFC !important;
  box-shadow: 0 2px 5px rgba(122, 95, 34, .03) !important; }
.tp-how__num { grid-row: 1 / span 2 !important; width: 38px !important; height: 38px !important; margin: 0 !important; display: grid !important;
  place-items: center !important; border-radius: 11px !important; background: #FBF7EF !important; box-shadow: inset 0 0 0 1px rgba(25, 23, 19, .1) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: .09em !important; line-height: 1 !important; color: #6f6a5f !important; }
.tp-how__step-title { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important; margin: 0 0 3px !important; }
.tp-how__step-desc { font-size: 14px !important; line-height: 1.6 !important; color: #565149 !important; }

/* The older pages' section kickers were bold Helvetica capitals; they take the portal's label face. */
:is(.tp-kicker, .tp-hero__kicker, .pg-hero__kicker, .tx-hero__kicker, .pc-kicker, .vx-kicker, .sc-kicker, .bk-eyebrow) {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important; text-transform: uppercase !important;
}

/* 20. THE HEADER KEEPS ITS OWN CONTROLS. The portal geometry in section 17 is for page buttons; applied
   to the header's compact "Become a member" pill it widened it, and the logo (flex item, height 25px,
   width auto) shrank to 20px on a 375px phone (measured 09-28). The header pill keeps its size and
   the logo never shrinks. */
.nav .btn { min-height: 0 !important; padding: .55rem 1.05rem !important; font-size: 13px !important; }
@media (max-width: 420px) { .nav--solid .nav__right .btn--gold { padding: .45rem .8rem !important; font-size: 12px !important; } }
.nav__drawer .btn { min-height: 46px !important; padding: 11px 22px !important; font-size: 14px !important; }
.nav .brand-logo { flex: none !important; min-width: max-content; }
.nav a:has(> .brand-logo) { flex: none !important; }

/* 21. THE FLOOR, REMAINING PAGES (swept 09-28 at 375: every leaf text under 11px, card art excluded).
   /pricing cell labels were 8.5px; /shop control labels 10px; homepage score, count and press labels
   9 to 10.5px. The words beside a price ("member", "non-member") step to 12px because they are read
   with the figure. */
:is(.pc-card dt, .vp-gap__kicker, .vx-search__label, .vx-ctl__label, .revshelf__count, .ring__lab, .st-eyebrow, .docard__edu, .press__label) {
  font-size: 11px !important;
}
.vx-per { font-size: 12px !important; }
/* The example line in the dark price band was #5B5750 at 85% on #191713, near 2:1 (it was like that
   before 09-28). It takes the band's own light text at reading opacity. */
.vp-gap .vp-gap__eg { color: rgba(245, 241, 230, .72) !important; opacity: 1 !important; }
/* /pricing category heads carry a 9.5px source note in a bare span (VitaBoom, Member pricing, Rx). */
:is(.pc-cards__band, .pc-band, thead, .pc-table caption) h2 > span, .pc-cards__band h2 span { font-size: 11px !important; letter-spacing: .09em !important; }
/* Membership funnel (od.css/funnel.css outside the portal shell, so the portal's 11px floor never reached
   it): field labels 9px, step labels 8.5 to 9.5px, "Required" tags 8px, measured 09-28 at 375. */
:is(.fg label, .rl, .req-tag, .sf-lab, .per, .eyebrow, .docard__edu b, .stp, .step-lab, .sum-lab) { font-size: 11px !important; }

/* 22. THE FUNNEL'S OWN PLAN CARDS AND LABELS (/membership, /join, /checkout). Same rules as the homepage
   cards: values, savings lines, flags and fine print leave mono for sentence case; category and field
   labels keep the label voice at the 11px floor. Measured 09-28 at 375. */
:is(.db-mk b, .db-annual, .db-annual *, .sv, .db-chip, .db-fold, .tier-fine, .gpill__count, .gpill__num, .rv-meta, .sc-switch) {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
:is(.db-mk b, .db-annual, .sv, .tier-fine, .gpill__count, .rv-meta) { font-size: 13px !important; }
.sv { font-weight: 500 !important; }
.db-chip { font-size: 12px !important; font-weight: 600 !important; }
.db-fold { font-size: 12px !important; font-weight: 500 !important; }
:is(.gpill__num, .sc-switch) { font-size: 12px !important; }
:is(.db-cat, .card-label, .db-tiername) { font-size: 11px !important; letter-spacing: .09em !important; font-weight: 500 !important; }
.checkout dt, main dl dt, .sum dt { font-size: 11px !important; }
small { font-size: max(11px, .8em); }
.gpill__stars { font-size: 11px !important; }
.billopt__price small { font-size: 11px !important; }
.mwins-by { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 500 !important; }

/* 23. THE ACCENT WORD'S DEFAULT. The portal's accent word is deep gold (#7a5f22, measured). Pages that
   never set one (the /panels pages) rendered it in ink. Zero specificity, so any page or dark-band rule
   that already colours its accent still wins. */
:where(h1, h2) :where(em, i) { color: #7a5f22; }


/* 25. THE OLDER CONTENT PAGES (09-29 audit). /blog, /resources and their article pages still wore the
   Wix-era header: a bold copper #8B4A0F kicker, a 700-weight sans title, an italic Fraunces tagline,
   copper uppercase card links and a black pill. They take the same system as every page above:
   mono labels in the portal's label grey, Fraunces 400 titles, upright type, deep-gold text links in
   sentence case, and the public site's gold pill. Copy and structure are untouched. */
:is(.bi-hero__kicker, .ri-hero__kicker, .rs-hero__kicker, .bs-aside-cta__kicker, .rs-aside-cta__kicker) {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: 11px !important;
  font-weight: 500 !important; letter-spacing: .09em !important; color: #6f6a5f !important;
}
:is(.bi-hero__title, .ri-hero__title, .rs-hero__title) {
  font-family: "Fraunces", Georgia, serif !important; font-weight: 400 !important; letter-spacing: -.03em !important;
  line-height: 1.05 !important; font-size: clamp(2.125rem, 1.55rem + 2.2vw, 3rem) !important;
}
:is(.bi-hero__tagline) { font-style: normal !important; font-weight: 400 !important; color: #7a5f22 !important; }
:is(.ri-cta-wrap__title, .bs-cta-wrap__title, .rs-cta-wrap__title, .bs-aside-cta__title, .rs-aside-cta__title,
    .ri-empty__title, .bi-empty__title, .sc-empty__t) {
  font-family: "Fraunces", Georgia, serif !important; font-weight: 400 !important; letter-spacing: -.02em !important;
}
.sc-empty__t { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem) !important; line-height: 1.1 !important; }
.bi-card__meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-weight: 500 !important;
  letter-spacing: .09em !important; color: #6f6a5f !important;
}
.bi-card__cta {
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: #7a5f22 !important;
}
:is(.ri-cta-btn, .bs-cta-btn, .rs-cta-btn, .bs-aside-cta__btn, .rs-aside-cta__btn) {
  min-height: 46px !important; font-size: 14px !important; font-weight: 500 !important;
  color: #191713 !important; background: linear-gradient(180deg, #E6CB84, #CFA94E) !important;
  box-shadow: 0 6px 18px rgba(140, 111, 42, .18) !important; transform: none !important;
}


/* 26. THE FLOOR, WHAT THE 09-29 AUDIT STILL FOUND UNDER 11px. The funnel's trust lines ("Secured by
   Stripe", "256-bit encryption", "HIPAA compliant") were 8.5 to 9px, the join form note 8.5px, the
   back links 9px, the /pricing table heads 9.5px and the affiliates labels 10.5px. Card art (.mcard)
   stays excluded: it is a picture of a card, not text to read. */
:is(.trust > span, .pay-trust > span, .secure-note, .form-note, .back-link, .pc th, .pc th > span,
    .afp-kicker, .afp-tl__chip, .afp-hero__eyebrow) { font-size: 11px !important; }


/* 27. TAP TARGETS ON A PHONE (09-29 audit, measured at 375). WCAG 2.2 asks for 24px at least; the
   portal works to 44px. Each control keeps its look: text controls without a background grow by
   padding with a matching negative margin, so nothing moves; controls with a background, or whose
   ::after is already a tooltip, get an invisible ::before hit area. Footer links are inline text at a
   34px pitch, so 9px of padding gives each a 34px target that touches its neighbour without
   overlapping. The review dots were 10px at an 18px pitch; they move to a 24px pitch so each 24px
   target stands clear. The shop checkboxes sit inside 44px labels already and are left alone. */
footer li > a { padding-block: 9px; }
.nav .brand { padding-block: 12px; margin-block: -12px; }
.nav .btn { position: relative; }
.nav .btn::before { content: ""; position: absolute; inset: -5px 0; }
:is(.back-link, .tp-hero__back, .afp-trust__google, .vp-crumb a) { padding-block: 12px; margin-block: -12px; }
.pc-card__safety { padding-block: 13px; margin-block: -13px; }
.vx-advnote summary { padding-block: 11px; margin-block: -11px; }
:is(.sc-switch, .pc-view) { padding-block: 13px; }
.pc-view { padding-inline: 8px; margin-inline: -8px; }
:is(.plan__inf, .db-inf)::before { content: ""; position: absolute; inset: -14px; }
.gpill { position: relative; } /* .ba-nav is already absolute, so its ::before needs nothing more */
.gpill::before { content: ""; position: absolute; inset: -7px 0; }
.ba-nav::before { content: ""; position: absolute; inset: -2px; }
.revshelf__dots { gap: 14px !important; }
.revshelf__dot { position: relative; }
.revshelf__dot::before { content: ""; position: absolute; inset: -7px; }
/* Legal pages: contact links that stand on their own line measured 19px tall. Inline padding grows the
   target to 27px without moving the text (09-29 audit). */
.pg-body a { padding-block: 4px; }