/* ==========================================================================
   Plei Organizer Success, Operating Foundation
   Design system taken from Plei Brand Guide v1.0:
   colour 5.2, typography 6.x, grid and elements 7.x.
   ========================================================================== */

@font-face {
  font-family: "Clash Grotesk";
  src: url("assets/fonts/clash-var.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Primary palette, Brand Guide 5.2 */
  --cyprus: #0b3b2e;
  --pitch: #16755c;
  --emerald: #4ade80;
  --mint: #e6faf5;
  --midnight: #171d1a;

  --display: "Clash Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --text: "Inter", Arial, Helvetica, sans-serif;

  /* 12 column grid with 6% side margins, Brand Guide 7.1 (Website) */
  --pad-x: 6vw;
  --gutter: 24px;
  --measure: 34ch;

  /* Fluid type ladder. Doubling between steps, per the six type commandments. */
  --fs-hero: clamp(3.5rem, 11.2vw, 10.5rem);
  --fs-h1: clamp(2.5rem, 5.6vw, 5rem);
  --fs-h2: clamp(1.75rem, 3.1vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.7vw, 1.6rem);
  --fs-lead: clamp(1.0625rem, 1.35vw, 1.25rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cyprus);
  color: var(--mint);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.56;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

/* Visible focus everywhere, on any ground. */
:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 2px;
}
[data-theme="accent"] :focus-visible { outline-color: var(--cyprus); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--emerald); color: var(--cyprus);
  font: 700 var(--fs-small)/1 var(--text);
  padding: 14px 18px; border-radius: 6px;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------------ gate */
/* A share gate, not security: the page source still ships to the browser.
   See README for the two ways to make this enforced rather than polite. */
.gate { display: none; }
html.locked { overflow: hidden; }
html.locked .deck, html.locked .rail, html.locked .dl, html.locked .skip {
  display: none;
}
html.locked .gate {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 90;
  padding: 32px var(--pad-x);
  background: var(--cyprus);
  color: var(--mint);
}
html.locked .gate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(
    120% 74% at 28% 32%,
    color-mix(in srgb, var(--pitch) 46%, transparent) 0%, transparent 62%);
}
.gate-inner { position: relative; width: 100%; max-width: 448px; }
.gate-inner > img { margin-bottom: clamp(34px, 6vh, 56px); }
.gate-kicker { color: var(--emerald); display: flex; align-items: center; gap: 10px; }
.gate-v {
  border: 1px solid color-mix(in srgb, var(--emerald) 46%, transparent);
  border-radius: 999px; padding: 4px 8px 3px; letter-spacing: 0.1em;
}
.gate h1 { margin: 14px 0 12px; color: var(--mint); }
.gate-note { color: color-mix(in srgb, var(--mint) 62%, transparent); margin-bottom: 30px; }
.gate-form { display: grid; gap: 10px; }
.gate-row { display: flex; gap: 10px; }
.gate-row input {
  flex: 1; min-width: 0;
  font: 400 var(--fs-body)/1 var(--text);
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald) 34%, transparent);
  border-radius: 7px; padding: 15px 16px;
}
.gate-row input:focus { outline: 2px solid var(--emerald); outline-offset: 2px; }
.gate-row button {
  font: 700 var(--fs-body)/1 var(--text);
  color: var(--cyprus); background: var(--emerald);
  border: 0; border-radius: 7px; padding: 15px 24px; cursor: pointer;
  transition: background 0.2s var(--ease);
}
.gate-row button:hover { background: #68e495; }
.gate-error {
  min-height: 1.3em; margin: 2px 0 0;
  font-size: var(--fs-small); color: var(--emerald);
}
@media (max-width: 460px) {
  .gate-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-row button { transition: none; }
}

/* ---------------------------------------------------- scroll container */
.deck {
  height: 100svh;
  overflow-y: scroll;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

.section {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(88px, 11vh, 132px) var(--pad-x) clamp(96px, 12vh, 140px);
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}

/* Per section grounds. Only pairings approved in Brand Guide 5.7 are used:
   Emerald on Cyprus, Cyprus on Emerald, Mint on Pitch Green.
   Emerald never sets small text on Mint, and Mint never sets text on Emerald. */
[data-theme="dark"] {
  --bg: var(--cyprus);
  --ink: var(--mint);
  --ink-soft: color-mix(in srgb, var(--mint) 64%, transparent);
  --label: var(--emerald);
  --accent: var(--emerald);
  --rule: color-mix(in srgb, var(--emerald) 24%, transparent);
}
[data-theme="light"] {
  --bg: var(--mint);
  --ink: var(--cyprus);
  --ink-soft: color-mix(in srgb, var(--cyprus) 74%, transparent);
  --label: var(--pitch);        /* Emerald text on Mint fails contrast */
  --accent: var(--emerald);     /* so Emerald is rules and markers only */
  --rule: color-mix(in srgb, var(--cyprus) 16%, transparent);
}
[data-theme="accent"] {
  --bg: var(--emerald);
  --ink: var(--cyprus);
  --ink-soft: color-mix(in srgb, var(--cyprus) 78%, transparent);
  --label: color-mix(in srgb, var(--cyprus) 70%, transparent);
  --accent: var(--cyprus);
  --rule: color-mix(in srgb, var(--cyprus) 22%, transparent);
}

.inner { width: 100%; max-width: 1560px; margin: 0 auto; }

/* ------------------------------------------------------------ typography */
.label {
  font: 700 var(--fs-label)/1 var(--text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
}
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(20px, 3.2vh, 34px);
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
  max-width: 190px;
}

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); line-height: 1.05; }
.h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.005em; }

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 62ch;
}
.body { color: var(--ink-soft); max-width: 46ch; }

.pill {
  display: inline-block;
  font: 700 var(--fs-label)/1 var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 12px 6px;
  border-radius: 999px;
  background: var(--emerald);
  color: var(--cyprus);
  white-space: nowrap;
}
[data-theme="accent"] .pill { background: var(--cyprus); color: var(--emerald); }

/* The brand dot field: intersecting points of a goal net, Brand Guide 7.x */
.dotfield {
  position: absolute; pointer-events: none;
  top: clamp(70px, 9vh, 108px); right: var(--pad-x);
  width: min(30vw, 330px); aspect-ratio: 14 / 5;
  opacity: 0.16;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 22px 22px;
  color: var(--accent);
}

/* --------------------------------------------------------------- 01 cover */
#cover { justify-content: space-between; }
#cover::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(
    120% 78% at 26% 34%,
    color-mix(in srgb, var(--pitch) 44%, transparent) 0%,
    transparent 62%);
}
.cover-top {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.cover-top img { width: clamp(96px, 9vw, 132px); height: auto; }
.cover-mid { position: relative; padding: clamp(40px, 7vh, 80px) 0; }
.cover-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: 0.86;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(22px, 3.4vh, 40px);
}
.cover-title span { display: block; }
.cover-title span:last-child { color: var(--emerald); }
.cover-story {
  max-width: 46ch;
  margin-bottom: clamp(26px, 4vh, 40px);
  padding-top: clamp(20px, 3vh, 30px);
  border-top: 1px solid var(--rule);
}
.cover-sub {
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  color: var(--mint);
  margin-bottom: 10px;
}
.cover-by { color: var(--ink-soft); font-size: var(--fs-lead); }

.cover-bottom { position: relative; }
.cue {
  display: inline-flex; align-items: center; gap: 16px;
  text-decoration: none; padding: 8px 0;
}
.cue-track {
  position: relative; width: 1px; height: 62px;
  background: var(--rule); overflow: hidden;
}
.cue-track::after {
  content: ""; position: absolute; left: -2.5px; top: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald);
  animation: fall 2.4s var(--ease) infinite;
}
@keyframes fall {
  0% { transform: translateY(-8px); opacity: 0; }
  22% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translateY(62px); opacity: 0; }
}
.cue-text { display: grid; gap: 5px; }
.cue-next { font-size: var(--fs-small); color: var(--ink); }

/* ------------------------------------------------- 02 where we are */
.split {
  display: grid; gap: clamp(36px, 5vw, 88px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.stat-head { margin-bottom: clamp(34px, 5.4vh, 64px); max-width: 22ch; }

/* Both columns of this section open with the same 2px rule on the same line. */
.markets, .bigstat { border-top: 2px solid var(--ink); padding-top: 22px; }
.markets { display: grid; gap: clamp(24px, 3.4vh, 38px); }
.markets-total { display: flex; align-items: baseline; gap: 14px; }
.markets-total b {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.5rem, 4.4vw, 3.75rem); line-height: 0.9;
  letter-spacing: -0.02em;
}
.clusters {
  display: grid; gap: clamp(22px, 2.6vw, 44px);
  grid-template-columns: repeat(3, auto); justify-content: start;
}
.cluster { display: grid; gap: 14px; align-content: start; }
.dots {
  display: grid; gap: 8px;
  grid-template-columns: repeat(5, 1fr);
  width: max-content;
}
.cluster:nth-child(2) .dots { grid-template-columns: repeat(4, 1fr); }
.dot { width: 15px; height: 15px; border-radius: 50%; }
.dot--on { background: var(--emerald); }
.dot--off {
  border: 1.6px solid color-mix(in srgb, var(--cyprus) 46%, transparent);
}
.dot--rest { background: color-mix(in srgb, var(--pitch) 34%, transparent); }
.cluster b {
  font-family: var(--display); font-weight: 600;
  font-size: 1.4rem; line-height: 1; display: block;
}
.cluster span { font-size: var(--fs-small); color: var(--ink-soft); }

/* The market count on the left carries the weight of this section; New York is
   one supporting example, so it reads as a sentence, not a second hero number. */
.bigstat .label { margin-bottom: 14px; }
.bigstat-line {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  line-height: 1.24; letter-spacing: -0.008em;
  max-width: 30ch; text-wrap: balance;
}
.bigstat-line b { font-weight: 600; }
.falling {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-weight: 500;
  font-size: var(--fs-small); letter-spacing: 0.01em;
}
.falling svg { width: 15px; height: 26px; flex: none; color: var(--label); }

/* ------------------------------------------------ 02 what the beta proved */
/* Three organizer types, not two people's numbers: the visual weight goes on
   the theory (assets, not segment) holding across established/alpha/facility,
   not on a stat that reads as "half our supply depends on two accounts." */
.segments {
  display: grid; gap: clamp(24px, 3.4vw, 44px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(36px, 5.4vh, 64px) 0 clamp(34px, 5vh, 58px);
}
.segment { border-top: 2px solid var(--accent); padding-top: 20px; }
.segment .label { display: block; margin-bottom: 10px; }
.segment b {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.1; letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.segment p { color: var(--ink); opacity: 0.82; max-width: 26ch; }

/* --------------------------------------------------- 03 who we target */
.assets {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  margin: clamp(32px, 5vh, 60px) 0 clamp(30px, 4.6vh, 54px);
}
.asset { display: grid; gap: 16px; align-content: start; padding-right: clamp(20px, 3vw, 56px); }
.asset:last-child { padding-right: 0; padding-left: clamp(20px, 3vw, 56px); }
.asset svg { width: 54px; height: 54px; color: var(--accent); }
.asset .h3 { margin-top: 6px; }
.asset p { color: var(--ink-soft); max-width: 40ch; }
.asset-join {
  display: grid; place-items: center; gap: 14px;
  grid-template-rows: 1fr auto 1fr;
  width: 1px; background: var(--rule); position: relative;
}
.asset-join span {
  grid-row: 2; background: var(--bg); padding: 10px 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.closer {
  border-top: 2px solid var(--accent); padding-top: clamp(22px, 3vh, 32px);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.375rem, 2.35vw, 2.125rem);
  line-height: 1.14; letter-spacing: -0.008em;
  max-width: 46ch;
}

/* -------------------------------------------------- 04 what we promise */
#promise .inner { max-width: 1400px; }
.promise-statement {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.125rem, 5.4vw, 5rem);
  line-height: 1.0; letter-spacing: -0.022em;
  margin-bottom: clamp(32px, 5vh, 60px);
  text-wrap: balance;
}
/* The rule runs the full measure of the section; only the text is constrained. */
.promise-note {
  border-top: 2px solid var(--accent);
  padding-top: clamp(20px, 2.8vh, 30px);
  font-size: clamp(1.0625rem, 1.7vw, 1.4375rem);
  font-weight: 500; color: var(--ink);
}
.promise-note span { display: block; max-width: 46ch; text-wrap: balance; }

/* ------------------------------------------------------------ 05 the plan */
/* Same touchline device as the flow diagrams, for continuity. */
.phases {
  display: grid;
  column-gap: clamp(28px, 3vw, 52px);
  row-gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* num, badge, title, body, done: five shared rows so every phase lines up */
  grid-template-rows: auto auto auto 1fr auto;
  margin-top: clamp(34px, 5vh, 62px);
}
.phase {
  display: grid; gap: 14px; align-content: start;
  padding-top: 22px; position: relative;
}
@supports (grid-template-rows: subgrid) {
  .phase {
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    align-content: initial;
  }
}
.phase::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: var(--accent); opacity: var(--w);
}
.phase::after {
  content: ""; position: absolute; top: -7px; left: 0;
  width: 1.5px; height: 15px; background: var(--accent); opacity: var(--w);
}
.phase-num {
  font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  line-height: 1; color: var(--pitch); opacity: var(--w);
}
.phase-when { color: var(--ink-soft); font-size: var(--fs-small); }
.phase p { color: var(--ink-soft); }
.done {
  border-left: 3px solid var(--emerald);
  padding-left: 16px; margin-top: 6px;
}
.done .label { display: block; margin-bottom: 6px; }
.done p { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------ 06 read the plan */
#read .inner { display: grid; gap: clamp(40px, 5vw, 80px); grid-template-columns: 7fr 5fr; align-items: start; }
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--emerald); color: var(--cyprus);
  font: 700 var(--fs-lead)/1 var(--text);
  text-decoration: none;
  padding: 21px 28px; border-radius: 8px;
  margin: clamp(28px, 4vh, 44px) 0 clamp(30px, 4vh, 44px);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.cta svg { width: 30px; height: 12px; }
.cta:hover, .cta:focus-visible { background: #68e495; transform: translateY(-2px); }
/* Emerald-on-emerald would vanish on the accent ground, so the CTA inverts. */
[data-theme="accent"] .cta { background: var(--cyprus); color: var(--emerald); }
[data-theme="accent"] .cta:hover, [data-theme="accent"] .cta:focus-visible {
  background: #0f5240;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(28px, 4vh, 44px) 0 clamp(30px, 4vh, 44px); }
.cta-row .cta { margin: 0; }

/* A second, lower-priority document: same shape as the primary CTA, outlined
   rather than filled so it reads as secondary without looking disabled.
   Specificity bumped past [data-theme="accent"] .cta, which otherwise wins
   the tie and fills this in solid on the Emerald closing section. */
.cta-row .cta.cta--ghost {
  background: transparent; color: var(--cyprus);
  border: 1.5px solid color-mix(in srgb, var(--cyprus) 46%, transparent);
}
.cta-row .cta.cta--ghost:hover, .cta-row .cta.cta--ghost:focus-visible {
  background: color-mix(in srgb, var(--cyprus) 10%, transparent);
  transform: translateY(-2px);
}

.docindex-note {
  margin-top: 16px; color: var(--ink-soft); font-size: var(--fs-small);
  max-width: 42ch;
}

/* A quiet text link used inline, mid-section, for a referenced document
   rather than the primary download. */
.inline-link { margin-top: clamp(20px, 3vh, 30px); }
.inline-link a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); text-decoration: none;
  font-weight: 600; font-size: var(--fs-small);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-bottom: 2px;
}
.inline-link a:hover { border-bottom-color: var(--accent); }
.inline-link svg { width: 13px; height: 13px; }

.docindex { border-top: 1px solid var(--rule); }
.docindex li {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
}
.docindex .label { color: var(--label); }
.docindex span:last-child { color: var(--ink); }

/* ------------------------------------------------------- 05 / 06 flow slides */
/* The artwork sits on the same Cyprus as the section, so its edges disappear and
   the diagram reads as page layout rather than a pasted-in image. */
.flowslide .inner { max-width: 1600px; }
.flowfig { margin: clamp(24px, 4vh, 44px) 0 0; }
/* The artwork is always drawn on Cyprus. On a dark section that ground merges
   into the page; on a light or accent section the same image reads as a
   deliberate card, so it gets a frame rather than floating edge to edge. */
.flowscroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  border-radius: 12px; border: 1px solid var(--rule);
}
.flowfig img {
  width: 100%; max-height: 62svh; object-fit: contain; object-position: left top;
}
.flowfig figcaption { margin-top: 16px; }
.flowfig figcaption a {
  display: inline-block;
  font: 700 var(--fs-label)/1 var(--text);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--emerald); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--emerald) 42%, transparent);
  padding-bottom: 4px;
}
.flowfig figcaption a:hover { border-bottom-color: var(--emerald); }

.foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: clamp(44px, 6vh, 76px); padding-top: 22px;
  border-top: 1px solid var(--rule);
  grid-column: 1 / -1;
}
.foot img { width: 78px; height: auto; }

/* ------------------------------------------------------------- nav rail */
.rail {
  position: fixed; z-index: 40;
  right: clamp(14px, 2.1vw, 30px); top: 50%; transform: translateY(-50%);
  display: grid; gap: 4px;
}
.rail a {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  text-decoration: none; padding: 7px 0;
  color: var(--rail-ink, var(--mint));
}
.rail .txt {
  font: 700 var(--fs-label)/1 var(--text);
  letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; transform: translateX(6px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
  white-space: nowrap;
}
.rail .tick {
  width: 26px; height: 2px; flex: none;
  background: currentColor; opacity: 0.34;
  transition: width 0.24s var(--ease), opacity 0.24s var(--ease);
}
.rail a:hover .txt, .rail a:focus-visible .txt { opacity: 0.72; transform: none; }
.rail a[aria-current="true"] { color: var(--rail-active, var(--emerald)); }
.rail a[aria-current="true"] .tick { width: 42px; opacity: 1; }
.rail a[aria-current="true"] .txt { opacity: 1; transform: none; }

/* -------------------------------------------------- sticky download pill */
.dl {
  position: fixed; z-index: 45;
  right: clamp(14px, 2.1vw, 30px); bottom: clamp(16px, 2.4vh, 28px);
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--emerald); color: var(--cyprus);
  font: 700 var(--fs-small)/1 var(--text);
  text-decoration: none;
  padding: 15px 20px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 26px rgba(11, 59, 46, 0.34);
  transition: padding 0.3s var(--ease), opacity 0.3s var(--ease),
              transform 0.2s var(--ease);
}
.dl svg { width: 22px; height: 11px; flex: none; }
.dl.is-compact { opacity: 0.58; padding: 13px 16px; }
.dl:hover, .dl:focus-visible { opacity: 1; transform: translateY(-2px); }
/* Emerald on Emerald would disappear, so the pill inverts over that section. */
.dl.on-accent {
  background: var(--cyprus); color: var(--emerald);
  box-shadow: 0 6px 26px rgba(11, 59, 46, 0.22);
}

/* ------------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.66s var(--ease), transform 0.66s var(--ease);
}
.reveal:nth-child(2).is-in { transition-delay: 0.07s; }
.reveal:nth-child(3).is-in { transition-delay: 0.14s; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  :root { --pad-x: 32px; --gutter: 24px; }
  .rail { display: none; }
  #read .inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  /* Cancel the shared subgrid, or `grid-row: 1 / -1` spawns implicit columns
     and the phases sit side by side instead of stacking. */
  .phases {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: clamp(30px, 4vh, 44px);
  }
  .phase {
    grid-row: auto;
    grid-template-rows: none;
    align-content: start;
  }
  .assets { grid-template-columns: 1fr; gap: clamp(28px, 4vh, 40px); }
  .segments { grid-template-columns: 1fr; gap: 26px; }
  .asset, .asset:last-child { padding: 0; }
  .asset-join { width: auto; height: 1px; }
  .asset-join span {
    writing-mode: horizontal-tb; transform: none; padding: 0 14px;
  }
  .section { min-height: auto; padding-top: 96px; padding-bottom: 104px; }
  #cover { min-height: 100svh; }
  .deck { scroll-snap-type: none; }

  /* A landscape flow is unreadable at phone width, so let it pan sideways at a
     legible size instead of shrinking it into illegibility. */
  .flowfig img { width: auto; height: auto; max-height: none; min-width: 880px; }
  .flowscroll {
    -webkit-overflow-scrolling: touch;
    box-shadow: inset -18px 0 18px -18px rgba(11, 59, 46, 0.85);
  }
  .flowfig figcaption::before {
    content: "Drag to pan, or ";
    font-weight: 400; letter-spacing: 0.04em; text-transform: none;
    color: var(--ink-soft);
  }
}

@media (max-width: 560px) {
  :root { --pad-x: 24px; }
  .clusters { grid-template-columns: repeat(2, auto); }
  .cover-title { line-height: 0.92; }
  /* Centre without constraining the shrink-to-fit width, or the label wraps.
     Shortened to "PDF" so the floating pill stops covering a whole line. */
  .dl { left: 0; right: 0; margin: 0 auto; width: max-content; }
  .dl:hover, .dl:focus-visible { transform: translateY(-2px); }
  .dl-long { display: none; }
  .foot { flex-direction: column; align-items: flex-start; }
}

/* Short viewports: never trap the reader inside a snapped section. */
@media (max-height: 700px) {
  .deck { scroll-snap-type: none; }
  .section { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; scroll-snap-type: none; }
  .cue-track::after { animation: none; top: 26px; opacity: 1; }
  .reveal { opacity: 1; transform: none; }
  .reveal.is-in { transition: none; }
  .cta, .dl, .figures a, .rail .txt, .rail .tick { transition: none; }
  .cta:hover, .dl:hover { transform: none; }
}

@media print {
  .rail, .dl, .cue, .skip { display: none; }
  .deck { height: auto; overflow: visible; }
  .section { min-height: auto; page-break-after: always; }
}

/* ==========================================================================
   Resources: a living reference library for the team, not a scroll deck.
   Same tokens and type scale as the pitch, laid out as a normal flowing
   document instead of snapped 100svh sections, since it is meant to be
   skimmed and searched rather than presented.
   ========================================================================== */
.doc-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 22px var(--pad-x);
  background: var(--cyprus); color: var(--mint);
}
.doc-header img { width: clamp(64px, 7vw, 78px); height: auto; }
.doc-back {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 var(--fs-label)/1 var(--text);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--emerald); text-decoration: none;
}
.doc-back svg { width: 13px; height: 13px; transform: rotate(180deg); flex: none; }
.doc-back:hover, .doc-back:focus-visible { opacity: 0.78; }

.doc-block { padding: clamp(56px, 8vh, 100px) var(--pad-x); background: var(--bg); color: var(--ink); }
.doc-block .inner { max-width: 1240px; }
.doc-hero .lead { margin-top: 16px; max-width: 62ch; }
.doc-index-label { margin-top: clamp(38px, 5.4vh, 60px); display: block; }
.doc-index-label + .docindex { margin-top: 14px; }

.roster-intro { max-width: 66ch; margin-bottom: clamp(26px, 3.6vh, 40px); }
.roster-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 clamp(48px, 7vh, 86px);
  border-top: 1px solid var(--rule);
}
.roster { width: 100%; min-width: 680px; border-collapse: collapse; }
.roster th {
  text-align: left; padding: 13px 16px 13px 0;
  font: 700 var(--fs-label)/1 var(--text);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--label); border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.roster td {
  padding: 15px 16px 15px 0; border-bottom: 1px solid var(--rule);
  vertical-align: top; font-size: var(--fs-small); color: var(--ink-soft);
}
.roster th:first-child, .roster td:first-child { padding-left: 0; }
.roster td b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

.patterns { display: grid; gap: clamp(40px, 6vh, 68px); margin-bottom: clamp(48px, 7vh, 86px); }
.pattern {
  display: grid; grid-template-columns: auto 1fr; column-gap: clamp(20px, 3vw, 40px);
  border-top: 2px solid var(--accent); padding-top: 22px;
}
.pattern-num {
  font-family: var(--display); font-weight: 600; font-size: 2rem;
  line-height: 1; color: var(--pitch); opacity: 0.55;
}
.pattern-body { display: grid; gap: 12px; align-content: start; }
.pattern-body h3 { max-width: 34ch; }
.pattern-body p { color: var(--ink-soft); max-width: 68ch; }
.case {
  margin-top: 2px; padding: 16px 20px;
  border-left: 3px solid var(--emerald);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  display: grid; gap: 6px; max-width: 62ch;
}
.case .label { display: block; }
.case b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.case p { margin: 0; color: var(--ink); opacity: 0.86; max-width: none; }

.doc-block .closer { margin-bottom: clamp(40px, 6vh, 70px); }

@media (max-width: 640px) {
  .pattern { grid-template-columns: 1fr; row-gap: 10px; }
  .pattern-num { opacity: 0.4; }
}

.hub-header { display: flex; align-items: center; justify-content: space-between; }
.hub-nav { display: flex; gap: clamp(20px, 3vw, 32px); }
.hub-nav a {
  font: 700 var(--fs-label)/1 var(--text);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mint); text-decoration: none; opacity: 0.78;
}
.hub-nav a:hover, .hub-nav a:focus-visible { opacity: 1; color: var(--emerald); }

/* ============================================================ organizer hub
   FAQ accordion, training-video grid, and the request form. Same doc-block
   scaffold and theme tokens as the rest of the site, three new patterns. */

/* -------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: clamp(18px, 2.6vh, 24px) 0;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  color: var(--ink); cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: rotate(45deg); transition: transform 0.2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:hover, .faq-item summary:focus-visible { color: var(--accent); }
.faq-item p {
  color: var(--ink-soft); max-width: 66ch;
  padding: 0 0 clamp(20px, 3vh, 28px);
}

/* Each group is a collapsible row of its own, closed to start, so the FAQ is
   four lines until someone opens one. Pitch text (Emerald text fails contrast
   on Mint) over an Emerald rule marks a group as a step above its questions. */
.faq-section + .faq-section { margin-top: clamp(14px, 2vh, 20px); }
.faq-group {
  display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.6rem); line-height: 1.1;
  letter-spacing: -0.005em; color: var(--label);
  padding: 14px 0 12px; border-bottom: 3px solid var(--accent);
}
.faq-group::-webkit-details-marker { display: none; }
.faq-group:hover, .faq-group:focus-visible { color: var(--ink); }
.faq-count {
  margin-left: auto; font: 600 var(--fs-small)/1 var(--text);
  letter-spacing: 0; color: var(--ink-soft);
}
.faq-group::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--label); border-bottom: 2px solid var(--label);
  transform: rotate(45deg); transition: transform 0.2s var(--ease);
}
.faq-section[open] > .faq-group::after { transform: rotate(-135deg); }
.faq-group + .faq { border-top: 0; }

/* --------------------------------------------------------- training videos */
.video-grid {
  display: grid; gap: clamp(18px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.video-card {
  border: 1px solid var(--rule); border-radius: 10px;
  padding: clamp(20px, 2.6vw, 26px);
  display: grid; gap: 12px; align-content: start;
}
.video-card .thumb {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  display: grid; place-items: center;
}
.video-card .thumb svg { width: 30px; height: 30px; opacity: 0.5; }
.video-card h3 { font-size: 1.05rem; }
.video-card .pill { justify-self: start; }

/* Videos that are up: a small poster with a play button. It opens the player
   in a dialog, so a card stays small on the page. */
.thumb--play {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  cursor: pointer; overflow: hidden; background: #000;
}
.thumb--play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb--play .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(11, 59, 46, 0.5), rgba(11, 59, 46, 0.1));
}
.video-card .thumb--play .play svg {
  box-sizing: content-box; width: 20px; height: 20px; padding: 11px; opacity: 1;
  border-radius: 999px; background: var(--emerald); color: var(--cyprus);
  fill: currentColor; transition: transform 0.2s var(--ease);
}
.thumb--play:hover .play svg, .thumb--play:focus-visible .play svg { transform: scale(1.12); }
.video-card .meta {
  font: 600 var(--fs-small)/1 var(--text); letter-spacing: 0.02em; color: var(--ink-soft);
}

dialog.player {
  width: min(1120px, 94vw); max-width: none; max-height: 94vh; padding: 14px 14px 16px;
  border: 1px solid rgba(74, 222, 128, 0.28); border-radius: 12px;
  background: #0b3b2e; color: #e6faf5; overflow: hidden;
}
dialog.player::backdrop { background: rgba(3, 22, 17, 0.84); }
.player-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 0 2px 12px;
}
.player-bar .h3 { margin: 0; font-size: 1.05rem; color: #e6faf5; }
.player-close {
  flex: none; cursor: pointer; padding: 9px 14px; border-radius: 999px;
  font: 700 var(--fs-label)/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase;
  color: #4ade80; background: transparent; border: 1px solid rgba(74, 222, 128, 0.4);
}
.player-close:hover, .player-close:focus-visible { background: #4ade80; color: #0b3b2e; }
dialog.player video {
  display: block; width: 100%; max-height: calc(94vh - 92px);
  background: #000; border-radius: 8px;
}

/* -------------------------------------------------------------- the form */
.request-form {
  display: grid; gap: clamp(16px, 2.2vh, 20px);
  max-width: 640px; margin-top: clamp(28px, 4vh, 40px);
}
.request-form .row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 8px; }
.field label {
  font: 700 var(--fs-label)/1 var(--text);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--label);
}
.field input, .field select, .field textarea {
  font: 400 var(--fs-body)/1.4 var(--text);
  color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--rule); border-radius: 7px;
  padding: 13px 14px; width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--emerald); outline-offset: 1px;
}
.request-form button {
  justify-self: start; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--emerald); color: var(--cyprus);
  font: 700 var(--fs-body)/1 var(--text);
  border: none; border-radius: 8px; cursor: pointer;
  padding: 15px 24px;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.request-form button:hover, .request-form button:focus-visible {
  background: #68e495; transform: translateY(-2px);
}
.request-form button svg { width: 22px; height: 10px; flex: none; }
.form-note { color: var(--ink-soft); font-size: var(--fs-small); max-width: 52ch; }
.form-success {
  display: none; padding: 16px 20px; border-radius: 8px;
  border-left: 3px solid var(--emerald);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.form-success.is-shown { display: block; }
.form-success p { color: var(--ink); margin: 0; }

@media (max-width: 640px) {
  .request-form .row { grid-template-columns: 1fr; }
}

/* Resources: samples an organizer can copy. Same collapsible rows as the FAQs. */
.res { padding-top: 4px; }
.res-tip { margin: 16px 0 4px; max-width: 66ch; color: var(--ink-soft); }
.res-tip b { color: var(--ink); }
.sample {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.sample-text { margin: 0; max-width: 72ch; color: var(--ink); }
.sample-text--title { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.sample-text--soft { color: var(--ink-soft); }
.sample-kind {
  margin: 0 0 6px; font: 700 var(--fs-label)/1 var(--text);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--label);
}
.copy-btn {
  flex: none; cursor: pointer; padding: 8px 14px; border-radius: 999px;
  font: 700 var(--fs-label)/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--label); background: transparent;
  border: 1px solid color-mix(in srgb, var(--label) 45%, transparent);
}
.copy-btn:hover, .copy-btn:focus-visible, .copy-btn.is-copied {
  background: var(--emerald); color: var(--cyprus); border-color: var(--emerald);
}
.res-list { margin: 14px 0 6px; padding-left: 1.2em; max-width: 66ch; color: var(--ink-soft); }
.res-list li { margin: 8px 0; }
.res-list b { color: var(--ink); }
@media (max-width: 640px) { .sample { flex-direction: column; gap: 12px; } }