/* ── Content pages (build-content.js) ─────────────────────────── */
.doc-hero { padding: 7.5rem 1rem 2.5rem; background: linear-gradient(180deg, #F0FDF7 0%, #ffffff 100%); border-bottom: 1px solid var(--border-gray); }
.doc-hero-inner { max-width: 80rem; margin: 0 auto; }
.doc-hero-post .doc-hero-inner { max-width: 80rem; }
.doc-hero-post h1, .doc-hero-post .lede { max-width: 52rem; }
.doc-hero .crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; color: #9CA3AF; margin-bottom: 1.25rem; }
.doc-hero .crumbs a:hover { color: var(--green); }
.doc-hero .crumbs .current { color: #4B5563; }
.doc-hero .eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 .6rem; }
.doc-hero h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--text); margin: 0 0 1rem; text-wrap: balance; letter-spacing: -.01em; }
.doc-hero .lede { font-size: 1.125rem; line-height: 1.65; color: var(--text-muted); margin: 0 0 1rem; }
.doc-hero .meta-line { font-size: .875rem; color: #6B7280; margin: 0 0 1.25rem; }
.doc-hero .meta-line a { color: var(--green-dark); font-weight: 600; }
.doc-hero .plan-note { font-size: .875rem; color: #374151; background: #fff; border: 1px solid var(--border); border-radius: 10px; display: inline-block; padding: .45rem .8rem; margin: 0 0 1.25rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-sm { padding: .55rem 1rem; font-size: .875rem; }

.doc-layout { max-width: 80rem; margin: 0 auto; padding: 3rem 1rem 4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 1024px) { .doc-layout { grid-template-columns: minmax(0, 1fr) 19rem; padding-left: 1.5rem; padding-right: 1.5rem; } }
.doc-layout-post { max-width: 80rem; }
@media (min-width: 1024px) { .doc-layout-post { grid-template-columns: minmax(0, 1fr) 19rem; } .doc-layout-post .doc-main { max-width: 52rem; } }
.doc-main { min-width: 0; max-width: 100%; }
.doc-side { min-width: 0; }
.doc-side-inner { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.25rem; }
.toc { background: #fff; border: 1px solid var(--border-gray); border-radius: var(--radius); padding: 1rem 1.1rem; }
.toc-title, .side-title, .side-cta-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; margin: 0 0 .6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.toc a { display: block; font-size: .875rem; color: #374151; padding: .3rem .5rem; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; text-decoration: none; line-height: 1.35; }
.toc a:hover, .toc a.active { color: var(--green-dark); border-left-color: var(--green); background: var(--surface-alt); }
.side-group { background: #fff; border: 1px solid var(--border-gray); border-radius: var(--radius); padding: 1rem 1.1rem; }
.side-group a { display: block; font-size: .875rem; color: #374151; padding: .3rem .5rem; border-radius: 6px; text-decoration: none; }
.side-group a:hover { background: #F9FAFB; color: var(--green-dark); }
.side-group a[aria-current="page"] { background: var(--surface-alt); color: var(--green-dark); font-weight: 600; }
.side-group .side-more { color: var(--green-dark); font-weight: 600; margin-top: .3rem; }
.side-cta { background: var(--dark); color: #D1FAE5; border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.side-cta p { margin: 0 0 .75rem; font-size: .9rem; line-height: 1.5; }
.side-cta .side-cta-title { color: #fff; }
.side-cta a:not(.btn) { color: #fff; text-decoration: underline; }

.hero-shot { margin: 0 0 2rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-gray); box-shadow: var(--shadow-md); background: #fff; }
.hero-shot img { display: block; width: 100%; height: auto; }
.summary-box { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 0 0 2rem; }
.summary-box .summary-label { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--green-dark); margin: 0 0 .5rem; }
.summary-box p { margin: 0 0 .5rem; color: #1F2937; line-height: 1.6; }
.summary-box ul, .summary-box ol { margin: .25rem 0 .5rem 1.25rem; color: #1F2937; }
.summary-box ul { list-style: disc; }
.summary-box ol { list-style: decimal; }
.summary-box li { margin: .2rem 0; }

.md-body { font-size: 1.0625rem; line-height: 1.75; color: #1F2937; }
.md-body > * { margin: 0 0 1.1rem; }
.md-body > *:last-child { margin-bottom: 0; }
.md-body h2 { font-size: 1.6rem; margin: 2.75rem 0 1rem; scroll-margin-top: 6rem; color: var(--text); text-wrap: balance; }
.md-body > h2:first-child { margin-top: 0; }
.md-body h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; scroll-margin-top: 6rem; color: var(--text); }
.md-body h4 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; color: var(--text); }
.md-body p { margin: 0 0 1.1rem; }
.md-body a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.md-body a:hover { color: var(--green); }
.md-body ul, .md-body ol { padding-left: 1.5rem; margin: 0 0 1.1rem; }
.md-body ul { list-style: disc; }
.md-body ol { list-style: decimal; }
.md-body li { margin: .4rem 0; }
.md-body li > ul, .md-body li > ol { margin-top: .3rem; }
.md-body strong { color: var(--text); font-weight: 600; }
.md-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: #F3F4F6; padding: .1em .35em; border-radius: 5px; }
.md-body pre { background: #0C1A14; color: #E5E7EB; border-radius: var(--radius); padding: 1rem 1.2rem; overflow-x: auto; font-size: .875rem; line-height: 1.55; }
.md-body pre code { background: none; padding: 0; color: inherit; }
.md-body blockquote { border-left: 3px solid var(--green); padding: .25rem 0 .25rem 1.1rem; color: #374151; font-style: italic; }
.md-body hr { border: 0; border-top: 1px solid var(--border-gray); margin: 2.5rem 0; }
.md-body figure { margin: 1.75rem 0 1.75rem; }
.md-body figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border-gray); box-shadow: var(--shadow-sm); }
.md-body figcaption { font-size: .85rem; color: #6B7280; margin-top: .5rem; text-align: center; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border-gray); border-radius: var(--radius); margin: 1.25rem 0 1.5rem; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 32rem; }
.table-wrap th { text-align: left; background: #F9FAFB; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; color: #4B5563; padding: .7rem .9rem; border-bottom: 1px solid var(--border-gray); }
.table-wrap td { padding: .7rem .9rem; border-bottom: 1px solid #F3F4F6; vertical-align: top; }
.table-wrap tr:last-child td { border-bottom: 0; }
.callout { border-radius: var(--radius); padding: 1rem 1.2rem; border: 1px solid; margin: 1.25rem 0 1.5rem; }
.callout p { margin: 0; }
.callout p + p { margin-top: .6rem; }
.callout ul, .callout ol { margin-bottom: 0; }
.callout ul, .callout ol { margin: .5rem 0 0 1.25rem; }
.callout-label { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .4rem !important; }
.callout-note { background: #F0F9FF; border-color: #BAE6FD; } .callout-note .callout-label { color: #0369A1; }
.callout-tip { background: var(--surface-alt); border-color: var(--border); } .callout-tip .callout-label { color: var(--green-dark); }
.callout-warning { background: #FFFBEB; border-color: #FDE68A; } .callout-warning .callout-label { color: #B45309; }
.callout-meta { background: #F5F3FF; border-color: #DDD6FE; } .callout-meta .callout-label { color: #6D28D9; }
.callout-example { background: #F9FAFB; border-color: #E5E7EB; } .callout-example .callout-label { color: #374151; }

.faq { margin-top: 3rem; }
.faq h2 { font-size: 1.6rem; margin: 0 0 .75rem; scroll-margin-top: 6rem; }
.faq details { border-bottom: 1px solid var(--border-gray); padding: .9rem 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #9CA3AF; font-weight: 400; flex-shrink: 0; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-a { margin-top: .6rem; color: #374151; line-height: 1.65; font-size: .975rem; }
.faq .faq-a a { color: var(--green-dark); text-decoration: underline; }

.related { margin-top: 3rem; }
.related h2 { font-size: 1.35rem; margin: 0 0 1rem; scroll-margin-top: 6rem; }
.related-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.related-card { display: flex; flex-direction: column; gap: .2rem; background: #fff; border: 1px solid var(--border-gray); border-radius: 12px; padding: .9rem 1rem; text-decoration: none; }
.related-card:hover { border-color: var(--green); }
.related-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9CA3AF; }
.related-title { font-weight: 600; color: var(--text); font-size: .925rem; line-height: 1.35; }

.author-box { display: flex; gap: 1rem; align-items: flex-start; margin-top: 3rem; padding: 1.25rem; border: 1px solid var(--border-gray); border-radius: var(--radius); background: #F9FAFB; }
.author-box img, .author-initials { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.author-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }
.author-name { margin: 0; font-weight: 700; color: var(--text); }
.author-name a { color: inherit; text-decoration: none; }
.author-role { margin: .1rem 0 .5rem; font-size: .85rem; color: #6B7280; }
.author-bio { margin: 0; font-size: .925rem; color: #374151; line-height: 1.55; }

.video-facade { margin: 0 0 2rem; border-radius: var(--radius-lg); overflow: hidden; background: #000; aspect-ratio: 16 / 9; position: relative; }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; cursor: pointer; padding: 0; }
.video-play img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.video-btn { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--green); box-shadow: var(--shadow-green); }
.video-btn::after { content: ""; position: absolute; left: 29px; top: 22px; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }

.cta-band { background: var(--dark); color: #fff; padding: 4rem 1rem; text-align: center; }
.cta-band-inner { max-width: 64rem; margin: 0 auto; }
.cta-band h2 { color: #fff; font-size: 1.9rem; margin: 0 0 .75rem; text-wrap: balance; }
.cta-band p { color: #A7F3D0; margin: 0 0 1.5rem; font-size: 1.05rem; }
.cta-band .hero-ctas { justify-content: center; }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* hubs */
.hub-wrap { max-width: 80rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.hub-section { margin-top: 2.5rem; }
.hub-section > h2 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .5rem; }
.hub-section > h2 + .hub-grid, .hub-section > h2 + ul, .hub-section > h2 + .glossary-index { margin-top: 1rem; }
.hub-section > p { color: #6B7280; margin: 0 0 1.1rem; }
.hub-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.hub-card { display: block; background: #fff; border: 1px solid var(--border-gray); border-radius: var(--radius); padding: 1.1rem 1.2rem; text-decoration: none; }
.hub-card:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.hub-card h3 { font-size: 1.05rem; line-height: 1.35; margin: 0 0 .5rem; color: var(--text); text-wrap: pretty; }
.hub-card .tag { margin-bottom: .25rem; }
.hub-card p { margin: 0; font-size: .9rem; color: #6B7280; line-height: 1.5; }
.hub-card .hub-meta { display: block; margin-top: .6rem; font-size: .75rem; color: #9CA3AF; }
.hub-search { position: relative; max-width: 40rem; margin: 1.5rem 0 0; }
.hub-search input { width: 100%; font: inherit; font-size: 1rem; padding: .85rem 1rem .85rem 2.75rem; border: 1px solid var(--border-gray); border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z'/%3E%3C/svg%3E") no-repeat .9rem center / 1.2rem; }
.hub-search input:focus { outline: 2px solid var(--green); border-color: transparent; }
#help-results { position: absolute; left: 0; right: 0; top: calc(100% + .4rem); background: #fff; border: 1px solid var(--border-gray); border-radius: 12px; box-shadow: var(--shadow-md); z-index: 50; overflow: hidden; }
#help-results a { display: block; padding: .7rem 1rem; text-decoration: none; border-bottom: 1px solid #F3F4F6; }
#help-results a strong { display: block; color: var(--text); font-size: .95rem; }
#help-results a span { display: block; color: #6B7280; font-size: .825rem; }
#help-results a:hover { background: var(--surface-alt); }
#help-results .no-results { padding: .9rem 1rem; margin: 0; color: #6B7280; font-size: .9rem; }
.glossary-index { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }
.glossary-index a { display: inline-block; padding: .3rem .6rem; border: 1px solid var(--border-gray); border-radius: 8px; font-size: .85rem; font-weight: 600; color: #374151; text-decoration: none; }
.glossary-index a:hover { border-color: var(--green); color: var(--green-dark); }
.changelog-entry { border-left: 2px solid var(--border); padding: 0 0 2rem 1.5rem; position: relative; }
.changelog-entry::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.changelog-entry time { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.changelog-entry h3 { margin: .3rem 0 .5rem; font-size: 1.15rem; }
.changelog-entry h3 a { color: var(--text); text-decoration: none; }
.tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; background: var(--surface-alt); color: var(--green-dark); border: 1px solid var(--border); }

/* global heading rhythm: tight line-height on all headings, consistent gap after h2 */
h1, h2, h3, h4 { line-height: 1.2; }
h3, h4 { line-height: 1.3; }
.md-body h2 { margin-bottom: 1rem; }

.hub-grid-3 { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.25rem; }
.hub-grid-3 .hub-card { padding: 1.4rem 1.5rem; }

.side-links { background: #fff; border: 1px solid var(--border-gray); border-radius: var(--radius); padding: 1rem 1.1rem; }
.side-links .side-title { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6B7280; }
.side-links a { display: block; font-size: .875rem; color: #374151; padding: .3rem 0; text-decoration: none; }
.side-links a:hover { color: var(--green-dark); }
.side-links a strong { display: block; color: var(--text); font-weight: 600; }
.side-links a span { display: block; color: #6B7280; font-size: .8rem; }

/* ── Mobile UI/UX standard ─────────────────────────────────────
   One rhythm for every content page. See docs/MOBILE_UIUX_STANDARD.md.
   Phone (<=640px): 16px gutter, 40px section rhythm, 24px block rhythm,
   44px minimum tap target. Tablet (641-1023px): 48px section rhythm. */

/* On this page: the sidebar TOC sits after the article in source order, so
   below the two-column breakpoint it is dead weight at the bottom. The
   article carries a collapsed copy at the top instead. */
.toc-m { display: none; }
@media (max-width: 1023px) {
  .doc-side .toc { display: none; }
  .toc-m { display: block; background: #fff; border: 1px solid var(--border-gray); border-radius: var(--radius); margin: 0 0 1.5rem; }
  .toc-m > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .5rem 1rem; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; list-style: none; }
  .toc-m > summary::after { content: ""; flex: none; width: .45rem; height: .45rem; margin-right: .3rem; border-right: 2px solid #9CA3AF; border-bottom: 2px solid #9CA3AF; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
  .toc-m[open] > summary::after { transform: rotate(-135deg); }
  .toc-m ol { list-style: none; margin: 0; padding: 0 1rem .75rem; display: flex; flex-direction: column; }
  .toc-m a { display: block; font-size: .9375rem; color: #374151; padding: .5rem .25rem; text-decoration: none; line-height: 1.35; border-top: 1px solid #F3F4F6; }
}

/* Collapsible sidebar groups: open markup for crawlers and desktop, closed on
   a phone so a 40-link list does not tail every article. main.js toggles. */
.side-group > summary, .side-links > summary { list-style: none; }
.side-group > summary::-webkit-details-marker, .side-links > summary::-webkit-details-marker { display: none; }
@media (min-width: 641px) {
  details.side-group > summary, details.side-links > summary { cursor: default; pointer-events: none; }
}
@media (max-width: 640px) {
  details.side-group > summary, details.side-links > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; margin: 0; cursor: pointer; }
  details.side-group > summary::after, details.side-links > summary::after { content: ""; flex: none; width: .45rem; height: .45rem; margin-right: .3rem; border-right: 2px solid #9CA3AF; border-bottom: 2px solid #9CA3AF; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
  details.side-group[open] > summary::after, details.side-links[open] > summary::after { transform: rotate(-135deg); }
  details.side-group > summary + *, details.side-links > summary + * { margin-top: .5rem; }
}

@media (max-width: 1023px) {
  .doc-layout { padding: 2rem 1rem 3rem; gap: 2rem; }
}
@media (max-width: 640px) {
  .doc-hero { padding: 6rem 1rem 1.75rem; }
  .doc-hero .crumbs { gap: .35rem; margin-bottom: .8rem; font-size: .8125rem; }
  .doc-hero .eyebrow { margin-bottom: .45rem; }
  .doc-hero h1 { font-size: clamp(1.8rem, 7.4vw, 2.3rem); margin-bottom: .7rem; }
  .doc-hero .lede { font-size: 1.0313rem; line-height: 1.6; margin-bottom: .85rem; }
  .doc-hero .meta-line, .doc-hero .plan-note { margin-bottom: .9rem; }
  .hero-ctas { gap: .5rem; }
  .hero-ctas > * { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  .doc-layout { padding: 1.5rem 1rem 2.5rem; gap: 1.75rem; }
  .doc-side-inner { gap: .85rem; }
  .toc, .side-group, .side-links, .side-cta { padding: .9rem 1rem; }

  .hero-shot, .summary-box, .video-facade { margin-bottom: 1.5rem; }
  .summary-box { padding: 1rem 1.1rem; }
  .md-body { font-size: 1.0313rem; }
  .md-body h2 { font-size: 1.4rem; margin-top: 2rem; }
  .md-body h3 { font-size: 1.125rem; margin-top: 1.5rem; }
  .md-body h4 { margin-top: 1.25rem; }
  .md-body figure { margin: 1.25rem 0; }
  .md-body hr { margin: 1.75rem 0; }
  .md-body pre { padding: .85rem 1rem; }
  .table-wrap { margin: 1rem 0 1.25rem; }
  .callout { padding: .9rem 1rem; margin: 1rem 0 1.25rem; }

  .faq, .related, .author-box { margin-top: 2rem; }
  .faq h2 { font-size: 1.4rem; }
  .faq details { padding: .35rem 0; }
  .faq summary { min-height: 44px; align-items: center; }
  .related h2 { font-size: 1.2rem; margin-bottom: .75rem; }
  .related-grid { gap: .6rem; }
  .related-card { padding: .8rem .9rem; }
  .author-box { padding: 1rem; gap: .85rem; }
  .author-box img, .author-initials { width: 48px; height: 48px; }

  .cta-band { padding: 2.5rem 1rem; }
  .cta-band h2 { font-size: 1.5rem; }
  .cta-band p { font-size: .975rem; margin-bottom: 1.1rem; }

  .hub-wrap { padding: 1.5rem 1rem 2.5rem; }
  .hub-section { margin-top: 2rem; }
  .hub-section > h2 { font-size: 1.3rem; }
  .hub-section > p { margin-bottom: .9rem; font-size: .95rem; }
  .hub-grid, .hub-grid-3 { gap: .75rem; }
  .hub-card { padding: .95rem 1.05rem; }
  .hub-grid-3 .hub-card { padding: 1rem 1.1rem; }
  .hub-card h3 { font-size: 1rem; }
  .hub-search { margin-top: 1.1rem; }
  .glossary-index { gap: .35rem; }
  .glossary-index a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: .3rem .55rem; }
  .changelog-entry { padding-bottom: 1.5rem; padding-left: 1.1rem; }
}

/* ── Generated figures (figures.js) ────────────────────────────
   Diagrams built from each page's own data. Everything except the WhatsApp
   message preview is HTML, so labels keep their real size on a phone instead
   of being scaled down with a fixed-width drawing. */
.md-body .fig { margin: 1.75rem 0; }
.md-body .fig figcaption {
  margin-top: .6rem; font-size: .85rem; color: #6B7280; line-height: 1.5;
  max-width: 40rem; text-align: left;
}
.md-body .fig .fig-svg {
  display: block; width: 100%; height: auto; max-width: 30rem;
  border-radius: var(--radius); overflow: hidden;
}

.fig-card {
  background: #fff; border: 1px solid var(--border-gray); border-radius: var(--radius);
  padding: 1.15rem 1.25rem; max-width: 40rem;
}
.fig-title {
  margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: .975rem; color: var(--text); line-height: 1.35;
}
.fig-sub { margin: .3rem 0 0; font-size: .85rem; color: #6B7280; line-height: 1.5; }
.fig-rows { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }

.fig-row { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: .75rem; }
.fig-label { font-size: .875rem; color: var(--text); }
.fig-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .875rem; font-variant-numeric: tabular-nums; }
.fig-bar { display: block; height: 14px; border-radius: 7px; background: var(--surface-alt); overflow: hidden; }
.fig-bar i { display: block; height: 100%; border-radius: 7px; background: var(--green); }
.fig-bar.is-blue i { background: #3B82F6; }
.fig-bar.is-violet i { background: #8B5CF6; }
.fig-bar.is-grey i { background: #CBD5D0; }

.fig-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .5rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--border-gray);
  font-size: .85rem; color: #6B7280;
}
.fig-foot b {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; color: var(--green-dark);
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
}
.fig-foot b em { font-style: normal; font-size: .75rem; color: #9CA3AF; font-weight: 500; }

.fig-legend { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0; font-size: .8rem; color: #6B7280; }
.fig-legend .k { width: 10px; height: 10px; border-radius: 3px; background: var(--green); }
.fig-legend .k.is-grey { background: #CBD5D0; margin-left: .9rem; }
.fig-pair { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: .75rem; }
.fig-pair-bars { display: flex; flex-direction: column; gap: .3rem; }
.fig-line { display: grid; grid-template-columns: 1fr 5.5rem; align-items: center; gap: .6rem; }
.fig-line b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8125rem; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.fig-line b.is-muted { color: #6B7280; }

.fig-window { margin-top: 1.1rem; }
.fig-track { position: relative; height: 10px; border-radius: 5px; background: var(--border-gray); }
.fig-track i { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.fig-mark { position: absolute; top: -7px; width: 2px; height: 24px; background: #F59E0B; }
.fig-window-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .8rem; }
.fig-window-labels div { display: flex; flex-direction: column; }
.fig-window-labels .is-mid { text-align: center; }
.fig-window-labels .is-end { text-align: right; }
.fig-window-labels b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8125rem; color: var(--text); }
.fig-window-labels span { font-size: .75rem; color: #6B7280; }

.fig-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; align-items: end; margin-top: 1.1rem; }
.fig-tier { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.fig-tier span { display: block; width: 100%; border-radius: 8px 8px 0 0; background: var(--surface-alt); border: 1px solid var(--border); border-bottom: 0; }
.fig-tier.is-current span { background: var(--green); border-color: var(--green); }
.fig-tier b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8125rem; color: var(--green-dark); }
.fig-tier.is-current b { color: var(--text); }
.fig-tier em { font-style: normal; font-size: .7rem; color: #9CA3AF; }

.fig-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; }
.fig-steps li {
  flex: 1 1 8.5rem; margin: 0; display: flex; align-items: center; gap: .5rem;
  background: #FAFBF9; border: 1px solid var(--border-gray); border-radius: 10px;
  padding: .6rem .7rem; font-size: .85rem; color: var(--text); line-height: 1.35;
}
.fig-steps li.is-last { background: var(--surface-alt); border-color: var(--border); }
.fig-step-n {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--green);
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.fig-term {
  background: var(--dark); border-radius: var(--radius); padding: 1.15rem 1.25rem 1.25rem;
  border-left: 4px solid var(--green); max-width: 40rem;
}
.fig-term-cat { margin: 0 0 .35rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: #5EE0B5; }
.fig-term-name { margin: 0 0 .5rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.2; }
.fig-term-def { margin: 0; font-size: .925rem; line-height: 1.6; color: #CFEFE2; }
.fig-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }
.fig-chips span { font-size: .75rem; color: #9ED9C4; background: #0F2A20; border: 1px solid #1E4535; border-radius: 999px; padding: .25rem .6rem; }

@media (max-width: 640px) {
  .md-body .fig { margin: 1.25rem 0; }
  .md-body .fig figcaption { font-size: .8125rem; }
  .fig-card, .fig-term { padding: 1rem 1.05rem; }
  .fig-row { grid-template-columns: 6.5rem 1fr auto; gap: .5rem; }
  .fig-pair { grid-template-columns: 1fr; gap: .35rem; }
  .fig-line { grid-template-columns: 1fr 5rem; }
  .fig-steps li { flex: 1 1 100%; }
  .fig-tiers { gap: .3rem; }
  .fig-tier em { display: none; }
  .fig-window-labels { grid-template-columns: 1fr; gap: .4rem; }
  .fig-window-labels .is-mid, .fig-window-labels .is-end { text-align: left; }
  .fig-foot b { font-size: 1.1rem; }
}