/*
 * PAGE PATTERNS
 * Load after components.css. Content-neutral layouts for service/marketing pages.
 * No page ids, brand names, section numbers or website-only illustrations here.
 */
.container { width: min(calc(100% - var(--page-gutter) * 2), var(--container-width)); margin-inline: auto; }
.page-section { position: relative; padding-block: var(--section-space); }
.section-heading { display: grid; grid-template-columns: var(--grid-split-heading); gap: var(--gap-layout); align-items: end; margin-bottom: var(--section-heading-space); }
.section-heading h2 { max-width: var(--measure-heading); }
.section-heading > p { font-size: var(--font-size-body-lg); line-height: var(--line-height-relaxed); }
.section-heading--stack { display: block; max-width: var(--content-width-medium); }
.section-heading--stack > p { margin-top: var(--space-6); max-width: var(--content-width-narrow); }
.action-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
.card-grid { display: grid; grid-template-columns: var(--grid-columns-3); gap: var(--gap-grid); align-items: stretch; }
.card-grid--two { grid-template-columns: var(--grid-columns-2); }
.card-grid--three { grid-template-columns: var(--grid-columns-3); }
.card-grid--four { grid-template-columns: var(--grid-columns-4); }
.card-grid--top { align-items: start; }
.split-layout { display: grid; grid-template-columns: var(--grid-columns-2); gap: var(--gap-layout); align-items: start; }
.sticky-panel { position: sticky; top: var(--anchor-offset); }
/* Hero with optional editorial illustration. */
.hero-section { padding-top: var(--space-18); padding-bottom: var(--space-16); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: var(--grid-split-balanced); gap: var(--gap-layout); align-items: center; }
.hero-content { min-width: 0; position: relative; z-index: var(--z-illustration); }
.hero-title em { color: var(--color-accent); font-style: italic; }
.hero-lead { font-size: var(--font-size-body-lg); line-height: var(--line-height-relaxed); margin-block: var(--space-7) var(--space-8); max-width: var(--measure-lead); }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4-5); margin-top: var(--space-11); padding-top: var(--space-6); border-top: var(--border-default); }
.hero-tags { display: flex; flex-wrap: wrap; gap: var(--space-7); }
.hero-tags li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-label); color: var(--color-text-muted); }
.hero-tags .icon { color: var(--color-accent); width: var(--icon-size-sm); height: var(--icon-size-sm); }
.scroll-cue { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-family: var(--font-family-mono); font-size: var(--font-size-micro); }
.section-nav { position: sticky; top: var(--header-height); z-index: var(--z-subnav); background: var(--color-surface-glass); backdrop-filter: blur(var(--backdrop-blur)); border-block: var(--border-default); }
.section-nav .container { display: flex; justify-content: space-between; align-items: center; min-height: var(--subnav-height); gap: var(--space-5); }
.section-nav-label { white-space: nowrap; font: var(--font-size-micro) var(--font-family-mono); color: var(--color-text-muted); }
.section-nav-links { display: flex; gap: var(--space-8); white-space: nowrap; }
.section-nav a { display: flex; align-items: center; min-height: var(--subnav-height); font-size: var(--font-size-label); border-bottom: var(--border-width-medium) var(--border-style) var(--color-transparent); }
.section-nav a:hover, .section-nav a[aria-current] { color: var(--color-accent); border-color: var(--color-accent); }
/* Editorial list with icons, an inline callout and a quotation. */
.editorial-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-4); padding-block: var(--space-6); border-top: var(--border-default); }
.editorial-list > li:first-child { padding-top: 0; border-top: 0; }
.editorial-list h3 { font-size: var(--font-size-card); margin-bottom: var(--space-2); }
.editorial-list p { font-size: var(--font-size-body-sm); line-height: var(--line-height-relaxed); }
.insight-band { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-6); margin-top: var(--space-10); padding: var(--space-7) var(--space-8); border: var(--border-default); border-radius: var(--radius-md); background: var(--color-surface-secondary); }
.insight-band h3 { font-size: var(--font-size-card); margin-bottom: var(--space-2); }
.insight-band p { font-size: var(--font-size-body-sm); max-width: var(--content-width-wide); }
.statement { font-family: var(--font-family-display); font-size: var(--font-size-statement); font-weight: var(--font-weight-regular); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); color: var(--color-heading); max-width: var(--content-width-wide); padding-left: var(--space-8); margin-top: var(--space-12); border-left: var(--border-width-medium) var(--border-style) var(--color-accent); }
/* Scenario comparison: three panels on desktop, progressive tabs on mobile.
 * Without JS all panels remain visible, including on mobile. */
.scenario-showcase { margin-bottom: var(--space-10); }
.scenario-tabs { display: none; margin-bottom: var(--space-5); }
.scenario-grid { display: grid; grid-template-columns: var(--grid-columns-3); gap: var(--gap-grid); }
.scenario-panel { padding: var(--diagram-panel-padding); border: var(--border-default); border-radius: var(--card-radius); background: var(--color-surface-secondary); min-width: 0; }
.scenario-panel__heading { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.scenario-panel__heading h3 { font-size: var(--font-size-lead); }
.scenario-panel__heading p { font-family: var(--font-family-mono); font-size: var(--font-size-micro); letter-spacing: var(--letter-spacing-label); }
.scenario-panel__screen { min-height: var(--scenario-screen-height); padding: var(--space-5); position: relative; overflow: hidden; }
.scenario-panel__masthead { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-3); border-bottom: var(--border-default); color: var(--color-heading); font-family: var(--font-family-display); font-size: var(--font-size-lead); }
.scenario-panel__masthead > span { font-family: var(--font-family-body); font-size: var(--font-size-micro); background: var(--color-surface-secondary); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); }
.scenario-panel__screen strong { position: relative; z-index: var(--z-content); display: block; margin-top: var(--space-6); font-family: var(--font-family-display); font-size: var(--font-size-illustration-title); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-display); color: var(--color-heading); }
.scenario-panel__screen > p { position: relative; z-index: var(--z-content); margin-top: var(--space-3); font-size: var(--font-size-label); line-height: var(--line-height-body); max-width: var(--measure-card); }
.scenario-panel__action { position: relative; z-index: var(--z-content); display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-xs); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--font-size-label); }
.scenario-panel__action .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.scenario-path { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.scenario-path > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3); border: var(--border-default); border-radius: var(--radius-sm); background: var(--color-surface); }
.scenario-path dt { font-family: var(--font-family-mono); font-size: var(--font-size-micro); color: var(--color-text-muted); }
.scenario-path dd { margin: 0; font-size: var(--font-size-label); font-weight: var(--font-weight-medium); text-align: right; }
.scenario-path > div:last-child { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.scenario-path > div:last-child dt { color: var(--color-on-primary-muted); }
.figure-note { margin-top: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-label); }
.feature-grid { margin-top: var(--space-10); }
/* Comparison cards are composed from the card component. */
.comparison-card .card__kicker { margin-bottom: var(--space-5); }
.comparison-card .card__title { font-family: var(--font-family-display); font-weight: var(--font-weight-display); font-size: var(--font-size-card-display); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-heading); margin-block: var(--space-6) var(--space-4-5); }
.comparison-card .card__description { margin: 0 0 var(--space-6); }
.comparison-role { font-size: var(--font-size-small); line-height: var(--line-height-body); }
.comparison-role > span { display: block; color: var(--color-text-muted); font-family: var(--font-family-mono); font-size: var(--font-size-micro); letter-spacing: var(--letter-spacing-label); margin-bottom: var(--space-2); }
.section-footnote { display: flex; justify-content: space-between; align-items: center; gap: var(--space-10); padding-top: var(--space-7); margin-top: var(--space-2); }
.section-footnote h3 { font-size: var(--font-size-lead); margin-bottom: var(--space-2); }
.section-footnote p { max-width: var(--content-width-narrow); font-size: var(--font-size-body-sm); }
.section-footnote--divided { margin-top: var(--space-9); border-top: var(--border-default); }
.section-footnote--divided p { font-size: var(--font-size-label); }
/* Scope/capabilities and deliverables. */
.capability-strip { display: grid; grid-template-columns: var(--grid-split-aside); gap: var(--space-10); align-items: center; padding: var(--space-8) var(--space-10); margin-bottom: var(--space-8); border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-surface-secondary); }
.capability-title { display: flex; align-items: center; gap: var(--space-4); }
.capability-title strong { display: block; font-family: var(--font-family-display); font-weight: var(--font-weight-regular); font-size: var(--font-size-card-display); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-heading); color: var(--color-heading); }
.capability-title small { display: block; margin-top: var(--space-2); font-size: var(--font-size-label); color: var(--color-text-muted); }
.capability-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.capability-pills span { padding: var(--space-2-5) var(--space-3-5); border: var(--border-default); border-radius: var(--radius-xs); font-size: var(--font-size-label); background: var(--color-surface); }
.capability-pills span:last-child { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.deliverables { padding-top: var(--space-7); margin-top: var(--space-7); border-top: var(--border-default); }
.deliverables summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); font-size: var(--font-size-card); font-weight: var(--font-weight-semibold); }
.deliverables > p { margin-top: var(--space-5); font-size: var(--font-size-body-sm); max-width: var(--content-width-wide); }
/* Process / timeline layout. */
.timeline-layout { display: grid; grid-template-columns: var(--grid-split-aside); gap: var(--gap-layout-wide); align-items: start; }
.timeline-intro > p:not(.eyebrow) { margin-top: var(--space-7); font-size: var(--font-size-body); line-height: var(--line-height-relaxed); }
.timeline-intro .action-group { margin-top: var(--space-9); }
.approval-loop { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-10); padding-top: var(--space-7); border-top: var(--border-contrast); font-family: var(--font-family-mono); font-size: var(--font-size-label-sm); color: var(--color-on-primary-muted); }
.approval-loop span { padding: var(--space-2) var(--space-3); border: var(--border-contrast); border-radius: var(--radius-sm); }
.approval-loop i { font-style: normal; }
.timeline > li { position: relative; display: grid; grid-template-columns: var(--timeline-marker-size) minmax(0, 1fr); gap: var(--timeline-gap); padding-bottom: var(--space-9); }
.timeline > li::before { content: ""; position: absolute; top: var(--timeline-marker-size); bottom: 0; left: calc(var(--timeline-marker-size) / 2); width: var(--border-width-thin); background: var(--color-border-contrast); }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li:last-child::before { display: none; }
.timeline__number { position: relative; z-index: var(--z-content); display: grid; place-items: center; width: var(--timeline-marker-size); height: var(--timeline-marker-size); border: var(--border-contrast); border-radius: var(--radius-circle); background: var(--color-primary); color: var(--color-highlight); font: var(--font-size-label-sm) var(--font-family-mono); }
.timeline > li:first-child .timeline__number { background: var(--color-highlight); color: var(--color-heading); border-color: var(--color-highlight); }
.timeline h3 { font-size: var(--font-size-card-lg); margin-block: var(--space-1) var(--space-2-5); }
.timeline p { font-size: var(--font-size-body-sm); line-height: var(--line-height-relaxed); }
/* Input -> core -> output network. Reusable for integrations or methodology. */
.network { display: grid; grid-template-columns: var(--grid-network); gap: var(--space-11); padding: var(--space-10); margin-bottom: var(--space-12); border: var(--border-default); border-radius: var(--radius-lg); background: var(--gradient-surface); position: relative; }
.network__column { display: grid; gap: var(--space-2-5); }
.network__label { margin-bottom: var(--space-1); font: var(--font-size-micro) var(--font-family-mono); letter-spacing: var(--letter-spacing-label); color: var(--color-text-muted); }
.network__node { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3-5) var(--space-4); border: var(--border-default); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--font-size-caption); }
.network__node .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-accent); }
.network__core-wrap { display: grid; place-items: center; position: relative; }
.network__core-wrap::before { content: ""; position: absolute; top: 50%; left: calc(-1 * var(--space-11)); right: calc(-1 * var(--space-11)); height: var(--border-width-thin); background: var(--color-diagram-line); }
.network__core { position: relative; z-index: var(--z-content); width: 100%; padding: var(--space-8) var(--space-6); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); text-align: center; box-shadow: var(--shadow-lg); }
.network__core > .icon { width: var(--icon-size-xl); height: var(--icon-size-xl); margin: 0 auto var(--space-5); color: var(--color-highlight); }
.network__core strong { display: block; font-family: var(--font-family-display); font-size: var(--font-size-card-display); font-weight: var(--font-weight-regular); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-heading); }
.network__core span { display: block; font-family: var(--font-family-mono); font-size: var(--font-size-micro); line-height: var(--line-height-relaxed); margin-top: var(--space-4); color: var(--color-on-primary-muted); }
.network__measure { grid-column: var(--grid-span-full); display: flex; justify-content: center; align-items: center; gap: var(--space-4); padding-top: var(--space-5); border-top: var(--border-default); font-family: var(--font-family-mono); font-size: var(--font-size-label-sm); color: var(--color-accent); }
.network__measure .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
/* CTA content stays on the section background; no all-enclosing card. */
.action-layout { display: grid; grid-template-columns: var(--grid-split-copy); align-items: center; gap: var(--gap-layout); }
.action-layout h2 { font-size: var(--font-size-section-sm); }
.action-layout p:not(.eyebrow) { font-size: var(--font-size-body); margin-top: var(--space-6); line-height: var(--line-height-relaxed); }
.action-layout .action-group { margin-top: var(--space-8); }
.faq-layout { display: grid; grid-template-columns: var(--grid-split-faq); gap: var(--gap-layout-wide); align-items: start; }
.faq-intro h2 { font-size: var(--font-size-section-sm); }
.faq-intro > p:not(.eyebrow) { margin-top: var(--space-5); }
.question-art { display: grid; place-items: center; width: var(--space-24); height: var(--space-24); border: var(--border-strong); border-radius: var(--radius-circle); font-family: var(--font-family-display); font-size: var(--font-size-section); color: var(--color-accent); margin-top: var(--space-9); }
.link-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-7); color: var(--color-accent); }
.closing-section { text-align: left; overflow: hidden; }
.closing-section h2 { max-width: var(--content-width-medium); font-size: var(--font-size-closing); }
.closing-section p:not(.eyebrow) { max-width: var(--content-width-narrow); margin-top: var(--space-7); font-size: var(--font-size-body); line-height: var(--line-height-relaxed); }
.closing-section .action-group { justify-content: flex-start; margin-top: var(--space-8); }
.closing-section .response-note { margin-top: var(--space-6); font-family: var(--font-family-mono); font-size: var(--font-size-label-sm); color: var(--color-on-primary-muted); }
/* Optional motion enhancement; content is visible by default. */
.reveal { opacity: 1; }
.js-motion .reveal { opacity: 0; transform: translateY(var(--reveal-offset)); transition: opacity var(--duration-reveal) var(--ease-standard), transform var(--duration-reveal) var(--ease-standard); }
.js-motion .reveal.is-visible { opacity: 1; transform: none; }
/* Media conditions are the documented exception to token-only declarations. */
@media (max-width: 1200px) {
.card-grid--four { grid-template-columns: var(--grid-columns-2); }
.scenario-panel { padding: var(--space-4); }
.scenario-panel__screen { padding: var(--space-4); }
}
@media (max-width: 1000px) {
.network { gap: var(--space-6); padding: var(--space-7); }
.scenario-panel__screen { min-height: var(--scenario-screen-height); }
.scenario-panel__screen strong { font-size: var(--font-size-card-display); }
.scenario-path > div { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
.scenario-path dd { text-align: left; }
.capability-strip { grid-template-columns: var(--grid-columns-1); gap: var(--space-6); }
}
@media (max-width: 800px) {
.hero-section { padding-top: var(--space-12); padding-bottom: var(--space-10); }
.hero-grid, .section-heading, .split-layout, .timeline-layout, .faq-layout, .action-layout { grid-template-columns: var(--grid-columns-1); }
.hero-grid { gap: var(--space-4); }
.section-heading { gap: var(--space-6); }
.section-heading > p { font-size: var(--font-size-body); }
.hero-title, .hero-lead { max-width: var(--measure-copy); }
.hero-bottom { align-items: flex-start; margin-top: var(--space-7); }
.hero-tags { gap: var(--space-3) var(--space-6); }
.scroll-cue, .section-nav-label { display: none; }
.section-nav .container { width: 100%; padding-inline: var(--page-gutter); overflow: auto; scrollbar-width: none; }
.section-nav-links { gap: var(--space-7); margin-inline: auto; }
.sticky-panel { position: static; }
.card-grid--three { grid-template-columns: var(--grid-columns-2); }
.comparison-grid, .portfolio-grid, .related-grid { grid-template-columns: var(--grid-columns-1); }
.scenario-grid { grid-template-columns: var(--grid-columns-1); }
.scenario-panel { padding: var(--space-6); }
.has-js .scenario-tabs { display: flex; }
.has-js .scenario-panel:not([data-active="true"]) { display: none; }
.scenario-panel__screen { padding: var(--space-6); }
.scenario-panel__screen strong { font-size: var(--font-size-section); }
.scenario-path > div { flex-direction: row; align-items: center; }
.scenario-path dd { text-align: right; }
.feature-grid { margin-top: var(--space-8); }
.section-footnote { align-items: flex-start; flex-direction: column; gap: var(--space-6); }
.network { grid-template-columns: var(--grid-columns-2); }
.network__core-wrap { grid-column: var(--grid-span-full); grid-row: 1; }
.network__core-wrap::before { display: none; }
.network__core { max-width: var(--measure-card); }
.question-art { display: none; }
}
@media (max-width: 520px) {
.hero-content .action-group { gap: var(--space-4) var(--space-6); }
.hero-lead { font-size: var(--font-size-body); }
.hero-tags { flex-direction: column; }
.hero-bottom { margin-top: var(--space-10); }
.section-nav-links { gap: var(--space-6); }
.section-nav a { font-size: var(--font-size-label-sm); }
.card-grid, .card-grid--two, .card-grid--three, .card-grid--four { grid-template-columns: var(--grid-columns-1); }
.insight-band { grid-template-columns: var(--grid-columns-1); padding: var(--space-6); gap: var(--space-5); }
.statement { padding-left: var(--space-5); margin-top: var(--space-8); }
.editorial-list > li { gap: var(--space-3); }
.editorial-list h3 { font-size: var(--font-size-card-lg); }
.editorial-list p { font-size: var(--font-size-body); }
.scenario-panel { padding: var(--space-4); }
.scenario-panel__screen { padding: var(--space-5); }
.scenario-panel__screen strong { font-size: var(--font-size-illustration-title); }
.tabs__button { padding-inline: var(--space-2); gap: var(--space-1); }
.tabs__button .icon { display: none; }
.capability-strip { padding: var(--space-6); }
.capability-title { align-items: flex-start; }
.capability-title strong { font-size: var(--font-size-card-lg); }
.network { grid-template-columns: var(--grid-columns-1); padding: var(--space-5); }
.network__column:first-child { grid-row: 1; }
.network__core-wrap { grid-row: 2; }
.network__core { max-width: none; }
.network__measure { align-items: flex-start; font-size: var(--font-size-micro); }
}
@media (prefers-reduced-motion: reduce) {
.js-motion .reveal { opacity: 1; transform: none; }
}
@media print {
.section-nav, .scroll-cue, .scenario-tabs { display: none !important; }
.page-section, .hero-section { padding-block: var(--space-9); }
.sticky-panel { position: static; }
.reveal, .js-motion .reveal { opacity: 1 !important; transform: none !important; }
.has-js .scenario-panel { display: block !important; }
.scenario-grid { grid-template-columns: var(--grid-columns-1); }
details:not([open]) > *:not(summary) { display: block !important; }
.surface-contrast { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}