/* ZicReach blog. Published to /blog/assets/blog.css by App\Services\Blog\BlogPublisher.
   Loads after /assets/site.css and reuses its tokens; every token has a fallback so
   the blog still reads correctly if site.css is missing. Classes are prefixed zb-. */

.zb-body {
  --zb-paper: var(--paper, #f5f3ee);
  --zb-paper-2: var(--paper-2, #ece9e1);
  --zb-surface: var(--surface, #ffffff);
  --zb-ink: var(--ink, #0a1230);
  --zb-ink-2: var(--ink-2, #2b3352);
  --zb-muted: var(--muted, #545c79);
  --zb-faint: var(--faint, #646b85);
  --zb-line: var(--line, rgba(10, 18, 48, 0.1));
  --zb-line-2: var(--line-2, rgba(10, 18, 48, 0.17));
  --zb-navy: var(--navy, #022179);
  --zb-purple: var(--purple, #54298c);
  --zb-lavender: var(--tint-lavender, #f1ecfa);
  --zb-mist: var(--tint-mist, #eaf0fd);
  --zb-deep: var(--deep, #040b2b);
  --zb-on-deep: var(--on-deep, #eceffa);
  --zb-on-deep-muted: var(--on-deep-muted, #a3abcc);
  --zb-grad: var(--grad, linear-gradient(115deg, #022179 0%, #2c2793 52%, #54298c 100%));
  --zb-display: var(--font-display, "Schibsted Grotesk"), "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --zb-ui: var(--font-ui, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --zb-mono: var(--font-mono, "JetBrains Mono"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --zb-gutter: 20px;
  --zb-radius: 14px;
  /* Body background, text colour and font come from site.css (DESIGN.md
     "Blog template contract": the blog does not restyle body). */
}
/* Only for the admin preview, where site.css may be missing. */
.zb-body:has(.zb-preview-bar) { margin: 0; background: var(--zb-paper); color: var(--zb-ink); font-family: var(--zb-ui); line-height: 1.6; }
@media (min-width: 768px) { .zb-body { --zb-gutter: 32px; } }

.zb-body *, .zb-body *::before, .zb-body *::after { box-sizing: border-box; }
.zb-body img { max-width: 100%; height: auto; }
/* Links inside the blog's own markup only: the shell header and footer keep site.css colours (buttons included). */
.zb-main a { color: inherit; }
.zb-body :focus-visible { outline: 2px solid var(--zb-navy); outline-offset: 3px; border-radius: 4px; }

.zb-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--zb-gutter); }
.zb-main { padding-top: 0; }

.zb-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: var(--zb-surface); color: var(--zb-ink); }
.zb-skip:focus { left: 12px; }
.zb-preview-bar { padding: 8px 16px; background: var(--zb-lavender); color: var(--zb-purple); font-size: 14px; font-weight: 600; text-align: center; }

/* Buttons */
.zb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.zb-btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.zb-btn-primary { background: var(--zb-grad); color: #fff !important; box-shadow: 0 8px 20px -12px rgba(2, 33, 121, .7); }
.zb-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(2, 33, 121, .8); }
.zb-btn-light { background: #fff; color: var(--zb-navy) !important; }
.zb-btn-light:hover { transform: translateY(-1px); }

/* Header (fallback when the site shell is not available) */
.zb-header { position: sticky; top: 0; z-index: 50; background: rgba(245, 243, 238, .9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--zb-line); }
.zb-nav { display: flex; align-items: center; gap: 24px; height: 68px; }
.zb-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--zb-ink); }
.zb-logo img { width: 28px; height: 28px; }
.zb-logo span { font-family: var(--zb-display); font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.zb-logo-light { color: #fff; }
.zb-nav-links { display: none; margin: 0 0 0 12px; padding: 0; list-style: none; gap: 4px; }
.zb-nav-links a { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 999px; color: var(--zb-ink-2); font-size: 15px; font-weight: 500; text-decoration: none; }
.zb-nav-links a:hover { background: rgba(10, 18, 48, .05); color: var(--zb-ink); }
.zb-nav-links a[aria-current="page"] { color: var(--zb-navy); }
.zb-nav-cta { display: none; margin-left: auto; align-items: center; gap: 8px; }
.zb-nav-login { padding: 0 12px; color: var(--zb-ink-2); font-size: 15px; font-weight: 500; text-decoration: none; }
.zb-mobile { margin-left: auto; position: static; }
.zb-mobile summary { list-style: none; display: grid; place-content: center; gap: 4px; width: 44px; height: 44px; border: 1px solid var(--zb-line-2); border-radius: 999px; background: rgba(255, 255, 255, .7); cursor: pointer; }
.zb-mobile summary::-webkit-details-marker { display: none; }
.zb-mobile summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--zb-ink); }
.zb-mobile-panel { position: absolute; left: 0; right: 0; top: 68px; display: grid; gap: 2px; padding: 12px var(--zb-gutter) 24px; background: var(--zb-paper); border-bottom: 1px solid var(--zb-line); box-shadow: 0 30px 60px -40px rgba(10, 18, 48, .35); }
.zb-mobile-panel a { padding: 12px 0; border-bottom: 1px solid var(--zb-line); font-size: 17px; font-weight: 600; text-decoration: none; }
.zb-mobile-panel .zb-btn { margin-top: 14px; border-bottom: 0; }
@media (min-width: 1024px) {
  .zb-nav-links, .zb-nav-cta { display: flex; }
  .zb-mobile { display: none; }
}

/* Shared type */
.zb-kicker { margin: 0 0 12px; color: var(--zb-purple); font-size: 14px; font-weight: 600; }
.zb-body .zb-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; background: var(--tint-lilac, #e6ddf6); color: var(--zb-purple); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.zb-body .zb-kicker .zb-chip:hover { text-decoration: none; background: var(--zb-lavender); }
.zb-kicker a { text-decoration: none; }
.zb-kicker-note { margin-left: 6px; color: var(--zb-faint); font-size: 13px; font-weight: 500; }
.zb-kicker a:hover { text-decoration: underline; }
.zb-title { margin: 0; font-family: var(--zb-display); font-size: clamp(36px, 5.4vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; color: var(--zb-ink); }
.zb-lead { max-width: 720px; margin: 18px 0 0; color: var(--zb-ink-2); font-size: clamp(18px, 2vw, 21px); line-height: 1.5; text-wrap: pretty; }
.zb-meta { margin: 0; color: var(--zb-faint); font-size: 14px; }
.zb-section-title { margin: 0 0 28px; font-family: var(--zb-display); font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.025em; }

.zb-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; color: var(--zb-faint); font-size: 14px; }
.zb-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--zb-line-2); }
.zb-crumbs a { text-decoration: none; }
.zb-crumbs a:hover { color: var(--zb-navy); text-decoration: underline; }
.zb-crumbs [aria-current] { color: var(--zb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }

/* Listing */
.zb-listing-head { padding-top: clamp(48px, 8vw, 96px); padding-bottom: 28px; }
.zb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.zb-filters a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--zb-line-2); border-radius: 999px; background: rgba(255, 255, 255, .6); color: var(--zb-ink-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.zb-filters a:hover { background: #fff; color: var(--zb-ink); }
.zb-filters a[aria-current="page"] { border-color: transparent; background: var(--zb-navy); color: #fff; }

.zb-featured { display: grid; grid-template-columns: 1fr; gap: 0; margin: 12px 0 8px; overflow: hidden; border: 1px solid var(--zb-line); border-radius: 20px; background: var(--zb-surface); box-shadow: 0 1px 2px rgba(10, 18, 48, .04), 0 24px 48px -36px rgba(10, 18, 48, .35); }
.zb-featured-media { display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vw, 32px); background: linear-gradient(135deg, var(--zb-mist), var(--zb-lavender)); overflow: hidden; }
.zb-featured-media img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 1px 2px rgba(10, 18, 48, .06), 0 22px 44px -28px rgba(10, 18, 48, .45); }
.zb-featured-media .zb-card-placeholder { aspect-ratio: 16 / 9; border-radius: 12px; }
.zb-featured-body { padding: clamp(24px, 4vw, 44px); align-self: center; }
.zb-featured-title { margin: 0 0 12px; font-family: var(--zb-display); font-size: clamp(26px, 2.7vw, 34px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.zb-featured-title a, .zb-card-title a { text-decoration: none; }
.zb-featured-title a:hover, .zb-card-title a:hover { color: var(--zb-navy); }
@media (min-width: 900px) {
  .zb-featured { grid-template-columns: 1.3fr 1fr; }
}

.zb-listing { padding-top: 40px; padding-bottom: 24px; }
.zb-listing .zb-section-title { margin-bottom: 22px; font-size: clamp(22px, 2.4vw, 26px); }
.zb-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 640px) { .zb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The archive (blog home, categories): two wide columns from tablet up, one on phones. */
.zb-listing .zb-grid { gap: 32px; }
@media (min-width: 768px) { .zb-listing .zb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .zb-listing .zb-grid { column-gap: 36px; row-gap: 40px; } .zb-listing .zb-card-title { font-size: 24px; } .zb-listing .zb-card-body { padding: 24px 26px 26px; } }

.zb-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--zb-line); border-radius: var(--zb-radius); background: var(--zb-surface); transition: transform .2s ease, box-shadow .2s ease; }
.zb-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(10, 18, 48, .05), 0 18px 36px -24px rgba(10, 18, 48, .3); }
.zb-card-media, .zb-featured-media { text-decoration: none; }
.zb-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--zb-mist); }
.zb-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zb-card-placeholder { display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; background: linear-gradient(135deg, var(--zb-mist), var(--zb-lavender)); color: var(--zb-navy); font-family: var(--zb-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-align: center; }
.zb-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.zb-card-title { margin: 0 0 8px; font-family: var(--zb-display); font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.zb-card-excerpt { margin: 0 0 16px; color: var(--zb-muted); font-size: 15.5px; line-height: 1.55; }
.zb-card .zb-meta { margin-top: auto; }
.zb-empty { padding: 48px 0; color: var(--zb-muted); }

.zb-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 56px 0 0; padding-top: 28px; border-top: 1px solid var(--zb-line); font-size: 14px; }
.zb-pager-pages { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zb-pager-num, .zb-pager-step { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid var(--zb-line-2); border-radius: 999px; background: var(--zb-surface); color: var(--zb-ink); font-weight: 600; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.zb-pager-num { min-width: 42px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.zb-pager-step { padding: 0 18px; }
.zb-body a.zb-pager-num:hover, .zb-body a.zb-pager-step:hover { border-color: var(--zb-navy); color: var(--zb-navy); }
.zb-pager-num[aria-current="page"] { border-color: transparent; background: var(--zb-navy); color: #fff; }
.zb-pager-step.is-off { color: var(--zb-faint); background: transparent; border-color: var(--zb-line); }
.zb-pager-gap { min-width: 22px; color: var(--zb-faint); text-align: center; }
.zb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) {
  .zb-pager-pages { order: -1; width: 100%; justify-content: center; }
  .zb-pager-step { flex: 1; }
}

/* Article */
.zb-article-head { max-width: 880px; padding-top: clamp(40px, 7vw, 88px); padding-bottom: 28px; }

/* Dark hero. The bottom edge is the lower arc of a wide ellipse (clip-path):
   high at both sides, lowest in the middle, crisp at every width. --zb-ry
   sets the depth of the curve (about 9% of it); the ellipse is 120% wide. */
.zb-post-hero {
  --zb-ry: 420px;
  --zb-curve: calc(var(--zb-ry) * .091);
  position: relative;
  isolation: isolate;
  padding-bottom: calc(var(--zb-curve) + 40px);
  background:
    radial-gradient(52% 70% at 88% 0%, rgba(123, 79, 201, .52), transparent 68%),
    radial-gradient(42% 60% at 4% 18%, rgba(62, 99, 221, .34), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(84, 41, 140, .35), transparent 70%),
    linear-gradient(180deg, var(--ink-deep, #040b2b) 0%, #06134a 52%, var(--zb-navy) 100%);
  color: var(--zb-on-deep);
  clip-path: ellipse(120% var(--zb-ry) at 50% calc(100% - var(--zb-ry)));
}
@media (min-width: 768px) { .zb-post-hero { --zb-ry: 640px; } }
@media (min-width: 1200px) { .zb-post-hero { --zb-ry: 860px; } }
.zb-post-hero.has-media { padding-bottom: calc(var(--zb-curve) + clamp(96px, 12vw, 176px)); }
.zb-post-hero .zb-article-head { position: relative; z-index: 1; padding-bottom: 0; }
/* The faded ZicReach wordmark behind the hero text, standing just above the
   curve (as the footer's stands on its divider). Behind the featured image
   in the middle, visible at both sides. */
.zb-hero-word {
  position: absolute;
  left: 50%;
  bottom: calc(var(--zb-curve) + 8px);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: clamp(96px, 22.5vw, 380px);
  line-height: .74;
  letter-spacing: -.065em;
  white-space: nowrap;
  transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(233, 236, 247, .1) 0%, rgba(233, 236, 247, .06) 45%, rgba(233, 236, 247, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.zb-post-hero .zb-crumbs ol { color: rgba(236, 239, 250, .62); }
.zb-post-hero .zb-crumbs li + li::before { color: rgba(236, 239, 250, .3); }
.zb-post-hero .zb-crumbs a:hover { color: #fff; }
.zb-post-hero .zb-crumbs [aria-current] { color: rgba(255, 255, 255, .9); }
.zb-body .zb-post-hero .zb-chip { border: 1px solid rgba(201, 178, 242, .3); background: rgba(201, 178, 242, .14); color: #e9e0fb; }
.zb-body .zb-post-hero .zb-kicker .zb-chip:hover { background: rgba(201, 178, 242, .24); color: #fff; }
.zb-post-hero .zb-title { color: #fff; }
.zb-post-hero .zb-lead { color: rgba(236, 239, 250, .84); }
.zb-post-hero .zb-meta { color: var(--zb-on-deep-muted); }
.zb-post-hero .zb-byline-name { color: #fff; }
.zb-post-hero .zb-byline-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); }
.zb-body .zb-post-hero :focus-visible { outline-color: #fff; }
/* One line whatever the font: wrapping on the fallback font and not on the web
   font moved the featured image when the font arrived (CLS on phones). */
.zb-byline { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 24px; white-space: nowrap; }
.zb-byline > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .zb-byline { gap: 6px; font-size: 13px; } }
.zb-byline-avatar { width: 32px; height: 32px; margin-right: 2px; border-radius: 50%; }
.zb-byline-name { color: var(--zb-ink); font-weight: 600; }
.zb-hero { position: relative; z-index: 1; max-width: 1100px; margin: calc(-1 * (var(--zb-curve-m, 38px) + clamp(56px, 10vw, 136px))) auto 0; }
@media (min-width: 768px) { .zb-hero { --zb-curve-m: 58px; } }
@media (min-width: 1200px) { .zb-hero { --zb-curve-m: 78px; } }
.zb-hero img { display: block; width: 100%; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); background: var(--zb-mist); box-shadow: 0 2px 4px rgba(4, 11, 43, .08), 0 40px 80px -40px rgba(4, 11, 43, .55); }

.zb-article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 44px; padding-bottom: 72px; }
.zb-article-main { min-width: 0; max-width: 720px; }
@media (min-width: 1100px) {
  .zb-article-grid { grid-template-columns: 240px minmax(0, 720px); justify-content: center; gap: 64px; }
  .zb-toc { position: sticky; top: 96px; align-self: start; }
}

.zb-toc details { padding: 18px 20px; border: 1px solid var(--zb-line); border-radius: 12px; background: rgba(255, 255, 255, .55); }
.zb-toc summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--zb-ink); }
.zb-toc li + li { border-top: 1px solid var(--zb-line); }
.zb-toc-cta { margin-top: 14px; padding: 18px 20px; border-radius: 12px; background: linear-gradient(135deg, var(--zb-mist), var(--zb-lavender)); }
.zb-toc-cta p { margin: 0 0 12px; color: var(--zb-ink); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.zb-toc-cta .zb-btn { width: 100%; }
@media (max-width: 1099px) { .zb-toc-cta { display: none; } }
.zb-toc ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: toc; }
.zb-toc li { counter-increment: toc; margin: 0; }
.zb-toc ol a { display: block; padding: 6px 0; color: var(--zb-muted); font-size: 14px; line-height: 1.4; text-decoration: none; }
.zb-toc ol a:hover { color: var(--zb-navy); }

.zb-prose { color: var(--zb-ink-2); font-size: 18px; line-height: 1.75; overflow-wrap: break-word; }
.zb-prose > :first-child { margin-top: 0; }
.zb-prose p, .zb-prose ul, .zb-prose ol, .zb-prose figure, .zb-prose pre, .zb-prose table, .zb-prose blockquote { margin: 0 0 1.4em; }
.zb-prose h2 { margin: 2.1em 0 .6em; font-family: var(--zb-display); font-size: clamp(26px, 3vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: var(--zb-ink); scroll-margin-top: 96px; text-wrap: balance; }
.zb-prose h3 { margin: 1.8em 0 .5em; font-family: var(--zb-display); font-size: 23px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--zb-ink); scroll-margin-top: 96px; }
#questions-people-ask ~ h3 { margin-top: 1.5em; font-size: 20px; }
.zb-prose h4 { margin: 1.6em 0 .4em; font-size: 18px; font-weight: 700; color: var(--zb-ink); }
.zb-prose a { color: var(--zb-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zb-prose a:hover { color: var(--zb-purple); }
.zb-prose strong { color: var(--zb-ink); font-weight: 650; }
.zb-prose ul, .zb-prose ol { padding-left: 1.3em; }
.zb-prose ul { list-style: disc; }
.zb-prose ol { list-style: decimal; }
.zb-prose li { margin: .35em 0; padding-left: .2em; }
.zb-prose li::marker { color: var(--zb-purple); }
.zb-prose blockquote { position: relative; padding: 22px 26px 22px 58px; border-radius: 14px; background: var(--zb-lavender); color: var(--zb-ink); font-size: 19px; }
.zb-prose blockquote::before { content: "\201C"; position: absolute; left: 20px; top: 8px; color: var(--zb-purple); font-family: Georgia, serif; font-size: 52px; line-height: 1; }
.zb-prose blockquote p:last-child { margin-bottom: 0; }
.zb-prose code { padding: .12em .4em; border-radius: 6px; background: rgba(10, 18, 48, .06); font-family: var(--zb-mono); font-size: .86em; color: var(--zb-ink); }
.zb-prose pre { padding: 18px 20px; overflow-x: auto; border-radius: 12px; background: var(--zb-deep); color: var(--zb-on-deep); font-size: 14.5px; line-height: 1.6; }
.zb-prose pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.zb-prose img { display: block; border-radius: 12px; border: 1px solid var(--zb-line); }
.zb-prose figure { margin-top: 2em; margin-bottom: 2em; }
.zb-prose figcaption { margin-top: 10px; color: var(--zb-faint); font-size: 14px; text-align: center; }
.zb-prose hr { margin: 2.6em 0; border: 0; border-top: 1px solid var(--zb-line-2); }
.zb-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--zb-line); border-radius: 14px; border-collapse: separate; border-spacing: 0; background: var(--zb-surface); font-size: 15px; line-height: 1.5; }
.zb-prose th, .zb-prose td { padding: 12px 16px; border-bottom: 1px solid var(--zb-line); text-align: left; vertical-align: top; }
.zb-prose tr:last-child td { border-bottom: 0; }
.zb-prose td:first-child { color: var(--zb-ink); font-weight: 600; }
.zb-prose th { color: var(--zb-navy); font-size: 13.5px; font-weight: 650; background: var(--zb-lavender); white-space: nowrap; }

.zb-cta { position: relative; overflow: hidden; margin: 56px 0 0; padding: clamp(28px, 4vw, 40px); border-radius: 20px; background: var(--zb-grad); color: #fff; }
.zb-cta h2 { margin: 0 0 10px; font-family: var(--zb-display); font-size: clamp(24px, 3vw, 30px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.zb-cta p { max-width: 560px; margin: 0 0 22px; color: rgba(255, 255, 255, .82); font-size: 16.5px; }
.zb-cta-wide { margin: 40px 0 88px; text-align: center; }
.zb-cta-wide p { margin-left: auto; margin-right: auto; }

.zb-author { display: flex; gap: 18px; align-items: flex-start; margin-top: 40px; padding: 24px 0 0; border-top: 1px solid var(--zb-line); }
.zb-avatar { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.zb-avatar-initial { display: grid; place-items: center; background: var(--zb-lavender); color: var(--zb-purple); font-family: var(--zb-display); font-size: 26px; font-weight: 700; }
.zb-author-name { margin: 0; font-weight: 700; color: var(--zb-ink); }
.zb-author-role { margin: 2px 0 0; color: var(--zb-faint); font-size: 14px; }
.zb-author-bio { margin: 8px 0 0; color: var(--zb-muted); font-size: 15.5px; }

.zb-related { padding: 72px 0 88px; border-top: 1px solid var(--zb-line); background: var(--zb-mist); }

/* Footer (fallback when the site shell is not available) */
.zb-footer { background: var(--zb-deep); color: var(--zb-on-deep); padding: 72px 0 0; }
.zb-footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .zb-footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.zb-footer-line { max-width: 320px; margin: 18px 0 0; color: var(--zb-on-deep-muted); font-size: 15px; }
.zb-footer-title { margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 600; }
.zb-footer ul { margin: 0; padding: 0; list-style: none; }
.zb-footer li { margin: 0 0 10px; }
.zb-footer a { color: var(--zb-on-deep-muted); font-size: 15px; text-decoration: none; }
.zb-footer a:hover { color: #fff; }
.zb-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding: 22px 0 28px; border-top: 1px solid rgba(233, 236, 247, .1); color: var(--zb-on-deep-muted); font-size: 14px; }
.zb-footer-base p { margin: 0; }
.zb-footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.zb-footer-legal a { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .zb-card, .zb-btn { transition: none; }
  .zb-card:hover, .zb-btn:hover { transform: none; }
}
@media print {
  .zb-header, .zb-footer, .zb-toc, .zb-cta, .zb-related { display: none; }
}