/* ─────────────────────────────────────────────────────────────────────────
   LimaxLock blog article template
   Route-scoped stylesheet for /blog and /blog/[slug] only (see app/blog/layout.tsx
   - same pattern as app/[slug]/page.tsx's getRouteStyles). Built entirely from
   the tokens/scale defined in limaxlock-home.css (:root) and documented in
   documents/theme.md - no new colors, radii or shadows are introduced here.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.ll-blog-crumbs { max-width: none; margin: 0; padding: 0 0 6px; }
.ll-blog-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.ll-blog-crumbs li { display: flex; align-items: center; }
.ll-blog-crumbs a {
  font-family: var(--ll-font-ui);
  font-size: 13px;
  color: var(--slate-500);
  text-decoration: none;
}
.ll-blog-crumbs a:hover { color: var(--brand-600); text-decoration: underline; }
.ll-blog-crumbs span[aria-current="page"] {
  font-family: var(--ll-font-ui);
  font-size: 13px;
  color: var(--slate-500);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-blog-crumbs__sep { margin: 0 8px; color: var(--slate-300); font-size: 12px; }

/* ── Hero (in-column: sits inside .ll-article__main, not full-width) ───────── */
.ll-blog-hero { padding: 0; }
.ll-blog-hero__inner {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.ll-blog-hero__eyebrow {
  display: inline-block;
  font-family: var(--ll-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-600);
  text-decoration: none;
  margin-bottom: 18px;
}
a.ll-blog-hero__eyebrow:hover { color: var(--brand-700); }

.ll-blog-hero__title {
  font-family: var(--ll-font-heading);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 0 0 18px;
}

.ll-blog-hero__desc {
  font-family: var(--ll-font-body);
  font-size: 19px;
  line-height: 1.6;
  color: var(--slate-600);
  margin: 0 0 24px;
  max-width: 68ch;
}

.ll-blog-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--ll-font-ui);
  font-size: 13.5px;
  color: var(--slate-500);
  margin-bottom: 20px;
}
.ll-blog-hero__dot { color: var(--slate-300); }
.ll-blog-hero__byline { font-weight: 600; color: var(--slate-600); text-decoration: none; }
a.ll-blog-hero__byline:hover { color: var(--brand-600); }

.ll-blog-share { display: flex; align-items: center; gap: 8px; position: relative; margin-bottom: 24px; }
.ll-blog-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-500);
  cursor: pointer;
  transition: border-color 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out;
}
.ll-blog-share__btn svg { width: 16px; height: 16px; }
.ll-blog-share__btn:hover { border-color: var(--brand-300); color: var(--brand-600); background: var(--brand-50); }
.ll-blog-share__copied {
  font-family: var(--ll-font-ui);
  font-size: 12.5px;
  color: var(--brand-700);
  font-weight: 600;
}

.ll-blog-hero__media {
  max-width: none;
  margin: 22px 0 4px;
  padding: 0;
}
.ll-blog-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  /* When a low-resolution source caps max-width (see BlogHero's safeMaxWidthPx),
     center the smaller image in the column instead of letting it hug the left
     edge - a no-op whenever max-width isn't set (the default, uncapped case). */
  margin-inline: auto;
}

/* ── Two-column article layout (Leadpages-style) ──────────────────────────── */
/* A wide reading column + a single sticky rail. The old permanent left TOC
   rail is gone - the TOC now lives in-column (.ll-toc-inline). Sticky is on the
   rail WRAPPER (.ll-article__rail), never its children; no ancestor of the rail
   sets overflow/transform/constrained-height (audited across style.css +
   limaxlock-home.css), so sticky resolves against the viewport as intended. */
.ll-article {
  /* Cap the editorial composition (reading column + rail) so the two stay
     visually coupled on large monitors, independent of the shared --ll-shell
     token, which widens to 1400/1520px for the full-width marketing sections.
     Tracks sum to ~1124px, centered inside this cap. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px var(--ll-shell-pad) 0;
  display: grid;
  grid-template-columns: minmax(0, 780px) 288px;
  justify-content: center;
  gap: 56px;
  align-items: start;
}
.ll-article__main { min-width: 0; }
.ll-article__rail {
  position: sticky;
  top: 88px;
  align-self: start;
  height: fit-content;
}

@media (max-width: 1023px) {
  .ll-article { grid-template-columns: minmax(0, 780px); justify-content: center; }
  .ll-article__rail { display: none; }
}

/* ── In-column table of contents (numbered) ──────────────────────────────── */
/* Sits in the main column right after the hero - a compact numbered index, not
   a sticky side rail. Keeps the scroll-spy active highlight. */
.ll-toc-inline {
  margin: 28px 0 36px;
  padding: 22px 26px 24px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  background: var(--slate-50);
}
.ll-toc-inline__title {
  margin: 0 0 14px;
  font-family: var(--ll-font-ui);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.ll-toc-inline__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ll-toc-inline__item--sub { margin-left: 34px; }
.ll-toc-inline__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--ll-font-body);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--slate-600);
  text-decoration: none;
  transition: background 0.15s ease-out, color 0.15s ease-out;
}
.ll-toc-inline__link:hover { background: #fff; color: var(--slate-900); }
.ll-toc-inline__link.is-active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.ll-toc-inline__num {
  flex: none;
  width: 22px;
  font-family: var(--ll-font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-500);
}
.ll-toc-inline__item--sub .ll-toc-inline__text { color: var(--slate-500); font-size: 14.5px; }

/* ── Sticky rail: compact CTA ─────────────────────────────────────────────── */
.ll-rail-cta {
  padding: 24px 22px;
  border-radius: var(--radius-card);
  background: var(--ink-900);
}
.ll-rail-cta__label {
  display: inline-block;
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: 12px;
}
.ll-rail-cta__title {
  margin: 0 0 8px;
  font-family: var(--ll-font-heading);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
  color: #fff;
}
.ll-rail-cta__text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-text, var(--slate-200));
}
.ll-rail-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border-radius: var(--radius-control);
  background: var(--brand-600);
  color: #fff;
  font-family: var(--ll-font-ui);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease-out;
}
.ll-rail-cta__btn:hover { background: var(--brand-500); }
.ll-rail-cta__btn svg { width: 16px; height: 16px; }

/* ── Sticky rail: related guides ──────────────────────────────────────────── */
.ll-rail-related { margin-top: 32px; }
.ll-rail-related__title {
  margin: 0 0 16px;
  font-family: var(--ll-font-ui);
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.ll-rail-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ll-rail-guide { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; }
.ll-rail-guide__media {
  flex: none;
  width: 72px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--slate-100);
}
.ll-rail-guide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-rail-guide__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ll-rail-guide__title {
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--slate-900);
  transition: color 0.15s ease-out;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ll-rail-guide:hover .ll-rail-guide__title { color: var(--brand-600); }
.ll-rail-guide__meta { font-family: var(--ll-font-ui); font-size: 12.5px; color: var(--slate-500); }

/* ── Sticky rail: up-links (product page + topic hub) ─────────────────────── */
.ll-rail-links { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--slate-200); display: grid; gap: 12px; }
.ll-rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--ll-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-600);
  text-decoration: none;
  transition: color 0.15s ease-out;
}
.ll-rail-link svg { flex: none; width: 15px; height: 15px; color: var(--slate-300); transition: transform 0.15s ease-out, color 0.15s ease-out; }
.ll-rail-link:hover { color: var(--brand-600); }
.ll-rail-link:hover svg { color: var(--brand-600); transform: translateX(2px); }

/* ── Article typography ───────────────────────────────────────────────────── */
.ll-blog-article {
  font-family: var(--ll-font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--slate-600);
}
.ll-blog-article h2 {
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.25;
  color: var(--slate-900);
  margin: 52px 0 20px;
  scroll-margin-top: 100px;
}
.ll-blog-article h2:first-child { margin-top: 0; }
.ll-blog-article h3 {
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: var(--slate-900);
  margin: 40px 0 16px;
  scroll-margin-top: 100px;
}
.ll-blog-article h4 {
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: var(--slate-900);
  margin: 32px 0 14px;
}
.ll-blog-article p { margin: 0 0 24px; }
.ll-blog-article p:last-child { margin-bottom: 0; }
.ll-blog-article strong { color: var(--slate-900); font-weight: 700; }
.ll-blog-article em { font-style: italic; }
/* Exclude button-styled anchors (e.g. the injected contextual ProductCTA) so
   the generic prose-link color (specificity 0,1,1) can't override .ll-btn-*
   (0,1,0) and paint teal text on the teal fill - it left the primary button
   text near-invisible. Real prose links (no class) still get the brand color. */
.ll-blog-article a:not([class*="ll-btn"]) { color: var(--brand-600); text-decoration: none; }
.ll-blog-article a:not([class*="ll-btn"]):hover { color: var(--brand-700); text-decoration: underline; }

.ll-blog-article ul,
.ll-blog-article ol {
  margin: 0 0 24px;
  padding-left: 26px;
}
.ll-blog-article li { margin: 0 0 10px; }
.ll-blog-article li:last-child { margin-bottom: 0; }
.ll-blog-article li > ul,
.ll-blog-article li > ol { margin-top: 10px; margin-bottom: 0; }
.ll-blog-article li > p { margin-bottom: 10px; }

.ll-blog-article blockquote {
  margin: 32px 0;
  padding: 20px 24px;
  border-left: 3px solid var(--brand-600);
  background: var(--brand-50);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  color: var(--slate-700, var(--slate-600));
  font-size: 18px;
  font-style: italic;
}
.ll-blog-article blockquote p { margin-bottom: 0; }
.ll-blog-article blockquote p + p { margin-top: 14px; }

.ll-blog-article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--slate-100);
  color: var(--brand-800);
  padding: 2px 6px;
  border-radius: 6px;
}
.ll-blog-article pre {
  margin: 28px 0;
  padding: 20px 22px;
  background: var(--ink-900);
  border-radius: var(--radius-card);
  overflow-x: auto;
}
.ll-blog-article pre code {
  background: none;
  color: #fff;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
}

.ll-blog-article hr {
  border: 0;
  border-top: 1px solid var(--slate-200);
  margin: 40px 0;
}

/* ── Figures / images ─────────────────────────────────────────────────────── */
.ll-blog-figure { margin: 36px 0; }
.ll-blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.ll-blog-figure figcaption {
  margin-top: 10px;
  font-family: var(--ll-font-ui);
  font-size: 13.5px;
  color: var(--slate-500);
  text-align: center;
}
/* Escape hatch for dashboard screenshots etc: break out of the 760px reading
   column up to the full article-grid width (still capped, never edge-to-edge). */
.ll-blog-figure--wide {
  width: 100vw;
  max-width: 960px;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ── Pull-quote (<Quote>) ─────────────────────────────────────────────────── */
.ll-blog-quote {
  margin: 40px 0;
  padding: 6px 0 6px 28px;
  border-left: 3px solid var(--brand-600);
}
.ll-blog-quote__text {
  margin: 0;
  font-family: var(--ll-font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  color: var(--slate-900);
}
.ll-blog-quote__text p { margin: 0 0 12px; }
.ll-blog-quote__text p:last-child { margin-bottom: 0; }
.ll-blog-quote__cite { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.ll-blog-quote__author { font-family: var(--ll-font-ui); font-size: 14.5px; font-weight: 700; color: var(--slate-900); }
.ll-blog-quote__role { font-family: var(--ll-font-ui); font-size: 13.5px; color: var(--slate-500); }

/* ── Product screenshot (<ProductScreenshot>) ─────────────────────────────── */
.ll-blog-shot { margin: 36px 0; }
.ll-blog-shot--wide { width: 100vw; max-width: 960px; margin-left: 50%; transform: translateX(-50%); }
.ll-blog-shot__step {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--ll-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  padding: 4px 12px;
  border-radius: 999px;
}
.ll-blog-shot__frame {
  display: block;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.ll-blog-shot__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}
.ll-blog-shot__bar i { width: 10px; height: 10px; border-radius: 999px; background: var(--slate-300); }
.ll-blog-shot__frame img { display: block; width: 100%; height: auto; }
.ll-blog-shot__caption { margin-top: 12px; font-family: var(--ll-font-ui); font-size: 13.5px; color: var(--slate-500); text-align: center; }

/* ── Tables (Markdown tables + <ComparisonTable>) ─────────────────────────── */
.ll-blog-table__wrap {
  margin: 32px 0;
  overflow-x: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
}
.ll-blog-table { width: 100%; border-collapse: collapse; font-family: var(--ll-font-body); font-size: 15px; }
.ll-blog-table caption {
  caption-side: top;
  text-align: left;
  padding: 14px 18px 0;
  font-family: var(--ll-font-ui);
  font-size: 13px;
  color: var(--slate-500);
}
.ll-blog-table th,
.ll-blog-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--slate-200); }
.ll-blog-table thead th {
  background: var(--slate-50);
  font-family: var(--ll-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--slate-500);
  white-space: nowrap;
}
.ll-blog-table thead th.is-brand { color: var(--brand-700); }
.ll-blog-table tbody th { font-weight: 600; color: var(--slate-900); white-space: nowrap; }
.ll-blog-table td.is-brand { background: var(--brand-50); }
.ll-blog-table tbody tr:last-child th,
.ll-blog-table tbody tr:last-child td { border-bottom: 0; }
.ll-blog-table__yes { color: var(--success); }
.ll-blog-table__yes svg { width: 18px; height: 18px; }
.ll-blog-table__no { color: var(--slate-300); font-weight: 700; }

/* ── Callouts: InfoBox / TipBox / WarningBox ──────────────────────────────── */
.ll-blog-callout {
  display: flex;
  gap: 14px;
  margin: 32px 0;
  padding: 20px 22px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
}
.ll-blog-callout__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.ll-blog-callout__icon svg { width: 22px; height: 22px; }
.ll-blog-callout__title { margin: 0 0 6px; font-family: var(--ll-font-heading); font-weight: 700; font-size: 16px; line-height: 1.4; }
.ll-blog-callout__text { font-size: 16px; line-height: 1.65; }
.ll-blog-callout__text > *:last-child { margin-bottom: 0; }

.ll-blog-callout--info { background: var(--brand-50); border-color: var(--brand-100); }
.ll-blog-callout--info .ll-blog-callout__icon { color: var(--brand-600); }
.ll-blog-callout--info .ll-blog-callout__title { color: var(--brand-800); }
.ll-blog-callout--info .ll-blog-callout__text { color: var(--brand-800); }

.ll-blog-callout--tip { background: var(--success-bg); border-color: #D1FAE5; }
.ll-blog-callout--tip .ll-blog-callout__icon { color: var(--success); }
.ll-blog-callout--tip .ll-blog-callout__title { color: var(--success-text); }
.ll-blog-callout--tip .ll-blog-callout__text { color: var(--success-text); }

.ll-blog-callout--warning { background: var(--warning-bg); border-color: #FDE68A; }
.ll-blog-callout--warning .ll-blog-callout__icon { color: var(--warning); }
.ll-blog-callout--warning .ll-blog-callout__title { color: var(--warning-text); }
.ll-blog-callout--warning .ll-blog-callout__text { color: var(--warning-text); }

/* ── Definition box ("X, in simple terms") ───────────────────────────────── */
.ll-blog-definition {
  margin: 32px 0;
  padding: 22px 24px;
  border: 1px solid var(--slate-200);
  border-left: 3px solid var(--brand-600);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--slate-50);
}
.ll-blog-definition__term {
  margin: 0 0 8px;
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--brand-700);
}
.ll-blog-definition__text { font-size: 16.5px; line-height: 1.65; color: var(--slate-700, var(--slate-600)); }
.ll-blog-definition__text > *:last-child { margin-bottom: 0; }
.ll-blog-definition__text a { color: var(--brand-600); text-decoration: underline; }

/* ── Checklist (inline checkmark list) ────────────────────────────────────── */
.ll-blog-checklist { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 12px; }
.ll-blog-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.55; color: var(--slate-600); }
.ll-blog-checklist li svg { flex: none; width: 19px; height: 19px; margin-top: 3px; color: var(--brand-600); }

/* ── Before/After flow comparison diagram ─────────────────────────────────── */
.ll-blog-beforeafter {
  margin: 32px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ll-blog-beforeafter__col {
  position: relative;
  padding: 22px 22px 20px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  background: #fff;
}
.ll-blog-beforeafter__vs {
  position: absolute;
  top: -13px;
  left: -13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ink-900);
  color: #fff;
  font-family: var(--ll-font-ui);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.ll-blog-beforeafter__title {
  margin: 0 0 14px;
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--slate-900);
}
.ll-blog-beforeafter__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ll-blog-beforeafter__col li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--slate-600); }
.ll-blog-beforeafter__icon { flex: none; display: flex; width: 18px; height: 18px; margin-top: 1px; }
.ll-blog-beforeafter__icon svg { width: 100%; height: 100%; }
.ll-blog-beforeafter__col li.is-ok .ll-blog-beforeafter__icon { color: var(--success); }
.ll-blog-beforeafter__col li.is-bad .ll-blog-beforeafter__icon { color: var(--slate-400); }
.ll-blog-beforeafter__col li.is-neutral .ll-blog-beforeafter__icon { color: var(--slate-400); }
@media (max-width: 640px) {
  .ll-blog-beforeafter { grid-template-columns: 1fr; }
  .ll-blog-beforeafter__vs { left: 22px; }
}

/* ── Key takeaways ─────────────────────────────────────────────────────────── */
.ll-blog-takeaways {
  margin: 8px 0 40px;
  padding: 26px 28px;
  border-radius: var(--radius-card);
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
}
.ll-blog-takeaways__title {
  margin: 0 0 14px;
  font-family: var(--ll-font-ui);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.ll-blog-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ll-blog-takeaways li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--slate-700, var(--slate-600)); }
.ll-blog-takeaways li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--success); }

/* ── Feature grid ──────────────────────────────────────────────────────────── */
.ll-blog-featuregrid {
  margin: 32px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ll-blog-featuregrid__item {
  padding: 20px 22px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
}
.ll-blog-featuregrid__item h4 { margin: 0 0 8px; font-family: var(--ll-font-heading); font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--slate-900); }
.ll-blog-featuregrid__item p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--slate-600); }
@media (max-width: 560px) { .ll-blog-featuregrid { grid-template-columns: 1fr; } }

/* ── Steps ─────────────────────────────────────────────────────────────────── */
.ll-blog-steps { list-style: none; margin: 32px 0; padding: 0; display: grid; gap: 22px; }
.ll-blog-steps__item { display: flex; gap: 16px; }
.ll-blog-steps__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  font-family: var(--ll-font-ui);
  font-size: 13px;
  font-weight: 700;
}
.ll-blog-steps__title { margin: 3px 0 4px; font-family: var(--ll-font-heading); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--slate-900); }
.ll-blog-steps__text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--slate-600); }

/* ── FAQ accordion ─────────────────────────────────────────────────────────── */
.ll-blog-faq { margin: 32px 0; border-top: 1px solid var(--slate-200); }
.ll-blog-faq__item { border-bottom: 1px solid var(--slate-200); }
.ll-blog-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--slate-900);
}
.ll-blog-faq__q svg { flex: none; width: 18px; height: 18px; color: var(--slate-400); transition: transform 0.15s ease-out; }
.ll-blog-faq__item.is-open .ll-blog-faq__q svg { transform: rotate(180deg); color: var(--brand-600); }
.ll-blog-faq__a { margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--slate-600); }

/* ── Product CTA (contextual, inline) ──────────────────────────────────────── */
.ll-blog-cta--contextual {
  margin: 36px 0;
  padding: 28px 30px;
  border-radius: var(--radius-card);
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.ll-blog-cta--contextual .ll-blog-cta__title { margin: 0 0 6px; font-family: var(--ll-font-heading); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--slate-900); }
.ll-blog-cta--contextual .ll-blog-cta__desc { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--slate-600); max-width: 60ch; }
.ll-blog-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.ll-blog-cta__note { width: 100%; margin: 10px 0 0; font-family: var(--ll-font-ui); font-size: 12.5px; color: var(--slate-500); }

/* ── Product CTA (primary, post-article) ───────────────────────────────────── */
.ll-blog-cta--primary {
  /* Post-article conversion band. Lives in the full-width lower flow (below the
     two-column grid), matching the same shell width as "Continue learning" so
     it reads as a full banner, not more (narrow) article. Two-column desktop
     layout - copy+features left, actions right - keeps this compact instead
     of a tall centered stack. */
  max-width: var(--ll-shell);
  margin: 72px auto 0;
  padding: 40px var(--ll-shell-pad);
  border-radius: var(--radius-card);
  background: var(--ink-900);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}
.ll-blog-cta--primary .ll-blog-cta__col { min-width: 0; }
.ll-blog-cta--primary .ll-blog-cta__col--actions { flex: none; }
.ll-blog-cta--primary .ll-blog-cta__title { margin: 0 0 8px; font-family: var(--ll-font-heading); font-weight: 800; font-size: 28px; line-height: 1.25; color: #fff; }
.ll-blog-cta--primary .ll-blog-cta__desc { margin: 0; font-size: 16px; line-height: 1.55; color: #fff; max-width: 52ch; }
.ll-blog-cta--primary .ll-blog-cta__actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 12px;
}

/* Feature checklist (§14) - shared by both CTA variants */
.ll-blog-cta__features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}
.ll-blog-cta__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ll-font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.ll-blog-cta__features li svg { flex: none; width: 18px; height: 18px; }
.ll-blog-cta--contextual .ll-blog-cta__features li { color: var(--slate-700, var(--slate-600)); }
.ll-blog-cta--contextual .ll-blog-cta__features li svg { color: var(--brand-600); }
.ll-blog-cta--primary .ll-blog-cta__features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 0;
}
.ll-blog-cta--primary .ll-blog-cta__features li { color: var(--ink-text, var(--slate-200)); }
.ll-blog-cta--primary .ll-blog-cta__features li svg { color: var(--brand-300); }

/* ── Right-side context rail (related solutions) ──────────────────────────── */
.ll-blog-context {
  position: sticky;
  top: 100px;
}
.ll-blog-context__title {
  font-family: var(--ll-font-ui);
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin: 0 0 14px;
}
/* Deliberately lightweight vs the TOC card - a plain list with arrow glyphs,
   no border/fill, so the two sticky rails don't compete for attention. */
.ll-blog-context ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ll-blog-context a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--ll-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-600);
  text-decoration: none;
  line-height: 1.4;
}
.ll-blog-context a svg { flex: none; width: 14px; height: 14px; color: var(--slate-300); transition: transform 0.15s ease-out, color 0.15s ease-out; }
.ll-blog-context a:hover { color: var(--brand-600); }
.ll-blog-context a:hover svg { color: var(--brand-600); transform: translateX(2px); }

/* Inline variant: same content, standalone block in the main flow (mobile/
   tablet only - the sidebar variant covers desktop, see .ll-blog-layout__context). */
.ll-blog-context--inline {
  display: none;
  position: static;
  margin: 8px 0 40px;
  padding: 22px 24px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  background: var(--slate-50);
}
@media (max-width: 1199px) {
  .ll-blog-context--inline { display: block; }
}

/* ── Related articles ("Continue reading") ────────────────────────────────── */
/* Compact by design: a shallow image, one metadata line, a 2-line-clamped
   description and a plain text link - these should read as pointers to more
   reading, not a second row of landing-page feature cards. */
.ll-blog-related { max-width: var(--ll-shell); margin: 88px auto 0; padding: 0 var(--ll-shell-pad); }
.ll-blog-related__title { margin: 0 0 20px; font-family: var(--ll-font-heading); font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--slate-900); }
.ll-blog-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ll-blog-related__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}
.ll-blog-related__card:hover { box-shadow: var(--shadow-md); border-color: var(--slate-300); }
/* display:flex + centering: a card image capped below the box's full width
   (safeMaxWidthPx, low-resolution source) sits centered with even letterbox
   background instead of hugging the left edge - a no-op at full width. */
.ll-blog-related__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 8; overflow: hidden; background: var(--slate-100); }
/* height:auto + the wrapper's own aspect-ratio (not height:100%): the image
   derives its box from its OWN (possibly safeMaxWidthPx-capped) width, so a
   capped low-resolution image never gets stretched taller to fill the
   wrapper's full height - it stays self-consistent at the same 16/8 ratio,
   just smaller, and the flex wrapper centers/letterboxes it. */
.ll-blog-related__media img { width: 100%; aspect-ratio: 16 / 8; height: auto; object-fit: cover; }
.ll-blog-related__body { display: flex; flex-direction: column; padding: 16px 18px 18px; flex: 1; }
.ll-blog-related__meta {
  font-family: var(--ll-font-ui);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 8px;
}
.ll-blog-related__title2 { font-family: var(--ll-font-heading); font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--slate-900); margin-bottom: 6px; }
.ll-blog-related__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate-500);
  flex: 1;
  margin-bottom: 12px;
  /* 2-line clamp - keeps every card the same height regardless of excerpt length. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ll-blog-related__cta { display: flex; align-items: center; gap: 6px; font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--brand-600); margin-top: auto; }
.ll-blog-related__cta svg { width: 14px; height: 14px; }

/* ── Newsletter ────────────────────────────────────────────────────────────── */
/* Compact, self-contained card - icon + heading/description on top, an
   inline email form below - rather than a full-width band, so it reads as a
   deliberate closing note instead of another section-width banner. */
.ll-blog-newsletter {
  max-width: 720px;
  margin: 48px auto 64px;
  padding: 32px 36px;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.ll-blog-newsletter__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-control);
  background: var(--brand-100);
  color: var(--brand-600);
}
.ll-blog-newsletter__icon svg { width: 22px; height: 22px; }
.ll-blog-newsletter__body { flex: 1; min-width: 0; }
.ll-blog-newsletter__title { margin: 0 0 6px; font-family: var(--ll-font-heading); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--slate-900); }
.ll-blog-newsletter__desc { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--slate-600); }
.ll-blog-newsletter__form { display: flex; gap: 10px; }
.ll-blog-newsletter__form input {
  flex: 1;
  max-width: 320px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-control);
  background: #fff;
  font-family: var(--ll-font-body);
  font-size: 14.5px;
  color: var(--slate-900);
}
.ll-blog-newsletter__form input:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.ll-blog-newsletter__thanks { font-family: var(--ll-font-ui); font-size: 14.5px; font-weight: 600; color: var(--brand-700); }

/* ── Reading progress ──────────────────────────────────────────────────────── */
.ll-blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 600;
}
.ll-blog-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--brand-600);
  transition: width 0.1s linear;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Resource-center homepage (app/blog/page.tsx -> BlogHome + ll-rc-* sections)
   Editorial landing: hero+search, topic tabs, featured, topic cards, latest,
   topic hubs, popular guides. Tokens only - no new colors/radii.
   ══════════════════════════════════════════════════════════════════════════ */

/* Shared section shell (self-contained width + rhythm - deliberately NOT
   combined with .ll-container to avoid margin/padding shorthand collisions
   across the global + route stylesheets). */
.ll-rc-section,
.ll-rc-hub,
.ll-rc-popular {
  max-width: var(--ll-shell);
  margin: 96px auto 0;
  padding: 0 var(--ll-shell-pad);
}

.ll-rc-section__head { margin-bottom: 28px; }
.ll-rc-section__head--row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ll-rc-section__title {
  font-family: var(--ll-font-heading);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--slate-900);
  margin: 0;
}
.ll-rc-section__desc {
  margin: 8px 0 0;
  font-family: var(--ll-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-600);
  max-width: 60ch;
}
.ll-rc-section__link {
  font-family: var(--ll-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
  white-space: nowrap;
}
.ll-rc-section__link:hover { color: var(--brand-700); }

/* ── Hero (§1) ─────────────────────────────────────────────────────────────
   Editorial masthead redesign (2026-07-27) — structural reference: the
   Leadpages blog hero (eyebrow -> big two-tone title -> description ->
   understated text CTA -> search), rebuilt entirely in the site's existing
   teal brand system (--brand-*, documents/theme.md) — no new colors introduced. */
.ll-rc-hero {
  padding: 96px 0 64px;
  text-align: center;
  border-bottom: 1px solid var(--slate-200);
}
.ll-rc-hero__inner { max-width: var(--ll-shell); margin: 0 auto; padding: 0 var(--ll-shell-pad); }
.ll-rc-hero__eyebrow {
  display: inline-block;
  font-family: var(--ll-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 22px;
}
.ll-rc-hero__title {
  font-family: var(--ll-font-heading);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 74px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 0 0 24px;
}
.ll-rc-hero__line { display: block; font-size: inherit; }
.ll-rc-hero__accent { font-size: inherit; color: var(--brand-600); font-style: italic; }
.ll-rc-hero__desc {
  font-family: var(--ll-font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--slate-600);
  margin: 0 auto 32px;
  max-width: 52ch;
}
.ll-rc-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 36px;
  font-family: var(--ll-font-ui);
}
.ll-rc-hero__ctalink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--slate-900);
  text-decoration: underline;
  text-decoration-color: var(--slate-300);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: color 0.15s ease-out, text-decoration-color 0.15s ease-out;
}
.ll-rc-hero__ctalink svg { transition: transform 0.15s ease-out; }
.ll-rc-hero__ctalink:hover { color: var(--brand-600); text-decoration-color: var(--brand-600); }
.ll-rc-hero__ctalink:hover svg { transform: translateX(2px); }
.ll-rc-hero__ctanote { font-size: 14px; color: var(--slate-500); }
.ll-rc-hero__search { position: relative; max-width: 680px; margin: 0 auto; }
.ll-rc-hero__searchicon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--slate-400);
  pointer-events: none;
}
.ll-rc-hero__input {
  width: 100%;
  height: 60px;
  padding: 0 22px 0 52px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: var(--slate-50);
  font-family: var(--ll-font-body);
  font-size: 16px;
  color: var(--slate-900);
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, background 0.15s ease-out;
}
.ll-rc-hero__input::placeholder { color: var(--slate-400); }
.ll-rc-hero__input:focus-visible {
  outline: none;
  background: #fff;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-50);
}

/* ── Topic tabs (§2) ───────────────────────────────────────────────────────── */
.ll-rc-tabs { border-bottom: 1px solid var(--slate-200); }
.ll-rc-tabs__inner {
  max-width: var(--ll-shell);
  margin: 0 auto;
  padding: 0 var(--ll-shell-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ll-rc-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  font-family: var(--ll-font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--slate-600);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease-out, border-color 0.15s ease-out;
}
.ll-rc-tab:hover { color: var(--slate-900); }
.ll-rc-tab.is-active { color: var(--brand-600); border-bottom-color: var(--brand-600); }

/* ── Featured resources (§3): 1 large + 2 secondary ───────────────────────── */
.ll-rc-featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
.ll-rc-feature-lead {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  transition: box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}
.ll-rc-feature-lead:hover { box-shadow: var(--shadow-lg); border-color: var(--slate-300); }
/* display:flex + centering: see .ll-blog-related__media comment above. */
.ll-rc-feature-lead__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--slate-100); overflow: hidden; }
/* height:auto + the wrapper's own aspect-ratio: see .ll-blog-related__media img comment. */
.ll-rc-feature-lead__media img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }
.ll-rc-feature-lead__body { display: flex; flex-direction: column; padding: 26px 28px 28px; flex: 1; }
.ll-rc-feature-lead__cat {
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 12px;
}
.ll-rc-feature-lead__title {
  font-family: var(--ll-font-heading);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.25;
  color: var(--slate-900);
  margin-bottom: 12px;
}
.ll-rc-feature-lead__desc { font-size: 16px; line-height: 1.6; color: var(--slate-600); margin-bottom: 20px; }
.ll-rc-feature-lead__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--ll-font-ui);
  font-size: 13.5px;
  color: var(--slate-500);
}
.ll-rc-feature-lead__cta { color: var(--brand-600); font-weight: 600; }

.ll-rc-feature-side { display: flex; flex-direction: column; gap: 24px; }
.ll-rc-feature-mini {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  flex: 1;
  transition: box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}
.ll-rc-feature-mini:hover { box-shadow: var(--shadow-md); border-color: var(--slate-300); }
/* display:flex + centering: see .ll-blog-related__media comment above. */
.ll-rc-feature-mini__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--slate-100); overflow: hidden; }
/* height:auto + the wrapper's own aspect-ratio: see .ll-blog-related__media img comment. */
.ll-rc-feature-mini__media img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }
.ll-rc-feature-mini__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.ll-rc-feature-mini__cat {
  font-family: var(--ll-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.ll-rc-feature-mini__title {
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--slate-900);
}

/* ── Explore by topic (§4) ─────────────────────────────────────────────────── */
.ll-rc-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ll-rc-topic {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  text-decoration: none;
  background: #fff;
  transition: box-shadow 0.18s ease-out, border-color 0.18s ease-out, transform 0.18s ease-out;
}
.ll-rc-topic:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ll-rc-topic__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand-50);
  margin-bottom: 16px;
}
.ll-rc-topic__icon img { width: 26px; height: 26px; }
.ll-rc-topic__title {
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--slate-900);
  margin-bottom: 8px;
}
.ll-rc-topic__blurb { font-size: 14px; line-height: 1.55; color: var(--slate-500); margin-bottom: 18px; flex: 1; }
.ll-rc-topic__foot { display: flex; align-items: center; justify-content: space-between; }
.ll-rc-topic__count { font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-500); }
.ll-rc-topic__cta { font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 600; color: var(--brand-600); }

/* ── Latest articles (§5) — reuses BlogCard (.ll-blog-related__card) ───────── */
.ll-rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ── Topic hub (§6) ────────────────────────────────────────────────────────── */
.ll-rc-hub__head { margin-bottom: 28px; }
.ll-rc-hub__body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.ll-rc-hub__featured {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  transition: box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}
.ll-rc-hub__featured:hover { box-shadow: var(--shadow-lg); border-color: var(--slate-300); }
/* display:flex + centering + height:auto: see .ll-blog-related__media / img comments. */
.ll-rc-hub__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--slate-100); overflow: hidden; }
.ll-rc-hub__media img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }
.ll-rc-hub__featbody { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.ll-rc-hub__featlabel {
  font-family: var(--ll-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.ll-rc-hub__feattitle {
  font-family: var(--ll-font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  color: var(--slate-900);
}
.ll-rc-hub__featcta { font-family: var(--ll-font-ui); font-size: 14px; font-weight: 600; color: var(--brand-600); margin-top: 4px; }
.ll-rc-hub__list ul { list-style: none; margin: 0 0 20px; padding: 0; }
.ll-rc-hub__list li { border-bottom: 1px solid var(--slate-200); }
.ll-rc-hub__list li:first-child { border-top: 1px solid var(--slate-200); }
.ll-rc-hub__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  font-family: var(--ll-font-heading);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--slate-900);
  text-decoration: none;
  transition: color 0.15s ease-out;
}
.ll-rc-hub__list a svg { flex: none; width: 18px; height: 18px; color: var(--slate-300); transition: transform 0.15s ease-out, color 0.15s ease-out; }
.ll-rc-hub__list a:hover { color: var(--brand-600); }
.ll-rc-hub__list a:hover svg { color: var(--brand-600); transform: translateX(3px); }
.ll-rc-hub__all { font-family: var(--ll-font-ui); font-size: 14px; font-weight: 700; color: var(--brand-600); text-decoration: none; }
.ll-rc-hub__all:hover { color: var(--brand-700); }

/* ── Popular guides (§7): numbered, imageless ─────────────────────────────── */
.ll-rc-popular__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--slate-200); }
.ll-rc-popular__item { display: flex; align-items: flex-start; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--slate-200); }
.ll-rc-popular__num {
  flex: none;
  width: 36px;
  font-family: var(--ll-font-heading);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.4;
  color: var(--brand-300);
}
.ll-rc-popular__body { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.ll-rc-popular__title {
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--slate-900);
  transition: color 0.15s ease-out;
}
.ll-rc-popular__body:hover .ll-rc-popular__title { color: var(--brand-600); }
.ll-rc-popular__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate-500);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Filtered archive / search results ─────────────────────────────────────── */
.ll-rc-archive__head { margin-bottom: 28px; }
.ll-rc-archive__empty { font-size: 16px; color: var(--slate-500); padding: 32px 0 8px; }

/* ── Topic hub page (/blog/topics/[topic]) ────────────────────────────────── */
.ll-hub-hero { border-bottom: 1px solid var(--slate-200); padding: 24px 0 36px; }
.ll-hub-hero__inner { max-width: var(--ll-shell); margin: 0 auto; padding: 0 var(--ll-shell-pad); }
.ll-hub-hero__eyebrow {
  display: inline-block;
  margin: 14px 0 14px;
  font-family: var(--ll-font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.ll-hub-hero__title {
  font-family: var(--ll-font-heading);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 0 0 14px;
}
.ll-hub-hero__desc { font-family: var(--ll-font-body); font-size: 18px; line-height: 1.6; color: var(--slate-600); max-width: 62ch; margin: 0 0 14px; }
.ll-hub-hero__count { font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 600; color: var(--slate-500); }

/* ── Author profile page (/blog/author/[author]) ──────────────────────────── */
.ll-author-hero__top { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.ll-author-hero__avatar,
.ll-author-hero__photo {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 999px;
}
.ll-author-hero__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-600);
  color: #fff;
  font-family: var(--ll-font-heading);
  font-weight: 700;
  font-size: 26px;
}
.ll-author-hero__photo { object-fit: cover; }
.ll-author-hero__role { font-family: var(--ll-font-ui); font-size: 14.5px; font-weight: 600; color: var(--brand-700); margin: 4px 0 0; }
.ll-author-hero__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--ll-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
}
.ll-author-hero__linkedin:hover { color: var(--brand-700); }
.ll-author-hero__expertise {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.ll-author-hero__expertise li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-700);
  font-family: var(--ll-font-ui);
  font-size: 13px;
  font-weight: 600;
}
.ll-author-hero__expertise a { color: inherit; text-decoration: none; }
.ll-author-hero__name { font-family: var(--ll-font-heading); font-weight: 800; font-size: 32px; line-height: 1.15; color: var(--slate-900); margin: 0; }
.ll-hub-hero__count--block { display: block; margin-top: 18px; }

.ll-hub-uplink { max-width: var(--ll-shell); margin: 72px auto 0; padding: 0 var(--ll-shell-pad); }
.ll-hub-uplink__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px 32px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  background: var(--slate-50);
}
.ll-hub-uplink__label { margin: 0 0 6px; font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-600); }
.ll-hub-uplink__title { margin: 0 0 4px; font-family: var(--ll-font-heading); font-weight: 700; font-size: 20px; color: var(--slate-900); }
.ll-hub-uplink__desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--slate-600); max-width: 52ch; }

@media (max-width: 767px) {
  .ll-hub-hero__title { font-size: 30px; }
  .ll-hub-uplink__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ll-blog-related__grid { grid-template-columns: repeat(2, 1fr); }
  .ll-rc-featured { grid-template-columns: 1fr; }
  .ll-rc-feature-side { flex-direction: row; }
  .ll-rc-topics { grid-template-columns: repeat(2, 1fr); }
  .ll-rc-grid { grid-template-columns: repeat(2, 1fr); }
  .ll-rc-hub__body { grid-template-columns: 1fr; gap: 28px; }
  .ll-blog-cta--primary { grid-template-columns: 1fr; }
  .ll-blog-cta--primary .ll-blog-cta__actions { justify-content: flex-start; }
  /* Below the shell's own 1280px "laptop" baseline, the fluid clamp() no longer
     has enough width to keep the 2-line headline from wrapping a 3rd row — step
     it down explicitly instead of shrinking it to near-mobile size. */
  .ll-rc-hero { padding: 72px 0 48px; }
  .ll-rc-hero__title { font-size: 52px; }
}

@media (max-width: 767px) {
  .ll-blog-hero__title { font-size: 32px; }
  .ll-blog-hero__desc { font-size: 17px; }
  .ll-article { padding-top: 12px; }
  .ll-blog-article { font-size: 17px; }
  .ll-blog-article h2 { font-size: 26px; margin-top: 40px; }
  .ll-blog-article h3 { font-size: 21px; margin-top: 32px; }
  .ll-blog-figure--wide,
  .ll-blog-shot--wide { width: 100%; margin-left: 0; transform: none; }
  .ll-blog-quote__text { font-size: 20px; }
  .ll-blog-cta__features { grid-template-columns: 1fr; }
  .ll-blog-featuregrid { grid-template-columns: 1fr; }
  .ll-blog-cta--contextual { flex-direction: column; align-items: flex-start; }
  .ll-blog-cta--primary { padding: 32px 24px; margin-top: 48px; }
  .ll-blog-cta--primary .ll-blog-cta__title { font-size: 24px; }
  .ll-blog-related { margin-top: 56px; }
  .ll-blog-related__grid { grid-template-columns: 1fr; }
  .ll-blog-newsletter { margin: 32px auto 40px; padding: 24px; flex-direction: column; align-items: flex-start; }
  .ll-blog-newsletter__form { flex-direction: column; align-items: stretch; }
  .ll-blog-newsletter__form input { max-width: none; }

  /* Resource-center homepage */
  .ll-rc-hero { padding: 48px 0 32px; }
  .ll-rc-hero__title { font-size: 32px; }
  .ll-rc-hero__desc { font-size: 16px; }
  .ll-rc-hero__cta { flex-direction: column; gap: 6px; margin-bottom: 28px; }
  .ll-rc-hero__search { max-width: 100%; }
  .ll-rc-section,
  .ll-rc-hub,
  .ll-rc-popular { margin-top: 64px; }
  .ll-rc-section__title { font-size: 24px; }
  .ll-rc-feature-side { flex-direction: column; }
  .ll-rc-feature-lead__title { font-size: 22px; }
  .ll-rc-topics { grid-template-columns: 1fr; }
  .ll-rc-grid { grid-template-columns: 1fr; }
  .ll-rc-tabs__inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ll-rc-tab { white-space: nowrap; }
}