/* Hallmark · genre: editorial · macrostructure: Manifesto · nav: N7 · footer: Ft8
 * theme: custom · vibe: "poster scale asymmetric graphic decisive" · paper: oklch(94% 0.17 96) · accent: oklch(58% 0.23 31)
 * display: Anton · body: IBM Plex Sans · axes: light / display-heavy / warm
 * enrichment: tier-A CSS poster and review surfaces · studied: no · context: explicit
 * contrast: pass (40-41) · slop: pass (1-57) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (34, 49-57) · icons: pass (30)
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5 */

body { background: var(--color-paper-2); }
.offset-pack-bar { min-height: 4.5rem; border-bottom: var(--rule-strong) solid var(--color-ink); background: var(--color-paper); color: var(--color-ink); }
.offset-wordmark { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: 0.01em; }
.offset-pack-bar .pack-links a { font-weight: 700; letter-spacing: 0.04em; }
.offset-pack-bar .pack-links a:last-child { border: var(--rule-strong) solid var(--color-ink); background: var(--color-accent); }

.offset-hero { min-height: 59rem; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(24rem, 1.15fr); grid-template-rows: auto 1fr auto; gap: var(--space-lg) var(--space-2xl); padding: var(--space-lg) var(--page-gutter) var(--space-2xl); background: var(--color-paper); }
.offset-hero-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; }
.offset-hero-meta span:nth-child(2) { text-align: center; }
.offset-hero-meta span:last-child { text-align: right; }
.offset-hero-statement { align-self: center; position: relative; z-index: var(--z-raised); }
.offset-hero-statement .pack-label { color: var(--color-ink); font-weight: 700; }
.offset-hero-statement h1 { margin-top: var(--space-lg); font-size: clamp(5.5rem, 14vw, 12rem); font-weight: 400; letter-spacing: -0.055em; line-height: 1; }
.offset-hero-statement h1 span { color: var(--color-accent); }
.offset-hero-artifact { align-self: center; min-width: 0; transform: rotate(1.2deg); }
.offset-hero-artifact > figcaption { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) var(--space-sm); border: var(--rule-strong) solid var(--color-ink); border-bottom: 0; background: var(--color-blue); color: var(--color-paper-2); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; }
.proof-poster { min-height: 37rem; display: grid; grid-template-columns: 9rem minmax(0, 1fr); grid-template-rows: 1fr auto; border: var(--rule-strong) solid var(--color-ink); background: var(--color-paper); }
.poster-index { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-lg); border-inline-end: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); }
.poster-index span { writing-mode: vertical-rl; }
.poster-index strong { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; }
.poster-image { position: relative; overflow: clip; background: var(--color-blue); }
.poster-image i { position: absolute; display: block; transform: rotate(-13deg); background: var(--color-paper); }
.poster-image i:first-child { width: 78%; height: 35%; top: 12%; left: -14%; }
.poster-image i:nth-child(2) { width: 82%; height: 22%; right: -18%; bottom: 13%; background: var(--color-accent); }
.poster-image b { position: absolute; right: var(--space-lg); bottom: var(--space-lg); padding: var(--space-xs) var(--space-sm); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-label); transform: rotate(-2deg); }
.poster-caption { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-top: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); font-size: var(--text-xs); }
.offset-hero-note { grid-column: 1 / -1; max-width: 46rem; justify-self: end; padding-top: var(--space-lg); border-top: var(--rule-strong) solid var(--color-ink); font-size: var(--text-md); font-weight: 600; }

.offset-comparison { padding: var(--space-4xl) var(--page-gutter); background: var(--color-paper-2); }
.offset-comparison > header { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.6fr); gap: var(--space-xl); align-items: end; margin-bottom: var(--space-2xl); }
.offset-head-stack { display: grid; gap: var(--space-sm); }
.offset-head-stack > span, .offset-section-title--solo > span, .offset-mobile-copy > span { font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; }
.offset-comparison h2, .offset-section-title h2, .offset-mobile h2 { font-size: var(--text-display-s); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.offset-comparison > header p, .offset-section-title > p { max-width: 32rem; color: var(--color-muted); }
.offset-compare-grid { display: grid; grid-template-columns: minmax(17rem, 0.65fr) minmax(0, 1.35fr); gap: var(--space-lg); }
.offset-compare-grid > figure { min-width: 0; padding: var(--space-sm); border: var(--rule-strong) solid var(--color-ink); }
.offset-compare-grid figcaption { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; }
.offset-generic > div { min-height: 34rem; display: grid; align-content: center; justify-items: center; gap: var(--space-md); padding: var(--space-lg); background: var(--color-blue-soft); text-align: center; }
.offset-generic > div > small { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-blue); }
.offset-generic h3 { max-width: 13ch; font-family: var(--font-body); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.04em; }
.offset-generic p { max-width: 34ch; color: var(--color-muted); }
.offset-generic > div > div { display: flex; gap: var(--space-xs); }
.offset-generic > div > div span { padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.offset-generic > div > div span:first-child { background: var(--color-blue); color: var(--color-paper-2); }
.offset-generic section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-md); }
.offset-generic article { display: grid; gap: var(--space-xs); padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-paper-2); text-align: left; }
.offset-generic article i { width: var(--space-lg); height: var(--space-lg); border-radius: var(--radius-sm); background: var(--color-blue-soft); }
.offset-generic article small { color: var(--color-muted); line-height: 1.35; }
.offset-specific > div { min-height: 34rem; display: grid; grid-template-rows: auto 1fr auto; background: var(--color-paper); }
.offset-specific > div > header, .offset-specific > div > footer { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-bottom: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; }
.offset-specific > div > header strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.offset-specific > div > main { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; min-height: 27rem; }
.compare-type { align-self: center; padding: var(--space-lg); font-family: var(--font-display); font-size: clamp(3.8rem, 8vw, 7.4rem); line-height: 1; letter-spacing: -0.04em; }
.compare-type span { color: var(--color-accent); }
.offset-specific aside { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-lg); background: var(--color-blue); color: var(--color-paper-2); }
.offset-specific aside b { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; }
.offset-specific aside p { font-size: var(--text-md); font-weight: 600; }
.offset-specific aside span { font-family: var(--font-label); font-size: var(--text-xs); }
.offset-specific > div > footer { border-top: var(--rule-strong) solid var(--color-ink); border-bottom: 0; }

.offset-landing, .offset-product, .offset-system { padding: var(--space-4xl) var(--page-gutter); }
.offset-landing { background: var(--color-paper); }
.offset-section-title { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.55fr); gap: var(--space-xl); align-items: end; margin-bottom: var(--space-2xl); }
.offset-section-title--solo { display: flex; align-items: flex-start; flex-direction: column; gap: var(--space-sm); }
.offset-section-title h2 { max-width: 12ch; }
.proof-landing { border: var(--rule-strong) solid var(--color-ink); }
.proof-landing > header, .proof-landing > footer { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-sm) var(--space-lg); background: var(--color-paper-2); font-family: var(--font-label); font-weight: 700; }
.proof-landing > header { border-bottom: var(--rule-strong) solid var(--color-ink); }
.proof-landing > header strong { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; }
.proof-landing nav { display: flex; gap: var(--space-lg); }
.proof-landing > header > span { padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper-2); }
.proof-opening { min-height: 32rem; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr); }
.proof-opening-type { align-self: center; padding: var(--space-xl); font-family: var(--font-display); font-size: clamp(4rem, 11vw, 9.5rem); line-height: 1; letter-spacing: -0.04em; }
.proof-opening-type strong { display: block; color: var(--color-accent); font-weight: 400; }
.proof-opening aside { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xl); padding: var(--space-xl); border-inline-start: var(--rule-strong) solid var(--color-ink); background: var(--color-paper); }
.proof-opening aside p { max-width: 22ch; font-size: var(--text-lg); font-weight: 600; }
.proof-opening aside span { font-family: var(--font-label); font-weight: 700; }
.proof-feature { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr); border-top: var(--rule-strong) solid var(--color-ink); }
.feature-frame { padding: var(--space-lg); background: var(--color-blue); color: var(--color-paper-2); }
.feature-frame > span { font-family: var(--font-label); font-size: var(--text-xs); }
.feature-visual { position: relative; min-height: 26rem; margin-block: var(--space-lg); overflow: clip; background: var(--color-paper); }
.feature-visual i { position: absolute; width: 80%; height: 28%; transform: rotate(-12deg); background: var(--color-accent); }
.feature-visual i:first-child { left: -18%; top: 15%; }
.feature-visual i:nth-child(2) { right: -15%; bottom: 18%; background: var(--color-blue-soft); }
.feature-visual b { position: absolute; right: var(--space-lg); bottom: var(--space-md); color: var(--color-ink); font-family: var(--font-display); font-size: clamp(5rem, 13vw, 11rem); font-weight: 400; }
.feature-frame footer { display: flex; justify-content: space-between; gap: var(--space-md); font-family: var(--font-label); font-size: var(--text-xs); }
.feature-notes { display: grid; grid-template-rows: auto 1fr 1fr auto; border-inline-start: var(--rule-strong) solid var(--color-ink); background: var(--color-paper-2); }
.feature-notes > header, .feature-notes > footer { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-bottom: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); font-weight: 700; }
.feature-notes article { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.feature-notes article strong, .feature-notes article small { font-family: var(--font-label); }
.feature-notes article p { font-size: var(--text-md); font-weight: 600; }
.feature-notes article small { color: var(--color-muted); }
.proof-landing > footer { border-top: var(--rule-strong) solid var(--color-ink); }

.offset-product { background: var(--color-paper-2); }
.proof-workspace { min-height: 49rem; border: var(--rule-strong) solid var(--color-ink); background: var(--color-paper-2); box-shadow: var(--space-sm) var(--space-sm) 0 var(--color-shadow); }
.proof-workspace > header, .proof-workspace > footer { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-sm) var(--space-lg); background: var(--color-paper); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; }
.proof-workspace > header { border-bottom: var(--rule-strong) solid var(--color-ink); }
.proof-workspace > header strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.proof-workspace > header nav { display: flex; gap: var(--space-xs); }
.proof-workspace > header nav span { min-height: 2.5rem; display: inline-flex; align-items: center; padding-inline: var(--space-md); border: var(--rule-strong) solid var(--color-ink); }
.proof-workspace > header nav .is-primary { background: var(--color-accent); }
.proof-workspace-body { min-height: 41rem; display: grid; grid-template-columns: 10rem minmax(0, 1fr) 20rem; }
.proof-assets { display: grid; grid-template-rows: auto repeat(3, 1fr) auto; border-inline-end: var(--rule-strong) solid var(--color-ink); }
.proof-assets > span, .proof-assets > small { padding: var(--space-md); font-family: var(--font-label); font-size: var(--text-xs); }
.proof-assets > div { display: grid; align-content: end; gap: var(--space-xs); padding: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.proof-assets > div i { min-height: 4.5rem; background: var(--color-paper-3); }
.proof-assets > div:nth-of-type(2) i { background: var(--color-blue-soft); }
.proof-assets > div:nth-of-type(3) i { background: var(--color-accent-soft); }
.proof-assets > div b { font-family: var(--font-label); font-size: var(--text-xs); }
.proof-assets > div.is-current { background: var(--color-paper); }
.proof-assets > div.is-current i { border: var(--rule-strong) solid var(--color-accent); background: var(--color-blue); }
.proof-stage { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-md); padding: var(--space-lg); background: var(--color-ink); color: var(--color-paper-2); }
.stage-meta, .stage-timeline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); font-family: var(--font-label); font-size: var(--text-xs); }
.stage-art { position: relative; min-height: 30rem; overflow: clip; background: var(--color-blue); }
.stage-letter { position: absolute; left: -2%; bottom: -19%; color: var(--color-paper); font-family: var(--font-display); font-size: clamp(18rem, 34vw, 35rem); line-height: 1; opacity: 0.35; }
.stage-art > i { position: absolute; height: 22%; transform: rotate(-11deg); background: var(--color-accent); }
.stage-plane-a { width: 80%; top: 14%; left: -15%; }
.stage-plane-b { width: 68%; right: -10%; bottom: 15%; background: var(--color-paper) !important; }
.stage-art > b { position: absolute; left: var(--space-lg); bottom: var(--space-lg); font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6rem); font-weight: 400; line-height: 1; }
.comment-pin { position: absolute; top: 33%; right: 23%; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: var(--rule-strong) solid var(--color-ink); border-radius: 50%; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-label); font-weight: 700; }
.stage-timeline > div { height: 2.25rem; flex: 1; display: flex; align-items: center; gap: var(--space-2xs); position: relative; }
.stage-timeline i { flex: 1; height: var(--space-xs); background: var(--color-muted); }
.stage-timeline i:nth-child(2) { background: var(--color-blue-soft); }
.stage-timeline i:nth-child(3) { background: var(--color-accent); }
.stage-timeline b { position: absolute; left: 43%; width: var(--rule-strong); height: 100%; background: var(--color-paper); }
.proof-comments { display: grid; grid-template-rows: auto 1fr 1fr auto; border-inline-start: var(--rule-strong) solid var(--color-ink); }
.proof-comments > header { display: flex; justify-content: space-between; padding: var(--space-md); border-bottom: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); }
.proof-comments article { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.proof-comments article.is-active { background: var(--color-paper); }
.proof-comments article span, .proof-comments article strong, .proof-comments article small { font-family: var(--font-label); font-size: var(--text-xs); }
.proof-comments article p { font-weight: 600; }
.proof-comments article small { color: var(--color-muted); }
.proof-comment-input { align-self: end; display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-top: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); font-size: var(--text-xs); }
.proof-workspace > footer { border-top: var(--rule-strong) solid var(--color-ink); }

.offset-mobile { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr); gap: var(--space-3xl); align-items: center; padding: var(--space-4xl) var(--page-gutter); background: var(--color-paper); }
.offset-mobile-copy { display: grid; gap: var(--space-lg); }
.offset-mobile-copy h2 { max-width: 12ch; }
.offset-mobile-copy p { max-width: 36rem; font-size: var(--text-md); font-weight: 600; }
.proof-mobile { border: var(--rule-strong) solid var(--color-ink); background: var(--color-paper-2); box-shadow: var(--space-sm) var(--space-sm) 0 var(--color-shadow); }
.proof-mobile > figcaption, .proof-mobile > footer { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-bottom: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; }
.proof-mobile-art { position: relative; min-height: 26rem; overflow: clip; background: var(--color-blue); color: var(--color-paper-2); }
.proof-mobile-art > span:first-child { position: absolute; left: -4%; bottom: -20%; font-family: var(--font-display); font-size: 22rem; line-height: 1; opacity: 0.32; }
.proof-mobile-art i { position: absolute; width: 90%; height: 20%; top: 18%; right: -22%; transform: rotate(-12deg); background: var(--color-accent); }
.proof-mobile-art b { position: absolute; left: var(--space-lg); bottom: var(--space-lg); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; line-height: 1; }
.proof-mobile-art small { position: absolute; top: var(--space-md); left: var(--space-md); font-family: var(--font-label); }
.mobile-note { display: grid; gap: var(--space-sm); padding: var(--space-lg); border-bottom: var(--rule-strong) solid var(--color-ink); }
.mobile-note span, .mobile-note small { font-family: var(--font-label); font-size: var(--text-xs); }
.mobile-note p { font-size: var(--text-md); font-weight: 600; }
.mobile-approval { display: grid; grid-template-columns: 1fr 1.2fr; }
.mobile-approval span, .mobile-approval strong { min-height: 4rem; display: grid; place-items: center; padding: var(--space-sm); font-family: var(--font-label); font-size: var(--text-xs); text-align: center; }
.mobile-approval strong { border-inline-start: var(--rule-strong) solid var(--color-ink); background: var(--color-accent); }
.proof-mobile > footer { border-top: var(--rule-strong) solid var(--color-ink); border-bottom: 0; }

.offset-system { background: var(--color-paper-2); }
.offset-system-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg); }
.offset-system-grid > section { min-width: 0; border: var(--rule-strong) solid var(--color-ink); background: var(--color-paper); }
.offset-actions { grid-column: span 7; }
.offset-input { grid-column: span 5; }
.offset-states { grid-column: span 12; display: grid; grid-template-columns: 1fr 1fr; }
.offset-system-grid section > header { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-bottom: var(--rule-strong) solid var(--color-ink); background: var(--color-paper-3); font-family: var(--font-label); }
.offset-system-grid section > header h3 { font-family: var(--font-label); font-size: var(--text-base); }
.offset-actions nav { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: var(--rule-strong) solid var(--color-ink); }
.offset-actions nav span { min-height: 3.25rem; display: grid; place-items: center; border-inline-end: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); font-weight: 700; }
.offset-actions nav span:last-child { border-inline-end: 0; }
.offset-actions nav .is-current { background: var(--color-blue); color: var(--color-paper-2); }
.offset-actions > div { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-lg); }
.offset-button, .offset-text-link { min-height: 3rem; display: inline-flex; align-items: center; padding: 0 var(--space-md); border: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); font-weight: 700; }
.offset-button.is-primary { background: var(--color-accent); }
.offset-text-link { border-color: transparent; }
.offset-actions > footer { display: flex; gap: var(--space-lg); padding: var(--space-md); border-top: var(--rule-strong) solid var(--color-ink); font-family: var(--font-label); font-size: var(--text-xs); }
.offset-actions > footer span::before { content: "■"; margin-inline-end: var(--space-xs); color: var(--color-blue); }
.offset-actions > footer span:nth-child(2)::before { color: var(--color-accent); }
.offset-actions > footer span:nth-child(3)::before { color: var(--color-muted); }
.offset-input { display: grid; align-content: start; }
.offset-input > label { padding: var(--space-lg) var(--space-lg) 0; font-family: var(--font-label); font-weight: 700; }
.offset-input > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; margin: var(--space-sm) var(--space-lg) var(--space-lg); padding: var(--space-md); border: var(--rule-strong) solid var(--color-ink); }
.offset-input input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-ink); }
.offset-input > div span { font-family: var(--font-label); font-size: var(--text-xs); }
.offset-error { display: grid; gap: var(--space-xs); margin-top: auto; padding: var(--space-lg); border-top: var(--rule-strong) solid var(--color-ink); background: var(--color-accent-soft); }
.offset-error strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; }
.offset-states > header { grid-column: 1 / -1; }
.offset-loading, .offset-empty { min-height: 13rem; display: grid; align-content: center; gap: var(--space-sm); padding: var(--space-xl); }
.offset-loading { grid-template-columns: auto 1fr; border-inline-end: var(--rule-strong) solid var(--color-ink); }
.offset-loading small { grid-column: 2; }
.offset-empty { grid-template-columns: auto 1fr auto; align-items: center; }
.offset-empty b { font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 400; color: var(--color-blue); }
.offset-empty p { display: grid; }
.offset-empty > span { font-family: var(--font-label); font-weight: 700; }

.offset-footer { overflow: clip; border-top: var(--rule-strong) solid var(--color-ink); background: var(--color-accent); }
.offset-marquee { padding-block: var(--space-md); border-bottom: var(--rule-strong) solid var(--color-ink); white-space: nowrap; }
.offset-marquee span { display: inline-block; font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 7rem); line-height: 1; animation: offset-marquee 32s linear infinite; }
@keyframes offset-marquee { to { transform: translateX(-50%); } }
.offset-footer > div:last-child { display: flex; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) var(--page-gutter); font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; }
.offset-footer nav { display: flex; gap: var(--space-lg); }
.offset-footer a { min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .offset-button, .offset-text-link, .mobile-approval strong { transition: transform var(--dur-micro) var(--ease-out); }
  .offset-button:hover, .offset-text-link:hover, .mobile-approval strong:hover { transform: translateY(calc(var(--space-3xs) * -1)); }
}

@media (max-width: 75rem) {
  .proof-workspace-body { grid-template-columns: 7rem minmax(0, 1fr) 16rem; }
  .proof-assets > small { display: none; }
}

@media (max-width: 60rem) {
  .offset-hero { min-height: auto; grid-template-columns: minmax(0, 1fr); }
  .offset-hero-artifact { transform: none; }
  .offset-hero-statement h1 { font-size: clamp(5rem, 22vw, 9rem); }
  .offset-comparison > header, .offset-section-title { grid-template-columns: minmax(0, 1fr); }
  .offset-compare-grid { grid-template-columns: minmax(0, 1fr); }
  .proof-opening { grid-template-columns: minmax(0, 1fr); }
  .proof-opening aside { border-inline-start: 0; border-top: var(--rule-strong) solid var(--color-ink); }
  .proof-feature { grid-template-columns: minmax(0, 1fr); }
  .feature-notes { border-inline-start: 0; border-top: var(--rule-strong) solid var(--color-ink); }
  .proof-workspace-body { grid-template-columns: 6rem minmax(0, 1fr); }
  .proof-comments { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; border-inline-start: 0; border-top: var(--rule-strong) solid var(--color-ink); }
  .proof-comments > header, .proof-comment-input { grid-column: 1 / -1; }
  .offset-mobile { grid-template-columns: minmax(0, 1fr); }
  .proof-mobile { width: min(100%, 30rem); }
  .offset-actions, .offset-input, .offset-states { grid-column: span 12; }
}

@media (max-width: 40rem) {
  .offset-pack-bar .pack-brand > span:last-child, .offset-pack-bar .pack-links a:first-child { display: none; }
  .offset-pack-bar .pack-links a:last-child { padding-inline: var(--space-sm); }
  .offset-hero, .offset-comparison, .offset-landing, .offset-product, .offset-mobile, .offset-system { padding: var(--space-2xl) var(--page-gutter); }
  .offset-hero-meta { grid-template-columns: minmax(0, 1fr); }
  .offset-hero-meta span:nth-child(2), .offset-hero-meta span:last-child { display: none; }
  .offset-hero-statement h1 { font-size: clamp(4.8rem, 26vw, 7rem); line-height: 1; }
  .proof-poster { min-height: 26rem; grid-template-columns: 4rem minmax(0, 1fr); }
  .poster-index { padding: var(--space-sm); }
  .poster-caption { align-items: flex-start; flex-direction: column; }
  .offset-hero-note { font-size: var(--text-base); }
  .offset-comparison h2, .offset-section-title h2, .offset-mobile h2 { font-size: clamp(3rem, 17vw, 4.6rem); }
  .offset-compare-grid > figure { padding: var(--space-xs); }
  .offset-generic section { grid-template-columns: minmax(0, 1fr); }
  .offset-generic article:nth-child(n+2) { display: none; }
  .offset-specific > div > main { grid-template-columns: minmax(0, 1fr); }
  .compare-type { font-size: clamp(3.3rem, 18vw, 5rem); }
  .offset-specific aside { min-height: 12rem; }
  .proof-landing > header nav, .proof-landing > header > span, .proof-landing > footer span:last-child { display: none; }
  .proof-opening { min-height: auto; }
  .proof-opening-type { font-size: clamp(3.8rem, 20vw, 6rem); }
  .feature-visual { min-height: 17rem; }
  .feature-frame footer { align-items: flex-start; flex-direction: column; }
  .feature-notes article:nth-child(3) { display: none; }
  .proof-workspace { min-height: auto; box-shadow: none; }
  .proof-workspace > header > span, .proof-workspace > header nav span:first-child, .proof-workspace > footer span:nth-child(2) { display: none; }
  .proof-workspace-body { grid-template-columns: minmax(0, 1fr); }
  .proof-assets { grid-template-columns: auto repeat(3, 1fr); grid-template-rows: auto; border-inline-end: 0; border-bottom: var(--rule-strong) solid var(--color-ink); }
  .proof-assets > span, .proof-assets > small { display: none; }
  .proof-assets > div { border-top: 0; border-inline-end: var(--rule-hair) solid var(--color-rule); }
  .proof-assets > div i { min-height: 2.75rem; }
  .proof-stage { padding: var(--space-md); }
  .stage-art { min-height: 24rem; }
  .stage-art > b { font-size: var(--text-3xl); }
  .proof-comments { grid-template-columns: minmax(0, 1fr); }
  .proof-comments article:nth-of-type(2) { display: none; }
  .offset-mobile-copy p { font-size: var(--text-base); }
  .proof-mobile-art { min-height: 22rem; }
  .mobile-approval { grid-template-columns: minmax(0, 1fr); }
  .mobile-approval strong { border-inline-start: 0; border-top: var(--rule-strong) solid var(--color-ink); }
  .offset-system-grid { grid-template-columns: minmax(0, 1fr); }
  .offset-actions, .offset-input, .offset-states { grid-column: auto; }
  .offset-actions nav { grid-template-columns: 1fr 1fr; }
  .offset-actions nav span:last-child { display: none; }
  .offset-states { grid-template-columns: minmax(0, 1fr); }
  .offset-states > header { grid-column: auto; }
  .offset-loading { border-inline-end: 0; border-bottom: var(--rule-strong) solid var(--color-ink); }
  .offset-empty { grid-template-columns: auto 1fr; }
  .offset-empty > span { grid-column: 2; }
  .offset-footer > div:last-child { align-items: flex-start; flex-direction: column; }
  .offset-footer nav { flex-direction: column; gap: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .offset-marquee span { animation: none; }
}