/* ============================================================
   AARVYA · Resources / Guides additions
   Loaded only on /resources pages — keeps marketing-page CSS untouched.
   ============================================================ */

/* Reading progress bar */
.read-progress {
  position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
.read-progress__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  transition: width .08s linear;
}

/* Article header */
.article-header {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff; padding: clamp(60px, 9vw, 100px) 0 clamp(40px, 6vw, 70px);
  position: relative; overflow: hidden;
}
.article-header::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.article-header__inner { position: relative; max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; font-size: .8rem; color: var(--gold-300); }
.article-meta .chip { background: rgba(201, 169, 97, .15); color: var(--gold-300); padding: 4px 10px; border-radius: 999px; }
.article-meta .meta-sep { color: rgba(255,255,255,.3); }
.article-header h1 {
  font-family: var(--font-display); font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  color: #fff; line-height: 1.15; margin-bottom: 14px;
}
.article-header .lede { color: #c2cae0; font-size: clamp(1rem, 1.6vw, 1.12rem); margin: 0; }

/* TL;DR box */
.tldr {
  background: linear-gradient(135deg, rgba(201,169,97,.06), rgba(201,169,97,.14));
  border: 1px solid rgba(201,169,97,.3); border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-md); padding: 24px 28px; margin: 0 0 36px;
}
.tldr__title { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 12px; }
.tldr ul { margin: 0; padding-left: 20px; }
.tldr li { margin-bottom: 6px; color: var(--ink-700); }

/* Article body */
.article-body { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.article-body h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.85rem); margin-top: 2em; margin-bottom: .5em; color: var(--ink-900); }
.article-body h3 { font-size: 1.15rem; margin-top: 1.6em; margin-bottom: .4em; color: var(--navy-800); }
.article-body p, .article-body li { font-size: 1.02rem; line-height: 1.75; color: var(--ink-700); }
.article-body p + p { margin-top: 0; }

/* Dark-background components MUST keep their light text — these
   article-body rules above kept fighting them. Specificity-3 wins. */
.article-body .cta-strip { color: #fff; }
.article-body .cta-strip h2,
.article-body .cta-strip h2 a { color: #fff !important; font-family: var(--font-display); }
.article-body .cta-strip p { color: #c2cae0 !important; font-size: 1rem; }
.article-body .character-quote p { color: #fff !important; }
.article-body .character-quote footer { color: var(--gold-300) !important; }
.article-body .why-visual h3,
.article-body .why-visual p { color: #fff; }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 1.2em; }
.article-body ul li, .article-body ol li { margin-bottom: 8px; }
.article-body a:not(.btn):not(.chip) { color: var(--navy-700); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.article-body a:not(.btn):not(.chip):hover { color: var(--gold-500); }

/* Hero illustration container */
.hero-svg {
  margin: 0 0 32px; background: linear-gradient(135deg, var(--bg-soft), #fff);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px;
}
.hero-svg svg { width: 100%; height: auto; max-height: 320px; }

/* Callouts (tip / warning / pro) */
.callout {
  display: flex; gap: 14px; padding: 18px 22px; border-radius: var(--radius-md);
  margin: 24px 0; border: 1px solid var(--line); background: #fff;
}
.callout__icon {
  flex: 0 0 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.15rem;
}
.callout__body { font-size: .96rem; color: var(--ink-700); }
.callout__body strong { color: var(--ink-900); display: block; margin-bottom: 4px; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; }
.callout--tip { background: linear-gradient(180deg, #f5fbf7, #fff); border-color: rgba(31,157,85,.25); }
.callout--tip .callout__icon { background: rgba(31,157,85,.12); color: var(--success); }
.callout--warn { background: linear-gradient(180deg, #fff8f0, #fff); border-color: rgba(217, 119, 6, .25); }
.callout--warn .callout__icon { background: rgba(217, 119, 6, .12); color: #c2680a; }
.callout--pro { background: linear-gradient(180deg, #fbf6e9, #fff); border-color: rgba(201, 169, 97, .35); }
.callout--pro .callout__icon { background: rgba(201, 169, 97, .15); color: #946e2c; }
.callout--info { background: linear-gradient(180deg, #f0f5fc, #fff); border-color: rgba(29, 58, 122, .25); }
.callout--info .callout__icon { background: rgba(29, 58, 122, .1); color: var(--navy-700); }

/* Pull quote */
.pull-quote {
  margin: 36px 0; padding: 28px 32px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff; border-radius: var(--radius-lg); position: relative; overflow: hidden;
}
.pull-quote::before {
  content: '"'; position: absolute; top: 0; left: 20px; font-family: var(--font-display);
  font-size: 8rem; color: var(--gold-500); opacity: .25; line-height: 1;
}
.pull-quote p {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.45; color: #fff; margin: 0; position: relative;
}

/* Cost & comparison tables */
.data-table { width: 100%; border-collapse: collapse; margin: 18px 0 28px; font-size: .95rem; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.data-table th { background: var(--bg-soft); color: var(--navy-900); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.data-table td { color: var(--ink-700); }
.data-table tbody tr:hover { background: var(--bg-soft); }
.data-table tfoot td { font-weight: 700; color: var(--navy-900); background: var(--bg-soft); }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 16px 0 28px; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.checklist li::before {
  content: ''; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid var(--ink-300); margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E");
  background-size: 0 0; background-position: center; background-repeat: no-repeat;
  transition: background-size .2s, border-color .2s;
  cursor: pointer;
}
.checklist li.is-checked::before, .checklist li:hover::before { background-size: 14px 14px; border-color: var(--success); }
.checklist li.is-checked { background: #f5fbf7; }

/* Step-by-step
   Layout: numbered circle in col 1 (pinned to row 1),
   ALL content (h3 + paragraphs + lists) explicitly in col 2 so a step
   with multiple <p> elements doesn't spill back into the 44px column. */
.steps { list-style: none; padding: 0; margin: 28px 0; counter-reset: step; }
.steps > li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 6px 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  counter-increment: step;
}
.steps > li:last-child { border-bottom: none; }
.steps > li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1;
  width: 44px; height: 44px; border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: var(--gold-400); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
/* every child of a step (h3, p, ul, ol, etc.) stays in column 2 */
.steps > li > * { grid-column: 2; min-width: 0; }
.steps > li h3 { margin: 0 0 4px; font-size: 1.08rem; color: var(--ink-900); }
.steps > li p { margin: 0 0 6px; color: var(--ink-700); font-size: .98rem; }
.steps > li p:last-child { margin-bottom: 0; }
.steps > li ul, .steps > li ol { margin: 6px 0 0; padding-left: 20px; color: var(--ink-700); font-size: .96rem; }
.steps > li a { color: var(--navy-700); }

/* Mermaid container */
.mermaid-wrap {
  margin: 28px 0;
  padding: 24px;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  text-align: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mermaid-wrap .mermaid {
  background: transparent;
  display: block;
  text-align: center;
}
/* Force Mermaid SVGs to fill the available width so small diagrams
   don't look tiny on mobile (Mermaid sets inline width/height attrs
   that we have to override with !important). */
.mermaid-wrap .mermaid svg,
.mermaid-wrap > .mermaid > svg {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Related guides */
.related {
  margin: 56px 0 0; padding: 36px 0 0; border-top: 1px solid var(--line);
}
.related h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 24px; }
.related__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .related__grid { grid-template-columns: repeat(3, 1fr); } }
.related__card {
  display: block; padding: 20px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-md); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
  text-decoration: none !important;
}
.related__card:hover { transform: translateY(-4px); border-color: rgba(201,169,97,.4); box-shadow: var(--shadow-md); }
.related__card .chip { display: inline-block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 8px; }
.related__card h4 { font-size: 1.02rem; color: var(--navy-900); margin: 0 0 8px; line-height: 1.3; }
.related__card p { font-size: .9rem; color: var(--ink-500); margin: 0; }

/* Helpful bar */
.helpful {
  margin-top: 36px; padding: 22px; text-align: center;
  background: var(--bg-soft); border-radius: var(--radius-md);
}
.helpful p { font-size: .95rem; color: var(--ink-500); margin-bottom: 10px; }
.helpful .btn-helpful { display: inline-flex; padding: 8px 18px; background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--navy-800); font-size: .9rem; margin: 0 6px; }
.helpful .btn-helpful:hover { border-color: var(--gold-500); color: var(--gold-500); }

/* Inline rabbit-hole card */
.next-up {
  display: flex; align-items: center; gap: 16px;
  margin: 24px 0; padding: 16px 20px;
  background: linear-gradient(135deg, rgba(10,31,68,.04), rgba(201,169,97,.06));
  border: 1px solid rgba(201,169,97,.25); border-radius: var(--radius-md);
  text-decoration: none !important;
}
.next-up:hover { border-color: var(--gold-500); background: linear-gradient(135deg, rgba(10,31,68,.06), rgba(201,169,97,.1)); }
.next-up__icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 999px; background: var(--gold-500); color: var(--navy-900); display: grid; place-items: center; }
.next-up__body { flex: 1; }
.next-up__label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 2px; }
.next-up__title { font-size: 1rem; font-weight: 600; color: var(--navy-900); }
.next-up__arrow { color: var(--gold-500); }

/* Hub-specific styles */
.hub-hero {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff; padding: clamp(70px, 10vw, 120px) 0 clamp(36px, 6vw, 60px);
  position: relative; overflow: hidden;
}
.hub-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hub-hero__inner { position: relative; max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.hub-hero h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.1rem); color: #fff;
  margin-bottom: 14px;
}
.hub-hero p { color: #c2cae0; font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 580px; margin: 0 auto 28px; }

/* Search & filter */
.hub-controls {
  display: grid; gap: 14px; max-width: 820px; margin: 0 auto;
  padding: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); backdrop-filter: blur(14px);
  position: relative;
}
/* Single column on every width: full-width search on top, chips below.
   (A 1fr/auto split let the 9 chips squeeze the search to just its icon.) */
.hub-search { position: relative; }
.hub-search input {
  width: 100%; padding: 13px 16px 13px 44px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-family: inherit; font-size: .96rem;
}
.hub-search input::placeholder { color: rgba(255,255,255,.4); }
.hub-search input:focus { outline: none; border-color: var(--gold-400); background: rgba(255,255,255,.12); }
.hub-search::before {
  content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2cae0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
}

/* Light-theme search for the "All guides" section header (white background),
   so the search is reachable right where browsing happens — not only in the hero. */
/* ---- Sticky filter bar for the "All guides" grid (white background) ----
   The search lives WITH the results, so typing visibly filters the grid right
   below it, and it sticks under the header so it stays reachable while scrolling
   100+ guides. A live count gives feedback on exactly what's showing. */
.guide-filter {
  position: sticky; top: var(--sticky-top, 64px); z-index: 30;
  display: grid; gap: 12px;
  padding: 14px 0; margin: 0 0 22px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .guide-filter { grid-template-columns: minmax(260px, 380px) 1fr; align-items: center; column-gap: 20px; }
  .guide-filter__status { grid-column: 1 / -1; }
}

.guide-search { position: relative; }
.guide-search input {
  width: 100%; padding: 13px 44px 13px 46px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); color: var(--navy-900);
  font-family: inherit; font-size: .98rem;
  box-shadow: 0 1px 2px rgba(10,31,68,.04);
  transition: border-color .2s, box-shadow .2s;
}
.guide-search input::placeholder { color: var(--ink-500); }
.guide-search input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,169,97,.18); }
.guide-search::before {
  content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
}
.guide-search__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-500);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s, color .15s;
}
.guide-search__clear:hover { background: var(--bg-soft); color: var(--navy-900); }
.guide-search__clear svg { width: 16px; height: 16px; }
.guide-search__clear[hidden] { display: none; } /* re-assert over the display:grid above */
/* hide the browser's native search "x" so we don't show two clear buttons */
.guide-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.guide-filter__status { font-size: .85rem; color: var(--ink-500); }
.guide-filter__status strong { color: var(--navy-900); font-weight: 700; }

.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  padding: 8px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  background: #fff; color: var(--ink-700); border: 1px solid var(--line);
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.cat-chip:hover { border-color: var(--gold-400); color: var(--navy-900); }
.cat-chip.is-active { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }

/* Guide cards on hub */
.guide-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }

.guide-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
  text-decoration: none !important; display: flex; flex-direction: column;
}
.guide-card:hover { transform: translateY(-4px); border-color: rgba(201,169,97,.4); box-shadow: var(--shadow-md); }
.guide-card__art {
  aspect-ratio: 16/9; background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  position: relative; display: grid; place-items: center; color: var(--gold-400); overflow: hidden;
}
.guide-card__art::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.guide-card__art svg { width: 60px; height: 60px; position: relative; }
.guide-card__art--gst { background: linear-gradient(135deg, #1f9d55, #0f5d31); color: #d3f0d9; }
.guide-card__art--tax { background: linear-gradient(135deg, #0a1f44, #c9a961); color: #fff; }
.guide-card__art--reg { background: linear-gradient(135deg, #122a5e, #1d3a7a); color: var(--gold-400); }
.guide-card__art--roc { background: linear-gradient(135deg, #6b4d18, #c9a961); color: #fff; }
.guide-card__art--erp { background: linear-gradient(135deg, #0a1f44, #1d3a7a); color: var(--gold-400); }
.guide-card__art--accounting { background: linear-gradient(135deg, #6b4d18, #d8bd7c); color: #fff; }
.guide-card__art--payroll { background: linear-gradient(135deg, #1d3a7a, #c9a961); color: #fff; }
.guide-card__art--audit { background: linear-gradient(135deg, #0a1f44, #6b4d18); color: var(--gold-400); }
.guide-card__art--advisory { background: linear-gradient(135deg, #122a5e, #946e2c); color: #fff; }
.guide-card__art--sop { background: linear-gradient(135deg, #1d3a7a, #0a1f44); color: var(--gold-400); }
.guide-card__body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
.guide-card__meta { display: flex; gap: 8px; margin-bottom: 8px; font-size: .72rem; color: var(--ink-500); letter-spacing: .04em; }
.guide-card__meta .chip { background: rgba(10,31,68,.08); color: var(--navy-800); padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 600; }
.guide-card__body h4 { font-size: 1.05rem; margin: 0 0 8px; color: var(--ink-900); line-height: 1.3; }
.guide-card__body p { font-size: .9rem; color: var(--ink-500); margin: 0; flex: 1; }
.guide-card__read { margin-top: 12px; font-size: .82rem; color: var(--gold-500); font-weight: 600; }

/* Featured strip */
.featured-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .featured-grid { grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: 1fr; } }
.featured-grid .guide-card:first-child .guide-card__art { aspect-ratio: 16/10; }

/* Calendar strip */
.cal-strip { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cal-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cal-strip { grid-template-columns: repeat(3, 1fr); } }
.cal-item {
  display: flex; gap: 14px; padding: 16px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.cal-item__date {
  flex: 0 0 60px; height: 60px; border-radius: 12px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  color: #fff; display: grid; place-items: center; text-align: center;
}
.cal-item__date strong { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--gold-400); }
.cal-item__date small { font-size: .68rem; color: #c2cae0; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.cal-item__body h4 { font-size: .95rem; margin: 0 0 4px; color: var(--ink-900); }
.cal-item__body p { font-size: .82rem; color: var(--ink-500); margin: 0; }

/* Portals strip */
.portal-list { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .portal-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .portal-list { grid-template-columns: repeat(3, 1fr); } }
.portal-link {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none !important; transition: border-color .2s, transform .2s var(--ease);
}
.portal-link:hover { border-color: rgba(201,169,97,.4); transform: translateX(3px); }
.portal-link__icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; background: var(--bg-soft); display: grid; place-items: center; color: var(--navy-700); }
.portal-link__body { flex: 1; min-width: 0; }
.portal-link__body strong { display: block; font-size: .95rem; color: var(--navy-900); }
.portal-link__body span { display: block; font-size: .8rem; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Quick actions */
.quick-actions { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 36px 0; }
@media (min-width: 600px) { .quick-actions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .quick-actions { grid-template-columns: repeat(4, 1fr); } }
.quick-card {
  display: flex; align-items: center; gap: 14px; padding: 20px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff; border-radius: var(--radius-md);
  text-decoration: none !important; transition: transform .25s var(--ease), box-shadow .25s;
}
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.quick-card__icon {
  flex: 0 0 42px; height: 42px; border-radius: 10px;
  background: var(--gold-500); color: var(--navy-900);
  display: grid; place-items: center;
}
.quick-card__icon .ico { width: 22px; height: 22px; }
.quick-card__body strong { display: block; font-size: 1rem; color: #fff; }
.quick-card__body span { display: block; font-size: .8rem; color: var(--gold-300); margin-top: 2px; }

/* Hide rule for filtering */
.is-filtered-out { display: none !important; }
.no-results { padding: 40px; text-align: center; color: var(--ink-500); }
.no-results.is-visible + .guide-grid:empty,
.no-results:not(.is-visible) { display: none; }

/* ============================================================
   MOBILE OPTIMISATIONS
   Tighter spacing, scrollable chips & tables, smaller hero on
   small screens. Keeps content readable, avoids horizontal overflow.
   ============================================================ */

@media (max-width: 720px) {
  /* Hub hero — tighter padding so chips don't push content way down */
  .hub-hero { padding: 48px 0 36px; }
  .hub-hero h1 { font-size: 1.7rem; line-height: 1.2; margin-bottom: 10px; }
  .hub-hero p { font-size: .95rem; margin-bottom: 20px; }
  .hub-hero__inner .hero__pill { font-size: .72rem; padding: 6px 12px; }

  /* Hub controls — tighter card, vertical stack handled by base */
  .hub-controls { padding: 12px; gap: 10px; border-radius: var(--radius-md); }
  .hub-search input { padding: 11px 14px 11px 40px; font-size: .92rem; }

  /* Category chips → horizontally scrollable strip (cleaner than wrap) */
  .cat-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px;
    margin: 0 -4px;
    scroll-snap-type: x proximity;
  }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    font-size: .8rem;
    padding: 7px 12px;
  }

  /* Quick actions — pull less negative-margin on mobile */
  .quick-actions { margin: 18px 0 28px; gap: 10px; }
  .quick-card { padding: 14px 16px; gap: 12px; }
  .quick-card__icon { flex: 0 0 36px; height: 36px; }
  .quick-card__body strong { font-size: .94rem; }
  .quick-card__body span { font-size: .74rem; }

  /* Section heads inside hub — tighter */
  section.section .section-head { margin-bottom: 22px; }

  /* Article header — tighter on mobile */
  .article-header { padding: 44px 0 28px; }
  .article-header h1 { font-size: clamp(1.5rem, 6vw, 1.95rem); line-height: 1.22; }
  .article-header .lede { font-size: .95rem; line-height: 1.55; }
  .article-meta { font-size: .72rem; gap: 6px; }
  .article-meta .chip { padding: 3px 8px; }
  .breadcrumb { font-size: .75rem; margin-bottom: 10px; }

  /* Article body — tighter padding & line height */
  .article-body p, .article-body li { font-size: .98rem; line-height: 1.7; }
  .article-body h2 { font-size: 1.3rem; margin-top: 1.6em; }
  .article-body h3 { font-size: 1.05rem; }

  /* TL;DR — tighter padding */
  .tldr { padding: 16px 18px; margin-bottom: 26px; border-radius: var(--radius-sm); }
  .tldr__title { font-size: .72rem; letter-spacing: .12em; margin-bottom: 10px; }
  .tldr ul { padding-left: 18px; }
  .tldr li { font-size: .92rem; }

  /* Callouts — tighter on mobile */
  .callout { padding: 14px 16px; gap: 10px; margin: 18px 0; }
  .callout__icon { flex: 0 0 30px; height: 30px; font-size: 1rem; border-radius: 8px; }
  .callout__body { font-size: .92rem; }
  .callout__body strong { font-size: .78rem; }

  /* Pull quote — tighter */
  .pull-quote { padding: 20px 22px; margin: 26px 0; border-radius: var(--radius-md); }
  .pull-quote::before { font-size: 5rem; top: -8px; left: 14px; }
  .pull-quote p { font-size: 1.02rem; line-height: 1.45; }

  /* Data tables — allow horizontal scroll to prevent overflow */
  .article-body .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
    font-size: .85rem;
    /* faint right edge as a scroll hint */
    background-image: linear-gradient(to right, transparent 90%, rgba(10,31,68,.05));
    background-attachment: local, scroll;
    background-repeat: no-repeat;
    background-size: 100% 100%, 24px 100%;
    background-position: 0 0, 100% 0;
  }
  .article-body .data-table th, .article-body .data-table td { padding: 10px 12px; }

  /* Steps — smaller numbered circle on mobile */
  .steps > li { grid-template-columns: 36px 1fr; gap: 4px 12px; padding: 16px 0; }
  .steps > li::before { width: 36px; height: 36px; font-size: .95rem; }
  .steps > li h3 { font-size: 1rem; }
  .steps > li p { font-size: .94rem; }
  .steps > li ul, .steps > li ol { font-size: .92rem; padding-left: 18px; }

  /* Mermaid wrap — full-bleed-ish on mobile so diagrams have room to breathe */
  .mermaid-wrap {
    padding: 14px 8px;
    margin: 22px -4px;
    border-radius: var(--radius-sm);
  }
  /* Don't shrink the SVG below a usable size — better to allow horizontal
     scroll for complex diagrams than render them at 200px wide. */
  .mermaid-wrap .mermaid svg,
  .mermaid-wrap > .mermaid > svg {
    min-width: 280px;
  }

  /* Checklist items — tighter */
  .checklist li { padding: 10px 14px; font-size: .92rem; }

  /* Next-up card — tighter */
  .next-up { padding: 14px 16px; gap: 12px; margin: 20px 0; }
  .next-up__icon { flex: 0 0 32px; width: 32px; height: 32px; }
  .next-up__label { font-size: .65rem; }
  .next-up__title { font-size: .92rem; }

  /* Related guides — tighter */
  .related { margin-top: 40px; padding-top: 30px; }
  .related h3 { font-size: 1.2rem; margin-bottom: 18px; }
  .related__card { padding: 16px; }
  .related__card h4 { font-size: .98rem; }
  .related__card p { font-size: .85rem; }

  /* Compliance calendar items — tighter */
  .cal-item { padding: 12px 14px; gap: 12px; }
  .cal-item__date { flex: 0 0 52px; height: 52px; }
  .cal-item__date strong { font-size: 1.2rem; }
  .cal-item__date small { font-size: .62rem; }
  .cal-item__body h4 { font-size: .92rem; }
  .cal-item__body p { font-size: .78rem; }

  /* Portal links — tighter */
  .portal-link { padding: 12px 14px; }
  .portal-link__icon { flex: 0 0 32px; width: 32px; height: 32px; }
  .portal-link__body strong { font-size: .9rem; }
  .portal-link__body span { font-size: .74rem; }

  /* Guide cards — tighter on mobile, slightly smaller art aspect */
  .guide-grid { gap: 14px; }
  .guide-card__art { aspect-ratio: 16/8; }
  .guide-card__art svg { width: 46px; height: 46px; }
  .guide-card__body { padding: 14px 16px; }
  .guide-card__body h4 { font-size: 1rem; }
  .guide-card__body p { font-size: .86rem; }
  .guide-card__meta { font-size: .68rem; }
  .guide-card__meta .chip { font-size: .62rem; padding: 2px 7px; }
  .guide-card__read { font-size: .78rem; }

  /* Featured grid — single column on mobile, first card hero-sized */
  .featured-grid { gap: 14px; }
  .featured-grid .guide-card:first-child .guide-card__art { aspect-ratio: 16/9; }

  /* Helpful bar — tighter */
  .helpful { padding: 18px; }
  .helpful p { font-size: .9rem; }
  .helpful .btn-helpful { font-size: .82rem; padding: 7px 14px; margin: 4px 4px; }
}

/* Extra-small phones (≤ 400px) */
@media (max-width: 400px) {
  .hub-hero h1 { font-size: 1.5rem; }
  .article-header h1 { font-size: 1.45rem; }
  .article-body h2 { font-size: 1.2rem; }
  .tldr { padding: 14px 14px; }
  .callout { padding: 12px 14px; }
  .quick-card__body strong { font-size: .9rem; }
}

/* Prevent any wide content (long URLs, code, etc.) from breaking layout */
.article-body { word-wrap: break-word; overflow-wrap: break-word; }
.article-body a { word-break: break-word; }

/* Ensure SVG illustrations / Mermaid never overflow on any screen */
.article-body img, .article-body svg:not(.ico), .hero-svg svg { max-width: 100%; height: auto; }

/* ============================================================
   ENGAGING ARTICLE SYSTEM — story-driven, illustrated, mobile-first
   New components used by reworked guides. Built mobile-first; tablet
   and desktop layouts layered via min-width queries.
   ============================================================ */

/* ---- Hero illustration block (replaces dark text-only article-header) ---- */
.hero-illust {
  background: linear-gradient(165deg, #fbf6e9 0%, #f0e9d5 60%, #e6dec3 100%);
  padding: 28px var(--gutter) 24px;
  position: relative;
  overflow: hidden;
}
.hero-illust__inner { max-width: 820px; margin: 0 auto; position: relative; }
.hero-illust__breadcrumb { font-size: .78rem; color: var(--ink-500); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.hero-illust__breadcrumb a { color: var(--ink-500); }
.hero-illust__breadcrumb a:hover { color: var(--navy-800); }
.hero-illust__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: .76rem; color: var(--ink-500); align-items: center; }
.hero-illust__meta .chip { background: var(--navy-800); color: var(--gold-400); padding: 4px 10px; border-radius: 999px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; }
.hero-illust h1 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 6.8vw, 2.4rem);
  color: var(--navy-900);
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -.015em;
}
.hero-illust .lede {
  font-size: clamp(.98rem, 3.4vw, 1.12rem);
  color: var(--ink-700);
  line-height: 1.5;
  margin: 0 0 20px;
  max-width: 580px;
}
.hero-illust__art {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 380px;
  height: auto;
}
@media (min-width: 720px) {
  .hero-illust { padding: 44px var(--gutter); }
  .hero-illust__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
  .hero-illust__text { order: 1; }
  .hero-illust__art-wrap { order: 2; }
  .hero-illust__art { max-width: 100%; }
}

/* ---- Story opener — named-character scenario card ---- */
.story-opener {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-md);
  padding: 18px 18px;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(10,31,68,.04);
}
.story-opener__avatar {
  width: 56px; height: 56px; border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-800), var(--gold-500));
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(10,31,68,.18);
}
.story-opener__body p { margin: 0 0 8px; font-size: .98rem; color: var(--ink-700); line-height: 1.6; }
.story-opener__body p:last-child { margin-bottom: 0; }
.story-opener__body p strong { color: var(--navy-900); }
.story-opener__name { font-weight: 700; color: var(--navy-900); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
@media (min-width: 600px) {
  .story-opener { flex-direction: row; align-items: flex-start; padding: 22px 24px; gap: 18px; }
  .story-opener__avatar { width: 64px; height: 64px; font-size: 1.6rem; }
}

/* ---- Inline scene — illustration that breaks up text ---- */
.scene {
  margin: 32px 0;
  display: grid;
  gap: 16px;
}
.scene__art {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.scene__caption {
  text-align: center;
  font-size: .88rem;
  color: var(--ink-500);
  margin: 0;
  font-style: italic;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 720px) {
  .scene--side {
    grid-template-columns: 1fr 280px;
    align-items: center;
    gap: 28px;
  }
  .scene--side .scene__art { max-width: 100%; }
  .scene--side .scene__caption { text-align: left; margin: 0; }
}

/* ---- Compare cards — replaces dense tables for option comparisons ---- */
.compare-cards {
  display: grid;
  gap: 14px;
  margin: 24px 0 32px;
  grid-template-columns: 1fr;
}
.compare-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color .2s, transform .2s var(--ease);
}
.compare-card:hover { border-color: rgba(201,169,97,.45); transform: translateY(-2px); }
.compare-card--pick { border-color: var(--gold-500); background: linear-gradient(180deg, #fff, #fbf6e9); }
.compare-card--pick::after {
  content: 'Most picked'; position: absolute; top: -10px; right: 14px;
  background: var(--gold-500); color: var(--navy-900); font-size: .68rem;
  font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase;
}
.compare-card__head { display: flex; align-items: center; gap: 12px; }
.compare-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  display: grid; place-items: center; color: var(--gold-400);
  flex-shrink: 0;
}
.compare-card__icon svg { width: 22px; height: 22px; }
.compare-card--pick .compare-card__icon { background: linear-gradient(135deg, var(--gold-500), #d8bd7c); color: var(--navy-900); }
.compare-card__name { font-family: var(--font-display); font-size: 1.18rem; color: var(--navy-900); margin: 0; line-height: 1.2; }
.compare-card__tagline { font-size: .82rem; color: var(--ink-500); margin: 2px 0 0; }
.compare-card__traits { display: flex; flex-wrap: wrap; gap: 6px; }
.compare-card__trait {
  font-size: .76rem; padding: 5px 10px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-700); font-weight: 500;
}
.compare-card__trait--yes { background: rgba(31,157,85,.12); color: #126b3b; }
.compare-card__trait--no { background: rgba(217, 119, 6, .12); color: #8a4b06; }
.compare-card__verdict { font-size: .9rem; color: var(--ink-700); line-height: 1.55; margin: 4px 0 0; }
.compare-card__verdict strong { color: var(--navy-900); }
@media (min-width: 600px) {
  .compare-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .compare-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .compare-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .compare-cards--5 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- viz-flow — friendly hand-drawn-style process flow (replaces simple mermaid) ---- */
.viz-flow {
  margin: 28px 0;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.viz-step {
  display: flex; gap: 14px; align-items: center;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px;
  position: relative;
}
.viz-step__num {
  width: 38px; height: 38px; border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: var(--gold-400);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  flex-shrink: 0;
}
.viz-step__body { flex: 1; min-width: 0; }
.viz-step__title { display: block; font-weight: 600; color: var(--navy-900); font-size: .98rem; }
.viz-step__sub { display: block; font-size: .82rem; color: var(--ink-500); margin-top: 2px; }
.viz-flow .viz-step:not(:last-child)::after {
  content: '↓'; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  color: var(--gold-500); font-size: 1.4rem; font-weight: 700; line-height: 1;
  text-shadow: 0 0 0 #fff;
}
.viz-flow:has(.viz-step) { padding-bottom: 8px; }
@media (min-width: 800px) {
  .viz-flow--horizontal { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; }
  .viz-flow--horizontal .viz-step { flex-direction: column; text-align: center; padding: 18px 14px; gap: 10px; }
  .viz-flow--horizontal .viz-step:not(:last-child)::after {
    content: '→'; left: auto; right: -22px; top: 50%; bottom: auto;
    transform: translateY(-50%);
  }
}

/* ---- viz-decision — friendly decision tree (replaces mermaid decision trees) ---- */
.viz-decision {
  margin: 28px 0;
  background: linear-gradient(180deg, #fff, var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
}
.viz-decision__q {
  background: var(--navy-900); color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 600;
  font-size: .98rem;
  margin: 0 0 16px;
  text-align: center;
}
.viz-decision__branches {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
.viz-branch {
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 14px 16px;
  display: grid; gap: 6px;
}
.viz-branch__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--navy-800);
}
.viz-branch--yes .viz-branch__label { color: var(--success); }
.viz-branch--no .viz-branch__label { color: #c2680a; }
.viz-branch--yes { border-color: rgba(31,157,85,.35); }
.viz-branch--no { border-color: rgba(217,119,6,.35); }
.viz-branch__outcome { font-size: .94rem; color: var(--ink-700); line-height: 1.5; margin: 0; }
.viz-branch__outcome strong { color: var(--navy-900); }
@media (min-width: 600px) {
  .viz-decision__branches { grid-template-columns: 1fr 1fr; }
}

/* ---- sticky-note — friendlier callout, slight rotation, papery ---- */
.sticky-note {
  position: relative;
  background: linear-gradient(180deg, #fff8dc 0%, #f5ecc0 100%);
  border: 1px solid rgba(201,169,97,.4);
  border-radius: 4px;
  padding: 16px 18px;
  margin: 24px auto;
  max-width: 100%;
  box-shadow: 0 6px 14px rgba(10,31,68,.08), 0 1px 0 rgba(255,255,255,.6) inset;
  transform: rotate(-.4deg);
  transition: transform .2s var(--ease);
}
.sticky-note:hover { transform: rotate(0); }
.sticky-note:nth-of-type(even) { transform: rotate(.5deg); }
.sticky-note:nth-of-type(even):hover { transform: rotate(0); }
.sticky-note__label {
  display: inline-block; font-size: .72rem; font-weight: 700;
  color: #946e2c; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 6px;
}
.sticky-note p { margin: 0; font-size: .95rem; color: var(--ink-700); line-height: 1.55; }
.sticky-note p + p { margin-top: 8px; }

/* ---- cost-strip — visual cost summary ---- */
.cost-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin: 24px 0;
}
.cost-pill {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px;
}
.cost-pill__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(201,169,97,.18), rgba(201,169,97,.32));
  color: #946e2c;
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem;
  flex-shrink: 0;
}
.cost-pill__body { flex: 1; min-width: 0; }
.cost-pill__label { display: block; font-size: .78rem; color: var(--ink-500); }
.cost-pill__amount { display: block; font-size: 1.05rem; font-weight: 700; color: var(--navy-900); margin-top: 2px; }
.cost-pill__sub { font-size: .76rem; color: var(--ink-500); margin-top: 2px; display: block; }
@media (min-width: 600px) { .cost-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cost-strip--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- character-quote — pull quote attributed to scenario character ---- */
.character-quote {
  margin: 32px 0;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.character-quote::before {
  content: '"'; position: absolute; top: -6px; left: 16px;
  font-family: var(--font-display); font-size: 6rem;
  color: var(--gold-500); opacity: .3; line-height: 1;
}
.character-quote p {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  line-height: 1.5;
  color: #fff; margin: 0;
  position: relative;
}
.character-quote footer {
  margin-top: 12px;
  font-style: normal;
  font-size: .82rem;
  color: var(--gold-300);
  position: relative;
}

/* ---- conversational body adjustments — tighter, friendlier ----
   Scoped via > (direct children only) so we don't break nested
   paragraphs inside .character-quote, .cta-strip, .story-opener,
   .sticky-note, .compare-card, .cost-pill, etc. — those components
   own their own paragraph styling. */
.article-body--story { padding-top: 0; }
.article-body--story > h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.4vw, 1.7rem);
  margin-top: 1.8em;
  color: var(--navy-900);
  line-height: 1.25;
}
.article-body--story > h2:first-of-type { margin-top: 1.2em; }
.article-body--story > h3 { color: var(--navy-900); font-size: 1.1rem; margin-top: 1.4em; }
.article-body--story > p { font-size: 1.02rem; line-height: 1.72; color: var(--ink-700); }
.article-body--story > p strong { color: var(--navy-900); }
.article-body--story > p:first-of-type::first-line { font-weight: 500; }
.article-body--story > ul, .article-body--story > ol { font-size: 1.02rem; line-height: 1.72; color: var(--ink-700); }
.article-body--story > ul > li, .article-body--story > ol > li { margin-bottom: 6px; }

/* Friendlier inline emphasis on long-form prose */
.article-body--story em { color: var(--navy-700); font-style: italic; }

/* Belt-and-braces: explicit colors on dark-bg components in case
   any selector tries to win specificity against them */
.character-quote p { color: #fff; }
.character-quote footer { color: var(--gold-300); }
.article-body--story .cta-strip h2 { color: #fff; }
.article-body--story .cta-strip p { color: #c2cae0; }
.article-body--story .character-quote p { color: #fff; }

/* ---- Reusable inline-SVG illustration sizing ---- */
.illust-svg { width: 100%; height: auto; display: block; max-width: 100%; }

/* ---- Story-mode mobile polish ---- */
@media (max-width: 720px) {
  .hero-illust { padding: 24px var(--gutter) 22px; }
  .hero-illust h1 { font-size: 1.55rem; line-height: 1.18; }
  .hero-illust .lede { font-size: .95rem; }
  .hero-illust__art { max-width: 280px; }

  .story-opener { padding: 16px; gap: 12px; margin-bottom: 22px; }
  .story-opener__avatar { width: 48px; height: 48px; font-size: 1.2rem; }
  .story-opener__body p { font-size: .94rem; }

  .scene { margin: 24px 0; gap: 12px; }
  .scene__art { max-width: 260px; }
  .scene__caption { font-size: .82rem; }

  .compare-cards { gap: 12px; }
  .compare-card { padding: 14px 14px 16px; gap: 10px; }
  .compare-card__icon { width: 38px; height: 38px; }
  .compare-card__icon svg { width: 18px; height: 18px; }
  .compare-card__name { font-size: 1.05rem; }

  .viz-flow { gap: 10px; }
  .viz-step { padding: 12px 14px; gap: 12px; }
  .viz-step__num { width: 32px; height: 32px; font-size: .92rem; }
  .viz-step__title { font-size: .92rem; }
  .viz-step__sub { font-size: .76rem; }

  .viz-decision { padding: 14px; }
  .viz-decision__q { font-size: .92rem; padding: 12px 14px; margin-bottom: 12px; }

  .sticky-note { padding: 14px 16px; margin: 18px auto; }
  .sticky-note p { font-size: .92rem; }

  .cost-pill { padding: 12px 14px; }
  .cost-pill__icon { width: 36px; height: 36px; }

  .character-quote { padding: 18px 20px; margin: 24px 0; }
  .character-quote::before { font-size: 4.5rem; top: -2px; left: 10px; }
  .character-quote p { font-size: 1.02rem; }

  .article-body--story h2 { font-size: 1.25rem; margin-top: 1.6em; }
  .article-body--story p { font-size: .98rem; line-height: 1.7; }
}

/* ============================================================
   Document checklist — icon + tickable, alignment-safe.
   Layout per row: [tick] [icon chip] [text body]. The body is a
   SINGLE grid child, so any number of <strong>s inside it stay
   inline and never split into columns (the .checklist flex bug).
   ============================================================ */
.doc-check { list-style: none; padding: 0; margin: 16px 0 28px; display: grid; gap: 10px; }
.doc-check li {
  display: grid;
  grid-template-columns: 22px 44px 1fr;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.doc-check li:hover { border-color: rgba(201,169,97,.5); transform: translateY(-1px); }
.doc-check li::before {
  content: '';
  width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid var(--ink-300);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E");
  background-size: 0 0; background-position: center; background-repeat: no-repeat;
  transition: background-size .18s, border-color .18s, background-color .18s;
}
.doc-check li.is-checked { background: #f5fbf7; border-color: rgba(31,157,85,.4); }
.doc-check li.is-checked::before { background-color: var(--success); border-color: var(--success); background-size: 15px 15px; }
.doc-check__ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--bg-soft); color: var(--navy-700);
  display: grid; place-items: center;
}
.doc-check__ico svg { width: 22px; height: 22px; }
.doc-check li.is-checked .doc-check__ico { background: rgba(31,157,85,.12); color: #126b3b; }
.doc-check__body { min-width: 0; line-height: 1.55; color: var(--ink-700); font-size: .95rem; }
.doc-check__body strong { color: var(--navy-900); }

@media (max-width: 720px) {
  .doc-check li { grid-template-columns: 20px 38px 1fr; gap: 11px; padding: 11px 13px; }
  .doc-check li::before { width: 20px; height: 20px; }
  .doc-check__ico { width: 38px; height: 38px; border-radius: 10px; }
  .doc-check__ico svg { width: 19px; height: 19px; }
  .doc-check__body { font-size: .9rem; }
}