/* Parity pass (founder, 2026-10-24): close the gaps on hero impact, type scale, micro-interactions and phones,
   keeping Earlyman's words, colours, fonts, logo, demo video and sample-data labels. Linked after finish.css.
   Motion here: transform, opacity and clip-path only; reduced motion (OS or html.rm) turns it off. */
:root {
  --p-d1: clamp(42px, 6.2vw, 92px);    /* landing headline */
  --p-d2: clamp(34px, 4.2vw, 60px);    /* section headline */
}

/* ---------- hero: the headline spans the page; the line, buttons and steps sit left of the card ---------- */
.hero h1 {
  font-size: var(--p-d1); line-height: .98; letter-spacing: -0.048em; font-weight: 400; max-width: 15.5em; text-wrap: balance;
}
.hero h1 .dim2 { color: var(--fg-2); }
@media (min-width: 1081px) {
  .hero { padding-top: 64px; }
  .hero .wrap { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); column-gap: 64px; row-gap: 0; align-items: start; }
  .hero-copy { display: contents; }
  .hero h1 { grid-column: 1 / -1; grid-row: 1; margin-bottom: 48px; }
  .hero .sub { grid-column: 1; grid-row: 2; margin-top: 4px; }
  .hero .hero-ctas { grid-column: 1; grid-row: 3; margin-top: 28px; }
  .hero .hero-note { grid-column: 1; grid-row: 4; }
  .hero .steps3 { grid-column: 1; grid-row: 5; align-self: start; flex-direction: column; gap: 14px; margin-top: 36px; }
  .hero .steps3 li + li::before { display: none; }
  .stage-col { grid-column: 2; grid-row: 2 / span 5; align-self: start; }
}
@media (max-width: 700px) {
  .hero h1 { line-height: 1.0; letter-spacing: -0.045em; }
}

/* ---------- section headlines: larger, tighter; the second sentence steps back ---------- */
.sec-h { max-width: 820px; }
.sec-h h2, .how-copy h2 { font-size: var(--p-d2); line-height: 1.02; letter-spacing: -0.042em; }
.sec-h h2 .dim2, .how-copy h2 .dim2 { color: var(--fg-2); }
.final h2.big { font-size: clamp(38px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.045em; }

/* ---------- micro-interactions ---------- */
.btn { transition: transform 160ms cubic-bezier(.22, 1, .36, 1); }
.btn:active { transform: scale(.97); transition-duration: 80ms; }
.more { position: relative; text-decoration: none; }
.more::after {
  content: ""; position: absolute; left: 0; right: 1.1em; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(.35); transform-origin: left; opacity: .6; transition: transform 320ms cubic-bezier(.22, 1, .36, 1), opacity 320ms;
}
.more:hover::after, .more:focus-visible::after { transform: scaleX(1); opacity: 1; }
.ft-cols a, .nav-links a { position: relative; }
.ft-cols a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}
.ft-cols a:hover::after, .ft-cols a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.seeit .rows .r .nm { transition: transform 260ms cubic-bezier(.22, 1, .36, 1); }
.seeit .rows .r:hover .nm { transform: translate3d(4px, 0, 0); }
.hx-dots button { transition: transform 160ms cubic-bezier(.22, 1, .36, 1); }
.hx-dots button:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .seeit .rows .r:hover .nm, .hx-dots button:active { transform: none; }
  .more::after, .ft-cols a::after, .btn, .seeit .rows .r .nm { transition: none; }
}
html.rm .btn:active, html.rm .seeit .rows .r:hover .nm, html.rm .hx-dots button:active { transform: none; }
html.rm .more::after, html.rm .ft-cols a::after, html.rm .btn, html.rm .seeit .rows .r .nm { transition: none; }

/* ---------- round 2: interactive demo dashboard under the hero (sample data) ---------- */
.hero { padding-bottom: 56px; }
.pv-sec { padding: 0 0 8px; position: relative; z-index: 1; }
.pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pv { background: var(--bg-1); }
.pv-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 460px; }
.pv-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; border-right: 1px solid var(--line-1); font-size: var(--t-sm); color: var(--fg-2); }
.pv-side button { appearance: none; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; }
.pv-side button:hover { color: var(--fg-0); }
.pv-side button.on { color: var(--fg-0); background: var(--bg-2); box-shadow: inset 2px 0 0 var(--fg-0); }
.pv-side button:focus-visible { outline: 2px solid var(--fg-0); outline-offset: -2px; }
.pv-side b { font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-1); border: 1px solid var(--line-2); padding: 0 5px; }
.pv-side small { margin-top: auto; padding: 0 10px; font: 400 10px/14px var(--font-mono); color: var(--fg-3); }
.pv-main { padding: 18px 24px 22px; min-width: 0; }
.pv-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line-1); }
.pv-tabs button { appearance: none; background: none; border: 0; padding: 8px 0 10px; font: 500 var(--t-xs)/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); cursor: pointer; position: relative; }
.pv-tabs button[aria-selected="true"] { color: var(--fg-0); }
.pv-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg-0); transform: scaleX(0); transform-origin: left; transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.pv-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.pv-tabs button:focus-visible { outline: 2px solid var(--fg-0); outline-offset: 2px; }
.pv-hi { margin-top: 18px; font-size: var(--t-md); line-height: 24px; color: var(--fg-1); }
.pv-hi b { color: var(--fg-0); font-weight: 500; }
.pv-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); }
.pv-g { display: grid; gap: 6px; padding: 14px 18px 16px 0; }
.pv-g + .pv-g { padding-left: 18px; border-left: 1px solid var(--line-1); }
.pv-g .k, .pv-lh .mono, .pv-g .m { font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; }
.pv-g .k { text-transform: uppercase; letter-spacing: .08em; }
.pv-g .n { font: 400 30px/1 var(--font-ui); letter-spacing: -0.03em; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.pv-g .n small { font-size: var(--t-sm); color: var(--fg-2); letter-spacing: 0; }
.pv-g .bar { position: relative; height: 4px; background: var(--bg-3); }
.pv-g .bar i { position: absolute; inset: 0; background: var(--fg-1); transform: scaleX(var(--p)); transform-origin: left; }
.pv-g .bar s { position: absolute; left: 80%; top: -3px; bottom: -3px; width: 1px; background: var(--fg-3); }
.js .pv:not(.in) .pv-g .bar i { transform: scaleX(0); }
.js .pv .pv-g .bar i { transition: transform 1100ms cubic-bezier(.22, 1, .36, 1) 300ms; }
.js .pv .pv-g:nth-child(2) .bar i { transition-delay: 420ms; } .js .pv .pv-g:nth-child(3) .bar i { transition-delay: 540ms; }
.pv-list { margin-top: 18px; }
.pv-lh { display: flex; align-items: baseline; gap: 12px; font-size: var(--t-base); color: var(--fg-0); }
.pv-lh b { font-weight: 500; }
.pv-list ul { list-style: none; margin: 8px 0 0; padding: 0; }
.pv-r { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-1);
  transition: opacity 260ms ease, clip-path 360ms cubic-bezier(.22, 1, .36, 1); clip-path: inset(0 0 0 0); }
.pv-r .dot { width: 7px; height: 7px; background: var(--fg-2); }
.pv-r.hot .dot { background: var(--fg-0); box-shadow: 0 0 0 3px var(--bg-3); }
.pv-r .t { display: grid; gap: 2px; min-width: 0; }
.pv-r .t b { font-weight: 500; font-size: var(--t-base); color: var(--fg-0); }
.pv-r .t span { font-size: var(--t-sm); color: var(--fg-2); }
.pv-r .usd { font: 400 var(--t-sm)/18px var(--font-mono); color: var(--fg-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-r .act { display: flex; gap: 6px; }
.pv-r button, .pv-clear button { appearance: none; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); background: transparent; color: var(--fg-1); font: 400 var(--t-xs)/1 var(--font-mono); cursor: pointer; transition: transform 160ms cubic-bezier(.22, 1, .36, 1); }
.pv-r button:hover, .pv-clear button:hover { color: var(--fg-0); border-color: var(--fg-2); }
.pv-r button:active, .pv-clear button:active { transform: scale(.96); }
.pv-r button:focus-visible, .pv-clear button:focus-visible { outline: 2px solid var(--fg-0); outline-offset: 2px; }
.pv-r.snoozed { opacity: .45; }
.pv-r.snoozed .dot { background: var(--fg-3); box-shadow: none; }
.pv-r.gone { opacity: 0; clip-path: inset(0 0 0 100%); }
.pv-clear { margin-top: 14px; font-size: var(--t-sm); color: var(--fg-2); display: flex; gap: 12px; align-items: center; }
.pv[data-view="inbox"] .pv-over { display: none; }
.works { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-1); }
.works-h { font: 500 var(--f-label, 11px)/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.works li { font: 400 var(--t-sm)/20px var(--font-mono); color: var(--fg-2); }
/* sidebar views (10-25): compact sample views behind data-pv-nav; hidden in the HTML until preview.js shows one */
.pv-view[hidden], .pv-rc[hidden] { display: none; }
.pv-vh { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line-1); font-size: var(--t-md); color: var(--fg-0); }
.pv-vh b { font-weight: 500; }
.pv-vh .mono, .pv-note, .pv-tip .mono { font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); letter-spacing: .04em; }
.pv-note { margin-top: 12px; }
.pv-prs, .pv-tbl, .pv-rules { list-style: none; margin: 0; padding: 0; }
.pv-prs li, .pv-tbl li, .pv-rules li { border-bottom: 1px solid var(--line-1); }
.pv-prh { appearance: none; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 70px 76px 110px; gap: 14px; align-items: center; padding: 12px 0; }
.pv-prh:hover .nm, .pv-prh[aria-expanded="true"] .nm { color: var(--fg-0); }
.pv-prh:focus-visible, .pv-sw:focus-visible { outline: 2px solid var(--fg-0); outline-offset: 2px; }
.pv-prh .nm, .pv-tbl .nm, .pv-rules .nm { font-size: var(--t-base); color: var(--fg-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-prh .nm::before { content: "+"; display: inline-block; width: 16px; font: 400 var(--t-sm)/1 var(--font-mono); color: var(--fg-3); transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
.pv-prh[aria-expanded="true"] .nm::before { transform: rotate(45deg); }
.pv-prs .m, .pv-tbl .m, .pv-rules .m, .pv-tbl .ag { font: 400 var(--t-sm)/18px var(--font-mono); color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.pv-prs .m.bad { color: var(--fg-0); }
.pv-rc { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 6px 28px; margin: 0 0 12px 16px; padding: 10px 14px; background: var(--bg-2); border-left: 2px solid var(--fg-2); }
.pv-rc span { display: grid; gap: 2px; font: 400 var(--t-sm)/18px var(--font-mono); color: var(--fg-0); }
.pv-rc i { font-style: normal; font-size: var(--t-xs); color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; }
.pv-tbl li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 90px 86px; gap: 14px; align-items: center; padding: 11px 0; }
.pv-tbl .ag { text-align: left; color: var(--fg-1); }
.pv-tbl li.hot .ag { color: var(--fg-0); }
.pv-tbl li.hot .ag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--fg-0); box-shadow: 0 0 0 3px var(--bg-3); vertical-align: 1px; }
.pv-tbl li.dim { opacity: .6; }
.pv-mods li { grid-template-columns: 90px minmax(0, 1fr) 48px 70px; }
.pv-mods .sh { position: relative; height: 4px; background: var(--bg-3); }
.pv-mods .sh i { position: absolute; inset: 0; background: var(--fg-1); transform: scaleX(var(--p)); transform-origin: left; }
.pv-tip { margin-top: 14px; padding: 12px 14px; background: var(--bg-2); border-left: 2px solid var(--fg-0); font-size: var(--t-sm); line-height: 20px; color: var(--fg-1); }
.pv-tip b { font-weight: 500; color: var(--fg-0); }
.pv-tip .mono { color: var(--fg-0); white-space: nowrap; }
.pv-rules li { display: grid; grid-template-columns: minmax(0, 1fr) 64px 40px; gap: 14px; align-items: center; padding: 11px 0; }
.pv-rules .nm small { display: block; margin-top: 2px; font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); }
.pv-sw { appearance: none; position: relative; width: 34px; height: 18px; padding: 0; border: 1px solid var(--line-2); background: var(--bg-3); cursor: pointer; }
.pv-sw i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--fg-3); transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
.pv-sw[aria-checked="true"] { background: var(--fg-0); border-color: var(--fg-0); }
.pv-sw[aria-checked="true"] i { transform: translateX(16px); background: var(--bg-0); }
.pv-rules li:has(.pv-sw[aria-checked="false"]) .nm { color: var(--fg-3); }
.pv-gauges-s { margin-top: 0; border-top: 0; }
.pv-gauges-s .pv-g .n { font-size: 24px; }
.pv-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 96px; margin-top: 16px; align-items: end; }
.pv-days span { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; height: 100%; }
.pv-days i { align-self: end; height: 100%; background: var(--fg-3); transform: scaleY(var(--h)); transform-origin: bottom; }
.pv-days .hi i { background: var(--fg-0); }
.pv-days b { font: 400 var(--t-xs)/14px var(--font-mono); color: var(--fg-3); text-align: center; font-weight: 400; }
/* view, receipt and bar entrances: transform and opacity only, added by preview.js; none with reduced motion */
.pv-enter { animation: pv-in 320ms cubic-bezier(.22, 1, .36, 1) both; }
.pv-enter .pv-days i, .pv-enter.pv-view .pv-g .bar i, .pv-enter .pv-mods .sh i { animation: pv-grow 700ms cubic-bezier(.22, 1, .36, 1) both 120ms; }
.pv-enter .pv-mods .sh i { animation-name: pv-growx; }
.pv-enter .pv-days span:nth-child(2) i { animation-delay: 160ms; } .pv-enter .pv-days span:nth-child(3) i { animation-delay: 200ms; }
.pv-enter .pv-days span:nth-child(4) i { animation-delay: 240ms; } .pv-enter .pv-days span:nth-child(5) i { animation-delay: 280ms; }
.pv-enter .pv-days span:nth-child(6) i { animation-delay: 320ms; } .pv-enter .pv-days span:nth-child(7) i { animation-delay: 360ms; }
.pv-enter.pv-view .pv-g .bar i { animation-name: pv-growx; }
@keyframes pv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pv-grow { from { transform: scaleY(0); } to { transform: scaleY(var(--h)); } }
@keyframes pv-growx { from { transform: scaleX(0); } to { transform: scaleX(var(--p)); } }
@media (max-width: 900px) {
  .pv-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pv-side { display: none; }
  /* phones and tablets: the same nav as a horizontal strip that scrolls on its own (only with JS, where it works) */
  .js .pv-side { display: flex; flex-direction: row; gap: 4px; padding: 8px 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--line-1); min-width: 0; }
  .js .pv-side::-webkit-scrollbar { display: none; }
  .js .pv-side button { flex: 0 0 auto; gap: 8px; white-space: nowrap; padding: 6px 10px; }
  .js .pv-side button.on { box-shadow: inset 0 -2px 0 var(--fg-0); }
  .js .pv-side small { display: none; }
  .pv-prh { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 4px; }
  .pv-prh .m:last-child { grid-column: 1 / -1; text-align: left; padding-left: 16px; }
  .pv-rc { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .pv-tbl li { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; }
  .pv-tbl .m, .pv-tbl .ag { font-size: var(--t-xs); }
  .pv-mods li { grid-template-columns: 64px minmax(0, 1fr) 36px 58px; }
  .pv-main { padding: 14px 14px 18px; }
  .pv-gauges { grid-template-columns: minmax(0, 1fr); }
  .pv-g { padding: 12px 0; } .pv-g + .pv-g { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-1); }
  .pv-r { grid-template-columns: 10px minmax(0, 1fr) auto; row-gap: 8px; }
  .pv-r .act { grid-column: 2 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pv:not(.in) .pv-g .bar i { transform: scaleX(var(--p)); }
  .js .pv .pv-g .bar i, .pv-r, .pv-tabs button::after, .pv-r button, .pv-sw i, .pv-prh .nm::before { transition: none; }
  .pv-enter, .pv-enter .pv-days i, .pv-enter .pv-g .bar i, .pv-enter .pv-mods .sh i { animation: none !important; }
}
html.rm .js .pv:not(.in) .pv-g .bar i, html.rm.js .pv:not(.in) .pv-g .bar i { transform: scaleX(var(--p)); }
html.rm .pv .pv-g .bar i, html.rm .pv-r, html.rm .pv-tabs button::after, html.rm .pv-r button, html.rm .pv-sw i, html.rm .pv-prh .nm::before { transition: none; }
html.rm .pv-enter, html.rm .pv-enter .pv-days i, html.rm .pv-enter .pv-g .bar i, html.rm .pv-enter .pv-mods .sh i { animation: none !important; }

/* ---------- round 2: the demo video sits in a window like the product frames, poster always visible ---------- */
.demo-frame { border: 1px solid var(--line-1); }
#see .demo { margin-bottom: 72px; }
.pv-r[hidden], .pv-clear[hidden] { display: none; }
.frame.pv, .frame.pv:hover { border: 1px solid var(--line-2); background: var(--bg-1); }
.pv .frame-bar { background: var(--bg-2); }
.pv-side { background: var(--bg-0); }
.pv-sec + .facts-band { padding-top: 40px; }

/* ---------- round 2: How it works fills its stage and the pinned runway is shorter ---------- */
@media (min-width: 761px) {
  .how-track { height: auto; }   /* cut-repetition (founder 10-26): no pinned runway; the story plays once in view */
  .how-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; }   /* row gap stays 0: heading to content is the h2 margin (32 px) */
}

/* ---------- round 3: Traces on the landing. The waterfall draws in time order, marks the slowest and costliest step,
   then the plain-words explanation arrives: what happened, the fix, then the details ---------- */
.tx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.frame.tx, .frame.tx:hover { border: 1px solid var(--line-2); background: var(--bg-1); }
.tx-body { padding: 20px 24px 18px; }
.tx-axis, .tx-r, .tx-tot { display: grid; grid-template-columns: 220px minmax(0, 1fr) 76px 64px; gap: 18px; align-items: center; }
.tx-axis { font: 400 var(--t-xs)/16px var(--font-mono); color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 10px; border-bottom: 1px solid var(--line-1); }
.tx-axis > span:nth-child(n+3), .tx-r .d, .tx-r .c, .tx-tot .d, .tx-tot .c { text-align: right; }
.tx-axis .tl { position: relative; height: 16px; text-transform: none; letter-spacing: 0; }
.tx-axis .tl i { position: absolute; top: 0; font-style: normal; }
.tx-axis .tl i:nth-child(1) { left: 0; } .tx-axis .tl i:nth-child(2) { left: 26.4%; } .tx-axis .tl i:nth-child(3) { left: 52.9%; } .tx-axis .tl i:nth-child(4) { left: 79.3%; }
.tx-rows { list-style: none; margin: 0; padding: 6px 0; position: relative; }
.tx-r { min-height: 46px; border-bottom: 1px solid var(--line-1); font-size: var(--t-sm); }
.tx-r .nm { color: var(--fg-0); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-r .nm small { font: 400 var(--t-xs)/1 var(--font-mono); color: var(--fg-3); margin-left: 6px; }
.tx-r.bad .nm small { color: var(--fg-0); }
.tx-r .d, .tx-r .c, .tx-tot { font: 400 var(--t-sm)/18px var(--font-mono); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.tx-r .tl { position: relative; height: 14px; background: linear-gradient(90deg, var(--line-1) 0 1px, transparent 1px) 0 0 / 26.43% 100% repeat-x; }
.tx-r .tl i { position: absolute; top: 0; bottom: 0; left: var(--l); width: max(var(--w), 3px); background: var(--fg-2); }
.tx-r.costly .tl i { background: var(--fg-0); }
.tx-r.bad .tl i { background: repeating-linear-gradient(135deg, var(--fg-0) 0 2px, transparent 2px 5px); outline: 1px solid var(--fg-0); outline-offset: -1px; }
.tx-r.bad { background: var(--bg-2); }
.tx-r .tag { position: absolute; top: 50%; left: calc(var(--l) + var(--w) + 8px); transform: translateY(-50%); font: 500 10px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-0); border: 1px solid var(--fg-2); padding: 0 5px; background: var(--bg-1); white-space: nowrap; }
.tx-r.slow .tag { left: auto; right: calc(100% - var(--l) - var(--w)); transform: translate(0, -50%); top: -9px; }
.tx-tot { padding-top: 12px; color: var(--fg-2); }
.tx-tot > span:first-child { font-family: var(--font-ui); }
.tx-ex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 8px; }
.tx-pr { grid-column: 1 / -1; }
.tx-s { padding: 22px 0 6px; border-top: 1px solid var(--line-1); margin-top: 24px; }
.tx-s .k { display: block; font: 500 var(--f-label, 11px)/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.tx-s p { margin-top: 8px; font-size: var(--f-lede, 17px); line-height: 1.5; color: var(--fg-0); }
.tx-s + .tx-s p { color: var(--fg-1); }
.tx-det summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.tx-det summary::-webkit-details-marker { display: none; }
.tx-det summary::after { content: "+"; font: 400 var(--t-sm)/1 var(--font-mono); color: var(--fg-2); margin-left: auto; transition: transform 240ms cubic-bezier(.22, 1, .36, 1); }
.tx-det[open] summary::after { transform: rotate(45deg); }
.tx-det p { font: 400 var(--t-sm)/20px var(--font-mono); color: var(--fg-2); }
.tx-pr { margin-top: 28px; font-size: var(--t-base); color: var(--fg-1); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }

/* staged by motion.js: hidden only while .mx-pend, played once with .mx-play */
.tx-grid.mx-pend .tx-r, .tx-grid.mx-pend .tx-s, .tx-grid.mx-pend .tx-pr, .tx-grid.mx-pend .tx-tot { opacity: 0; }
.tx-grid.mx-pend .tx-r .tl i { clip-path: inset(0 100% 0 0); }
.tx-grid.mx-pend .tx-r .tag { opacity: 0; }
.tx-grid.mx-play .tx-r { animation: mx-fadein 260ms ease both; animation-delay: calc(var(--t) + 300ms); }
.tx-grid.mx-play .tx-r .tl i { animation: mx-wipe var(--dur) linear both; animation-delay: calc(var(--t) + 300ms); }
.tx-grid.mx-play .tx-r.bad { animation: mx-fadein 260ms ease both, mx-flag 600ms ease both; animation-delay: calc(var(--t) + 300ms), 3000ms; }
.tx-grid.mx-play .tx-r .tag { animation: mx-pop 360ms cubic-bezier(.3, 1.45, .5, 1) both; animation-delay: 3000ms; }
.tx-grid.mx-play .tx-r.costly .tag { animation-delay: 3180ms; }
.tx-grid.mx-play .tx-tot { animation: mx-fadein 400ms ease both 2900ms; }
.tx-grid.mx-play .tx-s { animation: mx-up 520ms cubic-bezier(.23, 1, .32, 1) both; }
.tx-grid.mx-play .tx-s:nth-child(1) { animation-delay: 3500ms; } .tx-grid.mx-play .tx-s:nth-child(2) { animation-delay: 3850ms; } .tx-grid.mx-play .tx-s:nth-child(3) { animation-delay: 4200ms; }
.tx-grid.mx-play .tx-pr { animation: mx-up 520ms cubic-bezier(.23, 1, .32, 1) both 4500ms; }
@keyframes mx-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes mx-pop { from { opacity: 0; transform: translateY(-50%) scale(.8); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes mx-flag { from { opacity: .6; } to { opacity: 1; } }
@media (max-width: 900px) {
  .tx-ex { grid-template-columns: minmax(0, 1fr); }
  .tx-s { margin-top: 18px; }
}
@media (max-width: 560px) {
  .tx-body { padding: 14px 12px; }
  .tx-axis, .tx-r, .tx-tot { grid-template-columns: minmax(0, 1fr) 64px 52px; gap: 6px 10px; }
  .tx-axis .tl { display: none; }
  .tx-r { padding: 8px 0; }
  .tx-r .tl { grid-column: 1 / -1; grid-row: 2; }
  .tx-tot > span:nth-child(2) { display: none; }
  .tx-r.slow .tag { top: 50%; right: auto; left: calc(var(--l) + var(--w) + 6px); transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tx-grid .tx-r, .tx-grid .tx-s, .tx-grid .tx-pr, .tx-grid .tx-tot, .tx-grid .tx-r .tag { animation: none !important; opacity: 1 !important; }
  .tx-grid .tx-r .tl i { animation: none !important; clip-path: none !important; }
  .tx-det summary::after { transition: none; }
}
html.rm .tx-grid .tx-r, html.rm .tx-grid .tx-s, html.rm .tx-grid .tx-pr, html.rm .tx-grid .tx-tot, html.rm .tx-grid .tx-r .tag { animation: none !important; opacity: 1 !important; }
html.rm .tx-grid .tx-r .tl i { animation: none !important; clip-path: none !important; }

.frame.tx .frame-bar, .frame.pv .frame-bar { padding: 0 14px; }

/* site round (10-26): the incomplete-trace note in the trace showcase */
.tx-gap { margin: 24px 0 0; padding: 14px 16px; border: 1px dashed var(--line-2); font-size: var(--t-base); line-height: 1.5; color: var(--fg-1); align-self: start; }
.tx-gap b { font-weight: 500; color: var(--fg-0); }
@media (min-width: 901px) { .tx-gap { grid-column: 2 / -1; } }
.tx-grid.mx-pend .tx-gap { opacity: 0; }
.tx-grid.mx-play .tx-s:nth-child(4) { animation-delay: 4350ms; }
.tx-grid.mx-play .tx-gap { animation: mx-up 520ms cubic-bezier(.23, 1, .32, 1) both 4400ms; }
@media (prefers-reduced-motion: reduce) { .tx-grid.mx-pend .tx-gap { opacity: 1; } .tx-grid.mx-play .tx-gap { animation: none; } }
html.rm .tx-grid .tx-gap { animation: none !important; opacity: 1 !important; }

/* site round 2 (10-26): proof strip right under the hero. Three measured numbers, one link to the method. */
.proofbar { padding: 8px 0 40px; }
.proofbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); padding: 20px 0; }
.proofbar-l { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; flex-wrap: wrap; }
.proofbar-l li { display: flex; align-items: baseline; gap: 10px; }
.proofbar-l b { font: 500 28px/1 var(--font-ui); letter-spacing: -0.03em; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.proofbar-l li > span { font-size: var(--t-base); line-height: 20px; color: var(--fg-2); }
@media (max-width: 700px) {
  .proofbar { padding-bottom: 24px; }
  .proofbar-l { flex-direction: column; gap: 12px; }
  .proofbar-l b { font-size: 24px; min-width: 64px; }
}