/* A section-wide metric rail and an unframed decision-workflow diagram. */
#about .about-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 44px 72px; }
#about .about-intro { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 72px; align-items: start; }
#about .section-kicker { grid-column: 1 / -1; margin-bottom: 24px; }
#about .section-title { font-size: 40px; line-height: 1.24; text-wrap: balance; }
#about .section-desc { font-size: 16px; line-height: 1.9; margin: 0 !important; padding-top: 4px; max-width: 62ch; }
#about .about-stat-row { grid-column: 1 / -1; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid #3b4752; background: #1a1f23; }
#about .about-stat { position: relative; padding: 25px 30px; border: 0; min-width: 0; }
#about .about-stat + .about-stat { border-left: 1px solid #ffffff12; }
#about .about-stat::after { content: ""; position: absolute; left: 30px; bottom: -1px; width: 24px; height: 2px; background: var(--accent); }
#about .about-stat-num { font-size: 38px; font-variant-numeric: tabular-nums; }
#about .about-stat-num .accent { color: #a9bbcd; }
#about .about-stat-label { margin-top: 10px; color: #aab7c3; font-size: 10px; }
#about .about-left { min-width: 0; }
#about .about-checklist { list-style: none; margin: 0 0 30px; counter-reset: about-step; }
#about .about-check-item { position: relative; padding: 23px 22px 23px 0; gap: 18px; border-bottom-color: #ffffff14; transition: background-color .25s; counter-increment: about-step; }
#about .about-check-item:first-child { padding-top: 14px; }
#about .about-check-icon { position: relative; width: 36px; flex-basis: 36px; font-size: 0; padding-top: 3px; }
#about .about-check-icon::before { content: "0" counter(about-step); display: block; color: #8494a2; font: 12px/1.7 var(--mono); }
#about .about-check-icon::after { content: ""; position: absolute; left: 8px; top: 32px; bottom: 0; width: 1px; background: #3b4853; }
#about .about-check-title { font-size: 17px; line-height: 1.55; margin-bottom: 9px; }
#about .about-check-body { font-size: 14px; line-height: 1.8; max-width: 60ch; }
#about .about-check-item.is-current { background: #96c8fa05; }
#about .about-check-item.is-current .about-check-icon::before { color: var(--accent); }
#about .about-check-item.is-current .about-check-icon::after { background: var(--accent); }
#about .about-check-item.is-current .about-check-title { color: #c4e0fc; }
#about .quota-explainer { border-top: 0; padding-top: 0; }
#about .quota-header { font-size: 14px; }
#about .quota-body { font-size: 13px; line-height: 1.8; }
#about .quota-badge { font-size: 10px; margin-top: 16px; flex-wrap: wrap; }
#about .about-cta { margin-top: 24px; gap: 14px; }
#about .about-cta .btn { min-height: 48px; font-size: 12px; padding: 14px 20px; }
#about .about-cta-note { font-size: 10px; }
#about .about-visual { min-width: 0; padding: 0; border: 0; }
#about .about-system-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; border-bottom: 1px solid #35414c; padding-bottom: 10px; }
#about .about-visual-sub { margin: 0; font-size: 9px; color: #b1bbc5; }
#about .about-system-pause, #about [data-about-mode] { display: grid; place-items: center; width: 40px; height: 40px; min-width: 40px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #9eacb9; cursor: pointer; transition: color .2s, background-color .2s; }
#about .about-system-pause:hover, #about [data-about-mode]:hover { color: #edf1f5; background: #ffffff08; }
#about .about-system-pause:focus-visible, #about [data-about-mode]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#about [data-about-mode][aria-pressed="true"] { color: var(--accent); background: #96c8fa10; border-color: #96c8fa40; }
#about .about-system-pause[hidden], #about .about-system-stage[hidden] { display: none; }
#about .about-play-icon { display: none; }
#about .about-system-pause[aria-pressed="true"] .about-play-icon { display: block; }
#about .about-system-pause[aria-pressed="true"] .about-pause-icon { display: none; }
#about .about-system-stage { position: relative; }
#about .about-system-canvas { display: block; width: 100%; aspect-ratio: 640 / 300; height: auto; }
#about .about-system-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 8px 18px; min-height: 66px; border-bottom: 1px solid #35414c; }
#about .about-system-caption { color: #c4e0fc; font-size: 13px; line-height: 1.6; max-width: 34ch; }
#about .about-system-modes { display: flex; flex: 0 0 auto; gap: 4px; }
#about .about-visual-metrics { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; padding: 12px 0; border-bottom-color: #35414c; }
#about .avm-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 0; min-width: 0; }
#about .avm-label { font-size: 11px; }
#about .avm-val { font-size: 11px; overflow-wrap: anywhere; }
#about .avm-divider { display: none; }
#about .avm-row.is-current .avm-label { color: #edf1f5; }
#about .avm-row.is-current .avm-val { color: var(--accent); }
#about .about-visual-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding-top: 24px; }
#about .about-visual-title { grid-column: 1; grid-row: 1; font-size: 24px; line-height: 1.3; margin: 0; }
#about .about-sparkline-wrap { grid-column: 2; grid-row: 1; margin: 0; min-width: 0; }
#about .about-sparkline { height: 60px; display: block; }
#about #spark-area { opacity: .2; }
#about #spark-line { stroke-width: 1.2; }
#about .about-sparkline-label { font-size: 8px; margin-top: 12px; }
#about .about-trust-row { margin-top: 24px; gap: 10px 16px; }
#about .about-trust-item { font-size: 8px; }
@media (max-width: 1100px) {
  #about .about-grid { gap: 36px 40px; }
  #about .about-intro { gap: 20px 40px; }
  #about .section-title { font-size: 34px; }
  #about .section-desc { font-size: 14px; }
  #about .about-stat { padding: 24px; }
  #about .about-stat::after { left: 24px; }
  #about .about-stat-num { font-size: 30px; }
  #about .about-stat-label { font-size: 9px; }
  #about .about-check-title { font-size: 16px; }
  #about .about-check-body { font-size: 13px; }
  #about .about-check-item { padding-right: 0; gap: 10px; }
  #about .about-check-icon { width: 26px; flex-basis: 26px; }
  #about .about-system-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; min-height: 112px; }
  #about .about-system-caption { min-height: 42px; }
  #about .about-visual-summary { grid-template-columns: 1fr; gap: 20px; }
  #about .about-visual-title { font-size: 24px; }
  #about .about-sparkline-wrap { grid-column: 1; grid-row: 2; }
}
@media (max-width: 800px) {
  #about .about-grid { grid-template-columns: 1fr; gap: 32px; }
  #about .about-intro { grid-template-columns: 1fr; gap: 22px; }
  #about .section-kicker { margin: 0; }
  #about .section-title { max-width: 650px; }
  #about .section-desc { max-width: 68ch; padding: 0; }
  #about .about-stat-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #about .about-stat:nth-child(3) { border-left: 0; }
  #about .about-stat:nth-child(n+3) { border-top: 1px solid #ffffff12; }
  #about .about-visual { grid-column: 1; grid-row: 3; }
  #about .about-system-toolbar { flex-direction: row; align-items: center; min-height: 78px; }
  #about .about-system-caption { min-height: 0; }
  #about .about-visual-summary { grid-template-columns: 1fr 1fr; }
  #about .about-sparkline-wrap { grid-column: 2; grid-row: 1; }
  #about .about-check-item { padding: 24px 0; gap: 18px; }
  #about .about-check-title { font-size: 17px; }
  #about .about-check-body { font-size: 14px; }
  #about .about-trust-row { margin-top: 22px; }
}
@media (max-width: 450px) {
  #about .section-title { font-size: 30px; text-wrap: initial; }
  #about .section-desc { font-size: 14px; line-height: 1.8; }
  #about .about-stat { padding: 22px 18px; }
  #about .about-stat::after { left: 18px; }
  #about .about-stat-num { font-size: 28px; }
  #about .about-stat-label { font-size: 9px; }
  #about .about-system-toolbar { flex-direction: column; align-items: flex-start; min-height: 112px; }
  #about .about-system-caption { min-height: 42px; font-size: 13px; }
  #about .about-system-canvas { aspect-ratio: 1.8; }
  #about .about-visual-sub { font-size: 8px; }
  #about .about-system-pause, #about [data-about-mode] { width: 44px; height: 44px; min-width: 44px; }
  #about .about-visual-title { font-size: 21px; }
  #about .about-visual-summary { gap: 16px; }
  #about .about-check-title { font-size: 16px; }
  #about .about-check-body { font-size: 13px; }
  #about .about-cta .btn { width: 100%; }
}
@media (max-width: 359px) {
  #about .section-title { font-size: 27px; }
  #about .about-stat { padding-inline: 14px; }
  #about .about-stat-num { font-size: 25px; }
  #about .about-visual-title { font-size: 18px; }
  #about .avm-val { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #about .about-check-item, #about button { transition: none; }
}
