/* ==========================================================================
   hustle&passive — shared stylesheet
   --------------------------------------------------------------------------
   Replaces the ten near-identical <style> blocks the design bundle carried,
   one per page. Where those copies disagreed, the conflict was resolved here
   deliberately; each such decision is commented with WHY at the point of use.

   Components used by exactly one page (the homepage dashboard, the start-here
   planner, the about-page values grid) intentionally stay inline on that page
   — there is nothing to de-duplicate and no reason to make every other page
   download them.

   Load order:  site.css  →  article.css | guides.css  →  page <style>
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------------
   The bundle shipped three different :root blocks — 13 tokens on the marketing
   pages, 11 on the articles (missing --cta-d and --gold, which they then
   hard-coded), and 9 on the legal pages. This is the union.

   --blue is new. The bundle referenced var(--blue) four times but never
   defined it, so every bare .eyebrow silently fell back to inherited text
   colour. The value is lifted from the .thumb.t-blue rule, which is where the
   palette's blue actually lives.
   -------------------------------------------------------------------------- */
:root {
  --bg: #F5F0E6;
  --bg2: #EDE6D7;
  --paper: #FDFAF4;
  --ink: #182B23;
  --muted: #5D6C61;
  --green: #1C4A38;
  --deep: #12241B;
  --cta: #2FA45B;
  --cta-d: #23824A;
  --orange: #E4572E;
  --gold: #F2B33D;
  --blue: #3E7EA6;
  --line: #E0D6C3;
  --prose: #33443A;
  --mint: #9ED3B0;
  --sh: 0 10px 30px rgba(24, 43, 35, .1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font: 16px/1.6 Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

h1, h2, h3, .serif { font-family: Fraunces, Georgia, serif; }

/* --------------------------------------------------------------------------
   The bare element selector above is specificity 0,0,1, so any plugin rule
   written as `.entry-content h2` (0,1,1) outranks it and the headings inside
   post and page content silently render in someone else's font — which is
   exactly what was happening on this site, in Playfair Display.
   Restated here at 0,2,1 so the theme's own typography holds inside its own
   content wrappers, without resorting to !important.
   -------------------------------------------------------------------------- */
.article .prose h1, .article .prose h2, .article .prose h3,
.article .prose h4, .article .prose h5, .article .prose h6,
.article .entry-content h1, .article .entry-content h2, .article .entry-content h3,
.article .entry-content h4, .article .entry-content h5, .article .entry-content h6 {
  font-family: Fraunces, Georgia, serif;
}

.article .prose, .article .entry-content,
.article .prose p, .article .entry-content p,
.article .prose li, .article .entry-content li {
  font-family: Inter, system-ui, sans-serif;
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.hide { display: none !important; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   3. Eyebrow
   --------------------------------------------------------------------------
   Base colour was var(--blue) on the marketing pages (broken), var(--muted) on
   the legal pages and var(--orange) on the articles. Settled on --green: it is
   the brand's own dark green, hits ~10:1 on the cream background (--muted only
   manages ~4.9:1 at this 11px size), and avoids introducing a fourth accent
   hue across the 20 bare .eyebrow usages. The .orange and .mint modifiers
   still carry emphasis where the markup asks for it.
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.eyebrow.orange { color: var(--orange); }
.eyebrow.mint { color: var(--mint); }

/* --------------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------------
   The legal pages shipped stripped-down variants with no transition and no
   shadow. Taking the full version everywhere so buttons behave identically
   site-wide.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 Inter, sans-serif;
  padding: 13px 20px;
  border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .18s, background .18s;
}
.btn-cta { background: var(--cta); color: #fff; box-shadow: 0 8px 20px rgba(47, 164, 91, .35); }
.btn-cta:hover { background: var(--cta-d); transform: translateY(-2px); }
.btn-ghost { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-orange { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(228, 87, 46, .3); }
.btn-orange:hover { background: #C74624; }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Topbar + header
   -------------------------------------------------------------------------- */
.topbar { background: var(--deep); color: #EFE9DA; font-size: 13px; }
.topbar .container {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; padding: 9px 24px; flex-wrap: wrap; text-align: center;
}
.topbar .star { color: var(--gold); }         /* was a hard-coded #F2B33D on 6 pages */
.topbar a { color: #FFC46B; font-weight: 700; text-decoration: none; }
.topbar strong { color: #fff; }

header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(245, 240, 230, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
header.scrolled { box-shadow: 0 6px 24px rgba(24, 43, 35, .1); }

.nav { display: flex; align-items: center; gap: 24px; padding: 14px 24px; }
.logo {
  font-family: Fraunces, serif; font-weight: 700; font-size: 22px;
  text-decoration: none; color: var(--ink);
}
.logo .amp { color: var(--orange); }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active {
  color: var(--orange); font-weight: 700;
  text-decoration: underline; text-underline-offset: 6px;
}
.nav .btn { margin-left: 8px; padding: 11px 16px; }

.menu-btn {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  font-size: 18px; padding: 8px 12px; cursor: pointer;
}
.m-menu { display: none; border-top: 1px solid var(--line); background: var(--paper); }
.m-menu.open { display: block; }
.m-menu a {
  display: block; padding: 14px 24px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.m-menu .btn { margin: 14px 24px; display: flex; }

/* --------------------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------------------
   The bundle carried four near-identical h1 clamps (52/56/58/60px caps) across
   pages. Unified to one; the differences were not deliberate design.
   .hero.center is the single-column centred variant used by guides and legal.
   -------------------------------------------------------------------------- */
.hero { padding: 66px 0 60px; }
.hero .container {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 52px; align-items: center;
}
.hero h1 {
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.07; letter-spacing: -.02em; margin: 16px 0;
}
.hero h1 em { font-style: italic; color: var(--orange); }
.hero .sub { font-size: 17px; color: var(--muted); max-width: 56ch; margin-bottom: 24px; }
.hero .sub strong { color: var(--ink); }

.hero.center { padding: 60px 0 40px; }
.hero.center .container {
  display: block; max-width: 780px; text-align: center;
}
.hero.center .sub { margin: 0 auto; }

.hero-alt {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; font-size: 13px; color: var(--muted); flex-wrap: wrap;
}
.hero-alt a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px dashed var(--muted);
}

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */
section { padding: 72px 0; }

.sec-head { max-width: 780px; margin-bottom: 36px; }
.sec-head h2 {
  font-size: clamp(30px, 3.4vw, 42px);
  letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 12px;
}
.sec-head p { color: var(--muted); }
.sec-head .row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.thumb {
  height: 96px; border-radius: 12px;
  display: grid; place-items: center; font-size: 30px; margin-bottom: 14px;
}
/* WordPress wraps each card so the filter attributes have somewhere to live
   without templating them into the card part itself. The wrapper has to hand
   its grid cell straight through. */
.card-wrap { display: flex; }
.card-wrap > .card { flex: 1; }

/* A card with a real featured image, rather than the glyph placeholder.
   Only WordPress produces these; the static site has no images. */
.thumb--image { padding: 0; overflow: hidden; background: var(--bg2); }
.thumb--image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.t-green { background: linear-gradient(135deg, #E8F3EC, #D3E7D9); color: var(--green); }
.t-blue { background: linear-gradient(135deg, #E4EFF5, #D2E4EE); color: var(--blue); }
.t-orange { background: linear-gradient(135deg, #FBE7DE, #F6D7C8); color: var(--orange); }
.t-gold { background: linear-gradient(135deg, #FBF0DA, #F5E3BC); color: #B07E24; }
.card .tag {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 8px;
}
.card h3 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
.card p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.card ul { margin: 0 0 16px 18px; font-size: 14px; color: var(--muted); }
.card li { margin-bottom: 6px; }
.card .meta {
  margin-top: auto; display: flex; justify-content: space-between;
  border-top: 1px dashed var(--line); padding-top: 14px;
  font-size: 12px; color: var(--muted);
}
.card .go { font-weight: 700; color: var(--green); font-size: 12px; }

/* The homepage dashboard's figures are invented for the illustration. This
   caption sits under them and says so. */
.dash-note { margin-top: 12px; font-size: 11px; color: var(--muted); }

/* Used on the tools page to label a link that pays us nothing. */
.card .micro-note {
  margin-top: 10px; font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.card .micro-note::before { content: "○"; color: var(--cta); font-weight: 700; }

/* --------------------------------------------------------------------------
   8b. Pagination
   --------------------------------------------------------------------------
   WordPress only; the static site has no paged archives.
   -------------------------------------------------------------------------- */
.pagination { margin-top: 40px; }
.pagination ul { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; list-style: none; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--muted);
  font: 600 13px Inter, sans-serif; text-decoration: none;
  transition: border-color .18s, color .18s;
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .current { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pagination .dots { border: none; background: none; }

/* --------------------------------------------------------------------------
   9. Stats
   -------------------------------------------------------------------------- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg2); }
.stats .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 26px 12px; text-align: center; }
.stat b {
  display: block; font-family: Fraunces, serif; font-size: 32px;
  font-weight: 700; color: var(--green);
}
.stat span {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------------------
   10. Dark section + steps
   -------------------------------------------------------------------------- */
.dark-sec { background: var(--green); color: #EFE9DA; }
.dark-sec .sec-head h2 { color: #fff; }
.dark-sec .sec-head p { color: #C9D8C9; }

.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
.step {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px; padding: 24px;
}
.step .num {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--mint); display: flex; justify-content: space-between;
}
.step .num .glyph { color: var(--gold); }
.step h3 { font-size: 21px; margin: 14px 0 8px; color: #fff; }
.step p { font-size: 14px; color: #C9D8C9; margin-bottom: 16px; }
.step a { color: #FFC46B; font-weight: 700; font-size: 13px; text-decoration: none; }

/* --------------------------------------------------------------------------
   11. Numbered path
   -------------------------------------------------------------------------- */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pstep {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px;
}
.pstep .n {
  font-family: Fraunces, serif; font-size: 40px; font-weight: 700;
  color: var(--bg2); -webkit-text-stroke: 1.5px var(--orange); line-height: 1;
}
.pstep h3 { font-size: 20px; margin: 14px 0 8px; }
.pstep p { font-size: 14px; color: var(--muted); }
.pstep:not(:last-child)::after {
  content: "→"; position: absolute; right: -16px; top: 50%;
  transform: translateY(-50%); color: var(--muted);
}

/* --------------------------------------------------------------------------
   12. Community / quotes
   -------------------------------------------------------------------------- */
.comm-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
.quote-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px; display: flex; flex-direction: column; gap: 18px;
}
.quote-card .q { font-family: Fraunces, serif; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.35; }
.quote-card .q em { color: var(--orange); }
.quote-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-card .av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font: 700 12px Inter;
}
.quote-card b { font-size: 14px; display: block; }
.quote-card small { color: var(--muted); font-size: 12px; }
.quote-card .stars { color: var(--orange); letter-spacing: 2px; }

.principles { display: grid; gap: 12px; }
.prin {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; display: flex; gap: 14px; align-items: baseline;
}
.prin .big {
  font-family: Fraunces, serif; font-size: 26px; font-weight: 700;
  color: var(--orange); white-space: nowrap;
}
.prin p { font-size: 13px; color: var(--muted); }
.prin p strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; gap: 16px;
  background: none; border: none; padding: 20px 4px;
  font: 600 16px Inter; color: var(--ink); cursor: pointer; text-align: left;
}
.faq-q .plus { font-size: 20px; color: var(--orange); transition: transform .25s; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s; }
.faq-a p { padding: 0 4px 20px; color: var(--muted); font-size: 14px; }

/* --------------------------------------------------------------------------
   14. Email capture
   --------------------------------------------------------------------------
   The markup is a real POST to Kit; assets/kit.js upgrades it in place. There
   is no fake success state here — the bundle's version intercepted the submit
   and told people they had subscribed when nothing had been sent.
   -------------------------------------------------------------------------- */
.capture-wrap {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; box-shadow: var(--sh); max-width: 560px;
}
.capture-title {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.capture-title .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cta); animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 164, 91, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(47, 164, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 164, 91, 0); }
}

.capture-form { display: flex; gap: 10px; }
.capture-form input {
  flex: 1; min-width: 0;
  font: 500 14px Inter, sans-serif; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.capture-form input:focus {
  outline: none; border-color: var(--cta);
  box-shadow: 0 0 0 4px rgba(47, 164, 91, .15);
}
.capture-form input.err { border-color: var(--orange); animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.micro {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  font-size: 12px; color: var(--muted);
}
.micro span::before { content: "✓ "; color: var(--cta); font-weight: 700; }

/* Light success, for capture forms sitting on the cream background. */
.success {
  background: #E9F5EC; border: 1px solid var(--cta); color: var(--green);
  border-radius: 12px; padding: 14px 16px; font-size: 14px; flex: 1;
}

/* Shown when a submission genuinely failed — never as a stand-in for one. */
.capture-error { margin-top: 10px; font-size: 13px; color: var(--orange); font-weight: 600; }
.newsletter .capture-error { color: #FFB59B; }

/* --------------------------------------------------------------------------
   15. Newsletter section
   -------------------------------------------------------------------------- */
.newsletter { background: var(--deep); color: #EFE9DA; text-align: center; padding: 72px 0; }
.newsletter .container { max-width: 720px; }
.newsletter h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 14px 0 12px; color: #fff; }
.newsletter .lead { color: #C9D8C9; margin-bottom: 24px; }
.newsletter .capture-wrap {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
  box-shadow: none; margin: 0 auto;
}
.newsletter .capture-title { color: var(--mint); justify-content: center; }
/* Static on the dark panel — the pulsing ring reads as an error indicator there. */
.newsletter .capture-title .dot { background: var(--cta); animation: none; }
.newsletter .micro { color: #9FB3A4; justify-content: center; }
/* Dark counterpart of .success, so the confirmation reads on the deep panel. */
.newsletter .success {
  background: rgba(158, 211, 176, .12);
  border-color: var(--cta); color: #C9E8D2;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
footer {
  background: var(--deep); color: #B9C4B8;
  padding: 56px 0 0; border-top: 1px solid #24352C;
}
.foot-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px; padding-bottom: 40px;
}
.foot-grid .logo { color: #fff; }
.foot-grid p { font-size: 13px; margin-top: 12px; max-width: 34ch; }
.foot-grid .disc { font-size: 11px; color: #7E8B7F; max-width: 40ch; }
.foot-grid h5 {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #7E8B7F; margin-bottom: 14px;
}
.foot-grid a { display: block; font-size: 13px; color: #B9C4B8; text-decoration: none; margin-bottom: 9px; }
.foot-grid a:hover { color: #FFC46B; }
/* Social profiles. Icons are inline SVG inheriting currentColor, so they take
   the footer's palette and the gold hover the other footer links use. */
.social {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding: 0; list-style: none;
}
.social a {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin: 0;
  border: 1px solid #24352C; border-radius: 10px;
  color: #B9C4B8; background: rgba(255, 255, 255, .03);
  transition: color .18s, border-color .18s, transform .18s;
}
.social a:hover {
  color: #FFC46B; border-color: #FFC46B; transform: translateY(-2px);
}
.social svg { display: block; }

.foot-bottom {
  border-top: 1px solid #24352C; padding: 18px 0; font-size: 12px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.foot-bottom a { color: #B9C4B8; text-decoration: none; }

/* --------------------------------------------------------------------------
   17. Sticky subscribe bar
   -------------------------------------------------------------------------- */
.sticky-bar {
  position: fixed; left: 50%; bottom: 16px;
  transform: translate(-50%, 140%);
  width: min(720px, calc(100% - 20px));
  background: var(--ink); color: var(--bg);
  border-radius: 16px; box-shadow: 0 20px 50px rgba(18, 36, 27, .45);
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  z-index: 120; transition: transform .4s;
}
.sticky-bar.show { transform: translate(-50%, 0); }
.sticky-bar .txt { font-size: 13px; font-weight: 600; }
.sticky-bar .txt small { display: block; color: #9FB3A4; font-size: 11px; }
.sticky-bar form { display: flex; gap: 8px; flex: 1; min-width: 0; }
.sticky-bar input {
  flex: 1; min-width: 0; background: #24352C;
  border: 1px solid #3A4A40; border-radius: 9px; color: #fff;
  font: 500 13px Inter; padding: 10px 12px;
}
.sticky-bar .btn { padding: 10px 14px; white-space: nowrap; }
.sticky-bar .close {
  background: none; border: none; color: #9FB3A4;
  font-size: 16px; cursor: pointer; padding: 6px;
}

/* --------------------------------------------------------------------------
   18. Prose + legal pages
   -------------------------------------------------------------------------- */
.prose { font-size: 16px; }
.prose > p { margin-bottom: 16px; color: var(--prose); }
.prose h2 { font-size: 26px; margin: 34px 0 12px; scroll-margin-top: 90px; }
.prose h3 { font-size: 19px; margin: 22px 0 8px; }
.prose ul, .prose ol { margin: 0 0 16px 22px; color: var(--prose); }
.prose li { margin-bottom: 8px; }
.prose li strong { color: var(--ink); }
.prose a { color: var(--orange); font-weight: 600; }

.legal { max-width: 760px; margin: 0 auto; }
.legal .updated,
.post-head .updated { font-size: 12px; color: var(--muted); margin-top: 14px; }

/* Page-builder content dropped into the prose column should obey the measure
   and spacing rather than break out of it. */
.prose .elementor,
.prose .elementor-section,
.prose .elementor-container { max-width: 100%; }
.prose .elementor-widget:not(:last-child) { margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   19. Callouts
   --------------------------------------------------------------------------
   Lives here rather than in article.css: the tools page uses one for its
   "How we choose" standard, and that page has no reason to load the whole
   article layer.
   -------------------------------------------------------------------------- */
.callout {
  background: #E8F3EC; border: 1px solid var(--cta); border-radius: 14px;
  padding: 18px 20px; margin: 22px 0; font-size: 14px;
}
.callout b { display: block; margin-bottom: 6px; color: var(--deep); }
.callout.orange { background: #FBE7DE; border-color: var(--orange); }
.callout.orange b { color: #8A4A12; }
/* A capture form dropped mid-article sits inside a callout. */
.callout .capture-form { margin-top: 12px; }

/* --------------------------------------------------------------------------
   20. Scroll reveal
   --------------------------------------------------------------------------
   Gated behind .js, which a one-line inline script puts on <html> before
   paint. The bundle hid these unconditionally, so with JavaScript off nothing
   ever added .in and most of the homepage stayed at opacity 0 — a blank page.
   Hiding content is now conditional on being able to bring it back.
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s; }
.js .reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }

/* --------------------------------------------------------------------------
   21. Responsive
   --------------------------------------------------------------------------
   Union of the six different @media blocks the bundle shipped. Every page now
   gets every rule, so a component behaves the same wherever it appears.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .cards, .steps3, .path-grid, .comm-grid { grid-template-columns: 1fr; }
  .stats .container { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .menu-btn { display: block; }
  .nav .btn-cta { display: none; }
  .pstep:not(:last-child)::after {
    content: "↓"; right: auto; left: 50%; top: auto; bottom: -16px;
    transform: translateX(-50%);
  }
}

@media (max-width: 640px) {
  .capture-form { flex-direction: column; }
  .sticky-bar .txt { display: none; }
  section { padding: 54px 0; }

  /* The floating badges are positioned over the corners of the dashboard.
     There is no corner to spare at this width, so they sit under it instead
     of across the figures they are annotating.

     Scoped to .hero-visual for specificity, not for scope: .float-badge and
     its .fb1/.fb2 offsets are declared in the homepage's own inline <style>,
     which the browser reads after this file. A bare .float-badge selector
     here ties on specificity and loses on order. */
  .hero-visual { padding-bottom: 8px; }
  .hero-visual .float-badge {
    position: static; transform: none;
    display: inline-flex; margin: 10px 8px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}