.pace-page { padding: 9rem 0 5rem; }
.pace-header { max-width: 850px; padding-bottom: 2.5rem; }
.pace-header h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.5rem, 5.5vw, 4.8rem); line-height: 1.08; letter-spacing: -.035em; margin: 1rem 0 1.5rem; }
.pace-intro { font-size: 1.13rem; line-height: 1.75; color: var(--text-muted); max-width: 690px; }
.pace-dateline { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1.7rem; font-size: .8rem; color: var(--text-muted); }
.pace-cadence { display: inline-flex; align-items: center; gap: .5rem; }
.pace-cadence > span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pace-takeaway { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2rem 0 2.1rem; }
.pace-overline { color: var(--accent); font-size: .73rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.pace-takeaway h2 { font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.4; max-width: 1000px; font-weight: 500; letter-spacing: -.025em; margin: .6rem 0 2rem; }
.pace-comparisons { display: grid; grid-template-columns: 1fr 1fr; max-width: 900px; }
.pace-comparison { padding-right: 2rem; }
.pace-comparison + .pace-comparison { border-left: 1px solid var(--border); padding-left: 3rem; }
.pace-comparison h3 { font-size: .87rem; font-weight: 500; color: var(--text-muted); }
.pace-comparison-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: .7rem; margin: .4rem 0 .3rem; }
.pace-comparison-value > strong { font-size: 2.65rem; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pace-comparison-value > span { font-size: .77rem; color: var(--text-muted); }
.pace-comparison-previous { font-size: .8rem; color: var(--text-muted); line-height: 1.9; }
.pace-comparison-previous strong { color: var(--text); font-weight: 500; margin-left: .2rem; }
.pace-change { margin-left: .45rem; white-space: nowrap; font-weight: 600; color: var(--text); }
.pace-change-faster { color: var(--accent); }
.pace-change-slower { color: #996428; }
[data-theme="dark"] .pace-change-slower { color: #e5ad69; }
.pace-periods { margin-top: .5rem; font-size: .73rem; color: var(--text-muted); }
.pace-periods summary { cursor: pointer; width: fit-content; }
.pace-periods p { line-height: 1.8; margin-top: .6rem; }
.pace-section { padding: 3.2rem 0 2.3rem; border-bottom: 1px solid var(--border); }
.pace-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.pace-section-number { color: var(--accent); font-size: .73rem; font-weight: 500; letter-spacing: .08em; display: block; margin-bottom: .6rem; }
.pace-section h2, .pace-method > h2 { font-size: clamp(1.35rem, 2.5vw, 1.9rem); letter-spacing: -.03em; font-weight: 500; line-height: 1.3; }
.pace-explanation { font-size: .9rem; color: var(--text-muted); margin: .8rem 0 1.5rem; line-height: 1.7; max-width: 750px; }
.pace-current { text-align: right; display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: var(--text-muted); max-width: 270px; }
.pace-current strong { font-size: 1.65rem; line-height: 1.2; font-weight: 500; color: var(--text); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pace-current small { font-size: .7rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
.pace-legend { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; font-size: .75rem; color: var(--text-muted); margin: 1rem 0 1.8rem; }
.pace-legend > span { display: inline-flex; align-items: center; gap: .5rem; }
.pace-key-line { width: 22px; height: 2px; background: var(--accent); }
.pace-key-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-subtle); }
.pace-chart { margin-top: 1.5rem; }
.pace-axis-label { font-size: .72rem; color: var(--text-muted); margin-bottom: 1.3rem; }
.pace-chart-grid { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding-right: 12px; }
.pace-y-ticks, .pace-plot { position: relative; height: 260px; }
.pace-y-ticks > span { position: absolute; right: 0; transform: translateY(-50%); font-size: .72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pace-grid-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); pointer-events: none; }
.pace-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pace-chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.pace-rate-view .pace-chart-line { stroke: #238781; }
[data-theme="dark"] .pace-rate-view .pace-chart-line { stroke: #73cfc6; }
.pace-model-point { position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%); width: 14px; height: 14px; border: 0; background: transparent; padding: 0; cursor: help; border-radius: 50%; z-index: 1; }
.pace-model-point > span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-subtle); opacity: .65; }
.pace-model-point:hover, .pace-model-point:focus-visible { z-index: 3; outline: 2px solid var(--accent); outline-offset: 2px; background: var(--bg); }
.pace-model-point:hover > span, .pace-model-point:focus-visible > span { background: var(--accent); opacity: 1; }
.pace-frontier-point { position: absolute; width: 6px; height: 6px; border: 1.5px solid var(--accent); background: var(--bg); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.pace-x-ticks { grid-column: 2; height: 32px; position: relative; margin-top: .7rem; }
.pace-x-ticks > span { position: absolute; font-size: .72rem; color: var(--text-muted); transform: translateX(-50%); }
.pace-x-ticks > span:first-child { transform: none; }
.pace-chart-footnote { color: var(--text-muted); font-size: .73rem; line-height: 1.7; margin: .8rem 0 0 56px; }
.pace-window { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 2px; flex-shrink: 0; margin-top: 1.5rem; }
.pace-window button { font: inherit; font-size: .75rem; border: 0; padding: .55rem .8rem; color: var(--text-muted); background: transparent; border-radius: 5px; cursor: pointer; }
.pace-window button[aria-pressed="true"] { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.pace-window button:focus-visible, .pace-page a:focus-visible, .pace-page summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pace-rate-view[hidden], .pace-tooltip[hidden] { display: none; }
.pace-empty { position: absolute; inset: 0; display: grid; place-content: center; color: var(--text-muted); font-size: .85rem; }
.pace-milestones { margin-top: 1.5rem; }
.pace-milestones > summary { cursor: pointer; color: var(--accent); font-size: .85rem; width: fit-content; }
.pace-table-scroll { overflow-x: auto; margin-top: 1.5rem; }
.pace-table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pace-milestones table { width: 100%; border-collapse: collapse; font-size: .8rem; text-align: left; }
.pace-milestones thead th { color: var(--text-muted); font-weight: 500; font-size: .73rem; padding: .8rem 1rem; white-space: nowrap; border-bottom: 1px solid var(--border); }
.pace-milestones tbody th, .pace-milestones td { border-bottom: 1px solid var(--border); padding: 1rem; font-weight: 400; }
.pace-milestones tbody th span { display: block; color: var(--text-muted); font-size: .7rem; margin-top: .25rem; }
.pace-milestones td { white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pace-milestones .pace-table-score { color: var(--text); }
.pace-method { padding: 3rem 0 1rem; }
.pace-method-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-top: 1.8rem; }
.pace-method h3 { font-size: .83rem; font-weight: 600; margin-bottom: .8rem; }
.pace-method-columns p { font-size: .79rem; color: var(--text-muted); line-height: 1.9; margin-bottom: .9rem; }
.pace-source { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; color: var(--text-muted); font-size: .73rem; line-height: 1.8; }
.pace-source > p { max-width: 630px; }
.pace-source > div { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.pace-source a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pace-tooltip { position: fixed; z-index: 100; width: max-content; max-width: min(340px, calc(100vw - 24px)); pointer-events: none; background: var(--text); color: var(--bg); border-radius: 7px; padding: .7rem .9rem; font-size: .73rem; line-height: 1.7; box-shadow: var(--card-shadow); }
.pace-research-link { border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.pace-research-link h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.pace-research-link p { max-width: 650px; color: var(--text-muted); font-size: .9rem; line-height: 1.7; }
.pace-research-link a { white-space: nowrap; color: var(--accent); }
@media (max-width: 760px) {
  .pace-page { padding-top: 7rem; }
  .pace-header { padding-bottom: 2rem; }
  .pace-intro { font-size: 1rem; }
  .pace-comparison + .pace-comparison { padding-left: 1.3rem; }
  .pace-comparison { padding-right: 1rem; }
  .pace-comparison-value { gap: .4rem; }
  .pace-comparison-value > strong { font-size: 2.2rem; }
  .pace-section { padding-top: 2.5rem; }
  .pace-current { max-width: 150px; }
  .pace-section-heading { gap: .7rem; }
  .pace-window button { padding: .5rem .6rem; }
  .pace-y-ticks, .pace-plot { height: 220px; }
  .pace-method-columns { grid-template-columns: 1fr; gap: 1.2rem; }
  .pace-method-columns p { max-width: 650px; }
  .pace-research-link { align-items: flex-start; flex-direction: column; gap: 1rem; }
}
@media (max-width: 450px) {
  .pace-section-heading { flex-wrap: wrap; }
  .pace-current { text-align: left; flex-direction: row; align-items: baseline; flex-wrap: wrap; max-width: none; gap: .3rem .7rem; }
  .pace-current > span:last-child { width: 100%; }
  .pace-window { margin-top: .3rem; }
  .pace-chart-grid { grid-template-columns: 35px minmax(0, 1fr); column-gap: 8px; }
  .pace-chart-footnote { margin-left: 43px; }
  .pace-comparison-value > span { font-size: .68rem; }
}
