/* ==========================================================================
   SEOAD "Monochrome Pro" — Kajabi theme custom styles (v3)
   --------------------------------------------------------------------------
   The homepage now carries its own design system inline in
   templates/index.liquid (the approved mockup CSS, verbatim), so this file
   only holds what the rest of the theme needs: header, footer, blog.
   Fonts are set in config/settings_data.json (Space Grotesk / Inter).
   ========================================================================== */

/* ---------- Base type ---------- */
#encore-theme body,
#encore-theme { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
#encore-theme h1, #encore-theme h2, #encore-theme h3, #encore-theme h4, #encore-theme h5,
#encore-theme .h1, #encore-theme .h2, #encore-theme .h3, #encore-theme .h4, #encore-theme .h5 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -0.02em;
}
#encore-theme ::selection { background: #0A0A0B; color: #fff; }

/* ---------- Header: sticky blur + shadow ---------- */
#encore-theme .header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#encore-theme .header.header--fixed { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
#encore-theme .header__block--cta .btn { padding: 11px 24px !important; font-size: 15px !important; }

/* ---------- Announcement / hello bar ---------- */
#encore-theme .hello-bar { font-family: 'Space Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: .06em; }
#encore-theme .hello-bar p { margin: 0; padding: 12px 20px; }

/* ---------- Footer: white logo on dark, quiet links ---------- */
#encore-theme .footer .logo__image { filter: invert(1); }
#encore-theme .footer a { color: #C9C9CC; }
#encore-theme .footer a:hover { color: #fff; }

/* ---------- Blog readability ---------- */
#encore-theme .blog-post-body, #encore-theme .post-body { font-size: 18px; line-height: 1.8; color: #2B2B2E; }
#encore-theme .blog-post-body h2, #encore-theme .post-body h2 { margin-top: 2.2em; }
#encore-theme .blog-post-body img, #encore-theme .post-body img { border-radius: 14px; }

/* ---------- Blog: Monochrome Pro congruence (v3.2) ---------- */
/* Borders, radii and shadows live in the section settings; this file
   handles hover, spacing, and the details settings can't express. */

/* Post cards: hover lift + airier padding */
#encore-theme .blog-listing__panel {
  transition: transform .3s ease, box-shadow .3s ease;
}
#encore-theme .blog-listing__panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.08) !important;
}
#encore-theme .blog-listing__panel .blog-listing__data { padding: 28px 30px; }
#encore-theme .blog-listing__title:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
#encore-theme .blog-listing__content {
  color: #6E6E72;
  font-size: 16.5px;
  line-height: 1.7;
}
#encore-theme .blog-listing__content strong { color: #0A0A0B; }
#encore-theme .blog-listing__more {
  display: inline-flex;
  font-weight: 600;
  color: #0A0A0B;
  text-decoration: none;
}
#encore-theme .blog-listing__more::after { content: " \2192"; }
#encore-theme .blog-listing__more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#encore-theme .blog-listing__date,
#encore-theme .blog-post-body__date {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6E6E72;
}

/* Pagination as pills */
#encore-theme .pag {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 40px;
}
#encore-theme .pag__link {
  border: 1px solid #E9E9E6;
  border-radius: 999px;
  padding: 8px 16px;
  color: #0A0A0B;
  font-weight: 500;
  text-decoration: none;
}
#encore-theme .pag__link:hover { border-color: #0A0A0B; }
#encore-theme .pag__link--current {
  background: #0A0A0B;
  color: #fff !important;
  border-color: #0A0A0B;
}
#encore-theme .pag__link--disabled { color: #A9A9AD; }

/* Sidebar: airier panel, pill search, rounded images, quiet links */
#encore-theme .sidebar__panel { padding: 28px; }
#encore-theme .sidebar-search__form {
  display: flex;
  align-items: center;
  gap: 10px;
}
#encore-theme .sidebar-search__icon { font-size: 18px; color: #6E6E72; margin-right: 0; }
#encore-theme .sidebar-search__input {
  flex: 1;
  min-width: 0;
  border: 1px solid #E9E9E6 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-family: 'Inter', system-ui, sans-serif;
  background: #fff;
}
#encore-theme .sidebar-search__input:focus {
  border-color: #0A0A0B !important;
  outline: none !important;
  box-shadow: none !important;
}
#encore-theme .sidebar__block img { border-radius: 14px; display: block; }
#encore-theme .sidebar-categories__link,
#encore-theme .sidebar-categories__tag {
  display: block;
  padding: 6px 0;
  color: #6E6E72;
}
#encore-theme .sidebar-categories__link:hover,
#encore-theme .sidebar-categories__tag:hover { color: #0A0A0B; }
#encore-theme .sidebar-categories__tag--active {
  color: #0A0A0B;
  font-weight: 600;
}

/* Blog post: links, blockquote, rules, code, tables */
#encore-theme .blog-post-body__content a {
  /* Article links are standard blue (v3.21) so they're unmistakably
     links — the classic browser link blue #0000EE, with a visible
     1px underline. (v3.18 turned them back on as ink + underline.) */
  color: #0000EE !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}
#encore-theme .blog-post-body__content a:hover { color: #0000EE !important; text-decoration: underline; }
#encore-theme .blog-post-body__content blockquote {
  border-left: 3px solid #0A0A0B;
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  color: #6E6E72;
  font-size: 1.1em;
}
#encore-theme .blog-post-body__content hr {
  border: none;
  border-top: 1px solid #E9E9E6;
  margin: 40px 0;
}
#encore-theme .blog-post-body__content code {
  background: #F5F5F3;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .88em;
}
#encore-theme .blog-post-body__content pre {
  background: #0A0A0B;
  color: #fff;
  padding: 24px;
  border-radius: 16px;
  overflow: auto;
}
#encore-theme .blog-post-body__content pre code {
  background: none;
  color: inherit;
  padding: 0;
}
#encore-theme .blog-post-body__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 15px;
}
#encore-theme .blog-post-body__content th,
#encore-theme .blog-post-body__content td {
  padding: 10px 12px;
  border-bottom: 1px solid #E9E9E6;
  text-align: left;
}
#encore-theme .blog-post-body__content th {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6E6E72;
}
/* Post CTA / opt-in panels: radius (no setting exists for it) */
#encore-theme .blog-post-cta,
#encore-theme .blog-post-optin { border-radius: 20px; }

/* Post CTA box (v3.3): bold dark panel, matching the homepage's closing CTA */
#encore-theme .blog-post-cta {
  /* v3.5: more air above the box (the article's last paragraph sat too
     close to it), and a tighter panel overall. */
  margin-top: 40px;
  padding: 40px 32px;
}
@media (min-width: 1024px) {
  #encore-theme .blog-post-cta { padding: 48px 56px; }
}
#encore-theme .blog-post-cta h2 {
  color: #fff !important;
  /* v3.5: pin the heading's margins — the eyebrow-to-heading gap read as
     too loose, so the eyebrow now sits tight on the heading. */
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}
#encore-theme .blog-post-cta p { color: #C9C9CC; }
#encore-theme .blog-post-cta .blog-post-cta__eyebrow {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #A9A9AD;
  margin-bottom: 14px;
}
#encore-theme .blog-post-cta__content p:not(.blog-post-cta__eyebrow) {
  margin-bottom: 0;
}

/* Post CTA button (v3.7): no hyperlink underline — the theme's .btn never
   sets text-decoration, so the link's default underline showed through on
   the white "Start Building Today" button. The mockup's .btn removes it;
   this does the same for every Kajabi-rendered button (post CTA, header,
   banner) so no button text ever shows a link line.
   (v3.8) font-weight 800 as well — the "Start Building" label read as
   too light, so every button label is now extra-bold. */
#encore-theme a.btn { text-decoration: none !important; font-weight: 800 !important; }

/* Dark-button hover text (v3.9) — the theme's global a:hover turns link
   text black on hover, which makes the black header button unreadable
   (black text on black). Pin its hover text to white. The post CTA
   button is white with ink text, so its hover text is pinned to ink.
   The /blog AI-Powered card's button is now also white with ink text
   (v3.38 — it mirrors the post CTA), so its hover text is pinned to
   ink by the dark-panel rule below; the old white rule lived here and
   is removed — white-on-white would be invisible. */
#encore-theme .header a.btn:hover { color: #fff !important; }
#encore-theme .blog-post-cta #cta-btn:hover { color: #0A0A0B !important; }

/* Tablet + mobile polish (v3.12) — spacing and wording on small screens. */
/* Never let the page scroll sideways: when any element was wider than the
   viewport, content was cut off on the right (headline, subtext, hello
   bar). overflow-x: clip prevents that and, unlike overflow-x: hidden,
   does not break the sticky header. */
html { overflow-x: clip; }
#encore-theme { overflow-x: clip; }
/* The header logo is 300px wide, which crowds a phone header and leaves
   no room for the menu on a tablet. Shrink it on smaller screens. */
@media (max-width: 1024px) {
  #encore-theme .header .logo__image { max-width: 220px !important; }
}
@media (max-width: 760px) {
  #encore-theme .header .logo__image { max-width: 178px !important; }
  /* The hello bar wrapped to three lines on a phone with "AI" orphaned
     on its own line. Smaller text and tighter padding so it wraps to
     two balanced lines. */
  #encore-theme .hello-bar { font-size: 13px !important; padding: 10px 0 !important; }
}

/* Social icons (v3.3): no hyperlink underline — a line showed under each
   glyph in the preview. No theme rule underlines them and the live site is
   clean, so this is belt-and-braces for any CSS that does. */
#encore-theme .social-icons,
#encore-theme .social-icons__icons,
#encore-theme .social-icons__icon,
#encore-theme .social-icons__icon i,
#encore-theme .social-icons__icon:hover,
#encore-theme .social-icons__icon:focus {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Form validation errors (v3.16) — when a required field is left empty
   ("This value is required."), the theme renders a bright red (#ff0000)
   banner with white text, which reads as an alarm. Soften it to a calm,
   on-brand notice: a mist box with ink text, a hairline border, and a
   soft rounded corner. The same colours are also set in the theme
   settings (see build_theme.py); this pins them here too so the soft
   look applies even if a setting does not propagate. */
#encore-theme .parsley-errors-list {
  background-color: #F5F5F3 !important;
  color: #0A0A0B !important;
  border: 1px solid #E9E9E6 !important;
  border-radius: 8px !important;
}

/* Animated hand-drawn underline (v3.17) — the "AI-Powered" word in the
   "Build an AI-Powered Affiliate Income System" heading. The static
   inline underline is replaced by a class (see build_theme.py); the line
   is a thick ink bar with rounded ends that draws itself left-to-right
   shortly after the page loads. Pure CSS (no JS), so it always renders:
   the animation holds its end state, so the underline stays drawn. */
@keyframes drawUnderline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
#encore-theme .draw-underline {
  position: relative !important;
  display: inline-block !important;
  text-decoration: none !important;
}
#encore-theme .draw-underline::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -0.06em !important;
  height: 0.14em !important;
  background: #0A0A0B !important;
  border-radius: 0.07em !important;
  transform-origin: left center !important;
  animation: drawUnderline 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both !important;
}

/* Dark panel for the "Build an AI-Powered Affiliate Income System"
   card (v3.31) — TWO copies of this card exist on the site, and both
   get the dark treatment. (1) Page-builder section 1782593339009,
   text block 1782593339009_0 (the narrow, left-aligned card with the
   draw-underline span). (2) Section 1607887261302, text block
   1607887261302_0 — the full-width, centered card at the top of the
   BLOG listings page (/blog), which is the one Greg was looking at.
   v3.31–v3.37 only targeted (1), so the /blog card stayed light; v3.38
   covers both. The button colours are set in the block settings (see
   §7). The underline flips to white here so it stays visible on the
   dark panel — block (1) uses the draw-underline span; block (2) uses
   an inline text-decoration underline, which follows the (white) text
   colour automatically.
   v3.37 delight: a soft glow (layered shadow) so the dark card floats,
   a hover lift, and the button arrow slides right on hover.
   v3.40: the flat #0A0A0B fill was too visually heavy as a full-width
   slab — now a softer charcoal gradient, fading from #26262A at the top
   to near-black at the bottom. Still dark, but with depth instead of a
   flat black block. */
#encore-theme #block-1782593339009_0 .block,
#encore-theme #block-1607887261302_0 .block {
  background: linear-gradient(180deg, #26262A 0%, #0A0A0B 100%) !important;
  border-radius: 20px !important;
  padding: 40px 32px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 16px 40px rgba(10,10,11,.22), 0 0 70px rgba(10,10,11,.10) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
#encore-theme #block-1782593339009_0 .block:hover,
#encore-theme #block-1607887261302_0 .block:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 24px 56px rgba(10,10,11,.30), 0 0 90px rgba(10,10,11,.14) !important;
}
@media (min-width: 1024px) {
  #encore-theme #block-1782593339009_0 .block,
  #encore-theme #block-1607887261302_0 .block { padding: 48px 56px !important; }
}
#encore-theme #block-1782593339009_0 h2,
#encore-theme #block-1782593339009_0 h2 strong,
#encore-theme #block-1607887261302_0 h2,
#encore-theme #block-1607887261302_0 h2 strong { color: #fff !important; }
#encore-theme #block-1782593339009_0 p,
#encore-theme #block-1607887261302_0 p { color: #C9C9CC !important; }
/* v3.38: the /blog card mirrors the bottom post CTA, so it carries the
   same "Ready when you are" eyebrow (added to its text in §7), styled
   exactly like the post CTA's — Space Mono, 12px, letterspaced,
   #A9A9AD. The eyebrow class is the post CTA's, reused here. */
#encore-theme #block-1607887261302_0 .blog-post-cta__eyebrow {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #A9A9AD !important;
  margin-bottom: 14px;
}
#encore-theme #block-1782593339009_0 .draw-underline::after {
  background: #fff !important;
}
#encore-theme #block-1782593339009_0 .btn:hover,
#encore-theme #block-1607887261302_0 .btn:hover { color: #0A0A0B !important; }
/* v3.37: the button arrow slides right on hover. The arrow is wrapped
   in a span by §7 (btn_text). */
#encore-theme #block-1782593339009_0 .btn .arrow,
#encore-theme #block-1607887261302_0 .btn .arrow {
  display: inline-block;
  transition: transform .25s ease;
}
#encore-theme #block-1782593339009_0 .btn:hover .arrow,
#encore-theme #block-1607887261302_0 .btn:hover .arrow { transform: translateX(4px); }

/* Blog post table of contents (v3.31) — auto-generated from the
   article's H2s by snippets/blog_post_toc.liquid. A mist "In this
   article" box at the top of the post, so readers can jump to a
   section. Only visible H2s are listed (gated headings are skipped
   until the reader unlocks), and the box is removed entirely for
   short posts with fewer than 3 headings. */
#encore-theme .seoad-toc {
  background: #F5F5F3;
  border: 1px solid #E9E9E6;
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 32px;
}
#encore-theme .seoad-toc__title {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #0A0A0B;
  margin: 0 0 12px !important;
  /* v3.32: the title is a <summary> — the toggle for the collapsible
     box. Hide the browser's default disclosure triangle and add a
     chevron that points down while open and right while collapsed. */
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
#encore-theme .seoad-toc__title::-webkit-details-marker { display: none; }
#encore-theme .seoad-toc__title::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #0A0A0B;
  border-bottom: 2px solid #0A0A0B;
  transform: rotate(45deg);
  margin-top: -2px;
  flex-shrink: 0;
  transition: transform .2s ease;
}
#encore-theme .seoad-toc:not([open]) .seoad-toc__title { margin-bottom: 0 !important; }
#encore-theme .seoad-toc:not([open]) .seoad-toc__title::after {
  transform: rotate(-45deg);
  margin-top: 0;
}
#encore-theme .seoad-toc__list {
  margin: 0;
  padding-left: 22px;
}
#encore-theme .seoad-toc__list li { margin: 6px 0; }
#encore-theme .seoad-toc__list a {
  color: #0000EE !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}
/* Anchor targets: the sticky header would otherwise cover the heading
   the reader jumped to. */
#encore-theme .blog-post-body__content h2 { scroll-margin-top: 96px; }
/* Header height, all pages (v3.32) — the blog header rendered 80px
   taller than the homepage's (188px vs 108px, same logo). Root cause:
   the homepage inlines the mockup CSS, whose `.container{padding:0
   24px}` zeroes the header container's vertical padding — the header
   container div carries BOTH .container and .header__container, so
   the leak hits it. Blog pages have no mockup CSS, so they keep the
   theme's 40px top/bottom container padding. Pin the container's
   vertical padding to 0 on every page so the header is the homepage's
   slim 108px everywhere. (Horizontal padding is still the theme's
   40px at desktop, via the header section's own rule.) */
#encore-theme .header__container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* "You May Also Like" (v3.32; dark cards v3.35) — up to 3 related posts
   under the article, after the CTA, before the comments. The cards are
   dark ink panels (matching the post CTA box and the AI-Powered card)
   with white titles, a mist date, a "Read the post ->" cue and a hover
   lift — v3.32's plain white cards read as empty boxes, because no post
   has a featured image yet. When a post does have one, its 16/9 image
   sits on top of the dark card. */
#encore-theme .seoad-related {
  margin: 48px 0 8px;
  border-top: 1px solid #E9E9E6;
  padding-top: 32px;
}
#encore-theme .seoad-related__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A8A86;
  margin: 0 0 6px !important;
}
#encore-theme .seoad-related__heading {
  font-size: 28px;
  font-weight: 700;
  color: #0A0A0B;
  margin: 0 0 24px !important;
}
#encore-theme .seoad-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 767px) {
  #encore-theme .seoad-related__grid { grid-template-columns: 1fr; }
}
#encore-theme .seoad-related__card {
  background: #0A0A0B;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  transition: transform .25s ease, box-shadow .25s ease;
}
#encore-theme .seoad-related__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}
#encore-theme .seoad-related__media { display: block; overflow: hidden; }
#encore-theme .seoad-related__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
#encore-theme .seoad-related__card:hover .seoad-related__media img { transform: scale(1.04); }
#encore-theme .seoad-related__data { padding: 22px 22px 24px; }
#encore-theme .seoad-related__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #FFFFFF;
  text-decoration: none;
}
#encore-theme .seoad-related__title:hover { text-decoration: underline; }
#encore-theme .seoad-related__date {
  display: block;
  font-size: 13px;
  color: #C9C9CC;
  margin-top: 6px;
}
#encore-theme .seoad-related__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  margin-top: 16px;
}
#encore-theme .seoad-related__more .seoad-related__arrow { transition: transform .25s ease; }
#encore-theme .seoad-related__card:hover .seoad-related__arrow { transform: translateX(4px); }

/* Gray breathing room at the bottom of a blog post, before the footer
   (v3.35). The post body section's background is already mist #F5F5F3
   (its background_color setting), so this padding reads as a gray band
   across the full width, below both the post panel and the sidebar. */
#encore-theme .blog-post-body { padding-bottom: 64px !important; }
@media (max-width: 767px) {
  #encore-theme .blog-post-body { padding-bottom: 48px !important; }
}

/* Headline hyphen (v3.42) — "AI-Powered" was breaking at the hyphen on
   phones ("AI-" / "Powered" on separate lines, underline split). Keep the
   word together in both cards: the page-builder card's draw-underline
   span and the /blog card's underlined span. */
#encore-theme .draw-underline { white-space: nowrap; }
#encore-theme #block-1607887261302_0 h2 span { white-space: nowrap; }

/* Footer legal contrast (v3.36, PageSpeed Accessibility). The mockup
   footer sets .footer-legal to #6e6e72 on a near-black footer — about
   3.9:1, below the 4.5:1 WCAG bar, so PageSpeed flags the copyright
   line and the earnings/affiliate disclaimers. #9a9aa0 is ~7.4:1 on
   #060607 and matches the footer links, so the legal text stays subtle
   but readable. The mockup CSS itself is byte-identical to Greg's file
   and is never edited; this override wins on specificity. The footer
   column headings use the same failing #6e6e72, so they get it too. */
#encore-theme .footer-legal { color: #9a9aa0 !important; }
#encore-theme .footer-col h5 { color: #9a9aa0 !important; }

/* Mobile-only line break (v3.45) — a <br class="seoad-br-mobile"> in the
   /blog card heading. Hidden on desktop so the heading stays on one
   line there; on phones it forces the break after "AI-Powered" so the
   first line reads "Build an AI-Powered" and the second
   "Affiliate Income System". */
@media (min-width: 768px) {
  #encore-theme .seoad-br-mobile { display: none; }
}

/* v3.55 — post CTA heading on ONE line (desktop). The heading is 46
   characters; at the old 40px it needed ~840px but the panel text width
   is ~785px at the widest, so it wrapped. A fluid size tracks the panel
   (the panel is 75% of the viewport, so the font scales with it) and
   nowrap guarantees one line at every desktop width. The <br> in the
   copy is now the mobile-only seoad-br-mobile break, so phones still
   get the exact two-line split from v3.45. */
@media (min-width: 768px) {
  #encore-theme .blog-post-cta h2 {
    font-size: clamp(20px, 2.1vw, 30px) !important;
    white-space: nowrap !important;
  }
}

/* Mobile buttons + tables + headlines (v3.42) — Greg's phone screenshots.
   Buttons: the "Start Building Today →" buttons wrapped to two lines on
   phones, with the arrow landing alone on line 2. Keep them on one line
   (nowrap) and shrink the label / side padding slightly so it fits.
   Tables: comparison tables in blog posts (Heard vs QuickBooks vs Xero)
   were wider than a phone screen and got clipped at the right edge.
   Let them scroll horizontally instead, so every column is reachable. */
@media (max-width: 767px) {
  #encore-theme .btn {
    white-space: nowrap !important;
    font-size: 15px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #encore-theme .blog-post-body__content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* v3.46: hide the desktop space on phones (the break shows instead).
     Without this, the space would sit at the start of line 2. */
  #encore-theme .seoad-ws { display: none; }
  /* v3.45: two-line headings on phones. The dark-card headings wrapped
     to 3–4 lines on a 390px screen ("Build your AI-" / "powered" /
     "affiliate business" / "today"). Shrink them to 20px and trim the
     panel side padding so each segment fits on one line: the post CTA
     reads "Build your AI-Powered" / "affiliate business today" and the
     AI-Powered cards read "Build an AI-Powered" / "Affiliate Income
     System". Both breaks are the mobile-only <br class="seoad-br-mobile">
     (v3.55 moved the post CTA's break to it too), so on desktop the
     headings stay on one line. */
  #encore-theme .blog-post-cta h2,
  #encore-theme #block-1607887261302_0 h2,
  #encore-theme #block-1782593339009_0 h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  #encore-theme .blog-post-cta { padding: 36px 20px !important; }
  #encore-theme #block-1782593339009_0 .block,
  #encore-theme #block-1607887261302_0 .block { padding: 36px 24px !important; }
}
/* v3.48 — two-step popup: remove the horizontal divider lines above and
   below the email field. Kajabi's platform form styles put a top and
   bottom border on the field containers (.form-group) inside the
   two-step modal, which renders as two hairlines bracketing the input.
   The input keeps its own rounded border — only the container dividers
   go. Scoped to the two-step modal so no other form is touched. */
#encore-theme .two-step .form-group { border: none !important; }
#encore-theme .two-step form > div { border: none !important; }
/* v3.52 — the v3.48 border removal did NOT take the popup lines out
   (verified live), and no stylesheet puts a border on .form-group —
   so the lines are NOT a plain border. This neutralizes EVERY
   remaining way a hairline can be drawn in the popup form area:
   borders, outlines, shadows, backgrounds (incl. gradient hairlines),
   pseudo-elements, hr, and list markers — on the field wrapper, the
   form, and the form container, WITHOUT touching the input's own
   border or the button. */
#encore-theme .two-step .form-group,
#encore-theme .two-step .email-field,
#encore-theme .two-step form,
#encore-theme .two-step form > div,
#encore-theme .two-step .form {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  list-style: none !important;
}
#encore-theme .two-step .form-group::before,
#encore-theme .two-step .form-group::after,
#encore-theme .two-step .email-field::before,
#encore-theme .two-step .email-field::after,
#encore-theme .two-step form::before,
#encore-theme .two-step form::after,
#encore-theme .two-step .form::before,
#encore-theme .two-step .form::after {
  content: none !important;
  display: none !important;
}
#encore-theme .two-step hr { display: none !important; }
/* v3.53 — popup lines, second pass: v3.52's neutralization did NOT
   take the lines out live, so they are not a border/shadow/background/
   pseudo-element on the field wrappers. Cover the remaining suspects:
   the input's own shadow/outline, and the text/disclaimer blocks
   around the form. */
#encore-theme .two-step .form-control {
  box-shadow: none !important;
  outline: none !important;
}
#encore-theme .two-step .disclaimer-text,
#encore-theme .two-step .form > div {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  list-style: none !important;
}
#encore-theme .two-step .disclaimer-text::before,
#encore-theme .two-step .disclaimer-text::after,
#encore-theme .two-step .form > div::before,
#encore-theme .two-step .form > div::after {
  content: none !important;
  display: none !important;
}
/* v3.54 — collapse the empty Parsley error container in the popup,
   same cause as the gate: the popup's below-input line may be the same
   empty bordered box inside .form-group. Collapse ONLY while empty, so
   a real validation error ("This value is required") still renders.
   :not(:has(li)) is the backstop if Parsley leaves whitespace text
   nodes (:empty alone would not match). The popup's ABOVE-input line
   is not explained by this box — if it survives, it still needs a live
   DevTools elementFromPoint check. */
#encore-theme .two-step .parsley-errors-list:empty,
#encore-theme .two-step .parsley-errors-list:not(:has(li)),
#encore-theme .two-step .parsley-errors-list li:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ---------- Blog post gate (v3.22) ---------- */
/* Dark ink panel, matching the post CTA box (v3.3): same radius, padding
   and eyebrow treatment, so the gate reads as part of the theme, not a
   pop-up. The gated part stays hidden until the unlock script in
   blog_post_gate.liquid removes the `hidden` attribute. */
#encore-theme .blog-post-body__content--gated[hidden] { display: none !important; }
/* v3.51 — gradual blur/fade into the gate, smoother than v3.49. The free
   copy's last ~220px dissolves instead of stopping dead: the blur ramps
   in slowly (mask reaches full only 65% down, so the text softens
   gradually instead of turning to a smudge) over a gentler fade to the
   panel white (the white reaches full only at the very bottom, so there
   is no dead white band). Browsers without backdrop-filter still get
   the fade. The overlay is pointer-events: none so the copy stays
   selectable and clickable. */
#encore-theme .blog-post-body__content--free { position: relative; }
#encore-theme .seoad-gate-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0.92) 100%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 65%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 65%, black 100%);
}
/* v3.52 — kill the stray hairline under the gate email field and the
   stray 2px dot left of it. v3.51's border/box-shadow removal did NOT
   take them out (verified live with v3.51 running), and no stylesheet
   puts a border on .form-group — so the line/dot are NOT a plain
   border. This neutralizes EVERY remaining way a hairline or dot can
   be drawn in the form area: borders, outlines, shadows, backgrounds
   (incl. gradient hairlines), pseudo-elements, hr, and list markers —
   on the field wrapper, the form, and the gate panel, WITHOUT touching
   the input's own border or the button. */
#encore-theme .blog-post-gate .form-group,
#encore-theme .blog-post-gate .email-field,
#encore-theme .blog-post-gate form,
#encore-theme .blog-post-gate form > div,
#encore-theme .blog-post-gate .blog-post-gate__form {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  list-style: none !important;
}
#encore-theme .blog-post-gate .form-group::before,
#encore-theme .blog-post-gate .form-group::after,
#encore-theme .blog-post-gate .email-field::before,
#encore-theme .blog-post-gate .email-field::after,
#encore-theme .blog-post-gate form::before,
#encore-theme .blog-post-gate form::after,
#encore-theme .blog-post-gate .blog-post-gate__form::before,
#encore-theme .blog-post-gate .blog-post-gate__form::after,
#encore-theme .blog-post-gate::before,
#encore-theme .blog-post-gate::after {
  content: none !important;
  display: none !important;
}
#encore-theme .blog-post-gate hr { display: none !important; }
/* v3.53 — line/dot, second pass: v3.52's neutralization did NOT take
   the line or the dot out live, so they are not a border/shadow/
   background/pseudo-element on the field wrappers. Cover the two
   remaining suspects in the gate: the disclaimer (a top border there
   would sit exactly one gap below the form) and the panel itself,
   plus the input's and button's own shadow/outline. */
#encore-theme .blog-post-gate__disclaimer,
#encore-theme .blog-post-gate {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  list-style: none !important;
}
#encore-theme .blog-post-gate__disclaimer::before,
#encore-theme .blog-post-gate__disclaimer::after {
  content: none !important;
  display: none !important;
}
/* v3.54 — collapse the empty Parsley error container. v3.53's button
   fix was grounded (margin 0 + both 54px), but the gate form now uses
   align-items:center, and Greg's 7:06:30 PM screenshot proves
   .form-group is ~13 CSS px taller than the input: two #E9E9E6 lines
   directly under the input, spanning its width, with dark panel
   between — an empty bordered box inside .form-group. Row ~67px, so a
   centred 54px button sits ~6-7px below the input top, and Greg
   notices 1-2px. The empty box is the Parsley .parsley-errors-list,
   which only gets an <li> on a real validation error — so collapse it
   ONLY while empty. Real errors are untouched: the rule does not match
   a list with an <li>, so "This value is required" still renders
   (v3.16 softened styling). :empty does not match if Parsley leaves
   whitespace text nodes, so :not(:has(li)) is the backstop (modern
   browsers, 2023+). Collapsing the box removes the lines AND the extra
   row height; the flex-start revert below makes the alignment immune
   to any wrapper height that remains. */
#encore-theme .blog-post-gate .parsley-errors-list:empty,
#encore-theme .blog-post-gate .parsley-errors-list:not(:has(li)),
#encore-theme .blog-post-gate .parsley-errors-list li:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* v3.51 — any link inside the gate copy stays readable on the dark
   panel. Root cause found: AutoLink linked the word "instantly" in the
   gate copy to the /blog/instantly post (post slug match), and with no
   .seoad-ilink rule it took the theme's default dark link colour +
   underline — black on near-black. The gate is now excluded from
   AutoLink (data-no-autolink above), and this rule is the backstop so
   any link that ever lands in the gate renders light, never dark. */
#encore-theme .blog-post-gate a {
  color: #C9C9CC !important;
  text-decoration: none !important;
}
#encore-theme .blog-post-gate {
  /* v3.50 — charcoal gradient, matching the /blog top card (the AI-Powered
     header): softer charcoal at the top fading to near-black, instead of
     a flat black slab. Same gradient as the AI card panels (v3.40). */
  background: linear-gradient(180deg, #26262A 0%, #0A0A0B 100%);
  border-radius: 20px;
  padding: 40px 32px;
  margin: 40px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  #encore-theme .blog-post-gate { padding: 48px 56px; }
}
#encore-theme .blog-post-gate__eyebrow {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #A9A9AD;
  margin-bottom: 14px;
}
#encore-theme .blog-post-gate h2 {
  color: #fff !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}
#encore-theme .blog-post-gate p { color: #C9C9CC; }
#encore-theme .blog-post-gate__form { margin-top: 24px; }
#encore-theme .blog-post-gate form {
  display: flex;
  gap: 12px;
  /* v3.54 — back to flex-start (v3.53 used center). Both children are
     54px, so top alignment is exact, and it stays exact even if a
     wrapper keeps extra height below the input — centering cannot
     promise that. */
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
#encore-theme .blog-post-gate .form-group { flex: 0 1 480px; max-width: 480px; margin: 0; min-width: 0; }
#encore-theme .blog-post-gate .form-control {
  width: 100%;
  border: 1px solid #E9E9E6 !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  background: #fff;
  color: #0A0A0B;
  box-shadow: none !important;
  outline: none !important;
}
#encore-theme .blog-post-gate .form-control:focus {
  border-color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}
#encore-theme .blog-post-gate #gate-btn {
  background: #fff;
  color: #0A0A0B;
  border: 2px solid #fff;
  border-radius: 10px !important;
  padding: 13px 28px;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
#encore-theme .blog-post-gate #gate-btn:hover { color: #0A0A0B !important; }
#encore-theme .blog-post-gate__disclaimer {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  font-size: 13px;
  color: #A9A9AD !important;
}
@media (max-width: 760px) {
  #encore-theme .blog-post-gate form { flex-direction: column; }
  #encore-theme .blog-post-gate #gate-btn { width: 100%; }
}