/* Approved downstream illustration; keep styles out of calculator surfaces. */
.moving-target { --mt-accent:#b33f20; container-type:inline-size; }
.mt-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.mt-eyebrow { color:var(--mt-accent); text-transform:uppercase; letter-spacing:.16em; font-size:14px; font-weight:500; display:flex; align-items:center; gap:16px; margin:0; padding-top:6px; }
.mt-eyebrow::before { content:""; width:32px; border-top:1px solid currentColor; }
.mt-time { min-width:175px; margin:0; text-align:right; color:var(--muted); font-size:16px; line-height:1.5; font-variant-numeric:tabular-nums; }
.mt-time strong { font-weight:600; display:block; }
.mt-time span { display:block; font-size:14px; }
.moving-target h2 { margin:18px 0; font-size:clamp(55px,8vw,100px); font-size:clamp(55px,8cqw,100px); font-weight:400; line-height:1.04; letter-spacing:-.025em; text-wrap:initial; }
.moving-target h2 em { color:var(--mt-accent); font-weight:400; }
.mt-intro { margin:0; color:var(--muted); font-size:clamp(18px,1.65vw,23px); line-height:1.5; letter-spacing:-.025em; }
.mt-example { margin:35px 0 0; }
.mt-example figcaption { color:var(--muted); text-transform:uppercase; font-weight:600; letter-spacing:.16em; font-size:14px; }
.mt-ruler { position:relative; margin-top:22px; min-height:150px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.mt-marker { line-height:1.25; }
.mt-marker>span { display:block; font-size:18px; font-weight:600; }
.mt-marker strong { font-family:Fraunces,serif; font-size:34px; font-weight:400; font-variant-numeric:tabular-nums; }
.mt-cost { color:var(--mt-accent); text-align:right; }
.mt-distance { grid-column:1/-1; white-space:nowrap; }
.mt-distance>strong { display:block; color:var(--mt-accent); font-family:Fraunces,serif; font-size:28px; font-weight:400; }
.mt-distance>span { display:block; color:var(--muted); font-size:14px; margin-top:4px; }
.mt-ruler.is-ready { display:block; height:288px; }
.mt-ruler.is-ready .mt-marker { position:absolute; top:0; transform:translateX(-50%); width:180px; text-align:center; z-index:1; }
.mt-ruler.is-ready .mt-cost { transform:translateX(var(--label-offset)); }
.mt-ruler.is-ready .mt-distance { position:absolute; top:71px; transform:translateX(-50%); text-align:center; z-index:1; }
.mt-ruler canvas { width:100%; position:absolute; top:0; left:0; }
.mt-axis span { position:absolute; top:230px; transform:translateX(-50%); font-size:18px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mt-takeaway { border-top:1px solid var(--rule); margin-top:24px; padding-top:32px; }
.moving-target h3 { font-size:clamp(35px,4vw,54px); font-weight:400; line-height:1.2; letter-spacing:-.03em; text-wrap:initial; }
.moving-target h3 em { font-style:normal; color:var(--mt-accent); }
.mt-assumptions { margin:18px 0 0; color:var(--muted); font-size:17px; line-height:1.65; letter-spacing:-.02em; }
.mt-calculate { color:var(--mt-accent); font-family:Fraunces,serif; font-size:26px; display:inline-flex; align-items:center; gap:12px; min-height:48px; margin-top:12px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px; }
.mt-calculate:hover { color:#802a15; }
.mt-calculate span { font-family:Inter,sans-serif; font-size:25px; }
.mt-controls { display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--rule); margin-top:36px; padding-top:16px; color:var(--muted); font-size:13px; min-height:60px; }
.mt-controls p { margin:0; }
.mt-controls button { border:1px solid #a99d8e; border-radius:4px; background:transparent; color:#514b42; font:inherit; font-size:14px; padding:0 17px; min-height:44px; cursor:pointer; }
.mt-controls button:hover { background:var(--paper2); color:var(--ink); }
.moving-target a:focus-visible,.mt-controls button:focus-visible { outline:2px solid var(--mt-accent); outline-offset:5px; }
.mt-explainer { font-size:13.5px; margin:16px 0 0; color:var(--muted); }
.mt-explainer a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.mt-announcement { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:900px) {
  .mt-topline { align-items:center; gap:12px; }
  .mt-eyebrow { font-size:10px; letter-spacing:.12em; gap:8px; padding:0; }
  .mt-eyebrow::before { width:18px; }
  .mt-time { font-size:12px; min-width:118px; }
  .mt-time span { display:none; }
  .moving-target h2 { font-size:clamp(44px,9.5vw,62px); line-height:1.07; margin:28px 0 22px; letter-spacing:-.04em; }
  .moving-target h2 em { display:block; }
  .mt-intro { font-size:16px; line-height:1.65; letter-spacing:-.015em; }
  .mt-desktop-break { display:none; }
  .mt-example { margin-top:34px; }
  .mt-example figcaption { font-size:11px; letter-spacing:.12em; }
  .mt-ruler { margin-top:24px; }
  .mt-ruler.is-ready { height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mt-ruler.is-ready .mt-marker { position:static; transform:none; width:auto; min-width:0; overflow-wrap:anywhere; text-align:left; }
  .mt-ruler.is-ready .mt-cost { text-align:right; transform:none; }
  .mt-marker>span { font-size:13px; }
  .mt-marker strong { display:block; font-size:32px; margin-top:3px; }
  .mt-ruler canvas { position:static; grid-column:1/-1; grid-row:2; }
  .mt-axis { position:relative; grid-column:1/-1; grid-row:3; min-height:1.5em; font-size:12px; }
  .mt-axis span { top:0; font-size:12px; }
  .mt-axis span:first-child { left:0 !important; transform:none; }
  .mt-axis span:last-child { left:auto !important; right:0; transform:none; }
  .mt-axis .mt-minor { display:none; }
  .mt-ruler.is-ready .mt-distance { position:static; grid-column:1/-1; grid-row:4; transform:none; text-align:left; width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; white-space:normal; }
  .mt-distance>strong { font-size:26px; }
  .mt-distance>span { font-size:11px; margin:0; }
  .mt-takeaway { padding-top:25px; margin-top:0; }
  .moving-target h3 { font-size:35px; line-height:1.14; letter-spacing:-.035em; }
  .mt-assumptions { margin-top:18px; font-size:14px; line-height:1.7; letter-spacing:0; }
  .mt-calculate { font-size:23px; }
  .mt-controls { margin-top:27px; gap:12px; font-size:11px; }
  .mt-controls p { max-width:165px; line-height:1.5; }
  .mt-controls button { font-size:12px; padding-inline:11px; min-width:129px; }
}
@media (max-width:360px) {
  .moving-target h2 { font-size:42px; }
  .mt-distance>strong { font-size:23px; }
  .mt-distance>span { font-size:10px; }
}