/* 00-base.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-page-bg); color: var(--color-page-text); font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: var(--type-body-line); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-link-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.skip { position: absolute; left: var(--space-4); top: -100px; background: var(--color-surface-bg); color: var(--color-surface-text); padding: var(--space-2) var(--space-4); z-index: 100; border-radius: var(--radius-2); }
.skip:focus { top: var(--space-4); }
h1, h2, h3, h4, p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.display-xl, .h1, .h2, .h3, .h4, .lead, .body, .ui-md, .ui-sm, .eyebrow, .caption, .mono { margin: 0; }
.display-xl { font-family: var(--type-display-xl-family); font-size: clamp(38px, 5.4vw, var(--type-display-xl-size)); font-weight: var(--type-display-xl-weight); line-height: var(--type-display-xl-line); letter-spacing: var(--type-display-xl-tracking); color: var(--color-heading-text); text-wrap: balance; }
.h1 { font-family: var(--type-h1-family); font-size: clamp(30px, 3.6vw, var(--type-h1-size)); font-weight: var(--type-h1-weight); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-tracking); color: var(--color-heading-text); text-wrap: balance; }
.h2 { font-family: var(--type-h2-family); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-tracking); color: var(--color-heading-text); }
.h3 { font-family: var(--type-h3-family); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-tracking); color: var(--color-heading-text); }
.h4 { font-family: var(--type-h4-family); font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-line); }
.lead { font-family: var(--type-lead-family); font-size: var(--type-lead-size); line-height: var(--type-lead-line); color: var(--color-page-text-secondary); max-width: 60ch; }
.body { font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: var(--type-body-line); max-width: 68ch; }
.ui-md { font-family: var(--type-ui-md-family); font-size: var(--type-ui-md-size); font-weight: var(--type-ui-md-weight); line-height: var(--type-ui-md-line); }
.ui-sm { font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); font-weight: var(--type-ui-sm-weight); line-height: var(--type-ui-sm-line); }
.eyebrow { font-family: var(--type-eyebrow-family); font-size: var(--type-eyebrow-size); font-weight: var(--type-eyebrow-weight); letter-spacing: var(--type-eyebrow-tracking); line-height: var(--type-eyebrow-line); text-transform: uppercase; color: var(--color-page-text-secondary); margin-bottom: var(--space-3); }
.caption { font-family: var(--type-caption-family); font-size: var(--type-caption-size); color: var(--color-page-text-muted); }
.mono, .meta { font-family: var(--type-mono-family); font-size: var(--type-mono-size); line-height: var(--type-mono-line); }
.meta { color: var(--color-page-text-muted); }
em { font-style: italic; }

.reveal { opacity: var(--motion-reveal-from-opacity); animation: reveal var(--motion-duration-4) var(--motion-easing-enter) forwards; }
@keyframes reveal { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* 10-layout.css */
.container { max-width: var(--container-max-width); margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding); }
.sec { padding: var(--space-8) 0; }
.sec-light { background: var(--color-page-bg); color: var(--color-page-text); }
.sec-surface { background: var(--color-surface-bg); color: var(--color-surface-text); border-top: var(--rule-width) solid var(--color-surface-border); border-bottom: var(--rule-width) solid var(--color-surface-border); }
.sec-surface .eyebrow { color: var(--color-surface-text-muted); }
.sec-dark { background: var(--color-dark-section-bg); color: var(--color-dark-section-text); }
.sec-dark-deep { background: var(--color-dark-section-bg-deep); }
.sec-dark .display-xl, .sec-dark .h1, .sec-dark .h2, .sec-dark .h3 { color: var(--color-dark-section-text); }
.sec-dark .lead, .sec-dark .eyebrow, .sec-dark .meta { color: var(--color-dark-section-text-muted); }
.sec-dark .eyebrow { color: var(--color-dark-section-accent); }
.sec-dark a { color: var(--color-dark-section-text); }
.sec-dark .hero-panel a { color: var(--color-link-text); }
@media (max-width: 720px) { .sec { padding: var(--space-7) 0; } }

/* 20-button.css */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--type-ui-md-family); font-weight: 600; text-decoration: none; cursor: pointer; border: var(--rule-width) solid transparent; border-radius: var(--radius-2); transition: background var(--motion-duration-1) var(--motion-easing-standard), color var(--motion-duration-1) var(--motion-easing-standard), border-color var(--motion-duration-1) var(--motion-easing-standard); white-space: nowrap; }
.btn[data-size="sm"] { height: var(--control-height-sm); padding: 0 var(--control-padding-x-sm); font-size: var(--type-ui-sm-size); }
.btn[data-size="md"] { height: var(--control-height-md); padding: 0 var(--control-padding-x-md); font-size: var(--type-ui-md-size); }
.btn[data-size="lg"] { height: var(--control-height-lg); padding: 0 var(--control-padding-x-lg); font-size: 16px; }
.btn[data-kind="primary"] { background: var(--color-action-primary); color: var(--color-action-primary-text); }
.btn[data-kind="primary"]:hover { background: var(--color-action-primary-hover); }
.btn[data-kind="secondary"] { background: var(--color-action-secondary); color: var(--color-action-secondary-text); border-color: var(--color-action-secondary-border); }
.btn[data-kind="secondary"]:hover { border-color: var(--color-action-secondary-text); }
.btn[data-kind="quiet"] { background: transparent; color: var(--color-page-text-secondary); }
.btn[data-kind="quiet"]:hover { background: var(--color-surface-bg); color: var(--color-page-text); }
.btn[data-kind="danger"] { background: var(--color-status-danger); color: var(--color-neutral-0); }
.btn:active { transform: translateY(1px); }
.sec-dark .btn[data-kind="secondary"] { background: transparent; color: var(--color-dark-section-text); border-color: var(--color-dark-section-text-muted); }
.sec-dark .btn[data-kind="secondary"]:hover { border-color: var(--color-dark-section-text); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-6); }

/* 21-field.css */
/* Field contract: reserved label slot, control, reserved help slot. Fields in a row align by control, not by label. */
.field { display: flex; flex-direction: column; min-width: 0; }
.field-label { display: block; min-height: var(--control-label-slot); font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); font-weight: 600; line-height: var(--control-label-slot); color: var(--color-page-text); }
.field-label .req { color: var(--color-status-text-danger); }
.field-control { display: flex; }
.control { width: 100%; font-family: var(--type-ui-md-family); font-size: var(--type-ui-md-size); color: var(--color-page-text); background: var(--color-surface-raised); border: var(--rule-width) solid var(--color-surface-border-strong); border-radius: var(--radius-2); padding: 0 var(--control-padding-x-md); transition: border-color var(--motion-duration-1) var(--motion-easing-standard); }
.field[data-size="sm"] .control { height: var(--control-height-sm); padding: 0 var(--control-padding-x-sm); font-size: var(--type-ui-sm-size); }
.field[data-size="md"] .control { height: var(--control-height-md); }
.field[data-size="lg"] .control { height: var(--control-height-lg); padding: 0 var(--control-padding-x-lg); }
textarea.control { height: auto; padding: var(--space-3) var(--control-padding-x-md); line-height: 1.45; resize: vertical; }
.control::placeholder { color: var(--color-page-text-muted); }
.control:hover { border-color: var(--color-page-text-secondary); }
.control:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; border-color: var(--color-focus-ring); }
.field[data-invalid="true"] .control { border-color: var(--color-status-danger); }
.field-help { min-height: var(--control-help-slot); font-family: var(--type-caption-family); font-size: var(--type-caption-size); line-height: var(--control-help-slot); color: var(--color-page-text-muted); margin-top: var(--space-1); }
.field-error { font-family: var(--type-caption-family); font-size: var(--type-caption-size); line-height: var(--control-help-slot); color: var(--color-status-text-danger); }
.field[data-invalid="true"] .field-help { display: none; }
.field-row { display: flex; gap: var(--space-4); align-items: flex-start; }
.field-row .field { flex: 1 1 0; }
@media (max-width: 720px) { .field-row { flex-direction: column; } .field-row .field { flex: none; width: 100%; } }

/* Styled native select: native semantics, house appearance. */
.select { position: relative; display: flex; width: 100%; }
.select .control { appearance: none; -webkit-appearance: none; padding-right: calc(var(--control-padding-x-md) + 20px); cursor: pointer; }
.select-chevron { position: absolute; right: var(--space-3); top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; color: var(--color-page-text-secondary); }

/* Toggle: fixed 40 by 22 at md. */
.toggle-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--rule-width) solid var(--color-surface-border); }
.toggle-row:last-child { border-bottom: 0; }
.toggle { flex: none; width: var(--control-toggle-w); height: var(--control-toggle-h); border-radius: calc(var(--control-toggle-h) / 2); border: 0; padding: 2px; background: var(--color-neutral-5); cursor: pointer; display: flex; align-items: center; transition: background var(--motion-duration-2) var(--motion-easing-standard); margin-top: 1px; position: relative; }
.toggle::before { content: ""; position: absolute; inset: calc((var(--control-toggle-h) - var(--control-touch-min)) / 2) calc((var(--control-toggle-w) - var(--control-touch-min)) / 2); }
.toggle-knob { width: calc(var(--control-toggle-h) - 4px); height: calc(var(--control-toggle-h) - 4px); border-radius: 50%; background: var(--color-neutral-0); transition: transform var(--motion-duration-2) var(--motion-easing-standard); }
.toggle[aria-checked="true"] { background: var(--color-action-primary); }
.toggle[aria-checked="true"] .toggle-knob { transform: translateX(calc(var(--control-toggle-w) - var(--control-toggle-h))); }
.toggle-text { display: flex; flex-direction: column; gap: 2px; }
.toggle-label { font-family: var(--type-ui-md-family); font-size: var(--type-ui-md-size); font-weight: 500; color: var(--color-page-text); }
.toggle-help { font-family: var(--type-caption-family); font-size: var(--type-caption-size); color: var(--color-page-text-muted); }
.toggle-list { border-top: var(--rule-width) solid var(--color-surface-border); }

/* 22-card.css */
/* equal-card-grid contract. Rows are equal height; the body flexes; the footer is pinned; text never truncates. */
.card-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.card { display: flex; flex-direction: column; min-height: 100%; background: var(--color-surface-bg); color: var(--color-surface-text); border: var(--rule-width) solid var(--color-surface-border); border-radius: var(--radius-3); padding: var(--space-5); transition: transform var(--motion-duration-2) var(--motion-easing-standard), box-shadow var(--motion-duration-2) var(--motion-easing-standard); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.card .eyebrow { color: var(--color-surface-text-muted); margin-bottom: var(--space-3); }
.card-title { font-family: var(--type-h3-family); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-line); color: var(--color-heading-text); }
.card-body { flex: 1 1 auto; font-family: var(--type-ui-md-family); font-size: var(--type-ui-md-size); font-weight: 400; line-height: 1.5; color: var(--color-surface-text); margin-top: var(--space-2); }
.card-footer { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--rule-width) solid var(--color-surface-border); font-family: var(--type-mono-family); font-size: var(--type-caption-size); color: var(--color-surface-text-muted); }
.sec-surface .card { background: var(--color-surface-bg-2); color: var(--color-surface-text); border-color: transparent; }
.sec-dark .card { background: var(--color-surface-bg); color: var(--color-surface-text); border-color: transparent; }
@media (max-width: 960px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }

/* 23-table.css */
.table-wrap { overflow-x: auto; border: var(--rule-width) solid var(--color-surface-border); border-radius: var(--radius-3); background: var(--color-surface-bg); position: relative; scrollbar-gutter: stable; }
.table-wrap::after { content: "Scroll for more"; display: none; position: sticky; left: 0; bottom: 0; font-family: var(--type-caption-family); font-size: var(--type-caption-size); color: var(--color-surface-text-muted); padding: var(--space-1) var(--space-3); background: var(--color-surface-bg); }
@media (max-width: 720px) { .table-wrap[data-overflow] ::after, .table-wrap::after { display: block; } }
.table { width: 100%; border-collapse: collapse; font-family: var(--type-ui-md-family); font-size: var(--type-ui-md-size); color: var(--color-surface-text); }
.table th { position: sticky; top: 0; text-align: left; font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); font-weight: 600; letter-spacing: 0.02em; color: var(--color-surface-text-muted); background: var(--color-surface-bg); border-bottom: var(--rule-width) solid var(--color-surface-border-strong); padding: var(--space-3) var(--space-4); }
.table td { padding: var(--space-3) var(--space-4); border-bottom: var(--rule-width) solid var(--color-surface-border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table[data-density="compact"] td { padding: var(--space-2) var(--space-4); height: 40px; }
.table[data-density="comfortable"] td { height: 48px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:hover td { background: var(--color-page-bg); }
.sec-surface .table-wrap, .sec-surface .table th { background: var(--color-surface-bg-2); }
.sec-surface .table tbody tr:hover td { background: var(--color-surface-bg); }
.status { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); font-weight: 500; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral-5); flex: none; }
.status[data-status="active"]::before { background: var(--color-status-success); }
.status[data-status="invited"]::before { background: var(--color-status-warning); }
.status[data-status="suspended"]::before { background: var(--color-status-danger); }

/* 24-stat.css */
.sec-surface .stat { background: var(--color-surface-bg-2); border-color: transparent; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-7); }
.stat { background: var(--color-surface-bg); border: var(--rule-width) solid var(--color-surface-border); border-radius: var(--radius-3); padding: var(--space-4) var(--space-5); color: var(--color-surface-text); }
.stat-label { font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); font-weight: 500; color: var(--color-surface-text-muted); }
.stat-value { font-family: var(--type-h2-family); font-size: clamp(22px, 5.5vw, var(--type-h2-size)); font-weight: var(--type-h2-weight); line-height: 1.1; letter-spacing: var(--type-h2-tracking); color: var(--color-heading-text); margin-top: var(--space-1); font-variant-numeric: tabular-nums; }
.stat-delta { font-family: var(--type-caption-family); font-size: var(--type-caption-size); margin-top: var(--space-2); color: var(--color-surface-text-muted); }
.stat-delta[data-tone="up"] { color: var(--color-status-text-success); }
.stat-delta[data-tone="down"] { color: var(--color-status-text-danger); }
@media (max-width: 960px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 30-marketing.css */
.topbar { background: var(--color-page-bg); border-bottom: var(--rule-width) solid var(--color-surface-border-strong); position: sticky; top: 0; z-index: 50; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 64px; }
.brand { text-decoration: none; color: inherit; display: flex; align-items: center; }
.wordmark { height: 28px; width: auto; }
.wordmark-text { font-family: var(--type-h3-family); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-heading-text); }
.nav { display: flex; gap: var(--space-1) var(--space-5); flex-wrap: wrap; }
.nav a { font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); font-weight: 600; text-decoration: none; color: var(--color-page-text-secondary); padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-page-text); border-bottom-color: var(--color-action-primary); }

.hero { padding: var(--space-9) 0; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
.hero h1 .accent { font-weight: 400; color: var(--color-dark-section-accent); }
.hero h1 em.accent { font-style: italic; }
.sec-light.hero h1 .accent { color: var(--color-action-primary); }
.hero .lead { margin-top: var(--space-5); }
.sec-dark.hero .lead { color: var(--color-dark-section-text-muted); }
.cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero .meta { margin-top: var(--space-5); }
.hero-panel { background: var(--color-surface-bg); color: var(--color-surface-text); border: var(--rule-width) solid var(--color-surface-border); border-radius: var(--radius-4); padding: var(--space-6); box-shadow: var(--shadow-raised); }
.sec-dark .hero-panel { border-color: transparent; }
.hero-panel .eyebrow { color: var(--color-surface-text-muted); }
.hero-panel .eyebrow + .eyebrow, .hero-panel .swatches + .eyebrow { margin-top: var(--space-5); }
.swatches { display: grid; gap: var(--space-2); }
.swatches li { display: grid; grid-template-columns: 28px auto auto 1fr; align-items: center; gap: var(--space-3); font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); }
.sw { display: block; width: 28px; height: 28px; border-radius: var(--radius-2); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.sw-lg { width: 44px; height: 44px; }
.sw-name { font-weight: 600; text-transform: capitalize; }
.sw-hex { font-family: var(--type-mono-family); font-size: 12px; color: var(--color-surface-text-muted); }
.sw-roles { font-size: 12px; color: var(--color-surface-text-muted); }
.spec { margin: var(--space-2) 0 0; line-height: 1.2; }
.spec-display { font-family: var(--type-display-xl-family); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-heading-text); }
.spec-body { font-family: var(--type-body-family); font-size: 19px; }
.spec-ui { font-family: var(--type-ui-md-family); font-size: 15px; font-weight: 500; }
.spec-mono { font-family: var(--type-mono-family); font-size: 13px; color: var(--color-surface-text-muted); }

.rules-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
.ledger li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: var(--rule-width) solid var(--color-surface-border); font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: 1.5; }
.ledger li:last-child { border-bottom: var(--rule-width) solid var(--color-surface-border); }
.sec-dark .ledger li { border-color: var(--color-dark-section-text-muted); color: var(--color-dark-section-text); }
.ledger-n { font-family: var(--type-mono-family); font-size: 13px; color: var(--color-page-text-muted); padding-top: 3px; }
.sec-dark .ledger-n { color: var(--color-dark-section-accent); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); margin-top: var(--space-6); }
.fact { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--rule-width) solid var(--color-surface-border); }
.fact dt { font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); font-weight: 600; color: var(--color-page-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.fact dd { margin: 0; font-family: var(--type-body-family); font-size: var(--type-body-size); }

.machine { padding: var(--space-5) 0; }
.machine-in { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.machine .eyebrow { margin: 0; }
.files { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.files a { font-family: var(--type-mono-family); font-size: 13px; }

.foot { padding: var(--space-7) 0; }
.foot-in { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; }
.foot-name { font-family: var(--type-h2-family); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); letter-spacing: var(--type-h2-tracking); }
.foot-tag { color: var(--color-dark-section-text-muted); margin-top: var(--space-2); font-family: var(--type-body-family); }
.foot .meta { color: var(--color-dark-section-text-muted); }

@media (max-width: 860px) { .hero-in, .rules-in { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; } .hero { padding: var(--space-8) 0; } }
@media (max-width: 560px) { .fact { grid-template-columns: 1fr; gap: var(--space-1); } .topbar-in { flex-direction: column; align-items: flex-start; padding-top: var(--space-3); padding-bottom: var(--space-3); } }

/* 31-shell.css */
/* Rail plus top bar shell. Desktop-first with a responsive floor. */
[data-profile="b2b-ops"] body, .sample-product { font-family: var(--type-ui-md-family); font-size: var(--type-ui-md-size); }
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--color-surface-bg); border-right: var(--rule-width) solid var(--color-surface-border); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: 0; height: 100vh; }
.rail-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-heading-text); font-family: var(--type-ui-md-family); font-weight: 700; font-size: 15px; padding: var(--space-2); }
.rail-mark { width: 28px; height: 28px; border-radius: var(--radius-2); background: var(--color-action-primary); color: var(--color-action-primary-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--type-display-xl-family); }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-nav a { display: block; text-decoration: none; color: var(--color-surface-text); font-family: var(--type-ui-md-family); font-size: var(--type-ui-md-size); font-weight: 500; padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); min-height: 36px; line-height: 20px; }
.rail-nav a:hover { background: var(--color-surface-bg-2); }
.rail-nav a[aria-current="page"] { background: var(--color-surface-bg-2); color: var(--color-link-text); font-weight: 700; }
.rail-foot { margin-top: auto; padding: var(--space-2); }
.shell-main { min-width: 0; }
.appbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 56px; padding: 0 var(--space-6); background: var(--color-page-bg); border-bottom: var(--rule-width) solid var(--color-surface-border); position: sticky; top: 0; z-index: 10; }
.crumbs { display: flex; align-items: center; gap: var(--space-2); font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); color: var(--color-page-text-muted); }
.crumbs a { color: var(--color-page-text-secondary); text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--color-page-text); font-weight: 600; }
.appbar-right { display: flex; align-items: center; gap: var(--space-4); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-neutral-3); color: var(--color-neutral-9); display: inline-flex; align-items: center; justify-content: center; font-family: var(--type-ui-sm-family); font-size: 12px; font-weight: 700; }
.content { padding: var(--space-6) var(--space-6) var(--space-9); max-width: 1040px; }
.page-head { margin-bottom: var(--space-6); }
.page-desc { font-family: var(--type-ui-md-family); font-size: var(--type-ui-md-size); font-weight: 400; color: var(--color-page-text-secondary); margin-top: var(--space-2); max-width: 64ch; }
.settings { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--space-7); }
.form-section { padding: var(--space-6) 0; border-top: var(--rule-width) solid var(--color-surface-border); }
.form-head { margin-bottom: var(--space-5); }
.form-desc { font-family: var(--type-ui-md-family); font-size: var(--type-ui-sm-size); font-weight: 400; color: var(--color-page-text-muted); margin-top: var(--space-1); }
.form-section .field-row + .field-row { margin-top: var(--space-3); }
.save-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-bg); border: var(--rule-width) solid var(--color-surface-border); border-radius: var(--radius-3); box-shadow: var(--shadow-raised); }
.save-note { margin-right: auto; font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); color: var(--color-page-text-muted); }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .rail { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; border-right: 0; border-bottom: var(--rule-width) solid var(--color-surface-border); } .rail-nav { flex-direction: row; flex-wrap: wrap; } .rail-foot { display: none; } .content { padding: var(--space-5) var(--space-4) var(--space-8); } }

/* 32-pages.css */
.page-intro { padding-top: var(--space-8); }
.page-intro .lead { margin-top: var(--space-5); }
.swatches-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.swatches-lg li { grid-template-columns: 44px auto auto 1fr; }
.ramps { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.ramp-row { display: grid; grid-template-columns: 100px 1fr; gap: var(--space-4); align-items: center; }
.ramp-name { font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); font-weight: 600; text-transform: capitalize; }
.roles-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-8); margin-top: var(--space-6); }
.marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.mark-card { display: flex; flex-direction: column; background: var(--color-surface-bg); border: var(--rule-width) solid var(--color-surface-border); border-radius: var(--radius-3); overflow: hidden; }
.mark-img { display: flex; align-items: center; justify-content: center; height: 140px; padding: var(--space-5); border-bottom: var(--rule-width) solid var(--color-surface-border); }
.mark-img img { max-height: 64px; width: auto; }
.mark-text { font-family: var(--type-h2-family); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); color: var(--color-heading-text); }
.mark-meta { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-5); }
.mark-kind { font-family: var(--type-eyebrow-family); font-size: var(--type-eyebrow-size); letter-spacing: var(--type-eyebrow-tracking); text-transform: uppercase; color: var(--color-surface-text-muted); }
.mark-name { font-family: var(--type-h3-family); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); color: var(--color-heading-text); }
.mark-note { font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); color: var(--color-surface-text-muted); }
.fact dd .fact-note { display: block; font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); color: var(--color-page-text-muted); margin-top: 2px; }
.facts-plain { margin-top: var(--space-6); }
.prompt { margin: var(--space-6) 0 var(--space-4); padding: var(--space-5); background: var(--color-surface-bg); border: var(--rule-width) solid var(--color-surface-border); border-radius: var(--radius-3); font-family: var(--type-mono-family); font-size: var(--type-mono-size); line-height: 1.6; white-space: pre-wrap; color: var(--color-surface-text); }
.sec-surface .prompt { background: var(--color-surface-bg-2); }
@media (max-width: 860px) { .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .roles-2col, .swatches-lg { grid-template-columns: 1fr; } .ramp-row { grid-template-columns: 1fr; gap: var(--space-2); } }
@media (max-width: 560px) { .marks { grid-template-columns: 1fr; } }

/* 40-board.css */
.board-head .lead { margin-top: var(--space-5); max-width: 70ch; }
.criteria { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.criteria div { border-top: 2px solid var(--color-heading-text); padding-top: var(--space-3); }
.criteria dt { font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-heading-text); }
.criteria dd { margin: var(--space-2) 0 0; font-family: var(--type-ui-md-family); font-size: var(--type-ui-sm-size); font-weight: 400; line-height: 1.5; color: var(--color-page-text-secondary); }
.board-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-6); }
.board-cols .h3 { margin: var(--space-6) 0 var(--space-3); }
.board-cols .h3:first-child { margin-top: 0; }
.ramp { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ramp li { display: flex; flex-direction: column; gap: var(--space-1); align-items: center; }
.ramp .sw { width: 44px; height: 44px; }
.roles { display: grid; gap: var(--space-2); }
.role { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: var(--space-3); font-family: var(--type-ui-sm-family); font-size: var(--type-ui-sm-size); padding: var(--space-1) 0; border-bottom: var(--rule-width) solid var(--color-surface-border); }
.role-pair { display: flex; gap: 2px; }
.role-pair .sw { width: 28px; height: 28px; }
.role-name { font-weight: 600; }
.role-hex { font-family: var(--type-mono-family); font-size: 12px; color: var(--color-surface-text-muted); }
.specimen { display: grid; gap: var(--space-4); margin-top: var(--space-6); max-width: 900px; }
.specimen > * { padding-bottom: var(--space-4); border-bottom: var(--rule-width) solid var(--color-surface-border); }
.sample { margin-top: var(--space-6); border: 2px solid var(--color-page-text); border-radius: var(--radius-4); overflow: hidden; box-shadow: var(--shadow-raised); }
.sample-marketing { margin-left: var(--container-padding); margin-right: var(--container-padding); }
.sample-product { background: var(--color-page-bg); color: var(--color-page-text); }
.sample-product .content { max-width: none; }
@media (max-width: 960px) { .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); } .board-cols { grid-template-columns: 1fr; } }

/* 50-archetypes.css */
/* Archetype compositions. Each block only restyles structure; colors and type still come from tokens. */

/* ---- Broadsheet ---- */
[data-archetype="broadsheet"] .topbar { border-bottom: 3px double var(--color-page-text); }
[data-archetype="broadsheet"] .wordmark-text { font-family: var(--type-display-xl-family); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
[data-archetype="broadsheet"] .nav a { font-family: var(--type-ui-sm-family); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.hero-bs { padding: var(--space-7) 0 var(--space-8); }
.bs-edition { display: flex; justify-content: space-between; gap: var(--space-4); border-top: var(--rule-width) solid var(--color-page-text); border-bottom: var(--rule-width) solid var(--color-surface-border-strong); padding: var(--space-2) 0; margin-bottom: var(--space-7); }
.bs-head { font-size: clamp(44px, 7.4vw, var(--type-display-xl-size)); font-weight: 500; line-height: 0.96; letter-spacing: -0.03em; max-width: 18ch; color: var(--color-page-text); }
.bs-deck { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--rule-width) solid var(--color-surface-border-strong); }
.bs-deck .lead { font-size: 22px; line-height: 1.45; color: var(--color-page-text); max-width: none; column-count: 1; }
.bs-deck-side { border-left: var(--rule-width) solid var(--color-surface-border-strong); padding-left: var(--space-6); }
.bs-deck-side .cta { margin-top: var(--space-5); }
.bs-strip { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--space-8); border-top: var(--rule-width) solid var(--color-page-text); border-bottom: var(--rule-width) solid var(--color-page-text); }
.bs-strip li { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-right: var(--rule-width) solid var(--color-surface-border-strong); flex: 1 1 140px; font-family: var(--type-ui-sm-family); font-size: 13px; }
.bs-strip li:last-child { border-right: 0; }
.bs-strip .sw { width: 24px; height: 24px; grid-row: span 2; border-radius: 0; }
.bs-strip .sw-name { font-weight: 600; text-transform: capitalize; }
.bs-strip li.bs-strip-type { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; }
.bs-strip li.bs-strip-type > :first-child { grid-row: 1; display: block; }
.bs-strip li.bs-strip-type > :last-child { grid-row: 2; display: block; }
.bs-strip-type .spec-display { font-size: 22px; }
.bs-strip-type .spec-ui { font-size: 15px; }
.bs-rule-head { font-family: var(--type-ui-md-family); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-page-text); border-top: 2px solid var(--color-page-text); padding-top: var(--space-2); margin-bottom: var(--space-6); }
.bs-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.bs-cols > div { padding: 0 var(--space-5); border-left: var(--rule-width) solid var(--color-surface-border-strong); display: flex; flex-direction: column; gap: var(--space-3); }
.bs-cols > div:first-child { padding-left: 0; border-left: 0; }
.bs-cols .body { font-size: 15px; line-height: 1.5; flex: 1; }
.bs-quote { font-style: italic; font-weight: 400; max-width: 24ch; margin-bottom: var(--space-6); }
.bs-rules { column-count: 2; column-gap: var(--space-8); column-rule: var(--rule-width) solid var(--color-surface-border-strong); }
.bs-rules li { break-inside: avoid; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--rule-width) solid var(--color-surface-border-strong); }
.bs-num { font-family: var(--type-display-xl-family); font-size: 30px; font-weight: 500; line-height: 1; color: var(--color-heading-text); }
.bs-table { width: 100%; border-collapse: collapse; font-family: var(--type-body-family); font-size: 18px; }
.bs-table td { padding: var(--space-3) 0; border-top: var(--rule-width) solid var(--color-surface-border-strong); vertical-align: baseline; }
.bs-table tr:last-child td { border-bottom: var(--rule-width) solid var(--color-page-text); }
.bs-kind { width: 140px; font-family: var(--type-ui-sm-family); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-page-text-muted); }
.bs-idx { text-align: right; font-family: var(--type-mono-family); font-size: 12px; color: var(--color-page-text-muted); }
[data-archetype="broadsheet"] .rail-brand, [data-archetype="broadsheet"] .card-title { font-family: var(--type-display-xl-family); }
[data-archetype="broadsheet"] .foot { background: var(--color-page-text); }
@media (max-width: 860px) { .bs-deck, .bs-cols { grid-template-columns: 1fr; } .bs-cols > div { padding: var(--space-4) 0; border-left: 0; border-top: var(--rule-width) solid var(--color-surface-border-strong); } .bs-rules { column-count: 1; } .bs-deck-side { border-left: 0; padding-left: 0; } .bs-edition { flex-wrap: wrap; } }

/* ---- Console ---- */
[data-archetype="console"] body { font-family: var(--type-ui-md-family); }
[data-archetype="console"] .topbar { background: var(--color-dark-section-bg); border-bottom: 0; color: var(--color-dark-section-text); }
[data-archetype="console"] .topbar .wordmark-text, [data-archetype="console"] .nav a { color: var(--color-dark-section-text); }
[data-archetype="console"] .nav a { font-family: var(--type-mono-family); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
[data-archetype="console"] .nav a[aria-current="page"], [data-archetype="console"] .nav a:hover { border-bottom-color: var(--color-action-primary); color: var(--color-dark-section-text); }
[data-archetype="console"] .topbar .wordmark { filter: brightness(0) invert(1); }
.hero-con { padding: var(--space-7) 0 var(--space-8); border-bottom: 4px solid var(--color-dark-section-bg); }
.con-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); align-items: start; }
.con-panel { border: var(--rule-width) solid var(--color-surface-border-strong); background: var(--color-surface-bg); }
.con-panel-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-4); border-bottom: var(--rule-width) solid var(--color-surface-border-strong); background: var(--color-page-bg); }
.con-panel-bar .eyebrow { margin: 0; }
.con-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.con-tiles .stat { border: 0; border-right: var(--rule-width) solid var(--color-surface-border); border-radius: 0; background: transparent; padding: var(--space-4); }
.con-tiles .stat:last-child { border-right: 0; }
.con-tiles .stat-value { font-family: var(--type-mono-family); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; }
.con-table { width: 100%; border-collapse: collapse; font-size: 13px; border-top: var(--rule-width) solid var(--color-surface-border-strong); }
.con-table th { text-align: left; font-family: var(--type-mono-family); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-surface-text-muted); padding: var(--space-2) var(--space-4); border-bottom: var(--rule-width) solid var(--color-surface-border); }
.con-table td { padding: var(--space-2) var(--space-4); border-bottom: var(--rule-width) solid var(--color-surface-border); text-transform: capitalize; }
.con-table td .mono { text-transform: none; }
.con-table .sw-sm { display: inline-block; width: 14px; height: 14px; vertical-align: middle; border-radius: 0; }
.con-copy .display-xl { font-size: clamp(34px, 4.2vw, 52px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--color-page-text); }
.con-copy .lead { margin-top: var(--space-4); font-family: var(--type-ui-md-family); font-size: 17px; }
.con-copy .cta { margin-top: var(--space-5); }
.con-copy .meta { margin-top: var(--space-4); }
.con-head { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-5); align-items: start; margin-bottom: var(--space-6); }
.con-head .eyebrow { margin: 6px 0 0; }
.con-head .h1 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -0.015em; }
.con-modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.con-module { border-top: 4px solid var(--color-dark-section-bg); background: var(--color-page-bg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-height: 100%; }
.con-module .ui-md { flex: 1; font-weight: 400; color: var(--color-page-text-secondary); }
.con-module .mono { color: var(--color-page-text-muted); font-size: 12px; }
.con-log li { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--space-5); padding: var(--space-3) 0; border-top: var(--rule-width) solid var(--color-dark-section-text-muted); font-family: var(--type-ui-md-family); font-size: 15px; }
.con-log li:last-child { border-bottom: var(--rule-width) solid var(--color-dark-section-text-muted); }
.con-log-n { color: var(--color-dark-section-accent); }
.con-log-s { color: var(--color-dark-section-text-muted); font-size: 12px; }
[data-archetype="console"] .btn { border-radius: 0; font-family: var(--type-ui-md-family); letter-spacing: 0.01em; }
[data-archetype="console"] .foot { background: var(--color-neutral-9); }
[data-archetype="console"] .foot-name { font-family: var(--type-mono-family); font-weight: 500; font-size: 18px; }
[data-archetype="console"] .rail { background: var(--color-dark-section-bg); border-right: 0; }
[data-archetype="console"] .rail-brand, [data-archetype="console"] .rail-nav a, [data-archetype="console"] .rail-foot { color: var(--color-dark-section-text); }
[data-archetype="console"] .rail-nav a:hover, [data-archetype="console"] .rail-nav a[aria-current="page"] { background: var(--color-dark-section-bg-deep); color: var(--color-dark-section-text); }
[data-archetype="console"] .rail-nav a { font-family: var(--type-mono-family); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
[data-archetype="console"] .stat-value { font-family: var(--type-mono-family); font-weight: 500; letter-spacing: -0.02em; }
@media (max-width: 960px) { .con-grid, .con-modules, .con-head { grid-template-columns: 1fr; } .con-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .con-tiles .stat:nth-child(2n) { border-right: 0; } .con-log li { grid-template-columns: 1fr; gap: var(--space-1); } }

/* ---- Poster ---- */
.sec-accent { background: var(--color-action-primary); color: var(--color-action-primary-text); }
.sec-accent .display-xl, .sec-accent .h1, .sec-accent .eyebrow, .sec-accent .lead { color: var(--color-action-primary-text); }
.sec-accent .btn[data-kind="primary"] { background: var(--color-action-primary-text); color: var(--color-action-primary); }
.sec-accent .btn[data-kind="primary"]:hover { background: var(--color-neutral-0); }
.sec-accent .btn[data-kind="secondary"] { background: transparent; color: var(--color-action-primary-text); border-color: var(--color-action-primary-text); }
.hero-po { padding: var(--space-9) 0 var(--space-8); }
.po-head { font-size: clamp(56px, 9.5vw, var(--type-display-xl-size)); font-weight: 800; line-height: 0.92; letter-spacing: -0.04em; max-width: 12ch; }
.po-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: end; margin-top: var(--space-7); }
.po-hero-row .lead { font-size: 22px; max-width: 44ch; }
.po-strip-sec { padding: 0; }
.po-strip { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5) var(--container-padding); }
.po-chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-3); align-items: center; flex: 1 1 160px; font-family: var(--type-ui-sm-family); font-size: 13px; }
.po-chip .sw { grid-row: span 2; width: 48px; height: 48px; border-radius: var(--radius-4); }
.po-chip .sw-name { font-weight: 700; text-transform: capitalize; font-size: 15px; }
.po-chip-type .spec-display, .po-chip-type .spec-ui { grid-row: span 2; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-surface-bg); border-radius: var(--radius-4); font-size: 22px; margin: 0; }
.po-sec-head { font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; margin-bottom: var(--space-7); max-width: 16ch; }
.po-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.po-block { background: var(--color-dark-section-bg); color: var(--color-dark-section-text); border-radius: var(--radius-4); padding: var(--space-7); min-height: 280px; display: flex; flex-direction: column; gap: var(--space-3); }
.po-block .eyebrow { color: var(--color-dark-section-accent); }
.po-block .h2 { color: var(--color-dark-section-text); font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; }
.po-block .ui-md { color: var(--color-dark-section-text-muted); font-weight: 400; font-size: 16px; max-width: 40ch; margin-top: auto; }
.po-block-alt { background: var(--color-surface-bg); color: var(--color-surface-text); }
.po-block-alt .eyebrow { color: var(--color-link-text); }
.po-block-alt .h2 { color: var(--color-heading-text); }
.po-block-alt .ui-md { color: var(--color-surface-text); }
.po-rules li { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-5); align-items: start; padding: var(--space-5) 0; border-top: 2px solid var(--color-surface-border-strong); }
.po-rules .h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; max-width: 30ch; }
.po-num { font-family: var(--type-display-xl-family); font-size: 64px; font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--color-action-primary); }
.po-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-6); margin-top: var(--space-6); }
.po-facts div { border-top: 2px solid var(--color-dark-section-accent); padding-top: var(--space-3); }
.po-facts dt { font-family: var(--type-ui-sm-family); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-dark-section-accent); }
.po-facts dd { margin: var(--space-2) 0 0; font-family: var(--type-display-xl-family); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
[data-archetype="poster"] .btn { font-weight: 700; }
[data-archetype="poster"] .btn[data-size="lg"] { border-radius: var(--radius-3); padding: 0 var(--space-6); }
[data-archetype="poster"] .wordmark-text { font-family: var(--type-display-xl-family); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
[data-archetype="poster"] .rail-brand, [data-archetype="poster"] .h1, [data-archetype="poster"] .h2 { font-family: var(--type-display-xl-family); letter-spacing: -0.02em; }
[data-archetype="poster"] .stat-value { font-family: var(--type-display-xl-family); font-weight: 800; }
[data-archetype="poster"] .stat, [data-archetype="poster"] .table-wrap, [data-archetype="poster"] .save-bar { border-radius: var(--radius-4); }
@media (max-width: 860px) { .po-hero-row, .po-blocks, .po-facts { grid-template-columns: 1fr; } .po-rules li { grid-template-columns: 56px 1fr; } .po-num { font-size: 44px; } }