/* Polyment — the map, lit · components/bundle.css
   Loaded after tokens.css. Every value comes from a token (var(--…)); this file adds structure, states
   and the levels of the one ground. Classes are prefixed pm-. The .pv- classes at the end are preview
   scaffolding for this system's own cards, not product classes. */

/* ─── One ground, navy; lightness says what is in front ────────────────────────────────────────
   The ground is navy. Anything raised on it (a card, a sheet, the drawer, a field's well, a pill) is
   navy-soft; inside a raised surface, insets, options, wells and nested blocks step back to navy; hover
   is navy-lift. Components read the local variables below, so one button, chip or field works on the
   ground and on a raised surface alike. Print (.pm-print) is the one light surface: the CV export. */
:root, .pm-navy, .pm-lit, .pm-surface, .pm-shell, .pm-sidebar, .pm-topbar, .pm-main {
  --fg: var(--on-navy); --fg-2: var(--on-navy-soft); --fg-3: var(--on-navy-dim);
  --link: var(--ember); --focus: var(--ember); --rule: var(--ember);
  --raised: var(--navy-soft); --tint: var(--navy-soft); --hair: var(--navy-line);
  --ctl-bg: var(--navy-soft); --ctl-line: var(--on-navy-dim); --hover: var(--navy-lift);
  --err: var(--wrong); --ok: var(--correct);
  --on: var(--ember); --on-fg: var(--navy);
  --btn-glow: var(--glow-ember); --mark-hair: 0 0 0 1px color-mix(in srgb, var(--on-navy) 30%, transparent);
  --check-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23081D3A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.pm-navy { background-color: var(--navy); color: var(--on-navy); }
.pm-lit { background-color: var(--navy); color: var(--on-navy);
  background-image: radial-gradient(120% 70% at 50% 0%, var(--navy-lift) 0%, var(--navy) 58%, var(--navy-deep) 100%); }
/* Raised: inside it, everything steps back to the ground's colour. */
.pm-raised, .pm-navy-soft, .pm-card, .pm-sheet, .pm-drawer, .pm-leo-bubble, .pm-leo-card, .pm-alert, .pm-cx-next {
  --raised: var(--navy); --tint: var(--navy); --ctl-bg: var(--navy); --hover: var(--navy-lift); }
.pm-raised, .pm-navy-soft { background-color: var(--navy-soft); color: var(--on-navy); }
/* Print: the CV export and nothing else on a light surface. */
.pm-print { background: var(--print-paper); color: var(--print-ink);
  --fg: var(--print-ink); --fg-2: var(--print-slate); --fg-3: var(--print-slate); --link: var(--print-accent); --rule: var(--print-accent);
  --hair: var(--print-line); --raised: var(--print-paper); --tint: var(--print-paper); }

/* ─── Type helpers ────────────────────────────────────────────────────────────────────────────── */
.site-hero { font-size: var(--fs-site-hero); }
.site-h1 { font-size: var(--fs-site-h1); }
.site-h2 { font-size: var(--fs-site-h2); }
.site-h3 { font-size: var(--fs-site-h3); }
.site-lead { font-size: var(--fs-site-lead); }
.site-hero-ar { font-size: var(--fs-site-hero-ar); }
.site-h2-ar { font-size: var(--fs-site-h2-ar); }
.site-lead-ar { font-size: var(--fs-site-lead-ar); }
.site-hero, .site-h1, .site-h2, .site-h3, .app-h1, .app-h2, .app-h3, .brand-headline, .brand-line, .brand-thumb, .brand-end,
.site-hero-ar, .site-h2-ar, .app-h1-ar, .app-h2-ar, .brand-headline-ar, .brand-line-ar, .brand-thumb-ar, .brand-end-ar { text-wrap: balance; margin: 0; }
.site-eyebrow, .app-eyebrow { text-transform: uppercase; }
.app-stat, .pm-num { font-variant-numeric: tabular-nums; }
/* The one ember rule under the key word (print-accent in print). */
.pm-rule { text-decoration-line: underline; text-decoration-color: var(--rule); text-decoration-thickness: max(3px, 0.075em);
  text-underline-offset: 0.14em; text-decoration-skip-ink: none; }
:lang(ar) .pm-rule, .pm-rule:lang(ar) { text-underline-offset: 0.3em; }
.pm-ar { font-family: var(--font-arabic); }

/* ─── Focus: one ring, everywhere: 3 px ember, 2 px off the edge ───────────────────────────────── */
.pm-btn:focus-visible, .pm-chip:focus-visible, .pm-link:focus-visible, .pm-input:focus-visible, .pm-textarea:focus-visible,
.pm-select select:focus-visible, .pm-check input:focus-visible, .pm-nav-item:focus-visible, .pm-option:focus-visible,
.pm-file:focus-within, .pm-search:focus-within, .is-focus {
  outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset);
}

/* ─── Buttons ─────────────────────────────────────────────────────────────────────────────────
   Primary: ember pill, navy label, the soft ember glow. Secondary: an on-navy outline pill. Text: an
   ember label. One primary per view. */
.pm-btn { --h: var(--button-h); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--r-pill);
  font: 700 16px/1 var(--font-sans); letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer;
  background: none; color: var(--fg); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard),
    color var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard), transform var(--dur-press) var(--ease-standard); }
.pm-btn .pm-icon { width: 18px; height: 18px; }
.pm-btn--app { --h: 44px; padding: 0 20px; font-size: 15px; }
.pm-btn--sm { --h: 36px; padding: 0 16px; font-size: 14px; gap: 8px; }
.pm-btn--lg { --h: 56px; padding: 0 28px; font-size: 17px; }
.pm-btn--block { width: 100%; }
.pm-btn--primary { background: var(--ember); color: var(--navy); box-shadow: var(--btn-glow); }
.pm-btn--primary:hover, .pm-btn--primary.is-hover { background: var(--ember-hover); }
.pm-btn--primary:active, .pm-btn--primary.is-active { background: var(--ember-press); transform: translateY(1px); }
.pm-btn--secondary { border-color: var(--fg); color: var(--fg); }
.pm-btn--secondary:hover, .pm-btn--secondary.is-hover { background: var(--hover); }
.pm-btn--secondary:active, .pm-btn--secondary.is-active { background: var(--hover); transform: translateY(1px); }
.pm-btn--text { --h: 44px; padding: 0 6px; color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.pm-btn--text:hover, .pm-btn--text.is-hover { text-decoration-thickness: 2.5px; }
.pm-btn--icon { --h: 44px; width: 44px; padding: 0; color: var(--fg-2); }
.pm-btn--icon:hover, .pm-btn--icon.is-hover { background: var(--hover); color: var(--fg); }
.pm-btn--icon .pm-icon { width: 20px; height: 20px; }
.pm-btn:disabled, .pm-btn[aria-disabled="true"], .pm-btn.is-disabled {
  opacity: var(--opacity-disabled); box-shadow: none; transform: none; cursor: not-allowed; pointer-events: none; }
.pm-btn[aria-busy="true"], .pm-btn.is-loading { cursor: progress; }
.pm-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: pm-spin 0.8s linear 6; flex: none; }
/* Loops stop before 5 s (6 turns, 3 breaths, 3 passes). A wait that runs longer becomes determinate steps (the build wait). */
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* ─── Links ───────────────────────────────────────────────────────────────────────────────────── */
.pm-link, .pm-prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
  border-radius: 2px; transition: text-decoration-thickness var(--dur-state) var(--ease-standard); }
.pm-link:hover, .pm-prose a:hover, .pm-link.is-hover { text-decoration-thickness: 2.5px; }

/* ─── Icons: the existing sprite, in currentColor ─────────────────────────────────────────────── */
.pm-icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
[dir="rtl"] .pm-icon--dir { transform: scaleX(-1); }

/* ─── Fields ──────────────────────────────────────────────────────────────────────────────────── */
.pm-field { display: grid; gap: 8px; min-width: 0; }
.pm-label { font: 600 14px/1.4 var(--font-sans); color: var(--fg); }
.pm-label__opt { font-weight: 400; color: var(--fg-2); }
.pm-hint { font: 400 14px/1.45 var(--font-sans); color: var(--fg-2); margin: 0; }
.pm-error { display: flex; gap: 6px; align-items: flex-start; font: 600 14px/1.45 var(--font-sans); color: var(--err); margin: 0; }
.pm-error .pm-icon { width: 16px; height: 16px; margin-top: 2px; }
.pm-input, .pm-textarea, .pm-select select { box-sizing: border-box; width: 100%; height: var(--control-h); padding: 0 16px;
  border: 1px solid var(--ctl-line); border-radius: var(--r-md); background: var(--ctl-bg); color: var(--fg);
  font: 400 16px/1.5 var(--font-sans); appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur-state) var(--ease-standard), background-color var(--dur-state) var(--ease-standard); }
.pm-input::placeholder, .pm-textarea::placeholder { color: var(--fg-3); opacity: 1; }
.pm-input:hover, .pm-textarea:hover, .pm-select select:hover, .pm-input.is-hover { border-color: var(--fg-2); }
.pm-input:focus-visible, .pm-textarea:focus-visible, .pm-select select:focus-visible, .pm-input.is-focus, .pm-textarea.is-focus { border-color: var(--fg); }
.pm-field.is-error .pm-input, .pm-field.is-error .pm-textarea, .pm-field.is-error select, .pm-input[aria-invalid="true"] {
  border-color: var(--err); border-width: 1.5px; }
.pm-input:disabled, .pm-textarea:disabled, .pm-select select:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
/* The textarea grows past one line with its text (field-sizing, or Polyment.autogrow where unsupported). */
.pm-textarea { height: auto; min-height: var(--control-h); max-height: 320px; padding: 13px 16px; line-height: 1.6; resize: none;
  overflow-y: auto; field-sizing: content; display: block; }
.pm-select { position: relative; display: block; }
.pm-select select { padding-inline-end: 44px; cursor: pointer; }
.pm-select .pm-icon { position: absolute; inset-inline-end: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; color: var(--fg-2); }
/* The CV upload: a drop zone, findable by its on-navy-dim dashed edge. */
.pm-file { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1.5px dashed var(--ctl-line);
  border-radius: var(--r-lg); background: var(--ctl-bg); color: var(--fg); }
.pm-file__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; flex: none; color: var(--fg); }
.pm-file__icon .pm-icon { transform: rotate(-90deg); }
.pm-file__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pm-file__title { font: 600 16px/1.4 var(--font-sans); }
.pm-file__meta { font: 400 14px/1.45 var(--font-sans); color: var(--fg-2); overflow-wrap: anywhere; }
.pm-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pm-file.is-over { border-style: solid; border-color: var(--focus); background: var(--hover); }
.pm-file.is-done { border-style: solid; border-color: var(--ctl-line); }
.pm-file.is-done .pm-file__icon { background: var(--on); color: var(--on-fg); }
.pm-file.is-done .pm-file__icon .pm-icon { transform: none; }
.pm-file.is-error { border-style: solid; border-color: var(--err); }
/* Checkbox and radio: 22px, findable by an on-navy-dim edge; checked fills ember with a navy check. */
.pm-check { display: inline-flex; align-items: flex-start; gap: 12px; font: 400 16px/1.4 var(--font-sans); color: var(--fg); cursor: pointer; }
.pm-check input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--ctl-line);
  border-radius: 6px; background: var(--ctl-bg) no-repeat center / 14px 14px; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard); }
.pm-check input[type="radio"] { border-radius: 50%; }
.pm-check input:hover { border-color: var(--fg); }
.pm-check input:checked { background-color: var(--on); border-color: var(--on); }
.pm-check input[type="checkbox"]:checked { background-image: var(--check-img); }
.pm-check input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--ctl-bg); }
.pm-check input:disabled, .pm-check.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ─── Chips ───────────────────────────────────────────────────────────────────────────────────── */
.pm-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid transparent;
  border-radius: var(--r-pill); background: none; color: var(--fg); font: 600 14px/1 var(--font-sans); white-space: nowrap; }
.pm-chip .pm-icon { width: 14px; height: 14px; }
.pm-chip--lg { height: 40px; padding: 0 18px; font-size: 15px; }
button.pm-chip { cursor: pointer; transition: background-color var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard); }
/* Field chips are choices: findable by a 3:1 border; chosen means ember, a navy label and a check. */
.pm-chip--field { background: var(--ctl-bg); border-color: var(--ctl-line); color: var(--fg); }
.pm-chip--field:hover, .pm-chip--field.is-hover { border-color: var(--fg); }
.pm-chip--field[aria-pressed="true"], .pm-chip--field.is-on { background: var(--ember); border-color: var(--ember); color: var(--navy); }
.pm-chip--field[aria-pressed="true"]:hover { background: var(--ember-hover); border-color: var(--ember-hover); }
.pm-chip--focus { background: var(--ember); color: var(--navy); }
.pm-chip--for-you { border-color: var(--link); color: var(--link); }
.pm-chip--by-you { border-color: var(--ctl-line); color: var(--fg-2); }
.pm-chip--next { border: 1px dashed var(--ctl-line); color: var(--fg-3); background: none; cursor: default; }
.pm-chip--testing { background: var(--tint); color: var(--fg-2); }
.pm-chip--progress { background: var(--tint); color: var(--fg); }
.pm-half { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--link); overflow: hidden; flex: none; box-sizing: border-box; }
.pm-half::after { content: ""; position: absolute; inset: 0 50% 0 0; background: var(--link); }
[dir="rtl"] .pm-half::after { inset: 0 0 0 50%; }
.pm-chip--correct { background: var(--correct); color: var(--navy); }
.pm-chip--wrong { background: var(--wrong); color: var(--navy); }
.pm-chip--streak { background: var(--ember); color: var(--navy); font-variant-numeric: tabular-nums; }
.pm-chip--count { background: var(--tint); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.pm-chip--open { background: var(--tint); color: var(--fg); }
.pm-chip--next, .pm-chip[aria-disabled="true"] { pointer-events: none; }
.pm-chip:disabled, .pm-chip.is-disabled { opacity: var(--opacity-disabled); pointer-events: none; }

/* ─── Cards ───────────────────────────────────────────────────────────────────────────────────── */
.pm-card { background: var(--navy-soft); color: var(--on-navy); border: 1px solid var(--navy-line); border-radius: var(--r-xl); padding: var(--space-6); }
.pm-card .pm-card { background: var(--navy); }
.pm-card--app { border-radius: var(--r-2xl); }
.pm-card__title { margin: 0; }
.pm-inset { background: var(--tint); border-radius: var(--r-lg); padding: var(--space-4) var(--space-5); color: var(--fg); }

/* ─── Practice: options and the verdict ───────────────────────────────────────────────────────── */
.pm-options { display: grid; gap: var(--space-3); }
.pm-option { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px; border: 1px solid var(--ctl-line);
  border-radius: var(--r-md); background: var(--tint); color: var(--fg); font: 400 16px/1.4 var(--font-sans); text-align: start; width: 100%; cursor: pointer;
  transition: border-color var(--dur-state) var(--ease-standard), background-color var(--dur-state) var(--ease-standard); }
.pm-option:hover, .pm-option.is-hover { border-color: var(--fg); }
.pm-option__key { width: 30px; height: 30px; border-radius: 50%; background: var(--hover); color: var(--fg); display: grid; place-items: center; font: 700 14px/1 var(--font-sans); flex: none; }
.pm-option__text { flex: 1; min-width: 0; }
.pm-option__tag { font: 600 14px/1 var(--font-sans); color: var(--fg-2); }
.pm-option.is-picked { border: 2px solid var(--fg); padding: 9px 15px; }
.pm-option.is-wrong { border: 2px solid var(--err); padding: 9px 15px; }
.pm-option.is-wrong .pm-option__key { background: var(--err); color: var(--navy); }
.pm-option.is-right { border: 2px solid var(--ok); padding: 9px 15px; }
.pm-option.is-right .pm-option__key { background: var(--ok); color: var(--navy); }
.pm-option:disabled { cursor: default; }
/* The verdict under an answer: the label first, then the reason as ordinary text. */
.pm-verdict { display: grid; gap: 10px; justify-items: start; padding: 18px 20px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--tint); color: var(--fg); }
.pm-verdict__reason { margin: 0; font: 400 16px/1.55 var(--font-sans); color: var(--fg); max-width: 64ch; }
.pm-verdict__reason strong { font-weight: 600; }
.pm-verdict.is-landing { animation: pm-land var(--dur-land) var(--ease-settle) both; }
@keyframes pm-land { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ─── Progress ────────────────────────────────────────────────────────────────────────────────── */
.pm-progress { display: grid; gap: 8px; }
.pm-progress__head { display: flex; justify-content: space-between; gap: 12px; font: 600 14px/1.4 var(--font-sans); color: var(--fg); font-variant-numeric: tabular-nums; }
.pm-progress__head span:last-child { color: var(--fg-2); font-weight: 500; }
.pm-progress__track { height: 8px; border-radius: var(--r-pill); background: var(--tint); overflow: hidden; }
.pm-progress__fill { height: 100%; border-radius: inherit; background: var(--link); }
.pm-steps { display: flex; gap: 6px; }
.pm-steps span { height: 6px; flex: 1; border-radius: var(--r-pill); background: var(--tint); }
.pm-steps span.is-done { background: var(--link); }
.pm-steps span.is-now { background: var(--fg); }
/* The check's result: the product's verdict, on navy, in the map's own language. */
.pm-result { display: grid; gap: 14px; }
.pm-result__counts { display: flex; flex-wrap: wrap; gap: 10px; }
.pm-result__count { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: var(--r-md); background: var(--navy-soft);
  font: 600 15px/1.2 var(--font-sans); color: var(--on-navy-soft); }
.pm-result__count b { font: 700 24px/1 var(--font-display); color: var(--on-navy); font-variant-numeric: tabular-nums; }
.pm-result__count.is-lit b { color: var(--ember); }
.pm-result__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px;
  border-radius: var(--r-md); background: var(--navy-soft); }
.pm-result__name { font: 600 16px/1.35 var(--font-sans); color: var(--on-navy); }
.pm-result__note { font: 400 14px/1.45 var(--font-sans); color: var(--on-navy-soft); margin-top: 2px; }
.pm-result__state { font: 600 14px/1 var(--font-sans); color: var(--on-navy-soft); white-space: nowrap; }
.pm-result__state.is-lit { color: var(--ember); }
.pm-result.is-landing .pm-result__row { animation: pm-land var(--dur-land) var(--ease-settle) both; }
.pm-result.is-landing .pm-result__row:nth-child(2) { animation-delay: var(--dur-stagger); }
.pm-result.is-landing .pm-result__row:nth-child(3) { animation-delay: calc(var(--dur-stagger) * 2); }
.pm-result.is-landing .pm-result__row:nth-child(4) { animation-delay: calc(var(--dur-stagger) * 3); }

/* ─── Leo: static art in four presence modes, and his bubble ──────────────────────────────────── */
.pm-leo-art { display: block; width: 72px; height: auto; flex: none; }
.pm-leo-art--stage { width: 180px; }
.pm-leo-art--companion { width: 72px; }
.pm-leo-crop { display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; background: var(--tint); }
.pm-leo-crop img { display: block; width: 150%; height: auto; margin: -6% 0 0 -25%; }
.pm-leo-bubble { position: relative; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 18px 18px 18px 4px; background: var(--raised);
  color: var(--fg); font: 400 16px/1.5 var(--font-sans); max-width: 46ch; }
[dir="rtl"] .pm-leo-bubble { border-radius: 18px 18px 4px 18px; }
.pm-leo-bubble__who { display: block; font: 700 14px/1.2 var(--font-sans); color: var(--fg-2); margin-bottom: 4px; }
.pm-leo-quip { font: 600 24px/1.15 var(--font-hand); color: var(--fg); margin: 0; }

/* ─── Empty, loading, error ───────────────────────────────────────────────────────────────────── */
.pm-empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 32px 24px; color: var(--fg); }
.pm-empty__title { margin: 0; }
.pm-empty__text { margin: 0; font: 400 16px/1.55 var(--font-sans); color: var(--fg-2); max-width: 44ch; }
.pm-skel { display: block; height: 14px; border-radius: 7px; background: var(--tint); animation: pm-breathe 1.6s ease-in-out 3; }
.pm-skel--title { height: 22px; width: 60%; }
@keyframes pm-breathe { 50% { opacity: 0.55; } }
.pm-bar-indet { position: relative; height: 4px; border-radius: var(--r-pill); background: var(--tint); overflow: hidden; }
.pm-bar-indet::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 34%; border-radius: inherit; background: var(--link); animation: pm-slide 1.4s var(--ease-standard) 3; }
@keyframes pm-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.pm-alert { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 16px 18px; border: 1px solid var(--hair);
  border-radius: var(--r-lg); background: var(--raised); color: var(--fg); }
.pm-alert > .pm-icon { color: var(--err); width: 22px; height: 22px; }
.pm-alert__title { font: 700 16px/1.4 var(--font-sans); margin: 0; }
.pm-alert__text { grid-column: 2; font: 400 15px/1.5 var(--font-sans); color: var(--fg-2); margin: 0; }
.pm-alert__actions { grid-column: 2; display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ─── The logo: the mark (mark.png) and the word (an SVG), 6 : 5 : 2 ──────────────────────────── */
.pm-logo { --mark: 30px; --word: 25px; --gap: 10px; display: inline-flex; align-items: center; gap: var(--gap); text-decoration: none; flex: none; direction: ltr; }
/* The logo never mirrors: in Arabic it keeps the mark before the word. */
.pm-logo__mark { display: block; width: var(--mark); height: var(--mark); border-radius: 25%; flex: none; }
.pm-logo__mark { box-shadow: var(--mark-hair); }
/* The word file is a 1em line box plus 0.1em above and below for the descender. */
.pm-logo__word { display: block; height: calc(var(--word) * 1.2); width: auto; margin-block: calc(var(--word) * -0.1); flex: none; }
.pm-logo--sidebar { --mark: 31px; --word: 26px; --gap: 10px; }
.pm-logo--min { --mark: 24px; --word: 20px; --gap: 8px; }

/* ─── The Codex map's text (the drawing itself is Polyment.codexMap) ───────────────────────────── */
.pm-codexmap { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.pm-cx-text { font-family: var(--font-sans); font-weight: 600; fill: var(--on-navy-soft); paint-order: stroke; stroke: var(--navy); stroke-linejoin: round; }
.pm-cx-text--goal { fill: var(--ember); }
.pm-cx-sub { font-family: var(--font-sans); font-weight: 500; fill: var(--on-navy-dim); paint-order: stroke; stroke: var(--navy); stroke-linejoin: round; }
.pm-cx-sub--accent { fill: var(--ember); }
.pm-cx-glyph { font-family: var(--font-display); font-weight: 700; }
.pm-map-pause { position: absolute; inset-inline-end: 12px; bottom: 12px; }

/* ─── The app shell: navy top bar and sidebar, at the Workshop's sizes ────────────────────────── */
.pm-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: var(--topbar) minmax(0, 1fr); background: var(--navy); color: var(--on-navy); }
.pm-shell--rail { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }
.pm-sidebar { grid-row: 1 / -1; display: flex; flex-direction: column; gap: 2px; padding: 24px 16px 20px; background: var(--navy); border-inline-end: 1px solid var(--navy-line); min-height: 0; }
.pm-sidebar__brand { display: flex; align-items: center; height: 40px; padding: 0 12px; }
.pm-sidebar__sub { padding: 0 12px; margin: 6px 0 22px; font: 500 14px/1.3 var(--font-sans); color: var(--on-navy-dim); }
.pm-nav-item { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--on-navy-soft); font: 600 15px/1.2 var(--font-sans); text-align: start; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard); }
.pm-nav-item .pm-icon { width: 20px; height: 20px; }
.pm-nav-item:hover, .pm-nav-item.is-hover { background: var(--navy-soft); color: var(--on-navy); }
.pm-nav-item[aria-current="page"] { background: var(--navy-soft); color: var(--on-navy); }
.pm-nav-item[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -16px; top: 50%; width: 4px; height: 22px; margin-top: -11px;
  border-radius: 0 4px 4px 0; background: var(--ember); }
[dir="rtl"] .pm-nav-item[aria-current="page"]::before { border-radius: 4px 0 0 4px; }
.pm-nav-key { width: 20px; height: 20px; border-radius: 50%; border: 1.9px solid currentColor; display: grid; place-items: center; font: 700 12px/1 var(--font-sans); flex: none; }
.pm-sidebar__foot { margin-top: auto; display: grid; gap: 2px; }
.pm-leo-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 14px; margin-bottom: 14px;
  border-radius: var(--r-lg); background: var(--navy-soft); border: 1px solid var(--navy-line); }
.pm-leo-card .pm-leo-quip { font-size: 21px; color: var(--on-navy-soft); }
.pm-leo-card .pm-btn { grid-column: 1 / -1; }
.pm-shell--rail .pm-sidebar { padding: 24px 12px 20px; align-items: center; }
.pm-shell--rail .pm-sidebar__brand { padding: 0; justify-content: center; }
.pm-shell--rail .pm-nav-item { width: 56px; justify-content: center; padding: 0; }
.pm-shell--rail .pm-nav-item[aria-current="page"]::before { inset-inline-start: -12px; }
.pm-topbar { display: flex; align-items: center; gap: 16px; padding: 0 32px; background: var(--navy); border-bottom: 1px solid var(--navy-line); min-width: 0; }
.pm-search { display: flex; align-items: center; gap: 10px; flex: 0 1 460px; height: 48px; padding: 0 18px; border: 1px solid var(--on-navy-dim); border-radius: var(--r-pill);
  background: var(--navy-soft); color: var(--on-navy-dim); min-width: 0; }
.pm-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--on-navy); font: 400 16px/1 var(--font-sans); outline: none; }
.pm-search input::placeholder { color: var(--on-navy-dim); opacity: 1; }
.pm-topbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.pm-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-soft); border: 1px solid var(--on-navy-dim); color: var(--on-navy); display: grid; place-items: center; font: 700 15px/1 var(--font-sans); flex: none; }
.pm-coin { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font: 800 9px/1 var(--font-sans); }
.pm-main { min-width: 0; min-height: 0; overflow: hidden; background: var(--navy); color: var(--on-navy); }

/* ─── The Codex screen's own parts (cx-, as the app names them) ───────────────────────────────── */
.pm-cx-head { display: grid; gap: 16px; padding: 24px 40px 0; }
.pm-cx-titlerow { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pm-cx-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.pm-deadline { position: relative; width: 56px; height: 56px; display: grid; place-items: center; flex: none; }
.pm-deadline svg { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); }
.pm-deadline b { font: 700 18px/1 var(--font-display); color: var(--on-navy); font-variant-numeric: tabular-nums; }
.pm-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--navy-soft); border: 1px solid var(--on-navy-dim); }
.pm-seg button { height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: none; color: var(--on-navy-soft);
  font: 600 14px/1 var(--font-sans); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pm-seg button[aria-selected="true"] { background: var(--navy-lift); color: var(--on-navy); }
.pm-seg .pm-icon { width: 16px; height: 16px; }
.pm-cx-next { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: var(--r-lg); background: var(--navy-soft); border: 1px solid var(--navy-line);
  color: var(--on-navy); text-decoration: none; transition: background-color var(--dur-state) var(--ease-standard); }
.pm-cx-next:hover, .pm-cx-next.is-hover { background: var(--navy-lift); }
.pm-cx-next__label { font: 700 14px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember); flex: none; }
.pm-cx-next__title { font: 600 16px/1.35 var(--font-sans); min-width: 0; flex: 1; }
.pm-cx-next__meta { font: 500 14px/1 var(--font-sans); color: var(--on-navy-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.pm-cx-next__meta .pm-icon { color: var(--ember); width: 18px; height: 18px; }
.pm-cx-stage { position: relative; flex: 1; min-height: 0; padding: 8px 20px 0; }
.pm-cx-tools { position: absolute; inset-inline-end: 40px; bottom: 28px; display: flex; gap: 12px; align-items: center; }
.pm-cx-zoom { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--navy-soft); border: 1px solid var(--on-navy-dim); }
.pm-cx-zoom button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--on-navy); font: 600 18px/1 var(--font-sans); cursor: pointer; }
.pm-cx-zoom button:hover { background: var(--navy-lift); }
.pm-cx-hint { position: absolute; inset-inline-start: 40px; bottom: 36px; margin: 0; font: 500 14px/1 var(--font-sans); color: var(--on-navy-dim); }

/* ─── The drawer: a navy-soft sheet over the ground, radius on its leading edge ───────────────── */
.pm-drawer { display: flex; flex-direction: column; min-height: 0; background: var(--navy-soft); color: var(--on-navy); border-radius: var(--r-2xl) 0 0 var(--r-2xl);
  border: 1px solid var(--navy-line); border-inline-end: 0; box-shadow: var(--shadow-sheet); overflow: hidden; }
[dir="rtl"] .pm-drawer { border-radius: 0 var(--r-2xl) var(--r-2xl) 0; }
.pm-drawer.is-entering { animation: pm-sheet-in var(--dur-sheet) var(--ease-draw) both; }
@keyframes pm-sheet-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.pm-sheet { background: var(--navy-soft); color: var(--on-navy); border: 1px solid var(--navy-line); border-radius: var(--r-2xl); box-shadow: var(--shadow-sheet); overflow: hidden; }
.pm-drawer__head { display: flex; align-items: center; gap: 10px; padding: 20px 20px 0 28px; flex: none; }
.pm-drawer__close { margin-inline-start: auto; }
.pm-drawer__body { display: grid; gap: 20px; align-content: start; padding: 14px 28px 28px; min-height: 0; overflow-y: auto; }
.pm-drawer__foot { display: flex; gap: 12px; flex-wrap: wrap; padding: 18px 28px 22px; border-top: 1px solid var(--navy-line); background: var(--navy-soft); flex: none; }
.pm-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pm-list > li { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--hair); font: 400 16px/1.4 var(--font-sans); color: var(--fg); }
.pm-list > li:last-child { border-bottom: 0; }
/* A done step or skill: a small lit node, ember with a navy check. */
.pm-done { width: 22px; height: 22px; border-radius: 50%; background: var(--ember); color: var(--navy); display: grid; place-items: center; flex: none; }
.pm-done .pm-icon { width: 14px; height: 14px; }
.pm-todo { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ctl-line); flex: none; box-sizing: border-box; }

/* ─── Brand surfaces: cards, covers, thumbnails, end cards ────────────────────────────────────── */
.pm-surface { position: relative; overflow: hidden; color: var(--on-navy); background-color: var(--navy);
  background-image: radial-gradient(120% 72% at 50% 0%, var(--navy-lift) 0%, var(--navy) 58%, var(--navy-deep) 100%); }
.pm-surface__line { color: var(--on-navy); }
.pm-surface__sub { color: var(--on-navy-soft); margin: 0; }
.pm-surface__foot { color: var(--on-navy-soft); margin: 0; }
.pm-cta-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--ember); color: var(--navy); box-shadow: var(--glow-ember); }

/* ─── Motion off: every moving part has a finished, still state ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pm-btn, .pm-option, .pm-nav-item { transition-property: background-color, border-color, color, box-shadow; }
  .pm-btn--primary:active, .pm-btn--primary.is-active, .pm-btn--secondary:active, .pm-btn--secondary.is-active { transform: none; }
  .pm-spinner { animation: none; border-right-color: currentColor; opacity: 0.5; }
  .pm-skel, .pm-bar-indet::after { animation: none; }
  .pm-bar-indet::after { left: 0; width: 34%; transform: none; }
  .pm-verdict.is-landing, .pm-result.is-landing .pm-result__row, .pm-drawer.is-entering { animation: none; }
}

/* ─── Preview scaffolding for this system's own cards (not product classes) ───────────────────── */
.pv { box-sizing: border-box; font-family: var(--font-sans); }
.pv *, .pv *::before, .pv *::after { box-sizing: border-box; }
.pv-split { display: grid; grid-template-columns: 1fr 1fr; }
.pv-panel { padding: 28px 28px 32px; display: grid; gap: 22px; align-content: start; min-width: 0; }
.pv-cap { margin: 0; font: 700 12px/1.3 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.pv-note { margin: 0; font: 400 13px/1.5 var(--font-sans); color: var(--fg-2); max-width: 70ch; }
.pv-row { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }
.pv-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pv-state { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.pv-tag { font: 500 12px/1.2 var(--font-sans); color: var(--fg-3); }
.pv-scale { position: relative; overflow: hidden; flex: none; }
.pv-scale > * { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.pv-board { display: grid; gap: 10px; justify-items: stretch; margin: 0; min-width: 0; }
.pv-board > figcaption { font: 600 12px/1.35 var(--font-sans); color: var(--fg-2); }
.pv-boards { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
/* Guides drawn over brand boards in previews only: the 9:16 safe zones and a grid crop. Not part of any card. */
.pv-safe { position: absolute; left: 0; right: 0; border: 4px dashed var(--on-navy-dim); display: grid; place-items: center; pointer-events: none; }
.pv-safe span { font: 600 40px/1 var(--font-sans); color: var(--on-navy-dim); }
.pv-crop { position: absolute; left: 0; right: 0; border-block: 4px dashed var(--ember); pointer-events: none; }
.pv-crop span { position: absolute; inset-inline-end: 24px; top: 14px; font: 600 36px/1 var(--font-sans); color: var(--ember); }

/* ─── The site's shared parts (added 19 Oct 2026 for the home page, Home v6) ──────────────────────
   The header and footer every page shares, the plate that holds a drawing or a clip, the founding
   form in all its states, and the phone's sticky bar and join sheet. Everything sits on the one navy
   ground; nothing here adds a colour, a face, a shadow or a glow the system does not already have. */

/* Screen-reader text and the skip link. */
.pm-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pm-skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 80; padding: 10px 16px; border-radius: var(--r-pill); background: var(--ember); color: var(--navy);
  font: 700 15px/1 var(--font-sans); text-decoration: none; }
.pm-skip:focus { top: 12px; outline: var(--focus-ring) solid var(--on-navy); outline-offset: var(--focus-offset); }

/* The site header: transparent over the opening, the ground's own navy (and its hairline) once the page
   scrolls. Logo A at 30 / 25 / 10; nav links on-navy-soft, on-navy with an ember underline on hover;
   one primary "Save my place". Below 860 px the links fold into the menu; below 640 px the button too. */
.pm-site-header { position: sticky; top: 0; z-index: 50; background-color: transparent; border-bottom: 1px solid transparent;
  transition: background-color var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard); }
.pm-site-header.is-stuck, .pm-site-header.is-open { background-color: var(--navy); border-bottom-color: var(--navy-line); }
.pm-site-header__bar { display: flex; align-items: center; gap: 12px; height: var(--header); max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }
.pm-site-header .pm-logo { min-height: 44px; margin-inline-end: auto; }
.pm-site-nav { display: flex; align-items: center; gap: 4px; }
.pm-site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); font: 600 15px/1.3 var(--font-sans);
  color: var(--on-navy-soft); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px;
  transition: color var(--dur-state) var(--ease-standard), text-decoration-color var(--dur-state) var(--ease-standard); }
.pm-site-nav a:hover, .pm-site-nav a.is-hover, .pm-site-nav a[aria-current="page"] { color: var(--on-navy); text-decoration-color: var(--ember); }
.pm-site-nav a:focus-visible, .pm-site-menu a:focus-visible, .pm-site-footer a:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.pm-site-header__cta { margin-inline-start: 8px; }
.pm-site-header__menu { display: none; color: var(--on-navy); }
.pm-site-header__menu .pm-icon--close { display: none; }
.pm-site-header.is-open .pm-site-header__menu .pm-icon--open { display: none; }
.pm-site-header.is-open .pm-site-header__menu .pm-icon--close { display: inline-block; }
/* The menu, on phones and tablets: a navy-soft sheet under the header, the links as rows, the button last. */
.pm-site-menu { position: absolute; inset-inline: 12px; top: calc(100% + 8px); display: grid; gap: 2px; padding: 8px; background: var(--navy-soft); color: var(--on-navy);
  border: 1px solid var(--navy-line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); --raised: var(--navy); --tint: var(--navy); --ctl-bg: var(--navy); }
.pm-site-menu[hidden] { display: none; }
.pm-site-menu a:not(.pm-btn) { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--r-sm); font: 600 17px/1.3 var(--font-sans);
  color: var(--on-navy); text-decoration: none; }
.pm-site-menu a:not(.pm-btn):hover { background: var(--navy-lift); }
.pm-site-menu .pm-btn { margin-top: 8px; }
@media (max-width: 860px) {
  .pm-site-header .pm-site-nav { display: none; }
  .pm-site-header__menu { display: inline-flex; }
}
@media (max-width: 640px) {
  .pm-site-header__bar { height: 64px; }
  .pm-site-header__cta { display: none; }
}

/* The site footer: the logo and the one line (or none), three columns of links, the copyright. */
.pm-site-footer { border-top: 1px solid var(--navy-line); color: var(--on-navy-soft); }
.pm-site-footer__in { display: grid; gap: var(--space-8); max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  padding: var(--space-12) var(--gutter) var(--space-8); box-sizing: border-box; }
.pm-site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.pm-site-footer__brand { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.pm-site-footer__line { margin: 0; max-width: 32ch; font: 500 15px/1.45 var(--font-sans); color: var(--on-navy-soft); }
.pm-site-footer__col { display: grid; align-content: start; justify-items: start; }
.pm-site-footer__head { margin: 0 0 4px; font: 700 13px/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy); }
.pm-site-footer__col a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1.4 var(--font-sans); color: var(--on-navy-soft);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; overflow-wrap: anywhere;
  transition: color var(--dur-state) var(--ease-standard), text-decoration-color var(--dur-state) var(--ease-standard); }
/* Every tap target is at least 44 px (LV-9): a short link ("FAQ") is 44 wide, and the logo takes a 44 px tall
   target while it still lays out at its own 30 px, so nothing moves. */
.pm-site-footer__col a { min-width: 44px; }
.pm-site-footer .pm-logo { min-height: 44px; margin-block: -7px; }
.pm-site-footer__col a:hover { color: var(--on-navy); text-decoration-color: var(--ember); }
.pm-site-footer__foot { margin: 0; padding-top: var(--space-6); border-top: 1px solid var(--navy-line); font: 500 14px/1.5 var(--font-sans); color: var(--on-navy-dim); }
@media (max-width: 980px) {
  .pm-site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
  .pm-site-footer__brand { grid-column: 1 / -1; }
}

/* The plate: what holds a drawing of the product or a clip on the page. A navy-soft frame with the
   hairline (a card: no shadow); inside it the product sits on navy, with the radial's lit top ending in
   navy, so nothing inside is darker than the ground. */
.pm-plate { margin: 0; padding: var(--space-3); background: var(--navy-soft); color: var(--on-navy); border: 1px solid var(--navy-line); border-radius: var(--r-xl);
  min-width: 0; --raised: var(--navy); --tint: var(--navy); --ctl-bg: var(--navy); --hover: var(--navy-lift); }
.pm-plate__screen { position: relative; overflow: hidden; border-radius: var(--r-md); background-color: var(--navy);
  background-image: radial-gradient(120% 72% at 50% 0%, var(--navy-lift) 0%, var(--navy) 58%); }
.pm-plate__screen > .pm-codexmap { display: block; }
/* A clip on the page: the plate at 16:9 with its poster and the play button; the title and the caption under it. */
.pm-vplate { margin: 0; display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.pm-vplate .pm-plate__screen { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.pm-vplate__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-vplate__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-site-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--on-navy); text-wrap: balance; }
.pm-vplate__cap { margin: 6px 0 0; max-width: 60ch; font: 400 16px/1.55 var(--font-sans); color: var(--on-navy-soft); }
/* The play button: an on-navy disc with a navy glyph (15.0:1), like every fill carrying a navy label.
   No glow. The glyph never mirrors: it is a media control. */
.pm-play { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%;
  background: var(--on-navy); color: var(--navy); cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-standard), transform var(--dur-press) var(--ease-standard); }
.pm-play:hover, .pm-play.is-hover { background: var(--on-navy-soft); }
.pm-play:active, .pm-play.is-active { transform: translateY(1px); }
.pm-play:focus-visible, .pm-play.is-focus { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.pm-play svg { width: 26px; height: 26px; transform: translateX(2px); }
.pm-play--sm { width: 52px; height: 52px; }
.pm-play--sm svg { width: 22px; height: 22px; }

/* The founding form: the email first, the aim after it. On the ground the field is a navy-soft well;
   inside a sheet or a card it is a navy well. Its states: an empty submit, "Did you mean …?",
   "Adding you…", and "Check your inbox" with the aim chips and "Noted: …". It never says "already on the list". */
.pm-form { display: grid; gap: var(--space-3); min-width: 0; }
.pm-form__fields { display: grid; gap: var(--space-3); min-width: 0; }
.pm-form__fields[hidden] { display: none; }
.pm-form__row { display: flex; gap: 10px; align-items: flex-start; }
.pm-form__row .pm-input { flex: 1 1 auto; min-width: 0; }
.pm-form__row .pm-btn { flex: none; --h: var(--control-h); }
.pm-form--stack .pm-form__row { flex-direction: column; align-items: stretch; }
.pm-form--stack .pm-form__row .pm-btn { width: 100%; }
.pm-form__hint { display: grid; gap: 10px; justify-items: start; }
.pm-form__hint .pm-hint { color: var(--fg); }
.pm-form__hint .pm-hint strong { font-weight: 700; }
.pm-form__hint-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pm-form__done { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
.pm-form__done:focus { outline: none; }
.pm-form__done .pm-done { margin-top: 2px; }
.pm-form__done-title { margin: 0; font: 700 18px/1.3 var(--font-sans); color: var(--fg); }
.pm-form__done-text { grid-column: 2; margin: 0; font: 400 15px/1.55 var(--font-sans); color: var(--fg-2); }
.pm-form__done-text strong { font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.pm-form__done-text .pm-btn--text { --h: 32px; padding: 0 2px; font-size: 15px; vertical-align: baseline; }
/* Every tap target is at least 44 px (LV-9): "Change it" in the line and the hint's "Yes, use it" keep their
   drawn size and take a 44 px tall target. */
.pm-form__done-text .pm-btn--text::before, .pm-form__hint-actions .pm-btn--sm::before { content: ""; position: absolute; inset: -8px 0; }
.pm-form__aim { display: grid; gap: var(--space-3); min-width: 0; margin: var(--space-2) 0 0; padding: 0; border: 0; }
.pm-form__aim > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-3); }
.pm-form__chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.pm-form__chips .pm-chip { height: 44px; padding: 0 18px; font-size: 15px; }
.pm-form__noted { margin: 0; min-height: 1.45em; font: 600 14px/1.45 var(--font-sans); color: var(--fg-2); }
.pm-form__noted strong { font-weight: 700; color: var(--fg); }
.pm-form__combo { position: relative; }
.pm-form__suggest { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 5; display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none;
  background: var(--navy-soft); border: 1px solid var(--navy-line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.pm-form__suggest li { padding: 10px 12px; border-radius: var(--r-sm); font: 400 15px/1.3 var(--font-sans); color: var(--on-navy); cursor: pointer; }
.pm-form__suggest li strong { font-weight: 700; }
.pm-form__suggest li:hover, .pm-form__suggest li.is-active { background: var(--navy-lift); }
.pm-form__privacy { margin: 0; font: 500 14px/1.5 var(--font-sans); color: var(--fg-2); }

/* The phone's sticky bar: it appears once the opening's buttons have scrolled away and hides while the
   founding form is on screen. A navy-soft bar with the hairline, floating, so it takes shadow-pop. */
.pm-stickybar { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--navy-soft); color: var(--on-navy);
  border-top: 1px solid var(--navy-line); box-shadow: var(--shadow-pop); visibility: hidden; transform: translateY(100%);
  transition: transform var(--dur-sheet) var(--ease-draw), visibility 0s linear var(--dur-sheet); }
.pm-stickybar.is-shown { visibility: visible; transform: none; transition: transform var(--dur-sheet) var(--ease-draw), visibility 0s; }
.pm-stickybar__text { margin: 0; font: 600 14px/1.3 var(--font-sans); color: var(--on-navy); }
.pm-stickybar .pm-btn { flex: none; }
@media (min-width: 641px) { .pm-stickybar { display: none; } }

/* The join sheet, on phones and tablets: "Save my place" opens one sheet from the bottom over the scrim:
   a handle, the title and a close button, the form, the privacy line. Navy-soft with r-2xl on its top
   corners, the hairline and shadow-sheet; inside it everything steps back to navy. */
.pm-joinsheet { position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; justify-items: center; }
.pm-joinsheet[hidden] { display: none; }
.pm-joinsheet__scrim { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: var(--scrim); cursor: default; }
.pm-joinsheet__panel { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; box-sizing: border-box;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--navy-soft); color: var(--on-navy);
  border: 1px solid var(--navy-line); border-bottom: 0; border-radius: var(--r-2xl) var(--r-2xl) 0 0; box-shadow: var(--shadow-sheet);
  --fg: var(--on-navy); --fg-2: var(--on-navy-soft); --fg-3: var(--on-navy-dim); --raised: var(--navy); --tint: var(--navy); --ctl-bg: var(--navy); --hover: var(--navy-lift); }
.pm-joinsheet__handle { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: var(--on-navy-dim); }
.pm-joinsheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pm-joinsheet__head h2 { margin: 0; }
.pm-joinsheet__panel .pm-form__privacy { margin-top: 12px; }
.pm-joinsheet.is-open .pm-joinsheet__panel { animation: pm-sheet-up var(--dur-sheet) var(--ease-draw) both; }
@keyframes pm-sheet-up { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 981px) { .pm-joinsheet { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .pm-site-header, .pm-site-nav a, .pm-site-footer__col a, .pm-play { transition-property: background-color, border-color, color, text-decoration-color; }
  .pm-play:active, .pm-play.is-active { transform: none; }
  .pm-stickybar, .pm-stickybar.is-shown { transform: none; transition: none; }
  .pm-joinsheet.is-open .pm-joinsheet__panel { animation: none; }
}

/* ─── The poster band (added 19 Oct 2026 for the home page, Home v6) ─────────────────────────────────
   The tagline set as a poster, with its proof line under it, closing the site's opening. It is told apart
   from the hero by scale and spacing, never by colour: the line is one and a half times site-h1
   (42 px at 390, 84 px at 1440), on-navy; the proof line is site-lead in on-navy-soft. */
.pm-poster { padding-block: clamp(72px, 9vw, 136px) clamp(48px, 6vw, 96px); }
.pm-poster__line { margin: 0; max-width: 14ch; font-family: var(--font-display); font-weight: 700; font-size: calc(var(--fs-site-h1) * 1.5);
  line-height: 1.02; letter-spacing: -0.03em; color: var(--on-navy); text-wrap: balance; }
.pm-poster .pm-poster__proof { margin: clamp(16px, 2vw, 28px) 0 0; max-width: 34ch; font-family: var(--font-sans); font-size: var(--fs-site-lead);
  line-height: 1.45; font-weight: 400; color: var(--on-navy-soft); text-wrap: pretty; }
@media (min-width: 981px) { .pm-poster__line { max-width: none; } }

/* ─── The site's pages (added 20 Oct 2026 for the inner pages: How it works, Fields, the FAQ, Privacy,
   after sign-up, 404) ───────────────────────────────────────────────────────────────────────────────
   Each part sits on the one navy ground; raised parts are navy-soft with the hairline and cast no shadow;
   nothing here adds a colour, a face, a glow or a gradient. */

/* PageIntro: an inner page's opening — its h1, its lead and, beside them, Leo's one line. */
.pm-page-intro { display: grid; gap: var(--space-6); align-items: end; padding-block: clamp(32px, 6vw, 88px) clamp(32px, 4vw, 56px); }
.pm-page-intro__title { margin: 0; max-width: 20ch; font-family: var(--font-display); font-size: var(--fs-site-h1); font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em; color: var(--on-navy); text-wrap: balance; }
.pm-page-intro__l { display: block; }
.pm-page-intro .pm-page-intro__lead { margin: var(--space-4) 0 0; max-width: 36ch; font-family: var(--font-sans); font-size: var(--fs-site-lead);
  line-height: 1.5; color: var(--on-navy-soft); text-wrap: pretty; }
.pm-page-intro__mark { margin-bottom: var(--space-5); }
@media (min-width: 981px) { .pm-page-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: var(--space-16); } }

/* Leo's line: his Companion art beside his bubble. One per page at most; never on a form's error. */
.pm-leo-line { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: end; max-width: 380px; margin: 0; }
.pm-leo-line .pm-leo-art { width: 56px; }
.pm-leo-line .pm-leo-bubble { font-size: 15px; }
@media (min-width: 981px) { .pm-leo-line { grid-template-columns: 72px minmax(0, 1fr); } .pm-leo-line .pm-leo-art { width: 72px; } }

/* Steps: How it works' four steps. The rail draws them as four unlit nodes on a path (a row on phones,
   a column from 981 px); each step opens with its node, its name and the part it replaces. */
.pm-steprail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pm-steprail > li { position: relative; display: grid; justify-items: center; }
.pm-steprail > li:not(:last-child)::after { content: ""; position: absolute; top: 21px; inset-inline-start: calc(50% + 23px); inset-inline-end: calc(-50% + 23px);
  height: 1.5px; background: var(--map-edge-strong); }
.pm-steprail a { display: grid; justify-items: center; gap: 8px; min-width: 44px; color: var(--on-navy-soft); text-decoration: none; border-radius: var(--r-sm); }
.pm-steprail__node { display: grid; place-items: center; width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%; background: var(--navy-soft);
  border: 1.5px solid var(--map-edge-strong); font: 700 14px/1 var(--font-display); color: var(--on-navy-soft);
  transition: border-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard); }
.pm-steprail__label { font: 600 14px/1.2 var(--font-sans); }
.pm-steprail a:hover .pm-steprail__node, .pm-steprail a.is-hover .pm-steprail__node,
.pm-steprail a[aria-current="step"] .pm-steprail__node { border-color: var(--on-navy); color: var(--on-navy); }
.pm-steprail a:hover, .pm-steprail a[aria-current="step"] { color: var(--on-navy); }
.pm-steprail a:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
@media (min-width: 981px) {
  .pm-steprail { grid-template-columns: 1fr; row-gap: 36px; }
  .pm-steprail > li { justify-items: start; }
  .pm-steprail > li:not(:last-child)::after { top: 44px; bottom: -36px; inset-inline-start: 21px; inset-inline-end: auto; width: 1.5px; height: auto; }
  .pm-steprail a { grid-template-columns: 44px auto; align-items: center; gap: 14px; }
  .pm-steprail__label { font-size: 15px; }
}
.pm-step { display: grid; gap: var(--space-5); align-content: start; min-width: 0; scroll-margin-top: calc(var(--header) + 24px); }
.pm-step__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.pm-step__num { display: grid; place-items: center; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; background: var(--navy-soft);
  border: 1.5px solid var(--map-edge-strong); font: 700 13px/1 var(--font-display); color: var(--on-navy); }
.pm-step__name { font: 700 13px/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy); }
.pm-step__was { font: 500 14px/1.3 var(--font-sans); color: var(--on-navy-soft); }
.pm-step__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-site-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--on-navy); text-wrap: balance; }
.pm-step .pm-step__body { margin: 0; max-width: 54ch; font: 400 17px/1.6 var(--font-sans); color: var(--on-navy-soft); text-wrap: pretty; }
.pm-step .pm-step__note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font: 500 15px/1.5 var(--font-sans); color: var(--on-navy); }

/* ClipNotes: what happens in a clip, under its plate, closed until asked for. */
.pm-clipnotes { border-top: 1px solid var(--navy-line); }
.pm-clipnotes > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-inline: 2px; cursor: pointer;
  list-style: none; font: 600 15px/1.4 var(--font-sans); color: var(--on-navy); border-radius: var(--r-sm); }
.pm-clipnotes > summary::-webkit-details-marker { display: none; }
.pm-clipnotes > summary:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.pm-clipnotes > summary .pm-icon { width: 16px; height: 16px; color: var(--on-navy-soft); transform: rotate(-90deg); transition: transform var(--dur-state) var(--ease-standard); }
.pm-clipnotes[open] > summary .pm-icon { transform: rotate(90deg); }
.pm-clipnotes ol { display: grid; gap: 8px; margin: 2px 0 12px; padding-inline-start: 22px; font: 400 15px/1.55 var(--font-sans); color: var(--on-navy-soft); }
.pm-clipnotes ol > li::marker { font-variant-numeric: tabular-nums; color: var(--on-navy-soft); }

/* Principles: three short lines in navy-soft cards, the claim first, then what follows from it. */
.pm-principles { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pm-principles > li { display: grid; gap: 6px; align-content: start; padding: var(--space-5) var(--space-6); background: var(--navy-soft);
  border: 1px solid var(--navy-line); border-radius: var(--r-xl); font: 400 16px/1.55 var(--font-sans); color: var(--on-navy-soft); }
.pm-principles__claim { font: 700 17px/1.35 var(--font-sans); color: var(--on-navy); }
.pm-principles-note { margin: var(--space-4) 0 0; font: 500 14px/1.5 var(--font-sans); color: var(--on-navy-soft); }
@media (min-width: 761px) { .pm-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }

/* FieldCard: one field the founding list can ask for — its node, its name, its line, and a way in. */
.pm-fieldcards { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .pm-fieldcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pm-fieldcard { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3); padding: var(--space-6); background: var(--navy-soft);
  color: var(--on-navy); border: 1px solid var(--navy-line); border-radius: var(--r-xl); min-width: 0;
  --raised: var(--navy); --tint: var(--navy); --ctl-bg: var(--navy); --hover: var(--navy-lift); }
.pm-fieldcard__node { display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box; border-radius: 50%; background: var(--navy);
  border: 1.5px solid var(--map-edge-strong); font: 700 16px/1 var(--font-display); color: var(--on-navy-soft); }
.pm-fieldcard__title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: var(--fs-site-h3); font-weight: 700; line-height: 1.15;
  letter-spacing: -0.01em; color: var(--on-navy); text-wrap: balance; }
.pm-fieldcard .pm-fieldcard__line { margin: 0; font: 400 16px/1.55 var(--font-sans); color: var(--on-navy-soft); text-wrap: pretty; }
.pm-fieldcard__action { justify-self: start; margin-top: var(--space-2); }

/* PageIndex: "On this page", the sections to jump to (the FAQ, Privacy). FAQ: questions in sections, each a disclosure. */
.pm-page-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pm-page-index a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; box-sizing: border-box; border-radius: var(--r-pill);
  background: var(--navy-soft); border: 1px solid var(--on-navy-dim); font: 600 14px/1 var(--font-sans); color: var(--on-navy); text-decoration: none;
  transition: border-color var(--dur-state) var(--ease-standard); }
.pm-page-index a:hover, .pm-page-index a.is-hover { border-color: var(--on-navy); }
.pm-page-index a:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-offset); }
.pm-faq-section { display: grid; scroll-margin-top: calc(var(--header) + 24px); }
.pm-faq-section__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--fs-site-h3); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--on-navy); }
.pm-faq-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--navy-line); }
.pm-faq-list > li { border-bottom: 1px solid var(--navy-line); }
.pm-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 10px; margin-inline: -10px;
  cursor: pointer; list-style: none; border-radius: var(--r-md); font: 600 17px/1.4 var(--font-sans); color: var(--on-navy);
  transition: background-color var(--dur-state) var(--ease-standard); }
.pm-faq__q::-webkit-details-marker { display: none; }
.pm-faq__q:hover, .pm-faq__q.is-hover { background: var(--navy-lift); }
.pm-faq__q:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 0; }
.pm-faq__q .pm-icon { width: 16px; height: 16px; flex: none; color: var(--on-navy-soft); transform: rotate(-90deg); transition: transform var(--dur-state) var(--ease-standard); }
.pm-faq__item[open] > .pm-faq__q .pm-icon { transform: rotate(90deg); }
.pm-faq__a { max-width: 66ch; padding: 0 0 20px; font: 400 16px/1.65 var(--font-sans); color: var(--on-navy-soft); text-wrap: pretty; }
.pm-faq__a p { margin: 0; }
.pm-faq__a p + p { margin-top: 0.8em; }
.pm-faq__a a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }

/* Prose: a page that is read, not scanned (Privacy). site-body at a 66 ch measure. */
.pm-prose { max-width: 66ch; font: 400 17px/1.65 var(--font-sans); color: var(--on-navy-soft); }
.pm-prose > * { margin: 0; }
.pm-prose > * + * { margin-top: 1em; }
.pm-prose > h2 { margin-top: var(--space-12); font-family: var(--font-display); font-size: var(--fs-site-h3); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--on-navy); text-wrap: balance; }
.pm-prose > h2:first-child { margin-top: 0; }
.pm-prose > h2 + * { margin-top: var(--space-3); }
.pm-prose strong { font-weight: 700; color: var(--on-navy); }

/* MessagePage: a page that says one thing (after sign-up, 404, the Discord hop): its mark, its title, its
   lead and its actions. NextSteps numbers what happens next on a disc, as the map numbers a course. */
.pm-message__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: var(--space-6); }
.pm-message__you { display: block; width: 56px; height: 56px; }
.pm-nextsteps { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; counter-reset: pm-step; max-width: 58ch; }
.pm-nextsteps > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; counter-increment: pm-step; }
.pm-nextsteps > li::before { content: counter(pm-step); display: grid; place-items: center; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%;
  background: var(--navy-soft); border: 1.5px solid var(--map-edge-strong); font: 700 14px/1 var(--font-display); color: var(--on-navy); }
.pm-nextsteps p { margin: 6px 0 0; font: 400 16px/1.6 var(--font-sans); color: var(--on-navy-soft); text-wrap: pretty; }
.pm-nextsteps strong { font-weight: 700; color: var(--on-navy); }

/* ShareRow: pass the list on, one tap per app, or copy the link ("Copied" for 3 s, announced). */
.pm-share { display: grid; gap: var(--space-3); }
.pm-share__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-site-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--on-navy); }
.pm-share .pm-share__line { margin: 0; font: 400 16px/1.55 var(--font-sans); color: var(--on-navy-soft); }
.pm-share__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--space-2); }
.pm-share__row .pm-btn { --h: 44px; padding: 0 16px; font-size: 15px; }
.pm-share__done { display: none; }
.pm-share__copy.is-copied .pm-share__idle { display: none; }
.pm-share__copy.is-copied .pm-share__done { display: inline-flex; align-items: center; gap: 8px; }
.pm-share__copy.is-copied { border-color: var(--ember); }
@media (min-width: 641px) { .pm-share__row { display: flex; flex-wrap: wrap; } }

/* The founding form, two more ways: the aim first (the Fields page's "Ask for it"), and a form-level
   message for what is not about the address (LV-3: the connection, a pause, the security check, the
   sign-up limits), in the system's alert with the "!" in the nav key's circle. */
.pm-form--aim-first .pm-form__aim { margin: 0; }
.pm-form__alert { padding: 12px 14px; }
.pm-form__alert .pm-nav-key { color: var(--err); width: 22px; height: 22px; }
.pm-form__alert .pm-alert__title { font-size: 15px; }