/* Polyment landing v2 · Home v7, Leo's board (Step 22, 31 Oct 2026; Ledger PL-65 to PL-70).
   The home page's hero as the approved animatic v05 plays it, with the words Home v6 carries: Leo at his desk with
   his back to you, writing; he turns, startled; stands by his desk and says hello in a speech bubble; a step closer
   he writes the line at his height and it lifts into place; in front of his desk he draws the Codex in white; voila,
   the map lights from You to the goal. 11.8 s, played once, then still.
   Three compositions, one per range: the phone's (drawn at 390), the tablet's (800) and the desktop's (1440). Each is
   laid out in its own pixels and scaled to the width by the page (the stage's zoom), so Leo, the map and the words
   keep their places. Default styles are the finished, still frame: under reduced motion, or the "still" tweak, the
   animations simply stop. Pause holds everything; so do a hidden tab, the hero off screen, an open join sheet and a
   focused email field. Every colour, face and timing below is a system token, except the moment's own clock.
   The site's build (F-428): this file is the canvas's home-v7.css as it stands; js/home-v7.js only sets the
   stage's zoom and the hero's is-paused / is-held classes, so the moment itself is CSS from the first paint. */

.v7-hero { position: relative; overflow: hidden; }
.v7-stage { position: relative; margin-inline: auto; }
.v7-board { position: relative; width: 100%; }
.v7-pic, .v7-leo { position: absolute; inset: 0; pointer-events: none; }
.v7-map, .v7-draft { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.v7-desk, .v7-b { position: absolute; display: block; max-width: none; }
.v7-b img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }

/* The line Leo writes: the page's h1, the same words as Home v6, one sentence a line. */
.v7-hero .v7-h1 { color: var(--on-navy); max-width: none; transform-origin: 0 0; white-space: nowrap; }
.v7-hero .v7-l { width: fit-content; }
.v7-hero .v7-sub { color: var(--on-navy-soft); }

/* His hello: on-navy with a navy label (15.0:1), in Caveat, his handwriting. Hidden at rest. */
.v7-bubble { position: absolute; opacity: 0; }
.v7-bubble__tail { position: absolute; left: 0; top: 0; overflow: visible; }
.v7-bubble__tail polygon { fill: var(--on-navy); }
.v7-bubble__box { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--on-navy); color: var(--navy); font-family: var(--font-hand); font-weight: 600; line-height: 1.05; }
.v7-bl { display: block; width: fit-content; white-space: nowrap; }

/* Leo's own Codex, drawn in white before the map lights; it stays on as a faint sketch. */
.v7-dl { stroke: var(--on-navy); stroke-linecap: round; opacity: 0.35; }
.v7-dn { fill: none; stroke: var(--on-navy); opacity: 0; transform-box: fill-box; transform-origin: center; }
.v7-node { transform-box: fill-box; transform-origin: center; }

/* The drawings: B6 at rest; the others are cuts in the moment. */
.v7-b1, .v7-b2, .v7-b3, .v7-b4, .v7-b5 { opacity: 0; }
.v7-b3 .v7-piece { transform-origin: 15.021% 32.026%; }
.v7-b4 .v7-piece { transform-origin: 15.11% 30.8%; }
.v7-b5 .v7-piece { transform-origin: 36.309% 45.986%; }
.v7-b6 .v7-piece { transform-origin: 28.959% 44.913%; }

/* Pause: a secondary icon button, there only while something moves. */
.v7-hero .v7-pause { position: absolute; z-index: 7; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; visibility: hidden; }
.v7-hero .v7-pause .pm-icon { width: 18px; height: 18px; }
.v7-hero .v7-i-play { display: none; }
.v7-hero.is-paused .v7-i-play { display: inline-block; }
.v7-hero.is-paused .v7-i-pause { display: none; }

/* ---------- the phone, below 641 px (drawn at 390) ---------------------------------------------------- */
.v7-text { padding: 0 20px 28px; }   /* static, so the h1 above sits on the stage's board */
.v7-hero .v7-h1 { position: absolute; left: 20px; top: 24px; z-index: 6; }
.v7-hero .v7-sub { margin-top: 14px; }
@media (max-width: 640px) {
  .v7-stage { width: 390px; }
  .v7-board { height: 500px; }
  .v7-hero .v7-h1 { font-size: 28px; line-height: 1.04; --v7-wx: -1px; --v7-wy: 209px; --v7-ws: 0.6429; }
  .v7-hero .v7-sub { font-size: 17px; }
  .v7-desk { left: 180px; top: 300px; width: 198px; height: 194.16px; }
  .v7-b1 { left: 179.33px; top: 221.83px; width: 129.24px; height: 251.98px; }
  .v7-b2 { left: 181.23px; top: 221.94px; width: 135.17px; height: 253.55px; }
  .v7-b3 { left: 158.83px; top: 223.6px; width: 160.32px; height: 277.16px; }
  .v7-b4 { left: 187.67px; top: 168.64px; width: 197.35px; height: 332.88px; }
  .v7-b5 { left: 166.56px; top: 223.49px; width: 186.29px; height: 277.33px; }
  .v7-b6 { left: 170.34px; top: 223.6px; width: 187.71px; height: 277.29px; }
  .v7-pause { left: 330px; top: 16px; }
  .v7-leo { filter: url(#v7-ring-p); }
  .v7-map--d, .v7-draft--d, .v7-bubble--d { display: none; }
  .v7-map--t, .v7-draft--t, .v7-bubble--t { display: none; }
}
/* ---------- tablets, 641 to 980 px (drawn at 800): the desktop's board, the sub and buttons under it --- */
@media (min-width: 641px) and (max-width: 980px) {
  .v7-text { padding: 0 40px 32px; }
  .v7-hero .v7-h1 { left: 40px; top: 36px; }
  .v7-hero .v7-sub { margin-top: 18px; max-width: 30em; }
  .v7-stage { width: 800px; }
  .v7-board { height: 540px; }
  .v7-hero .v7-h1 { font-size: 44px; line-height: 1.04; --v7-wx: 10px; --v7-wy: 142px; --v7-ws: 0.7273; }
  .v7-hero .v7-sub { font-size: 18px; }
  .v7-desk { left: 510.5px; top: 280.6px; width: 250px; height: 245.16px; }
  .v7-b1 { left: 509.65px; top: 181.9px; width: 163.18px; height: 318.16px; }
  .v7-b2 { left: 512.06px; top: 182.04px; width: 170.67px; height: 320.14px; }
  .v7-b3 { left: 425.19px; top: 182.45px; width: 201.89px; height: 349.01px; }
  .v7-b4 { left: 352.66px; top: 95.97px; width: 258.87px; height: 436.65px; }
  .v7-b5 { left: 444.55px; top: 182.32px; width: 234.59px; height: 349.23px; }
  .v7-b6 { left: 449.32px; top: 182.45px; width: 236.37px; height: 349.18px; }
  .v7-pause { left: 732px; top: 16px; }
  .v7-leo { filter: url(#v7-ring-t); }
  .v7-map--d, .v7-draft--d, .v7-bubble--d { display: none; }
  .v7-map--p, .v7-draft--p, .v7-bubble--p { display: none; }
}
/* ---------- desktop, 981 px and up (drawn at 1440): the words on the board --------------------------- */
@media (min-width: 981px) {
  .v7-text { position: absolute; left: 120px; top: 82px; width: 640px; padding: 0; }
  .v7-hero .v7-h1 { position: relative; left: 0; top: 0; }
  .v7-hero .v7-sub { margin-top: 20px; max-width: 28em; }
  .v6-page .v7-text .v6-hero__form { display: block; width: 100%; max-width: 560px; margin-top: 30px; }
  .v6-page .v7-text .v6-act { margin-top: 4px; grid-template-columns: auto; grid-template-areas: "micro" "peek"; row-gap: 20px; }
  .v6-page .v7-text .v6-join { display: none; }
  .v7-stage { width: 1440px; }
  .v7-board { height: 712px; }
  .v7-hero .v7-h1 { font-size: 72px; line-height: 1.04; --v7-wx: 94px; --v7-wy: 147px; --v7-ws: 0.8056; }
  .v7-hero .v7-sub { font-size: 20px; }
  .v7-desk { left: 1080px; top: 376px; width: 335px; height: 328.51px; }
  .v7-b1 { left: 1078.86px; top: 243.74px; width: 218.66px; height: 426.33px; }
  .v7-b2 { left: 1082.08px; top: 243.93px; width: 228.7px; height: 428.98px; }
  .v7-b3 { left: 966.02px; top: 244.56px; width: 270.76px; height: 468.09px; }
  .v7-b4 { left: 767.39px; top: 128.57px; width: 347.19px; height: 585.62px; }
  .v7-b5 { left: 991.52px; top: 244.38px; width: 314.63px; height: 468.38px; }
  .v7-b6 { left: 997.91px; top: 244.56px; width: 317.02px; height: 468.32px; }
  .v7-pause { left: 1372px; top: 644px; }
  .v7-leo { filter: url(#v7-ring-d); }
  .v7-map--t, .v7-draft--t, .v7-bubble--t { display: none; }
  .v7-map--p, .v7-draft--p, .v7-bubble--p { display: none; }
}

/* ---------- the moment: 11.8 s, once ------------------------------------------------------------------ */
.v7-b1 { animation: v7-cut-b1 11.8s linear both; }
.v7-b2 { animation: v7-cut-b2 11.8s linear both; }
.v7-b3 { animation: v7-cut-b3 11.8s linear both; }
.v7-b4 { animation: v7-cut-b4 11.8s linear both; }
.v7-b5 { animation: v7-cut-b5 11.8s linear both; }
.v7-b6 { animation: v7-cut-b6 11.8s linear both; }
.v7-b3 .v7-piece { animation: v7-wave 0.75s ease-in-out 2.55s 3 both; }
.v7-b4 .v7-piece { animation: v7-strokes 1.5s linear 5.3s both; }
.v7-b5 .v7-piece { animation: v7-sketch 1.8s linear 7.4s both; }
.v7-b6 .v7-piece { animation: v7-voila 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 9.6s both; }
.v7-bubble { animation: v7-bubble 11.8s linear both; }
.v7-bl1 { animation: v7-write 0.25s linear 2.75s both; }
.v7-bl2 { animation: v7-write 0.25s linear 2.97s both; }
.v7-hero .v7-l1 { animation: v7-write 0.65s linear 5.3s both; }
.v7-hero .v7-l2 { animation: v7-write 0.75s linear 6.05s both; }
.v7-hero .v7-h1 { animation: v7-lift 0.6s var(--ease-draw) 6.8s both; }
.v7-hero .v7-rule { animation: v7-rule 0.45s var(--ease-standard) 7.4s both; }
.v7-dl { animation-name: v7-dash, v7-sketch-fade; animation-timing-function: linear, var(--ease-draw); animation-fill-mode: both; }
.v7-dn { animation-name: v7-grow, v7-out; animation-duration: 0.3s, 0.4s; animation-timing-function: var(--ease-settle), linear; animation-fill-mode: both; }
.v7-map .pm-cx-edges { animation: v7-in 0.6s var(--ease-draw) 9.7s both; }
.v7-map .pm-cx-halo { animation: v7-in 0.6s var(--ease-draw) 11s both; }
.v7-map .pm-cx-walked path { animation: v7-dash 1.2s var(--ease-draw) 10s both; }
.v7-map .v7-node { animation-name: v7-pop; animation-duration: var(--dur-node); animation-timing-function: var(--ease-settle); animation-fill-mode: both; }
.v7-hero .v7-pause { animation: v7-there 11.8s step-end both; }
@media (min-width: 981px) {
  .v6-page .v7-text .v7-sub, .v6-page .v7-text .v6-hero__form, .v6-page .v7-text .v6-act { animation: v7-in-hidden 0.35s var(--ease-draw) 7.2s both; }
}

@keyframes v7-cut-b1 { 0%, 11.856% { opacity: 1; } 11.864%, 100% { opacity: 0; } }
@keyframes v7-cut-b2 { 0%, 11.856% { opacity: 0; } 11.864%, 20.331% { opacity: 1; } 20.339%, 100% { opacity: 0; } }
@keyframes v7-cut-b3 { 0%, 20.331% { opacity: 0; } 20.339%, 44.059% { opacity: 1; } 44.068%, 100% { opacity: 0; } }
@keyframes v7-cut-b4 { 0%, 44.059% { opacity: 0; } 44.068%, 61.008% { opacity: 1; } 61.017%, 100% { opacity: 0; } }
@keyframes v7-cut-b5 { 0%, 61.008% { opacity: 0; } 61.017%, 81.347% { opacity: 1; } 81.356%, 100% { opacity: 0; } }
@keyframes v7-cut-b6 { 0%, 81.347% { opacity: 0; } 81.356%, 100% { opacity: 1; } }
@keyframes v7-wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } }
@keyframes v7-strokes { 0% { transform: rotate(-3deg); } 1.67% { transform: rotate(-0.95deg); } 3.33% { transform: rotate(0.7deg); } 5% { transform: rotate(1.64deg); } 6.67% { transform: rotate(1.73deg); } 8.33% { transform: rotate(0.98deg); } 10% { transform: rotate(-0.38deg); } 11.67% { transform: rotate(-2.01deg); } 13.33% { transform: rotate(-3.5deg); } 15% { transform: rotate(-4.49deg); } 16.67% { transform: rotate(-4.69deg); } 18.33% { transform: rotate(-4.03deg); } 20% { transform: rotate(-2.58deg); } 21.67% { transform: rotate(-0.63deg); } 23.33% { transform: rotate(1.47deg); } 25% { transform: rotate(3.29deg); } 26.67% { transform: rotate(4.5deg); } 28.33% { transform: rotate(4.87deg); } 30% { transform: rotate(4.39deg); } 31.67% { transform: rotate(3.2deg); } 33.33% { transform: rotate(1.62deg); } 35% { transform: rotate(0.03deg); } 36.67% { transform: rotate(-1.16deg); } 38.33% { transform: rotate(-1.64deg); } 40% { transform: rotate(-1.27deg); } 41.67% { transform: rotate(-0.06deg); } 43.33% { transform: rotate(0deg); } 45% { transform: rotate(0deg); } 46.67% { transform: rotate(0deg); } 48.33% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } 51.67% { transform: rotate(-0.98deg); } 53.33% { transform: rotate(0.64deg); } 55% { transform: rotate(1.55deg); } 56.67% { transform: rotate(1.6deg); } 58.33% { transform: rotate(0.83deg); } 60% { transform: rotate(-0.56deg); } 61.67% { transform: rotate(-2.23deg); } 63.33% { transform: rotate(-3.75deg); } 65% { transform: rotate(-4.76deg); } 66.67% { transform: rotate(-5deg); } 68.33% { transform: rotate(-4.36deg); } 70% { transform: rotate(-2.95deg); } 71.67% { transform: rotate(-1.03deg); } 73.33% { transform: rotate(1.04deg); } 75% { transform: rotate(2.83deg); } 76.67% { transform: rotate(4deg); } 78.33% { transform: rotate(4.35deg); } 80% { transform: rotate(3.84deg); } 81.67% { transform: rotate(2.62deg); } 83.33% { transform: rotate(1deg); } 85% { transform: rotate(-0.62deg); } 86.67% { transform: rotate(-1.84deg); } 88.33% { transform: rotate(-2.35deg); } 90% { transform: rotate(-2deg); } 91.67% { transform: rotate(-0.83deg); } 93.33% { transform: rotate(0.96deg); } 95% { transform: rotate(3.03deg); } 96.67% { transform: rotate(4.95deg); } 98.33% { transform: rotate(6.36deg); } 100% { transform: rotate(0deg); } }
@keyframes v7-sketch { 0% { transform: rotate(0deg); } 1.39% { transform: rotate(2deg); } 2.78% { transform: rotate(3.46deg); } 4.17% { transform: rotate(4deg); } 5.56% { transform: rotate(3.46deg); } 6.94% { transform: rotate(2deg); } 8.33% { transform: rotate(0deg); } 9.72% { transform: rotate(-2deg); } 11.11% { transform: rotate(-3.46deg); } 12.5% { transform: rotate(-4deg); } 13.89% { transform: rotate(-3.46deg); } 15.28% { transform: rotate(-2deg); } 16.67% { transform: rotate(0deg); } 18.06% { transform: rotate(2deg); } 19.44% { transform: rotate(3.46deg); } 20.83% { transform: rotate(4deg); } 22.22% { transform: rotate(3.46deg); } 23.61% { transform: rotate(2deg); } 25% { transform: rotate(0deg); } 26.39% { transform: rotate(-2deg); } 27.78% { transform: rotate(-3.46deg); } 29.17% { transform: rotate(-4deg); } 30.56% { transform: rotate(-3.46deg); } 31.94% { transform: rotate(-2deg); } 33.33% { transform: rotate(0deg); } 34.72% { transform: rotate(2deg); } 36.11% { transform: rotate(3.46deg); } 37.5% { transform: rotate(4deg); } 38.89% { transform: rotate(3.46deg); } 40.28% { transform: rotate(2deg); } 41.67% { transform: rotate(0deg); } 43.06% { transform: rotate(-2deg); } 44.44% { transform: rotate(-3.46deg); } 45.83% { transform: rotate(-4deg); } 47.22% { transform: rotate(-3.46deg); } 48.61% { transform: rotate(-2deg); } 50% { transform: rotate(0deg); } 51.39% { transform: rotate(2deg); } 52.78% { transform: rotate(3.46deg); } 54.17% { transform: rotate(4deg); } 55.56% { transform: rotate(3.46deg); } 56.94% { transform: rotate(2deg); } 58.33% { transform: rotate(0deg); } 59.72% { transform: rotate(-2deg); } 61.11% { transform: rotate(-3.46deg); } 62.5% { transform: rotate(-4deg); } 63.89% { transform: rotate(-3.46deg); } 65.28% { transform: rotate(-2deg); } 66.67% { transform: rotate(0deg); } 68.06% { transform: rotate(2deg); } 69.44% { transform: rotate(3.46deg); } 70.83% { transform: rotate(4deg); } 72.22% { transform: rotate(3.46deg); } 73.61% { transform: rotate(2deg); } 75% { transform: rotate(0deg); } 76.39% { transform: rotate(-2deg); } 77.78% { transform: rotate(-3.46deg); } 79.17% { transform: rotate(-4deg); } 80.56% { transform: rotate(-3.46deg); } 81.94% { transform: rotate(-2deg); } 83.33% { transform: rotate(0deg); } 84.72% { transform: rotate(2deg); } 86.11% { transform: rotate(3.46deg); } 87.5% { transform: rotate(4deg); } 88.89% { transform: rotate(3.46deg); } 90.28% { transform: rotate(2deg); } 91.67% { transform: rotate(0deg); } 93.06% { transform: rotate(-2deg); } 94.44% { transform: rotate(-3.46deg); } 95.83% { transform: rotate(-4deg); } 97.22% { transform: rotate(-3.46deg); } 98.61% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } }
@keyframes v7-voila { from { transform: rotate(-12deg); } to { transform: rotate(0deg); } }
@keyframes v7-bubble { 0%, 22.034% { opacity: 0; transform: scale(0.85); animation-timing-function: var(--ease-settle); }
  24.153% { opacity: 1; transform: scale(1); } 42.373% { opacity: 1; transform: scale(1); } 44.068%, 100% { opacity: 0; transform: scale(1); } }
@keyframes v7-write { from { clip-path: inset(-25% 100% -25% 0); } to { clip-path: inset(-25% 0 -25% 0); } }
@keyframes v7-lift { from { transform: translate(var(--v7-wx), var(--v7-wy)) scale(var(--v7-ws)); color: rgba(238, 242, 247, 0.86); }
  to { transform: none; color: var(--on-navy); } }
@keyframes v7-rule { from { text-decoration-color: transparent; } to { text-decoration-color: var(--ember); } }
@keyframes v7-dash { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes v7-sketch-fade { from { opacity: 1; } to { opacity: 0.35; } }
@keyframes v7-grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes v7-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes v7-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v7-in-hidden { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@keyframes v7-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes v7-there { 0% { visibility: visible; } 100% { visibility: hidden; } }

/* Held: Pause, a hidden tab, the hero off screen, the join sheet open or an email field in use. */
.v7-hero.is-paused *, .v7-hero.is-held * { animation-play-state: paused !important; }
/* Still: reduced motion, or the board's "still" tweak. Everything is in its finished state. */
@media (prefers-reduced-motion: reduce) {
  .v7-hero *, .v7-hero *::before, .v7-hero *::after { animation: none !important; }
}
.v7-hero.is-still *, .v7-hero.is-still *::before, .v7-hero.is-still *::after { animation: none !important; }