/* Focused homepage layout; shared styles below only affect public navigation. */
.marketing-body .m-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.marketing-body .m-nav-brand { color: var(--ink-primary); text-decoration: none; }
.marketing-body .m-nav-brand .m-display { font-size: 1.6rem; letter-spacing: -0.045em; }
.marketing-body .m-nav-desktop, .marketing-body .m-nav-actions { display: flex; align-items: center; gap: 32px; }
.marketing-body .m-nav-actions { gap: 20px; }
.marketing-body .m-nav-link { display: inline-flex; align-items: center; min-height: 44px; }
.marketing-body .m-nav-mobile { display: none; }
.marketing-body :is(a, button, summary, input, textarea, select):focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 5px; }
.marketing-body .m-nav-mobile summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.marketing-body .m-nav-mobile summary::-webkit-details-marker { display: none; }
.marketing-body .m-nav-mobile[open] summary span { transform: rotate(45deg); }
.marketing-body .m-nav-mobile-links { position: absolute; inset: 100% 0 auto; display: grid; padding: 16px 24px 24px; background: var(--ink-paper); border-bottom: 1px solid var(--ink-rule); box-shadow: 0 16px 24px oklch(0.12 0.01 50 / 0.25); }
.marketing-body .m-nav-mobile-links a { padding: 8px 0; }
.m-home { --ink-mute: oklch(0.68 0.012 50); }
.m-home :is(h1, h2, h3) { text-wrap: balance; }
.m-home h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.12 !important; letter-spacing: -0.035em; }
.m-home h3 { line-height: 1.2; }
.m-home p { text-wrap: pretty; }
.m-home [id] { scroll-margin-top: 104px; }
.m-home .m-eyebrow { font-family: 'Switzer', sans-serif; font-size: 11px; letter-spacing: 0.13em; }
.m-home .m-footnote, .m-home-caption { font-family: 'Switzer', sans-serif; font-size: 13px; line-height: 1.6; color: var(--ink-mute); }
.m-home .m-home-hero { padding-block: clamp(56px, 7vw, 100px) 0; }
.m-home .m-hero-head { max-width: 19ch; margin-block: 24px; font-size: clamp(2.75rem, 6.4vw, 5.75rem); line-height: 1.06; }
.m-home-lead { max-width: 59ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--ink-soft); }
.m-home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.m-home :is(.m-btn-primary, .m-btn-secondary) { min-height: 48px; padding-inline: 24px; }
.m-home-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 56px; padding-block: 24px; border-top: 1px solid var(--ink-rule-soft); }
.m-home-tools > span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.m-home-tools i { width: 8px; height: 8px; background: var(--tool-color); border-radius: 50%; }
.m-home .m-home-product { padding-block: 56px 72px; border: 0; }
.m-home-section-head { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 48px; margin-bottom: 32px; }
.m-home-section-head h2 { margin-top: 12px; max-width: 20ch; }
.m-home-section-head > p { max-width: 43ch; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.m-home-preview { border: 1px solid var(--ink-rule); background: var(--ink-paper); }
.m-home-preview-bar, .m-home-feature-figure figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px solid var(--ink-rule); padding: 16px 28px; }
.m-home-preview-bar strong { color: var(--ink-primary); font-weight: 600; margin-right: 12px; }
.m-home-preview-bar { color: var(--ink-soft); }
.m-home-sample { color: var(--ink-soft); font-size: 12px; }
.m-home-preview-body { padding: 28px; }
.m-home-preview-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.m-home-preview-title h3 { font-size: 24px; }
.m-home-kpis { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 24px; padding-block: 28px; border-bottom: 1px solid var(--ink-rule); }
.m-home-kpis dt, .m-home-output-metrics dt { font-size: 13px; color: var(--ink-soft); }
.m-home-kpis dd { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(28px, 3vw, 40px); font-variant-numeric: tabular-nums; line-height: 1.3; margin-block: 8px 4px; }
.m-home-kpis > div:first-child dd { color: var(--accent-amber); }
.m-home-kpis span { color: var(--ink-mute); font-size: 12px; }
.m-home-preview-detail { display: grid; grid-template-columns: 1.65fr 1fr; gap: 40px; padding-top: 28px; }
.m-home-chart-heading { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.m-home-preview-detail h4 { font-weight: 500; font-size: 14px; }
.m-home-chart { display: flex; gap: clamp(8px, 1.8vw, 24px); margin-top: 24px; }
.m-home-chart-column { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; text-align: center; color: var(--ink-soft); font-size: 12px; }
.m-home-chart-track { height: 128px; display: flex; align-items: end; }
.m-home-chart-track > div { width: 100%; background: var(--accent-amber); opacity: 0.8; }
.m-home-chart-column:nth-child(5) .m-home-chart-track > div { opacity: 1; }
.m-home-team-spend { border-left: 1px solid var(--ink-rule); padding-left: 28px; }
.m-home-bar-row { margin-top: 16px; font-size: 13px; }
.m-home-bar-row > div:first-child { display: flex; justify-content: space-between; gap: 16px; }
.m-home-bar-row strong { font-weight: 500; }
.m-home-bar-track { background: var(--ink-paper-2); height: 4px; margin-top: 8px; }
.m-home-bar-track span { display: block; height: 100%; background: var(--ink-soft); }
.m-home-preview-note { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 24px; }
.m-home-caption { margin-top: 16px; max-width: 80ch; }
.m-home .m-home-benefits { padding-block: 0; }
.m-home-benefit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 104px); align-items: center; padding-block: 80px; }
.m-home-benefit + .m-home-benefit { border-top: 1px solid var(--ink-rule-soft); }
.m-home-benefit-copy h2 { max-width: 17ch; margin-block: 16px 24px; }
.m-home-benefit-copy > p:not(.m-eyebrow) { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin-top: 16px; max-width: 48ch; }
.m-home-feature-note { display: block; font-size: 13px; color: var(--ink-mute); line-height: 1.7; margin-top: 24px; }
.m-home-benefit-reverse .m-home-benefit-copy { order: 2; }
.m-home-feature-figure { background: var(--ink-paper); border: 1px solid var(--ink-rule); padding: 0 28px 28px; }
.m-home-feature-figure figcaption { margin-inline: -28px; }
.m-home-subscription-total { padding-block: 28px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-soft); font-size: 14px; }
.m-home-subscription-total strong { font-size: 48px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; color: var(--ink-primary); }
.m-home-subscription-total strong span { font-size: 16px; font-family: 'Switzer', sans-serif; color: var(--ink-soft); margin-left: 8px; }
.m-home-ledger > div { display: flex; justify-content: space-between; gap: 20px; padding-block: 12px; border-top: 1px solid var(--ink-rule-soft); font-size: 14px; }
.m-home-ledger dt { color: var(--ink-soft); }
.m-home-ledger dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-home-output-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-block: 28px; }
.m-home-output-metrics dd { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; margin-top: 8px; }
.m-home-initiative { border-top: 1px solid var(--ink-rule); padding-top: 24px; }
.m-home-initiative h3 { font-size: 20px; margin-block: 8px 20px; }
.m-home-alert { padding-top: 24px; }
.m-home-alert + .m-home-alert { margin-top: 24px; border-top: 1px solid var(--ink-rule); }
.m-home-alert-status { color: var(--accent-amber); font-size: 12px; }
.m-home-alert h3 { font-size: 20px; margin-block: 8px; }
.m-home-alert p, .m-home-alert > span:last-child { font-size: 14px; line-height: 1.7; }
.m-home-alert > span:last-child { display: block; margin-top: 8px; }
.m-home .m-home-setup { background: var(--ink-paper); padding-block: 72px; }
.m-home-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-block: 48px; list-style: none; }
.m-home-steps h3 { font-size: 23px; margin-block: 16px 12px; }
.m-home-steps p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.m-home-integration-note { border-top: 1px solid var(--ink-rule); padding-top: 28px; display: grid; grid-template-columns: 1fr 1.7fr auto; align-items: start; gap: 32px; }
.m-home-integration-note strong { font-size: 20px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; }
.m-home-integration-note p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
@media (max-width: 1023px) {
  .marketing-body .m-nav-desktop, .marketing-body .m-nav-sign-in { display: none; }
  .marketing-body .m-nav-mobile { display: block; }
  .m-home-kpis { grid-template-columns: repeat(2, 1fr); }
  .m-home-preview-detail { gap: 24px; }
  .m-home-benefit { gap: 32px; }
  .m-home-integration-note { grid-template-columns: 1fr 2fr; }
  .m-home-integration-note .m-btn-secondary { justify-self: start; }
}
@media (max-width: 767px) {
  .marketing-body .m-nav-inner { min-height: 72px; gap: 12px; }
  .marketing-body .m-nav-actions { gap: 16px; }
  .marketing-body .m-nav-actions .m-btn-primary { padding-inline: 16px; min-height: 44px; }
  .m-home .m-home-hero { padding-top: 40px; }
  .m-home-tools { gap: 16px 24px; margin-top: 40px; }
  .m-home-tools > .m-eyebrow { flex-basis: 100%; }
  .m-home-actions .m-footnote { flex-basis: 100%; }
  .m-home-section-head, .m-home-benefit, .m-home-preview-detail, .m-home-steps, .m-home-integration-note { grid-template-columns: 1fr; gap: 24px; }
  .m-home-section-head h2 { max-width: 21ch; }
  .m-home .m-home-product { padding-block: 40px 48px; }
  .m-home-preview-body { padding: 20px 16px; }
  .m-home-preview-bar { padding: 16px; }
  .m-home-kpis { gap: 24px 16px; }
  .m-home-kpis span { display: block; }
  .m-home-team-spend { border-left: 0; border-top: 1px solid var(--ink-rule); padding: 24px 0 0; }
  .m-home-benefit { padding-block: 48px; gap: 32px; }
  .m-home-benefit-reverse .m-home-benefit-copy { order: 0; }
  .m-home-feature-figure { padding: 0 20px 20px; }
  .m-home-feature-figure figcaption { margin-inline: -20px; padding-inline: 20px; }
  .m-home .m-home-setup { padding-block: 48px; }
  .m-home-steps { margin-block: 32px; gap: 32px; }
  .m-home #pricing .m-plan { padding: 28px; }
}
@media (max-width: 359px) {
  .marketing-body .m-nav-brand .m-display { font-size: 1.35rem; }
  .marketing-body .m-nav-actions { gap: 12px; }
  .m-home-chart { gap: 6px; }
  .m-home-chart-column { font-size: 11px; }
  .m-home-output-metrics { gap: 8px; }
  .m-home-output-metrics dt { font-size: 12px; }
  .m-home-output-metrics dd { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .marketing-body *, .marketing-body *::before, .marketing-body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The sample workspace is progressively enhanced; static data needs no script. */
.m-demo [hidden] { display: none !important; }
.m-demo button { cursor: pointer; }
.m-demo button:disabled { cursor: default; }
.m-demo-sample-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--accent-amber); }
.m-demo-scenario { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px; background: var(--ink-paper-2); }
.m-demo-scenario p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.m-demo-scenario p strong { color: var(--ink-primary); font-weight: 500; }
.m-demo-scenario-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-demo-scenario-actions .m-btn-primary { background: var(--accent-amber); border-color: var(--accent-amber); color: var(--ink-base); min-width: 252px; justify-content: center; }
.m-demo-reset { font-size: 12px; color: var(--ink-soft); min-height: 44px; padding-inline: 16px; text-decoration: underline; text-underline-offset: 4px; }
.m-demo-tabs { display: flex; gap: 24px; padding-inline: 28px; border-bottom: 1px solid var(--ink-rule); }
.m-demo-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 12px 4px; color: var(--ink-soft); font-size: 14px; border-bottom: 2px solid transparent; }
.m-demo-tabs button[aria-selected="true"] { color: var(--accent-amber); border-bottom-color: var(--accent-amber); }
.m-demo-alert-count { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 11px; border-radius: 50%; background: var(--ink-paper-2); color: var(--ink-primary); }
.m-demo .m-home-preview-body { min-height: 520px; }
.m-demo .m-home-chart-track > div { height: 100%; transform-origin: bottom; transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1); }
.m-demo .m-home-bar-track span { width: 100%; transform-origin: left; transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1); }
.m-demo .m-home-preview-note { min-height: 84px; }
.m-demo-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ink-rule); font-size: 13px; color: var(--ink-soft); }
.m-demo-panel-footer button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--accent-amber); text-align: left; }
.m-demo-engineering-detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding-top: 28px; }
.m-demo-engineering-detail h4 { font-weight: 500; }
.m-demo-engineering-detail > div > .m-home-caption { margin-top: 4px; }
.m-demo-initiative-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin-top: 20px; font-size: 13px; }
.m-demo-initiative-row strong { display: block; font-weight: 500; margin-top: 4px; }
.m-demo-initiative-row > span { align-self: end; color: var(--ink-soft); white-space: nowrap; }
.m-demo-delivery-track { grid-column: 1 / -1; height: 4px; background: var(--ink-paper-2); }
.m-demo-delivery-track span { display: block; height: 100%; background: var(--m-tool-codex); }
.m-demo-context { padding-top: 4px; }
.m-demo-context h4 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin-block: 12px; }
.m-demo-context p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.m-demo-context .m-home-caption { font-size: 12px; color: var(--ink-mute); }
.m-demo-alert-empty { min-height: 356px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.m-demo-quiet-mark { color: var(--m-tool-codex); font-size: 36px; }
.m-demo-alert-empty h4 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; line-height: 1.2; }
.m-demo-alert-empty p { color: var(--ink-soft); font-size: 14px; }
.m-demo-alert-detail { padding-top: 32px; }
.m-demo-alert-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.m-demo-alert-state { font-size: 12px; color: var(--accent-amber); }
.m-demo-alert-state[data-reviewed="true"] { color: var(--m-tool-codex); }
.m-demo-alert-detail h4 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; margin-block: 20px 12px; }
.m-demo-alert-detail > p { max-width: 65ch; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.m-demo-alert-numbers { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 640px; gap: 24px; padding-block: 24px; }
.m-demo-alert-numbers dt { font-size: 13px; color: var(--ink-soft); }
.m-demo-alert-numbers dd { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; margin-top: 4px; }
.m-demo-alert-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.m-demo-status { display: flex; align-items: center; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--ink-rule); color: var(--ink-soft); font-size: 12px; }
.m-demo-status-indicator { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--m-tool-codex); }
.m-demo-local-note { margin-left: auto; white-space: nowrap; color: var(--ink-mute); }
.m-demo[data-running="true"] .m-demo-status-indicator { background: var(--accent-amber); animation: m-demo-pulse 650ms ease-in-out infinite alternate; }
@keyframes m-demo-pulse { to { opacity: 0.3; transform: scale(0.75); } }
@media (max-width: 767px) {
  .m-demo-scenario { flex-direction: column; align-items: stretch; padding: 24px 16px 12px; gap: 20px; }
  .m-demo-scenario-actions { align-items: stretch; }
  .m-demo-scenario-actions .m-btn-primary { min-width: 0; }
  .m-demo-tabs { padding-inline: 16px; gap: 20px; }
  .m-demo-tabs button { font-size: 13px; }
  .m-demo .m-home-preview-body { min-height: 0; }
  .m-demo-panel-footer { flex-direction: column; align-items: start; gap: 8px; }
  .m-demo-engineering-detail { grid-template-columns: 1fr; gap: 32px; }
  .m-demo-context { border-top: 1px solid var(--ink-rule); padding-top: 24px; }
  .m-demo-status { flex-wrap: wrap; padding: 16px; gap: 8px; }
  .m-demo-status [role="status"] { flex: 1; }
  .m-demo-local-note { width: 100%; margin-left: 14px; }
  .m-demo-alert-numbers { gap: 12px; }
  .m-demo-alert-numbers dd { font-size: 26px; }
  .m-demo-alert-actions { flex-direction: column; align-items: stretch; }
  .m-demo-alert-actions button { justify-content: center; }
}
.m-home-kpis dd.m-demo-metric-note { font-family: 'Switzer', sans-serif; font-size: 12px; line-height: 1.6; color: var(--ink-mute); margin: 0; }

/* Comparable stacked bars: one dollar scale across engineers and tools. */
.m-demo-tool-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-block: 28px; border-bottom: 1px solid var(--ink-rule); }
.m-demo-tool-totals dt { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13px; }
.m-demo-tool-totals dt span { width: 8px; height: 8px; border-radius: 50%; background: var(--demo-tool-color); flex-shrink: 0; }
.m-demo-tool-totals dd { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-variant-numeric: tabular-nums; margin-top: 8px; }
.m-demo-engineers-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-block: 24px; font-size: 14px; }
.m-demo-engineers-heading h4 { font-weight: 500; }
.m-demo-engineers-heading > span { font-size: 12px; color: var(--ink-soft); }
.m-demo-engineer { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 32px; padding-block: 16px; }
.m-demo-engineer + .m-demo-engineer { border-top: 1px solid var(--ink-rule-soft); }
.m-demo-engineer-name { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.m-demo-engineer-name strong { font-weight: 500; }
.m-demo-engineer-name > span { font-size: 12px; color: var(--ink-soft); }
.m-demo-engineer-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 13px; margin-bottom: 8px; }
.m-demo-engineer-total > span { color: var(--ink-mute); font-size: 12px; }
.m-demo-engineer-total strong { font-variant-numeric: tabular-nums; font-weight: 500; }
.m-demo-stacked-track { display: flex; height: 12px; background: var(--ink-paper-2); }
.m-demo-stacked-track > span { display: block; height: 100%; }
.m-demo-engineer-tools { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 8px; font-size: 12px; }
.m-demo-engineer-tools > div { display: flex; gap: 6px; }
.m-demo-engineer-tools dt { color: var(--ink-soft); }
.m-demo-engineer-tools dd { color: var(--ink-primary); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .m-demo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
  .m-demo-tabs button { min-height: 48px; }
  .m-demo-tool-totals { gap: 12px; }
  .m-demo-tool-totals dt { align-items: baseline; font-size: 12px; gap: 6px; }
  .m-demo-tool-totals dd { font-size: 26px; }
  .m-demo-engineer { grid-template-columns: 1fr; gap: 12px; padding-block: 20px; }
  .m-demo-engineer-name { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; }
  .m-demo-engineer-tools { gap: 8px 16px; }
}

.m-home-tool-guides { margin-block: 40px; padding-top: 32px; border-top: 1px solid var(--ink-rule); }
.m-home-tool-guides h3 { font-size: 24px; margin-bottom: 24px; }
.m-home-tool-guides > div { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding-block: 20px; border-top: 1px solid var(--ink-rule-soft); }
.m-home-tool-guides h4 { font-weight: 500; font-size: 16px; }
.m-home-tool-guides p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; max-width: 72ch; }
@media (max-width: 767px) {
  .m-home-tool-guides > div { grid-template-columns: 1fr; gap: 12px; }
}

.m-home .m-home-engineer-section { padding-block: 64px 80px; }
.m-home-engineer-figure { background: var(--ink-paper); border: 1px solid var(--ink-rule); }
.m-home-engineer-body { padding: 0 28px 28px; }
@media (max-width: 767px) {
  .m-home .m-home-engineer-section { padding-block: 48px; }
  .m-home-engineer-body { padding: 0 16px 20px; }
}

.m-demo-tool-mix { border-top: 1px solid var(--ink-rule-soft); margin-top: 32px; padding-top: 24px; }
.m-demo-tool-row { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 24px; align-items: center; margin-block: 14px; }
.m-demo-tool-row dt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.m-demo-tool-row dt > span { width: 7px; height: 7px; border-radius: 50%; background: var(--demo-tool-color); }
.m-demo-tool-row small { color: var(--ink-soft); font-size: 10px; }
.m-demo-tool-row dd { display: flex; align-items: center; gap: 16px; }
.m-demo-tool-row strong { min-width: 64px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.m-demo-tool-track { height: 7px; flex: 1; background: var(--ink-rule-soft); }
.m-demo-tool-track > span { display: block; height: 100%; background: var(--demo-tool-color); }
.m-demo-tool-totals { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .m-demo-tool-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-demo-tool-row { grid-template-columns: 1fr; gap: 8px; }
}