:root {
  --hero-ratio: 1.12;
  --hero-ratio-medium: 1.08;
  --rack-stroke: 1.2;
  --rack-dash: 4 6;
  --swatch-height: 64px;
  --sample-min: 165px;
  --client-min: 180px;
  --feature-label-width: 180px;
  --preview-two: 2;
  --preview-three: 3;
  --rack-mobile-height: 210px;
}
.hero { min-height: var(--hero-height); display: flex; align-items: center; padding-block: var(--s10); overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: 1fr calc(var(--hero-ratio) * 1fr); grid-template-columns: 1fr 1.12fr; gap: var(--s12); align-items: end; }
.hero-copy { position: relative; min-width: 0; min-height: var(--panel-height); display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--caption); color: var(--muted); line-height: 1; padding: var(--s2) var(--s3); border-radius: var(--radius); background: var(--panel); }
.eyebrow svg { width: var(--s4); height: var(--s4); color: var(--blue); }
.title-brand { display: block; margin-bottom: var(--s1); }
.title-subject { display: block; }
.hero-actions { display: flex; gap: var(--s3); margin-top: var(--s7); }
.hero-description { font-size: var(--lead); line-height: var(--leading); color: var(--muted); margin: var(--s6) 0 0; max-width: 100%; }
.hero-description strong { color: var(--text); font-weight: var(--medium); }
.trust-list { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); list-style: none; padding: 0; margin: var(--s5) 0 0; }
.trust-list li { display: flex; align-items: center; gap: var(--s2); font-size: var(--caption); white-space: nowrap; margin: 0; }
.trust-list svg { width: var(--s4); height: var(--s4); color: var(--blue); }
.platforms { width: 100%; margin-top: auto; padding-top: var(--s7); }
.platform-note { color: var(--muted); font-size: var(--small); margin: 0 0 var(--s4); display: flex; align-items: center; gap: var(--s3); }
.platform-note::after { content: ''; flex: 1; height: var(--line); background: var(--hairline); }
.platform-list { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.platform-list li { display: flex; align-items: center; gap: var(--s2); font-size: var(--caption); white-space: nowrap; color: var(--muted); margin: 0; min-width: 0; }
.platform-list svg { width: var(--icon-size); height: var(--icon-size); }
.route-cabinet { min-width: 0; height: var(--panel-height); margin: 0; background: var(--panel); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--panel-shadow); }
.cabinet-heading { padding: var(--s7) var(--s8) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); font-size: var(--body-small); color: var(--muted); }
.cabinet-heading p { margin: 0; display: flex; align-items: center; gap: var(--s3); }
.cabinet-heading svg { width: var(--s5); height: var(--s5); color: var(--blue); }
.cabinet-caption { font-family: var(--font-mono); font-size: var(--small); letter-spacing: var(--tracking); color: var(--blue); }
.rack-art { width: 100%; height: auto; flex: 1; min-height: 0; }
.rack-paper { fill: var(--panel-raised); stroke: var(--border); stroke-width: var(--line); }
.rack-paper-front { fill: url(#paper-tone); stroke: var(--border); stroke-width: var(--line); }
.rack-paper-back { fill: var(--panel); stroke: var(--border); stroke-width: var(--line); }
.paper-tone-top { stop-color: var(--panel-raised); }
.paper-tone-bottom { stop-color: var(--panel); }
.paper-depth { filter: drop-shadow(var(--paper-shadow)); }
.rack-floor { fill: var(--panel-raised); stroke: var(--border); stroke-width: var(--line); }
.rack-front { fill: var(--bg); stroke: var(--border); stroke-width: var(--line); }
.rack-side { fill: var(--panel); stroke: var(--border); stroke-width: var(--line); }
.rack-shadow { filter: drop-shadow(var(--rack-shadow)); }
.rack-ink { fill: none; stroke: var(--blue); stroke-width: var(--rack-stroke); stroke-linecap: round; stroke-linejoin: round; }
.rack-faint { fill: none; stroke: var(--border); stroke-width: var(--line); stroke-linecap: round; }
.rack-label { font-family: var(--font-body); font-size: var(--body-small); font-weight: var(--regular); fill: var(--text); }
.rack-dash { fill: none; stroke: var(--blue); stroke-width: var(--line); stroke-dasharray: var(--rack-dash); stroke-linecap: round; }
.rack-port { fill: var(--panel); stroke: var(--blue); stroke-width: var(--rack-stroke); }
.cabinet-footnote { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 var(--s8); padding-bottom: var(--s6); font-size: var(--small); color: var(--muted); }
.cabinet-footnote a { min-height: var(--s6); font-size: var(--caption); color: var(--text); white-space: nowrap; display: flex; align-items: center; gap: var(--s2); }
.cabinet-footnote a:hover { color: var(--accent); }
.cabinet-footnote svg { width: var(--s4); height: var(--s4); }
.experience-note { line-height: var(--tight-leading); }
.region-list { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--s2); list-style: none; margin: 0 var(--s8); padding: var(--s6) 0; border-top: var(--line) solid var(--hairline); }
.region-list li { display: flex; align-items: center; justify-content: center; gap: var(--s2); font-size: var(--small); white-space: nowrap; margin: 0; min-width: 0; }
.region-list svg { width: var(--flag-width); height: var(--flag-height); border-radius: var(--radius-small); overflow: hidden; }
.flag-white { fill: var(--flag-white); }
.flag-red { fill: var(--flag-red); }
.flag-blue { fill: var(--flag-blue); }
.flag-fr-blue { fill: var(--flag-fr-blue); }
.flag-black { fill: var(--flag-black); }
.flag-gold { fill: var(--flag-gold); }
.flag-stripes { fill: none; stroke: var(--flag-red); stroke-width: var(--focus); }
.facts-strip { border-top: var(--line) solid var(--hairline); border-bottom: var(--line) solid var(--hairline); background: var(--panel); }
.facts-inner { min-height: var(--s13); display: flex; align-items: center; gap: var(--s10); }
.fact-entry { display: flex; align-items: center; gap: var(--s5); font-size: var(--body-small); }
.fact-entry + .fact-entry { padding-left: var(--s10); border-left: var(--line) solid var(--border); }
.fact-label { font-size: var(--small); color: var(--muted); }
.fact-value { font-family: var(--font-mono); font-size: var(--body-small); color: var(--text); font-variant-numeric: tabular-nums; }
.fact-tail { margin-left: auto; color: var(--muted); font-size: var(--small); }
.tabs { min-width: 0; }
.tab-list, [role="tablist"] { display: flex; gap: var(--s2); max-width: 100%; overflow-x: auto; padding: var(--s2); margin-bottom: var(--s6); background: var(--panel); border: var(--line) solid var(--border); border-radius: var(--radius); }
[role="tab"] { flex-shrink: 0; min-height: var(--touch-size); padding: var(--s2) var(--s5); background: var(--clear); color: var(--muted); border: var(--line) solid var(--clear); border-radius: var(--radius); }
[role="tab"]:hover { color: var(--text); background: var(--panel-raised); }
[role="tab"][aria-selected="true"] { background: var(--panel-raised); color: var(--text); border-color: var(--blue); box-shadow: var(--panel-shadow); }
.tab-panel { min-width: 0; }
.tab-panel + .tab-panel { margin-top: var(--s8); }
.tabs.is-enhanced .tab-panel { margin-top: 0; }
.toc-tabs { position: sticky; top: var(--s3); z-index: var(--z-toc); display: flex; gap: var(--s2); min-height: var(--toc-height); align-items: center; padding: var(--s2); margin-block: var(--s6); overflow-x: auto; max-width: 100%; background: var(--panel); border: var(--line) solid var(--border); border-radius: var(--radius); box-shadow: var(--lift-shadow); overscroll-behavior-x: contain; }
.toc-tabs a { display: inline-flex; align-items: center; flex-shrink: 0; min-height: var(--touch-size); padding-inline: var(--s4); white-space: nowrap; border-radius: var(--radius); color: var(--muted); }
.toc-tabs a.is-current { color: var(--text); background: var(--panel-raised); box-shadow: inset 0 calc(var(--line) * -2) 0 var(--accent); }
.toc-tabs.toc-static { position: static; }
body:has(.toc-tabs) section[id], body:has(.toc-tabs) :is(h2,h3)[id] { scroll-margin-top: var(--anchor-offset); }
.faq-item { border-bottom: var(--line) solid var(--border); background: var(--panel); }
.faq-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s6); min-height: var(--touch-size); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--blue); flex-shrink: 0; font-family: var(--font-mono); }
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding: 0 var(--s6) var(--s6); color: var(--muted); }
.faq-answer p:last-child { margin-bottom: 0; }
.plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s6); }
.plan-card { min-width: 0; padding: var(--s8); display: flex; flex-direction: column; align-items: flex-start; background: var(--panel); border: var(--line) solid var(--border); border-radius: var(--radius); box-shadow: var(--panel-shadow); }
.plan-card.is-current { border-color: var(--accent); background: var(--panel-raised); box-shadow: var(--lift-shadow); }
.plan-cycle { font-size: var(--caption); color: var(--muted); margin-bottom: var(--s5); }
.plan-price { margin: var(--s3) 0; font-family: var(--font-mono); font-size: var(--price-size); color: var(--text); line-height: var(--heading-leading); }
.plan-price small { font: var(--body-small) var(--font-body); color: var(--muted); }
.plan-details { padding-left: var(--s5); color: var(--muted); margin-bottom: var(--s7); }
.plan-card .action { width: 100%; margin-top: auto; }
.badge, .tag { display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%; padding: var(--s1) var(--s3); font-size: var(--small); line-height: var(--tight-leading); color: var(--text); background: var(--panel-raised); border: var(--line) solid var(--border); border-radius: var(--radius); overflow-wrap: anywhere; white-space: normal; }
.badge-value { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.badge-success { color: var(--success); }
.badge-warn { color: var(--warn); }
.badge-error { color: var(--error); }
.status-dot { width: var(--s2); height: var(--s2); flex-shrink: 0; border-radius: var(--pill); background: currentColor; }
.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--line) solid var(--border); border-radius: var(--radius); }
.data-table { width: 100%; min-width: var(--table-width); border-collapse: collapse; text-align: left; font-size: var(--body-small); background: var(--panel); }
.data-table caption { text-align: left; padding: var(--s5); color: var(--text); font-weight: var(--medium); }
.data-table th, .data-table td { padding: var(--s4) var(--s5); border-bottom: var(--line) solid var(--hairline); vertical-align: top; }
.data-table thead th, .data-table tbody th { color: var(--text); font-weight: var(--medium); background: var(--panel-raised); }
.data-table tbody td { color: var(--text); }
.data-table .region-heading th { color: var(--text); background: var(--panel-raised); border-top: var(--line) solid var(--border); }
.prose > .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.client-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--s4); }
.client-card { min-width: 0; display: flex; align-items: flex-start; flex-direction: column; padding: var(--s6); background: var(--panel); border-top: var(--focus) solid var(--blue); border-radius: var(--radius); box-shadow: var(--panel-shadow); }
.client-card > svg { width: var(--s8); height: var(--s8); margin-bottom: var(--s5); color: var(--muted); }
.client-card h3 { font-size: var(--lead); }
.client-card .action { font-size: var(--body-small); padding-inline: var(--s3); min-height: var(--touch-size); margin-top: auto; width: 100%; }
.article-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s4) var(--s8); min-width: 0; border-top: var(--line) solid var(--border); padding-block: var(--s7); }
.article-card h3 { margin-bottom: var(--s3); }
.article-card p { color: var(--muted); margin-bottom: var(--s3); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s3); color: var(--muted); font-size: var(--caption); align-items: center; }
.article-arrow { width: var(--touch-size); height: var(--touch-size); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--panel); }
.article-arrow svg { width: var(--s5); height: var(--s5); }
.article-hero { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,1fr); gap: var(--s8); align-items: start; }
.article-hero h1 { font-size: var(--h2); }
.article-hero-meta { padding: var(--s6); background: var(--panel); border-left: var(--line) solid var(--border); font-size: var(--caption); }
.callout { margin-block: var(--s6); padding: var(--s6); background: var(--panel-raised); border-left: var(--focus) solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); }
.callout p:last-child { margin-bottom: 0; }
.article-promo { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s6); align-items: center; padding: var(--s8); margin-block: var(--s9); background: var(--panel-raised); border-radius: var(--radius); border: var(--line) solid var(--border); box-shadow: var(--panel-shadow); }
.promo-brand { font-size: var(--brand-size); font-weight: var(--medium); }
.article-promo p { margin: var(--s2) 0 0; color: var(--muted); }
.feature-sheet { display: grid; grid-template-columns: var(--feature-label-width) minmax(0,1fr); border-top: var(--line) solid var(--border); background: var(--panel); }
.feature-sheet:nth-child(even) { background: var(--panel-raised); }
.feature-label { padding: var(--s8); color: var(--muted); font-size: var(--caption); border-right: var(--line) dashed var(--border); }
.feature-body { padding: var(--s8); display: grid; grid-template-columns: var(--s10) minmax(0,1fr); gap: var(--s6); min-width: 0; }
.feature-body > svg { width: var(--s9); height: var(--s9); color: var(--blue); }
.feature-body p { color: var(--muted); }
.preview-section { border-bottom: var(--line) solid var(--hairline); }
.preview-section > p { max-width: var(--reading-width); color: var(--muted); }
.preview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s8); }
.preview-grid > * { min-width: 0; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--sample-min),1fr)); gap: var(--s4); }
.swatch { border: var(--line) solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.swatch-chip { height: var(--swatch-height); background: var(--bg); }
.swatch code { display: block; padding: var(--s3); color: var(--text); background: var(--panel); }
.swatch-bg { background: var(--bg); }
.swatch-panel { background: var(--panel); }
.swatch-raised { background: var(--panel-raised); }
.swatch-border { background: var(--border); }
.swatch-accent { background: var(--accent); }
.swatch-accent-dark { background: var(--accent-dark); }
.swatch-text { background: var(--text); }
.swatch-muted { background: var(--muted); }
.swatch-blue { background: var(--blue); }
.swatch-success { background: var(--success); }
.swatch-warn { background: var(--warn); }
.swatch-error { background: var(--error); }
.swatch-white { background: var(--flag-white); }
.swatch-red { background: var(--flag-red); }
.swatch-flag-blue { background: var(--flag-blue); }
.swatch-fr-blue { background: var(--flag-fr-blue); }
.swatch-black { background: var(--flag-black); }
.swatch-gold { background: var(--flag-gold); }
.swatch-clear { background: var(--clear); }
.swatch-hairline { background: var(--hairline); }
.swatch-shadow { background: var(--shadow-ink); }
.swatch-shadow-soft { background: var(--shadow-soft); }
.swatch-edge { background: var(--edge-light); }
.swatch-veil { background: var(--veil); }
.type-display { font-size: var(--h2); line-height: var(--heading-leading); font-family: var(--font-display); font-weight: var(--regular); }
.type-caption { font-size: var(--caption); color: var(--muted); }
.state-hover { background: var(--accent-dark); color: var(--bg); }
.state-focus { outline: var(--focus) solid var(--accent); outline-offset: var(--focus-offset); }
.state-active { background: var(--accent-dark); color: var(--bg); }
.preview-mobile { display: none; }
.preview-static-tabs { margin-top: var(--s6); }

@media (min-width: 1600px) {
  .hero { min-height: calc(100svh - var(--header-height) - var(--s13)); }
}
@media (max-width: 1200px) {
  .hero-grid { gap: var(--s9); grid-template-columns: 1fr 1.08fr; }
  .cabinet-heading { padding-inline: var(--s6); }
  .cabinet-footnote, .region-list { margin-inline: var(--s6); }
  .region-list li { gap: var(--s1); }
  .platform-list { gap: var(--s2); }
  .platform-list li { gap: var(--s1); }
  .client-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .hero-grid { gap: var(--s7); }
  .hero-description { font-size: var(--body); }
  .trust-list { gap: var(--s2) var(--s3); }
  .platform-list li { flex-direction: column; gap: var(--s2); }
  .cabinet-caption { display: none; }
  .cabinet-footnote { align-items: flex-start; flex-direction: column; }
  .region-list li { flex-direction: column; gap: var(--s2); }
  .fact-entry { gap: var(--s3); }
  .fact-entry + .fact-entry { padding-left: var(--s6); }
  .facts-inner { gap: var(--s6); }
  .plan-grid { gap: var(--s4); }
  .plan-card { padding: var(--s6); }
}
@media (max-width: 768px) {
  .hero { padding-block: var(--s8); min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero-copy { min-height: 0; }
  .eyebrow { font-size: var(--small); }
  .hero h1 { margin-top: var(--s5); }
  .title-brand { display: inline; margin-right: var(--s2); }
  .title-subject { display: block; margin-top: var(--s1); }
  .hero-actions { margin-top: var(--s5); gap: var(--s3); width: 100%; }
  .hero-actions .action { flex: 1; }
  .hero-description { margin-top: var(--s5); font-size: var(--body-small); }
  .trust-list { gap: var(--s2) var(--s3); margin-top: var(--s4); }
  .trust-list li { font-size: var(--small); gap: var(--s1); }
  .trust-list svg { width: var(--s3); height: var(--s3); }
  .platforms { padding-top: var(--s5); }
  .platform-note { margin-bottom: var(--s3); }
  .platform-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--s1); }
  .platform-list li { font-size: var(--small); }
  .platform-list svg { width: var(--s5); height: var(--s5); }
  .cabinet-heading { padding: var(--s5) var(--s5) 0; font-size: var(--caption); }
  .cabinet-caption { display: block; font-size: var(--small); }
  .rack-art { height: var(--rack-mobile-height); }
  .cabinet-footnote { margin-inline: var(--s5); padding-bottom: var(--s4); font-size: var(--small); flex-direction: row; align-items: center; }
  .cabinet-footnote .experience-note { max-width: 58%; }
  .cabinet-footnote a { font-size: var(--small); }
  .region-list { margin-inline: var(--s4); padding-block: var(--s4); gap: var(--s1); }
  .region-list li { font-size: var(--small); gap: var(--s2); }
  .facts-inner { min-height: var(--s13); padding-block: var(--s4); gap: var(--s3); flex-wrap: wrap; }
  .fact-entry { font-size: var(--small); gap: var(--s2); }
  .fact-entry + .fact-entry { padding-left: var(--s3); }
  .fact-value { font-size: var(--small); }
  .fact-tail { width: 100%; margin: 0; }
  .plan-grid, .preview-grid { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .feature-sheet { grid-template-columns: 1fr; }
  .feature-label { padding: var(--s5) var(--s6); border-right: 0; border-bottom: var(--line) dashed var(--border); }
  .feature-body { padding: var(--s6); grid-template-columns: var(--s8) minmax(0,1fr); gap: var(--s4); }
  .feature-body > svg { width: var(--s8); height: var(--s8); }
  .article-promo { grid-template-columns: 1fr; padding: var(--s6); }
  .article-hero { grid-template-columns: 1fr; }
  .article-hero-meta { order: -1; }
  .preview-mobile { display: block; }
  .preview-mobile summary { min-width: var(--touch-size); min-height: var(--touch-size); display: flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; background: var(--panel); border: var(--line) solid var(--border); border-radius: var(--radius); }
  .preview-mobile summary::-webkit-details-marker { display: none; }
  .preview-mobile nav { position: absolute; top: 100%; left: 0; right: 0; padding: var(--s4) var(--gutter); background: var(--panel); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; border-bottom: var(--line) solid var(--border); }
  .preview-mobile nav a { display: flex; align-items: center; min-height: var(--touch-size); padding: var(--s3); }
}
@media (max-width: 380px) {
  .hero h1 { font-size: var(--s8); }
  .hero-actions .action { padding-inline: var(--s3); gap: var(--s2); font-size: var(--body-small); }
  .cabinet-caption { display: none; }
  .client-grid { grid-template-columns: 1fr; }
}