/*
Theme Name: MyWifeQuitHerJobV4
Theme URI: https://mywifequitherjob.com
Author: Steve Chou
Description: Modern editorial redesign of MyWifeQuitHerJob.com. Design-token driven, mobile-first, no CSS framework. Successor to MyWifeQuitHerJobV3.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mwqhj
*/

/* =========================================================
   1. FONTS (self-hosted variable woff2, latin subset)
   Deleting this block degrades cleanly to the system stacks
   baked into the tokens below.
   ========================================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/source-serif-4/source-serif-4-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/source-serif-4/source-serif-4-italic-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   2. DESIGN TOKENS
   ========================================================= */
:root {
  /* color */
  --ink: #14181d;
  --ink-soft: #4b5563;
  --ink-faint: #8b93a1;
  --paper: #ffffff;
  --paper-warm: #faf9f7;
  --line: #e6e4df;
  --brand: #0c8442;          /* green: ACTION buttons only */
  --brand-dark: #0a6e37;
  --brand-bright: #41a62a;
  --brand-tint: #eaf5ee;
  --blue: #0d6db8;           /* blue: chrome, links, accents (V3 heritage) */
  --blue-dark: #013d7b;
  --blue-deeper: #032c57;
  --blue-tint: #e9f2fb;
  --blue-soft: #8fc1ec;      /* blue for text on dark backgrounds */
  --accent-ochre: #b98a2f;
  --focus: #0b63ce;
  --danger: #c02b2b;

  /* type */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --leading-body: 1.7;
  --leading-tight: 1.15;
  /* 1040px: 80px of breathing room inside the 1200px container on each
     side. Deliberately a fixed length, not `ch` — ch scales with each
     element's own font-size, so a heading resolved to a far wider measure
     than the paragraphs beneath it and the column edge went ragged. */
  --measure: 65rem;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-8: 3rem;
  --s-10: 4.5rem;
  --s-12: 6rem;

  /* shape */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(20 24 29 / 0.06), 0 8px 24px rgb(20 24 29 / 0.08);
  --shadow-pop: 0 4px 12px rgb(20 24 29 / 0.12), 0 24px 60px rgb(20 24 29 / 0.22);

  /* layout */
  --content-max: 1200px;
  --article-max: 780px;
}

/* =========================================================
   3. RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg { display: inline-block; max-width: 100%; height: auto; }
iframe { max-width: 100%; border: 0; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* Italic glyphs lean past their advance width, so an upright character
   immediately after an <em> collides with the tail of the last letter.
   Most visible at heading sizes (the "AI" before a closing quote mark). */
em, i, cite { padding-right: 0.06em; }
h1 em, h2 em, h3 em, h1 i, h2 i, h3 i { padding-right: 0.1em; }
ul, ol { padding-left: 1.4em; }
a { color: var(--blue-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* =========================================================
   4. ACCESSIBILITY HELPERS
   ========================================================= */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto; clip-path: none;
  position: fixed !important;
  top: var(--s-2); left: var(--s-2);
  z-index: 10000;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  height: auto; width: auto;
}

/* =========================================================
   5. TYPOGRAPHY BASE
   ========================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--ink);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

/* =========================================================
   6. LAYOUT PRIMITIVES
   ========================================================= */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 640px) { .wrap { padding-inline: var(--s-5); } }
.site-main { min-height: 50vh; }
.section { padding-block: var(--s-8); }
.section--band { background: var(--paper-warm); border-block: 1px solid var(--line); }
@media (min-width: 900px) { .section { padding-block: var(--s-10); } }

/* single/page two-column: article + right rail */
.layout-with-sidebar { display: block; }
@media (min-width: 1024px) {
  .layout-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--s-8);
    align-items: start;
  }
}

/* =========================================================
   7. BUTTONS & FORMS
   ========================================================= */
.btn,
.button,
.workshopbutton,
button.triggerminicourse,
button.triggeramazoncourse,
button.triggerblogcourse,
button.triggeradvancedcourse,
input[type="submit"],
button[type="submit"],
/* Bare <button> in post content. V3 painted every button green through a
   blanket `button { background:#0c8442 }` rule; V4 targets classes instead,
   so old lesson buttons (which carry only an onclick) came out as the
   browser's default grey. Scoped to #content, not .entry-content: a few
   pages have unbalanced markup in their own content that closes
   .entry-content early, leaving the rest as siblings, and those buttons
   were missed. :not([class]) keeps this off the modal and menu buttons,
   which all carry classes; the player exclusions are for MediaElement,
   whose play and volume buttons are classless <button>s. */
#content button:not([class]):not(.mejs-container *):not(.video-js *) {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.85em 1.7em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
/* `.button:hover` was missing here — the base rule above is `.button` but
   this list said `.btn`, so an <a class="button"> fell through to the
   generic `a:hover { color: var(--blue) }` (0,1,1 beats 0,1,0) and its
   label turned blue on green. `.button:hover` is 0,2,0 and wins. */
.button:hover, .button:focus-visible,
.btn:hover, .workshopbutton:hover,
button.triggerminicourse:hover,
input[type="submit"]:hover, button[type="submit"]:hover,
#content button:not([class]):not(.mejs-container *):not(.video-js *):hover {
  background: var(--brand-dark);
  color: #fff;
  transform: translateY(-1px);
}
.btn--ghost {
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover { background: var(--paper-warm); color: var(--ink); transform: none; }
.btn--lg { font-size: var(--text-base); padding: 1em 2.1em; }

input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea, select {
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
input:focus, textarea:focus, select:focus { border-color: var(--blue); outline: none; }
::placeholder { color: var(--ink-faint); }

/* =========================================================
   8. MASTHEAD & NAVIGATION (V3 structure, modernized)
   ========================================================= */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 100;
}

/* Row 1: logo + testimonial strip (as in V3's header-main) */
.masthead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  /* 10px flat. This grows the whole masthead band, not just the space
     around the logo, so change it in small steps. */
  padding-block: 10px;
}
.site-brand {
  display: block;
  flex-shrink: 0;
  text-decoration: none;
}
/* Image logo: sized by height so the masthead rows stay aligned. The
   artwork is a two-line lockup — wordmark over tagline — so height here
   is the whole block, not the wordmark. The wordmark itself is roughly
   70% of it: 58px total puts the wordmark near 41px, 228px wide. */
.site-brand img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
}
@media (min-width: 640px) { .site-brand img { height: 52px; } }
@media (min-width: 900px) { .site-brand img { height: 58px; } }
/* Trust block: stars + student count + WSJ badge (replaces the old
   testimonial/award images) */
.header-trust {
  display: none;
  align-items: center;
  gap: var(--s-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.header-trust__item { display: flex; align-items: center; gap: var(--s-2); }
.header-trust .stars { display: inline-flex; gap: 1px; color: #f5a623; }
.header-trust .stars svg { display: block; }
.header-trust__badge svg { color: var(--brand); }
.header-trust strong { color: var(--ink); }
@media (min-width: 900px) { .header-trust { display: flex; } }

/* Row 2: nav bar — solid brand-green like V3, so it reads as
   navigation instead of blending into the white page */
.masthead-nav { background: var(--blue-dark); }
/* The toggle now sits in the white logo row, right-aligned by the row's
   space-between (the trust strip it used to sit beside is hidden under
   900px). Below 900 the nav bar itself has no chrome until the menu is
   actually open, so a bare blue strip does not hang under the logo. */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: var(--s-2);
  margin-inline-start: auto;
  cursor: pointer;
  color: var(--blue-dark);
}
.menu-toggle svg { width: 28px; height: 28px; display: block; }
@media (max-width: 899px) {
  .masthead-nav { background: none; }
  .primary-navigation.is-open { background: var(--blue-dark); }
}

.primary-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.primary-navigation a {
  display: block;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.25;
  padding: var(--s-3) var(--s-4);
  transition: background-color 0.12s ease, color 0.12s ease;
}
.primary-navigation .navsub {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 0.7);
  margin-top: 2px;
}
/* Subtitles only when there's comfortably room for them */
@media (max-width: 1199px) {
  .primary-navigation .navsub { display: none; }
}
.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
  background-color: var(--blue-deeper);
  color: #fff;
}
.primary-navigation li:hover > a .navsub { color: rgb(255 255 255 / 0.85); }
/* Free Class CTA: green action chip against the navy bar */
.primary-navigation .nav-cta > a {
  color: #fff;
  background: var(--brand);
}
.primary-navigation .nav-cta > a:hover { background: var(--brand-bright); color: #fff; }
.primary-navigation .nav-cta .navsub { color: rgb(255 255 255 / 0.8); }

/* mobile: nav hidden until toggled */
.primary-navigation { display: none; }
.primary-navigation.is-open { display: block; padding-bottom: var(--s-2); }

@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .primary-navigation { display: block; }
  /* Items share the full bar width so the row never crowds one edge */
  .primary-navigation ul { flex-direction: row; justify-content: space-between; }
  .primary-navigation li { flex: 1 1 auto; display: flex; }
  .primary-navigation li > a { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: var(--s-2) var(--s-3); }
}
@media (min-width: 1200px) {
  .primary-navigation li > a { padding: var(--s-3) var(--s-4); }
}

/* Blank header (funnel/landing pages, no nav): slightly smaller logo,
   since it sits alone in the band with nothing below it. */
.site-header--blank .site-brand img { height: 42px; }
@media (min-width: 640px) { .site-header--blank .site-brand img { height: 50px; } }

/* =========================================================
   9. ENTRY CONTENT (posts, pages, builder fallback)
   ========================================================= */
/* Shares the centred reading measure with .entry-content below it, so the
   title lines up with the body instead of hanging off to the left. */
.entry-header { margin-bottom: var(--s-6); max-width: var(--measure); margin-inline: auto; }
.entry-header .entry-title {
  max-width: 22ch;
  margin-bottom: var(--s-3);
}
.entry-meta {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
}
.entry-meta a { color: inherit; text-decoration: none; }
.entry-meta a:hover { color: var(--brand-dark); }
.entry-meta .cat-link {
  font-weight: 600;
  color: var(--blue-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
}

.entry-content {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
/* ONE column, constrained on the container rather than on each child.
   Capping every child individually and auto-centring it looked fine for
   prose but went ragged the moment a child had its own width: floats and
   auto-margins do not mix, so floated images and narrow CTA blocks lined
   up with the 1152px content box while the paragraphs sat in a centred
   840px column. Constraining the parent gives everything inside one left
   edge, and it widens the side margins on the full-width page templates. */
.entry-content {
  max-width: var(--measure);
  margin-inline: auto;
}
.entry-content > * { max-width: 100%; }
/* The Entrepreneurship and Our Story templates print their post list as a
   sibling of the article, outside .entry-content, so it needs the same
   column or the links sit 56px to the left of the prose above them. */
#post_list,
  .bonus { max-width: var(--measure); margin-inline: auto; }

.entry-content > iframe, .entry-content > figure, .entry-content > img { max-width: 100%; }
/* YouTube embeds in post content carry fixed width/height attributes: 640x360
   and 820x461 are the common pairs, but there are a dozen others across 280
   published posts. max-width shrinks the width on a narrow screen while the
   height attribute holds, so a 780x439 embed becomes 358x439 on a phone, a
   portrait box that YouTube crops the thumbnail to fill. Browsers do not infer
   an aspect ratio from an iframe's attributes the way they do for <img>, and
   height:auto alone collapses it to the 150px default, so the ratio has to be
   stated. 16/9 is what YouTube serves; the ~55 embeds authored at 4:3 were
   already being letterboxed inside their own box.
   The :not() keeps clear of .video-responsive / .embed-responsive, whose
   wrappers in legacy-compat.css already size their iframe absolutely. */
.entry-content iframe[src*="youtube.com/embed"]:not(.video-responsive *):not(.embed-responsive *),
.entry-content iframe[src*="youtube-nocookie.com/embed"]:not(.video-responsive *):not(.embed-responsive *) {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
/* Full-bleed contexts opt the whole column out: the lander templates
   (#content.pagebuilder) and SiteOrigin pages, whose own front-flex.css
   lays the rows out and needs their full width. */
.pagebuilder .entry-content,
.entry-content:has(> .panel-layout) { max-width: none; }
/* ...but the SiteOrigin layout itself still takes the shared column, so a
   builder-based signup page lines up with a hand-coded one. Without this,
   /ai-signup/ ran 1152px wide while /amazon-workshop/ sat at 1040px and
   the two pages read as different designs. */
.entry-content > .panel-layout { max-width: var(--measure); margin-inline: auto; }
.entry-content p, .entry-content ul, .entry-content ol { margin-bottom: 1.2em; }
/* Heading rhythm.

   Two things were wrong. The space was in `em`, so it scaled with each
   heading's own clamp()ed size: an h2 rendering at 36px took 64.8px above
   and 21.6px below, a 3:1 split, while an h4 at 16px took 28.8px. Every
   level spaced differently and the biggest heading opened the biggest hole.
   Now it is rem tokens, so h2/h3/h4 share one rhythm regardless of size.

   Second, the top margin only applies when something actually precedes the
   heading. A heading that opens a block has nothing to be separated from,
   so it needs no space above and the container's own padding does the work.
   Written as :not(:first-child) rather than zeroed afterwards, which means
   it holds at ANY nesting depth and needs no per-wrapper exceptions. */
.entry-content :is(h2, h3, h4) { margin-bottom: var(--s-4); }
.entry-content :is(h2, h3, h4):not(:first-child) { margin-top: var(--s-6); }
.entry-content h1 { margin-bottom: var(--s-5); }
.entry-content h1:not(:first-child) { margin-top: var(--s-8); }
/* A leading JSON-LD <script> still counts as a preceding sibling, so the
   heading after it is not :first-child and would take the margin back. */
.entry-content > script:first-child + :is(h1, h2, h3),
.entry-content > script + script + :is(h1, h2, h3) { margin-top: 0; }
/* wpautop wraps a leading JSON-LD <script> in a <p>. That <p> renders at
   zero height but still counts as the first child, so the heading after it
   is not :first-child and keeps its margin. Match that exact shape only.
   The <p> also self-collapses, and its bottom margin then escapes through
   .entry-content and shoves the whole article down ~23px, so zero it. */
.entry-content > p:has(> script:only-child) { margin: 0; }
.entry-content > p:has(> script:only-child):first-child + :is(h1, h2, h3) { margin-top: 0; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content li { margin-bottom: 0.35em; }
.entry-content blockquote {
  border-left: 3px solid var(--blue);
  padding-left: var(--s-5);
  margin-block: var(--s-6);
  font-style: italic;
  color: var(--ink-soft);
}
.entry-content table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  display: block;
  overflow-x: auto;
}
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: var(--s-2) var(--s-3); text-align: left; }
.entry-content th { background: var(--paper-warm); }
.entry-content pre {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-4);
  overflow-x: auto;
  font-size: var(--text-sm);
}
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-8); }
.entry-content .wp-caption { max-width: 100%; }
.entry-content .wp-caption-text, .entry-content figcaption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-top: var(--s-2);
}
.entry-content .alignleft { float: left; margin: 0 var(--s-5) var(--s-3) 0; }
.entry-content .alignright { float: right; margin: 0 0 var(--s-3) var(--s-5); }
.entry-content .aligncenter { display: block; margin-inline: auto; }

/* opt-in boxes injected into content by shortcodes / wpse_ad_content */
.entry-content .triggerminicourse { font-family: var(--font-sans); }
#post_signup_bottom, .post-optin,
#bottomform, #audiobottomform {
  font-family: var(--font-sans);
}

/* End-of-post opt-in. Flows with the article: NO background, no panel.
   Matches production's treatment — green heading, book cover floated
   right, body copy at the same size and rhythm as the post itself. */
#post_signup_bottom { margin-block: var(--s-8); }
#post_signup_bottom::after { content: ""; display: table; clear: both; }
#post_signup_bottom h2 {
  color: var(--brand);
  margin: 0 0 var(--s-3);
}
#post_signup_bottom p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  margin-bottom: 1.2em;
}
#post_signup_bottom .book_image {
  float: right;
  width: 220px;
  max-width: 40%;
  margin: 0 0 var(--s-4) var(--s-5);
}
#post_signup_bottom .book_image img { width: 100%; height: auto; }
/* Stays floated on phones too, as production does: the cover sits beside the
   heading rather than stacking above it, so the block opens with the headline
   instead of a centred image. Narrower share of the column at this size so the
   heading keeps a readable measure next to it. */
@media (max-width: 560px) {
  #post_signup_bottom .book_image { max-width: 34%; margin-left: var(--s-4); }
}

/* Author byline box under the post title (V3's steve_posted_on) */
.author-byline {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-block: var(--s-5) var(--s-6);
  padding-block: var(--s-5);
  border-block: 1px solid var(--line);
  font-family: var(--font-sans);
}
.author-byline__avatar { width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; }
.author-byline__body { min-width: 0; }
.author-byline__name { font-size: var(--text-sm); margin: 0; }
.author-byline__name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.author-byline__name a:hover { color: var(--blue); }
.author-byline__creds { color: var(--ink-soft); }
/* Sized to land the bio on two lines at desktop; text-wrap: pretty keeps a
   single word off the last line if it ever wraps to three. */
.author-byline__bio {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: var(--s-2) 0 0;
  text-wrap: pretty;
}
.author-byline__cta { margin: var(--s-3) 0 0; font-size: var(--text-sm); }
.author-byline__cta a { color: var(--blue); font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) {
  .author-byline { gap: var(--s-3); }
  .author-byline__avatar { width: 60px; height: 60px; }
}
/* Drop the long bio on phones, as production does. V3 carried the same rule
   on #longbyline at this exact breakpoint; the port lost it, so the paragraph
   was pushing the post's first line 105px down on a 390px screen. The name,
   credentials line and mini-course link all stay. */
@media (max-width: 480px) {
  .author-byline__bio { display: none; }
}

.post-thumbnail-hero { margin-bottom: var(--s-6); }
.post-thumbnail-hero img { width: 100%; border-radius: var(--radius); }

.page-links { margin-top: var(--s-6); font-family: var(--font-sans); }
.tags-links { display: block; margin-top: var(--s-6); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-soft); }

/* =========================================================
   10. POST CARDS & ARCHIVES
   ========================================================= */
.archive-header { padding-block: var(--s-8) var(--s-6); }
.archive-header .archive-title { max-width: 26ch; }
.archive-header .archive-description {
  margin-top: var(--s-3);
  color: var(--ink-soft);
  max-width: 60ch;
}

.post-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  padding-block: var(--s-2) var(--s-8);
}
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-8) var(--s-6); } }

.post-card { display: flex; flex-direction: column; gap: var(--s-3); }
.post-card__body { display: flex; flex-direction: column; gap: var(--s-2); }
.post-card__media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper-warm); aspect-ratio: 16 / 9; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.post-card:hover .post-card__media img { transform: scale(1.03); }
/* Fallback tile for posts with no featured image, so the grid stays even */
.post-card__media--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  text-align: center;
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
}
.post-card__blank-label {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.92;
}
.post-card__cat {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-dark);
  text-decoration: none;
}
.post-card__title {
  font-size: var(--text-lg);
  font-weight: 640;
  line-height: 1.25;
}
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--blue); }
.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__meta { font-size: var(--text-xs); color: var(--ink-faint); }

/* featured (first) card on the blog index: image left, all copy right */
@media (min-width: 900px) {
  .post-grid--featured .post-card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--s-6);
    align-items: center;
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--line);
  }
  .post-grid--featured .post-card:first-child .post-card__media { margin: 0; }
  .post-grid--featured .post-card:first-child .post-card__body { gap: var(--s-3); }
  .post-grid--featured .post-card:first-child .post-card__title { font-size: var(--text-xl); }
  .post-grid--featured .post-card:first-child .post-card__excerpt { -webkit-line-clamp: 4; font-size: var(--text-base); }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  padding-block: var(--s-6) var(--s-10);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
}
.pagination .page-numbers {
  display: inline-block;
  min-width: 2.4em;
  text-align: center;
  padding: 0.5em 0.7em;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .page-numbers:hover:not(.current) { border-color: var(--blue); color: var(--blue-dark); }
.pagination .dots { border: 0; }

/* =========================================================
   11. SIDEBAR (right rail)
   ========================================================= */
/* Below the two-column breakpoint there is no rail for the sidebar to sit
   in, so it stacked under the article and added ~1666px of scrolling that
   repeated the end-of-post opt-in. Production hides it the same way (V3
   dropped #content-sidebar under 1200px). Tied to the same 1024px that
   .layout-with-sidebar uses, so the rail appears exactly when it fits. */
.content-sidebar { display: none; font-family: var(--font-sans); margin-top: var(--s-8); }
@media (min-width: 1024px) { .content-sidebar { display: block; } }
/* The rail sticks as the article scrolls. align-items:start on the parent
   grid is what lets a sticky child actually stick. */
@media (min-width: 1024px) {
  .content-sidebar {
    margin-top: 0;
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - var(--s-6));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
.sidebar-card--signup .eyebrow { margin-bottom: var(--s-2); }
.sidebar-card__sub { font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: var(--s-3); }
.sidebar-card__checklist { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.sidebar-card__checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--text-sm);
  line-height: 1.35;
  margin-bottom: var(--s-2);
}
.sidebar-card__checklist svg { flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.sidebar-card__checklist svg path { fill: currentColor; }
.sidebar-card--signup .btn { display: block; width: 100%; }
.sidebar-card__trust { font-size: var(--text-xs); color: var(--ink-soft); margin-top: var(--s-3); text-align: center; }
.sidebar-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}
.sidebar-card--signup { background: var(--blue-tint); border-color: transparent; }
.sidebar-card__media { border-radius: var(--radius-sm); margin-bottom: var(--s-3); }
.sidebar-card h3 { font-size: var(--text-lg); margin-bottom: var(--s-3); }
.sidebar-card .sidebar-card__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-3);
}
.related-list { list-style: none; padding: 0; margin: 0; }
.related-list li { border-top: 1px solid var(--line); }
.related-list li:first-child { border-top: 0; }
.related-list a {
  display: block;
  padding: var(--s-3) 0;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
}
.related-list a:hover { color: var(--blue); }
.sidebar-sticky { position: sticky; top: var(--s-4); }
.sidebar-course-link {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: var(--s-3);
  background: var(--paper);
}
.sidebar-course-link:hover { border-color: var(--blue); color: var(--blue-dark); }
.sidebar-course-link img { width: 56px; height: 84px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer {
  margin-top: var(--s-10);
  background: var(--ink);
  color: rgb(255 255 255 / 0.8);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--blue-soft); }
.site-footer__grid {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-8);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-8); align-items: start; } }
.site-footer__brand .site-brand { color: #fff; font-size: 1.25rem; }
.site-footer__brand .site-brand .dotcom { color: var(--blue-soft); }
.site-footer__brand p { margin-top: var(--s-3); max-width: 44ch; color: rgb(255 255 255 / 0.65); }
.site-footer h4 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding-block: var(--s-1); }
.site-footer .social-links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.site-footer .social-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.site-footer .social-links svg { width: 18px; height: 18px; fill: currentColor; }
/* Partner tiles keep V3's placement: two blocks of six sitting beside the
   brand column, two tiles across each, in V3's order. Tiles are 125px
   because every source image is exactly 125x125. */
.footer-partners__block {
  display: grid;
  grid-template-columns: repeat(2, 125px);
  gap: var(--s-3);
  align-content: start;
}
.footer-partners__block + .footer-partners__block { margin-left: var(--s-6); }
.footer-partners__block img { width: 125px; height: 125px; border-radius: var(--radius-sm); opacity: 0.9; }
.footer-partners__block img:hover { opacity: 1; }
.site-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-6); }
@media (max-width: 600px) {
  .footer-partners__block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-partners__block img { width: 100%; height: auto; }
}
.site-info {
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-block: var(--s-5);
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
}
.site-info a { color: rgb(255 255 255 / 0.75); }

/* minimal footer variant */
.site-footer--minimal { margin-top: var(--s-8); background: var(--paper-warm); color: var(--ink-soft); border-top: 1px solid var(--line); }
.site-footer--minimal .site-info { border-top: 0; color: var(--ink-soft); }
.site-footer--minimal a { color: var(--ink-soft); text-decoration: underline; }
.site-footer--minimal a:hover { color: var(--blue); }

/* =========================================================
   13. DIALOG POPUPS
   ========================================================= */
dialog.mwqhj-modal {
  /* the global margin reset kills the UA's dialog centering,
     so restore it explicitly */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: calc(100vh - 3rem);
  overflow: auto;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  max-width: min(560px, calc(100vw - 2rem));
  width: 100%;
  box-shadow: var(--shadow-pop);
  font-family: var(--font-sans);
}
dialog.mwqhj-modal::backdrop { background: rgb(10 12 16 / 0.6); }
.mwqhj-modal__inner { padding: var(--s-6); position: relative; }
/* Course cover in the non-minicourse popups. V3 floated a ~170x250 cover
   to the right of the copy in each of these; the port dropped it. The
   minicourse popup uses the taller __media-panel instead. */
.mwqhj-modal__cover {
  float: right;
  width: 150px;
  height: auto;
  margin: var(--s-5) 0 var(--s-4) var(--s-5);  /* top margin clears the close button */
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
@media (max-width: 520px) {
  .mwqhj-modal__cover { float: none; display: block; margin: 0 auto var(--s-4); }
}
.mwqhj-modal__close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-faint);
  padding: var(--s-1);
  line-height: 0;
}
.mwqhj-modal__close:hover { color: var(--ink); }
.mwqhj-modal__close svg { width: 22px; height: 22px; }
.mwqhj-modal h2 { font-size: var(--text-xl); margin-bottom: var(--s-3); max-width: 18ch; }

/* Split conversion layout: media panel left, offer + form right */
dialog.mwqhj-modal--split { max-width: min(760px, calc(100vw - 2rem)); }
.mwqhj-modal__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .mwqhj-modal__grid { grid-template-columns: 5fr 7fr; }
}
.mwqhj-modal__media-panel {
  position: relative;
  display: block;
  background: var(--blue-deeper);
}
/* Phones: the grid is single-column here, so the panel becomes a banner
   across the top rather than a tall column. It used to be display:none,
   which left the mobile popup with no image at all. The source photo is a
   700x1050 portrait and the face sits high in the frame, so a 16:9 box
   anchored to the top keeps the head and shoulders and crops the legs.
   Capped in vh as well so a short handset still shows the email field
   without scrolling. The play badge and "6 Video Lessons" chip live inside
   this panel and come back with it. */
@media (max-width: 639px) {
  /* Fixed height, NOT aspect-ratio. `aspect-ratio: 16/9` with a max-height
     constrains the WIDTH as well — the panel came out 237px wide inside a
     343px dialog and left a white gutter down the right side. */
  .mwqhj-modal__media-panel {
    aspect-ratio: auto;
    width: 100%;
    /* vh-scaled so short handsets get a shorter band automatically. 25vh
       is what keeps the Send button above the fold from 360x640 upward;
       taller phones get proportionally more photo. */
    height: clamp(145px, 25vh, 235px);
    overflow: hidden;
  }
  /* The source is a 700x1050 portrait, so a wide band cut from it renders
     the face small. Scale up and anchor the origin on the face (x 50%,
     y 17% of the frame) so the zoom pushes the head toward the middle of
     the band instead of off the top. object-position still does the base
     crop; the transform is the magnification on top of it. */
  /* No transform scale — a taller band shows more of the photo at its
     natural cover scale, which reads as zoomed out. Removing the two
     trailing lines from the copy is what paid for the extra height. */
  .mwqhj-modal__media-panel img { object-position: 50% 6%; }

  /* Compress the stack rather than reorder it — the reading order stays
     photo, headline, benefits, form. Every value below is a size or space
     reduction; no element is hidden and no copy is cut. Together these
     bring the Send button above the fold on a 320px-wide phone. */
  .mwqhj-modal__inner { padding: var(--s-4); }
  .mwqhj-modal__inner .eyebrow { margin-bottom: 2px; font-size: 0.65rem; }
  .mwqhj-modal__inner h2 { font-size: 1.25rem; line-height: 1.2; margin-bottom: var(--s-2); }
  .mwqhj-modal__sub { font-size: 0.9rem; line-height: 1.35; margin-bottom: var(--s-2); }
  /* The height for the photo comes out of the gaps between the checkmarks,
     not out of the photo. Same four lines, same wording, just less air. */
  .mwqhj-modal__checklist { margin-bottom: var(--s-2); gap: 0; }
  .mwqhj-modal__checklist li { margin-bottom: 1px; font-size: 0.875rem; line-height: 1.25; }
  /* Dropped on phones to buy vertical room for the photo; all stay on
     desktop. Scoped with .mwqhj-modal (0,2,0) on purpose — the base
     declarations for these live further down the file at 0,1,0, and at
     equal specificity the later rule wins no matter what the media query
     says. Unscoped, every one of these toggles silently did nothing. */
  .mwqhj-modal .mwqhj-modal__next { display: none; }
  .mwqhj-modal .mwqhj-modal__play { display: none; }
  .mwqhj-modal .mwqhj-modal__trust-extra { display: none; }
  .mwqhj-modal .mwqhj-modal__trust-short { display: inline; }
  /* !important is required here, not preference: the base rule declares
     font-size with !important, so a plain override is ignored. Without it
     this stayed at 13px and the line overflowed its box by 45-55px, which
     nowrap then clipped mid-word. */
  .mwqhj-modal .mwqhj-modal__trust {
    font-size: 0.65rem !important;
    white-space: nowrap;
    overflow: hidden;
  }
  .mwqhj-modal .mwqhj-modal__trust .stars { margin-right: 4px; }
  .mwqhj-modal .mwqhj-modal__trust .stars svg { width: 10px; height: 10px; }
}
/* Narrowest handsets cannot hold stars plus both sentences on one row, so
   the stars go and the words stay — the words are the reassurance. */
@media (max-width: 344px) {
  .mwqhj-modal .mwqhj-modal__trust .stars { display: none; }
  #drippopup input[type="email"], #drippopup input[type="text"] { padding: 0.6em 0.8em; }
}
.mwqhj-modal__media-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mwqhj-modal__media-panel .video-chip { left: var(--s-3); bottom: var(--s-3); }
/* Play badge centered on the popup photo so it reads as a video lesson.
   Translucent, not solid: on the mobile banner crop the badge sits over
   Steve's face, and a solid fill hid it completely. */
.mwqhj-modal__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.28);
  backdrop-filter: blur(2px);
  border: 3px solid rgb(255 255 255 / 0.9);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.35);
  color: #fff;
  padding-left: 4px;
}
@media (max-width: 639px) {
  .mwqhj-modal__play { width: 56px; height: 56px; border-width: 2px; }
}
.mwqhj-modal__play svg { fill: currentColor; }
.mwqhj-modal__sub { font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: var(--s-4) !important; }
.mwqhj-modal__next { font-size: var(--text-xs); color: var(--ink-soft); margin-top: var(--s-2) !important; }
.mwqhj-modal--split h2 { font-size: var(--text-lg); max-width: none; }
.mwqhj-modal__checklist {
  list-style: none;
  padding: 0 !important;
  margin: 0 0 var(--s-4) !important;
}
.mwqhj-modal__checklist li {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding-block: 3px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
}
.mwqhj-modal__checklist svg { color: var(--brand); flex-shrink: 0; transform: translateY(2px); }
.mwqhj-modal__trust {
  font-size: var(--text-xs) !important;
  color: var(--ink-faint) !important;
  margin: var(--s-3) 0 0 !important;
}
/* Desktop shows the full reassurance; the short variant is phone-only. */
.mwqhj-modal__trust-short { display: none; }
.mwqhj-modal__trust .stars {
  display: inline-flex;
  gap: 1px;
  color: #f5a623;
  vertical-align: -2px;
  margin-right: var(--s-1);
}

/* Tame the injected Drip form's inline styles */
#drippopup input[name="fields[email]"] {
  font-size: 1rem !important;
  height: auto !important;
  padding: 0.85em 1em !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: var(--s-2);
}
#drippopup input[name="fields[email]"]:focus { border-color: var(--blue) !important; }
#drippopup input[type="submit"] {
  font-size: 1.05rem !important;
  font-weight: 700;
  padding: 0.9em 1em !important;
  background: var(--brand) !important;
  border-radius: var(--radius-sm) !important;
  margin-top: var(--s-1) !important;
  transition: background-color 0.15s ease;
}
#drippopup input[type="submit"]:hover { background: var(--brand-dark) !important; }
.mwqhj-modal p { color: var(--ink-soft); margin-bottom: var(--s-3); font-size: var(--text-sm); }
.mwqhj-modal ul { margin: 0 0 var(--s-4); padding-left: 1.2em; color: var(--ink-soft); font-size: var(--text-sm); }
.mwqhj-modal .mwqhj-modal__media { float: right; width: 130px; margin: 0 0 var(--s-3) var(--s-4); border-radius: var(--radius-sm); }
.mwqhj-modal form input[type="text"], .mwqhj-modal form input[type="email"] { margin-bottom: var(--s-2); }
.mwqhj-modal form input[type="submit"], .mwqhj-modal form button[type="submit"] { width: 100%; }
@media (max-width: 480px) { .mwqhj-modal .mwqhj-modal__media { display: none; } }

/* =========================================================
   14. FRONT PAGE SECTIONS (V3 structure, modernized skin)
   ========================================================= */
/* Family splash hero — same image + copy as V3's #familysplash */
#familysplash {
  background: var(--ink) url('assets/img/hero-family.jpg') no-repeat;
  background-size: cover;
  background-position: 60% 50%;
}
@media (max-width: 576px) {
  #familysplash { background-image: url('assets/img/hero-family-mobile.jpg'); }
}
/* Darken only the left side, where the headline sits, so the family stays
   bright. A flat scrim over the whole photo made the hero look muddy. */
#familysplash .splashoverlay {
  background: linear-gradient(95deg,
    rgb(4 12 22 / 0.80) 0%,
    rgb(4 12 22 / 0.72) 30%,
    rgb(4 12 22 / 0.36) 50%,
    rgb(4 12 22 / 0.08) 68%,
    rgb(4 12 22 / 0) 85%);
}
@media (max-width: 899px) {
  #familysplash .splashoverlay { background: rgb(4 12 22 / 0.55); }
}
#familysplash .splashshell { padding-block: var(--s-10) var(--s-10); }
@media (min-width: 900px) { #familysplash .splashshell { padding-block: var(--s-12) var(--s-12); } }
#familysplash h1 {
  color: #fff;
  max-width: 600px;
  text-shadow: 2px 2px 6px rgb(0 0 0 / 0.7);
  margin-bottom: var(--s-4);
}
#familysplash .splashtext {
  color: #fff;
  font-size: var(--text-lg);
  max-width: 480px;
  text-shadow: 1px 1px 4px rgb(0 0 0 / 0.7);
  margin-bottom: var(--s-6);
}

/* Section headings with the V3 green underline rule */
.frontpage-section { padding-block: var(--s-8) 0; }
.frontpage-section > .wrap > h1,
.frontpage-section > .wrap > h2 { margin-bottom: var(--s-2); }
.linedecoration {
  width: 64px;
  border-top: 4px solid var(--blue);
  margin-bottom: var(--s-6);
}

/* Single mini-course spotlight (only the main 6-day course is
   advertised — the other mini courses are retired) */
.course-spotlight {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .course-spotlight {
    grid-template-columns: minmax(0, 5fr) 7fr;
    gap: var(--s-8);
    justify-items: start;
    text-align: left;
    align-items: center;
  }
}
.course-spotlight__cover {
  position: relative;
  display: inline-block;
}
.course-spotlight__cover img {
  max-width: 240px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease;
}
/* 16:9 video-frame variant */
.course-spotlight__cover--video { width: 100%; }
.course-spotlight__cover--video img {
  max-width: 100%;
  width: 100%;
  border-radius: var(--radius);
}
.video-chip {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  background: rgb(10 12 16 / 0.78);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
}
.video-chip svg { fill: currentColor; }
.course-spotlight__proof {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--s-5) !important;
}
.course-spotlight__proof .stars {
  display: inline-flex;
  gap: 1px;
  color: #f5a623;
  vertical-align: -2px;
  margin-right: var(--s-1);
}

/* Curriculum: the 4-step what-you-learn grid */
.curriculum-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  margin-top: var(--s-8);
}
@media (min-width: 640px) { .curriculum-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .curriculum-grid { grid-template-columns: repeat(4, 1fr); } }
.curriculum-step {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: var(--s-5);
}
.curriculum-step__num {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--line);
  line-height: 1;
}
.curriculum-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--blue-tint);
  color: var(--blue-dark);
  margin-bottom: var(--s-3);
}
.curriculum-step h4 { margin-bottom: var(--s-2); }
.curriculum-step p { font-size: var(--text-sm); color: var(--ink-soft); }

.curriculum-cta { text-align: center; margin-top: var(--s-6); }
.curriculum-cta p {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-top: var(--s-2);
}
.course-spotlight__cover:hover img { transform: translateY(-4px); }
/* Play badge: signals this is a video course */
.course-spotlight__cover .play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgb(12 132 66 / 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
  pointer-events: none;
}
.course-spotlight__cover .play-badge svg { margin-left: 4px; }
.course-spotlight__cover:hover .play-badge {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--brand-bright);
}
.course-spotlight__body h3 { margin-bottom: var(--s-3); max-width: 30ch; }
.course-spotlight__body p { color: var(--ink-soft); max-width: 60ch; margin-bottom: var(--s-3); }
.course-spotlight__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}
.course-spotlight__body ul li { padding-block: 2px; }
.course-spotlight__body ul li::before { content: "✓ "; color: var(--brand); font-weight: 700; }

/* As Seen In — dark photo band, white logos (V3 #asseenin) */
#asseenin {
  background: url('/blog/wp-content/uploads/2020/05/stevespeech.jpg') no-repeat;
  background-size: cover;
  background-position: 60% 50%;
  margin-top: var(--s-8);
  /* The landers drop this band inside .entry-content, where
     `.entry-content > * { max-width: var(--measure) }` would squeeze the
     photo to 70ch and crush the logos on top of it. It is a full-bleed
     band everywhere it appears. */
  max-width: none !important;
  width: 100%;
}
#asseenin .splashoverlay { background: rgb(0 0 0 / 0.35); padding-block: var(--s-8); }
#asseenin h2 { color: #fff; text-align: center; margin-bottom: var(--s-6); }
#asseenin .press-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-6);
  align-items: center;
  justify-content: center;
}
#asseenin .press-logos img { height: 30px; width: auto; }

/* Explore The Site — V3's 9-tile grid, green headings */
.explore-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; padding-block: var(--s-6) var(--s-4); }
@media (min-width: 640px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .explore-grid { grid-template-columns: repeat(3, 1fr); } }
.explore-card { display: block; text-decoration: none; color: var(--ink); }
.explore-card__media { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-warm); }
/* Social-proof pill over a tile image (subscriber count, etc.) */
.explore-card__badge {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: rgb(10 12 16 / 0.82);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  padding: 0.5em 0.85em;
  border-radius: var(--radius-pill);
}
/* the icon paths carry their own fill="currentColor"; brand marks that need
   their own color override it per badge variant */
.explore-card__badge svg { flex-shrink: 0; }
.explore-card__badge svg path { fill: currentColor; }
.explore-card__badge--youtube svg path { fill: #ff0000; }
.explore-card__badge--shopify svg path { fill: #95bf47; }
/* Centered variant: sits on the laptop screen in the storefront tile.
   The image is 4:3 in a 4:3 box, so these percentages track the artwork. */
.explore-card__badge--center {
  left: 43%;
  bottom: auto;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: var(--text-sm);
  padding: 0.55em 1em;
}
.explore-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.explore-card:hover .explore-card__media img { transform: scale(1.03); }
.explore-card h3 { margin-top: var(--s-3); font-size: var(--text-lg); color: var(--blue-dark); }
.explore-card:hover h3 { color: var(--blue); }
.explore-card p { margin-top: var(--s-1); font-size: var(--text-sm); color: var(--ink-soft); }

/* Book social-proof band */
.book-proof { padding-block: var(--s-8); background: var(--paper-warm); border-block: 1px solid var(--line); margin-top: var(--s-8); }
.book-proof__row {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}
@media (min-width: 768px) {
  .book-proof__row { grid-template-columns: 220px 1fr; text-align: left; justify-items: start; }
}
.book-proof__cover {
  max-width: 200px;
  border-radius: var(--radius-sm);
  filter: drop-shadow(0 16px 32px rgb(20 24 29 / 0.25));
}
.book-proof h2 { margin-block: var(--s-2) var(--s-3); }
.book-proof p { color: var(--ink-soft); max-width: 58ch; margin-bottom: var(--s-4); }

/* Shared photo-hero band for the blog and podcast hubs, rebuilt from V3's
   blogsplash / podcastsplash. Same left-weighted gradient as the
   front-page hero so the photo stays bright. */
#blogsplash {
  background: var(--ink) url('assets/img/blog-hero.jpg') no-repeat;
  background-size: cover;
  background-position: 80% 50%;
}
#podcastsplash {
  background: var(--ink) url('assets/img/mwqhjpodcastsplash.jpg') no-repeat;
  background-size: cover;
  background-position: 70% 50%;
}
#freecoursesplash {
  background: var(--ink) url('assets/img/legacy/FreeCourseSplash2.jpg') no-repeat;
  background-size: cover;
  background-position: 60% 30%;
}
.pagesplash .splashoverlay {
  background: linear-gradient(95deg,
    rgb(4 12 22 / 0.80) 0%,
    rgb(4 12 22 / 0.72) 32%,
    rgb(4 12 22 / 0.40) 54%,
    rgb(4 12 22 / 0.12) 72%,
    rgb(4 12 22 / 0.04) 100%);
}
@media (max-width: 899px) {
  .pagesplash .splashoverlay { background: rgb(4 12 22 / 0.6); }
}
/* V3's hierarchy: the brand line is the headline, "Blog" sits under it,
   and the whole block is centered in the left half of the band. */
.pagesplash__shell {
  padding-block: var(--s-10);
  max-width: 620px;
  text-align: center;
}
@media (min-width: 900px) { .pagesplash__shell { padding-block: var(--s-12); } }
.pagesplash__brand {
  color: #fff;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgb(0 0 0 / 0.65);
  margin-bottom: var(--s-2);
}
.pagesplash__kicker {
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgb(0 0 0 / 0.65);
  margin-bottom: var(--s-5);
}
.pagesplash__text {
  color: #fff;
  font-size: var(--text-base);
  text-shadow: 1px 1px 4px rgb(0 0 0 / 0.65);
  margin-bottom: var(--s-5);
}
.pagesplash__text--prompt { margin-bottom: var(--s-4); }
.pagesplash__cta { margin-bottom: var(--s-6); }
.pagesplash__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-6) var(--s-8);
  color: #fff;
}
.pagesplash__stat { display: flex; align-items: center; gap: var(--s-2); text-shadow: 2px 2px 6px rgb(0 0 0 / 0.65); }
.pagesplash__stat-num { font-family: var(--font-sans); font-size: 3rem; font-weight: 900; line-height: 1; }
.pagesplash__stat-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 300; text-align: left; line-height: 1.25; }

/* Featured guests: circular avatar cards, matching the media kit page */
.guest-grid__title { text-align: center; }
.guest-grid__sub { text-align: center; color: var(--ink-soft); max-width: 62ch; margin: var(--s-3) auto var(--s-6); font-size: var(--text-sm); }
.guest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (min-width: 640px) { .guest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .guest-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.guest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.guest-card:hover { border-color: var(--blue-soft); box-shadow: var(--shadow-card); transform: translateY(-2px); }
/* aspect-ratio, not just height: `.entry-content img { height: auto }` in
   legacy-compat.css is 0,1,1 and outspecifies a bare class selector, so the
   88px height lost and portrait sources rendered 88x110 — ovals under the
   50% radius. aspect-ratio holds the box square even when height:auto wins. */
.guest-card__avatar { width: 88px; height: 88px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; margin-bottom: var(--s-1); }
.guest-card__name { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm); color: var(--blue-dark); line-height: 1.2; }
.guest-card__meta { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.3; }

/* Podcast cover art is square (600x600) with the episode title baked into
   the bottom of the image, so the default 16:9 card crop cuts it off. */
body.category-podcast .post-card__media { aspect-ratio: 1 / 1; }

/* Podcast topic chips + per-topic episode cover grids */
.topic-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.topic-chip {
  display: inline-block;
  padding: 0.55em 1.1em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blue-dark);
  text-decoration: none;
}
.topic-chip:hover { background: var(--blue-tint); border-color: var(--blue-soft); color: var(--blue-dark); }
.episode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (min-width: 640px) { .episode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .episode-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.episode-tile {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-warm);
  aspect-ratio: 16 / 9;
  text-decoration: none;
}
.episode-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.episode-tile:hover img { transform: scale(1.03); }
.episode-tile__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--s-3);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
.episode-grid__back { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-4); }
.episode-grid__jump { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-soft); }

/* Podcast intro: cover art beside the show description */
.podcast-intro { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .podcast-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); } }
.podcast-intro__cover { width: 100%; border-radius: var(--radius); display: block; }
.podcast-intro__body p { margin-bottom: var(--s-4); }
.podcast-intro__body h2 { margin-bottom: var(--s-4); }

/* "Listen on" platform strip below the podcast hero (V3 #podcastlogos) */
#podcastlogos { background: #1e1d22; }
#podcastlogos .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-5) var(--s-8);
  padding-block: var(--s-5);
}
.podcastlogos__label {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#podcastlogos img { height: 52px; width: auto; display: block; }
@media (min-width: 900px) { #podcastlogos img { height: 62px; } }

/* Guide hub pages (ecommerce + Amazon resource indexes) */
.guide-hub__head { padding-block: var(--s-8) 0; }
.guide-hub__head .entry-title { padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.guide-intro { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .guide-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); } }
.guide-intro__cover { display: block; text-align: center; }
.guide-intro__cover img { max-width: 320px; width: 100%; border-radius: var(--radius); }
.guide-intro__body p { margin-bottom: var(--s-4); }
.guide-topic { padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
.guide-topic:last-of-type { border-bottom: 0; }
.guide-topic__row { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) { .guide-topic__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); } }
.guide-topic__intro h2 { margin-bottom: var(--s-3); }
.guide-topic__intro h2 a { color: var(--blue-dark); text-decoration: none; }
.guide-topic__intro h2 a:hover { color: var(--blue); }
.guide-topic__intro p { color: var(--ink-soft); }
.guide-topic__links ul { list-style: none; padding: 0; margin: var(--s-3) 0 0; }
.guide-topic__links li { margin-bottom: var(--s-2); font-size: var(--text-sm); }
.guide-topic__links a { color: var(--blue-dark); text-decoration: none; }
.guide-topic__links a:hover { color: var(--blue); text-decoration: underline; }
.pagesplash__search { max-width: 460px; margin-inline: auto; }
.pagesplash__search form { display: flex; flex-direction: column; gap: var(--s-2); }
.pagesplash__search input[type="search"], .pagesplash__search input[type="text"] {
  width: 100%;
  margin: 0;
  border-radius: var(--radius-sm);
  border: 0;
  padding: var(--s-3) var(--s-4);
}
.pagesplash__search input[type="submit"], .pagesplash__search button { width: 100%; }

/* Lander variant (the /free page): copy left-aligned, sentence-case headline.
   Must come after the base .pagesplash__* rules to win on source order. */
.pagesplash__shell--left { text-align: left; max-width: 660px; }
.pagesplash__brand--lander { text-transform: none; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.pagesplash__kicker--sm { text-transform: none; font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--s-4); }
.pagesplash__shell--left .pagesplash__search { margin-inline: 0; }
.pagesplash__note {
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-shadow: 1px 1px 4px rgb(0 0 0 / 0.65);
}

/* CNBC band — V3 #popularposts (bg image set in legacy-compat.css).
   The video is capped well short of the family in the background photo so
   it never covers the kids. */
#popularposts { margin-top: var(--s-8); }
/* Same treatment as the hero: darken only the side the copy sits on so the
   kids in the photo stay bright. */
#popularposts .splashoverlay {
  padding-block: var(--s-8);
  background: linear-gradient(95deg,
    rgb(4 12 22 / 0.78) 0%,
    rgb(4 12 22 / 0.70) 32%,
    rgb(4 12 22 / 0.34) 52%,
    rgb(4 12 22 / 0.06) 70%,
    rgb(4 12 22 / 0) 86%);
}
@media (max-width: 899px) {
  #popularposts .splashoverlay { background: rgb(4 12 22 / 0.55); }
}
#popularposts h2 { color: #fff; margin-bottom: var(--s-3); }
#popularposts p { color: rgb(255 255 255 / 0.9); max-width: 52ch; margin-bottom: var(--s-5); }
#popularposts .video-frame {
  max-width: 620px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  background: var(--ink);
}
#popularposts .video-frame iframe { width: 100%; height: 100%; }

.cta-course { text-align: center; }
.cta-course .cta-course__box { max-width: 720px; margin-inline: auto; }
.cta-course h2 { margin-block: var(--s-3) var(--s-4); max-width: 24ch; margin-inline: auto; }
.cta-course p { color: var(--ink-soft); max-width: 52ch; margin-inline: auto; margin-bottom: var(--s-5); }
.cta-course form { display: flex; flex-direction: column; gap: var(--s-3); max-width: 460px; margin-inline: auto; }
@media (min-width: 640px) {
  .cta-course form { flex-direction: row; }
  .cta-course form input[type="email"], .cta-course form input[type="text"] { flex: 1; margin: 0; }
}

.video-feature { text-align: center; }
.video-feature h2 { margin-bottom: var(--s-3); }
.video-feature p { color: var(--ink-soft); max-width: 52ch; margin-inline: auto; margin-bottom: var(--s-5); }
.video-feature__frame {
  max-width: 820px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--ink);
}
.video-feature__frame iframe { width: 100%; height: 100%; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.section-head .all-link { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); text-decoration: none; }

/* =========================================================
   15. COMMENTS
   ========================================================= */
.comments-area { margin-top: var(--s-10); font-family: var(--font-sans); }
.comments-title { font-size: var(--text-lg); margin-bottom: var(--s-5); }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .comment { border-top: 1px solid var(--line); padding-block: var(--s-5); }
.comment-list .children { list-style: none; padding-left: var(--s-5); }
@media (min-width: 640px) { .comment-list .children { padding-left: var(--s-8); } }
.comment-author { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-size: var(--text-xs); color: var(--ink-faint); margin: var(--s-1) 0 var(--s-3); }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-content { font-size: var(--text-sm); }
.comment-content p { margin-bottom: 0.8em; }
.reply a {
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  color: var(--blue-dark);
}
.comment-respond { margin-top: var(--s-6); }
.comment-respond .comment-reply-title { font-size: var(--text-lg); margin-bottom: var(--s-4); }
.comment-form label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--s-1); }
.comment-form p { margin-bottom: var(--s-4); }

/* =========================================================
   16. PODCAST / AUDIO POSTS
   ========================================================= */
.podcast-platforms { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-4); font-family: var(--font-sans); }
.podcast-platforms a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.45em 1em;
}
.podcast-platforms a:hover { border-color: var(--blue); color: var(--blue-dark); }
.podcast-platforms svg { width: 16px; height: 16px; fill: currentColor; }

/* =========================================================
   17. 404 / SEARCH / MISC
   ========================================================= */
.page-404 { text-align: center; padding-block: var(--s-12); }
.page-404 h1 { margin-bottom: var(--s-4); }
.page-404 p { color: var(--ink-soft); margin-bottom: var(--s-6); }
.search-form-inline { display: flex; gap: var(--s-2); max-width: 480px; }
/* The archive title has no bottom margin, so the search box sat flush
   against "Results for …". */
.archive-header .search-form-inline { margin-top: var(--s-5); }
.search-form-inline input[type="search"] { flex: 1; }
.page-404 .search-form-inline { margin-inline: auto; }

.sticky .post-card__title::before { content: "★ "; color: var(--accent-ochre); }
.gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.gallery .gallery-item { margin: 0; }

/* WP alignment/core classes */
.alignwide { max-width: var(--content-max); }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption { max-width: 100%; }

/* =========================================================
   18. LEGACY LANDERS (/advanced/, /fb/)
   V3 shipped #leader_banner / #where_to_begin styles that were
   never ported, so both pages rendered as unreadable text over
   a bare background photo. Modernized here: the copy sits in a
   translucent blue panel on the right of the banner photo.
   ========================================================= */
#leader_banner {
  position: relative;
  color: #fff;
  width: 100%;
  background-size: cover !important;
  /* Anchor to the TOP, not a percentage. The banner height is pinned at
     558px while the 1200x552 photo scales with viewport width under
     `cover`, so the container aspect is not constant and vertical overflow
     grows fast: 31px at 1280 but 325px at 1920 and 619px at 2560. Any
     percentage crops a proportion of that, so `center` cut ~43px off the
     top of Steve's head at 1400 and 20% still cut 124px at 2560. `top`
     crops the bottom only, so the head is never clipped at any width.
     Used by /advanced/ and /fb/, same image. */
  background-position: 22% top !important;
  background-repeat: no-repeat !important;
  padding: var(--s-6) var(--s-4);
  margin-bottom: 0;
  display: flex;
  justify-content: flex-end;
}
/* No scrim over the banner photo. The copy sits in its own 90%-opaque
   #lead_block panel on the right, so it already has its contrast, and a
   full-width tint just hazed over the photo on the left. */

#leader_banner #lead_block {
  position: relative;
  display: block;
  width: 100%;
  max-width: 620px;
  padding: var(--s-6);
  background: rgb(1 61 123 / 0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
#leader_banner #lead_block h1,
#leader_banner #lead_block h2 {
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem) !important;
}
#leader_banner #lead_block p {
  color: #eaf2fb;
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0 0 var(--s-4);
}
#leader_banner #lead_block strong { color: #fff; }

/* Drip form injected by emailformsajax.js */
#leader_banner form div { display: flex; flex-direction: column; gap: var(--s-3); }
#leader_banner input[type="text"],
#leader_banner input[type="email"] {
  width: 100% !important;
  height: auto !important;
  font-size: var(--text-sm) !important;
  margin: 0 !important;
  padding: 0.85em 1em;
  border: 0;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
#leader_banner button[type="submit"] {
  display: block;
  width: 100%;
  padding: 0.9em 1.2em;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 800;
  cursor: pointer;
}
#leader_banner button[type="submit"]:hover { background: var(--brand-dark); }
#leader_banner button[type="submit"] a { color: #fff; text-decoration: none; }

#leader_proof { background: var(--blue-dark); text-align: center; line-height: 0; }
#leader_proof img { width: 100%; max-width: 1200px; height: auto; }

/* "You Are Going To Learn" three-up */
#where_to_begin {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-10) var(--s-4) var(--s-8);
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
#where_to_begin h2 {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem) !important;
}
#where_to_begin .featured_home_post {
  width: auto;
  float: none;
  min-height: 0;
  text-align: center;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
#where_to_begin .feat_img { display: block; padding: 0; }
#where_to_begin .feat_img svg { width: 64px; height: 64px; color: var(--blue-dark); }
#where_to_begin .feat_img > span {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink) !important;
  font-size: var(--text-lg) !important;
}

/* Bottom CTA on the landers */
.lander-cta { text-align: center; padding: 0 var(--s-4) var(--s-12); }
.lander-cta a {
  display: inline-block;
  padding: 1em 2.2em;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-lg);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.lander-cta a:hover { background: var(--brand-dark); color: #fff; }

@media (min-width: 700px) {
  #where_to_begin { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  #leader_banner { min-height: 465px; align-items: center; padding: var(--s-8) var(--s-6); }
  #leader_banner #lead_block { margin-right: var(--s-6); }
  #where_to_begin .feat_img svg { width: 88px; height: 88px; }
}