/* The demo product page. Every chapter is composed on a 1440 by 900 frame and scaled to the window by --k (stage.ts),
   so the approved layouts hold at any desktop size. The town stays outside the frame: its canvas measures itself and
   a scaled parent would size it twice, so its width is worked out from --k below. Fonts, colours and sizes come from the app's own CSS (product.css). */
@font-face { font-family: "Inter Variable"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo Variable"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono Variable"; src: url("../fonts/mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root { --k: 1; }
html { scroll-padding-top: 0; scrollbar-gutter: auto; }
body { background: var(--color-ground); }
#ribbon { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .foot { position: relative; z-index: 1; }
.bar { position: fixed; inset: 0 0 auto 0; z-index: 30; padding: 16px 24px 0; }

.act { height: var(--span); position: relative; }
.stick { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.frame { position: absolute; left: 50%; top: 50%; width: 1440px; height: 900px; margin: -450px 0 0 -720px; transform: scale(var(--k)); }
/* The frame already scales, so the fluid type is held at its 1440 size: otherwise a wide window grows it twice and the headings wrap. */
.frame { --text-h1: 60.16px; }
.frame > * { position: absolute; }
.piece { width: 100%; }
.piece[inert] { pointer-events: none; }
.tag { z-index: 2; }

h2.display { font-size: var(--text-h1); }
.display { text-wrap: balance; }
h2.display, h1.display { text-shadow: 0 calc(var(--v, 0) * -.22px) 0 rgb(231 184 74 / .10), 0 calc(var(--v, 0) * -.44px) 0 rgb(231 184 74 / .05); }

/* Desk */
.hero-copy { left: 64px; top: 306px; width: 560px; will-change: transform, opacity; }
.hero-copy h1 { font-size: 84.8px; line-height: 1.02; }
.hero-copy p { margin-top: 22px; max-width: 26em; color: var(--color-muted); font-size: 17px; line-height: 1.5; }
.desk-copy { left: 26px; top: calc(96px + var(--desk-drop, 0px)); width: 1388px; opacity: 0; will-change: transform, opacity; }
.desk-fly { left: 0; top: calc(214px + var(--desk-drop, 0px)); width: 1440px; height: 640px; padding: 0 26px; transform-origin: 50% 50%; }
/* Laid out wider and set back, so the plate keeps the page's width and its whole height sits under the headline with room at its foot. */
.desk-fly .piece { --s: var(--desk-s, .85); width: calc(100% / var(--s)); height: 840px; overflow: hidden; transform: scale(var(--s)); transform-origin: 0 0; }
/* On the frame, not the plate: the plate starts tilted and half off the screen, and the figures on it need their tag from the first frame. */
.desk-tag { position: absolute; right: 26px; top: calc(178px + var(--desk-drop, 0px)); }

/* Train */
/* Sized like the Desk plate and never cropped. The town is a 2:1 picture whose scale follows its width (Stage.tsx), so a
   wide window used to zoom it in. Here the road (119px, not scaled) starts at frame y 92 under the bar, the plate ends at
   the Desk's 854, and the width is twice the height that leaves. */
/* The box starts 40px above the road: while the town is held back its fade mask clips at this box's edge, and the current rank's piece and its glow stand taller than the road. */
.town { --town-w: calc(1524px * var(--k) - 238px); position: absolute; left: calc(50% - var(--town-w) / 2 - 24px); top: -40px; width: calc(var(--town-w) + 48px); padding: 40px 24px 0; will-change: transform; }
/* Smaller than the other chapters' headlines, so it sits centred on the rank card's height and clear of the road's pieces. */
h2.train-copy { font-size: 48px; }
.train-copy { left: 64px; top: calc(128px + var(--train-drop, 0px)); width: 600px; will-change: transform, opacity; }
.train-card { right: 32px; top: calc(108px + var(--train-drop, 0px)); width: 672px; will-change: transform, opacity; }
.train-tag { right: calc((1440px - 1524px + 238px / var(--k)) / 2); bottom: 10px; }
[data-frame="train"] { pointer-events: none; }

/* Test: the Lab, then the Simulator, then one firm's rules, on one plate that fills the frame. Own wrappers, main's inner classes:
   main's layout wrappers (.noedge, .lab-grid, .stack-with-rail) carry viewport media queries that don't follow --k. The scenes are
   fixed to their view at one to one, because useFit reads a width the frame has already scaled and would size them twice. */
h2.display.tc-h, .test-copy h2.display { font-size: 48px; }
.test-copy { left: 46px; top: 134px; width: 470px; z-index: 3; will-change: transform, opacity; }
.test-copy-c { width: 1240px; white-space: nowrap; opacity: 0; }
.test-tag { left: auto; right: 32px; top: 124px; z-index: 4; }
.ctag { left: auto; right: 134px; top: 128px; font-size: 11px; letter-spacing: .02em; color: var(--color-muted); z-index: 4; }
.test-plate { left: 0; top: 0; width: 1440px; height: 900px; }
.test-plate .piece { height: 100%; }
.tc { position: relative; width: 1440px; height: 900px; --stack-hot: var(--color-gold-hi); text-shadow: none; }
.tc > * { position: absolute; }
.tc-rail { left: 46px; width: 434px; }
.tc-labrail { top: 280px; display: flex; flex-direction: column; gap: 20px; }
.tc-simrail { top: 244px; display: flex; flex-direction: column; gap: 20px; }
.tc-gap { min-width: 0; }
.tc-library { display: flex; flex-direction: column; gap: 10px; padding: 0; background: none; }
.tc-rows { max-height: none; overflow: visible; }
.tc-legend { margin-top: 2px; }
.tc-scene { left: 512px; width: 896px; }
.tc-lab { top: 96px; }
.tc-sim { top: 96px; }
html:not(.flat) .tc-scene .stack-scene { width: 896px; overflow: visible; --stack-scale: 1 !important; }
html:not(.flat) .tc-lab .stack-slab-placed { transform-origin: 162px 94px; }
html:not(.flat) .tc-sim .stack-slab-placed { transform-origin: 190px 108px; }
.tc-key { pointer-events: none; }
.tc-icon { width: 16px; height: 16px; }
.tc-icon-sm { width: 14px; height: 14px; }
.tc-press { align-self: flex-start; }
.tc-simrail .noedge-notch:has(~ .is-on) .noedge-notch-mark::after { background: var(--color-gold-hi); box-shadow: none; }
.tc-statement { left: 46px; top: 760px; width: 1348px; }
.tc-statement [data-disclaimer-full] { columns: 3; column-gap: 28px; }
.tc-foot { left: 46px; top: 858px; font-size: var(--text-caption); color: var(--color-label); }

/* The firm band */
.tc-band { --cut: 22px; left: 46px; top: 200px; width: 1348px; height: 548px; padding: 1px; background: linear-gradient(100deg, var(--color-gold-hi), color-mix(in srgb, var(--color-gold) 42%, transparent) 9%, color-mix(in srgb, white 14%, transparent) 40%, color-mix(in srgb, white 10%, transparent)); }
.tc-band-in { --cut: 21px; height: 100%; padding: 16px 24px; background: linear-gradient(165deg, color-mix(in oklch, var(--color-plate) 62%, var(--color-ground)), var(--color-ground)); }
.tc-band-head { display: flex; align-items: center; gap: 14px; }
.tc-picker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--color-plate); color: var(--color-bone); font-size: var(--text-body-sm); font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
.tc-band-what { color: var(--color-muted); font-size: var(--text-body-sm); }
.tc-replay { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: var(--text-body-sm); cursor: pointer; }
.tc-replay:hover { color: var(--color-bone); }
.tc-band-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; margin-top: 12px; }
.tc-band-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.tc-band-count { color: var(--color-bone); font-size: var(--text-body); font-weight: 600; }
.tc-legend-row { display: flex; gap: 16px; color: var(--color-muted); font-size: var(--text-caption); }
.tc-legend-row i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }
.tc-legend-row i.is-gold { background: var(--color-gold); }
.tc-legend-row i.is-dim { background: var(--color-label); }
.tc-legend-row i.is-bone { background: var(--color-bone); }
.tc-chart { margin-top: 10px; }
.tc-chart svg { display: block; overflow: visible; }
.tc-rule { stroke: rgb(255 255 255 / .22); stroke-width: 1; }
.tc-rule.is-target { stroke: var(--color-gold); stroke-opacity: .8; }
.tc-rule.is-floor { stroke-dasharray: 2 4; stroke: rgb(255 255 255 / .34); }
.tc-rule-t { fill: var(--color-label); font-size: 11px; }
.tc-rule-t.is-gold { fill: var(--color-gold-hi); }
.tc-path { fill: none; stroke-width: 1.25; stroke-linejoin: round; }
.tc-paths { filter: drop-shadow(0 0 3px rgb(231 184 74 / .28)); }
.tc-path.is-target { stroke: var(--color-gold-hi); stroke-opacity: .85; }
.tc-path.is-broke { stroke: var(--color-bone); stroke-opacity: .46; }
.tc-path.is-film { stroke: var(--color-muted); stroke-opacity: .5; }
.tc-hit { fill: var(--color-gold-hi); }
.tc-band-note { margin-top: 8px; color: var(--color-label); font-size: var(--text-caption); }
.tc-band-right { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tc-band-lead { align-items: center; }
.tc-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tc-fig { display: block; color: var(--color-bone); font-size: var(--text-h2); line-height: 1.1; font-weight: 600; }
.tc-fig.is-gold { color: var(--color-gold-hi); }
.tc-fig-n { display: block; margin-top: 2px; color: var(--color-label); font-size: var(--text-caption); }
.tc-rules-h { display: block; color: var(--color-bone); font-size: var(--text-body-sm); font-weight: 600; }
.tc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.tc-tile { padding: 6px 10px; background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.tc-tile span { display: block; color: var(--color-label); font-size: var(--text-micro); }
.tc-tile b { display: block; color: var(--color-bone); font-size: var(--text-body-sm); font-weight: 600; }
.tc-tile em { font-style: normal; font-weight: 400; color: var(--color-muted); font-size: var(--text-micro); }
.tc-days { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; color: var(--color-muted); font-size: var(--text-caption); }
.tc-days b { color: var(--color-bone); font-size: var(--text-body); font-weight: 600; }
.tc-all { color: var(--color-muted); font-size: var(--text-caption); line-height: 1.4; }
.tc-free { color: var(--color-label); font-size: var(--text-caption); }

/* Journal */
.j-window { left: 41px; top: 0; width: 868px; height: 900px; overflow: hidden; -webkit-mask: linear-gradient(transparent 86px, #000 100px, #000 872px, transparent 900px); mask: linear-gradient(transparent 86px, #000 100px, #000 872px, transparent 900px); }
.j-stack { width: 864px; margin: 0 2px; will-change: transform; }
.j-tag { position: absolute; left: 994px; top: 110px; }
.j-copy { left: 994px; top: 336px; width: 403px; will-change: transform, opacity; }
.j-copy h2 { margin-top: 16px; }
.j-copy p { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--color-muted); }
.j-rows { display: flex; flex-direction: column; gap: 16px; }
/* Only the month shows: the range row, the tiles, the year, the charts under the month, the day side and the patterns band stay out. */
[data-piece="journal"] [data-testid="journal-range"],
[data-piece="journal"] [data-testid="journal-grid"] > :nth-child(1),
[data-piece="journal"] [data-testid="journal-grid"] > :nth-child(2),
[data-piece="journal"] [data-testid="journal-grid"] > :nth-child(3) > :nth-child(n+2),
[data-piece="journal"] [data-testid="journal-grid"] > :nth-child(4),
[data-piece="journal"] [data-testid="journal-grid"] ~ * { display: none; }
[data-piece="journal"] [data-testid="journal-grid"] { grid-template-columns: minmax(0, 1fr); }
[data-piece="journal"] [data-testid="journal-grid"] > * { grid-column: auto; }

/* The gold panel, the moment to remember */
.gold { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 1px, rgb(60 38 0 / .05) 1px 2px, transparent 2px 3px), var(--metal, linear-gradient(135deg, #ffdf8a, #e7b84a 45%, #8c6418)); opacity: 0; will-change: clip-path; display: grid; place-items: center; text-shadow: none; }
.gold::after { content: ""; position: absolute; inset: 0 -50%; background: linear-gradient(104deg, transparent 36%, rgb(255 240 191 / .62) 50%, transparent 64%); transform: translate3d(var(--sweep, -75%), 0, 0); pointer-events: none; }
.gold-mark { z-index: 1; position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; background: #140f03; -webkit-mask: url("../media/mark.png") center / contain no-repeat; mask: url("../media/mark.png") center / contain no-repeat; will-change: transform; }
.gold-words { z-index: 1; position: relative; top: 52px; color: #140f03; font-size: calc(98.24px * var(--k)); opacity: 0; will-change: transform, opacity; }

/* Coach */
.hub { position: absolute; left: var(--hub-x, 22%); top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; transform: scale(var(--k)); opacity: 0; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wire { fill: none; stroke: var(--color-gold); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.node { position: absolute; padding: 8px 14px; background: var(--color-plate); color: var(--color-bone); font-size: var(--text-body-sm); font-weight: 600; white-space: nowrap; box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); opacity: 0; }
.coach-copy { left: 640px; top: 96px; width: 800px; opacity: 0; will-change: transform, opacity; }
.edge { left: 640px; top: 236px; width: 708px; height: 562px; padding: 1px; opacity: 0; background: linear-gradient(160deg, rgb(255 223 138 / .55), rgb(255 255 255 / .08) 40%, rgb(255 255 255 / .05)); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); will-change: transform, opacity; }
.edge-in { position: relative; width: 706px; height: 560px; overflow: hidden; background: var(--color-ground); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
/* The question typing: the composer lights as it does under focus, with a caret, because the plate is inert and can't take focus. */
[data-piece="coach"] form[data-typing] { box-shadow: inset 0 0 0 1px rgb(231 184 74 / .55); }
.caret { position: absolute; left: 0; top: 0; width: 2px; height: 22px; opacity: 0; pointer-events: none; will-change: transform; }
.caret::before { content: ""; display: block; width: 100%; height: 100%; background: var(--color-gold-hi, #ffdf8a); box-shadow: 0 0 8px rgb(231 184 74 / .8); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
[data-piece="coach"] [data-testid="coach-head"],
[data-piece="coach"] .coach-well,
[data-piece="coach"] [role="meter"] { display: none !important; }
/* The callsign reads in the Coach heading; the rank card keeps to the rank. */
[data-piece="rank"] .mt-0\.5.truncate.uppercase { display: none; }
/* The Coach's answer screen, held at frame pixels: the app sizes it from the window, which --k doesn't follow. */
html:not(.flat) [data-piece="coach"] .lg\:-mt-5 { margin: 0; max-width: none; padding-inline: 0 !important; }
html:not(.flat) [data-piece="coach"] .lg\:grid-cols-\[minmax\(0\,880fr\)_minmax\(0\,392fr\)\] { display: grid; grid-template-columns: minmax(0, 880fr) minmax(0, 392fr); gap: 24px; height: 628px; }
html:not(.flat) [data-piece="coach"] .mt-4 { margin-top: 12px; }
.coach-tag { left: auto; right: 72px; top: 815px; opacity: 0; z-index: 3; }
/* Wide: the whole screen across the frame, under one line of heading. */
html:not(.flat) h2.coach-copy { left: 72px; top: max(100px, calc(96px / var(--k))); width: 1300px; font-size: 44px; white-space: nowrap; }
html:not(.flat) .coach-copy br { display: none; }
.coach-copy-hub { left: 660px; top: 341px; width: 760px; opacity: 0; will-change: transform, opacity; }
html.flat .coach-copy-hub { display: none; }
html .edge { left: 72px; top: 174px; width: 1296px; height: 680px; padding: 0; background: none; clip-path: none; }
html .edge-in { width: 1296px; height: 680px; overflow: visible; background: none; clip-path: none; }
/* Side: the answer alone beside the six branches, in the old spot. */
/* The reference has no check-in card in the tray. */
[data-piece="coach"] .tray-checkin { display: none; }
/* The tray spaces itself from the window; here it keeps the spacing it has at 1440 by 900 at every size. */
html:not(.flat) [data-piece="coach"] .coach-tray-side { --tray-gap: 10px; --tray-pad-y: 20px; --tray-pad-x: 28px; }
html:not(.flat) [data-piece="coach"] .tray-links { gap: 6px; }
html:not(.flat) [data-piece="coach"] .coach-tray-side .tray-recent { max-height: 120px; }
/* The app's light is fixed to the window, but a transformed frame holds it to the plate, so it is given the window back in frame pixels. */
html:not(.flat) [data-piece="coach"] .cf-field { inset: auto; left: calc((1440px - 100vw / var(--k)) / 2 - 72px); top: calc((900px - 100svh / var(--k)) / 2 - 174px); width: calc(100vw / var(--k)); height: calc(100svh / var(--k)); }

/* Plans and the foot */
.plans { position: relative; z-index: 1; min-height: 100svh; }
#plans-root { text-shadow: none; }
.foot { max-width: 1180px; margin: 0 auto; padding: 48px 24px 64px; color: var(--color-label); font-size: var(--text-caption); line-height: 1.5; }
.foot p { margin-top: 8px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.foot a { color: var(--color-muted); text-decoration: underline; text-decoration-color: rgb(255 255 255 / .2); text-underline-offset: 2px; }

/* Reduced motion or a narrow window: the same chapters as a plain page */
html.flat .act { height: auto; }
html.flat .stick { position: static; height: auto; overflow: visible; padding: 112px 16px 48px; display: flex; flex-direction: column; gap: 24px; }
html.flat .frame { position: static; width: auto; height: auto; margin: 0; transform: none; display: flex; flex-direction: column; gap: 24px; }
html.flat .frame > * { position: static; width: auto; height: auto; opacity: 1; transform: none; clip-path: none; text-align: left; }
html.flat .town { position: static; width: auto; margin: 0; padding: 0; }
html.flat .gold, html.flat .hub, html.flat .hero-copy { display: none; }
html.flat .desk-fly .piece { width: auto; height: auto; overflow: visible; transform: none; }
html.flat .j-window { -webkit-mask: none; mask: none; overflow: visible; }
html.flat .j-stack { width: auto; margin: 0; }
html.flat .edge-in { width: auto; height: auto; }
html.flat .caret { display: none; }
/* Without motion the chapters read as a page: words first, then the plate, and the tag stays in view while its figures do. */
html.flat .frame > .tag { position: sticky; top: 96px; align-self: flex-end; z-index: 3; }
/* The town sits outside Train's frame, so the frame dissolves here and the tag stays in view down the whole chapter. */
html.flat [data-frame="train"] { display: contents; }
html.flat .desk-copy, html.flat .train-copy { order: -2; }
html.flat .frame > .tag { order: -1; }
html.flat .town, html.flat .test-plate, html.flat .j-window { order: 1; }
html.flat .test-copy { position: static; }
html.flat .test-plate .piece { height: auto; }
/* Flat: each head sits with the part it names, so the plate's insides join the frame's own column. */
html.flat .test-plate, html.flat .test-plate .piece, html.flat .tc { display: contents; }
html.flat .frame > .tag { right: auto; }
html.flat .test-copy-c { white-space: normal; }
html.flat [data-test-copy] { order: 1; }
html.flat .tc-labrail { order: 2; }
html.flat .tc-lab { order: 3; }
html.flat [data-test-copy-b] { order: 4; }
html.flat .tc-simrail { order: 5; }
html.flat .tc-sim { order: 6; }
html.flat [data-test-copy-c] { order: 7; }
html.flat .ctag { order: 8; }
html.flat .tc-band { order: 9; }
html.flat .tc-statement { order: 10; }
html.flat .tc-foot { order: 11; }
html.flat .tc > * { position: static; width: auto; }
html.flat .tc-band-body { grid-template-columns: minmax(0, 1fr); }
html.flat .tc-band { height: auto; }
html.flat .tc-statement [data-disclaimer-full] { columns: auto; }
html.flat .ctag { position: static; }