/*
 * Prompting Trust — MASTER Beehiiv Global Footer CSS
 * Updated: 2026-08-19 (callout chrome button + no-space section style attrs)
 *
 * Paste this entire file (including the surrounding style tags) into the
 * Beehiiv Website Builder Global Footer HTML embed.
 *
 * Baseline: live capture 2026-08-06 + post-header append (mobile image fill,
 * rectangular avatar, desktop canvas 675 / absolute cover) +
 * related/Spotlight Embla thumb absolute cover fill.
 * Homepage latest-post Recap card layer: DISABLED (@media not all).
 * Post-header: avatar + mobile/desktop image absolute cover ACTIVE; desktop
 * height 675 (Recap 16:9 / Beehiiv UI), not the old 630.
 * Active blog-card gap-fill: column 16:9 + cover (Archive); homepage row
 * cover-fill only (no aspect-ratio); Recap surface; type bleed vs section h3/p.
 * Post-header date/read time/SHARE excluded from section p 18px bleed.
 *
 * Replace the entire Global Footer embed contents with this file.
 *
 * Two-sheet live CSS (2026-08-10):
 *   Sheet 1 — this file (Global Footer): tokens, site chrome, post-header,
 *             forms, nav, post-body button primitives.
 *   Sheet 2 — MASTER-post-body-components.css (post template HTML embed):
 *             Supercharger / editorial component bridges (Key Moments, Article
 *             Card, Poll, etc.). See MASTER-post-body-components.README.md.
 */

/*
 * Prompting Trust — rebuilt global stylesheet
 *
 * This is the clean rebuild captured from the verified Screen Ruler session.
 * Beehiiv-generated selectors below describe the current rendered DOM and
 * should be revalidated after the clean page is connected.
 */

:root {
  --pt-primary: #161616;
  --pt-secondary: #737373;
  --pt-accent: #206bea;
  --pt-accent-hover: #3b7ded;
  --pt-button-bg: var(--pt-accent);
  --pt-button-fg: #ffffff;
  /* Blue primary halo (default) — same RGB as fill @ 20%. */
  --pt-button-ring: rgb(32 107 234 / 20%);
  --pt-button-secondary-bg: #e5e5e5;
  --pt-button-secondary-fg: var(--pt-primary);
  --pt-button-secondary-hover: #d9d9d9;
  /* Grey secondary halo — same RGB as fill @ 50% (visible against the page, not the fill). */
  --pt-button-secondary-ring: rgb(229 229 229 / 50%);
  --pt-canvas: #fafafa;
  --pt-surface: #ffffff;
  --pt-border: #dbdbdb;
  --pt-font-heading: "Bricolage Grotesque", Merriweather, Georgia, serif;
  --pt-font-body: Inter, sans-serif;
  --pt-radius-card: 10px;
  --pt-radius-widget: 10px;
  --pt-radius-post-card: 12px;
  --pt-radius-control: 8px;
  /* Recap .cs-entry card shadow — global card elevation token. */
  --pt-card-shadow: 0 8px 32px rgb(22 22 22 / 7%);
  --pt-shadow-callout: var(--pt-card-shadow);

  /* Semantic aliases shared by global UI and post-only component bridges. */
  --pt-color-text-primary: var(--pt-primary);
  --pt-color-text-secondary: var(--pt-secondary);
  --pt-color-border: var(--pt-border);
  --pt-color-surface: var(--pt-surface);
  --pt-color-surface-muted: #f3f5f8;
  --pt-color-control-primary: var(--pt-accent);
  --pt-color-control-primary-hover: var(--pt-accent-hover);
  --pt-color-control-secondary: var(--pt-button-secondary-bg);
  --pt-color-control-secondary-hover: var(--pt-button-secondary-hover);
  --pt-color-link: var(--pt-accent);
  --pt-color-callout-gradient-start: #8cb7ff;
  --pt-color-callout-gradient-end: #ff8486;
  --pt-font-family-heading: var(--pt-font-heading);
  --pt-font-family-reading: var(--pt-font-body);

  /* Shared signup / account form surface. */
  --pt-form-card-radius: 14px;
  --pt-form-card-shadow: 0 10px 40px 0 rgb(0 0 15 / 7%);
  --pt-form-card-border: rgb(255 255 255 / 95%);
  --pt-form-control-width: 30rem;
}

/* Global rasterisation contract: native web fonts with system-safe fallbacks. */
html,
body,
nav[class*="_1ma1r0q"],
nav[class*="_1ma1r0q"] a,
nav[class*="_1ma1r0q"] button {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/*
 * Header-neutral rebaseline candidate — 5 August 2026
 *
 * Purpose: restore Beehiiv's native post-header layout so its real desktop
 * and mobile structure can be compared with the Recap reference before a
 * replacement adapter is introduced. The former header takeover is retained
 * intact below for audit and rollback, but deliberately cannot match.
 *
 * CSS comments cannot safely contain the nested comments in that former
 * block, so `@media not all` is used as the reversible off switch. Change
 * only `not all` to `all` to restore it. Do not reactivate it piecemeal:
 * the old block couples canvas height, image layering and metadata layout.
 */
@media not all {
/*
 * Dynamic post header — superseded structural rules.
 *
 * Beehiiv emits the post image through nested normal-flow containers. The
 * image must instead be a full-size background layer; otherwise it falls
 * below the overlay content. Keep this block near the beginning of the
 * stylesheet so it remains available if the Builder truncates a long embed.
 * Desktop value verified against the 1200 × 630 source header.
 */
div.post-header-root-element {
  position: relative !important;
  height: 630px !important;
  overflow: visible !important;
}

div.post-header-root-element > div.flex.relative {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

div.post-header-root-element div[data-json-path="0,0"] {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 0 0 100% !important;
}

div.post-header-root-element div[data-json-path="0,0,0"] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: transparent !important;
}

div.post-header-root-element div[data-json-path="0,0,0"] > div._11n66oe1,
div.post-header-root-element div[data-json-path="0,0,0"] > div._11n66oe1 > img._11n66oe2 {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

div.post-header-root-element div[data-json-path="0,0,0,0"] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.18) 50%,
    rgba(0, 0, 0, 0.62) 100%
  ) !important;
}

/*
 * Dynamic post header — approved content and metadata treatment.
 *
 * Scoped to the post-header component so the site-wide heading/paragraph
 * foundation cannot recolour this white-on-image treatment. The metadata
 * retains Beehiiv's native two-row flow: author/date together, read time
 * beneath.
 */
div.post-header-root-element div[data-json-path="0,0,1"] h1 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}

div.post-header-root-element div[data-json-path="0,0,1"] p:not(:is(a[href*="/t/"] *)) {
  color: rgb(255 255 255 / 80%) !important;
  -webkit-text-fill-color: rgb(255 255 255 / 80%) !important;
  text-shadow: none !important;
}

div.post-header-root-element :is(
  div[data-json-path="0,0,1"],
  div[data-json-path="0,0,2"]
) {
  z-index: 2 !important;
}

div.post-header-root-element div[data-json-path="0,0,2"] :is(span, p):not(:is(a[href*="/t/"] *)) {
  color: rgb(255 255 255 / 80%) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 16.8px !important;
  letter-spacing: -0.28px !important;
}

div.post-header-root-element div[data-json-path="0,0,2,0,0"] :is(
  div.rounded-full,
  img.rounded-full
) {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
}

div.post-header-root-element
  div[data-json-path="0,0,2,0,0"]
  div.rounded-full.overflow-hidden {
  border: 0 !important;
}

div.post-header-root-element div[data-json-path="0,0,2,0,1"] a {
  color: #fff !important;
  font-family: var(--pt-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 16.8px !important;
  letter-spacing: -0.28px !important;
}

/*
 * Beehiiv's data-path selector does not survive this header's rendered
 * cascade. Scope the generated share container to the post header instead.
 */
div.post-header-root-element
  div.u5j3l2.u5j3l6.u5j3lj.dream-container.u5j3lf.u5j3l0
  > p.dream-paragraph.ybdwbv0
  span._11r14xt1:not(:is(a[href*="/t/"] *)) {
  color: rgb(255 255 255 / 80%) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 13.2px !important;
  letter-spacing: 1.1px !important;
  text-transform: uppercase !important;
}

/* Dynamic post-header share controls — source-matched default and hover. */
div.post-header-root-element
  div[data-json-path="0,0,2,1,1"]
  button.react-share__ShareButton {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgb(255 255 255 / 20%) !important;
  box-shadow: none !important;
  color: #fff !important;
  transition: 0.25s !important;
  overflow: hidden !important;
}

div.post-header-root-element
  div[data-json-path="0,0,2,1,1"]
  button.react-share__ShareButton
  svg {
  width: 18px !important;
  height: 18px !important;
  color: #fff !important;
  fill: currentColor !important;
}

div.post-header-root-element
  div[data-json-path="0,0,2,1,1"]
  button.react-share__ShareButton:hover {
  background: rgb(255 255 255 / 30%) !important;
}

/* Centre the shorter author-name row against the 32px avatar. */
div.post-header-root-element div[data-json-path="0,0,2,0,1,0"] {
  position: relative !important;
  top: 6px !important;
}
} /* End disabled post-header takeover. */

/* Header island and search layering — source/Figma: 1232×64, 14px radius. */
nav._1ma1r0q0 {
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
}

/* Lab companion — prevent Subscribe/nav CTA ::before or box-shadow clip. */
div._1ma1r0q9,
div._1ma1r0qa,
div._1ma1r0qr {
  overflow: visible !important;
}

div._1ma1r0q6.navbar-list {
  width: 100% !important;
  max-width: 1232px !important;
  min-height: 64px !important;
  height: 64px !important;
  margin: 24px auto 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 999 !important;
  overflow: visible !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 10px 40px 0 rgb(0 0 15 / 7%) !important;
}

div._1ma1r0q6.navbar-list > div._1ma1r0qg,
div._1ma1r0qg {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 0 16px !important;
  overflow: visible !important;
}

div._1ma1r0qg > div:nth-child(1),
div._1ma1r0qg > div:nth-child(2),
div._1ma1r0qg > div:nth-child(3) {
  min-width: 0 !important;
  align-items: center !important;
}

div._1ma1r0qg > div:nth-child(1) { flex: 1 1 0% !important; justify-content: flex-start !important; padding: 0 8px 0 0 !important; }
div._1ma1r0qg > div:nth-child(2) { flex: 3 1 0% !important; justify-content: center !important; padding: 0 8px !important; }
div._1ma1r0qg > div:nth-child(3) { flex: 1 1 0% !important; justify-content: flex-end !important; padding: 0 0 0 8px !important; }

nav._1ma1r0q0 a._1ma1r0qt._1ma1r0qo {
  font-family: var(--pt-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 22.4px !important;
  letter-spacing: -0.28px !important;
}

nav._1ma1r0q0 div._1ma1r0qu._1ma1r0qo > svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

/* Logged-in profile control: preserve its 48×32px footprint and remove
   Beehiiv's layout-changing hover border. Icons are grey until hover. */
nav._1ma1r0q0 div._1ma1r0q11._1ma1r0qo,
nav._1ma1r0q0 div._1ma1r0qu._1ma1r0qo {
  box-sizing: border-box !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
}

nav._1ma1r0q0 div._1ma1r0q11._1ma1r0qo svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

nav._1ma1r0q0 :is(div._1ma1r0q11._1ma1r0qo, div._1ma1r0qu._1ma1r0qo) svg {
  color: var(--pt-secondary);
  transition: color 0.1s ease-in-out;
}

nav._1ma1r0q0 :is(div._1ma1r0q11._1ma1r0qo, div._1ma1r0qu._1ma1r0qo):hover > svg {
  color: var(--pt-accent) !important;
}

nav._1ma1r0q0 :is(div._1ma1r0q11._1ma1r0qo, div._1ma1r0qu._1ma1r0qo):hover {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-sizing: border-box !important;
}

/* Keep the hover ring outside the CTA without changing its layout width. */
nav._1ma1r0q0 div._1ma1r0qr > a._1ma1r0qo._1ma1r0qq:hover {
  border: 0 !important;
  box-sizing: border-box !important;
}

/* Search backdrop and dialog must sit above the island. */
div.fixed.inset-0.z-50[data-state="open"] {
  z-index: 1001 !important;
}

div._1o7geka0[role="dialog"][data-state="open"] {
  top: 96px !important;
  z-index: 1002 !important;
}

@media (max-width: 768px) {
  div._1ma1r0q6.navbar-list {
    margin-top: 0 !important;
  }
}

/* Reusable highlighted hero heading. Keep custom HTML blocks structural only. */
.pt-hero-heading {
  max-width: 940px;
  margin: 0 auto;
  color: var(--pt-primary);
  font-family: var(--pt-font-heading);
  font-size: clamp(2.625rem, 6vw, 3.375rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
}

.pt-hero-heading .pt-highlight {
  position: relative;
  z-index: 0;
  display: inline-block;
  isolation: isolate;
  white-space: nowrap;
}

.pt-hero-heading .pt-highlight::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: -4px;
  width: calc(100% + 12px);
  height: calc(100% - 10px);
  transform: translateY(-50%);
  border-radius: 8px;
  background: #d8e7ff;
}

/* Page foundation */
body {
  background: var(--pt-canvas) !important;
  color: var(--pt-primary) !important;
}

/* H1–H4 heading family — type metrics only.
 * Colour left to Beehiiv UI (`--base-color` / inline). Do not force color here.
 * H5 is reserved for the homepage Authors / social strip (Beehiiv Authors
 * component). Recap maps that name to post-meta, not the heading scale.
 * Leave H5 to Beehiiv UI — do not re-add a competing !important type lock. */
section :is(h1, h2, h3, h4),
section :is(h1, h2, h3, h4) span,
section :is(h1, h2, h3, h4) strong {
  font-family: var(--pt-font-heading) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: -0.06em !important;
  text-transform: none !important;
}

section h1 { font-size: 54px !important; }
section h2 { font-size: 42px !important; }
section h3:not(:is(.post-root-element *)) { font-size: 34px !important; }
section h4 { font-size: 26px !important; }

/* Beehiiv heading blocks render through these custom properties; set type metrics only. */
section h1, section h1 span, section h1 strong {
  --font-size: 54px !important; --mobile-font-size: 42px !important;
  --font-weight: 600 !important; --line-height: 1.2 !important; --mobile-line-height: 1.2 !important;
  --letter-spacing: -0.06em !important; --text-transform: none !important;
}
section h2, section h2 span, section h2 strong {
  --font-size: 42px !important; --mobile-font-size: 34px !important;
  --font-weight: 600 !important; --line-height: 1.2 !important; --mobile-line-height: 1.2 !important;
  --letter-spacing: -0.06em !important; --text-transform: none !important;
}
section h3:not(:is(.post-root-element *)),
section h3:not(:is(.post-root-element *)) span,
section h3:not(:is(.post-root-element *)) strong {
  --font-size: 34px !important; --mobile-font-size: 26px !important;
  --font-weight: 600 !important; --line-height: 1.2 !important; --mobile-line-height: 1.2 !important;
  --letter-spacing: -0.06em !important; --text-transform: none !important;
}
section h4, section h4 span, section h4 strong {
  --font-size: 26px !important; --mobile-font-size: 20px !important;
  --font-weight: 600 !important; --line-height: 1.2 !important; --mobile-line-height: 1.2 !important;
  --letter-spacing: -0.06em !important; --text-transform: none !important;
}

/* H6 label treatment */
section h6,
section h6 span,
section h6 strong {
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

section h6, section h6 span, section h6 strong {
  --font-size: 11px !important; --mobile-font-size: 11px !important;
  --font-weight: 700 !important; --line-height: 1.2 !important; --mobile-line-height: 1.2 !important;
  --letter-spacing: 0.1em !important; --base-color: var(--pt-secondary) !important; --text-transform: uppercase !important;
}

/* Reading paragraphs — type metrics only; colour left to Beehiiv UI.
 * Exclude footer sections: tagline / column copy are Beehiiv UI–owned.
 * Exclude post-header: date / read time / SHARE (and any other
 * p.dream-paragraph under .post-header-root-element) stay Beehiiv UI–owned.
 * Exclude homepage/archive cards (.post-root-element) and content tags
 * (a[href*="/t/"]) — Beehiiv UI owns those chips.
 * Exclude Authors / social strip (outer row :has(> .dream-socials)). */
section:not(.footer *) p:not(.post-header-root-element *):not(:is(.post-root-element *)):not(:is(a[href*="/t/"] *)):not(:is(.dream-container:has(> .dream-socials) *)),
section:not(.footer *) p:not(.post-header-root-element *) span:not(:is(.post-root-element *)):not(:is(a[href*="/t/"] *)):not(:is(.dream-container:has(> .dream-socials) *)) {
  font-family: var(--pt-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
}

/*
 * TODO — migrate Supporting Copy off Global CSS:
 * Remove the fixed 18px Supporting Copy rules below (role anchors, hero
 * descriptions, archive/tags intros, tag descriptions) once each surface is
 * styled manually in Beehiiv UI to Recap metrics. Prefer UI ownership over
 * structural !important locks that bleed into footer / cards.
 */
/* Supporting Copy variation — apply only to a marked paragraph container. */
[data-pt-role="supporting-copy"] p,
[data-pt-role="supporting-copy"] p span,
[data-anchor-id="supporting-copy"] p,
[data-anchor-id="supporting-copy"] p span {
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 28.8px !important;
  letter-spacing: 0 !important;
}

/* Subscribe hero description: the Custom HTML embed provides a structural anchor. */
div[data-embed="true"] + div.u5j3l2.u5j3l5.u5j3li.u5j3lf.u5j3l0
  > p.ybdwbv0 > span._11r14xt0 > span._11r14xt1 {
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28.8px !important;
  letter-spacing: 0 !important;
}

/* Hero descriptions: Supporting Copy treatment on non-post pages only.
 * Post-header uses `h1 + p` too — leave those to Beehiiv UI colour. */
body:not(:has(.rendered-post))
  section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  h1 + p > span._11r14xt0 > span._11r14xt1 {
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28.8px !important;
  letter-spacing: 0 !important;
}

/* Archive and Tags opening paragraph: Supporting Copy treatment. */
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw5._1ny5scw8
  > div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0
  > p.ybdwbv0 > span._11r14xt0 {
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28.8px !important;
  letter-spacing: 0 !important;
}

/* Tag/article intro copy, including “The editions below are assigned to this tag.”
 * `:not(.footer *)` — footer brand column shares this DOM shape (tagline). */
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat:not(.footer *)
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw8
  > div.u5j3l1.u5j3l4.u5j3lj.u5j3lf.u5j3l0
  > div.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0
  > p.ybdwbv0 > span._11r14xt0 > span._11r14xt1 {
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28.8px !important;
  letter-spacing: 0 !important;
}

/* Tag description text — Supporting Copy treatment on non-post pages only.
 * Do not match post-header subtitles (those live under .rendered-post /
 * .post-header-root-element and should keep Beehiiv UI colour).
 * Do not match homepage Blog post card subtitle
 * (p[data-json-path="0,1,2,0"] under .post-root-element) — Recap 16px.
 * Do not match footer sections (tagline / column copy — Beehiiv UI).
 * Do not match Authors / social bio (sibling of .dream-socials). */
body:not(:has(.rendered-post))
  section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat:not(.footer *)
  p.dream-paragraph.ybdwbv0:not([data-json-path="0,1,2,0"]):not(:is(.post-root-element *)):not(:is(.dream-container:has(> .dream-socials) *)) {
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28.8px !important;
  letter-spacing: 0 !important;
}

/* Subscribe form: Figma node 1:1411 — 384px row, 8px gap, 277px input, 99px button.
 * overflow:visible is required so the submit ::before / box-shadow ring is not
 * clipped (Beehiiv sets overflow:hidden on ._1lgh8461). */
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw8
  > div.u5j3l2.u5j3l4.u5j3li.u5j3lf.u5j3l0 form.contents
  > div._1lgh8460.flex.flex-col.gap-2
  > div._1lgh8461[class~="sm:flex-row"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 384px !important;
  max-width: 100% !important;
  height: 40px !important;
  overflow: visible !important;
}

/* Any Beehiiv email-capture row — unclip hover rings site-wide. */
form ._1lgh8460,
form ._1lgh8461,
form .relative.w-full {
  overflow: visible !important;
}

/* Footer subscribe form wrappers (lab parity) — keep rings outside the row.
 * Beehiiv footers often use overflow:hidden on the root; unclip the full chain. */
div.footer._5cga7e0,
div.footer._5cga7e0 > div,
div.footer._5cga7e0 section._1ny5scw0._1ny5scw6 {
  overflow: visible !important;
}

div.footer._5cga7e0 section._1ny5scw0._1ny5scw6 > div.flex.flex-col {
  overflow: visible !important;
}

div.footer._5cga7e0 section._1ny5scw0._1ny5scw6 form ._1lgh8461,
div.footer._5cga7e0 section._1ny5scw0._1ny5scw6 form .relative.w-full {
  overflow: visible !important;
}

/* Master form input treatment. All Beehiiv email-capture forms inherit this. */
form input[type="email"],
form input[name="email"] {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 11px 17px !important;
  border: 1px solid #dbdbdb !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 10px 40px rgb(0 0 0 / 6%) !important;
  color: var(--pt-primary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
  letter-spacing: 0 !important;
}

form input[type="email"]::placeholder,
form input[name="email"]::placeholder {
  color: rgb(22 22 22 / 50%) !important;
  opacity: 1 !important;
  font-family: var(--pt-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
}

/* Master form button (40px) — inline with form fields.
 * Standalone CTAs use the 32px native adapter further below.
 * Literal fallbacks so a missing :root token cannot blank the CTA. */
form button[type="submit"] {
  position: relative !important;
  isolation: isolate !important;
  z-index: 9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 11px 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--pt-button-bg, #206bea) !important;
  background-color: var(--pt-button-bg, #206bea) !important;
  color: var(--pt-button-fg, #ffffff) !important;
  font-family: var(--pt-font-body, Inter, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 16.8px !important;
  letter-spacing: -0.28px !important;
  text-align: center !important;
  overflow: visible !important;
  transition: background-color 0.25s, color 0.25s !important;
}

form button[type="submit"]::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  width: calc(100% + 6px) !important;
  height: calc(100% + 6px) !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: 4px solid var(--pt-button-ring, rgb(32 107 234 / 20%)) !important;
  border-radius: 10px !important;
  opacity: 0 !important;
  transition: opacity 0.25s !important;
}

form button[type="submit"]:hover::before,
form button[type="submit"]:focus::before,
form button[type="submit"]:focus-visible::before {
  opacity: 1 !important;
}

/* Beehiiv adds a real hover/focus border to form controls; remove it so the
   pseudo-element ring does not resize or clip the button. */
form button[type="submit"]:hover,
form button[type="submit"]:focus,
form button[type="submit"]:focus-visible,
form input[type="submit"]:hover,
form input[type="submit"]:focus,
form input[type="submit"]:focus-visible {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-sizing: border-box !important;
}

form button[type="submit"]:hover,
form button[type="submit"]:focus,
form button[type="submit"]:focus-visible {
  background: var(--pt-accent-hover, #3b7ded) !important;
  background-color: var(--pt-accent-hover, #3b7ded) !important;
}

form button[type="submit"].pt-button--grey:hover,
form button[type="submit"].pt-button--grey:focus,
form button[type="submit"].pt-button--grey:focus-visible,
form button[type="submit"][data-pt-variant="grey"]:hover,
form button[type="submit"][data-pt-variant="grey"]:focus,
form button[type="submit"][data-pt-variant="grey"]:focus-visible {
  background: var(--pt-button-secondary-hover, #d9d9d9) !important;
  background-color: var(--pt-button-secondary-hover, #d9d9d9) !important;
}

/* Password-form sibling of the master email form: same 40px field and blue submit geometry. */
form input[type="password"] {
  width: 277px !important;
  max-width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 11px 17px !important;
  border: 1px solid #dbdbdb !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 10px 40px rgb(0 0 0 / 6%) !important;
  color: var(--pt-primary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
}

form input[type="submit"] {
  position: relative !important;
  z-index: 9 !important;
  width: auto !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 11px 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--pt-button-bg, #206bea) !important;
  background-color: var(--pt-button-bg, #206bea) !important;
  color: var(--pt-button-fg, #ffffff) !important;
  font-family: var(--pt-font-body, Inter, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 16.8px !important;
  text-align: center !important;
  cursor: pointer !important;
  overflow: visible !important;
  transition: background-color 0.25s, box-shadow 0.25s !important;
}

/* Input-based submit controls cannot render ::before, so use the same blue ring. */
form input[type="submit"]:hover,
form input[type="submit"]:focus,
form input[type="submit"]:focus-visible {
  background: var(--pt-accent-hover, #3b7ded) !important;
  background-color: var(--pt-accent-hover, #3b7ded) !important;
  box-shadow: 0 0 0 4px var(--pt-button-ring, rgb(32 107 234 / 20%)) !important;
  transition: box-shadow 0.25s, background-color 0.25s !important;
}

/* Update Password wrapper: let the password fields determine the form width. */
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  form.contents div._12r0es70.flex.flex-col.gap-2 {
  width: auto !important;
  max-width: none !important;
}

/* Child colour variant: keep the master geometry and rollover, change colour only. */
form button[type="submit"].pt-button--grey,
form button[type="submit"][data-pt-variant="grey"] {
  --pt-button-bg: var(--pt-button-secondary-bg, #e5e5e5);
  --pt-button-fg: var(--pt-button-secondary-fg, #161616);
  --pt-button-ring: var(--pt-button-secondary-ring, rgb(229 229 229 / 50%));
}

/* WT recommendations / signup modal primary — Recap halo (lab §24). */
button.wt-button-font.bg-wt-primary.text-wt-text-on-primary {
  position: relative !important;
  z-index: 9 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  isolation: isolate !important;
  min-width: 4.125rem !important;
  border: 0 !important;
  border-radius: var(--pt-radius-control, 8px) !important;
  background: var(--pt-button-bg, #206bea) !important;
  background-color: var(--pt-button-bg, #206bea) !important;
  color: var(--pt-button-fg, #ffffff) !important;
  font-family: var(--pt-font-body, Inter, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.28px !important;
  padding: 7.5px 12px !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: background-color 0.25s, box-shadow 0.25s !important;
}

button.wt-button-font.bg-wt-primary.text-wt-text-on-primary::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  width: calc(100% + 6px) !important;
  height: calc(100% + 6px) !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: 4px solid var(--pt-button-ring, rgb(32 107 234 / 20%)) !important;
  border-radius: 10px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s !important;
}

button.wt-button-font.bg-wt-primary.text-wt-text-on-primary:hover,
button.wt-button-font.bg-wt-primary.text-wt-text-on-primary:focus,
button.wt-button-font.bg-wt-primary.text-wt-text-on-primary:focus-visible {
  background: var(--pt-accent-hover, #3b7ded) !important;
  background-color: var(--pt-accent-hover, #3b7ded) !important;
  border: 0 !important;
  outline: none !important;
}

button.wt-button-font.bg-wt-primary.text-wt-text-on-primary:hover::before,
button.wt-button-font.bg-wt-primary.text-wt-text-on-primary:focus::before,
button.wt-button-font.bg-wt-primary.text-wt-text-on-primary:focus-visible::before {
  opacity: 1 !important;
}

/* Beehiiv signup form card — shared Recap surface and controls (lab §24a). */
form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 {
  background: var(--pt-surface, #ffffff) !important;
  border: 1px solid var(--pt-form-card-border, rgb(255 255 255 / 95%)) !important;
  border-radius: var(--pt-form-card-radius, 14px) !important;
  box-shadow: var(--pt-form-card-shadow, 0 10px 40px 0 rgb(0 0 15 / 7%)) !important;
  max-width: min(560px, calc(100vw - 32px)) !important;
  overflow: visible !important;
  padding: 32px !important;
  width: min(560px, calc(100vw - 32px)) !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 :is(.yuhrlz2, .yuhrlz3, .yuhrlz4, .yuhrlz1, .yuhrlz7) {
  max-width: var(--pt-form-control-width, 30rem) !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 .yuhrlz2 {
  color: var(--pt-primary, #161616) !important;
  font-family: var(--pt-font-heading, "Bricolage Grotesque", Merriweather, Georgia, serif) !important;
  font-size: 26px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: -0.06em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-transform: none !important;
  width: 100% !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 .yuhrlz3 {
  color: var(--pt-secondary, #737373) !important;
  font-family: var(--pt-font-body, Inter, sans-serif) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.6 !important;
  margin: 10px 0 32px !important;
  width: 100% !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 :is(label, .pt-form-field) {
  display: block !important;
  margin: 0 0 20px !important;
  width: 100% !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 .yuhrlz4 {
  color: var(--pt-primary, #161616) !important;
  display: block !important;
  font-family: var(--pt-font-body, Inter, sans-serif) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.6 !important;
  margin: 0 0 4px !important;
  text-transform: none !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 .yuhrlz1 {
  appearance: none !important;
  background-color: var(--pt-canvas, #fafafa) !important;
  border: 1px solid var(--pt-border, #dbdbdb) !important;
  border-radius: var(--pt-radius-control, 8px) !important;
  box-shadow: none !important;
  color: var(--pt-primary, #161616) !important;
  display: block !important;
  font-family: var(--pt-font-body, Inter, sans-serif) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  min-height: 40px !important;
  outline: none !important;
  padding: 8px 16px !important;
  text-transform: none !important;
  transition: border-color 0.25s !important;
  width: 100% !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 .yuhrlz1:is(:hover, :focus, :focus-visible) {
  border-color: #cfcfcf !important;
  box-shadow: none !important;
  outline: none !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 .yuhrlz1::placeholder {
  color: rgb(22 22 22 / 50%) !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 select.yuhrlz1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='currentColor'%3E%3Cpath d='M10.293,3.293,6,7.586,1.707,3.293A1,1,0,0,0,.293,4.707l5,5a1,1,0,0,0,1.414,0l5-5a1,1,0,1,0-1.414-1.414Z' fill='currentColor'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") !important;
  background-position: calc(100% - 16px) center !important;
  background-repeat: no-repeat !important;
  background-size: 0.6em !important;
  padding-right: 40px !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 .yuhrlz7 {
  width: auto !important;
}

form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 :is(input, button).yuhrlz7[type="submit"] {
  display: block !important;
  margin: 8px 0 0 auto !important;
}

@media (max-width: 768px) {
  form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 {
    padding: 24px !important;
    width: 100% !important;
  }

  form.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 :is(.yuhrlz2, .yuhrlz3, .yuhrlz4, .yuhrlz1, .yuhrlz7) {
    max-width: 100% !important;
  }
}

/* Login form: match the Subscribe control widths and keep Submit left-aligned. */
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw8
  > div.u5j3l2.u5j3l4.u5j3li.u5j3lf.u5j3l0 form.contents input[name="login_email"] {
  width: 277px !important;
  max-width: 100% !important;
}

section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw8
  > div.u5j3l2.u5j3l4.u5j3li.u5j3lf.u5j3l0 form.contents > div.relative.w-full {
  width: 384px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw8
  > div.u5j3l2.u5j3l4.u5j3li.u5j3lf.u5j3l0 form.contents
  > div.relative.w-full > div._64qc9p0.flex.flex-col.gap-2 {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 384px !important;
  max-width: 100% !important;
  height: auto !important;
}

section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw8
  > div.u5j3l2.u5j3l4.u5j3li.u5j3lf.u5j3l0 form.contents
  > div.relative.w-full > div._64qc9p0.flex.flex-col.gap-2 > button.cursor-pointer {
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  align-self: auto !important;
}

section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  div.flex.flex-row.justify-end.w-full {
  justify-content: flex-start !important;
  width: 277px !important;
  max-width: 100% !important;
}

/* Login only: keep its protected form section neutral; the toggle wrapper is natively transparent. */
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat:has(input[name="login_email"]) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Homepage adapter for the dedicated supporting-copy container. */
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw9
  > div.u5j3l1.u5j3l5.u5j3lj.u5j3lf.u5j3l0
  > div.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0 {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw9
  > div.u5j3l1.u5j3l5.u5j3lj.u5j3lf.u5j3l0
  > div.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0
  > p,
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw9
  > div.u5j3l1.u5j3l5.u5j3lj.u5j3lf.u5j3l0
  > div.u5j3l1.u5j3l5.u5j3li.u5j3lf.u5j3l0
  > p span {
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 28.8px !important;
  letter-spacing: 0 !important;
}

/* Header/footer subscribe-modal CTA — 32px standalone (nav “Get the Context”).
 * Native Beehiiv buttons (e.g. About Subscribe) and text CTAs (e.g. Browse the
 * archive / ey1jsk) are left to Beehiiv UI — do not restyle them here.
 * Form-inline submits stay on the 40px master above (form button[type="submit"]).
 * Paint uses literal fallbacks so a missing token cannot blank the CTA. */
div._1ma1r0qr > a._1ma1r0qo._1ma1r0qq {
  --pt-native-button-ring: var(--pt-button-ring, rgb(32 107 234 / 20%));
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 7.5px 12px !important;
  border: 0 !important;
  border-radius: var(--pt-radius-control, 8px) !important;
  background: var(--pt-accent, #206bea) !important;
  background-color: var(--pt-accent, #206bea) !important;
  color: #ffffff !important;
  font-family: var(--pt-font-body, Inter, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 16.8px !important;
  letter-spacing: -0.28px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s !important;
}

div._1ma1r0qr > a._1ma1r0qo._1ma1r0qq:hover,
div._1ma1r0qr > a._1ma1r0qo._1ma1r0qq:focus-visible {
  background: var(--pt-accent-hover, #3b7ded) !important;
  background-color: var(--pt-accent-hover, #3b7ded) !important;
  border: 0 !important;
  box-shadow: 0 0 0 4px var(--pt-native-button-ring) !important;
}

/* Native Beehiiv CTAs on Website Builder pages (e.g. homepage Contact me).
 * `.bdk9l24` / `.bdk9l25` is a generated renderer class and must not be used as
 * an identity hook. The stable primary-button pair is `.bdk9l21.bdk9l22`.
 * Same 32px standalone geometry as nav; forms and rendered posts have separate
 * owners below.
 */
body:not(:has(.rendered-post)) :is(button, a).bdk9l21.bdk9l22:not([type="submit"]) {
  --pt-native-button-ring: var(--pt-button-ring, rgb(32 107 234 / 20%));
  --pt-native-button-hover: var(--pt-accent-hover, #3b7ded);
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  height: 32px !important;
  margin: 10px 0 !important;
  padding: 7.5px 12px !important;
  border: 0 !important;
  border-radius: var(--pt-radius-control, 8px) !important;
  font-family: var(--pt-font-body, Inter, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 16.8px !important;
  letter-spacing: -0.28px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.25s, box-shadow 0.25s !important;
  overflow: visible !important;
}

/* Grey native CTAs — Beehiiv secondary fill (#e5e5e5) or explicit PT variant. */
body:not(:has(.rendered-post)) :is(button, a).bdk9l21.bdk9l22:not([type="submit"]).pt-button--grey,
body:not(:has(.rendered-post)) :is(button, a).bdk9l21.bdk9l22:not([type="submit"])[data-pt-variant="grey"],
body:not(:has(.rendered-post)) :is(button, a).bdk9l21.bdk9l22:not([type="submit"])[style*="--button-background-color: #E5E5E5"],
body:not(:has(.rendered-post)) :is(button, a).bdk9l21.bdk9l22:not([type="submit"])[style*="--button-background-color: #e5e5e5"],
body:not(:has(.rendered-post)) :is(button, a).bdk9l21.bdk9l22:not([type="submit"])[style*="--button-background-color:#E5E5E5"],
body:not(:has(.rendered-post)) :is(button, a).bdk9l21.bdk9l22:not([type="submit"])[style*="--button-background-color:#e5e5e5"] {
  --pt-native-button-ring: var(--pt-button-secondary-ring, rgb(229 229 229 / 50%));
  --pt-native-button-hover: var(--pt-button-secondary-hover, #d9d9d9);
}

body:not(:has(.rendered-post)) :is(button, a).bdk9l21.bdk9l22:not([type="submit"]):hover,
body:not(:has(.rendered-post)) :is(button, a).bdk9l21.bdk9l22:not([type="submit"]):focus-visible {
  background: var(--pt-native-button-hover) !important;
  background-color: var(--pt-native-button-hover) !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 0 0 4px var(--pt-native-button-ring) !important;
}

/* Homepage / section CTAs — keep the halo from being covered by the next band.
 * Beehiiv hero sections often use padding-bottom: 0; the ring needs air. */
body:not(:has(.rendered-post)) section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat:has(
  :is(button, a).bdk9l21.bdk9l22:not([type="submit"])
) {
  overflow: visible !important;
  padding-bottom: 12px !important;
}

body:not(:has(.rendered-post)) div.u5j3l0:has(> :is(button, a).bdk9l21.bdk9l22:not([type="submit"])) {
  overflow: visible !important;
}

/* “What The Context covers” cards — homepage only.
 * Require h6 label + h3 title so post two-column layouts
 * (.t9qhsic > content | sidebar) are not painted as white cards. */
div.t9qhsib.t9qhsia > div.t9qhsic > div:has(h6):has(h3) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  padding: 24px !important;
  background: var(--pt-surface) !important;
  border: 1px solid var(--pt-border) !important;
  border-radius: var(--pt-radius-card) !important;
  box-shadow: var(--pt-card-shadow) !important;
  overflow: visible !important;
}

/* Post body columns sit in the same Beehiiv .t9qhsic grid. Keep them flush
 * with --pt-canvas — no white card chrome / outline. */
.rendered-post div.t9qhsib.t9qhsia > div.t9qhsic > div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0,
.rendered-post
  div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0:has(
    > div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0 > #content-blocks
  ),
.rendered-post
  div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0 > div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0:has(
    > #content-blocks
  ) {
  background: var(--pt-canvas, #fafafa) !important;
  background-color: var(--pt-canvas, #fafafa) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Dynamic $tag-page card: exact standard card grammar, with content top-aligned. */
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw5._1ny5scw8
  > div.u5j3l1.u5j3l6.u5j3lj.u5j3lf.u5j3l0
  > div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  padding: 24px !important;
  background: var(--pt-surface) !important;
  border: 1px solid var(--pt-border) !important;
  border-radius: var(--pt-radius-card) !important;
  box-shadow: var(--pt-card-shadow) !important;
  overflow: visible !important;
}

/* About-page “Next / Read The Context” card.
 * Card chrome only — inner CTAs left to Beehiiv UI. */
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw8
  > div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0:has(h6):has(h3):has(:is(button, a).bdk9l21.bdk9l22) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  padding: 24px !important;
  background: var(--pt-surface) !important;
  border: 1px solid var(--pt-border) !important;
  border-radius: var(--pt-radius-card) !important;
  box-shadow: var(--pt-card-shadow) !important;
  overflow: visible !important;
}

/* About-page card internal hierarchy: Next is H6, Read The Context is H3. */
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw8
  > div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0:has(h6):has(h3):has(:is(button, a).bdk9l21.bdk9l22)
  h6,
section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw8
  > div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0:has(h6):has(h3):has(:is(button, a).bdk9l21.bdk9l22)
  h6 span {
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  --text-transform: uppercase !important;
  --letter-spacing: 0.1em !important;
  --font-size: 11px !important;
  --line-height: 1.2 !important;
  --base-color: var(--pt-secondary) !important;
}

section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  > div.flex.flex-col.w-full.grow._1ny5scw6._1ny5scw8
  > div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0:has(h6):has(h3):has(:is(button, a).bdk9l21.bdk9l22)
  h3 {
  color: var(--pt-primary) !important;
  font-family: var(--pt-font-heading) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.06em !important;
}

/* Reusable lightweight CTA embed: structure-only HTML, shared global treatment.
 * SVG uses fill="currentColor" — colour must live on .cta-button / svg so the
 * icon inherits. Also set fill in CSS in case Beehiiv strips the attribute. */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 3px solid transparent;
  border-radius: 32px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(93.08deg, #8cb7ff 0%, #ff8486 100%) border-box;
  box-shadow: rgb(0 0 0 / 6%) 0 6px 16px;
  color: var(--pt-secondary, #737373);
  cursor: pointer;
  font-family: var(--pt-font-body, Inter, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-decoration: none;
  transition: 0.25s;
}

.cta-button:hover,
.cta-button:focus,
.cta-button:focus-visible {
  color: var(--pt-primary, #161616);
}

.cta-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--pt-accent, #206bea);
  fill: currentColor;
  overflow: visible;
  transform: translateY(1px);
}

.cta-button svg path {
  fill: currentColor !important;
}

.cta-button .chevron {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: currentColor;
}

.cta-button .chevron::before,
.cta-button .chevron::after {
  position: absolute;
  top: calc(50% + 1px);
  right: 0;
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  background-color: currentColor;
  content: "";
  transform: translateY(-50%);
  transition: 0.25s;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.cta-button .chevron::before {
  opacity: 1;
  visibility: visible;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M561.98 447.996l-211.188 211.191 60.34 60.339 271.531-271.531-271.531-271.526-60.34 60.339 211.188 211.187z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M561.98 447.996l-211.188 211.191 60.34 60.339 271.531-271.531-271.531-271.526-60.34 60.339 211.188 211.187z'/%3E%3C/svg%3E");
}

.cta-button .chevron::after {
  opacity: 0;
  visibility: hidden;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M647.292 490.667l-168.499 168.5 60.331 60.375 271.543-271.542-271.543-271.543-60.331 60.335 168.542 168.542h-434.001v85.333h433.958z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M647.292 490.667l-168.499 168.5 60.331 60.375 271.543-271.542-271.543-271.543-60.331 60.335 168.542 168.542h-434.001v85.333h433.958z'/%3E%3C/svg%3E");
}

.cta-button:hover .chevron::before,
.cta-button:focus .chevron::before {
  opacity: 0;
  visibility: hidden;
  transform: translate(2px, -50%);
}

.cta-button:hover .chevron::after,
.cta-button:focus .chevron::after {
  opacity: 1;
  visibility: visible;
}

/* Footer subscribe visual: three-card animation and static loop badge. */
.pt-subscribe-embed {
  position: relative;
  width: 100%;
  max-width: 610px;
  margin: 0 auto;
  color: var(--pt-primary);
  font-family: var(--pt-font-body);
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

.pt-subscribe-embed,
.pt-subscribe-embed * {
  box-sizing: border-box;
}

.pt-subscribe-embed__content {
  width: 100%;
  max-width: 610px;
  margin: 0 auto;
}

.pt-subscribe-embed .cs-subscribe__images {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  margin: 0 auto;
}

.pt-subscribe-embed .cs-subscribe__image {
  position: relative;
  width: 200px;
  height: 200px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--pt-radius-card);
  transition: transform 250ms ease;
}

.pt-subscribe-embed .cs-subscribe__image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: var(--pt-radius-card);
  object-fit: cover;
}

.pt-subscribe-embed .cs-subscribe__image:nth-child(1) {
  width: 150px;
  height: 150px;
  z-index: 1;
  transform: translate(35px, 0) rotate(-15deg);
}

.pt-subscribe-embed .cs-subscribe__image:nth-child(2) {
  z-index: 3;
  border: 2px solid var(--pt-surface);
  box-shadow: var(--pt-card-shadow);
}

.pt-subscribe-embed .cs-subscribe__image:nth-child(3) {
  width: 150px;
  height: 150px;
  z-index: 1;
  transform: translate(-35px, 0) rotate(15deg);
}

@media (hover: hover) {
  .pt-subscribe-embed .cs-subscribe__images:hover .cs-subscribe__image:nth-child(1) {
    transform: translate(-16px, 0) rotate(0deg);
  }

  .pt-subscribe-embed .cs-subscribe__images:hover .cs-subscribe__image:nth-child(3) {
    transform: translate(16px, 0) rotate(0deg);
  }
}

.pt-subscribe-embed .cs-subscribe__header {
  margin-top: 32px;
  text-align: center;
}

.pt-subscribe-embed .cs-subscribe__cta-tag {
  margin: 0 auto;
  text-align: center;
}

.pt-subscribe-embed .cs-subscribe__cta-tag .cs-button-outline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 3px solid transparent;
  border-radius: 32px;
  background:
    linear-gradient(var(--pt-surface), var(--pt-surface)) padding-box,
    linear-gradient(93.08deg, #8cb7ff 0%, #ff8486 100%) border-box;
  box-shadow: rgb(0 0 0 / 6%) 0 6px 16px;
  color: var(--pt-secondary);
  cursor: default;
  font-family: var(--pt-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.pt-subscribe-embed .cs-subscribe__cta-tag svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--pt-accent);
}

.pt-subscribe-embed .cs-subscribe__heading {
  margin-top: 12px;
}

.pt-subscribe-embed .cs-subscribe__sub-heading {
  max-width: 464px;
  margin: 10px auto 0;
  color: var(--pt-secondary);
  font-family: var(--pt-font-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 575.98px) {
  .pt-subscribe-embed .cs-subscribe__image {
    width: 130px;
    height: 130px;
  }

  .pt-subscribe-embed .cs-subscribe__image:nth-child(1),
  .pt-subscribe-embed .cs-subscribe__image:nth-child(3) {
    width: 80px;
    height: 80px;
  }
}

@media (hover: hover) and (max-width: 575.98px) {
  .pt-subscribe-embed .cs-subscribe__images:hover .cs-subscribe__image:nth-child(1) {
    transform: translate(-2px, 0) rotate(0deg);
  }

  .pt-subscribe-embed .cs-subscribe__images:hover .cs-subscribe__image:nth-child(3) {
    transform: translate(2px, 0) rotate(0deg);
  }
}

/* Footer marquee: preserve the source flow; the two repeated runs are identical. */
.cs-footer-marquee {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 25%, rgb(250, 250, 250) 75%, transparent);
  margin-top: 3rem;
}

.cs-footer-marquee > svg {
  display: none;
  width: 0;
  height: 0;
}

.cs-footer-marquee__content {
  display: inline-flex;
  color: var(--cs-color-primary, var(--pt-text));
  animation: marqueeAnimation calc(var(--cs-marquee-speed, 40000) * 1ms) linear infinite;
  font-family: "Bricolage Grotesque", Arial, sans-serif;
  font-size: 3.375em;
  font-style: var(--cs-font-headings-style, normal);
  font-weight: var(--cs-font-headings-weight, 600);
  line-height: var(--cs-font-headings-line-height, 1.2);
  letter-spacing: var(--cs-font-headings-letter-spacing, -0.06em);
  text-transform: none;
}

.cs-footer-marquee__item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.cs-footer-marquee__item span {
  display: inline;
  text-transform: none;
}

.cs-footer-marquee__item svg {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin: 0 14px;
  color: var(--pt-accent);
  fill: currentColor;
}

@keyframes marqueeAnimation {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (max-width: 575.98px) {
  .cs-footer-marquee__content { font-size: 2rem; }
}

/*
 * Footer — Recap rollover + social shadow only (2026-08-07).
 *
 * Beehiiv UI owns footer layout, typography (incl. tagline), icon size, and
 * which networks are published. Old `div.t9qhsic` selectors are obsolete after
 * the footer restructure. Supporting Copy / `section p` bleed is excluded via
 * `:not(.footer *)` above. Keep only interactions Beehiiv cannot do cleanly:
 *   1) nav sibling fade on hover
 *   2) social tile drop shadow
 *   3) social sibling fade on hover
 *
 * Nav columns: title lives in its own <p>; links share a second <p> of
 * span._11r14xt0 rows (some wrap button.ey1jsk*, some are plain text CTAs
 * e.g. "Update Password"). Fade sibling spans in that links <p> so both
 * button links and text-only rows participate.
 */
div.footer._5cga7e0
  div.u5j3l1.u5j3l5.u5j3lj.u5j3lf.u5j3l0
  > div.u5j3l1.u5j3l4.u5j3li.u5j3lf.u5j3l0
  > p:has(span._11r14xt0:hover)
  > span._11r14xt0:not(:hover) {
  opacity: 0.5 !important;
  transition: opacity 0.25s !important;
}

div.footer._5cga7e0 div.xyzi7y0 > a,
body:not(:has(.rendered-post)) .dream-socials > a {
  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 6%) !important;
  transition: opacity 0.25s !important;
}

div.footer._5cga7e0 div.xyzi7y0:hover > a:not(:hover),
body:not(:has(.rendered-post)) .dream-socials:hover > a:not(:hover) {
  opacity: 0.5 !important;
}

/* Authors social tiles — Recap / footer contract: 32 tile, 18 glyph, 8 radius.
 * Footer already has these values in Beehiiv UI; Authors UI is 14/6 and clips
 * at max-width 32 without the tile padding the footer uses. */
body:not(:has(.rendered-post)) .dream-socials {
  width: fit-content !important;
  max-width: none !important;
  --icon-size: 18px !important;
  --icon-padding: 7px !important;
  --linkedin-border-radius: 8px !important;
}

body:not(:has(.rendered-post)) .dream-socials > a {
  width: 32px !important;
  height: 32px !important;
  padding: 7px !important;
  border-radius: 8px !important;
}

body:not(:has(.rendered-post)) .dream-socials > a svg {
  width: 18px !important;
  height: 18px !important;
}

/* Beehiiv mobile heading scale */
@media (max-width: 767.98px) {
  section h1 { font-size: 42px !important; }
  section h2 { font-size: 34px !important; }
  section h3:not(:is(.post-root-element *)) { font-size: 26px !important; }
  section h4 { font-size: 20px !important; }
}

/*
 * Latest-post card (homepage Recap translation) — DISABLED for Beehiiv-UI test.
 *
 * Beehiiv Single post card map (2026-08-06): layout, padding, gaps, radius,
 * colours and typography belong in Beehiiv UI. Global keeps only square-thumb
 * cover-fill (Embla Spotlight/Recent block below) and optional Tags hover.
 *
 * Former Recap grid/type treatment retained under `@media not all` for
 * rollback. Change `not all` → `all` to restore. Sidebar cards on
 * `.rendered-post` pages were already excluded from this block.
 */
@media not all {
/* --- begin disabled latest-post card Recap layer --- */
body:not(:has(.rendered-post)) section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat:has(div.post-root-element) {
  overflow: visible !important;
  padding-bottom: 32px !important; /* keeps the 32px source shadow visible */
}

body:not(:has(.rendered-post)) div.post-root-element div.dream-container[data-json-path="0"][class~="h-full"] {
  display: grid !important;
  width: 776px !important;
  max-width: 100% !important;
  height: 315.172px !important;
  margin-inline: auto !important;
  grid-template-columns: 377px 399px !important;
  grid-template-rows: 315.172px !important;
  align-items: stretch !important;
  border: 0 !important;
  border-radius: var(--pt-radius-card) !important;
  background: var(--pt-surface) !important;
  box-shadow: var(--pt-card-shadow) !important;
  overflow: hidden !important;
  transition: 0.25s !important;
}

body:not(:has(.rendered-post)) div.post-root-element div.dream-container[data-json-path="0,0"] {
  width: 377px !important;
  height: 315.172px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body:not(:has(.rendered-post)) div.post-root-element div[data-json-path="0,0,0"],
body:not(:has(.rendered-post)) div.post-root-element div[data-json-path="0,0,0"] img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

body:not(:has(.rendered-post)) div.post-root-element div.dream-container[data-json-path="0,1"] {
  display: flex !important;
  width: 399px !important;
  height: 315.172px !important;
  min-width: 0 !important;
  padding: 32px !important;
  gap: 10px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: transparent !important;
}

/* Content tags — UI-owned. Type lock removed 2026-08-11 so Website Builder
 * controls a[href*="/t/"] chips. Disabled Recap layer kept layout-only below. */
body:not(:has(.rendered-post)) div.post-root-element div[data-json-path="0,1,0"] {
  display: flex !important;
  width: 335px !important;
  min-height: 15.6px !important;
  gap: 0 !important;
  align-items: center !important;
}

/* Title — source: Bricolage Grotesque 26/600/31.2/-1.56, #161616. */
body:not(:has(.rendered-post)) div.post-root-element h3.dream-heading[data-json-path="0,1,1"],
body:not(:has(.rendered-post)) div.post-root-element h3.dream-heading[data-json-path="0,1,1"] :is(span, strong) {
  width: 335px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pt-primary) !important;
  font-family: var(--pt-font-heading) !important;
  font-size: 26px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -1.56px !important;
  text-align: left !important;
  text-transform: none !important;
}

/* Subtitle — source: Inter 16/400/25.6, #737373. */
body:not(:has(.rendered-post)) div.post-root-element p.dream-paragraph[data-json-path="0,1,2"],
body:not(:has(.rendered-post)) div.post-root-element p.dream-paragraph[data-json-path="0,1,2"] :is(span, strong) {
  width: 335px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
}

/* Metadata — 50px rail: author left, date right. */
body:not(:has(.rendered-post)) div.post-root-element div.dream-container[data-json-path="0,1,3"] {
  display: flex !important;
  width: 335px !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  gap: 0 !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

body:not(:has(.rendered-post)) div.post-root-element div[data-json-path="0,1,3"] > div {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

body:not(:has(.rendered-post)) div.post-root-element div[data-json-path="0,1,3"] > div:nth-child(2) {
  margin-left: auto !important;
  justify-content: flex-end !important;
}

body:not(:has(.rendered-post)) div.post-root-element div[data-json-path="0,1,3"] :is(p, span, strong) {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.28px !important;
  text-align: left !important;
  text-transform: none !important;
}

/* Mobile-safe adaptation: stack the desktop reference card instead of
   overflowing a 776px fixed grid. */
@media (max-width: 767.98px) {
  body:not(:has(.rendered-post)) section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat:has(div.post-root-element) {
    padding-bottom: 32px !important;
  }

  body:not(:has(.rendered-post)) div.post-root-element div.dream-container[data-json-path="0"][class~="h-full"] {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }

  body:not(:has(.rendered-post)) div.post-root-element div.dream-container[data-json-path="0,0"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  body:not(:has(.rendered-post)) div.post-root-element div.dream-container[data-json-path="0,1"] {
    width: 100% !important;
    height: auto !important;
    padding: 24px !important;
  }

  body:not(:has(.rendered-post)) div.post-root-element :is(
    div[data-json-path="0,1,0"],
    h3.dream-heading[data-json-path="0,1,1"],
    p.dream-paragraph[data-json-path="0,1,2"],
    div.dream-container[data-json-path="0,1,3"]
  ) {
    width: 100% !important;
  }
}
/* --- end disabled latest-post card Recap layer --- */
}

/*
 * Prompting Trust — post-header append
 * Date: 2026-08-06 (re-enabled image fill 2026-08-09; desktop height → 675)
 * Baseline: reference/live-global-css/2026-08-06-beehiiv-global-footer.live.css
 *
 * Beehiiv-first: only overrides Beehiiv cannot do cleanly.
 * Does NOT flip the disabled `@media not all` full takeover above.
 *
 * 2) Author avatar rectangular — ACTIVE.
 * 1) Mobile image absolute cover-fill — ACTIVE.
 * 4) Desktop absolute image cover-fill + canvas height 675 (16:9) — ACTIVE.
 *    Content overlay left to Beehiiv UI.
 */

/* --- 2. Rectangular author avatar (all viewports) — ACTIVE --- */
.post-header-root-element img.rounded-full,
.post-header-root-element .rounded-full.overflow-hidden {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

/* --- 1. Mobile: hero image fills the absolute slot --- */
@media (max-width: 767.98px) {
  .post-header-root-element [data-json-path="0,0,0"],
  .post-header-root-element [data-json-path="0,0,0,1"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .post-header-root-element [data-json-path="0,0,0"] img,
  .post-header-root-element [data-json-path="0,0,0"] img._11n66oe2 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 10px !important;
  }
}

/* --- 4. Desktop: canvas 675 + absolute image cover (match Recap 16:9 / UI) --- */
@media (min-width: 768px) {
  .post-header-root-element {
    position: relative !important;
    height: 675px !important;
    overflow: visible !important;
  }

  .post-header-root-element > div.flex.relative {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .post-header-root-element div[data-json-path="0,0"] {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  /*
   * Image slot + Beehiiv image wrapper must both fill the canvas.
   * `_11n66oe1` (data-json-path="0,0,0,1") stays position:relative by default;
   * once the img is absolute it no longer contributes height, so the wrapper
   * collapses to 0 and `img { height: 100% }` resolves to 0px on desktop.
   * Mobile already absolute-fills 0,0,0,1 — mirror that here.
   */
  .post-header-root-element div[data-json-path="0,0,0"],
  .post-header-root-element div[data-json-path="0,0,0,1"],
  .post-header-root-element div[data-json-path="0,0,0"] > div._11n66oe1 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .post-header-root-element div[data-json-path="0,0,0"] picture,
  .post-header-root-element div[data-json-path="0,0,0"] img,
  .post-header-root-element div[data-json-path="0,0,0"] img._11n66oe2 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Content overlay (data-json-path="0,0,1" / .u5j3lk.dream-container):
   * leave to Beehiiv UI vars (--position, --padding, justify/align). */
}

/* --- Share buttons: Recap overlay frost (not inside @media not all) ---
 * Source: Recap 2.0 overlay on localhost:8001/the-power-of-daily-routines/
 * `.cs-entry__overlay .cs-share__link > span:first-child`
 * rest: rgba(255,255,255,0.2) / hover: 0.3 / 32×32 / radius 8px / no ring.
 * Live buttons are button.react-share__ShareButton. Do not use data-json-path
 * or u5j3l* hashes — those drifted (path is 0,0,1,1,1; classes rotate). */
.post-header-root-element :has(> button.react-share__ShareButton) {
  overflow: visible !important;
}

.post-header-root-element button.react-share__ShareButton {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--pt-radius-control, 8px) !important;
  background: rgb(255 255 255 / 20%) !important;
  background-color: rgb(255 255 255 / 20%) !important;
  box-shadow: none !important;
  color: #fff !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: 0.25s !important;
}

.post-header-root-element button.react-share__ShareButton svg {
  width: 18px !important;
  height: 18px !important;
  color: #fff !important;
  fill: currentColor !important;
}

.post-header-root-element button.react-share__ShareButton:is(:hover, :focus-visible) {
  background: rgb(255 255 255 / 30%) !important;
  background-color: rgb(255 255 255 / 30%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/*
 * Related / Spotlight Embla thumbs — fill the square slot.
 *
 * Beehiiv sets `._11n66oe2 { height: auto }` so 1200×630 assets render ~84×44
 * inside an 84×84 square; object-fit:cover is inert until the img box fills
 * the slot. Absolute inset fill (same pattern as post-header hero).
 * Scope the fill to Beehiiv's emitted 84px slot fingerprint so full-width
 * Read Next images retain their native, normal-flow 16:9 geometry.
 * Proven in Screen Ruler on:
 *   https://www.promptingtrust.ai/p/prompting-trust-channel-laboratory-v2-never-publish
 */
.embla__slide
  div.u5j3l1.u5j3l4.u5j3lj.dream-container.u5j3lf.u5j3l0[style*="--max-width: 84px"]
  > div._11n66oe1 {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}

.embla__slide
  div.u5j3l1.u5j3l4.u5j3lj.dream-container.u5j3lf.u5j3l0[style*="--max-width: 84px"]
  picture,
.embla__slide
  div.u5j3l1.u5j3l4.u5j3lj.dream-container.u5j3lf.u5j3l0[style*="--max-width: 84px"]
  img._11n66oe2 {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/*
 * Blog post card — lean gap-fill (2026-08-09).
 *
 * Beehiiv UI owns: column stack, content pad/gap, tags, radius, details layout.
 * Global: Recap shadow/outline; column 16:9 + cover (Archive); homepage row
 * cover-fill (fill existing image cell — never aspect-ratio on row cards);
 * type bleed vs section h3/p. Does NOT re-enable takeover block.
 */

/* Surface — Recap .cs-entry: soft shadow + 1px white outline (not a grey border).
 * Beehiiv shadow UI only offers preset values; outline is not exposed there. */
body:not(:has(.rendered-post)) div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"] {
  border: 0 !important;
  border-style: none !important;
  box-shadow: var(--pt-card-shadow) !important;
  outline: 1px solid #fff !important;
  outline-offset: 0 !important;
}

/* Homepage HORIZONTAL cards (--flex-direction:row): cover-fill only.
 * Image cell stays UI-sized (~377×315). Beehiiv `._11n66oe2 { height:auto }`
 * letterboxes 16:9 assets (~377×198) inside that cell — absolute + cover
 * restores full bleed. Do NOT set aspect-ratio or width:100% on 0,0 here
 * (that crushed the content column to ~64px). */
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction:row"]
  div.dream-container[data-json-path="0,0"],
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction: row"]
  div.dream-container[data-json-path="0,0"] {
  position: relative !important;
  overflow: hidden !important;
}

body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction:row"]
  div[data-json-path="0,0,0"],
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction:row"]
  div[data-json-path="0,0,0"] > div._11n66oe1,
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction:row"]
  div[data-json-path="0,0,0"] picture,
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction: row"]
  div[data-json-path="0,0,0"],
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction: row"]
  div[data-json-path="0,0,0"] > div._11n66oe1,
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction: row"]
  div[data-json-path="0,0,0"] picture {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction:row"]
  div[data-json-path="0,0,0"] img,
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction: row"]
  div[data-json-path="0,0,0"] img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Image: 16:9 + cover — COLUMN-STACK cards only (Archive / Tags grids).
 * Do NOT apply to homepage horizontal latest-post cards (--flex-direction:row):
 * width:100% + aspect-ratio there expands the image cell to ~776×573 and
 * crushes the content column. Scope via Beehiiv's inline --flex-direction. */
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction: column"]
  div.dream-container[data-json-path="0,0"],
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction:column"]
  div.dream-container[data-json-path="0,0"] {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
}

body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction: column"]
  div[data-json-path="0,0,0"],
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction: column"]
  div[data-json-path="0,0,0"] > div._11n66oe1,
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction: column"]
  div[data-json-path="0,0,0"] picture,
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction:column"]
  div[data-json-path="0,0,0"],
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction:column"]
  div[data-json-path="0,0,0"] > div._11n66oe1,
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction:column"]
  div[data-json-path="0,0,0"] picture {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction: column"]
  div[data-json-path="0,0,0"] img,
body:not(:has(.rendered-post))
  div.post-root-element
  div.dream-container[data-json-path="0"][class~="h-full"][style*="--flex-direction:column"]
  div[data-json-path="0,0,0"] img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Title — undo section h3 bleed; Recap 26/600/-1.56 (mobile 22) */
body:not(:has(.rendered-post)) div.post-root-element
  h3.dream-heading[data-json-path="0,1,1"],
body:not(:has(.rendered-post)) div.post-root-element
  h3.dream-heading[data-json-path="0,1,1"] :is(span, strong) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pt-primary) !important;
  font-family: var(--pt-font-heading) !important;
  font-size: 26px !important;
  --font-size: 26px !important;
  --mobile-font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  --line-height: 1.2 !important;
  --mobile-line-height: 1.2 !important;
  letter-spacing: -1.56px !important;
  --letter-spacing: -1.56px !important;
  text-align: left !important;
  text-transform: none !important;
}

/* Subtitle — beat Supporting Copy + section p 18px bleed */
body:not(:has(.rendered-post))
  section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  div.post-root-element
  p.dream-paragraph.ybdwbv0[data-json-path="0,1,2,0"],
body:not(:has(.rendered-post))
  section._1ny5scw0._1ny5scw6.bg-cover.bg-no-repeat
  div.post-root-element
  p.dream-paragraph.ybdwbv0[data-json-path="0,1,2,0"] :is(span, strong) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
}

/*
 * Author / date — beat section p 18px bleed.
 * Archive (no divider): Details at 0,1,3.
 * Homepage horizontal (with divider): Details at 0,1,4.
 */
body:not(:has(.rendered-post)) div.post-root-element
  :is(
    [data-json-path="0,1,3,0"],
    [data-json-path="0,1,4,0"]
  )
  :is(span, strong) {
  color: var(--pt-primary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.28px !important;
  text-transform: none !important;
}

body:not(:has(.rendered-post)) div.post-root-element
  :is(
    [data-json-path="0,1,3,1"],
    [data-json-path="0,1,3,1,0"],
    [data-json-path="0,1,4,1"],
    [data-json-path="0,1,4,1,0"]
  ),
body:not(:has(.rendered-post)) div.post-root-element
  :is(
    [data-json-path="0,1,3,1"],
    [data-json-path="0,1,3,1,0"],
    [data-json-path="0,1,4,1"],
    [data-json-path="0,1,4,1,0"]
  )
  :is(span, strong) {
  color: var(--pt-secondary) !important;
  font-family: var(--pt-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.28px !important;
  text-align: right !important;
  text-transform: none !important;
}

@media (max-width: 767.98px) {
  body:not(:has(.rendered-post)) div.post-root-element
    h3.dream-heading[data-json-path="0,1,1"],
  body:not(:has(.rendered-post)) div.post-root-element
    h3.dream-heading[data-json-path="0,1,1"] :is(span, strong) {
    font-size: 22px !important;
    --font-size: 22px !important;
  }
}

/*
 * Universal post-body metadata — Sheet 1 owns caption and quote attribution
 * typography on every post. Component sheets may add physical card insets,
 * but must not redefine type, colour, rhythm, or alignment.
 */
.rendered-post .dream-post-content-doc .dream-post-content-figcaption {
  box-sizing: border-box !important;
  color: var(--pt-color-text-secondary, #737373) !important;
  display: block !important;
  font-family: var(--pt-font-family-reading, Inter, sans-serif) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -0.24px !important;
  line-height: 1.4 !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: pre-wrap !important;
}

.rendered-post .dream-post-content-doc .dream-post-content-figcaption :is(p, span.hxnnnr0) {
  border: 0 !important;
  box-sizing: border-box !important;
  color: inherit !important;
  display: inline !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: inherit !important;
  white-space: inherit !important;
}

.rendered-post .dream-post-content-doc .dream-post-content-blockquoteFigure :is(.vzoh1x0, figcaption),
.rendered-post .dream-post-content-doc figure[data-anchor-id="pt-quote-puller"] figcaption {
  border: 0 !important;
  box-sizing: border-box !important;
  color: var(--pt-color-text-secondary, #737373) !important;
  display: block !important;
  font-family: var(--pt-font-family-reading, Inter, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.24px !important;
  line-height: 1.4 !important;
  margin: 12px 0 0 48px !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: pre-wrap !important;
}

.rendered-post .dream-post-content-doc .dream-post-content-blockquoteFigure :is(.vzoh1x0, figcaption) :is(small, span.hxnnnr0),
.rendered-post .dream-post-content-doc figure[data-anchor-id="pt-quote-puller"] figcaption :is(small, span.hxnnnr0) {
  border: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: inherit !important;
  white-space: inherit !important;
}

/*
 * Post-body button primitives — Sheet 1 owns BOTH ring rollovers:
 *   1) Blue primary  — default --pt-button-ring
 *   2) Grey secondary — --pt-button-ring swapped to --pt-button-secondary-ring
 * Standalone size matches nav / native CTAs: 32px high (forms stay 40px).
 * Contract: only real Beehiiv buttons (`a[data-type=button]`, `a[type=button]`,
 * native `.bdk9l21.bdk9l22`, and empty-href section `button[type=button]` inside
 * the 3px #8CB7FF callout chrome). Inline links stay links — do not paint
 * card/body `<a>`. Poll option buttons (`li > button`) are out of scope.
 * Sheet 2 must not re-paint these; it only builds callout chrome.
 */
.rendered-post .dream-post-content-doc
  :is(
    a[data-type="button"],
    a[type="button"],
    :is(button, a).bdk9l21.bdk9l22:not([type="submit"])
  ),
.rendered-post .dream-post-content-doc div[style*="--post-section-border-color:#8CB7FF"][style*="--post-section-border-top-width:3px"]
  button[type="button"],
.rendered-post .dream-post-content-doc div[style*="--post-section-border-color: #8CB7FF"][style*="--post-section-border-top-width: 3px"]
  button[type="button"] {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 7.5px 12px !important;
  border: 0 !important;
  border-radius: var(--pt-radius-control, 8px) !important;
  background: var(--pt-button-bg, #206bea) !important;
  background-color: var(--pt-button-bg, #206bea) !important;
  color: var(--pt-button-fg, #ffffff) !important;
  font-family: var(--pt-font-body, Inter, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 16.8px !important;
  letter-spacing: -0.28px !important;
  text-decoration: none !important;
  transition: background-color 0.25s, box-shadow 0.25s !important;
}

.rendered-post .dream-post-content-doc
  :is(
    a[data-type="button"],
    a[type="button"],
    :is(button, a).bdk9l21.bdk9l22:not([type="submit"])
  ):is(:hover, :focus-visible),
.rendered-post .dream-post-content-doc div[style*="--post-section-border-color:#8CB7FF"][style*="--post-section-border-top-width:3px"]
  button[type="button"]:is(:hover, :focus-visible),
.rendered-post .dream-post-content-doc div[style*="--post-section-border-color: #8CB7FF"][style*="--post-section-border-top-width: 3px"]
  button[type="button"]:is(:hover, :focus-visible) {
  background: var(--pt-accent-hover, #3b7ded) !important;
  background-color: var(--pt-accent-hover, #3b7ded) !important;
  border: 0 !important;
  box-shadow: 0 0 0 4px var(--pt-button-ring, rgb(32 107 234 / 20%)) !important;
}

/* Grey secondary — only when Beehiiv authors grey on a real button. */
.rendered-post .dream-post-content-doc
  :is(
    .pt-channel-callout,
    [data-pt-component="gradient-callout"],
    div[style*="--post-section-border-color:#8CB7FF"][style*="--post-section-border-top-width:3px"],
    div[style*="--post-section-border-color: #8CB7FF"][style*="--post-section-border-top-width: 3px"]
  )
  :is(a[data-type="button"], a[type="button"], button[type="button"]):is(
    [data-custom-background-color="#E5E5E5"],
    [data-custom-background-color="#e5e5e5"],
    [data-custom-background-color="#E1E7F0"],
    [data-custom-background-color="#e1e7f0"],
    [style*="--button-background-color:#E5E5E5"],
    [style*="--button-background-color: #E5E5E5"],
    [style*="--button-background-color:#e5e5e5"],
    [style*="--button-background-color: #e5e5e5"],
    [style*="--button-background-color:#E1E7F0"],
    [style*="--button-background-color: #E1E7F0"],
    [style*="--custom-background-color:#E5E5E5"],
    [style*="--custom-background-color: #E5E5E5"],
    [style*="--custom-background-color:#E1E7F0"],
    [style*="--custom-background-color: #E1E7F0"]
  ) {
  --pt-button-ring: var(--pt-button-secondary-ring, rgb(229 229 229 / 50%));
  background: var(--pt-button-secondary-bg, #e5e5e5) !important;
  background-color: var(--pt-button-secondary-bg, #e5e5e5) !important;
  color: var(--pt-button-secondary-fg, #161616) !important;
}

.rendered-post .dream-post-content-doc
  :is(
    .pt-channel-callout,
    [data-pt-component="gradient-callout"],
    div[style*="--post-section-border-color:#8CB7FF"][style*="--post-section-border-top-width:3px"],
    div[style*="--post-section-border-color: #8CB7FF"][style*="--post-section-border-top-width: 3px"]
  )
  :is(a[data-type="button"], a[type="button"], button[type="button"]):is(
    [data-custom-background-color="#E5E5E5"],
    [data-custom-background-color="#e5e5e5"],
    [data-custom-background-color="#E1E7F0"],
    [data-custom-background-color="#e1e7f0"],
    [style*="--button-background-color:#E5E5E5"],
    [style*="--button-background-color: #E5E5E5"],
    [style*="--button-background-color:#e5e5e5"],
    [style*="--button-background-color: #e5e5e5"],
    [style*="--button-background-color:#E1E7F0"],
    [style*="--button-background-color: #E1E7F0"]
  ):is(:hover, :focus-visible) {
  background: var(--pt-button-secondary-hover, #d9d9d9) !important;
  background-color: var(--pt-button-secondary-hover, #d9d9d9) !important;
  box-shadow: 0 0 0 4px var(--pt-button-ring) !important;
}

/* Content tags — Beehiiv UI owns type and colour. Do not lock font-* here.
 * Website Builder writes font-family / font-weight as inline properties
 * (not --font-weight). A var(--font-weight, inherit) !important passthrough
 * beats inline 700 when --font-weight is unset. Line-height is native
 * `.ybdwbv0 { line-height: var(--line-height) }` / `._11r14xt0 span`. */