/* WMBT home page. Sits on tokens.css, wmbt-ui.css and site.css.
   Only var(--token) colours. No gradients. No glass. One Flame focal per viewport.
   Soft edges are made with blurred box-shadows in the Night token, never with gradients.
   State classes are set on the html element by home.js:
     .home-motion  motion is allowed
     .home-pin     wide and tall enough to pin the chain and the book
     .home-band    small screen with a live field: the chain forms play in a sticky band
     .no-webgl     no WebGL: the canvas is hidden and still art stands in
     .home-still   no WebGL or reduced motion: the surveyed summit still stands in for the live summit and its route */

.home {
  --home-display: clamp(var(--primitive-font-size-5xl), min(8.2vw, 13svh), calc(var(--primitive-font-size-8xl) * 1.4));
  --home-statement: clamp(var(--primitive-font-size-4xl), 6.2vw, calc(var(--primitive-font-size-8xl) * 1.05));
  --home-h2: clamp(var(--primitive-font-size-4xl), 4.6vw, var(--primitive-font-size-7xl));
  --home-step: clamp(var(--primitive-font-size-4xl), 4.4vw, var(--primitive-font-size-6xl));
  --home-view: calc(100svh - var(--nav-height));
  --home-pad: clamp(var(--primitive-space-9), 12vw, calc(var(--primitive-space-12) * 1.5));
  --home-scrim: color-mix(in srgb, var(--color-background) 64%, transparent);
  --home-hit: calc(var(--primitive-space-8) - var(--primitive-space-1));
  --home-band-h: 40svh;
  background-color: var(--color-background);
  overflow-x: clip;
}
/* wmbt-ui sets scroll-padding-top to the header plus one step; this takes the step back
   so an in-page link lands the section flush under the sticky header */
.home main > section { scroll-margin-top: calc(var(--primitive-space-5) * -1); position: relative; }

/* site.css override: opaque bands hide the fixed field so dense content stays quiet */
.site-content main > section.home-solid { background-color: var(--color-background); }
.site-content main > section.home-solid--deep { background-color: var(--color-surface); }

.home .site-canvas { transition: opacity 600ms var(--motion-easing); }
.home .site-canvas[data-zone="mid"] { opacity: 0; }
.home .site-canvas.is-flow { position: absolute; height: var(--field-h, 100svh); }
/* small screens, chain section: the field becomes an opaque band pinned under the header; step text scrolls beneath it */
.home .site-canvas.is-band {
  inset-block: var(--nav-height) auto;
  height: var(--home-band-h);
  z-index: 2;
  background-color: var(--color-background);
  box-shadow: 0 var(--primitive-space-3) var(--primitive-space-4) var(--color-background);
  transition-duration: 200ms;
}
.home:has([data-site-nav-toggle][aria-expanded="true"]) .site-canvas.is-band { visibility: hidden; }
.no-webgl .site-canvas,
.site-canvas[data-fallback="1"] { display: none; }
/* reduced motion: the still carries the summit and the route; the field shows only for the closing ring */
.home-still .site-canvas:not([data-zone="closing"]) { opacity: 0; }

/* route labels: placed by home.js from the field's route, each frame. They sit with the field, under the page
   content, so an opaque section covers them the way it covers the field. */
.route-labels { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.route-labels.is-band { z-index: 2; }
.home-still .route-labels,
.home:has([data-site-nav-toggle][aria-expanded="true"]) .route-labels.is-band { display: none; }
.route-label {
  position: absolute;
  inset: 0 auto auto 0;
  max-width: 24ch;
  padding: var(--primitive-space-1) calc(var(--primitive-space-1) * 1.5);
  background-color: var(--home-scrim);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  line-height: var(--primitive-font-leading-snug);
  letter-spacing: var(--primitive-font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-foreground);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--motion-easing), visibility 0s linear 240ms;
  will-change: transform;
}
.route-label.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

.home-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--primitive-font-weight-black);
  font-size: var(--home-h2);
  line-height: var(--primitive-font-leading-none);
  letter-spacing: var(--primitive-font-tracking-tighter);
  text-wrap: balance;
}
.home .w-eyebrow { margin: 0; font-size: var(--primitive-font-size-xs); }
.home .wmbt-icon { --icon-signal: currentColor; }
.home .w-btn--link { min-height: var(--home-hit); }
.home .site-footer a { display: inline-block; padding-block: var(--primitive-space-3); }
.home .site-footer .w-brand { display: inline-flex; }

/* shared mono caption under a quotation */
.home-cite {
  display: block;
  margin-block-start: var(--primitive-space-4);
  line-height: var(--primitive-font-leading-normal);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground-subtle);
}

/* still art that ships with its own backdrop: pull the backdrop down to Night and feather the edge */
.home-art { position: relative; overflow: hidden; background-color: var(--color-background); }
.home-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.78) contrast(1.5); }
.home-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 var(--primitive-space-6) var(--primitive-space-4) var(--color-background);
}

/* ============================================================ 1. HERO */
/* one warm focal in the hero: the focus ring here is Rainlight, not Flame */
.hero { min-height: var(--home-view); display: flex; overflow: clip; --color-ring: var(--color-foreground); }
.hero__inner { position: relative; z-index: 1; display: flex; align-items: center; padding-block: var(--primitive-space-7); }
.hero__copy {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100%, 36rem);
}
/* soft Night scrim so the field never fights the copy */
.hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--primitive-space-5) * -1);
  background-color: var(--home-scrim);
  box-shadow: 0 0 var(--primitive-space-9) var(--primitive-space-8) var(--home-scrim);
}
.hero__head { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.hero__eyebrow { margin-block-end: var(--primitive-space-5); }
.hero__title {
  margin: 0;
  width: max-content;
  max-width: 100vw;
  font-family: var(--font-display);
  font-weight: var(--primitive-font-weight-black);
  font-size: var(--home-display);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-inline-start: -0.04em;
}
.hero__lede {
  margin: var(--primitive-space-5) 0 0;
  max-width: 30ch;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(var(--primitive-font-size-xl), 1.9vw, var(--primitive-font-size-2xl));
  line-height: var(--primitive-font-leading-snug);
  letter-spacing: var(--primitive-font-tracking-tight);
  color: var(--color-foreground);
  text-wrap: balance;
}
.hero__band { display: none; }
.hero__band-still { display: none; }

.goal { width: 100%; margin-block-start: var(--primitive-space-7); }
.goal__label {
  margin: 0 0 var(--primitive-space-3);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  font-weight: var(--primitive-font-weight-medium);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground);
}
.goal__chips { display: flex; flex-wrap: wrap; gap: var(--primitive-space-2); }
.goal__chip { height: var(--button-height-md); padding-inline: var(--primitive-space-3); background-color: var(--color-background); }
.goal__form {
  display: flex;
  align-items: center;
  gap: var(--primitive-space-3);
  margin-block-start: var(--primitive-space-3);
  max-width: 30rem;
  border-block-end: var(--primitive-border-hairline) solid var(--color-border-strong);
}
.goal__form:focus-within { border-color: var(--color-foreground); }
.goal__type-label,
.goal__count {
  flex: none;
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground-subtle);
}
.goal__count { letter-spacing: var(--primitive-font-tracking-wide); font-variant-numeric: tabular-nums; }
.goal__count.is-full { color: var(--color-foreground); }
.goal__input {
  flex: 1;
  min-width: 0;
  height: var(--home-hit);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
}
.goal__input::placeholder { color: var(--color-foreground-subtle); opacity: 0.7; }
.goal__input:focus { outline: none; }
.goal__input:focus-visible { outline: var(--primitive-border-thick) solid var(--color-ring); outline-offset: var(--primitive-border-thick); }
.goal__go {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--home-hit);
  height: var(--home-hit);
  border: 0;
  background: transparent;
  color: var(--color-foreground);
  cursor: pointer;
}
.goal__go svg { transition: transform var(--motion-hover) var(--motion-easing); }
.goal__go:hover svg { transform: translateX(var(--primitive-space-1)); }
.goal__teaser {
  margin: var(--primitive-space-4) 0 0;
  min-height: calc(var(--primitive-space-5) * 2);
  max-width: 34rem;
  font-size: var(--primitive-font-size-lg);
  line-height: var(--primitive-font-leading-snug);
  color: var(--color-foreground-muted);
}
.goal__teaser b { color: var(--color-foreground); font-weight: var(--primitive-font-weight-semibold); }
.hero__actions { display: flex; align-items: center; gap: var(--primitive-space-5); flex-wrap: wrap; margin-block-start: var(--primitive-space-5); }

.hero__fallback { display: none; }
.home-still .hero__fallback {
  display: block;
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 58%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

.scroll-hint {
  position: absolute;
  inset-inline-end: var(--primitive-space-5);
  inset-block-end: var(--primitive-space-7);
  display: grid;
  justify-items: center;
  gap: var(--primitive-space-3);
  min-width: var(--home-hit);
  color: var(--color-foreground-subtle);
  text-decoration: none;
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
}
.scroll-hint span { writing-mode: vertical-rl; }
.scroll-hint__s { fill: none; stroke: currentColor; stroke-width: 1; }
.scroll-hint:hover { color: var(--color-foreground); }
.home-motion .scroll-hint__s { animation: hint 2.4s var(--motion-easing) infinite; }
.home-motion .scroll-hint__s:nth-child(2) { animation-delay: 0.3s; }
.home-motion .scroll-hint__s:nth-child(3) { animation-delay: 0.6s; }
@keyframes hint {
  0%, 60%, 100% { opacity: 0.35; }
  25% { opacity: 1; }
}

/* ============================================================ 2. PREMISE */
.site-content main > section.premise { background-color: var(--color-background); }
/* the loop sits pinned behind the statement; a flat Night scrim keeps the type in contrast */
.premise__media {
  position: sticky;
  inset-block-start: var(--nav-height);
  height: var(--home-view);
  overflow: hidden;
  background-color: var(--color-background);
}
.premise__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.premise__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--home-scrim);
  box-shadow: inset 0 0 var(--primitive-space-11) var(--primitive-space-9) var(--color-background);
}
/* the copy is pulled up over the pinned loop. The pull is on the copy, not a negative margin under the loop:
   a sticky box with no margin-box height slides out of its section and covers the one below. */
.premise__inner { position: relative; margin-block-start: calc(var(--home-view) * -1); padding-block: var(--home-pad); }
/* alpha ramps where the opaque premise meets the field above and below it */
.premise::before,
.premise::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 0;
  pointer-events: none;
  box-shadow: 0 0 var(--primitive-space-9) var(--primitive-space-7) var(--color-background);
}
.premise::before { inset-block-start: 0; }
.premise::after { inset-block-end: 0; }
.premise .w-eyebrow { margin-block-end: var(--primitive-space-6); }
.premise__title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: var(--primitive-font-weight-black);
  font-size: var(--home-statement);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.premise__title .w { display: inline-block; white-space: pre; }
.premise__pull { margin: 0; max-width: 28rem; }
.premise__pull blockquote { margin: 0; }
.premise__pull p {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(var(--primitive-font-size-2xl), 2.6vw, var(--primitive-font-size-4xl));
  line-height: var(--primitive-font-leading-tight);
  letter-spacing: var(--primitive-font-tracking-tight);
  color: var(--color-foreground);
  text-wrap: balance;
}
.premise__pull figcaption,
.book-sec figcaption {
  margin-block-start: var(--primitive-space-4);
  line-height: var(--primitive-font-leading-normal);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground-muted);
}
/* over the loop the caption takes the full foreground: 5.7 to 1 even on the brightest dot under the scrim */
.premise__pull figcaption { color: var(--color-foreground); }
.premise__pull--a { margin-block-start: var(--home-pad); }
.premise__pull--b { margin-block-start: calc(var(--home-pad) * 1.2); margin-inline-start: 14%; }

/* ============================================================ 3. HOW IT WORKS */
.how { padding-block: var(--primitive-space-11); }
.how__head { margin-block-end: var(--primitive-space-8); }
.how__title {
  margin: var(--primitive-space-3) 0 0;
  font-family: var(--font-display);
  font-weight: var(--primitive-font-weight-black);
  font-size: clamp(var(--primitive-font-size-4xl), 3.6vw, var(--primitive-font-size-5xl));
  letter-spacing: var(--primitive-font-tracking-tighter);
  line-height: var(--primitive-font-leading-none);
}
.how__rail { display: none; }
.how__band { display: none; }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--primitive-space-11); }
.how-step { max-width: 35rem; }
.how-step__num {
  margin: 0 0 var(--primitive-space-3);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground);
}
.how-step__num span { color: var(--color-foreground-subtle); }
.how-step__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--primitive-font-weight-black);
  font-size: var(--home-step);
  line-height: var(--primitive-font-leading-none);
  letter-spacing: -0.035em;
}
.how-step__text {
  margin: var(--primitive-space-4) 0 0;
  max-width: 31rem;
  font-size: var(--primitive-font-size-lg);
  line-height: var(--primitive-font-leading-normal);
  color: var(--color-foreground-muted);
}
/* what the step is on the summit beside it: the square marks the line as part of the route */
.how-step__route {
  display: flex;
  align-items: baseline;
  gap: var(--primitive-space-3);
  margin: var(--primitive-space-3) 0 0;
  max-width: 31rem;
  font-size: var(--text-body-size);
  line-height: var(--primitive-font-leading-snug);
  color: var(--color-foreground);
}
.how-step__route::before {
  content: "";
  flex: none;
  width: var(--primitive-space-2);
  height: var(--primitive-space-2);
  background-color: var(--color-foreground);
}

/* diagrams: circles are conditions, lines are dependencies, squares are projects, the triangle is the goal */
.dg {
  margin: var(--primitive-space-5) 0 0;
  max-width: 35rem;
  border-block-start: var(--primitive-border-hairline) solid var(--color-border);
}
.dg svg { display: block; width: 100%; height: auto; overflow: visible; }
.dg-line {
  stroke: var(--color-border-strong);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: opacity var(--motion-hover) var(--motion-easing), stroke var(--motion-hover) var(--motion-easing), stroke-width var(--motion-hover) var(--motion-easing);
}
.dg-line--quiet { stroke: var(--color-border); }
.dg-line--strong { stroke: var(--color-foreground); stroke-width: 1.5; }
.dg-node { cursor: pointer; outline: none; pointer-events: bounding-box; transition: opacity var(--motion-hover) var(--motion-easing); }
.dg-node > circle,
.dg-node > rect,
.dg-node > polygon {
  fill: var(--color-background);
  stroke: var(--primitive-color-teal-400);
  stroke-width: 1.5;
  transition: stroke var(--motion-hover) var(--motion-easing), fill var(--motion-hover) var(--motion-easing), stroke-width var(--motion-hover) var(--motion-easing);
}
.dg-node > .dg-inner { fill: var(--primitive-color-teal-400); stroke: none; }
.dg-node--solid > circle { fill: var(--color-foreground); stroke: var(--color-foreground); }
.dg-node--ghost > circle,
.dg-node--ghost > rect { stroke: var(--color-border); stroke-dasharray: 3 3; }
/* the node that matters is Rainlight at rest: the form beside it carries the one Flame.
   It takes a Flame ring only while it is hovered, focused or probed. */
.dg-node--flame > circle,
.dg-node--flame > rect,
.dg-node--flame > polygon { fill: var(--color-foreground); stroke: var(--color-foreground); }
.dg-node--flame > .dg-inner { fill: var(--color-background); stroke: none; }
.dg-node--flame:hover > circle:not(.dg-inner),
.dg-node--flame:hover > rect,
.dg-node--flame:hover > polygon,
.dg-node--flame:focus-visible > circle:not(.dg-inner),
.dg-node--flame:focus-visible > rect,
.dg-node--flame:focus-visible > polygon,
.dg svg.is-probing .dg-node--flame.is-lit > circle:not(.dg-inner),
.dg svg.is-probing .dg-node--flame.is-lit > rect,
.dg svg.is-probing .dg-node--flame.is-lit > polygon { stroke: var(--color-primary); stroke-width: 3; }
.dg text {
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  fill: var(--color-foreground-muted);
  stroke: none;
}
.dg-node--flame text { fill: var(--color-foreground); }
.dg-caption { fill: var(--color-foreground-muted); }
.dg-node:not(.dg-node--flame):focus-visible > circle:not(.dg-inner),
.dg-node:not(.dg-node--flame):focus-visible > rect,
.dg-node:not(.dg-node--flame):focus-visible > polygon { stroke: var(--color-foreground); stroke-width: 3; }

/* probing a node: what it depends on stays lit, the rest steps back */
.dg svg.is-probing .dg-node:not(.is-lit),
.dg svg.is-probing .dg-line:not(.is-lit) { opacity: 0.16; }
.dg svg.is-probing .dg-line.is-lit { stroke: var(--color-foreground); stroke-width: 2.5; stroke-dasharray: 1; }
.dg svg.is-probing .dg-node.is-lit:not(.dg-node--flame) > circle:not(.dg-inner),
.dg svg.is-probing .dg-node.is-lit:not(.dg-node--flame) > rect,
.dg svg.is-probing .dg-node.is-lit:not(.dg-node--flame) > polygon { stroke: var(--color-foreground); stroke-width: 2.5; stroke-dasharray: none; }
.dg svg.is-probing .dg-node.is-lit text { fill: var(--color-foreground); }

/* draw-in: only when motion is allowed and the script has armed the diagram */
.home-motion .dg.is-armed .dg-line { stroke-dashoffset: 1; }
.home-motion .dg.is-armed .dg-node { opacity: 0; }
.home-motion .dg.is-armed.is-drawn .dg-line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 800ms var(--motion-easing) calc(var(--i, 0) * 130ms + 160ms), opacity var(--motion-hover) var(--motion-easing), stroke var(--motion-hover) var(--motion-easing), stroke-width var(--motion-hover) var(--motion-easing);
}
.home-motion .dg.is-armed.is-drawn .dg-node {
  opacity: 1;
  transition: opacity 400ms var(--motion-easing) 80ms;
}
.home-motion .dg.is-armed.is-drawn svg.is-probing .dg-node:not(.is-lit) { opacity: 0.16; transition-delay: 0s; }

/* still art per step: on small screens, and wherever there is no field to carry the form */
.how-step__art { display: none; }
.home-still .how-step__art { display: block; width: min(100%, 26rem); aspect-ratio: 1 / 1; position: relative; overflow: hidden; margin-block-end: var(--primitive-space-6); }
.how-step__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.home-still.home-pin .how-step { width: 100%; max-width: none; }
.home-still.home-pin .how-step__art { position: absolute; inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); width: min(44%, 34rem); margin: 0; }

/* not pinned, live field (phones and tablets): the summit, its route and the climber play in a band that sticks
   under the header while the steps scroll beneath it */
.home-band .how-step__art { display: none; }
.home-band .how__band { display: block; position: sticky; inset-block-start: var(--nav-height); height: var(--home-band-h); margin-block-end: var(--primitive-space-6); pointer-events: none; }
.home-band .how__head { margin-block-end: var(--primitive-space-5); }
.home-band .how__steps { gap: var(--primitive-space-11); padding-block-end: var(--primitive-space-8); }

/* pinned variant */
.home-pin .how { padding-block: 0; height: calc(var(--home-view) * 5.6); }
.home-pin .how__sticky {
  position: sticky;
  inset-block-start: var(--nav-height);
  height: var(--home-view);
  overflow: hidden;
}
.home-pin .how__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  padding-block: var(--primitive-space-6) var(--primitive-space-5);
}
.home-pin .how__head { margin: 0; }
.home-pin .how__steps { display: block; position: relative; align-self: center; height: 100%; }
.home-pin .how-step {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  width: min(35rem, 50%);
  transform: translateY(-50%) translateY(var(--primitive-space-5));
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--motion-easing), transform 120ms var(--motion-easing);
}
/* out, then in: the leaving step is gone before the arriving one shows */
.home-pin .how-step.is-active {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
  transition: opacity 220ms var(--motion-easing) 120ms, transform 220ms var(--motion-easing) 120ms;
}
/* the diagram gives way before the step overflows a short window */
.home-pin .dg { max-width: min(35rem, calc((var(--home-view) - 31rem) / 0.6)); }
.home-pin .how__rail {
  display: flex;
  gap: var(--primitive-space-2);
  align-items: center;
}
.how__dot {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-space-2);
  height: var(--home-hit);
  padding: 0 var(--primitive-space-3) 0 var(--primitive-space-2);
  border: 0;
  border-block-start: var(--primitive-border-thick) solid var(--color-border);
  background: transparent;
  color: var(--color-foreground-subtle);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--motion-hover) var(--motion-easing), border-color var(--motion-hover) var(--motion-easing);
}
.how__dot .wmbt-icon { width: var(--primitive-space-5); height: var(--primitive-space-5); }
.how__dot:hover { color: var(--color-foreground); }
.how__dot[aria-current="step"] { color: var(--color-foreground); border-color: var(--color-foreground); }
.home-pin .how__rail { grid-row: 3; }

/* ============================================================ 4. WHERE YOU ARE */
.pos { padding-block: var(--primitive-space-10); border-block: var(--primitive-border-hairline) solid var(--color-border); }
.pos__grid { display: grid; gap: var(--primitive-space-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
.pos__copy .w-eyebrow { margin-block-end: var(--primitive-space-5); }
.pos__copy .w-lead { margin: var(--primitive-space-6) 0 0; max-width: 32rem; }
.pos__controls { margin-block-start: var(--primitive-space-7); display: grid; gap: var(--primitive-space-5); max-width: 28rem; }
.pos__control { display: grid; grid-template-columns: 1fr auto; gap: var(--primitive-space-1) var(--primitive-space-4); align-items: baseline; }
.pos__control label {
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground);
}
.pos__control output { font-size: var(--text-small-size); color: var(--color-foreground-muted); }
.pos__control .w-range {
  grid-column: 1 / -1;
  --_fill: var(--color-foreground);
  --_thumb: var(--color-foreground);
  --_thumb-core: var(--color-surface);
  --_thumb-line: var(--color-surface);
  --_rest: var(--color-background);
}
.pos__stage { min-width: 0; }
.pos__map { display: block; width: 100%; height: auto; overflow: visible; }
.pos-reach { fill: none; stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 2 6; }
.pos-goal-line { stroke: var(--color-border-strong); stroke-width: 1; stroke-dasharray: 4 5; }
.pos-line { stroke: var(--primitive-color-teal-400); stroke-linecap: round; }
.pos-line.is-load { stroke: var(--color-foreground); }
.pos-sat { fill: var(--color-surface); stroke: var(--primitive-color-teal-500); stroke-width: 1; }
.pos-sat-line { stroke: var(--color-border); stroke-width: 1; }
.pos-node circle { fill: var(--color-surface); stroke: var(--primitive-color-teal-400); stroke-width: 1.5; }
.pos-node.is-load circle { fill: var(--color-primary); stroke: var(--color-primary); }
.pos-goal polygon { fill: var(--color-surface); stroke: var(--color-foreground); stroke-width: 1.5; }
.pos-you rect { fill: var(--color-foreground); stroke: var(--color-foreground); }
.pos__map text {
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  fill: var(--color-foreground-muted);
}
.pos-node.is-load text, .pos-you text { fill: var(--color-foreground); }
.pos__readout {
  margin: 0;
  padding-block-start: var(--primitive-space-4);
  border-block-start: var(--primitive-border-hairline) solid var(--color-border);
  min-height: calc(var(--primitive-space-7) * 3);
  font-size: var(--text-body-size);
  line-height: var(--primitive-font-leading-snug);
  color: var(--color-foreground-muted);
}
.pos__readout-key {
  display: block;
  margin-block-end: var(--primitive-space-2);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground-muted);
}
.pos__readout strong { color: var(--color-foreground); font-weight: var(--primitive-font-weight-semibold); }

/* ============================================================ 5. THE BOOK */
.site-content main > section.book-sec { background-color: var(--color-background); }
.book-sec__pin { user-select: none; -webkit-user-select: none; }
.book-sec__sticky {
  position: relative;
  height: var(--home-view);
  min-height: 30rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-background);
}
.book-sec__art { position: absolute; inset: 0; background-color: var(--color-background); }
.book-sec__art > img,
.book-sec__art > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: brightness(0.86) contrast(1.3); }
.book-sec__art > img { object-fit: cover; }
.book-sec__art > canvas { opacity: 0; transition: opacity 400ms var(--motion-easing); }
.book-sec__art > canvas[data-ready="1"] { opacity: 1; }
.book-sec__art > canvas[data-fallback="1"] { display: none; }
.book-sec__hint {
  position: absolute;
  z-index: 1;
  inset-block-end: var(--primitive-space-9);
  inset-inline-end: var(--primitive-space-6);
  margin: 0;
  padding: var(--primitive-space-1) var(--primitive-space-2);
  background-color: var(--home-scrim);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--motion-easing);
}
.book-sec__hint.is-on { opacity: 1; }
/* no panel edge and no seam: the artwork fades into Night on every side */
.book-sec__art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 var(--primitive-space-11) var(--primitive-space-8) var(--color-background);
}
.book-sec__quote {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: calc(var(--layout-container) + var(--spacing-page-margin) * 2);
  margin-inline: auto;
  padding: 0 var(--primitive-space-4) var(--primitive-space-10);
  pointer-events: none;
}
.book-sec__quote blockquote { margin: 0; max-width: 34rem; }
.book-sec__quote p {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(var(--primitive-font-size-2xl), 2.7vw, var(--primitive-font-size-4xl));
  line-height: var(--primitive-font-leading-tight);
  letter-spacing: var(--primitive-font-tracking-tight);
  text-wrap: pretty;
}
.book-sec__after {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--primitive-space-7);
  padding-block: var(--primitive-space-9) var(--primitive-space-11);
}
.book-sec__copy .w-eyebrow { margin-block-end: var(--primitive-space-4); }
.book-sec__sub {
  margin: var(--primitive-space-4) 0 0;
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-wide);
  text-transform: uppercase;
  line-height: var(--primitive-font-leading-normal);
  color: var(--color-foreground-muted);
  max-width: 28rem;
}
.book-sec__line { margin: 0; padding-block-start: var(--primitive-space-4); border-block-start: var(--primitive-border-hairline) solid var(--color-border); }
.book-sec__line blockquote { margin: 0; }
.book-sec__line p { margin: 0; font-size: var(--primitive-font-size-lg); line-height: var(--primitive-font-leading-normal); color: var(--color-foreground); }
.book-sec__actions { margin-block-start: var(--primitive-space-6); }

.home-pin .book-sec__pin { height: calc(var(--home-view) + 62vh); }
.home-pin .book-sec__sticky { position: sticky; inset-block-start: var(--nav-height); }

/* ============================================================ 6. TOOLS */
.tools { padding-block: var(--primitive-space-11); }
.tools__head .w-eyebrow { margin-block-end: var(--primitive-space-5); }
.tools__head .w-lead { margin: var(--primitive-space-5) 0 0; max-width: 36rem; }
.tracks { list-style: none; margin: var(--primitive-space-9) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--primitive-space-8); }
.track { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--primitive-space-4); align-content: start; padding-block-start: var(--primitive-space-4); border-block-start: var(--primitive-border-hairline) solid var(--color-border); }
/* art on flat Night at the full column width. The backdrop is pulled below Night, then a lighten blend
   lifts every pixel darker than Night to Night exactly, so no rectangle shows; the edge is feathered on top. */
.track__art {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 7 / 3;
  overflow: hidden;
  background-color: var(--color-background);
}
.track__art:empty { display: none; }
.track__art img,
.track__art video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.78) contrast(1.5);
  mix-blend-mode: lighten;
}
.track__art--low img { object-position: center 72%; }
/* the summit loop keeps its peak on the right of a wide frame: draw it half as wide again and show the right two thirds */
.track__art--summit video { inset-inline-start: -50%; width: 150%; max-width: none; object-position: center 14%; }
.track__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 var(--primitive-space-7) var(--primitive-space-5) var(--color-background); }
.track__num {
  margin: 0 0 var(--primitive-space-3);
  display: flex;
  align-items: center;
  gap: var(--primitive-space-4);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground);
}
.track__tag {
  padding: var(--primitive-space-1) var(--primitive-space-2);
  border: var(--primitive-border-hairline) solid var(--color-border-strong);
  color: var(--color-foreground-muted);
  font-size: var(--primitive-font-size-xs);
}
.track__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--primitive-font-weight-black);
  font-size: clamp(var(--primitive-font-size-2xl), 2.6vw, var(--primitive-font-size-4xl));
  line-height: var(--primitive-font-leading-none);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.track__first {
  margin: var(--primitive-space-4) 0 0;
  max-width: 30rem;
  font-size: var(--text-body-size);
  line-height: var(--primitive-font-leading-normal);
  color: var(--color-foreground-muted);
}
.track__first span {
  display: block;
  margin-block-end: var(--primitive-space-1);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground-muted);
}
.track__list {
  list-style: none;
  margin: var(--primitive-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-space-1) var(--primitive-space-4);
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-foreground);
}
.track__list li { display: inline-flex; align-items: center; gap: var(--primitive-space-2); }
.track__list li::before {
  content: "";
  width: var(--primitive-space-2);
  height: var(--primitive-space-2);
  border: var(--primitive-border-hairline) solid var(--primitive-color-teal-400);
}
.track__list li:nth-child(3n + 2)::before { border-radius: var(--primitive-radius-full); }
.track__list li:nth-child(3n + 1)::before { border: 0; background-color: var(--primitive-color-teal-400); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tools__cta {
  margin-block-start: var(--primitive-space-9);
  padding-block-start: var(--primitive-space-6);
  border-block-start: var(--primitive-border-hairline) solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-space-6);
  flex-wrap: wrap;
}
.tools__cta-text { margin: 0; max-width: 32rem; font-size: var(--primitive-font-size-lg); color: var(--color-foreground-muted); }

/* ============================================================ 7. CLOSING */
.closing { min-height: var(--home-view); display: flex; align-items: center; padding-block: var(--home-pad); }
/* alpha ramps instead of clip lines where the field meets the opaque bands above and below */
.closing::before,
.closing::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 0;
  pointer-events: none;
  box-shadow: 0 0 var(--primitive-space-11) var(--primitive-space-10) var(--color-background);
}
.closing::before { inset-block-start: 0; }
.closing::after { inset-block-end: 0; }
.closing__inner { position: relative; z-index: 1; text-align: center; }
.closing .w-eyebrow { margin-block-end: var(--primitive-space-6); }
.closing__title {
  margin: 0 auto;
  max-width: 16ch;
  font-family: var(--font-editorial);
  font-weight: var(--primitive-font-weight-regular);
  font-size: var(--home-statement);
  line-height: 1.02;
  letter-spacing: var(--primitive-font-tracking-tighter);
  text-wrap: balance;
}
.closing__actions { margin-block-start: var(--primitive-space-9); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--primitive-space-4); }
.closing__sign {
  margin: var(--primitive-space-7) 0 0;
  font-family: var(--font-accent);
  font-size: var(--primitive-font-size-xs);
  letter-spacing: var(--primitive-font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-foreground-muted);
}
.site-footer__tag { margin-block-start: var(--primitive-space-3); }

/* ============================================================ wide */
@media (min-width: 48em) {
  .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--primitive-space-9) var(--primitive-space-8); }
  .book-sec__after { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--primitive-space-9); align-items: end; }
}
@media (min-width: 64em) {
  .pos__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "copy stage" "copy readout";
    gap: var(--primitive-space-5) var(--primitive-space-10);
  }
  .pos__copy { grid-area: copy; }
  .pos__stage { grid-area: stage; }
  .pos__readout { grid-area: readout; font-size: var(--primitive-font-size-lg); min-height: calc(var(--primitive-space-7) * 2.5); }
}

/* ============================================================ narrow */
@media (max-width: 63.99em) {
  .premise__pull--a { margin-inline-start: 0; }
  .premise__pull--b { margin-inline-start: 12%; }
  .scroll-hint { display: none; }
  .hero__copy { width: min(100%, 34rem); }
  .hero__head { width: fit-content; }
}
/* between the phone layout and the wide one the summit sits beside the headline, above the goal picker:
   the scrim covers the picker and the actions only, so it does not dim the form */
@media (min-width: 48em) and (max-width: 63.99em) {
  .hero__copy::before {
    inset-block-start: calc(var(--hero-goal-top, 0px) - var(--primitive-space-4));
    box-shadow: 0 0 var(--primitive-space-7) var(--primitive-space-5) var(--home-scrim);
  }
}
@media (max-width: 47.99em) {
  .home { --home-display: clamp(var(--primitive-font-size-6xl), 18.5vw, var(--primitive-font-size-8xl)); }

  /* hero: copy, the one action, then the form in a band of its own, then the goal picker */
  .hero { min-height: 0; }
  .hero__inner { padding-block: var(--primitive-space-6) var(--primitive-space-8); align-items: flex-start; }
  .hero__copy { width: 100%; }
  .hero__copy::before { display: none; }
  .hero__eyebrow { margin-block-end: var(--primitive-space-4); }
  .hero__lede { max-width: 22ch; margin-block-start: var(--primitive-space-4); }
  .hero__actions { order: 1; width: 100%; margin-block-start: var(--primitive-space-5); gap: var(--primitive-space-2) var(--primitive-space-5); }
  .hero__band { order: 2; display: block; width: 100%; height: 45svh; }
  .goal { order: 3; margin-block-start: 0; }
  .goal__chips { gap: var(--primitive-space-2); }
  .goal__chip { height: var(--home-hit); padding-inline: calc(var(--primitive-space-2) + var(--primitive-space-1) / 2); font-size: calc(var(--primitive-font-size-xs) + var(--primitive-border-hairline)); background-color: var(--color-background); }
  /* two rows: three short goals, then two long ones */
  .goal__chip[data-goal="team"],
  .goal__chip[data-goal="product"] { order: 1; }
  /* without a live field the surveyed summit takes the band; its labels stay readable at this crop */
  .home-still .hero__fallback { display: none; }
  .home-still .hero__band-still { display: block; width: 100%; height: 100%; object-fit: cover; }

  .premise__inner { padding-block: var(--primitive-space-10); }

  /* how: with a live field the step's form plays in a sticky band above the text.
     Without one (no WebGL, reduced motion) the surveyed summit leads each step, the climber one waypoint further up. */
  .how { padding-block: var(--primitive-space-10); }
  .how__steps { gap: var(--primitive-space-10); }
  .how-step__art,
  .home-still .how-step__art { display: block; position: relative; overflow: hidden; width: 100%; aspect-ratio: 1 / 1; margin-block-end: var(--primitive-space-5); }
  .dg text { font-size: calc(var(--primitive-font-size-xs) * 1.2); letter-spacing: var(--primitive-font-tracking-wide); }

  /* map labels hold 12px when the 560 unit map is drawn 343 wide */
  .pos__map text { font-size: calc(var(--primitive-font-size-xs) * 1.7); letter-spacing: 0.02em; }
  .pos__readout { min-height: calc(var(--primitive-space-7) * 3.5); }

  /* book: a tall crop on the summit, then one line under it. The picture is twice the column width and
     shows its right half, so the still and the warp canvas frame the peak the same way.
     pan-y leaves vertical scrolling to the page and gives sideways drags to the reveal. */
  .book-sec__sticky { display: block; height: auto; min-height: 0; }
  .book-sec__art { position: relative; inset: auto; height: 72svh; min-height: 24rem; overflow: hidden; touch-action: pan-y; }
  .book-sec__art > img,
  .book-sec__art > canvas { inset: 0 auto auto -100%; width: 200%; max-width: none; }
  .book-sec__art > canvas {
    width: calc(200% * var(--warp-k, 1));
    height: calc(100% * var(--warp-k, 1));
    transform: scale(calc(1 / var(--warp-k, 1)));
    transform-origin: 0 0;
  }
  .book-sec__art::after { box-shadow: inset 0 0 var(--primitive-space-7) var(--primitive-space-5) var(--color-background); }
  .book-sec__hint { inset-block-end: var(--primitive-space-6); inset-inline-end: var(--primitive-space-4); }
  .book-sec__quote { padding: var(--primitive-space-6) var(--primitive-space-4) 0; }
  .book-sec__after { padding-block: var(--primitive-space-8) var(--primitive-space-10); }

  .tools { padding-block: var(--primitive-space-10); }
  .tracks { gap: var(--primitive-space-7); margin-block-start: var(--primitive-space-7); }
  .track__art { aspect-ratio: 16 / 9; }
  .tools__cta { margin-block-start: var(--primitive-space-8); }
}