:root {
  --content-paper: #f8f8f3;
  --content-surface: #ffffff;
  --content-ink: #14281d;
  --content-muted: #5d7063;
  --content-line: rgba(20, 40, 29, 0.13);
  --content-green: #072b1a;
  --content-green-mid: #0e6c43;
  --content-lime: #d7f872;
}

.content-page { color: var(--content-ink); background: var(--content-paper); }
.content-shell { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }
.content-header { position: sticky; top: 0; z-index: 20; background: rgba(248, 248, 243, 0.92); border-bottom: 1px solid var(--content-line); backdrop-filter: blur(16px); }
.content-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 4.8rem; gap: 1rem; }
.content-brand { display: inline-flex; align-items: center; gap: 0.58rem; color: var(--content-green); font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; letter-spacing: -0.05em; }
.content-brand img { width: 1.72rem; }
.content-nav { display: none; align-items: center; gap: 1.4rem; color: var(--content-muted); font-size: 0.84rem; font-weight: 700; }
.content-nav a:hover { color: var(--content-green-mid); }
.content-cta { display: inline-flex; align-items: center; min-height: 2.7rem; padding: 0.5rem 0.85rem; color: var(--content-green); background: var(--content-lime); border-radius: 0.65rem; font-size: 0.78rem; font-weight: 700; }

.content-hero { padding-block: clamp(4.5rem, 9vw, 8rem); color: #fff; background: var(--content-green); }
.content-hero--paper { color: var(--content-ink); background: var(--content-paper); }
.content-kicker { color: var(--content-lime); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }
.content-hero--paper .content-kicker { color: var(--content-green-mid); }
.content-hero h1 { max-width: 13ch; margin-top: 0.85rem; font-family: var(--font-display); font-size: clamp(3.1rem, 7.3vw, 6.45rem); font-weight: 600; letter-spacing: -0.075em; line-height: 0.91; }
.content-hero h1 span { color: var(--content-lime); }
.content-hero--paper h1 span { color: var(--content-green-mid); }
.content-hero__lede { max-width: 44rem; margin-top: 1.45rem; color: rgba(255, 255, 255, 0.76); font-size: clamp(1.06rem, 1.8vw, 1.28rem); line-height: 1.55; }
.content-hero--paper .content-hero__lede { color: var(--content-muted); }
.content-hero__meta { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin-top: 1.5rem; color: rgba(255, 255, 255, 0.68); font-size: 0.82rem; }
.content-hero--paper .content-hero__meta { color: var(--content-muted); }

.content-section { padding-block: clamp(4rem, 7vw, 6.5rem); }
.content-section--white { background: var(--content-surface); }
.content-section__intro { max-width: 46rem; }
.content-section h2 { color: var(--content-green); font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 4.25rem); font-weight: 600; letter-spacing: -0.065em; line-height: 0.96; }
.content-section__intro > p { margin-top: 1.1rem; color: var(--content-muted); font-size: 1.04rem; line-height: 1.6; }

.content-card-grid { display: grid; gap: 1rem; margin-top: 2.25rem; }
.content-card { display: flex; flex-direction: column; min-height: 18rem; padding: clamp(1.35rem, 3vw, 2.3rem); color: var(--content-ink); background: var(--content-surface); border: 1px solid var(--content-line); border-radius: 1rem; box-shadow: 0 16px 38px rgba(16, 39, 26, 0.06); }
.content-card--green { color: #fff; background: var(--content-green); border-color: var(--content-green); }
.content-card__label { color: var(--content-green-mid); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
.content-card--green .content-card__label { color: var(--content-lime); }
.content-card h3 { max-width: 15ch; margin-top: 1rem; font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.7rem); letter-spacing: -0.055em; line-height: 0.98; }
.content-card p { margin-top: 0.9rem; color: var(--content-muted); line-height: 1.55; }
.content-card--green p { color: rgba(255,255,255,0.75); }
.content-card__link { display: inline-flex; align-items: center; gap: 0.45rem; width: max-content; margin-top: auto; padding-top: 1.6rem; color: var(--content-green-mid); font-size: 0.88rem; font-weight: 700; }
.content-card--green .content-card__link { color: var(--content-lime); }

.workflow { display: grid; gap: 0; margin-top: 2.3rem; border: 1px solid var(--content-line); border-radius: 1rem; overflow: hidden; }
.workflow__item { display: grid; gap: 0.8rem; padding: 1.4rem; background: var(--content-surface); border-top: 1px solid var(--content-line); }
.workflow__item:first-child { border-top: 0; }
.workflow__number { color: var(--content-green-mid); font-family: var(--font-mono); font-size: 0.72rem; }
.workflow__item h3 { color: var(--content-green); font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -0.04em; }
.workflow__item p { color: var(--content-muted); line-height: 1.55; }

.use-case-scenario { display: grid; gap: 1.25rem; margin-top: 2.4rem; padding: clamp(1.35rem, 4vw, 3rem); color: #fff; background: var(--content-green); border-radius: 1rem; }
.use-case-scenario__tag { color: var(--content-lime); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
.use-case-scenario h2 { color: #fff; }
.use-case-scenario p { color: rgba(255,255,255,0.77); line-height: 1.6; }
.use-case-scenario__updates { display: grid; gap: 0.7rem; }
.use-case-update { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.82rem; color: var(--content-ink); background: #fff; border-radius: 0.7rem; }
.use-case-update img { flex: 0 0 auto; width: 1.65rem; height: 1.65rem; border-radius: 0.4rem; }
.use-case-update b { display: block; font-size: 0.8rem; }
.use-case-update span { display: block; margin-top: 0.12rem; color: var(--content-muted); font-size: 0.76rem; line-height: 1.35; }

.prose-wrap { display: grid; gap: 2.4rem; padding-block: clamp(3.5rem, 7vw, 6rem); }
.prose { max-width: 45rem; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.4rem; color: var(--content-green); font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.85rem); letter-spacing: -0.055em; line-height: 1; }
.prose p, .prose li { color: #3f5145; font-size: 1.03rem; line-height: 1.7; }
.prose ul, .prose ol { display: grid; gap: 0.65rem; padding-left: 1.2rem; }
.prose blockquote { padding: 1.1rem 1.2rem; color: var(--content-green); background: #eff8d3; border-left: 3px solid var(--content-green-mid); border-radius: 0 0.55rem 0.55rem 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; }
.prose-callout { align-self: start; padding: 1.25rem; background: #eff8d3; border-radius: 0.85rem; }
.prose-callout p { margin-top: 0.5rem; color: var(--content-muted); font-size: 0.9rem; line-height: 1.5; }

.content-footer { padding-block: 2.2rem; color: rgba(255,255,255,0.72); background: var(--content-green); }
.content-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.content-footer .content-brand { color: #fff; }
.content-footer p { font-size: 0.8rem; }

@media (min-width: 720px) {
  .content-nav { display: flex; }
  .content-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workflow__item { border-top: 0; border-left: 1px solid var(--content-line); }
  .workflow__item:first-child { border-left: 0; }
  .use-case-scenario { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
  .prose-wrap { grid-template-columns: minmax(0, 1fr) 16rem; }
}

@media (min-width: 960px) {
  .content-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}