/* ============================================================
   All Day Slimming Tea — Shared Design System
   v1.0 · 2026-05-14
   Goal: unified typography, palette, and tap-target sizing
   across the buy page + legal pages. Accessibility-first for
   users 40+ (≥17–18px base, AA contrast, 48px+ tap targets).
   Loaded LAST so cascade wins over inline page styles.
   ============================================================ */

/* ---------- Design tokens (palette + scale) ---------- */
:root {
  /* Brand palette — tuned to match the official ClickBank lander
     (orange CTAs, tea-green accents, near-black text on white). */
  --ds-brand-primary:    #ff6a00;
  --ds-brand-primary-d:  #e85a00;
  --ds-brand-primary-l:  #fff4ea;
  --ds-brand-green:      #2ea84f;
  --ds-brand-green-d:    #1f8a3d;

  --ds-text:             #1a1a1a;   /* AAA on white */
  --ds-text-soft:        #2a3a49;
  --ds-text-muted:       #5a6a78;   /* still ≥4.5:1 on white */

  --ds-bg:               #ffffff;
  --ds-surface:          #f7f9fb;
  --ds-border:           #dde5ec;

  --ds-success:          #1f8a3d;
  --ds-warning:          #d97706;
  --ds-danger:           #c0392b;

  --ds-radius-sm:        8px;
  --ds-radius-md:        12px;
  --ds-radius-pill:      999px;

  --ds-shadow-cta:       0 6px 18px rgba(255, 106, 0, .28);
  --ds-shadow-cta-hover: 0 8px 22px rgba(255, 106, 0, .36);
}

/* ---------- Base typography (40+ legibility) ----------
   17px on phones, 18px on tablets+ so 1rem reads comfortably.
   We avoid overriding font-family on the buy page so Jost
   (already loaded by Mobirise) keeps its identity there. */
html { font-size: 17px; }
@media (min-width: 768px)  { html { font-size: 18px; } }
@media (min-width: 1200px) { html { font-size: 18px; } }

body {
  line-height: 1.65;
  color: var(--ds-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Legal/Static pages (no Mobirise) get system-ui everywhere. */
body.ds-legal,
body.ds-legal p,
body.ds-legal li,
body.ds-legal h1,
body.ds-legal h2,
body.ds-legal h3,
body.ds-legal nav,
body.ds-legal footer {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Comfortable body copy on legal pages */
body.ds-legal p,
body.ds-legal li {
  font-size: 1.0625rem;      /* ≈18–19px */
  line-height: 1.75;
  color: var(--ds-text-soft);
}

body.ds-legal small,
body.ds-legal .muted,
body.ds-legal footer {
  font-size: 0.95rem;        /* ≈16–17px — no more 13px footer */
  color: var(--ds-text-muted);
}

/* Headings — bigger, breathable */
body.ds-legal h1 {
  font-size: clamp(1.85rem, 4.2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ds-text);
}
body.ds-legal h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  margin-top: 2rem;
  color: var(--ds-text);
}
body.ds-legal h3 { font-size: 1.2rem; line-height: 1.35; }

/* Nav links on legal pages — readable, not 14px grey */
body.ds-legal nav a {
  font-size: 1rem;
  color: var(--ds-text-soft);
  padding: 6px 4px;          /* enlarge hit area */
  display: inline-block;
}

/* ---------- CTA buttons: bigger + consistent ----------
   Three contexts:
   1) Legal-page `.cta` pill in the header
   2) Mobirise buy page  `.btn.btn-warning` (incl. display-4/5/7)
   3) Mobirise buy page  `.navbar-buttons .btn` (header)
   4) Pricing tier links `.btn-tier`
   All tuned to be easy to tap (≥48px) but not cartoonish. */

/* (1) Legal-page header CTA pill */
body.ds-legal header .cta,
body.ds-legal a.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  font-size: 1.0625rem;      /* ≈18px */
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff !important;
  background: var(--ds-brand-primary);
  border: 0;
  border-radius: var(--ds-radius-pill);
  box-shadow: var(--ds-shadow-cta);
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
body.ds-legal header .cta:hover,
body.ds-legal a.cta:hover {
  background: var(--ds-brand-primary-d);
  box-shadow: var(--ds-shadow-cta-hover);
  text-decoration: none;
}
body.ds-legal header .cta:active { transform: translateY(1px); }
body.ds-legal header .cta:focus-visible,
body.ds-legal a.cta:focus-visible {
  outline: 3px solid #ffd3a8;
  outline-offset: 3px;
}

/* (2) Mobirise primary CTA — enlarge ALL btn-warning across the
       buy page so "ORDER NOW", "SHOP NOW", "GET YOUR BOTTLE TODAY",
       "GET A DISCOUNT 50% OFF", "GET 50% DISCOUNT NOW" are all
       comfortably tappable. We don't recolor — Mobirise's warning
       orange already matches the brand. */
body .btn.btn-warning {
  min-height: 56px;
  padding: 16px 30px !important;
  font-size: 1.15rem !important;   /* ≈21px desktop, 19–20px mobile */
  font-weight: 700;
  line-height: 1.15;
  border-radius: 14px !important;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(255, 122, 0, .25);
  transition: box-shadow .15s ease, transform .05s ease, filter .15s ease;
}
body .btn.btn-warning:hover {
  box-shadow: 0 10px 24px rgba(255, 122, 0, .35);
  filter: brightness(1.04);
}
body .btn.btn-warning:active { transform: translateY(1px); }
body .btn.btn-warning:focus-visible {
  outline: 3px solid #ffd3a8;
  outline-offset: 3px;
}

/* The Mobirise nav-bar order button is the smallest one on the page —
   give it a touch more height so it's clearly tappable on mobile. */
body .navbar-buttons.mbr-section-btn .btn.btn-warning {
  min-height: 50px;
  padding: 12px 22px !important;
  font-size: 1.05rem !important;
  border-radius: var(--ds-radius-pill) !important;
}

/* Mobirise size-modifier classes — keep them visually distinct
   but never below our minimums. */
body .btn.btn-warning.display-7 { font-size: 1.1rem  !important; }
body .btn.btn-warning.display-5 { font-size: 1.25rem !important; min-height: 60px; padding: 18px 32px !important; }
body .btn.btn-warning.display-4 { font-size: 1.05rem !important; }   /* nav variant */

/* (4) Pricing tier buttons on the buy page */
body .btn-tier {
  display: block;
  text-align: center;
  min-height: 54px;
  padding: 15px 20px !important;
  font-size: 1.08rem !important;
  font-weight: 800;
  line-height: 1.15;
  border-radius: var(--ds-radius-md) !important;
  letter-spacing: 0.01em;
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}
body .btn-tier:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  text-decoration: none;
}
body .btn-tier:active { transform: translateY(1px); }
body .btn-tier:focus-visible {
  outline: 3px solid #ffd3a8;
  outline-offset: 3px;
}

/* Tap-target safety net — any anchor/button that looks
   clickable should be ≥44px high on touch screens. */
@media (hover: none) and (pointer: coarse) {
  body.ds-legal a.cta,
  body .btn.btn-warning,
  body .btn-tier {
    min-height: 52px;
  }
}

/* ---------- Mobile polish ---------- */
@media (max-width: 600px) {
  /* Legal-page header: stack and full-width CTA so it's reachable. */
  body.ds-legal header .wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  body.ds-legal header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    width: 100%;
  }
  body.ds-legal header nav a {
    margin: 0;
  }
  body.ds-legal header nav a.cta {
    width: 100%;
    margin-top: 6px;
  }

  /* Buy page: the Mobirise primary CTAs hug content width on phones
     so users don't miss them with a thumb. */
  body .btn.btn-warning {
    width: 100%;
    max-width: 420px;
    padding: 16px 22px !important;
  }
  body .navbar-buttons.mbr-section-btn .btn.btn-warning {
    width: auto;          /* keep header pill compact */
    max-width: none;
  }
  body .btn-tier {
    width: 100%;
  }
}

/* ---------- Print: hide CTAs (they aren't tappable on paper) ---------- */
@media print {
  body .btn.btn-warning,
  body .btn-tier,
  body.ds-legal a.cta {
    display: none !important;
  }
}

/* ============================================================
   BUY PAGE — Section polish (all-day-slimming-tea-buy.html only)
   Scoped via Mobirise's unique cid-/id- selectors so nothing
   else on the site is affected. Goals:
   - Themed (orange) section headings with strong contrast
   - The "Limited Time" line under the hero bottle uses the
     Mobirise font stack and is properly centered
   - Pricing tier cards + bonuses sections match the brand
   - Buttons below images are flex-centered (not left-floated)
   ============================================================ */

/* 1. Brand-orange section headings (pricing + order + bonuses) */
.cid-sKy7YKiKVs .mbr-section-title,
.cid-tq5OSuAQeg .mbr-section-title,
.cid-tq5PtlefNK .mbr-section-title,
.cid-adst-bonuses .mbr-section-title {
  color: var(--ds-brand-primary) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
.cid-sKy7YKiKVs .mbr-section-subtitle,
.cid-tq5OSuAQeg .mbr-section-subtitle,
.cid-tq5PtlefNK .mbr-section-subtitle,
.cid-tkwttKNYNK .mbr-section-subtitle {
  color: var(--ds-text) !important;
  font-weight: 700 !important;
}

/* 2. "Limited Time – Get All Day Slimming Tea at 50% OFF Today!"
      (bare <strong><u> under the hero bottle image — line 302).
      Force Mobirise's Jost font + brand orange so it reads as a
      proper micro-headline instead of browser-default bold text. */
#header14-28 .image-wrapper { text-align: center; }
#header14-28 .image-wrapper > strong {
  display: inline-block;
  margin: 16px auto 8px;
  font-family: "Jost", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ds-brand-primary);
  letter-spacing: 0.005em;
}
#header14-28 .image-wrapper > strong u {
  text-decoration: none;
  border-bottom: 3px solid var(--ds-brand-primary);
  padding-bottom: 2px;
}

/* 3. Hero bottle CTA: center under the image, not left-aligned */
#header14-28 .image-wrapper .mbr-section-btn {
  display: flex;
  justify-content: center;
  margin: 6px auto 0;
}

/* 4. Center the 5-star ratings row (was float-left). */
#header14-28 .ratings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
}
#header14-28 .ratings .rating-box {
  float: none !important;
  margin-right: 0 !important;
}
#header14-28 .ratings .r-lnk {
  color: var(--ds-text-soft);
  font-weight: 600;
}

/* 5. Pricing tier cards — re-skin to brand palette */
#content4-1y .adst-tier {
  border: 2px solid #eadfd2;
  background: #ffffff;
}
#content4-1y .adst-tier.best {
  border-color: var(--ds-brand-primary);
  background: var(--ds-brand-primary-l);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, .12),
              0 8px 22px rgba(0, 0, 0, .08);
}
#content4-1y .adst-tier .ribbon         { background: var(--ds-danger); }
#content4-1y .adst-tier.best .ribbon    { background: var(--ds-brand-primary); }
#content4-1y .adst-tier h3              { color: var(--ds-text); font-weight: 800; }
#content4-1y .adst-tier .now            { color: var(--ds-success); }
#content4-1y .adst-tier .save           { background: var(--ds-success); color: #fff; }
#content4-1y .adst-tier.best .save      { background: var(--ds-brand-primary); }
#content4-1y .adst-tier .ship.free      { color: var(--ds-success); }
#content4-1y .adst-tier .bonus-tag {
  background: #fff4ea;
  color: var(--ds-brand-primary-d);
  border: 1px solid rgba(255, 106, 0, .35);
  font-weight: 700;
}
#content4-1y .adst-tier .btn-tier {
  background: var(--ds-brand-primary) !important;
  color: #ffffff !important;
}
#content4-1y .adst-tier .btn-tier:hover {
  background: var(--ds-brand-primary-d) !important;
}
#content4-1y .adst-scarcity {
  background: var(--ds-brand-primary-l);
  border: 1px dashed var(--ds-brand-primary);
  color: var(--ds-brand-primary-d);
  font-weight: 700;
}

/* 6. "GET 50% DISCOUNT NOW" — center it under the tier grid */
#content4-1y .mbr-section-btn.align-center {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* 7. Money-back section ("GET YOUR BOTTLE TODAY") — center the CTA */
#header11-j .text-wrapper .mbr-section-btn {
  display: flex;
  justify-content: center;
  margin-top: 18px !important;
}

/* 8. Pricing image sections — center the image + tighten spacing */
#image3-l .image-wrapper,
#image3-1o .image-wrapper {
  display: flex;
  justify-content: center;
  text-align: center;
}
#image3-l .image-wrapper img,
#image3-1o .image-wrapper img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

/* 9. Bonuses section — themed gradient + branded badges + AAA contrast */
#content4-bonuses {
  background: linear-gradient(180deg, #fffaf2 0%, #fff6e8 100%);
  padding: 48px 0 56px;
}
#content4-bonuses .mbr-section-title {
  color: var(--ds-brand-primary) !important;
  font-weight: 800 !important;
}
#content4-bonuses .adst-bonus {
  background: #ffffff;
  border: 1px solid #f3d9a6;
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
#content4-bonuses .adst-bonus:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
}
#content4-bonuses .adst-bonus .tag {
  background: var(--ds-brand-primary);
  color: #ffffff;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 5px 14px;
}
#content4-bonuses .adst-bonus h3 {
  color: var(--ds-text);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
}
#content4-bonuses .adst-bonus p {
  color: var(--ds-text-soft);
  font-size: 1rem;
  line-height: 1.65;
}

/* 10. Mobile: keep hero "Limited Time" + ratings centered */
@media (max-width: 600px) {
  #header14-28 .image-wrapper > strong {
    font-size: 1.05rem;
    padding: 0 8px;
  }
  #header14-28 .ratings { width: 100%; justify-content: center; }
}

/* ============================================================
   BUY PAGE — Pricing + Bonuses TYPOGRAPHY (rev 2)
   Increases font sizes for 40+ readability, unifies on the
   Jost font stack, and tightens visual hierarchy.
   Uses !important to defeat the section's inline <style>.
   ============================================================ */

/* -- Font stack shorthand variable for this block -- */
:root { --ds-font-jost: "Jost", system-ui, -apple-system, "Segoe UI",
                       Roboto, "Helvetica Neue", Arial, sans-serif; }

/* 11. Scarcity banner — bigger, calmer, brand-warm */
#content4-1y .adst-scarcity {
  font-family: var(--ds-font-jost) !important;
  font-size: 1.0625rem !important;          /* 17–18px */
  line-height: 1.5 !important;
  padding: 16px 22px !important;
  letter-spacing: 0.005em;
  font-weight: 700 !important;
}
#content4-1y .adst-scarcity strong {
  font-size: 1.18rem;                       /* highlights "$300" */
  color: var(--ds-brand-primary-d);
  font-weight: 800;
}

/* 12. "Choose Your All Day Slimming Tea Package" heading + subtitle */
#content4-1y .mbr-section-subtitle {
  font-family: var(--ds-font-jost) !important;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: var(--ds-brand-primary) !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.01em;
}
#content4-1y .title > p.align-center {
  font-family: var(--ds-font-jost) !important;
  font-size: 1.0625rem !important;
  line-height: 1.55 !important;
  color: var(--ds-text-soft) !important;
  margin-bottom: 24px !important;
}

/* 13. Pricing tier cards — typography scale */
#content4-1y .adst-tier {
  font-family: var(--ds-font-jost) !important;
  padding: 26px 20px !important;
}
#content4-1y .adst-tier h3 {
  font-size: 1.4rem !important;             /* 22–23px */
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em;
  margin: 10px 0 6px !important;
}
#content4-1y .adst-tier .sup {
  font-size: 1rem !important;               /* 16px */
  line-height: 1.45 !important;
  color: var(--ds-text-muted) !important;
  margin-bottom: 14px !important;
}
#content4-1y .adst-tier .was {
  font-size: 1.05rem !important;            /* 17px */
  color: var(--ds-text-muted) !important;
}
#content4-1y .adst-tier .now {
  font-size: clamp(2.2rem, 5vw, 2.6rem) !important;    /* 35→42px */
  font-weight: 800 !important;
  line-height: 1.05 !important;
  margin: 4px 0 !important;
  color: var(--ds-success) !important;
  letter-spacing: -0.015em;
}
#content4-1y .adst-tier.best .now {
  font-size: clamp(2.5rem, 5.8vw, 2.95rem) !important; /* 40→47px */
  color: var(--ds-brand-primary-d) !important;
}
#content4-1y .adst-tier .each {
  font-size: 1rem !important;               /* 16px */
  color: var(--ds-text-soft) !important;
  margin-bottom: 12px !important;
}
#content4-1y .adst-tier .save {
  font-size: 1.05rem !important;            /* 17px */
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  letter-spacing: 0.01em;
  margin: 8px 0 !important;
}
#content4-1y .adst-tier .ship {
  font-size: 1rem !important;               /* 16px */
  font-weight: 600 !important;
  margin: 10px 0 !important;
  color: var(--ds-text-soft) !important;
}
#content4-1y .adst-tier .ship.free {
  color: var(--ds-success) !important;
  font-weight: 700 !important;
}
#content4-1y .adst-tier .bonus-tag {
  font-size: 0.95rem !important;            /* 15px */
  padding: 7px 12px !important;
  border-radius: 8px !important;
  margin-bottom: 14px !important;
  font-weight: 700 !important;
}
#content4-1y .adst-tier .ribbon {
  font-size: 0.85rem !important;            /* 14px */
  font-weight: 800 !important;
  padding: 6px 18px !important;
  letter-spacing: 0.06em;
  top: -16px !important;
  border-radius: 999px !important;
}
#content4-1y .adst-tier .btn-tier {
  font-size: 1.15rem !important;            /* 18.5px */
  font-weight: 700 !important;
  padding: 16px 16px !important;
  min-height: 56px;
  border-radius: 10px !important;
  letter-spacing: 0.005em;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#content4-1y .adst-tier .guarantee {
  font-size: 0.95rem !important;            /* 15px */
  font-weight: 600 !important;
  color: var(--ds-text-soft) !important;
  margin-top: 12px !important;
  letter-spacing: 0.005em;
}

/* 14. Bonuses section — typography scale */
#content4-bonuses .mbr-section-title {
  font-family: var(--ds-font-jost) !important;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  margin-bottom: 10px !important;
}
#content4-bonuses .title > p.align-center {
  font-family: var(--ds-font-jost) !important;
  font-size: 1.0625rem !important;          /* 17–18px */
  line-height: 1.55 !important;
  color: var(--ds-text-soft) !important;
  margin-bottom: 24px !important;
}
#content4-bonuses .adst-bonus {
  font-family: var(--ds-font-jost) !important;
  padding: 26px 22px !important;
}
#content4-bonuses .adst-bonus .tag {
  font-size: 0.95rem !important;            /* 15px */
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  letter-spacing: 0.04em;
}
#content4-bonuses .adst-bonus h3 {
  font-size: 1.25rem !important;            /* 20px */
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 12px 0 8px !important;
  color: var(--ds-text) !important;
}
#content4-bonuses .adst-bonus p {
  font-size: 1.0625rem !important;          /* 17–18px */
  line-height: 1.7 !important;
  color: var(--ds-text-soft) !important;
  margin: 0 !important;
}

/* 15. Mobile (≤600px): keep prices/cards from overflowing */
@media (max-width: 600px) {
  #content4-1y .adst-scarcity {
    font-size: 1rem !important;
    padding: 14px 16px !important;
  }
  #content4-1y .adst-scarcity strong { font-size: 1.1rem; }
  #content4-1y .adst-tier {
    padding: 22px 18px !important;
  }
  #content4-1y .adst-tier h3 {
    font-size: 1.3rem !important;
  }
  #content4-1y .adst-tier .now {
    font-size: 2.2rem !important;
  }
  #content4-1y .adst-tier.best .now {
    font-size: 2.45rem !important;
  }
  #content4-1y .adst-tier .btn-tier {
    font-size: 1.1rem !important;
    min-height: 54px;
  }
  #content4-bonuses .adst-bonus h3 {
    font-size: 1.2rem !important;
  }
  #content4-bonuses .adst-bonus p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }
}

/* ============================================================
   16. PROMO STRIP — "Limited Time Special Pricing…" /
       "Order All Day Slimming Tea at 50% OFF – Limited Time!"
       sections (content4-2f & content4-2g).
       Without a background these sections default to white;
       turning the subtitle white alone would make it invisible.
       So we paint the section orange and invert text to white.
   ============================================================ */
#content4-2f,
#content4-2g {
  background: linear-gradient(135deg,
              var(--ds-brand-primary) 0%,
              var(--ds-brand-primary-d) 100%) !important;
  padding: 52px 0 56px !important;
  position: relative;
}
#content4-2f::before,
#content4-2g::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right,
              rgba(255,255,255,.08) 0%,
              transparent 60%);
  pointer-events: none;
}
#content4-2f .mbr-section-title,
#content4-2g .mbr-section-title,
#content4-2f .mbr-section-subtitle,
#content4-2g .mbr-section-subtitle {
  color: #ffffff !important;
  position: relative;     /* sit above the ::before glow */
  text-shadow: 0 1px 2px rgba(0,0,0,.12);
}
#content4-2f .mbr-section-title,
#content4-2g .mbr-section-title {
  font-family: var(--ds-font-jost) !important;
  font-size: clamp(1.7rem, 3.8vw, 2.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  margin-bottom: 12px !important;
}
#content4-2f .mbr-section-subtitle,
#content4-2g .mbr-section-subtitle {
  font-family: var(--ds-font-jost) !important;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.005em;
  opacity: 0.96;
  margin-bottom: 0 !important;
}

@media (max-width: 600px) {
  #content4-2f,
  #content4-2g {
    padding: 40px 0 44px !important;
  }
  #content4-2f .mbr-section-title,
  #content4-2g .mbr-section-title {
    font-size: 1.55rem !important;
  }
  #content4-2f .mbr-section-subtitle,
  #content4-2g .mbr-section-subtitle {
    font-size: 1.1rem !important;
  }
}