/* Trader development: hero with the queen a pawn may become, the five-step
   promotion (pinned on desktop, a sticky board on phones, a static diagram
   without motion), the scoresheet, what we do not promise, and the close. */

.nw { white-space: nowrap; }

/* ---------- Hero ---------- */
.td-hero { position: relative; overflow: clip; padding-block: clamp(2rem, 6vh, 4.5rem) clamp(3rem, 8vh, 5.5rem); }
.td-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: min(calc(100dvh - var(--nav-h) - 7rem), 40rem); }
.td-hero .eyebrow { font-size: .9375rem; color: var(--muted); }
.td-hero h1 { margin-top: 1.5rem; font-size: var(--d-1); line-height: 1.2; max-width: 17ch; }
.td-hero .lede { max-width: 33rem; margin-top: 1.5rem; color: var(--fg-2); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; }
.td-hero .ctas { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2.25rem; }
.td-candidates { margin-top: 1.25rem; font-size: .9375rem; color: var(--fg-2); }
.td-candidates .link { margin-left: .25rem; color: var(--fg); }

/* The queen a pawn may become: an outline only, drawn in a dashed line, with
   the pawn standing solid at its foot. */
.td-hero-art { position: relative; height: clamp(18rem, 34vw, 30rem); justify-self: stretch; }
.td-hero-art .drawing { inset: 6% -10% 0 0; --sq: clamp(2.75rem, 4.2vw, 3.75rem); }
.td-ghost { position: absolute; left: 0; right: 0; bottom: 4%; margin-inline: auto; width: min(100%, 26rem); aspect-ratio: 1; --pc-fill: transparent; --pc-line: var(--line-2); --pc-detail: var(--line-2); }
.td-ghost [data-piece] { width: 100%; height: 100%; }
.td-ghost .pc-w { --pc-fill: color-mix(in srgb, var(--bg) 55%, transparent); --pc-line: var(--line-2); --pc-detail: var(--line-2); }
.td-ghost .pc path { vector-effect: non-scaling-stroke; stroke-width: 1.25px; stroke-dasharray: 5 6; }
.td-hero-pawn { position: absolute; left: 18%; bottom: 3%; width: clamp(3rem, 5.4vw, 4.75rem); aspect-ratio: 1; z-index: 1; }
.td-hero-pawn [data-piece] { position: absolute; inset: 0; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .16)); }
.td-hero-pawn .shadow { bottom: 4%; }
/* With motion, the hero waits for its intro (no flash of the final state); a
   failsafe shows it after 3s if the motion layer never starts. */
.js-motion:not(.td-go) .td-hero-copy > *, .js-motion:not(.td-go) .td-hero-art { visibility: hidden; animation: td-show 0s linear 3s forwards; }
@keyframes td-show { to { visibility: visible; } }
@media (max-width: 860px) {
  .td-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 1.5rem; }
  .td-hero-art { height: clamp(12rem, 52vw, 17rem); max-width: 26rem; }
  .td-ghost { width: min(100%, 15rem); margin-right: 0; }
  .td-hero-pawn { left: 14%; }
}

/* ---------- The promotion: five steps, one pawn ---------- */
.td-path { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.td-board-col { position: sticky; top: calc(var(--nav-h) + 2rem); }
.td-board { --s: clamp(3.25rem, 5vw, 4.6rem); --rk: 1.25rem; width: fit-content; margin-inline: auto; padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem) clamp(.5rem, 1.25vw, 1rem); }
.td-grid { position: relative; display: grid; grid-template-columns: var(--rk) repeat(3, var(--s)); grid-template-rows: repeat(var(--rows), var(--s)) 1.5rem; }
.td-grid .rk, .td-grid .fl { display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.td-grid .fl { font-family: var(--display); font-size: .75rem; }
.td-grid .sq { position: relative; background: var(--tb-l); }
.td-grid .sq.d { background: var(--tb-d); background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 55%); }
.td-grid .sq.hl::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--fg) 16%, transparent); opacity: var(--hl, 1); }
.td-grid .frame, .td-trace { position: absolute; left: var(--rk); top: 0; width: calc(var(--s) * 3); height: calc(var(--s) * var(--rows)); pointer-events: none; }
.td-grid .frame { border: 1px solid var(--tb-edge); }
.td-trace { overflow: visible; z-index: 1; color: var(--fg); }
.td-trace path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-dasharray: 3 4; stroke-linecap: round; }
.td-trace circle { fill: currentColor; }
.td-pc { position: absolute; left: calc(var(--rk) + var(--s)); top: 0; width: var(--s); height: var(--s); z-index: 2; pointer-events: none;
  transform: translateY(calc(var(--r, 0) * 100%)) scale(var(--hop, 1)); transform-origin: 50% 88%; }
.td-pc [data-piece] { position: absolute; inset: 8%; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .16)); }
.td-pawn { opacity: 0; }
.td-flash { position: absolute; left: calc(var(--rk) + var(--s) * 1.5); top: calc(var(--s) * .5); width: calc(var(--s) * 2.2); height: calc(var(--s) * 2.2); border-radius: 50%; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fg) 16%, transparent), color-mix(in srgb, var(--fg) 5%, transparent) 55%, transparent);
  transform: translate(-50%, -50%) scale(var(--fs, .4)); }
.td-now { display: none; }
.td-cap { margin-top: 1rem; padding-left: var(--rk); max-width: calc(var(--s) * 3 + var(--rk)); font-size: .8125rem; line-height: 1.5; color: var(--muted); }

.td-steps { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.td-step { padding: 1.75rem 0; border-top: 1px solid var(--line); }
.td-step:last-child { border-bottom: 1px solid var(--line); }
.td-nt { font-family: var(--display); font-size: .9375rem; color: var(--muted); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.td-step h3 { margin-top: .45rem; font-family: var(--display); font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.3; }
.td-step .body { margin-top: .6rem; color: var(--fg-2); max-width: 32rem; }

/* Desktop with motion: the scene fills one screen and the steps replace each
   other in one place while the pawn climbs. */
.td-path.pinned { height: 100dvh; align-items: center; padding-top: calc(var(--nav-h) + 1rem); padding-bottom: 1.5rem; }
/* the pinned scene already carries the space around its centred content: no section padding around it, and a short one above the next section */
.td-path-sec:has(.td-path.pinned) { padding-block: 0; }
.td-path-sec:has(.td-path.pinned) + .td-score-sec { padding-top: clamp(2rem, 5vw, 4rem); }
.td-path.pinned .td-board-col { position: relative; top: auto; }
.td-path.pinned .td-board { --s: clamp(3.25rem, min(5.4vw, calc((100dvh - var(--nav-h) - 11rem) / var(--rows))), 5.5rem); }
.td-path.pinned .sec-head h2 { font-size: clamp(1.4rem, 2.2vw, 2.1rem); }
.td-path.pinned .sec-head p { font-size: 1.0625rem; margin-top: 1rem; }
.td-path.pinned .td-steps { display: grid; margin-top: clamp(2rem, 5vh, 3rem); }
.td-path.pinned .td-step { grid-area: 1 / 1; padding: 0; border: 0; }
.td-path.pinned .td-nt { font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.1; color: var(--fg); letter-spacing: -.01em; }
.td-path.pinned .td-step h3 { margin-top: 1.1rem; }
.td-rail { display: grid; column-gap: .75rem; margin-top: clamp(2rem, 5vh, 3rem); }
.td-rail .bar { grid-column: 1 / -1; height: 1px; background: var(--line); position: relative; margin-bottom: .75rem; }
.td-rail .bar i { position: absolute; inset: -.5px 0; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; }
.td-rail span:not(.bar) { font-family: var(--display); font-size: .75rem; color: var(--muted); transition: color .35s; white-space: nowrap; }
.td-rail span.on { color: var(--fg); }

/* Compact motion (phones, and wide but short screens): the steps play one at a
   time as they reach the middle of the screen while the board stays in view. */
.td-path.compact .td-cap { display: none; }
.td-path.compact .td-step { min-height: 44vh; }
.td-path.compact .td-step:not(.on) .td-nt, .td-path.compact .td-step:not(.on) h3 { color: var(--muted); }
@media (min-width: 961px) and (max-height: 639px) {
  .td-path.compact .td-board-col { top: calc(var(--nav-h) + 1rem); }
  .td-path.compact .td-board { --s: clamp(2rem, min(5vw, calc((100dvh - var(--nav-h) - 7.5rem) / var(--rows))), 4.6rem); padding-block: 1rem .75rem; }
}

@media (max-width: 960px) {
  .td-path { grid-template-columns: 1fr; gap: 2rem; }
  .td-copy { display: contents; }
  .td-copy .sec-head { order: -1; }
  .td-board-col { position: relative; top: auto; }
  .td-board { --s: clamp(2.6rem, 11vw, 3.4rem); margin-inline: 0; }
  .td-steps { margin-top: 0; }
  /* Phones with motion: the board stays in view while the steps scroll past it */
  .td-path.compact .td-board-col { position: sticky; top: calc(var(--nav-h) + .5rem); z-index: 3; background: var(--bg); padding-bottom: .5rem; }
  .td-path.compact .td-board-col.stuck::before { content: ""; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); bottom: 100%; height: calc(var(--nav-h) + .5rem); background: var(--bg); }
  .td-path.compact .td-board { --s: clamp(1.7rem, 7.4vw, 2.3rem); display: flex; align-items: center; gap: clamp(1.25rem, 6vw, 2.5rem); width: 100%; padding: .9rem 1.1rem .6rem .4rem; }
  .td-path.compact .td-now { display: grid; gap: .35rem; min-width: 0; }
  .td-path.compact .td-now .k { font-size: .8125rem; color: var(--muted); }
  .td-path.compact .td-now .k b { font-weight: 500; color: var(--fg-2); }
  .td-path.compact .td-now .nt { font-family: var(--display); font-size: clamp(1.25rem, 6vw, 1.75rem); line-height: 1.15; }
  .td-path.compact .td-now .tt { font-size: .9375rem; line-height: 1.35; color: var(--fg-2); }
}

/* ---------- How the evaluation is scored ---------- */
.td-score { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.td-more { margin-top: 1rem !important; }
.td-ss-stage { position: relative; }
.td-ss-stage .drawing { top: -3rem; right: -2.5rem; width: 70%; height: 80%; --sq: 3.5rem; }
.td-ss { z-index: 1; padding: clamp(1.25rem, 2.6vw, 2rem); max-width: 34rem; margin-left: auto; }
.td-ss .ss-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .875rem; color: var(--fg-2); margin-bottom: .75rem; }
.td-ss .ss-h b { font-family: var(--display); font-weight: 400; font-size: .9375rem; color: var(--fg); }
.td-ss .ss { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.td-ss .ss th { text-align: left; font-weight: 500; color: var(--muted); font-size: .75rem; padding: .3rem 0; border-bottom: 1px solid var(--line-2); }
.td-ss .ss td { padding: .6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.td-ss .ss td:first-child { width: 2.25rem; font-family: var(--display); font-size: .8125rem; padding-top: .7rem; }
.td-ss .ss td:last-child { width: 2.5rem; text-align: right; }
.td-ss .ss td small { display: block; font-size: .8125rem; color: var(--fg-2); }
.td-ss .ann { display: inline-block; font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: .04em; }
.td-ss tr.struck .mvtxt { position: relative; color: var(--fg-2); }
.td-ss tr.struck .mvtxt::after { content: ""; position: absolute; left: 0; right: 0; top: .72em; height: 1.25px; background: var(--fg); transform-origin: 0 50%; transform: scaleX(var(--st, 1)); }
.td-ss .ss-key { margin-top: .85rem; font-size: .8125rem; color: var(--fg-2); }
.td-ss .ss-key b { font-family: var(--display); font-weight: 400; margin-right: .15rem; }
@media (max-width: 960px) {
  .td-score { grid-template-columns: 1fr; }
  .td-ss { margin-left: 0; }
  .td-ss-stage .drawing { right: -1rem; width: 80%; --sq: 2.75rem; }
}

/* ---------- What we do not promise ---------- */
.td-honest { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.td-terms-stage { position: relative; }
.td-terms-stage .drawing { left: -3rem; bottom: -3.5rem; width: 62%; height: 80%; --sq: 3.25rem; }
.td-terms { z-index: 1; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3rem); }
.td-terms li { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1.5rem 0; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; }
.td-terms .mk { width: .6rem; height: .6rem; border: 1px solid var(--fg); transform: translateY(-.1em) rotate(45deg); justify-self: start; }
.td-terms .rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.td-terms li:last-child .rule { display: none; }
@media (max-width: 960px) { .td-honest { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Close ---------- */
.td-cta { position: relative; overflow: hidden; padding-block: clamp(4rem, 10vw, 8rem) clamp(4rem, 8vw, 6rem); }
.td-cta-wrap { position: relative; }
.td-cta-wrap > .drawing { left: 0; right: 0; top: -12%; bottom: -12%; margin-inline: auto; width: min(64rem, 100%); --sq: clamp(3rem, 5vw, 4.25rem); }
.td-panel { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.td-panel h2 { font-size: clamp(1.75rem, 4.4vw, 3.5rem); line-height: 1.15; }
.td-panel > p { max-width: 30rem; margin: 1.5rem auto 0; color: var(--fg-2); font-size: 1.125rem; }
.td-panel .ctas { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.td-panel .td-candidates { margin-top: 1.75rem; font-size: 1rem; }
.td-panel .note { margin-top: .25rem; font-size: .875rem; }