/* Shared components for content and landing pages (how it works, use cases, topic pages) */

/* Page opening */
.page-hero { background: var(--white); padding: 56px 0 96px; }
.page-hero h1 { font-size: clamp(44px, 6vw, 80px); line-height: .96; font-weight: 800; font-stretch: 82%; letter-spacing: -.02em; color: var(--violet-900); margin: 0 0 28px; max-width: 15em; }
.page-hero .sub { font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; color: var(--text); margin: 0; max-width: 36em; }
.page-hero .actions { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; margin-top: 40px; }

.text-link { font-size: 16px; font-weight: 500; color: var(--violet-500); text-underline-offset: 4px; }
.text-link:hover { color: var(--violet-900); }

/* Sections */
.block { padding: 0 0 112px; }
.block .section-h { margin-bottom: 32px; }
.block .intro { font-size: 17px; color: var(--muted); max-width: 40em; margin: -12px 0 32px; }

/* Rows: title on the left, text on the right, separated by rules */
.rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--violet-500); }
.row { display: grid; grid-template-columns: 4fr 8fr; column-gap: 40px; padding: 32px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.row h3 { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; font-weight: 700; color: var(--violet-900); margin: 0; }
.row .body p { font-size: 16px; line-height: 1.6; color: var(--text); margin: 0 0 12px; max-width: 42em; }
.row .body p:last-child { margin-bottom: 0; }
.row .label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--violet-500); margin-bottom: 2px; }
.row .links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; }
.row .links a { font-size: 15px; font-weight: 500; color: var(--violet-500); text-underline-offset: 4px; }
.row .links a:hover { color: var(--violet-900); }

/* Text next to a figure */
.split { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.split .body p { font-size: 17px; line-height: 1.6; margin: 0 0 16px; max-width: 34em; }
.split .body p:last-child { margin-bottom: 0; }
.split .body strong { color: var(--violet-900); font-weight: 500; }

/* Three short columns */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cols3 > div { border-top: 2px solid var(--violet-500); padding-top: 20px; }
.cols3 h3 { font-size: 20px; font-weight: 600; color: var(--violet-900); margin: 0 0 8px; }
.cols3 p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
.cols3 .text-link { display: inline-block; margin-top: 12px; font-size: 15px; }
.cols3 .step { display: block; font-family: var(--display); font-stretch: 88%; font-size: 44px; font-weight: 400; line-height: 1; color: var(--violet-200); margin-bottom: 14px; }

/* Context diagram */
.diagram { margin: 0; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .axis { stroke: var(--rule); stroke-width: 1.5; }
.diagram .grow { stroke: #a79fb4; stroke-width: 2.5; stroke-dasharray: 6 6; fill: none; }
.diagram .flat { stroke: var(--violet-500); stroke-width: 3.5; fill: none; }
.diagram text { font-family: Roboto, sans-serif; font-size: 14px; fill: var(--muted); }
.diagram .lbl-flat { fill: var(--violet-900); font-weight: 500; }
.diagram figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* Inline code */
main code { font-family: "Roboto Mono", ui-monospace, monospace; font-size: .9em; color: var(--violet-900); background: #f4f1f8; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

@media (max-width: 960px) {
  .page-hero { padding-bottom: 72px; }
  .block { padding-bottom: 88px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .cols3 { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; row-gap: 12px; }
}