/* Polyment landing · Home v6, the map, lit (canvas Step 20, 19 Oct 2026, PL-53), as Home v7 carries it.
   Copied from the canvas's home-v6.css; the build drops only what was the canvas's own: the board marks
   (.v6-mark), the placeholder posters, the 390 phone box and the A / B / C board, and the v6 hero's grid and
   map, which Home v7 replaced with Leo's board (css/home-v7.css). Built only from the approved system
   "Polyment — the map, lit": css/map-lit/tokens.css and css/map-lit/components.css. This file lays the page
   out; every colour, size, radius, shadow and timing is a system token.
   One ground, navy, from the header to the footer. Sections are told apart by what they hold and by their
   navy-soft cards and plates, never by a change of ground. Phone first: the base rules are the 390 page;
   .v6-page widens it at 641 px and 981 px (the system's bp-640 and bp-980). */

/* ---------- the ground --------------------------------------------------------------------------- */
.v6 { --hh: 64px; --sec: var(--space-12); position: relative; min-height: 100%; background-color: var(--navy); color: var(--on-navy);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  /* the system's one gradient, the navy radial, behind the opening only, ending in navy so the ground below stays one navy */
  background-image: radial-gradient(120% 70% at 50% 0%, var(--navy-lift) 0%, var(--navy) 58%); background-repeat: no-repeat; background-size: 100% 1100px; }
.v6 *, .v6 *::before, .v6 *::after { box-sizing: border-box; }
.v6 :where(h1, h2, h3, p, ol, ul, figure, blockquote, fieldset) { margin: 0; }
.v6 :where(ol, ul) { padding: 0; list-style: none; }
.v6 :where(img) { display: block; max-width: 100%; }
.v6 ::selection { background: var(--ember); color: var(--navy); }
.v6-wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.v6-sec { padding-block: var(--sec); }
.v6-l { display: block; }                                   /* one sentence a line; a long one balances inside its own line */
.v6-h2 { color: var(--on-navy); }
.v6-soft { color: var(--on-navy-soft); }

/* ---------- 1 · the opening's words and buttons (Leo's board itself is css/home-v7.css) ------------ */
.v6-h1 { color: var(--on-navy); }
.v6-sub { margin-top: 14px; max-width: 34ch; color: var(--on-navy-soft); text-wrap: pretty; }
.v6-act { display: grid; width: 100%; gap: 10px; margin-top: 24px; }
.v6-act .pm-btn--secondary .pm-icon, .v6-peek .pm-icon { width: 16px; height: 16px; }
.v6-micro { margin: 0; color: var(--on-navy-soft); text-align: center; }
.v6-micro .v6-nw { white-space: nowrap; }
.v6-hero__form { display: none; }

/* ---------- 3 · "Picture the email." --------------------------------------------------------- */
.v6-email { display: grid; gap: var(--space-8); align-items: center; }
.v6-email__plate { display: none; }
.v6-letter { position: relative; margin-top: var(--space-6); max-width: 620px; padding: 26px 24px 28px; }
.v6-letter__text { font: 500 clamp(20px, 15.6px + 0.75vw, 26px)/1.35 var(--font-sans); color: var(--on-navy); }
.v6-letter__line { display: grid; justify-content: start; }
.v6-letter__line > span { grid-area: 1 / 1; white-space: nowrap; }
.v6-letter__size { visibility: hidden; padding-inline-end: 6px; font-weight: 700; }
.v6-letter__typed { font-weight: 700; color: var(--ember); }      /* the goal, as the map draws it: ember, 6.7:1 on the card */
.v6-caret { display: none; width: 2px; height: 1em; margin-inline-start: 2px; vertical-align: -0.14em; background: currentColor; }
.v6-letter.is-typing .v6-caret { display: inline-block; }
.v6-letter .pm-btn--icon { position: absolute; inset-inline-end: 8px; bottom: 8px; }
.v6-letter .pm-btn--icon .pm-icon { width: 18px; height: 18px; }
.v6-letter .v6-i-play { display: none; }
.v6-letter.is-paused .v6-i-play { display: inline-block; }
.v6-letter.is-paused .v6-i-pause { display: none; }
.v6-letter:not(.is-typing):not(.is-paused) .pm-btn--icon { display: none; }
.v6-after { margin-top: var(--space-5); max-width: 40ch; color: var(--on-navy-soft); text-wrap: pretty; }

/* ---------- 4 · the four parts ---------------------------------------------------------------- */
.v6-parts__list { display: grid; gap: var(--space-10); margin-top: var(--space-8); }
.v6-part { display: grid; gap: var(--space-5); align-items: center; }
.v6-part__screen { display: grid; place-items: center; min-height: 248px; padding: 18px 16px; }
.v6-part__screen--map { padding: 14px 10px; }
.v6-part__screen--map > svg { width: 100%; height: auto; }
.v6-part__text { display: grid; gap: var(--space-2); max-width: 34rem; }
.v6-eyebrow { color: var(--on-navy-soft); }
.v6-part__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.v6-part__title { color: var(--on-navy); }
.v6-part__line { color: var(--on-navy-soft); text-wrap: pretty; }
.v6-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: var(--space-8); font: 600 16px/1.3 var(--font-sans); }
.v6-more .pm-icon { width: 18px; height: 18px; }

/* The drawings of the product inside the plates: the product's own parts, small, on navy. */
.v6-mock { width: 100%; max-width: 340px; display: grid; gap: 10px; }
.v6-mock__card { display: grid; gap: 10px; padding: 14px 14px 16px; background: var(--navy-soft); color: var(--on-navy);
  border: 1px solid var(--navy-line); border-radius: var(--r-lg); }
.v6-mock__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.v6-mock__eyebrow { margin: 0; font: 700 13px/1.3 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-soft); }
.v6-mock__meta { font: 600 14px/1 var(--font-sans); color: var(--on-navy-soft); font-variant-numeric: tabular-nums; }
.v6-tasks { display: grid; gap: 6px; }
.v6-tasks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 42px; padding: 7px 12px;
  border-radius: var(--r-md); background: var(--navy); }
.v6-tasks .pm-todo { border-color: var(--on-navy-dim); }
.v6-task__name { font: 600 15px/1.3 var(--font-sans); color: var(--on-navy); }
.v6-tasks li.is-done .v6-task__name { color: var(--on-navy-soft); }
.v6-task__min { font: 500 14px/1 var(--font-sans); color: var(--on-navy-soft); font-variant-numeric: tabular-nums; }
.v6-opp { gap: 6px; }
.v6-opp__who { margin: 0; font: 600 15px/1.35 var(--font-sans); color: var(--on-navy); }
.v6-opp__fit { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font: 600 14px/1.3 var(--font-sans); }
.v6-opp__fit .pm-icon { width: 18px; height: 18px; }
.v6-opp__fit.is-yes { color: var(--on-navy); }
.v6-opp__fit.is-not { color: var(--on-navy-soft); }
.v6-ring { width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed var(--on-navy-dim); flex: none; }
.v6-cv__title { margin: 0; font: 600 18px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--on-navy); }
.v6-cv__empty { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--on-navy-soft); }
.v6-cv__empty strong { display: block; font: 600 16px/1.4 var(--font-sans); color: var(--on-navy); }
.v6-cv__slot { height: 30px; border-radius: var(--r-sm); border: 1px dashed var(--on-navy-dim); opacity: 0.6; }

/* ---------- 5 · the clips ----------------------------------------------------------------------- */
.v6-intro { margin-top: var(--space-3); max-width: 40ch; color: var(--on-navy-soft); }
.v6-plates { display: grid; gap: var(--space-8); margin-top: var(--space-8); }

/* ---------- 6 · the founding charter, with the form ------------------------------------------ */
.v6-charter { display: grid; gap: var(--space-8); }
.v6-charter__main { display: grid; min-width: 0; max-width: 640px; }
.v6-charter__sub { margin-top: var(--space-3); max-width: 34ch; color: var(--on-navy-soft); text-wrap: pretty; }
.v6-articles { display: grid; gap: var(--space-4); margin-top: var(--space-6); padding: 22px 22px 24px; }
.v6-articles li { display: grid; gap: 4px; }
.v6-articles .v6-article-n { color: var(--on-navy-soft); }
.v6-articles p:not(.v6-article-n) { font: 400 17px/1.55 var(--font-sans); color: var(--on-navy); }
.v6-opening { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
.v6-opening__lead { color: var(--on-navy-soft); }
.v6-fields { display: grid; gap: 2px; font: 600 clamp(19px, 17.5px + 0.4vw, 23px)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--on-navy); }
.v6-charter__form { margin-top: var(--space-8); }
.v6-charter__lines { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.v6-charter__lines p { font: 500 14px/1.55 var(--font-sans); color: var(--on-navy-soft); }
.v6-charter__leo { display: none; }

/* The forms: phones and tablets stack the field and the button; the chips say Quantum and Other short. */
.v6 .pm-form__row { flex-direction: column; align-items: stretch; }
.v6 .pm-form__row .pm-btn { width: 100%; }
.v6-chip-short { display: none; }
@media (max-width: 420px) { .v6-chip-long { display: none; } .v6-chip-short { display: inline; } }

/* ---------- 7 · the footer ---------------------------------------------------------------------- */
.v6 .pm-site-footer__in { padding-bottom: calc(var(--space-8) + 72px); }   /* room above the phone's sticky bar */

/* ---------- 641 px and up: tablets ------------------------------------------------------------- */
@media (min-width: 641px) {
  .v6-page { --hh: var(--header); --sec: var(--space-16); }
  .v6-page .v6-sub { margin-top: 18px; max-width: 30em; }
  .v6-page .v6-act { grid-template-columns: auto auto; grid-template-areas: "join peek" "micro micro"; justify-content: start; align-items: center; column-gap: 12px; row-gap: 12px; width: auto; }
  .v6-page .v6-join { grid-area: join; }
  .v6-page .v6-peek { grid-area: peek; }
  .v6-page .v6-micro { grid-area: micro; text-align: start; }
  .v6-page .v6-part { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 80px); }
  .v6-page .v6-part:nth-child(even) .v6-part__plate { order: 2; }
  .v6-page .v6-parts__list { gap: var(--space-16); }
  .v6-page .v6-articles { padding: 28px 30px 30px; }
  .v6-page .v6-fields { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; }
  .v6-page .v6-fields li + li::before { content: "·"; margin-inline: 10px; color: var(--on-navy-dim); }
  .v6-page .v6-part__screen { min-height: 300px; }
  .v6-page .v6-articles li { grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; column-gap: 16px; }
  .v6-page .pm-form__row { flex-direction: row; align-items: flex-start; }
  .v6-page .pm-form__row .pm-btn { width: auto; }
  .v6-page .v6-plates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-6); }
  .v6-page .pm-vplate--lead { grid-column: 1 / -1; }
  .v6 .pm-site-footer__in { padding-bottom: var(--space-8); }
}

/* ---------- 981 px and up: desktop ------------------------------------------------------------- */
@media (min-width: 981px) {
  .v6-page { --sec: var(--space-24); }
  .v6-page .v6-h1 { max-width: none; }
  .v6-page .v6-sub { margin-top: 20px; max-width: 28em; }
  .v6-page .v6-join { display: none; }
  .v6-page .v6-hero__form { display: block; width: 100%; max-width: 560px; margin-top: 30px; }
  .v6-page .v6-act { margin-top: 4px; grid-template-columns: auto; grid-template-areas: "micro" "peek"; row-gap: 20px; }
  .v6-page .v6-email { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: var(--space-16); }
  .v6-page .v6-email__plate { display: block; }
  .v6-page .v6-plates { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: var(--space-12); row-gap: var(--space-8); align-items: start; }
  .v6-page .pm-vplate--lead { grid-column: 1; grid-row: 1 / span 2; }
  .v6-page .v6-charter { grid-template-columns: minmax(0, 680px) 260px; justify-content: start; column-gap: var(--space-20); align-items: end; }
  .v6-page .v6-mock { max-width: 380px; }
  .v6-page .v6-charter__leo { display: flex; justify-content: center; padding-bottom: 24px; }
  .v6-page .v6-charter__leo .pm-leo-art { margin: 0; }   /* the system's Stage art, 180 px, leo-tight */
}

/* ---------- motion off: the letter in its finished, still state ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v6-letter .pm-btn--icon, .v6-caret { display: none !important; }
}