/* Learn: the hub, the listing pages and the articles. Colours from the palette, type sizes from the --fs-* roles,
   spacing from --space-*. */
.learn-page { --callout-radius: 16px; --st-radius: 16; }

/* ---- article hero */
.learn-hero { --fs-article-hero: var(--fs-hero); --article-title-measure: 22ch; --article-crumb-link: var(--fg-weaker); padding-top: calc(var(--bar-clearance) + var(--space-l)); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--border-default); }
.learn-hero .article-crumbs { font-weight: 500; color: var(--fg-weaker); }
.learn-hero .article-crumbs a { color: var(--fg-weaker); }
.learn-hero .eyebrow-pill { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-moss-9); }
.learn-hero h1 { color: var(--fg-default); letter-spacing: -0.04em; }
.learn-hero .article-lede { max-width: 42rem; font-size: var(--fs-lead); color: var(--fg-weak); }
.learn-hero .article-actions { display: grid; justify-items: start; gap: var(--space-s); margin-top: var(--space-xs); }
.learn-hero .article-byline { font-size: var(--fs-caption); color: var(--fg-weaker); }

/* ---- article body */
.learn-article .article-layout { --article-aside: 260px; --article-gap: var(--space-xl); }
.learn-body { display: grid; gap: var(--space-xl); min-width: 0; }
.learn-section { display: grid; gap: var(--space-m); min-width: 0; }
.learn-section > p, .learn-list > li { font-size: var(--fs-lead); font-weight: 400; line-height: 1.6; color: var(--fg-weak); }
.learn-section strong { color: var(--fg-default); }
.learn-section a:not(.post-card, .strata, .text-link, [class*='btn']) { color: var(--color-moss-9); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-moss-9) 40%, transparent); text-underline-offset: 3px; }
.learn-section a:not(.post-card, .strata, .text-link, [class*='btn']):hover { text-decoration-color: currentColor; }
.learn-section > h2 { margin-top: var(--space-l); font-size: var(--fs-headline); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; color: var(--fg-default); text-wrap: balance; scroll-margin-top: 7rem; }
.learn-section > h2:first-child { margin-top: 0; }
.learn-section > h3 { margin-top: var(--space-xs); font-size: var(--fs-feature); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--fg-default); scroll-margin-top: 7rem; }
.learn-lead { font-size: var(--fs-lead); font-weight: 400; color: var(--fg-weak); }
.learn-note, .learn-result { font-size: var(--fs-small); color: var(--fg-weak); }
.learn-list { display: grid; gap: var(--space-xs); padding-left: 1.5em; list-style: disc; }
ol.learn-list { list-style: decimal; }
.learn-list > li::marker { color: var(--color-moss-9); }

.learn-answer p { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-default); }
.learn-takeaways li { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-weak); }

.learn-boiler { display: grid; gap: var(--space-s); }
.learn-boiler > p { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-weak); }

.learn-agent, .learn-cta, .learn-series-intro { --card-face: var(--color-neutral-3); --st-edge: 0; --card-pad: var(--space-l); --fs-card: var(--fs-feature); }
.learn-agent .card-label, .learn-series-intro .card-label { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-moss-9); }
.learn-agent .card-detail { display: grid; gap: var(--space-s); }
.learn-agent .learn-list > li { font-size: var(--fs-small); }
.learn-agent-to { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--fs-caption); color: var(--fg-weaker); }
.learn-cta .card-detail { margin-top: var(--space-s); }
.learn-series-intro { --card-face: var(--bg-surface-raised); --st-edge: 1.5; }

.learn-related, .learn-series { display: grid; gap: var(--space-s); }
.learn-series > h3 { font-size: var(--fs-feature); font-weight: 700; color: var(--fg-default); scroll-margin-top: 7rem; }
.learn-series { scroll-margin-top: 7rem; }

.learn-article .toc { --toc-title-size: var(--fs-eyebrow); --toc-title-tracking: 0.18em; --toc-title-color: var(--fg-weaker); --fs-toc: var(--fs-small); }

/* ---- library: hub and listing pages */
.learn-library-hero { padding-top: calc(var(--bar-clearance) + var(--space-l)); }
.learn-library-hero .learn-eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-moss-9); }
.learn-library-hero .learn-eyebrow a:hover { text-decoration: underline; }
.learn-library-hero h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--color-moss-9); }
.learn-library-hero .learn-hero-lede { max-width: 34rem; font-size: var(--fs-lead); color: var(--fg-weak); }
.learn-hero-art { overflow: hidden; border-radius: calc(var(--callout-radius) * 1.5); background: var(--color-pond-5); }
.learn-hero-art img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.learn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); padding-top: var(--space-m); border-top: 1px solid var(--border-default); }
.learn-search { position: relative; width: min(100%, 20rem); }
.learn-search svg { position: absolute; inset: 0 auto 0 var(--space-s); margin: auto 0; color: var(--fg-weaker); pointer-events: none; }
.learn-search input { width: 100%; height: 2.5rem; padding: 0 var(--space-s) 0 calc(var(--space-s) * 2 + 1rem); border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-surface-raised); font-size: var(--fs-small); color: var(--fg-default); outline: none; }
.learn-search input:focus { border-color: var(--color-moss-9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-moss-9) 18%, transparent); }
.learn-nav { display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; }
.learn-nav a { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 var(--space-s); border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-surface-raised); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; color: var(--fg-default); }
.learn-nav a:hover { border-color: var(--fg-weaker); }
.learn-nav a[aria-current='page'] { border-color: var(--color-moss-9); background: var(--color-moss-9); color: var(--fg-on-brand); }
.learn-status { width: 100%; font-size: var(--fs-small); color: var(--fg-weak); }
.learn-cards { display: grid; column-gap: var(--space-s); margin-bottom: calc(-1 * var(--space-s)); }
.learn-cards > *::after { height: var(--space-s); }
@media (min-width: 768px) { .learn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .learn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.learn-library-section { gap: var(--space-m); }
.learn-library-section > header h2 { font-size: var(--fs-headline); font-weight: 700; letter-spacing: -0.03em; }
.learn-library-section > header .text-link { color: var(--color-moss-9); font-size: var(--fs-small); font-weight: 600; }

.learn-research { --card-pad: var(--space-l); }
.learn-research .card-face { gap: var(--space-s); }
.learn-research-stats { display: grid; gap: var(--space-s); padding: var(--space-m); border-radius: var(--callout-radius); background: var(--color-pond-3); }
.learn-research-stats b { display: block; font-size: var(--fs-headline); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--color-moss-9); }
.learn-research-stats span { font-size: var(--fs-caption); color: var(--fg-weak); }
.learn-research-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.learn-research-meta > span:last-child { padding: 0.2em 0.7em; border-radius: 999px; background: var(--color-lily-3); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-moss-9); }
@media (min-width: 900px) { .learn-research > .card-face { grid-template-columns: minmax(0, 1fr) 16rem; column-gap: var(--space-xl); } .learn-research > .card-face > * { grid-column: 1; } .learn-research > .card-face > .card-slot-art { grid-column: 2; grid-row: 1 / span 4; align-self: center; } }

.learn-closing { --panel-face: var(--bg-surface-raised); --panel-text: var(--fg-default); --st-edge: 1.5; }
.learn-closing .closing-title { color: var(--fg-default); }
.learn-closing-art { align-self: stretch; width: 100%; height: 100%; object-fit: cover; border-radius: var(--callout-radius); background: var(--color-moss-3); }

/* ---- comparisons */
.learn-cmp-section { gap: var(--space-m); }
.learn-cmp-title { font-size: var(--fs-headline); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; color: var(--fg-default); text-wrap: balance; }
.learn-cmp-row { display: grid; gap: var(--space-xl); align-items: start; }
.learn-cmp-row:not([data-layout='split']) > .learn-section { max-width: 48rem; }
@media (min-width: 992px) { .learn-cmp-row[data-layout='split'][data-visual] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 640px) { .learn-glance tbody th { width: 22%; } }
.learn-glance tbody td:last-child { background: var(--color-moss-2); color: var(--fg-default); }
.learn-page a[href^='#src-'] { margin-left: 1px; font-size: 0.72em; vertical-align: super; text-decoration: none; color: var(--color-moss-9); }
.learn-choice { --card-pad: var(--space-l); }
.learn-choice.is-both { --card-face: var(--color-lily-3); --card-line: var(--color-moss-9); }
.learn-choice .card-body { color: var(--fg-default); }
.learn-choice .card-label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-moss-9); }
.learn-anchor { position: absolute; top: 0; scroll-margin-top: 7rem; }

/* Library rhythm: Learn Dev keeps the hub and listings tighter than the marketing pages. */
.learn-hub > [data-sheet], .learn-listing > [data-sheet], .learn-hub .learn-library-section, .learn-listing .learn-library-section { --sheet-pad: var(--space-l); }
.learn-library-hero { padding-bottom: 0; }
.learn-toolbar-sheet { margin-top: calc(var(--space-l) * -1); }
.learn-library-section > header h2 { font-size: var(--fs-feature); }
.learn-library-section > header p { color: var(--fg-default); }

/* Article type, to Learn Dev's measure: darker body text, smaller section headings. */
.learn-section > p, .learn-list > li, .learn-takeaways li, .learn-boiler > p { color: color-mix(in srgb, var(--fg-default) 82%, transparent); }
.learn-section > h2 { font-size: calc(var(--fs-headline) * 0.75); }
.learn-section > h3 { font-size: var(--fs-lead); }
.learn-section { gap: var(--space-s); }
.learn-cta { --fs-card: var(--fs-lead); --card-pad: var(--space-m); }
.learn-agent { --fs-card: var(--fs-feature); }

/* Comparison measure: Learn Dev's 1120px column, small green eyebrows, full-size section headings. */
.learn-comparison > [data-sheet] { --content: calc(1120px + 2 * var(--gutter, 48px)); }
.learn-cmp-row > .learn-section > p.callout-label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.12em; color: var(--color-moss-9); }
.learn-cmp-row > .learn-section > h2 { font-size: var(--fs-headline); }
.learn-comparison .learn-section > p, .learn-comparison .learn-section .learn-list > li { font-size: var(--fs-body); }
.learn-cmp-row[data-layout='loose'] > .learn-section { max-width: 56rem; }
.learn-comparison .diagram-board { padding: 0; background: none; }
.learn-comparison .diagram-board[data-layout='row'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
@media (max-width: 639px) { .learn-glance tbody td:last-child { margin-top: var(--space-xs); padding: var(--space-xs) var(--space-s); border-radius: 10px; background: var(--color-lily-3); } }

/* Articles sit in Learn Dev's 1160px column; research reads at body size. */
.learn-article > [data-sheet] { --content: calc(1160px + 2 * var(--gutter, 48px)); }
.learn-article.is-research .learn-section > p, .learn-article.is-research .learn-list > li { font-size: var(--fs-body); }

/* ---- known issues (pilot review) */
/* Learn Dev's badges are plain green small caps: no chip, no dot. */
.learn-page .eyebrow-pill { gap: 0; padding: 0; border: 0; background: none; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-moss-9); }
.learn-page .eyebrow-pill::before, .learn-page .eyebrow-pill::after { content: none; }

/* Article hero, to Learn Dev's rhythm: crumbs, badge, title and lede close together; buttons and byline a step below. */
.learn-page .learn-hero { row-gap: var(--space-s); padding-top: calc(var(--bar-clearance) + var(--space-xl)); padding-bottom: var(--space-l); }
.learn-page .learn-hero .article-crumbs { margin-bottom: var(--space-2xs); }
.learn-page .learn-hero .article-lede { margin-top: var(--space-2xs); }
.learn-page .learn-hero .article-actions { margin-top: var(--space-s); gap: var(--space-s); }

/* Hub and listings: Learn Dev's tighter rhythm between the hero, the toolbar and the first section. */
.learn-page .learn-library-hero { padding-top: calc(var(--bar-clearance) + var(--space-m)); padding-bottom: var(--space-m); }
.learn-page .learn-toolbar-sheet { margin-top: calc(var(--space-xl) * -1); --sheet-pad: 0px; }
.learn-hub .learn-library-section, .learn-listing .learn-library-section { --sheet-pad: var(--space-l); gap: var(--space-m); }
.learn-hub .learn-library-section + .learn-library-section, .learn-listing .learn-library-section + .learn-library-section { margin-top: calc(var(--space-l) * -1); }
/* The page puts --section-gap between sections; the library keeps them closer, as Learn Dev does. */
.learn-page .learn-library-hero { padding-top: calc(var(--bar-clearance) - var(--space-m)); }
.learn-page .learn-toolbar-sheet { margin-top: calc(var(--section-gap) * -1 + var(--space-xs)); }
.learn-hub .learn-library-section, .learn-listing .learn-library-section { margin-top: calc(var(--section-gap) * -1); }
.learn-hub .learn-library-section + .learn-library-section, .learn-listing .learn-library-section + .learn-library-section { margin-top: calc(var(--section-gap) * -1 + var(--space-l)); }
.learn-hub .learn-closing-sheet, .learn-listing .learn-closing-sheet { margin-top: calc(var(--section-gap) * -0.5); }
.learn-page .learn-library-section header a.text-link { color: var(--color-moss-9); }
.learn-page .learn-library-section header a.text-link:hover { color: var(--color-moss-10); }
/* The hero sits in its own wrapper, so the article and comparison column widths are set on every sheet. */
.learn-article [data-sheet] { --content: calc(1160px + 2 * var(--gutter, 48px)); }
.learn-comparison [data-sheet] { --content: calc(1120px + 2 * var(--gutter, 48px)); }
.learn-page .learn-hero { padding-top: calc(var(--bar-clearance) + var(--space-s)); }
.learn-article .article-layout { margin-top: calc(var(--section-gap) * -0.4); }
.learn-choice-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.learn-choice-label > svg { flex: none; color: var(--color-moss-9); }
.learn-choice { --fs-card: var(--fs-feature); }

/* Agents: the ready-made agent with an example brief, and the grid of agent cards. */
.learn-agent.has-brief.card-art-beside > .card-face { grid-template-columns: minmax(0, 1fr); column-gap: var(--space-l); }
.learn-agent.has-brief.card-art-beside > .card-face > * { grid-column: 1; }
.learn-agent.has-brief.card-art-beside > .card-face > .card-slot-art { grid-row: auto; order: 9; margin-top: var(--space-m); }
@media (min-width: 900px) {
  .learn-agent.has-brief.card-art-beside > .card-face { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .learn-agent.has-brief.card-art-beside > .card-face > .card-slot-art { grid-column: 2; grid-row: 1 / span 6; align-self: start; margin-top: 0; }
}
.learn-agent-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); }
.learn-agent-acts .text-link { color: var(--color-moss-9); font-weight: 600; }
.learn-brief { display: grid; gap: var(--space-xs); margin: 0; padding: var(--space-m); border: 1px solid var(--border-default); border-radius: var(--callout-radius); background: var(--bg-surface-raised); font-size: var(--fs-small); }
.learn-brief-head { display: flex; align-items: center; gap: var(--space-xs); }
.learn-brief-head > span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-moss-9); font-size: var(--fs-caption); font-weight: 700; color: var(--fg-on-brand); }
.learn-brief-head small { margin-left: auto; font-size: var(--fs-caption); color: var(--fg-weaker); }
.learn-brief-title { font-weight: 700; color: var(--fg-default); }
.learn-facts { display: grid; gap: var(--space-2xs); }
.learn-facts dt { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-weaker); }
.learn-facts dd { font-size: var(--fs-small); color: var(--fg-weak); }
.learn-brief-draft { margin: 0; padding: var(--space-xs) var(--space-s); border-left: 3px solid var(--color-moss-6); background: var(--color-neutral-2); font-style: italic; color: var(--fg-weak); }
.learn-brief-draft small { display: block; font-style: normal; font-size: var(--fs-caption); color: var(--fg-weaker); }
.learn-agents { display: grid; gap: var(--space-s); }
.learn-agents > .text-link { color: var(--color-moss-9); font-weight: 600; }
.learn-agent-card { --card-pad: var(--space-m); --fs-card: var(--fs-lead); }
.learn-agent-card .card-label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-moss-9); }
.learn-agent-card .card-title a:hover { text-decoration: underline; }
.learn-page :is(.diagram-list, .learn-list) small { margin-left: var(--space-xs); padding: 0.1em 0.6em; border-radius: 999px; background: var(--color-neutral-3); font-size: var(--fs-caption); font-weight: 600; color: var(--fg-weaker); white-space: nowrap; }
.learn-result::before { content: '✓ '; color: var(--color-moss-9); font-weight: 700; }

.learn-side-card { --card-pad: var(--space-m); --fs-card: var(--fs-lead); margin-top: var(--space-m); }
.learn-side-card .card-detail { margin-top: var(--space-s); }
.learn-answer p.callout-label { font-size: var(--fs-eyebrow); line-height: 1.2; color: var(--color-moss-9); }

/* Research reports and ebook playbooks */
.learn-avatar { display: inline-block; width: 2.5rem; height: 2.5rem; margin-right: var(--space-xs); border-radius: 50%; vertical-align: middle; object-fit: cover; }
.learn-article.is-report .learn-hero .article-byline { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-small); color: var(--fg-weak); }
.learn-article.is-report .learn-hero .article-byline strong { color: var(--fg-default); }
.learn-article.is-ebook .learn-hero h1 { max-width: 24ch; }
.learn-callout p { font-size: var(--fs-body); color: var(--fg-weak); }
.learn-callout .callout-label { font-size: var(--fs-lead); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--fg-default); }
.learn-image { display: grid; gap: var(--space-xs); margin: 0; padding: var(--space-m); border-radius: calc(var(--callout-radius) * 1.5); background: var(--color-neutral-3); }
.learn-image img { width: 100%; height: auto; border-radius: var(--callout-radius); }
.learn-image figcaption { font-size: var(--fs-caption); color: var(--fg-weak); }
.learn-section > h4 { font-size: var(--fs-body); font-weight: 700; color: var(--fg-default); }
.learn-share { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--border-default); }
.diagram-image { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.diagram-link { color: var(--color-moss-9); font-weight: 600; }
.diagram-card.is-payoff { --card-face: var(--bg-surface-raised); }
.learn-closing.is-light-green { --panel-face: var(--color-lily-3); --card-line: var(--color-lily-6); }
.diagram-row:has(> .diagram-split) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.diagram-row > .diagram-split::before { content: none; }
.diagram-row > .diagram-split { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--bg-surface-raised); box-shadow: 0 0 0 1px var(--border-default); }
@media (max-width: 767px) { .diagram-row:has(> .diagram-split) { grid-template-columns: minmax(0, 1fr); justify-items: stretch; } .diagram-row > .diagram-split { justify-self: center; } }

/* Container widths, measured against Learn Dev at 1440, 1100 and 390. The hub and listings are at most 1248px wide
   with a gutter that grows with the screen; articles keep a narrow gutter up to their maximum, and comparisons a wide one (narrow on phones). */
.learn-hub [data-sheet], .learn-listing [data-sheet] { --gutter: clamp(16px, calc(6.5vw - 16px), 80px); --content: calc(1248px + 2 * var(--gutter)); }
.learn-article [data-sheet] { --gutter: var(--space-xs); --content: calc(1160px + 2 * var(--gutter)); }
.learn-comparison [data-sheet] { --gutter: clamp(8px, calc(11.11vw - 16px), 144px); --content: calc(1120px + 2 * var(--gutter)); }
@media (max-width: 767px) { .learn-comparison [data-sheet] { --gutter: var(--space-xs); } }
/* The article starts 72px below the hero at every width, as in Learn Dev: the hero adds no margin of its own, so the
   page's gap between sections sets it. The side column sits 48px from the text; on narrow screens only reports and ebooks keep it (above the text). */
.learn-article .learn-hero { --article-hero-gap: var(--section-gap); }
.learn-article .article-layout { --article-gap: calc(var(--space-l) + var(--space-s)); }
@media (max-width: 991px) { .learn-article:not(.is-report, .is-ebook) .article-aside { display: none; } }
/* The featured research card ends its section the way the card rows do (they pull up by --space-m), so every gap matches. */
.learn-library-section > .learn-research { margin-bottom: calc(-1 * var(--space-m)); }
/* Ebook playbooks list every subsection in the table of contents, as Learn Dev does. */
@media (min-width: 992px) { .learn-article.is-ebook .toc a[data-level='3'] { display: flex; } }