/* ==========================================================================
   Anxiety Checklist blog - modern layout additions
   Added 2026-09-16.

   This file is ADDITIVE. It is loaded after assets/css/style.css and
   assets/css/responsive.css and never edits them, so the whole visual change
   can be reverted by deleting this file and its <link> in header.php.

   It reuses the palette and font variables already defined in
   assets/css/variable.css - no new brand colours are introduced.

   NOTE ON UNITS: this theme sets `html { font-size: 10px }`, so 1rem = 10px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Article layout
   The single-post table-of-contents aside was removed, so the article is no
   longer squeezed into the remaining ~75% of the container. It runs as one
   centred column instead of a near-empty 3-column sidebar.

   NOTE: the real measure is set in section 9 below (75ch at 2.1rem). The
   max-width here is only a fallback for the case where `ch` is unsupported.
   -------------------------------------------------------------------------- */
.ac-article-wrap {
  width: 100%;
  max-width: 86rem;
  margin-inline: auto;
}

.ac-article-body {
  width: 100%;
}

/* Media inside the article should never exceed the column. */
.ac-article-body img,
.ac-article-body table,
.ac-article-body figure {
  max-width: 100%;
}

.ac-article-body table {
  display: block;
  overflow-x: auto;          /* wide data tables scroll rather than overflow */
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   2. Byline (author + date), formerly the sticky card in the aside
   -------------------------------------------------------------------------- */
.ac-byline {
  gap: 1.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--clr-tropical-breeze);
}

.ac-byline-avatar {
  width: 4.8rem;
  height: 4.8rem;
  background-color: var(--clr-tropical-breeze);
}

.ac-byline-avatar img {
  object-fit: cover;
}

.ac-byline-name {
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--clr-bluish-gray);
}

.ac-byline-date {
  font-size: 1.4rem;
  margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   3. In-article app promotion
   One calm, non-interruptive card after the article body. No countdown, no
   urgency, no popup - this is a mental-health product.
   -------------------------------------------------------------------------- */
.ac-app-promo {
  margin-top: 4.8rem;
  padding: 3.2rem;
  border: 1px solid var(--clr-tropical-breeze);
  border-radius: var(--radius-lg);
  background-color: var(--clr-alice-blue);
}

.ac-app-promo-title {
  font-size: 2.2rem;
  line-height: 1.3;
  color: var(--clr-bluish-gray);
  margin-bottom: 0.8rem;
}

.ac-app-promo-text {
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--clr-dark-gray);
  margin-bottom: 0;
  max-width: 52rem;
}

.ac-app-promo-note {
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--clr-gray);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. App Store / Google Play badges (header, article card, footer)
   -------------------------------------------------------------------------- */
.ac-badges {
  gap: 1.2rem;
}

.ac-badge {
  display: block;
  width: 13.5rem;
  max-width: 100%;
  transition: var(--transition-smooth);
}

.ac-badge img {
  width: 100%;
  height: auto;
  display: block;
}

.ac-badge:hover,
.ac-badge:focus-visible {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ==========================================================================
   5. HEADER - parity with the main site's NewHeader
   ==========================================================================
   Reimplemented from https://anxietychecklist.com/ (rendered markup) and
   src/components/NewComponents/NewHeader/NewHeader.module.css. The main site's
   CSS ships inside hash-named Next.js chunks, so the rules are rewritten here
   rather than imported.

   The main site header is TRANSPARENT over a dark hero and swaps to an opaque,
   black-on-light treatment once `isScroll` is true. The blog has no hero, so it
   renders permanently in that scrolled state - the same design, pinned to the
   variant that is legible on a white page. The main site's own scrolled button
   style is `background:#fdfdfd; border-color:#ccc`, which is reproduced exactly.

   IMPORTANT: do NOT put `backdrop-filter`, `filter` or `transform` on .ac-header.
   Any of them would make the header a containing block for position:fixed
   descendants, which would break both .header-overlay and the slide-in
   .ac-menu-panel (they must position against the viewport).
   -------------------------------------------------------------------------- */

/* Main site token equivalents, scoped so they cannot leak into the article. */
.ac-header,
.ac-footer {
  --ac-brand-black: #141414;
  --ac-brand-yellow: #ffae00;
  --ac-brand-yellow-rgb: 252, 196, 106;
  --ac-brand-blue: #1056b2;
  --ac-brand-light-blue: #539af6;
  --ac-brand-pale-blue: #f5f7fa;
}

.ac-header {
  /* .header already supplies min-height: var(--header-height) (100px), which
     matches the main site's --new-height-height: 100px. */
  background-color: var(--clr-white);
}

/* --- Logo: the identical inline SVG the main site renders ----------------- */
.logo.ac-logo {
  max-width: 195px; /* .new-logo-wrap on the main site */
  width: 100%;
  color: var(--clr-black-beauty); /* the wordmark paths use currentColor */
}

.logo.ac-logo svg {
  width: 100%;
  height: auto;
  display: block;
}

.ac-header-right {
  gap: 16px; /* --new-space-2xs */
}

/* --- "Learn at the Anxiety University" ------------------------------------ */
.ac-learn-at {
  gap: 0.6rem;
  font-family: var(--font-secondary);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ac-brand-black);
  white-space: nowrap;
}

.ac-learn-at-link {
  margin-left: 0.6rem;
  color: var(--ac-brand-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition-smooth);
}

.ac-learn-at-link:hover,
.ac-learn-at-link:focus-visible {
  color: var(--ac-brand-yellow);
}

/* --- Pill buttons: NewButton .newButton + .btnFontSm + .heightMd, in the
       main site's scrolled colours (.headerScroll .newHeaderBtn). ---------- */
.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-secondary);
  font-size: 16px; /* --new-font-3xs */
  font-weight: 500;
  line-height: 1;
  min-height: 50px; /* .heightMd */
  padding: 5px 3.2rem;
  border-radius: 75px;
  border: 1px solid #ccc;
  background-color: #fdfdfd;
  color: var(--ac-brand-black);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.ac-btn:hover,
.ac-btn:focus-visible {
  background-color: var(--ac-brand-yellow);
  border-color: var(--ac-brand-yellow);
  color: var(--ac-brand-black);
  box-shadow: 0 6px 16px rgba(var(--ac-brand-yellow-rgb), 0.5);
}

/* --- The Menu button. This element IS #hamburger: assets/js/script.js:98
       binds to it with no null guard, so it is restyled, never removed. ----- */
.hamburger.ac-menu-btn {
  gap: 8px;
  margin-left: 0;
  z-index: 10;
}

.ac-menu-glyph svg {
  width: 24px;
  height: 24px;
  display: block;
}

.ac-menu-label {
  line-height: 1;
}

/* The legacy 3-bar burger is kept in the DOM (so the .hamburger.active rules in
   assets/css/style.css still have a target) but hidden: the main site uses a
   single menu glyph. */
.hamburger.ac-menu-btn .hamburger-line {
  display: none;
}

/* --------------------------------------------------------------------------
   5b. The slide-in menu (.header-buttons), mirroring NewOffcanvas
   --------------------------------------------------------------------------
   assets/css/responsive.css only turns .header-buttons into a drawer BELOW the
   xl breakpoint. The main site shows its Menu drawer at every breakpoint, so
   these rules (higher specificity, no media query) promote it everywhere.

   The main site's offcanvas is rgba(white,.48) + blur(20px) with WHITE text,
   which works because it sits over a dark hero. On the blog it would be white
   text on a near-white panel, so the same frosted treatment is used over the
   brand navy instead. This is the one place the drawer deviates on colour.
   -------------------------------------------------------------------------- */
.header-buttons.ac-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 42rem;
  height: 100vh;
  height: 100dvh;
  margin-left: 0;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: rgba(41, 50, 65, 0.94); /* --clr-bluish-gray at .94 */
  backdrop-filter: blur(20px);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 100;
}

body.menu-open .header-buttons.ac-menu-panel {
  transform: translateX(0);
}

.header-overlay {
  z-index: 98;
  background-color: rgba(var(--clr-black-rgba), 0.35);
}

.ac-menu-head {
  gap: 1.6rem;
}

.ac-menu-title {
  font-family: var(--font-secondary);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--clr-white);
}

.ac-menu-close {
  width: 4.4rem;
  height: 4.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 3.2rem;
  line-height: 1;
  border: 1px solid rgba(var(--clr-white-rgba), 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--clr-white);
  transition: var(--transition-smooth);
}

.ac-menu-close:hover,
.ac-menu-close:focus-visible {
  border-color: var(--ac-brand-yellow);
  color: var(--ac-brand-yellow);
}

.ac-menu-list li {
  border-bottom: 1px solid #e5e7e842; /* .menuListItem on the main site */
}

.ac-menu-list a {
  display: block;
  position: relative;
  margin: 10px 0;
  padding: 12px; /* --new-space-xs is 24px; halved for a 420px drawer */
  font-family: var(--font-secondary);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--clr-white);
  text-decoration: none;
  border-radius: 12px;
  transition: var(--transition-smooth);
}

.ac-menu-list a:hover,
.ac-menu-list a:focus-visible {
  background-color: var(--ac-brand-pale-blue);
  color: var(--ac-brand-black);
}

.ac-menu-learn,
.ac-menu-app-title {
  font-family: var(--font-secondary);
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--clr-white);
}

.ac-menu-learn a {
  color: var(--clr-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ac-menu-learn a:hover,
.ac-menu-learn a:focus-visible {
  color: var(--ac-brand-light-blue);
}

.ac-menu-app {
  margin-top: auto;
}

.ac-menu-app-title {
  margin-bottom: 1.2rem;
  text-align: center;
}

.ac-menu-app .ac-badges {
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   6. MAIN-SITE TOKENS + FOOTER parity (second pass, 2026-09-16)
   ==========================================================================
   Rebuilt value for value from the compiled CSS of
   https://anxietychecklist.com/panic-attack: NewFooter.module.css,
   FLSecureCard.module.css, NewHeader.module.css, NewButton/NewInput/NewSelect/
   NewTextArea/NewContactUsModal module CSS and the
   global new / new-v2 utility classes.

   UNITS. The main site's html font-size steps down with the viewport
   (10px >=1800, 9px <1800, 8px <1600, 7px <1440, 6px <1280, 5px <768,
   4.5px <576) and many of its sizes are rem. This theme pins html at 10px, so
   a scoped --ac-r ("one main-site rem") steps at the same breakpoints and
   every main-site rem value is written as calc(N * var(--ac-r)). px values
   stay px. The main site's own --new-* / --new-v2-* tokens are re-declared
   below, scoped to .ac-scope (header, footer, Get Help card, popup), with
   their exact per-breakpoint values, so they cannot leak into the articles.

   Accepted difference: the font family. Overused Grotesk / Nexa / Vastago
   Grotesk are not available here, so the theme's Instrument Sans is used at the
   same size and weight.
   -------------------------------------------------------------------------- */
.ac-scope {
  --ac-r: 10px;
  --ac-font: var(--font-secondary);

  --new-white: #fff;
  --new-black: #14171a;
  --new-black-tint-1: #141414;
  --new-yellow: #ffae00;
  --new-blue: #1056b2;
  --new-blue-tint-1: #3d86e7;
  --new-pale-blue: #f5f7fa;
  --new-off-white: #e7e9ea;
  --new-gray: #656669;
  --new-ice-blue: #d7ebfa;
  --new-rgb-light-yellow: 252, 196, 106;
  --new-rgb-light-blue: 83, 154, 246;
  --new-rgb-black: 20, 23, 26;
  --new-transition-all: 0.3s all;

  --new-font-3xl: calc(3.8 * var(--ac-r));
  --new-font-lg: 30px;
  --new-font-md: 26px;
  --new-font-sm: 22px;
  --new-font-xs: 20px;
  --new-font-2xs: 18px;
  --new-font-3xs: 16px;

  --new-space-2xl: calc(7 * var(--ac-r));
  --new-space-xl: calc(6.4 * var(--ac-r));
  --new-space-lg: calc(4 * var(--ac-r));
  --new-space-md: calc(3.5 * var(--ac-r));
  --new-space-sm: calc(3.2 * var(--ac-r));
  --new-space-xs: 24px;
  --new-space-2xs: 16px;
  --new-space-3xs: 8px;

  --new-radius-xs: 16px;
  --new-radius-sm: 24px;
  --new-radius-xl: calc(5 * var(--ac-r));

  --new-v2-white: #fff;
  --new-v2-black: #14171a;
  --new-v2-dark-black: #0e1417;
  --new-v2-grey: #5b5a5d;
  --new-v2-dark-blue: #0d50b5;
  --new-v2-rgb-dark-blue: 13, 80, 181;
  --new-v2-sky-blue: #0095ff;

  --new-v2-font-md: calc(3.3 * var(--ac-r));
  --new-v2-font-1sm: 24px;
  --new-v2-font-xs: 20px;
  --new-v2-font-1xs: 18px;
  --new-v2-font-2xs: 16px;
  --new-v2-font-3xs: 14px;

  --new-v2-space-4xl: calc(4.6 * var(--ac-r));
  --new-v2-space-sm: calc(3.2 * var(--ac-r));
  --new-v2-space-xs: 18px;
  --new-v2-space-2xs: 16px;
  --new-v2-space-3xs: 8px;

  --new-v2-radius-2xl: calc(4.2 * var(--ac-r));
  --new-v2-radius-xl: calc(4 * var(--ac-r));
  --new-v2-radius-sm: 22px;

  --ac-section-mid: calc(4 * var(--ac-r));
}

@media (max-width: 1799px) {
  .ac-scope {
    --ac-r: 9px;
    --new-font-lg: 28px;
    --new-font-md: 24px;
    --new-font-sm: 20px;
    --new-font-xs: 18px;
    --new-font-2xs: 16px;
    --new-v2-font-1sm: 22px;
    --new-v2-font-xs: 18px;
  }
}

@media (max-width: 1599px) {
  .ac-scope {
    --ac-r: 8px;
    --new-font-lg: 26px;
    --new-font-md: 22px;
    --new-font-sm: 18px;
    --new-space-xs: 20px;
    --new-space-2xs: 12px;
    --new-radius-xs: 12px;
    --new-radius-sm: 15px;
    --new-v2-font-1xs: 16px;
    --new-v2-font-2xs: 15px;
  }
}

@media (max-width: 1439px) {
  .ac-scope {
    --ac-r: 7px;
    --new-font-lg: 24px;
  }
}

@media (max-width: 1365px) {
  .ac-scope {
    --new-font-lg: 22px;
  }
}

@media (max-width: 1279px) {
  .ac-scope {
    --ac-r: 6px;
    --new-font-md: 20px;
    --new-font-xs: 16px;
    --new-v2-font-1sm: 20px;
  }
}

@media (max-width: 1199px) {
  .ac-scope {
    --new-v2-font-1sm: 18px;
    --new-v2-font-xs: 16px;
    --new-v2-font-1xs: 15px;
    --new-v2-font-2xs: 14px;
    --new-v2-font-3xs: 12px;
    --ac-section-mid: calc(3.5 * var(--ac-r));
  }
}

@media (max-width: 767px) {
  .ac-scope {
    --ac-r: 5px;
    --new-space-2xl: calc(5.5 * var(--ac-r));
    --new-space-xl: calc(4.5 * var(--ac-r));
    --new-space-lg: calc(3.5 * var(--ac-r));
    --new-space-md: calc(3.2 * var(--ac-r));
    --new-space-sm: calc(3 * var(--ac-r));
    --new-space-xs: 15px;
    --new-space-2xs: 10px;
    --new-radius-xs: 8px;
    --new-radius-sm: 10px;
    --new-v2-font-md: 18px;
    --new-v2-font-1sm: 16px;
    --new-v2-font-xs: 14px;
    --new-v2-font-1xs: 14px;
    --new-v2-font-2xs: 13px;
    --new-v2-space-4xl: 25px;
    --new-v2-space-sm: 17px;
    --new-v2-space-xs: 15px;
    --new-v2-space-2xs: 14px;
    --new-v2-radius-2xl: calc(3.5 * var(--ac-r));
    --new-v2-radius-sm: 18px;
  }
}

@media (max-width: 575px) {
  .ac-scope {
    --ac-r: 4.5px;
    --new-font-md: 18px;
    --new-font-sm: 16px;
    --new-font-3xs: 14px;
    --new-space-2xl: calc(4 * var(--ac-r));
    --new-space-xl: calc(3.5 * var(--ac-r));
    --new-space-lg: calc(3 * var(--ac-r));
    --new-space-md: calc(2.8 * var(--ac-r));
    --new-space-sm: calc(2.5 * var(--ac-r));
    --new-space-xs: 15px;
    --new-space-2xs: 10px;
    --new-radius-xs: 5px;
    --new-radius-sm: 8px;
  }
}

@media (max-width: 480px) {
  .ac-scope {
    --new-font-lg: 20px;
    --new-font-md: 16px;
    --new-space-xs: 10px;
  }
}

/* --- Store badge (.app-img-wrap) - header and footer ---------------------- */
.ac-app-img-wrap {
  max-width: calc(20 * var(--ac-r));
  width: 100%;
  border-radius: var(--new-radius-xs);
  --bs-aspect-ratio: 36%;
  transition: var(--new-transition-all);
  cursor: pointer;
}

.ac-app-img-wrap:hover {
  transform: scale(0.97);
}

@media (max-width: 1199px) {
  .ac-app-img-wrap {
    max-width: calc(23 * var(--ac-r));
  }
}

/* --- Header: "Get the app before you need it" (.headerAppWrap.appShow) ---- */
.ac-header-app {
  opacity: 1;
  transition: var(--new-transition-all);
}

.ac-header .ac-header-app-title {
  margin: 0 0 var(--new-space-3xs);
  font-family: var(--ac-font);
  font-size: var(--new-v2-font-2xs);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: #000; /* .text-black - the scrolled header state */
}

.ac-header-app-badges {
  gap: calc(1 * var(--ac-r)); /* bootstrap .gap-3 */
}

@media (min-width: 992px) {
  .ac-header-app .ac-app-img-wrap {
    margin-left: auto;
    margin-right: auto; /* .mx-lg-auto */
  }
}

@media (max-width: 767px) {
  .ac-header-app {
    width: 100%;
    order: 1;
    margin-top: 8px;
    height: 100%;
    max-height: 75px;
  }

  .ac-header-app .ac-app-img-wrap {
    max-width: calc(20 * var(--ac-r));
  }
}

button.ac-btn {
  cursor: pointer;
}

/* --- Get Help Now card: the BOXED FLSecureCard, directly above the footer ---
   Value for value from the card as rendered inside Anxiety University articles
   (FLSecureCard.module.css + .section-mid-py .section-mid-mb .px-5 .gap-4
   .bg-clr-beige-100), measured 2026-09-16 at 1440/768/390. The SSL badge is
   replaced by assets/images/crisis/crisis-help.webp (decorative).

   Width: boxed, never full-bleed. It fills .container (the card grid's width)
   on the blog index/archives/search, and on single posts footer.php wraps it
   in .ac-article-wrap so it has exactly the post body's measure (the width is
   in `ch`, so that wrapper's font-size must be left alone; everything inside
   the card is sized in px or --ac-r and does not inherit it). The two can
   never drift apart. */
.ac-gethelp {
  margin: 0 0 var(--ac-section-mid); /* .mt-0 .section-mid-mb */
  padding: var(--ac-section-mid) calc(3 * var(--ac-r)); /* .section-mid-py .px-5 */
  border-radius: 0;
  background-color: #f7f0e6; /* --clr-beige-100 */
}

.ac-gethelp-content {
  gap: calc(1.5 * var(--ac-r)); /* .gap-4 */
}

.ac-gethelp-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 650px;
  min-width: 0;
}

.ac-gethelp .ac-gethelp-title {
  margin: 0;
  font-family: var(--ac-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: #2b2b2b; /* .text-clr-shoe-wax */
}

.ac-gethelp .ac-gethelp-text {
  max-width: 650px;
  margin: 0;
  font-family: var(--ac-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: #2b2b2b; /* .text-clr-shoe-wax */
}

.ac-gethelp .ac-gethelp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  background-color: #0d50b5; /* --new-v2-dark-blue */
  font-family: var(--ac-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s;
}

.ac-gethelp .ac-gethelp-btn:hover,
.ac-gethelp .ac-gethelp-btn:focus-visible {
  background-color: #0a3f8f;
  color: #fff;
  text-decoration: none;
}

.ac-gethelp .ac-gethelp-btn:focus-visible {
  outline: 3px solid rgba(13, 80, 181, 0.35);
  outline-offset: 2px;
}

/* The illustration takes the SSL badge's place (the badge was 200x70). */
.ac-gethelp-art {
  width: 156px;
  line-height: 0;
}

.ac-gethelp-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
}

@media (max-width: 991.98px) {
  .ac-gethelp-art {
    width: 132px;
  }
}

@media (max-width: 768px) {
  .ac-gethelp .ac-gethelp-text {
    font-size: 16px;
  }
}

@media (max-width: 767.98px) {
  .ac-gethelp-copy {
    align-items: center;
    margin-inline: auto;
  }

  .ac-gethelp .ac-gethelp-title {
    font-size: 20px;
  }

  .ac-gethelp-art {
    width: 112px;
    margin-top: calc(1.5 * var(--ac-r)); /* .mt-4 .mt-md-0 */
  }
}

/* --- Footer shell (.newFooter + utilities) -------------------------------- */
.ac-footer {
  padding-top: var(--new-space-2xl);
  padding-bottom: var(--new-space-lg);
  background-color: #1056b2; /* only visible until the image has loaded */
  background-image: url("../images/background/bg-blue-gradient-two.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  font-family: var(--ac-font);
  font-weight: 400;
  line-height: 1.5;
  color: var(--new-white);
  text-align: center;
}

.ac-footer-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

@media (min-width: 1200px) { .ac-footer-container { max-width: 1100px; } }
@media (min-width: 1280px) { .ac-footer-container { max-width: 1140px; } }
@media (min-width: 1366px) { .ac-footer-container { max-width: 1160px; } }
@media (min-width: 1440px) { .ac-footer-container { max-width: 1150px; } }
@media (min-width: 1600px) { .ac-footer-container { max-width: 1200px; } }

/* --- Back to Top ---------------------------------------------------------- */
.ac-footer .ac-back-to-top {
  margin-bottom: var(--new-space-lg);
  color: var(--new-black);
  text-align: center;
}

.ac-footer .ac-back-to-top-icon {
  margin-bottom: var(--new-space-3xs);
  color: inherit;
  transition: var(--new-transition-all);
}

.ac-footer .ac-back-to-top-label {
  display: block;
  font-size: var(--new-font-md); /* h5.new */
  font-weight: 400;
  line-height: 1.2;
  color: inherit;
  transition: var(--new-transition-all);
}

.ac-footer .ac-back-to-top:hover .ac-back-to-top-icon,
.ac-footer .ac-back-to-top:focus-visible .ac-back-to-top-icon {
  color: var(--new-yellow);
}

@media (max-width: 991px) {
  .ac-footer .ac-back-to-top-icon {
    width: 50px;
    height: 50px;
  }
}

/* --- Social circles --------------------------------------------------------
   ROOT CAUSE of "we don't see the logo": the old section 8 rule
   `.ac-footer a { color: white }` (specificity 0,1,1) beat `.ac-social
   { color: black }` (0,1,0). The glyphs are fill="currentColor", so at rest
   they were white on the white circle; only :hover (0,2,0) won back. Every
   rule here is scoped under .ac-footer, and the SVG fill is pinned to
   currentColor explicitly, so no older rule can blank the glyph again. */
.ac-footer .ac-socials {
  gap: var(--new-space-2xs);
}

.ac-footer a.ac-social {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border: 1px solid var(--new-white);
  border-radius: 50%;
  background-color: var(--new-white);
  color: var(--new-black);
  text-decoration: none;
  transition: all 0.3s;
}

.ac-footer a.ac-social:hover,
.ac-footer a.ac-social:focus-visible {
  border-color: var(--new-blue);
  background-color: var(--new-white);
  color: var(--new-blue);
}

.ac-footer a.ac-social svg {
  display: block;
  color: inherit;
}

.ac-footer a.ac-social svg [fill="currentColor"] {
  fill: currentColor;
}

@media (max-width: 1599px) {
  .ac-footer a.ac-social {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 1199px) {
  .ac-footer a.ac-social {
    width: 50px;
    height: 50px;
  }

  .ac-footer a.ac-social svg {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 767px) {
  .ac-footer a.ac-social {
    width: 48px;
    height: 48px;
  }

  .ac-footer a.ac-social svg {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 480px) {
  .ac-footer .ac-socials {
    gap: 5px;
  }

  .ac-footer a.ac-social {
    width: 50px;
    height: 50px;
  }

  .ac-footer a.ac-social > span {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 350px) {
  .ac-footer a.ac-social {
    width: 40px;
    height: 40px;
  }

  .ac-footer a.ac-social > span {
    width: 20px;
    height: 20px;
  }
}

/* --- Links, dividers ------------------------------------------------------ */
.ac-footer .ac-footer-link {
  color: var(--new-white);
  font-weight: 400;
  text-decoration: underline;
  transition: var(--new-transition-all);
}

.ac-footer .ac-footer-link:hover,
.ac-footer .ac-footer-link:focus-visible {
  color: var(--new-yellow);
}

.ac-footer-links {
  gap: var(--new-space-xs);
  margin-top: var(--new-space-lg);
  margin-bottom: var(--new-space-md);
}

.ac-footer .ac-footer-link-section {
  margin-bottom: 0;
  font-size: var(--new-font-sm); /* h6.new */
  line-height: 1;
}

.ac-footer .ac-footer-divider.vr {
  width: 1px;
  min-height: 1em;
  align-self: stretch;
  background-color: var(--new-white);
  opacity: 1;
}

/* --- Badges row ------------------------------------------------------------ */
.ac-footer-badges {
  gap: var(--new-space-2xs);
  margin-bottom: var(--new-space-md);
}

/* --- Copyright + legal links ---------------------------------------------- */
.ac-footer-meta {
  margin-bottom: var(--new-space-lg);
}

.ac-footer .ac-footer-copy {
  margin: 0 0 var(--new-space-xs);
  font-size: var(--new-v2-font-xs); /* .p.new-v2.lg wins over .h5.new */
  font-weight: 400;
  line-height: 1;
  color: var(--new-white);
}

.ac-footer-legal-links {
  gap: var(--new-space-xs);
  margin-bottom: var(--new-space-xs);
}

.ac-footer .ac-footer-link-legal {
  margin-bottom: 0;
  font-size: var(--new-v2-font-1sm); /* .p.new-v2 is later in the cascade than .h5.new */
  line-height: 1;
}

/* --- "Need help? Contact us" pill (.footerNewLink) ------------------------- */
.ac-footer .ac-footer-help {
  display: inline-block;
  margin: 0 auto var(--new-v2-space-sm);
  padding: 16px 24px;
  border-radius: var(--new-v2-radius-xl);
  background-color: var(--new-v2-white);
  font-size: var(--new-v2-font-xs);
  font-weight: 400;
  line-height: 1.2;
  color: var(--new-v2-black);
}

.ac-footer .ac-footer-help-link {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--new-v2-sky-blue);
  cursor: pointer;
}

@media (max-width: 1599px) {
  .ac-footer .ac-footer-help {
    padding: 14px;
  }
}

/* --- Legal paragraphs ------------------------------------------------------ */
.ac-footer-legal {
  gap: var(--new-space-xs);
}

.ac-footer .ac-footer-legal-p {
  margin: 0 0 calc(1 * var(--ac-r));
  font-size: var(--new-v2-font-2xs); /* .p.new-v2.md */
  font-weight: 400;
  line-height: 1.5;
  color: var(--new-white);
}

.ac-footer .ac-footer-link-inline {
  font-size: inherit;
}

/* --- Decorative waves ------------------------------------------------------ */
.ac-footer-wave {
  max-width: 500px;
  z-index: -1;
  pointer-events: none;
}

.ac-footer-wave-one {
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.ac-footer-wave-two {
  transform: scaleX(-1);
  bottom: 30%;
  right: 0;
}

@media (max-width: 991px) {
  .ac-footer-wave {
    max-width: 300px;
  }
}

/* --------------------------------------------------------------------------
   7. Responsive - header, drawer and end-of-article promo
   (the footer's responsive rules now live with the footer, above)
   -------------------------------------------------------------------------- */

/* The main site steps its button heights down at 1800px and 992px
   (NewButton.module.css .heightMd / .shapeMd); mirror that. */
@media (max-width: 1799.98px) {
  .ac-btn {
    min-height: 45px;
  }
}

@media (max-width: 1199.98px) {
  .ac-learn-at {
    font-size: 1.6rem;
  }
}

@media (max-width: 991.98px) {
  .ac-btn {
    min-height: 40px;
    padding: 5px 2.2rem;
    font-size: 15px;
  }

  .ac-menu-title {
    font-size: 3rem;
  }
}

/* Below md the main site collapses the Menu button to an icon-only circle
   (NewButton .shapeMd: 56px, 45px below 992px). */
@media (max-width: 767.98px) {
  .hamburger.ac-menu-btn {
    width: 45px;
    height: 45px;
    min-height: 45px;
    padding: 0;
    gap: 0;
  }

  .header-buttons.ac-menu-panel {
    max-width: 100%;
    gap: 2.4rem;
  }

  .ac-menu-list a {
    font-size: 1.8rem;
  }
}

@media (max-width: 767.98px) {
  .ac-app-promo {
    padding: 2.4rem 2rem;
    margin-top: 3.6rem;
  }

  .ac-app-promo-title {
    font-size: 2rem;
  }

  .ac-app-promo .ac-badges {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ac-app-promo .ac-badge {
    width: 14rem;
  }

  .ac-byline-name {
    font-size: 1.4rem;
  }

  .ac-byline-date {
    font-size: 1.3rem;
  }
}

/* Very narrow phones (e.g. 390px and below): keep the badges readable. */
@media (max-width: 400px) {
  .ac-app-promo .ac-badge {
    width: 100%;
    max-width: 18rem;
  }

  .ac-app-promo .ac-badges {
    flex-direction: column;
    align-items: center;
  }
}

/* ==========================================================================
   7b. BLOG INDEX (home.php) and CATEGORY ARCHIVES (index.php)
   ==========================================================================
   A calm hero, a row of category chips, a responsive card grid, one app block
   and real pagination. No new JavaScript and no new fonts: everything uses
   Bitter and Instrument Sans, which the theme already loads.
   -------------------------------------------------------------------------- */

.ac-blog-hero {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-lg);
  background-color: var(--clr-alice-blue);
  border-bottom: 1px solid var(--clr-tropical-breeze);
}

.ac-blog-hero-inner {
  max-width: 78rem;
}

.ac-blog-eyebrow {
  font-family: var(--font-secondary);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-blueberry-soft-blue);
}

.ac-blog-title {
  margin: 1.2rem 0 0;
  font-family: var(--font-Bitter);
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--clr-bluish-gray);
}

.ac-blog-intro {
  margin-top: 1.8rem;
}

.ac-blog-intro p {
  font-family: var(--font-secondary);
  font-size: 1.9rem;
  line-height: 1.65;
  font-weight: 400;
  color: var(--clr-dark-gray);
  margin-bottom: 1.2rem;
}

.ac-blog-intro p:last-child {
  margin-bottom: 0;
}

.ac-blog-listing {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xxl);
}

/* --- Category chips ------------------------------------------------------- */
.ac-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: var(--space-lg);
}

.ac-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2rem;
  border: 1px solid var(--clr-tropical-breeze);
  border-radius: 75px;
  background-color: var(--clr-white);
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--clr-bluish-gray);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.ac-chip:hover,
.ac-chip:focus-visible {
  border-color: var(--clr-blueberry-soft-blue);
  color: var(--clr-bluish-light-gray);
  background-color: var(--clr-alice-blue);
}

.ac-chip.is-active {
  background-color: var(--clr-bluish-gray);
  border-color: var(--clr-bluish-gray);
  color: var(--clr-white);
}

/* --- Card grid -----------------------------------------------------------
   auto-fill + minmax means the grid reflows on its own; there is no fixed
   column width anywhere, so it cannot overflow a narrow phone. The `min()`
   keeps the minimum below the 366px of content a 390px viewport leaves after
   the container padding. */
.ac-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr));
  gap: 2.8rem;
}

.ac-card {
  display: flex;
  min-width: 0;
}

.ac-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--clr-tropical-breeze);
  border-radius: var(--radius-lg);
  background-color: var(--clr-white);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.ac-card-link:hover,
.ac-card-link:focus-visible {
  border-color: var(--clr-stellar-blue);
  box-shadow: 0 12px 28px rgba(var(--clr-rgb-black-beauty), 0.09);
  transform: translateY(-3px);
}

.ac-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--clr-tropical-breeze);
}

.ac-card-media .ac-card-img,
.ac-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.ac-card-link:hover .ac-card-media img {
  transform: scale(1.04);
}

.ac-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  flex: 1 1 auto;
  padding: 2.2rem 2.2rem 2.4rem;
  min-width: 0;
}

.ac-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-secondary);
  font-size: 1.3rem;
  line-height: 1;
}

.ac-card-cat {
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background-color: var(--clr-alice-blue);
  color: var(--clr-bluish-light-gray);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ac-card-date {
  color: var(--clr-gray);
  font-weight: 500;
}

.ac-card-title {
  margin: 0;
  font-family: var(--font-Bitter);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.32;
  color: var(--clr-bluish-gray);
  overflow-wrap: break-word;
}

.ac-card-link:hover .ac-card-title {
  color: var(--clr-bluish-light-gray);
}

.ac-card-excerpt {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-dark-gray);
}

.ac-card-more {
  margin-top: auto;
  padding-top: 0.4rem;
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--clr-blueberry-soft-blue);
  transition: var(--transition-smooth);
}

.ac-card-more::after {
  content: " →";
}

.ac-card-link:hover .ac-card-more {
  color: var(--clr-bluish-light-gray);
}

.ac-no-posts {
  font-family: var(--font-secondary);
  font-size: 1.8rem;
  color: var(--clr-dark-gray);
}

/* Shown instead of pagination when home.php runs as page 51's page template
   (/blog/home/) rather than as the posts index. */
.ac-more-link {
  margin-top: var(--space-xl);
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 1.7rem;
  font-weight: 600;
}

.ac-more-link a {
  color: var(--clr-bluish-light-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Index app block ------------------------------------------------------ */
.ac-index-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.2rem;
  margin-top: var(--space-xl);
  padding: 3.6rem;
  border: 1px solid var(--clr-tropical-breeze);
  border-radius: var(--radius-lg);
  background-color: var(--clr-alice-blue);
}

.ac-index-promo-text {
  max-width: 62rem;
}

.ac-index-promo-title {
  margin: 0 0 1rem;
  font-family: var(--font-Bitter);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-bluish-gray);
}

.ac-index-promo-body {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-dark-gray);
}

.ac-index-promo-note {
  margin: 1.4rem 0 0;
  font-family: var(--font-secondary);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--clr-gray);
}

.ac-index-promo .ac-badges {
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Pagination ----------------------------------------------------------- */
.ac-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  margin-top: var(--space-xl);
}

.ac-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  height: 4.4rem;
  padding: 0 1.4rem;
  border: 1px solid var(--clr-tropical-breeze);
  border-radius: var(--radius-sm);
  background-color: var(--clr-white);
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--clr-bluish-gray);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.ac-pagination a.page-numbers:hover,
.ac-pagination a.page-numbers:focus-visible {
  border-color: var(--clr-blueberry-soft-blue);
  background-color: var(--clr-alice-blue);
  color: var(--clr-bluish-light-gray);
}

.ac-pagination .page-numbers.current {
  background-color: var(--clr-bluish-gray);
  border-color: var(--clr-bluish-gray);
  color: var(--clr-white);
}

.ac-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--clr-gray);
}

/* --------------------------------------------------------------------------
   8. (removed 2026-09-16) The blanket `.ac-footer a { color: white }` that
   lived here out-ranked `.ac-social` and turned the social glyphs white on
   their white circles. Footer link colours are now set per class in section 6.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   9. Long-form typography pass (2026-09-16)

   Scoped to .ac-article-body / .ac-article-wrap so it cannot regress the blog
   index, the archives or psychiatristforAnxiety.php. The theme's base is
   Times New Roman 16px/1.5 (assets/css/default.css), which is cramped for
   2,000-word articles about the reader's own anxiety.

   Reminder: html { font-size: 10px }, so 1rem = 10px.
   ========================================================================== */

/* --- Measure (widened 2026-09-16) ---------------------------------------
   BEFORE: max-width 70ch at font-size 1.8rem (18px)  = 70 x 18 x k
   AFTER : max-width 75ch at font-size 2.1rem (21px)  = 75 x 21 x k
                                     -> (75 x 21) / (70 x 18) = 1.25 exactly

   Because both the old and the new measure are expressed in `ch`, the column
   is EXACTLY 25% wider whatever the font's "0" advance (k) turns out to be -
   the increase does not depend on estimating it. Using this theme's own
   documented figure (70ch at 18px = ~660px, i.e. k = 0.524em) that is
   660px -> 825px.

   `ch` also pins the line length: the measure is 75 characters by definition,
   which sits in the middle of the 72-78 target. The body size had to rise with
   the width, otherwise 825px at 18px would have been ~87 characters per line -
   a wall of text. 21px/1.7 is a normal long-form size.

   This intentionally overrides the 86rem set in section 1 above.

   WIDENED AGAIN 2026-09-16 (second pass, "make body 25% larger"):
   BEFORE: 75ch at 2.1rem   AFTER: 89.5ch at 2.2rem
     -> (89.5 x 22) / (75 x 21) = 1.2502, i.e. +25% whatever the font's "0"
        advance is (~825px -> ~1031px with this theme's k = 0.524em).
   The body size rises modestly (21px -> 22px) and line-height to 1.75 so the
   longer line stays readable. Phones are unchanged (section 10: 100%). */
.ac-article-wrap {
  font-size: 2.2rem;
  max-width: 89.5ch;
  margin-inline: auto;
}

.ac-article-body {
  font-family: var(--font-secondary);
  font-size: 2.2rem;
  line-height: 1.75;
  font-weight: 400;      /* .paragraph-text forces 500, which is heavy at 21px */
  color: var(--clr-black-beauty);
  overflow-wrap: break-word;       /* long URLs must not widen the column */
}

.ac-article-body p,
.ac-article-body li {
  font-family: var(--font-secondary);
  font-size: 2.2rem;
  line-height: 1.75;
  font-weight: 400;
  color: var(--clr-black-beauty);
}

.ac-article-body p {
  margin-bottom: 2.2rem;
}

/* Lead-in: the first paragraph after the title reads a little larger. */
.ac-article-body .info-wrapper > p:first-child {
  font-size: 2.4rem;
  line-height: 1.65;
  color: var(--clr-bluish-gray);
}

.ac-article-body > *:last-child {
  margin-bottom: 0;
}

/* --- Headings -----------------------------------------------------------
   A deliberate scale: each level is visibly smaller than the one above, and
   space-before is much larger than space-after so headings group with the
   text they introduce rather than floating between blocks. */
.ac-article-body h2,
.ac-article-body h3,
.ac-article-body h4,
.ac-article-body h5,
.ac-article-body h6 {
  font-family: var(--font-Bitter);
  color: var(--clr-bluish-gray);
  line-height: 1.3;
  margin-bottom: 1.2rem;
  /* clears the sticky header when a ToC/anchor link jumps here */
  scroll-margin-top: calc(var(--header-height) + 20px);
}

/* Four clearly separated levels. single.php no longer flattens h3-h6 into
   h5.ternary-title, so these sizes now actually differ on the page.
   The size classes from default.css (.secondary-title 4.8rem Times New Roman,
   .ternary-title 3.2rem) are no longer applied to article headings, but they
   are neutralised here too in case an author pastes one into the content. */
.ac-article-body h2,
.ac-article-body .secondary-title {
  font-size: 3.2rem;
  font-weight: 700;
  margin-top: 5.2rem;
}

.ac-article-body h3,
.ac-article-body .ternary-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 4rem;
}

.ac-article-body h4 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-top: 3.4rem;
}

.ac-article-body h5,
.ac-article-body h6 {
  font-size: 2rem;
  font-weight: 600;
  margin-top: 3rem;
  letter-spacing: 0.01em;
}

.ac-article-body .secondary-title,
.ac-article-body .ternary-title {
  font-family: var(--font-Bitter);
  color: var(--clr-bluish-gray);
  line-height: 1.3;
}

.ac-article-body h2:first-child,
.ac-article-body h3:first-child {
  margin-top: 0;
}

/* --- Links --------------------------------------------------------------- */
.ac-article-body a {
  color: var(--clr-bluish-light-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: var(--transition-smooth);
}

.ac-article-body a:hover,
.ac-article-body a:focus-visible {
  color: var(--clr-blueberry-soft-blue);
}

/* --- Lists ---------------------------------------------------------------
   Until 2026-09-16 single.php put Bootstrap's `d-flex` on every <ul> and <li>
   in the article. .d-flex carries !important, and the children of a flex
   container are flex items, which do not draw list markers - so every bulleted
   list on the blog had no bullets. single.php no longer adds those classes,
   and these two rules use !important as well so that any list still carrying
   them (e.g. pasted into post content by hand) renders correctly too. */
.ac-article-body ul,
.ac-article-body ol {
  display: block !important;
  margin: 0 0 2.1rem;
  padding-left: 2.6rem;
  list-style-position: outside;
}

.ac-article-body ul {
  list-style-type: disc;
}

.ac-article-body ol {
  list-style-type: decimal;
}

.ac-article-body li {
  display: list-item !important;
  margin-bottom: 1rem;
  padding-left: 0.4rem;
}

.ac-article-body li::marker {
  color: var(--clr-blueberry-soft-blue);
}

/* .list-wrapper sets `gap: 14px`, which does nothing once the list is block
   again; the per-item margin above replaces it. */
.ac-article-body .list-wrapper {
  gap: 0;
}

.ac-article-body ul ul,
.ac-article-body ol ol,
.ac-article-body ul ol,
.ac-article-body ol ul {
  margin-top: 0.8rem;
  margin-bottom: 0;
}

/* --- Blockquote ---------------------------------------------------------
   A quiet pull-quote: accent rule, tinted panel, no italics (italic serif at
   this size is noticeably harder to read). */
.ac-article-body blockquote {
  margin: 3.6rem 0;
  padding: 2.4rem 2.8rem;
  border-left: 4px solid var(--clr-light-yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background-color: var(--clr-alice-blue);
  color: var(--clr-bluish-gray);
}

.ac-article-body blockquote p {
  font-size: 2.2rem;
  line-height: 1.6;
  color: var(--clr-bluish-gray);
}

.ac-article-body blockquote p:last-child {
  margin-bottom: 0;
}

/* --- Media --------------------------------------------------------------- */
.ac-article-body img {
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.ac-article-body figure {
  margin: 2.8rem 0;
}

.ac-article-body figcaption {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--clr-gray);
  text-align: center;
}

/* --- Code / preformatted -------------------------------------------------
   Rare in this content, but a stray <pre> is a classic source of horizontal
   overflow on a phone. */
.ac-article-body pre {
  overflow-x: auto;
  max-width: 100%;
  padding: 1.6rem;
  border-radius: var(--radius-sm);
  background-color: var(--clr-off-white);
  font-size: 1.5rem;
}

.ac-article-body code {
  overflow-wrap: break-word;
  font-size: 0.95em;
}

/* --- Rules and tables ---------------------------------------------------- */
.ac-article-body hr {
  margin: 3.6rem 0;
  border: 0;
  border-top: 1px solid var(--clr-tropical-breeze);
  opacity: 1;
}

.ac-article-body table {
  border-collapse: collapse;
  margin: 3.2rem 0;
}

.ac-article-body th,
.ac-article-body td {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--clr-tropical-breeze);
  font-size: 1.8rem;
  line-height: 1.55;
  vertical-align: top;
}

.ac-article-body th {
  background-color: var(--clr-off-white);
  color: var(--clr-bluish-gray);
  text-align: left;
}

.ac-article-body tbody tr:nth-child(even) {
  background-color: rgba(var(--clr-rgb-black-beauty), 0.02);
}

/* --- Byline -------------------------------------------------------------- */
.ac-byline {
  margin-bottom: 3.2rem;
}

/* ==========================================================================
   9b. Post furniture (2026-09-16): eyebrow, title, breadcrumb, lead image,
       custom ACF sections and the prev/next footer.
   ========================================================================== */

.ac-breadcrumb {
  font-size: 1.5rem;
  margin-bottom: 2.4rem;
}

.ac-post-eyebrow {
  margin-top: 1.6rem;
  font-family: var(--font-secondary);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-blueberry-soft-blue);
}

/* .primary-title is Times New Roman 5.2rem/100%. The article's own headings
   are Bitter, so the H1 is restyled to match rather than introducing a third
   family on the page. */
.primary-title.ac-post-title {
  font-family: var(--font-Bitter);
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--clr-bluish-gray);
  margin-top: 1.2rem;
}

.ac-lead-figure {
  margin: 0 0 3.6rem;
}

.ac-lead-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.ac-custom-section {
  margin-top: 5.2rem;
}

/* --- Previous / next ------------------------------------------------------ */
.ac-post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 4.8rem;
}

.ac-post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 2rem 2.4rem;
  border: 1px solid var(--clr-tropical-breeze);
  border-radius: var(--radius-md);
  background-color: var(--clr-white);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.ac-post-nav-item:hover,
.ac-post-nav-item:focus-visible {
  border-color: var(--clr-blueberry-soft-blue);
  background-color: var(--clr-alice-blue);
}

/* When only one side exists it should not stretch across both columns. */
.ac-post-nav-next:only-child {
  grid-column: 2;
  text-align: right;
}

.ac-post-nav-next {
  text-align: right;
}

.ac-post-nav-label {
  font-family: var(--font-secondary);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-gray);
}

.ac-post-nav-title {
  font-family: var(--font-Bitter);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--clr-bluish-gray);
}

.ac-post-nav-item:hover .ac-post-nav-title {
  color: var(--clr-bluish-light-gray);
}

/* --------------------------------------------------------------------------
   10. Mobile long-form (<=767.98px, verified against a 390px viewport)
   Everything here is max-width based; no fixed pixel widths are introduced,
   so nothing can exceed the 366px of content space a 390px phone provides
   after the container's 12px side padding.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ac-article-wrap {
    max-width: 100%;
    font-size: 1.8rem;
  }

  .ac-article-body,
  .ac-article-body p,
  .ac-article-body li {
    font-size: 1.8rem;
    line-height: 1.7;
  }

  .ac-article-body .info-wrapper > p:first-child {
    font-size: 1.9rem;
  }

  .ac-article-body h2,
  .ac-article-body .secondary-title {
    font-size: 2.6rem;
    margin-top: 4rem;
  }

  .ac-article-body h3,
  .ac-article-body .ternary-title {
    font-size: 2.2rem;
    margin-top: 3.2rem;
  }

  .ac-article-body h4 {
    font-size: 2rem;
    margin-top: 2.8rem;
  }

  .ac-article-body h5,
  .ac-article-body h6 {
    font-size: 1.8rem;
  }

  .ac-article-body blockquote {
    margin: 2.6rem 0;
    padding: 1.8rem 2rem;
  }

  .ac-article-body blockquote p {
    font-size: 1.9rem;
  }

  .ac-article-body ul,
  .ac-article-body ol {
    padding-left: 2.2rem;
  }

  .ac-article-body th,
  .ac-article-body td {
    font-size: 1.6rem;
    padding: 1rem;
  }

  .primary-title.ac-post-title {
    font-size: 3rem;
  }

  .ac-breadcrumb {
    font-size: 1.3rem;
  }

  /* Stack prev/next so neither card can force a horizontal scrollbar. */
  .ac-post-nav {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 3.6rem;
  }

  .ac-post-nav-next,
  .ac-post-nav-next:only-child {
    grid-column: auto;
    text-align: left;
  }

  .ac-post-nav-item {
    padding: 1.6rem 1.8rem;
  }
}

/* Belt and braces: nothing inside the article may establish a horizontal
   scrollbar on a narrow phone. */
@media (max-width: 575.98px) {
  .ac-article-body iframe,
  .ac-article-body video,
  .ac-article-body embed,
  .ac-article-body object {
    max-width: 100%;
  }
}

/* ==========================================================================
   11. Responsive - blog index and archives
   ==========================================================================
   The grid itself is auto-fill/minmax, so it reflows without help; these rules
   only step the type and padding down. Nothing below declares a fixed `width`,
   so a 390px viewport (366px of content after the container's padding) cannot
   be overflowed.
   ========================================================================== */

@media (max-width: 1199.98px) {
  .ac-blog-title {
    font-size: 4rem;
  }

  .ac-index-promo {
    padding: 3rem;
    gap: 2.4rem;
  }
}

/* Below lg the index app block stacks: side by side it would squeeze the
   badges to an unreadable width. */
@media (max-width: 991.98px) {
  .ac-index-promo {
    flex-direction: column;
    align-items: flex-start;
  }

  .ac-index-promo .ac-badges {
    justify-content: flex-start;
  }

  .ac-card-grid {
    gap: 2.2rem;
  }
}

@media (max-width: 767.98px) {
  .ac-blog-hero {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-md);
  }

  .ac-blog-title {
    font-size: 3.2rem;
  }

  .ac-blog-intro p {
    font-size: 1.7rem;
  }

  .ac-blog-listing {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
  }

  .ac-cat-filter {
    gap: 0.8rem;
    margin-bottom: var(--space-md);
  }

  .ac-chip {
    padding: 0.8rem 1.6rem;
    font-size: 1.4rem;
  }

  .ac-card-grid {
    gap: 1.8rem;
  }

  .ac-card-body {
    padding: 1.8rem 1.8rem 2rem;
    gap: 1rem;
  }

  .ac-card-title {
    font-size: 1.9rem;
  }

  .ac-card-excerpt {
    font-size: 1.5rem;
  }

  .ac-index-promo {
    margin-top: var(--space-lg);
    padding: 2.4rem 2rem;
  }

  .ac-index-promo-title {
    font-size: 2.2rem;
  }

  .ac-index-promo-body {
    font-size: 1.6rem;
  }

  .ac-pagination {
    margin-top: var(--space-lg);
    gap: 0.6rem;
  }

  .ac-pagination .page-numbers {
    min-width: 4rem;
    height: 4rem;
    padding: 0 1rem;
    font-size: 1.4rem;
  }
}

/* At 390px the two arrow labels plus nine page numbers would wrap into an
   untidy block; hide the words and keep the arrows. */
@media (max-width: 420px) {
  .ac-pagination .prev,
  .ac-pagination .next {
    font-size: 0;
    padding: 0;
    min-width: 4rem;
  }

  .ac-pagination .prev span,
  .ac-pagination .next span {
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   12. Second pass (2026-09-16): popup, mid-article promos, prev/next
       thumbnails, blog home heading
   ========================================================================== */

/* The blog's existing toast (assets/js/script.js showToast) must stay above
   an open Bootstrap modal (z-index 1055). */
#toast.toast {
  z-index: 2000;
}

/* --- Blog home: page 51's intro block is no longer rendered --------------- */
.ac-blog-listing.ac-blog-listing-home {
  padding-top: var(--space-lg);
}

.ac-blog-home-title {
  margin: 0 0 2rem;
  font-family: var(--font-Bitter);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--clr-bluish-gray);
}

@media (max-width: 767.98px) {
  .ac-blog-home-title {
    font-size: 2.4rem;
    margin-bottom: 1.6rem;
  }
}

/* --- Shared popup pieces (NewButton / NewInput) ---------------------------- */
.ac-new-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 5px calc(3.2 * var(--ac-r));
  border: 1px solid transparent;
  border-radius: 75px;
  outline: none;
  font-family: var(--ac-font);
  font-size: var(--new-font-3xs);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: var(--new-transition-all);
}

.ac-new-btn:focus-visible {
  outline: 2px solid var(--new-black);
  outline-offset: 2px;
}

.ac-new-btn:disabled {
  cursor: progress;
}

.ac-new-btn-blue {
  color: var(--new-white);
  background: var(--new-blue);
  border-color: var(--new-blue);
}

.ac-new-btn-blue:hover {
  background: var(--new-blue-tint-1);
  border-color: var(--new-blue-tint-1);
  box-shadow: 0 6px 16px rgba(var(--new-rgb-light-blue), 0.5);
}

.ac-new-btn-md { min-height: 50px; }

.ac-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--new-space-3xs);
  height: 80px;
  padding: 0 var(--new-space-sm);
  border: 1px solid var(--new-off-white);
  border-radius: 150px;
  transition: var(--new-transition-all);
}

.ac-input-wrap.ac-input-wrap-sm {
  height: 55px;
}

.ac-input-wrap:hover,
.ac-input-wrap:focus-within {
  border-color: var(--new-blue);
}

.ac-input-prefix {
  flex-shrink: 0;
  transform: translateY(1px);
  color: var(--new-black);
}

.ac-scope .ac-input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background-color: transparent;
  font-family: var(--ac-font);
  font-size: var(--new-font-sm);
  font-weight: 500;
  color: var(--new-black);
}

.ac-scope .ac-input.ac-input-xs {
  font-size: var(--new-v2-font-2xs);
  color: var(--new-v2-grey);
}

.ac-scope .ac-field-error {
  font-size: 14px;
  line-height: 1.5;
}

.ac-contact-modal .ac-field-error {
  margin-top: 0.25rem;
}

@media (max-width: 1799px) {
  .ac-new-btn-md { min-height: 45px; }
  .ac-input-wrap { height: 65px; }
  .ac-input-wrap.ac-input-wrap-sm { height: 52px; }
}

@media (max-width: 991px) {
  .ac-new-btn-md { min-height: 40px; }
  .ac-input-wrap { height: 55px; }
  .ac-input-wrap.ac-input-wrap-sm { height: 50px; }
}

/* --- Contact us popup (NewContactUsModal) ---------------------------------- */
body.ac-contact-open .modal-backdrop.show {
  opacity: 0.4; /* the main site's overlay is rgba(0,0,0,.4) */
}

.ac-contact-modal {
  --bs-modal-width: 1180px; /* 1140px card + the overlay's 20px side padding */
  --bs-modal-margin: 10px;
  font-family: var(--ac-font);
}

.ac-contact-modal .modal-dialog {
  padding: 0 20px;
}

.ac-contact-modal .ac-contact-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 20px);
  overflow: hidden;
  border: 0;
  border-radius: var(--new-v2-radius-2xl);
  background: var(--new-v2-white);
}

.ac-contact-inner {
  max-height: calc(100svh - 20px);
  overflow-y: auto;
  padding: var(--new-v2-space-sm);
}

.ac-contact-close {
  position: absolute;
  top: 20px;
  right: calc(3 * var(--ac-r));
  z-index: 2;
  padding: 0;
  line-height: 0;
  color: var(--new-v2-black);
  cursor: pointer;
}

.ac-contact-modal .ac-contact-kicker {
  font-size: var(--new-v2-font-xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--new-v2-dark-blue);
}

.ac-contact-modal .ac-contact-title {
  padding-top: var(--new-v2-space-3xs);
  font-family: var(--ac-font);
  font-size: var(--new-v2-font-md);
  font-weight: 700;
  line-height: 1.5;
  color: var(--new-v2-black);
}

.ac-contact-modal .ac-contact-sub {
  padding-top: var(--new-v2-space-2xs);
  font-size: var(--new-v2-font-1xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--new-v2-grey);
}

.ac-contact-modal .ac-contact-sub.ac-contact-sub-second {
  padding-top: var(--new-v2-space-3xs);
}

.ac-contact-notice {
  max-width: 790px;
  margin-top: var(--new-v2-space-sm);
  padding: 10px var(--new-v2-space-2xs);
  border: 1px solid rgba(var(--new-v2-rgb-dark-blue), 0.12);
  border-radius: var(--new-v2-radius-2xl);
  background: rgba(var(--new-v2-rgb-dark-blue), 0.08);
}

.ac-contact-modal .ac-contact-notice p {
  font-size: var(--new-v2-font-1xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--new-v2-dark-blue);
}

.ac-contact-body {
  padding-top: var(--new-v2-space-4xl);
  padding-bottom: var(--new-v2-space-sm);
}

.ac-contact-row {
  gap: var(--new-v2-space-3xs);
}

.ac-contact-fields {
  gap: var(--new-v2-space-xs);
}

.ac-contact-modal .ac-label {
  display: inline-block;
  font-size: var(--new-v2-font-1xs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--new-v2-dark-black);
}

/* Subject: react-select look */
.ac-select-prefix {
  top: 50%;
  left: 32px;
  z-index: 1;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.ac-select-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 55px;
  padding: 0 20px 0 55px;
  border: 1px solid var(--new-off-white);
  border-radius: 150px;
  outline: none;
  background-color: var(--new-white);
  font-family: var(--ac-font);
  font-size: var(--new-v2-font-2xs);
  color: hsl(0, 0%, 20%);
  text-align: left;
  cursor: default;
  transition: 0.2s;
}

.ac-select-control:hover,
.ac-select.is-open .ac-select-control {
  border-color: var(--new-blue);
}

.ac-select-control:focus-visible {
  border-color: var(--new-blue);
  box-shadow: 0 0 0 1px #2684ff;
}

.ac-select-value.is-placeholder {
  color: var(--new-v2-grey);
}

.ac-select-indicator {
  color: var(--new-v2-grey);
}

.ac-select-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  max-height: 150px;
  margin-top: 8px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--new-off-white);
  border-radius: 16px;
  outline: none;
  background-color: var(--new-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: 16px;
  text-align: left;
}

.ac-select-option {
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
}

.ac-select-option.is-focused {
  background: #f3f4f6;
}

.ac-select-option.is-selected {
  background: #1b54cf;
  color: #fff;
}

/* Message */
.ac-textarea-wrap {
  width: 100%;
  height: calc(100% - 28px);
  gap: 10px;
  padding: 18px 24px;
  border: 1px solid var(--new-off-white);
  border-radius: var(--new-v2-radius-sm);
  transition: 0.2s;
}

.ac-textarea-col:has(.ac-field-error:not([hidden])) .ac-textarea-wrap {
  height: calc(100% - 58px);
}

.ac-textarea-wrap:hover,
.ac-textarea-wrap:focus-within {
  border-color: var(--new-blue);
}

.ac-textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: var(--ac-font);
  font-size: var(--new-v2-font-2xs);
}

.ac-textarea::placeholder {
  color: var(--new-v2-grey);
}

.ac-counter {
  font-family: var(--ac-font);
  font-size: 14px;
  color: var(--new-v2-grey);
}

.ac-contact-modal .ac-contact-submit {
  font-size: var(--new-v2-font-xs);
  font-weight: 400;
  line-height: 1;
}

.ac-contact-modal .ac-contact-note {
  padding-top: var(--new-v2-space-xs);
  font-size: var(--new-v2-font-1xs);
  font-weight: 400;
  line-height: 1;
  color: var(--new-v2-grey);
}

@media (min-width: 576px) {
  .ac-contact-modal .ac-contact-note {
    text-align: right !important;
  }
}

@media (max-width: 1799px) {
  .ac-select-control { min-height: 52px; }
}

@media (max-width: 1599px) {
  .ac-contact-notice { padding: 8px var(--new-v2-space-xs); }
  .ac-select-control { padding: 0 20px 0 48px; }
  .ac-select-menu { font-size: 14px; }
  .ac-select-prefix { left: 23px; }
}

@media (max-width: 1365px) {
  .ac-textarea-wrap { padding: 16px 20px; }
}

@media (max-width: 1279px) {
  .ac-select-control { padding: 0 20px 0 46px; }
}

@media (max-width: 991px) {
  .ac-select-menu { max-height: 130px; }
  .ac-select-control { min-height: 50px; }
}

@media (max-width: 767px) {
  .ac-select-prefix { left: 18px; }
}

@media (max-width: 575px) {
  .ac-select-prefix { left: 14px; }
  .ac-select-control { padding: 0 20px 0 38px; }
}

/* --- Mid-article app promo (functions.php ac_mid_article_promo) ------------
   single.php's DOM pass adds .paragraph-text/.info-detail to these <p>s and
   .img-border/.img-fluid to the badge images; the scoped rules below win over
   both, and over the article's own p/a/img rules. */
.ac-article-body .ac-mid-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  margin: 3.6rem 0;
  padding: 2.2rem 2.6rem;
  border: 1px solid var(--clr-tropical-breeze);
  border-left: 4px solid var(--clr-blueberry-soft-blue);
  border-radius: var(--radius-lg);
  background-color: var(--clr-alice-blue);
}

.ac-article-body .ac-mid-promo p {
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  color: var(--clr-dark-gray);
}

.ac-article-body .ac-mid-promo .ac-mid-promo-title {
  margin-bottom: 0.6rem;
  font-family: var(--font-Bitter);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-bluish-gray);
}

.ac-article-body .ac-mid-promo .ac-mid-promo-body {
  font-size: 1.6rem;
  line-height: 1.55;
}

.ac-article-body .ac-mid-promo-badges {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 1.2rem;
}

.ac-article-body .ac-mid-promo a,
.ac-article-body .ac-mid-promo a:hover {
  text-decoration: none;
}

.ac-article-body .ac-mid-promo .ac-badge {
  width: 13.5rem;
}

.ac-article-body .ac-mid-promo img {
  margin: 0;
  border: 0;
  border-radius: 0;
}

@media (max-width: 767.98px) {
  .ac-article-body .ac-mid-promo {
    flex-direction: column;
    align-items: flex-start;
    margin: 2.8rem 0;
    padding: 2rem;
  }

  .ac-article-body .ac-mid-promo-badges {
    justify-content: flex-start;
  }

  .ac-article-body .ac-mid-promo .ac-mid-promo-title {
    font-size: 1.9rem;
  }

  .ac-article-body .ac-mid-promo .ac-mid-promo-body {
    font-size: 1.5rem;
  }
}

/* --- Compact variant: the ~20% promo (ac_mid_article_promo_html('early')) ---
   Carries .ac-mid-promo too, so every neutralising rule above still applies.
   Since 2026-09-16 (owner: the white card was too bland) it wears the SAME
   surface as the ~40% promo: it inherits that box's alice-blue background,
   hairline border, 4px blueberry accent bar and large radius from the
   .ac-mid-promo rule above (nothing here overrides them), and its title uses
   the same colour. Only the layout stays compact: smaller type, tighter
   padding and the two badges stacked on the right so the card stays short. */
.ac-article-body .ac-mid-promo.ac-mid-promo-compact {
  gap: 2rem;
  margin: 3.2rem 0;
  padding: 1.6rem 2rem;
}

.ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-title {
  margin-bottom: 0.4rem;
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--clr-bluish-gray);
}

.ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-body {
  font-size: 1.5rem;
  line-height: 1.5;
}

.ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-note {
  margin-top: 0.4rem;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--clr-gray);
}

.ac-article-body .ac-mid-promo-compact .ac-mid-promo-badges {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.8rem;
}

.ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-badge {
  width: 11.5rem;
}

@media (max-width: 767.98px) {
  .ac-article-body .ac-mid-promo.ac-mid-promo-compact {
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
    margin: 2.4rem 0;
    padding: 1.4rem 1.6rem;
  }

  .ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-title {
    font-size: 1.6rem;
  }

  .ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-body {
    font-size: 1.4rem;
  }

  .ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-badge {
    width: 10.5rem;
  }
}

/* Narrow phones: text on top, the badges side by side underneath. */
@media (max-width: 479.98px) {
  .ac-article-body .ac-mid-promo.ac-mid-promo-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .ac-article-body .ac-mid-promo-compact .ac-mid-promo-badges {
    flex-direction: row;
    justify-content: flex-start;
  }
}

/* --- Previous / next thumbnails -------------------------------------------- */
.ac-post-nav-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.ac-post-nav-item.has-thumb {
  flex-direction: row;
  align-items: center;
  gap: 1.6rem;
}

.ac-post-nav-next.has-thumb {
  flex-direction: row-reverse;
}

.ac-post-nav-thumb {
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--clr-tropical-breeze);
}

.ac-post-nav-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .ac-post-nav-next.has-thumb {
    flex-direction: row;
  }

  .ac-post-nav-thumb {
    width: 6.4rem;
    height: 6.4rem;
  }
}

/* Embeds must fit the wider measure at every width, not only on phones. */
.ac-article-body iframe,
.ac-article-body video,
.ac-article-body embed,
.ac-article-body object {
  max-width: 100%;
}

/* ==========================================================================
   In-article app promos (~20% and ~40%): bold brand-blue card so they stand out
   from the text. Both variants share this surface; only layout differs.
   Added 2026-09-16 at the owner's request ("too bland, it doesn't pop out").
   ========================================================================== */
.ac-article-body .ac-mid-promo,
.ac-article-body .ac-mid-promo.ac-mid-promo-compact {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background-color: #0d50b5;
  background-image:
    radial-gradient(120% 140% at 100% 0%, rgba(111, 182, 255, 0.55) 0%, rgba(111, 182, 255, 0) 55%),
    linear-gradient(135deg, #0b3f94 0%, #0d50b5 45%, #1f7ae0 100%);
  box-shadow: 0 14px 34px rgba(13, 80, 181, 0.28);
}

.ac-article-body .ac-mid-promo p,
.ac-article-body .ac-mid-promo .ac-mid-promo-title,
.ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-title {
  color: #ffffff;
}

.ac-article-body .ac-mid-promo .ac-mid-promo-body {
  color: rgba(255, 255, 255, 0.92);
}

.ac-article-body .ac-mid-promo p:not(.ac-mid-promo-title):not(.ac-mid-promo-body) {
  color: rgba(255, 255, 255, 0.78);
}

.ac-article-body .ac-mid-promo .ac-mid-promo-badges a,
.ac-article-body .ac-mid-promo .ac-mid-promo-badges img {
  border-radius: 8px;
}

.ac-article-body .ac-mid-promo .ac-mid-promo-badges a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}