/* ─────────────────────────────────────────
   THE CARBON WORKBENCH - site-shell.css
   One page-intro treatment for every public template:
   calculator landing pages (.seo-hero), Learn and Kit articles and the
   calculators hub (.article-hero), and the Learn and Kit hubs.
   The intro text lines up with each template's reading column, so the
   title, lead and body share one left edge.
   Loaded after page styles, so rules here are the last word.
   ───────────────────────────────────────── */

:root {
  --shell-ink: #0c1512;
  --shell-on-dark: #eef2ef;
  --shell-on-dark-muted: #c3d0c9;
  --shell-accent: #8fc9a8;
  --shell-lift: #46a074;
}

/* Column widths per template (they match each template's body column) */
.seo-hero { --shell-col: 800px; }
.article-hero { --shell-col: 680px; }
body:has(.kit-body) .article-hero { --shell-col: 860px; }
body:has(.calc-hub) .article-hero { --shell-col: 1160px; }
.kit-hero { --shell-col: 980px; }
.learn-hero { --shell-col: 1080px; }
.embed-hero { --shell-col: 1080px; }

/* The band */
section.seo-hero,
.article-hero,
section.kit-hero,
section.learn-hero,
section.embed-hero {
  position: relative;
  display: block !important;
  background:
    radial-gradient(900px 360px at 88% -20%, rgba(70, 160, 116, 0.16), transparent 62%),
    var(--shell-ink) !important;
  color: var(--shell-on-dark) !important;
  text-align: left !important;
  padding: 64px max(24px, calc((100% - var(--shell-col)) / 2)) 56px !important;
  min-height: 0 !important;
  border-bottom: 1px solid #24352e;
  overflow: hidden;
}
section.learn-hero::before,
section.learn-hero::after,
section.kit-hero::before,
section.kit-hero::after,
.article-hero::before,
.article-hero::after {
  display: none !important;
}

/* Inner wrappers collapse so the band's padding sets the column */
.article-hero-inner,
.kit-hero-shell,
.kit-hero-copy,
.learn-hero-inner {
  display: block !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  text-align: left !important;
}

/* Eyebrow: quiet, sentence case */
.seo-hero .eyebrow,
.article-hero .eyebrow,
.kit-hero .eyebrow,
.learn-hero .learn-kicker {
  display: inline-block !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--shell-accent) !important;
  font: 600 13px/1.4 "Instrument Sans", system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
.learn-hero .learn-kicker::before,
.article-hero .eyebrow::before,
.kit-hero .eyebrow::before { display: none !important; }

/* Title */
.seo-hero h1,
.article-hero h1,
.kit-hero h1,
.learn-hero h1,
.embed-hero h1 {
  max-width: 820px;
  margin: 0 !important;
  color: #ffffff !important;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 4.4vw, 56px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.015em !important;
  text-align: left !important;
}
.seo-hero h1 em,
.embed-hero h1 em,
.article-hero h1 em,
.kit-hero h1 em,
.learn-hero h1 em {
  font-style: normal !important;
  color: inherit !important;
}

/* Lead paragraph */
.seo-hero > p,
.article-hero > p,
.article-hero .sub,
.article-hero-inner > p,
.article-hero-inner > div > p,
.kit-hero-copy > p,
.learn-hero-inner > p {
  max-width: 680px !important;
  margin: 16px 0 0 !important;
  color: var(--shell-on-dark-muted) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

/* Kit product meta row: an inline fact under the lead, not a floating stat */
.article-hero .hero-meta {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  margin-top: 20px !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.article-hero .hero-meta-value {
  font: 600 15px/1.4 "Instrument Sans", system-ui, sans-serif !important;
  color: #ffffff !important;
  font-style: normal !important;
}
.article-hero .hero-meta-item {
  font: 500 14px/1.4 "Instrument Sans", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.article-hero .hero-meta-item { color: var(--shell-on-dark-muted) !important; }
.article-hero .hero-meta-item strong,
.article-hero .hero-meta-item b { color: #ffffff !important; }

/* Intro actions: one button language on the dark band */
.seo-hero .seo-cta,
.learn-hero .learn-actions,
.kit-hero .kit-hero-actions {
  margin-top: 26px !important;
}
.learn-hero .learn-actions,
.kit-hero .kit-hero-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start !important;
}
.seo-hero .seo-cta,
.learn-hero .learn-primary,
.kit-hero .kit-hero-button-primary {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 11px 20px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--shell-lift) !important;
  color: var(--shell-ink) !important;
  font: 600 15px/1.2 "Instrument Sans", system-ui, -apple-system, sans-serif !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.seo-hero .seo-cta:hover,
.learn-hero .learn-primary:hover,
.kit-hero .kit-hero-button-primary:hover { background: #5ab686 !important; }
.learn-hero .learn-secondary,
.kit-hero .kit-hero-button-secondary {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 11px 20px !important;
  border: 1px solid #4b6158 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--shell-on-dark) !important;
  font: 600 15px/1.2 "Instrument Sans", system-ui, -apple-system, sans-serif !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.learn-hero .learn-secondary:hover,
.kit-hero .kit-hero-button-secondary:hover { border-color: var(--shell-on-dark) !important; }

.seo-hero a:focus-visible,
.article-hero a:focus-visible,
.kit-hero a:focus-visible,
.learn-hero a:focus-visible {
  outline: 3px solid #7fd3a6;
  outline-offset: 2px;
}

/* Tables inside long-form pages never force sideways page scroll */
.article-body table,
.seo-body table,
.kit-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 720px) {
  section.seo-hero,
  .article-hero,
  section.kit-hero,
  section.learn-hero {
    padding: 44px 20px 40px !important;
  }
  .seo-hero > p,
  .article-hero > p,
  .article-hero .sub,
  .article-hero-inner > p,
  .kit-hero-copy > p,
  .learn-hero-inner > p {
    font-size: 17px !important;
  }
}

/* Embed docs intro */
.embed-hero > p {
  max-width: 680px !important;
  margin: 16px 0 0 !important;
  color: var(--shell-on-dark-muted) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}
.embed-hero .pro-feature-pill { margin: 0 0 14px !important; }
.embed-hero .hero-ctas { justify-content: flex-start !important; margin-top: 26px !important; }
.embed-hero > div:last-child:not(.hero-ctas) { text-align: left !important; }