/* ==========================================================================
   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; mist cards v3.62 "Framed Ink", was gray #55555A v3.58,
   dark ink v3.35) — up to 3 related posts under the article, after the CTA, before the
   comments. The cards are mist (#F5F5F3) with a 1px hairline border, ink titles, a
   dark-gray date and an ink "Read the post ->" cue, plus a hover lift — quiet on purpose,
   so the framed gate above does the talking. When a post has a featured image, its
   16/9 image sits on top of the 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: #F5F5F3;
  border: 1px solid #E9E9E6;
  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: #0A0A0B;
  text-decoration: none;
}
#encore-theme .seoad-related__title:hover { text-decoration: underline; }
#encore-theme .seoad-related__date {
  display: block;
  font-size: 13px;
  color: #55555A;
  margin-top: 6px;
}
#encore-theme .seoad-related__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #0A0A0B;
  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;
}
/* v3.63 — "ENROLLMENT CURRENTLY CLOSED" headline: white text on a gray
   highlight. The <strong> inside the popup h3 is the highlight —
   inline-block so the gray block hugs just the words (with padding and
   a radius) and reads as a highlight/badge, not a full-width bar.
   Gray is #55555A (already in the theme) so white text on it is ~7:1.
   Scoped to the two-step modal; the only h3 there is this headline.
   v3.71 — headline highlight is now INK BLACK #0A0A0B, not gray
   (Greg: "don't use gray for the bg color of the headline").
   Ink is the theme's own dark (Monochrome Pro) so the headline is
   the boldest element in the popup; white on ink is ~19:1. The
   button is also ink, but it sits below the email field, so the two
   black elements read as one cohesive monochrome popup, not a clash. */
#encore-theme .two-step h3 strong {
  display: inline-block;
  background: #0A0A0B;
  color: #FFFFFF !important;
  padding: 10px 18px;
  border-radius: 10px;
}
/* v3.69 — popup headline fits on one line (Greg: "make sure the headline
   fits on one line"). The modal is max 650px wide with 10px side
   padding (content ~630px). The headline "Top 100 Affiliate Offers to
   Promote with SEO" is 44 chars; measured in Space Grotesk Bold it is
   502px at 24px + 36px highlight padding = 538px, so 24px fits with
   room. At the platform h3 size (32px) it is 706px and wraps. So on
   desktop the h3 is forced to one line at 24px. Phones keep wrapping
   (a 44-char headline cannot fit one line at a readable size in a
   ~350px modal), so the nowrap is desktop-only (min-width 768px, the
   theme's standard breakpoint).
   v3.70 correction — 24px was WRONG and the headline still clipped
   ("...with SE", final O cut off) on the live site. Root cause is the
   headline does NOT sit in the full 630px modal content: the two-step
   text/form block (1585757543890) is a Bootstrap col-10 (83.33%) inside
   the modal__body row, so its content width is only ~520px
   (650 - 20 modal padding = 630 content; row -15px margins -> 660;
   col-10 = 550; col 15px padding each side -> 520). 24px = 538px, so
   it overflows the 520px column by ~18px — exactly the clipped "O".
   At 21px the text is 439.5px + 36px highlight = 475.5px, which fits
   the 520px column with room (and even a ~495px worst case if the row
   has no negative margins). So the desktop size is 21px, not 24px.
   v3.72 — headline drops "with SEO" (Greg: "drop the with SEO on
   the end (a little redundant)"), so it's now 35 chars ("Top 100
   Affiliate Offers to Promote"). A shorter headline can be larger
   and still fit on one line: measured in Space Grotesk Bold, 26px
   = 428px text + 36px highlight = 464px, which fits the 520px
   column with 56px spare (28px would leave only 23px; 30px would
   overflow by ~10px). So the desktop size is now 26px, not 21px —
   the headline stays prominent instead of shrinking with the text. */
@media (min-width: 768px) {
  #encore-theme .two-step h3 { white-space: nowrap !important; font-size: 26px !important; }
}
/* v3.73 — announcement banner (hello bar) is BACK with the guide offer
   (Greg: "add an announcement banner back that says Top 100 Affiliate
   Offers to Promote with a button that reads GET THE FREE GUIDE").
   The bar links to #two-step (whole bar opens the popup). The text is
   the popup headline in Space Grotesk bold (not the old Space Mono
   eyebrow — this is a headline, not a label). The "GET THE FREE GUIDE →"
   button is a ::after on the text, styled like the popup's CTA (ink bg,
   white text, radius 10), sitting right after the text on the same
   line (desktop). On phones it wraps below the text, still centered.
   Mist bg (#F5F5F3, from the block setting) so the black button pops;
   the snippet's inline style already sets bg + text color from the
   block settings. The button text uses the literal arrow character
   (same as the popup's "GET THE FREE GUIDE" button) — the source and
   the CSS are UTF-8, so it renders directly. Do NOT write the arrow
   as a backslash escape in this Python string: Python reads a
   backslash followed by digits as an octal control character and the
   CSS ends up with a broken glyph. */
#encore-theme .hello-bar .hello-bar__text {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
#encore-theme .hello-bar .hello-bar__text::after {
  content: "GET THE FREE GUIDE →";
  display: inline-block;
  background: #0A0A0B;
  color: #FFFFFF;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 7px 14px;
  border-radius: 10px;
  margin-left: 14px;
  vertical-align: middle;
  white-space: nowrap;
}
@media (max-width: 767px) {
  #encore-theme .hello-bar .hello-bar__text { font-size: 13px !important; }
  #encore-theme .hello-bar .hello-bar__text::after { font-size: 12px; padding: 6px 12px; margin-left: 10px; }
}

/* ---------- 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 remaining
   suspect in the gate: the disclaimer (a top border there would sit
   exactly one gap below the form), plus the input's and button's own
   shadow/outline. NOTE v3.62: the panel itself is NOT in this group
   anymore — Direction C ("Framed Ink") gives the panel a deliberate
   2px ink border, and this rule's border: 0 !important would erase it.
   The line/dot lived in the form area (covered by the form-wrapper
   neutralizer above + the v3.54 Parsley collapse), not on the panel. */
#encore-theme .blog-post-gate__disclaimer {
  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 light
   panel (v3.60: the gate is now light gray, so the backstop is ink).
   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 ink, never light. */
#encore-theme .blog-post-gate a {
  color: #0A0A0B !important;
  text-decoration: none !important;
}
#encore-theme .blog-post-gate {
  /* v3.62 — Direction C ("Framed Ink"): white panel with a bold 2px
     ink frame, so the gate reads as a distinct "locked content" box —
     the black post CTA below it is the only other dark element.
     Replaces the v3.60 flat light gray #D9D9D9. */
  background: #FFFFFF;
  border: 2px solid #0A0A0B;
  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: #0A0A0B;
  margin-bottom: 14px;
}
#encore-theme .blog-post-gate h2 {
  color: #0A0A0B !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}
#encore-theme .blog-post-gate p { color: #0A0A0B; }
#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 #BFBFBF !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: #0A0A0B !important;
  outline: none !important;
  box-shadow: none !important;
}
#encore-theme .blog-post-gate #gate-btn {
  background: #0A0A0B;
  color: #fff;
  border: 2px solid #0A0A0B;
  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: #fff !important; }
#encore-theme .blog-post-gate__disclaimer {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  font-size: 13px;
  color: #55555A !important;
}
@media (max-width: 760px) {
  #encore-theme .blog-post-gate form { flex-direction: column; }
  #encore-theme .blog-post-gate #gate-btn { width: 100%; }
}

/* v3.61 - footer link columns (above the footer) + legal strip
   (below the footer). v3.67: the link directory is a DARK band
   matching the footer (#060607) with white links and NO headline -
   it reads as the footer's top edge. 4 columns on desktop, 2 on
   phones. The legal strip is a dark band matching the footer
   (#060607) with the same light-gray legal text (#9a9aa0, the v3.36
   contrast fix), so it reads as the footer's bottom edge. */
#encore-theme .seoad-footer-links { background: #060607; padding: 56px 0 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#encore-theme .seoad-footer-links__inner { max-width: 1340px; margin: 0 auto; padding: 0 40px; }
#encore-theme .seoad-footer-links__grid { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 32px; }
#encore-theme .seoad-footer-links__grid li { margin: 0 !important; padding: 0 !important; }
#encore-theme .seoad-footer-links__grid a { color: #FFFFFF !important; font-size: 15px !important; line-height: 1.5 !important; text-decoration: none !important; }
#encore-theme .seoad-footer-links__grid a:hover { text-decoration: underline !important; }
#encore-theme .seoad-legal { background: #060607; border-top: 1px solid rgba(255, 255, 255, 0.1); }
#encore-theme .seoad-legal__inner { max-width: 1340px; margin: 0 auto; padding: 28px 40px 32px; font-size: 13px !important; line-height: 1.7 !important; color: #9a9aa0 !important; }
#encore-theme .seoad-legal p { color: #9a9aa0 !important; margin: 0 !important; }
#encore-theme .seoad-legal p + p { margin-top: 12px !important; }
#encore-theme .seoad-legal strong { color: #c9c9cc !important; }
@media (max-width: 767px) {
  #encore-theme .seoad-footer-links { padding: 40px 0 36px; }
  #encore-theme .seoad-footer-links__inner { padding: 0 20px; }
  #encore-theme .seoad-footer-links__grid { grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
  #encore-theme .seoad-legal__inner { padding: 24px 20px 28px; }
}