/* Homepage composition. Uses the existing v4 palette and font tokens in site.css.
   The hero Turn keeps the brand signature ("the ink sets"), driven by cal-motion.js and
   the Option A block in site.css; nothing here animates it. Everything else moves only
   transform and opacity, and financial figures never count up. */
.home .container, .home .topbar-inner { max-width: 1380px; padding-inline: 56px; }
.home .micro { font: 500 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.home .eyebrow { font-size: 12px; }
.home .price-fine, .home .trial-form label, .home .trial-form .optional, .home .footer-fine, .home .voice-strip cite { font-size: 12px; }
.home .trial-form .optional { color: var(--ink-muted); }
.home section[id], .home .note { scroll-margin-top: 110px; }
.home .hero { padding: 32px 0 0; }
.hero-heading-line { display: flex; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--hairline-strong); }
.hero-composition { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 28px 0 44px; align-items: start; }
.home .hero-copy .display { font-size: clamp(36px, 4.05vw, 58px); line-height: 1.12; margin: 0 0 28px; letter-spacing: -.045em; }
.home .hero-copy .lede { font: 400 17px/1.65 var(--sans); max-width: 440px; margin-bottom: 28px; }
.home .hero-actions { align-items: center; gap: 24px; }
.home .hero-actions .btn { gap: 40px; min-height: 52px; font-size: 15px; }
.hero-demo-link { font-size: 15px; padding-block: 12px; border-bottom: 1px solid var(--hairline-strong); }
.hero-demo-link span { display: inline-block; margin-left: 12px; transition: transform 180ms ease; }
.hero-demo-link:hover span { transform: translate(2px,-2px); }
.hero-proof-line { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-muted); }
.source-square { display: inline-block; width: 7px; height: 7px; flex: none; background: var(--green); }
.hero-side-note { border-left: 1px solid var(--hairline-strong); margin-top: 42px; padding-left: 18px; }
.hero-side-note p { font: italic 18px/1.5 var(--serif); margin-top: 8px; }
.loan-demo { border: 1px solid var(--hairline-strong); background: var(--paper-raised); position: relative; }
.loan-demo::before, .loan-demo::after { content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none; border-color: var(--ink); border-style: solid; }
.loan-demo::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.loan-demo::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.demo-bar { padding: 13px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); }
.demo-brand { font: 500 22px var(--serif); letter-spacing: -.06em; }
.demo-brand i { display: inline-block; width: 7px; height: 7px; background: var(--green); margin: 0 2px 2px; }
.demo-bar .micro { font-size: 12px; letter-spacing: .06em; }
.demo-question { padding: 20px 22px 17px; }
.demo-question h2 { font: 500 21px/1.35 var(--serif); letter-spacing: -.025em; margin-top: 8px; }
.file-facts { display: flex; gap: 32px; margin-top: 18px; font-size: 16px; font-variant-numeric: lining-nums proportional-nums; }
.file-facts small { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.demo-column-labels { display: grid; grid-template-columns: 1fr 105px 78px; padding: 10px 22px; font-size: 12px; color: var(--ink-muted); background: var(--paper-inset); }
.demo-column-labels span:not(:first-child) { text-align: right; }
.lender-option { width: 100%; padding: 7px 22px; display: grid; grid-template-columns: 1fr 105px 78px; gap: 0; align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--rule); text-align: left; color: var(--ink); font: 400 14px/1.3 var(--sans); cursor: pointer; position: relative; }
.lender-option::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); transform: scaleY(0); transition: transform 220ms ease; }
.lender-option.is-selected { background: var(--paper-inset); }
.lender-option.is-selected::before { transform: scaleY(1); }
.lender-option:hover { background: var(--paper); }
.lender-option > span:not(:first-child) { text-align: right; font-variant-numeric: lining-nums proportional-nums; }
.lender-option > span:nth-child(2) { padding-right: 10px; }
.lender-name { display: flex; align-items: center; gap: 10px; }
.lender-name i { font: 500 12px/26px var(--sans); width: 26px; height: 26px; text-align: center; border: 1px solid var(--hairline-strong); }
.lender-name small { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.lender-dti > span { display: inline-block; width: 18px; opacity: 0; transform: translate(-4px,4px); transition: transform 180ms ease, opacity 180ms ease; }
.is-selected .lender-dti > span { opacity: 1; transform: none; }
.demo-result { padding: 18px 22px; min-height: 119px; }
.result-label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.result-label .micro { margin-left: auto; letter-spacing: .03em; }
.demo-result > p { font: 500 19px/1.35 var(--serif); margin: 8px 0; }
.result-bottom { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.result-metric { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.result-metric strong { display: inline-flex; align-items: baseline; gap: 3px; flex: none; white-space: nowrap; font: 500 34px/1.15 var(--sans); letter-spacing: 0; font-variant-numeric: lining-nums proportional-nums; }
.result-metric strong > span { font-size: 20px; }
.result-metric small { display: block; margin-top: 3px; color: var(--ink-muted); font-size: 12px; max-width: 160px; }
.result-bottom > a { align-self: end; white-space: nowrap; }
.result-bottom a { text-decoration: underline; text-underline-offset: 4px; }
.demo-controls { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px; gap: 12px; border-top: 1px solid var(--rule); font-size: 12px; }
.demo-controls > span { color: var(--ink-muted); }
.demo-controls button { background: none; border: 0; font: 500 12px var(--sans); color: var(--ink); padding: 8px 0; cursor: pointer; }
.demo-disclaimer { background: var(--paper); padding: 12px 22px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.demo-disclaimer a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.home .entry-band { border-top: 1px solid var(--hairline-strong); padding: 28px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.home .personas { border: 0; margin: 0; padding: 0; }
.home .personas__k { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); margin-bottom: 12px; }
.home .personas__list { list-style: none; display: flex; flex-direction: column; align-items: start; gap: 8px; }
.home .personas__list a { display: inline-block; min-height: 28px; font-size: 15px; }
.home .personas__list a span { display: inline-block; margin-left: 12px; transition: transform 180ms ease; }
.home .personas__list a:hover span { transform: translateX(5px); }
.home .hero-dpa { border-left: 1px solid var(--hairline-strong); padding: 0 0 0 36px; display: grid; grid-template-columns: 1fr auto; gap: 0 24px; }
.hero-dpa__k { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .1em; grid-column: 1 / -1; margin-bottom: 10px; }
.hero-dpa__h { font: 500 22px/1.25 var(--serif); max-width: 270px; }
.hero-dpa__p { grid-column: 1; font-size: 13px; max-width: 320px; margin: 8px 0; }
.hero-dpa__form { grid-column: 2; grid-row: 2 / 5; align-self: center; width: 190px; }
.hero-dpa__form label { display: block; font-size: 12px; margin-bottom: 6px; }
.hero-dpa__row select { border: 1px solid var(--hairline-strong); color: var(--ink); background: var(--paper); width: 100%; padding: 10px; border-radius: 0; font: 400 14px var(--sans); min-height: 44px; }
.hero-dpa__row .btn { margin-top: 8px; width: 100%; min-height: 44px; font-size: 13px; justify-content: center; }
.hero-dpa__ask { font-size: 12px; text-decoration: underline; text-underline-offset: 4px; grid-column: 1; }
.home #example { padding: 0; }
.evidence-details { border-top: 1px solid var(--hairline-strong); }
.evidence-details > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; }
.evidence-details > summary::-webkit-details-marker { display: none; }
.evidence-details > summary strong { display: block; font: 400 22px/1.35 var(--serif); margin-top: 6px; }
.detail-plus { font: 300 32px var(--sans); transition: transform 220ms ease; }
.evidence-details[open] .detail-plus { transform: rotate(45deg); }
.home .mission-strip { background: var(--ink); }
.home .mission-strip .eyebrow { color: var(--paper); font-size: 12px; letter-spacing: .14em; }
.home .rule-thick { height: 1px; background: var(--hairline-strong); }
.home .section { padding-block: 84px; }
.home #products .container { display: grid; grid-template-columns: .8fr 1.2fr; gap: 0 64px; }
.home #products .eyebrow, .home #products .h-display, .home #products .section-sub { grid-column: 1; }
.home #products .h-display { font-size: clamp(34px, 3.5vw, 48px); line-height: 1.15; margin-block: 20px; }
.home #products .section-sub { font-size: 16px; margin-bottom: 20px; }
.home #products .scenario-grid { grid-column: 2; grid-row: 1 / 6; margin: 0; grid-template-columns: 1fr 1fr; border: 0; counter-reset: scenario; }
.home #products .surface-card { padding: 24px 20px; border: 0; border-top: 1px solid var(--hairline-strong); background: none; counter-increment: scenario; }
.home #products .surface-card:nth-child(odd) { border-right: 1px solid var(--rule); }
.home #products .surface-card::before { content: '0' counter(scenario); display: block; font: italic 24px var(--serif); color: var(--ink-muted); margin-bottom: 20px; }
.home #products .surface-num { font-size: 12px; margin-bottom: 10px; }
.home #products .surface-card h3 { font-size: 21px; }
.home #products .scenario-checks { font-size: 14px; }
.home #products .borrower-note { grid-column: 1; font-size: 14px; margin: 12px 0 0; }
.home #products .scenario-actions { grid-column: 1 / -1; justify-content: flex-end; }
.proof-heading { display: flex; justify-content: space-between; gap: 48px; align-items: end; margin-bottom: 32px; }
.proof-heading .h-display { margin-bottom: 0; font-size: clamp(40px,5vw,66px); }
.proof-heading > p { max-width: 440px; font-size: 16px; }
.proof-board { display: grid; grid-template-columns: 260px minmax(0,1fr); border: 1px solid var(--hairline-strong); background: var(--paper-raised); }
.proof-ledger { padding: 28px; border-right: 1px solid var(--hairline-strong); }
.home .proof-ledger .live-strip { margin-top: 20px; }
.home .proof-ledger .live-strip-inner { display: grid; grid-template-columns: 1fr; gap: 20px; border: 0; padding: 0; }
.home .proof-ledger .live-strip-inner[hidden] { display: none; }
.home .proof-ledger .live-num { font-size: 36px; line-height: 1.1; }
.home .proof-ledger .live-lab { font-size: 12px; letter-spacing: .07em; margin-top: 3px; }
.home .proof-ledger .live-asof { width: 100%; margin: 0; font-size: 12px; border-top: 1px solid var(--rule); padding-top: 16px; letter-spacing: .02em; }
.home .proof-ledger .live-label { display: block; }
.proof-ledger .text-link { display: inline-block; font-size: 12px; margin-top: 20px; text-decoration: underline; text-underline-offset: 4px; }
.home #pricing .price-grid { gap: 0; border: 1px solid var(--hairline-strong); }
.home #pricing .price-card { border: 0; border-right: 1px solid var(--hairline-strong); background: transparent; display: flex; flex-direction: column; padding: 32px; }
.home #pricing .price-card:last-child { border-right: 0; }
.home #pricing .price-card:nth-child(2) { background: var(--paper-raised); }
.home #pricing .price-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-height: 108px; }
.home #pricing .price-num { font-size: 44px; white-space: nowrap; }
.home #pricing .price-per:last-child { flex-basis: 100%; align-self: start; }
.home #pricing .price-blurb { flex: 1; min-height: 112px; }
.home #pricing .price-justify { min-height: 78px; }
.home #pricing .price-cta { margin-top: 16px; }
.home #pricing .plan-details { list-style: none; padding: 16px 0; margin: 0; border-top: 1px solid var(--hairline-strong); font-size: 13px; }
.plan-details li { position: relative; padding: 4px 0 4px 17px; }
.plan-details li::before { content: '+'; position: absolute; left: 0; color: var(--ink-muted); }
.home #pricing .price-card:nth-child(2) { border-top: 2px solid var(--ink); padding-top: 30px; }
.home #pricing .price-includes .price-features { grid-template-columns: repeat(auto-fit, minmax(min(100%,250px),1fr)); }
.result-bottom > a, .proof-ledger .text-link, .hero-dpa__ask, .chart-loading a, .home .meta dd > a, #operator .founder-strip a { display: inline-flex; align-items: center; min-height: 24px; }
.home .bench td .ref { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.home :is(button,a,summary,input,select):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@keyframes home-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .home .hero-copy .lede { animation: home-arrive 300ms ease-out 80ms both; }
  .home .hero-actions { animation: home-arrive 300ms ease-out 140ms both; }
  .home .hero-product { animation: home-arrive 300ms ease-out 160ms both; }
  .home .lender-option { animation: home-arrive 240ms ease-out both; }
  .home .lender-option:nth-child(1) { animation-delay: 180ms; }
  .home .lender-option:nth-child(2) { animation-delay: 230ms; }
  .home .lender-option:nth-child(3) { animation-delay: 280ms; }
  .home .lender-option:nth-child(4) { animation-delay: 330ms; }
  .home .lender-option:nth-child(5) { animation-delay: 380ms; }
  .home .has-arrived { animation: home-arrive 300ms ease-out both; }
}
@media (max-width: 1100px) {
  .home .container, .home .topbar-inner { padding-inline: 32px; }
  .hero-composition { gap: 32px; }
  .home .hero-copy .display { font-size: 4.05vw; }
  .hero-side-note { margin-top: 26px; }
  .home .entry-band { grid-template-columns: .65fr 1.35fr; gap: 24px; }
  .home #products .container { gap: 0 32px; }
  .home #pricing .price-card { padding: 24px; }
}
@media (max-width: 900px) {
  .hero-composition { grid-template-columns: 1fr; gap: 32px; }
  .home .hero-copy .display { font-size: clamp(36px,6.8vw,60px); }
  .hero-side-note { display: none; }
  .hero-product { width: 100%; max-width: 640px; }
  .home .entry-band { grid-template-columns: 1fr; }
  .home .personas__list { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
  .home .hero-dpa { border-left: 0; border-top: 1px solid var(--rule); padding: 24px 0 0; }
  .home #products .container { display: block; }
  .home #products .scenario-grid { margin-top: 32px; }
  .proof-heading { align-items: start; }
  .proof-heading > p { max-width: 320px; }
  .proof-board { grid-template-columns: 1fr; }
  .proof-ledger { border-right: 0; border-bottom: 1px solid var(--hairline-strong); }
  .home .proof-ledger .live-strip-inner { grid-template-columns: repeat(4,1fr); }
  .home .proof-ledger .live-asof { grid-column: 1 / -1; }
  .home .proof-ledger .live-num { font-size: 30px; }
  .home #pricing .price-grid { grid-template-columns: 1fr; }
  .home #pricing .price-card { border-right: 0; border-bottom: 1px solid var(--hairline-strong); }
  .home #pricing .price-blurb, .home #pricing .price-justify, .home #pricing .price-amount { min-height: 0; }
}
@media (max-width: 540px) {
  .home .container, .home .topbar-inner { padding-inline: 20px; }
  .home .hero { padding-top: 28px; }
  .hero-edition { display: none; }
  .hero-heading-line { padding-bottom: 18px; }
  .hero-heading-line .eyebrow { font-size: 12px; letter-spacing: .06em; }
  .hero-composition { padding-top: 24px; }
  .home .hero-copy .display { font-size: 7.55vw; letter-spacing: -.045em; }
  .home .hero-copy .lede { font-size: 16px; }
  .demo-bar, .demo-question, .demo-result, .demo-controls { padding-inline: 16px; }
  .demo-bar .micro { font-size: 12px; letter-spacing: 0; }
  .demo-column-labels, .lender-option { grid-template-columns: minmax(0,1fr) 66px 66px; padding-inline: 14px; }
  .demo-column-labels { font-size: 12px; }
  .demo-question h2 { font-size: 19px; }
  .lender-name { gap: 7px; }
  .lender-name i { width: 22px; height: 24px; line-height: 22px; }
  .lender-name small { font-size: 12px; }
  .demo-result > p { font-size: 18px; }
  .result-label .micro { display: none; }
  .result-bottom { flex-wrap: wrap; }
  .result-metric { gap: 12px; }
  .result-metric small { max-width: none; }
  .result-bottom > a { margin-top: 4px; }
  .demo-controls { flex-wrap: wrap; }
  .home .hero-dpa { display: block; }
  .hero-dpa__form { width: 100%; margin: 14px 0; }
  .hero-dpa__row { display: flex; gap: 8px; }
  .hero-dpa__row select { flex: 1; width: 50%; }
  .hero-dpa__row .btn { width: auto; margin: 0; }
  .evidence-details > summary strong { font-size: 19px; }
  .home .section { padding-block: 52px; }
  .home #products .scenario-grid { grid-template-columns: 1fr; }
  .home #products .surface-card { padding: 22px 0; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; }
  .home #products .surface-card:nth-child(odd) { border-right: 0; }
  .home #products .surface-card::before { grid-column: 1; grid-row: 1 / 4; }
  .home #products .surface-card > * { grid-column: 2; }
  .proof-heading { display: block; }
  .proof-heading > p { margin-top: 20px; max-width: none; }
  .proof-ledger { padding: 22px; }
  .home .proof-ledger .live-strip-inner { grid-template-columns: 1fr 1fr; }
}

/* ── Homepage motion (Sep 30 2026) ───────────────────────────────────────────
   The hero keeps the ink-set signature (site.css Option A + cal-motion.js). At the
   brand file's beats it was done in 730ms, behind the font hold, and read as static.
   This slows the beats, widens the bracket travel so the brackets visibly close on
   the phrase, and lets the square blink twice like a cursor before it settles.
   It still plays once and stops. Below the hero, home.js tags each part .rv (and
   each thick rule .rv-draw) and adds .is-in when it reaches the screen. */
.home { --home-ease: cubic-bezier(.16, 1, .3, 1); }
.home [data-motion="seq"] {
  --dur-sig: 1100ms; --dur-sig-in: 360ms;
  --t-turn-a: 0ms;   --t-turn-b: 240ms;
  --t-br: 820ms;     --dur-br: 640ms;
  --t-sq: 1320ms;    --dur-sq: 440ms;
}
@keyframes home-br-l { from { opacity: 0; transform: translateX(-1.1em); } to { opacity: 1; transform: none; } }
@keyframes home-br-r { from { opacity: 0; transform: translateX(1.1em); } to { opacity: 1; transform: none; } }
@keyframes home-sq-land { from { opacity: 0; transform: translateX(-.9em); } to { opacity: 1; transform: none; } }
@keyframes home-sq-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.home [data-motion="seq"].is-set .turn .br::before { animation: home-br-l var(--dur-br) var(--home-ease) var(--t-br) both; }
.home [data-motion="seq"].is-set .turn .br::after  { animation: home-br-r var(--dur-br) var(--home-ease) var(--t-br) both; }
.home [data-motion="seq"].is-set .turn .br .sq {
  animation: home-sq-land var(--dur-sq) var(--home-ease) var(--t-sq) both,
             home-sq-blink 860ms steps(1, end) calc(var(--t-sq) + 620ms) 2;
}

.home .rv {
  opacity: 0; transform: translateY(28px);
  transition: opacity 700ms var(--home-ease), transform 800ms var(--home-ease);
  transition-delay: calc(var(--rv-i, 0) * 90ms);
}
.home .rv.is-in { opacity: 1; transform: none; }
/* the italic green phrase in a section heading lands a beat after its line */
.home .h-display.rv em { opacity: 0; transition: opacity 600ms var(--home-ease) calc(var(--rv-i, 0) * 90ms + 380ms); }
.home .h-display.rv.is-in em { opacity: 1; }
.home .mw { display: inline-block; }
.home .voice-strip blockquote > p.rv { transform: translateY(40px); transition-duration: 1000ms, 1100ms; }
.home .voice-strip blockquote > p.rv.is-in { transform: none; }
.home .voice-strip blockquote > cite.rv { transition-delay: 420ms; }
.home hr.rv-draw { transform: scaleX(0); transform-origin: left; transition: transform 1000ms var(--home-ease); }
.home hr.rv-draw.is-in { transform: none; }

@media print {
  .home .rv, .home .h-display.rv em, .home hr.rv-draw { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home *, .home *::before, .home *::after { animation: none !important; transition: none !important; }
  .home .rv, .home .h-display.rv em, .home hr.rv-draw { opacity: 1 !important; transform: none !important; }
}

/* ── The evaluation record (Oct 10). One ink line, straight run to run. Drops are
   marked low (amber square), back (green square) and spanned under the axis.
   The plot is the scrubber; the big numeral is the readout. ───────────────── */
.home .eval-trend { margin: 0; padding: 32px 36px 28px; min-width: 0; }
.eval-trend__cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.eval-trend__cap h3 { font: 400 28px/1.2 var(--serif); letter-spacing: -.01em; margin: 10px 0 0; }
.eval-trend__sub { margin: 12px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--ink); }
.chart-window { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline-strong); padding: 3px; flex: none; }
.chart-window__ink { position: absolute; left: 0; top: 3px; bottom: 3px; background: var(--ink); transition: transform 300ms var(--ease), width 300ms var(--ease); }
.chart-window button { position: relative; z-index: 1; min-height: 40px; padding: 0 16px; background: transparent; border: 0; color: var(--ink); font: 500 13px var(--sans); white-space: nowrap; cursor: pointer; transition: color 200ms var(--ease), background-color 0s; }
.chart-window button[aria-pressed="true"] { color: var(--paper); background: var(--ink); transition: color 200ms var(--ease), background-color 0s 300ms; }
.chart-window button:disabled { opacity: .45; cursor: default; }
.chart-window button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chart-reading { display: flex; align-items: flex-end; gap: 20px; margin: 28px 0 14px; }
.chart-reading > strong { font: 400 clamp(56px, 6.4vw, 92px)/.9 var(--serif); letter-spacing: -.035em; font-variant-numeric: lining-nums proportional-nums; min-width: 3.4ch; }
.chart-reading > div { padding-bottom: 6px; font: 500 13px/1.4 var(--sans); }
.chart-reading small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.eval-trend__plot { position: relative; width: 100%; min-height: 380px; cursor: crosshair; touch-action: pan-y; }
.eval-trend__plot:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.eval-trend__plot svg { width: 100%; display: block; overflow: visible; }
.chart-loading { padding: 40px 0; font-size: 14px; }
.chart-band { fill: var(--green); opacity: .09; }
.chart-grid { stroke: var(--hairline); stroke-width: 1; }
.chart-axis { stroke: var(--hairline-strong); stroke-width: 1; }
.chart-tick { stroke: var(--hairline-strong); }
.chart-label { fill: var(--ink-muted); font: 500 12px var(--sans); paint-order: stroke; stroke: var(--paper-raised); stroke-width: 3px; stroke-linejoin: round; }
.chart-label--time { letter-spacing: var(--ls-kicker); }
.chart-axes .chart-label { transition: opacity 150ms var(--ease); }
.eval-trend__plot.is-morphing .chart-axes .chart-label, .chart-label.is-covered { opacity: 0; }
.chart-label--span { letter-spacing: 0; }
.chart-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-sq--low { fill: var(--status-alert); }
.chart-sq--back { fill: var(--green); }
.chart-val { fill: var(--ink); font: 600 12px var(--sans); paint-order: stroke; stroke: var(--paper-raised); stroke-width: 4px; stroke-linejoin: round; }
.chart-span { fill: none; stroke: var(--ink-muted); stroke-width: 1; }
.chart-now-dot { fill: var(--green); stroke: var(--paper-raised); stroke-width: 2; }
.chart-now-ring { fill: none; stroke: var(--green); stroke-width: 1; opacity: 0; }
.chart-rule { stroke: var(--ink); stroke-width: 1; }
.chart-pen { fill: var(--ink); stroke: var(--paper-raised); stroke-width: 2; }
.chart-flag { fill: var(--ink); }
.chart-flag-text { fill: var(--paper); font: 600 12px var(--sans); }
.eval-trend__plot.is-waiting .chart-line, .eval-trend__plot.is-waiting .chart-marks, .eval-trend__plot.is-waiting .chart-now, .eval-trend__plot.is-waiting .chart-bg { opacity: 0; }
.chart-ledger { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.chart-ledger[hidden] { display: none; }
.chart-ledger li { display: grid; grid-template-columns: 7px 116px 1fr auto; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 1.45; }
.chart-ledger__sq { width: 7px; height: 7px; background: var(--status-alert); align-self: center; }
.chart-ledger b { font: 600 13px var(--sans); }
.chart-ledger button { background: none; border: 0; border-bottom: 1px solid var(--hairline-strong); padding: 4px 0; min-height: 24px; color: var(--ink); font: 500 12px var(--sans); cursor: pointer; white-space: nowrap; }
.chart-ledger button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chart-context { margin-top: 16px; font-size: 12px; color: var(--ink-muted); line-height: 1.55; }
.chart-context a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .home .eval-trend { padding: 24px 16px; }
  .eval-trend__cap { flex-direction: column; gap: 16px; }
  .eval-trend__cap h3 { font-size: 24px; }
  .chart-window { width: 100%; }
  .chart-reading { margin-top: 20px; gap: 8px; flex-direction: column; align-items: flex-start; }
  .chart-reading > div { padding-bottom: 0; }
  .chart-reading > strong { font-size: 48px; }
  .eval-trend__plot { min-height: 260px; }
  .chart-ledger li { grid-template-columns: 7px 1fr; gap: 4px 12px; font-size: 14px; }
  .chart-ledger li .chart-ledger__line, .chart-ledger li button { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .chart-window__ink, .chart-window button { transition: none; }
}