/* ==========================================================================
   Vertical Systems: service, industry and overview pages (site/css/pages.css)
   --------------------------------------------------------------------------
   Markup: site/templates/page.html, rendered by scripts/build-pages.mjs.
   Shared parts (.vs-card, .vs-btn, .vs-chip, reveal, odometer) live in
   css/components.css. Behaviour: js/pages.js (bar state, process line).
   Tokens: Field Manual in assets/themes.css (never edited).

   Rhythm (docs/DESIGN-SYSTEM.md): section padding clamp(3.5rem, 8vw, 6.5rem),
   width capped at --sc-maxw, text measure capped at 62ch, one headline and
   at most two supporting lines per section.

   Grounds, hard edges: canvas for the hero, scope, results, quote, video,
   price and questions; the lifted --sc-surface band for problem, process
   and the closing call to action. Olive (--vs-plate-3) only on plates.

   Page classes: .pg (body), .pg-wrap, .pg-sec, .pg-head, .pg-kicker, .pg-h2,
   .pg-line, .pg-split, .pg-grid(--build|--proof|--related), .pg-actions,
   .pg-hero, .pg-crumb, .pg-plate, .pg-problem/.pg-pains/.pg-pain,
   .pg-build, .pg-demo, .pg-how/.pg-steps/.pg-step, .pg-proof/.pg-fig,
   .pg-quote, .pg-video, .pg-price, .pg-faq/.pg-q, .pg-related, .pg-index,
   .pg-cta, .pg-doors, .pg-legal (legal and not-found pages).
   ========================================================================== */

.pg {
  --pg-pad: clamp(3.5rem, 8vw, 6.5rem);
  --pg-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  --pg-mono: var(--vs-font-mono, ui-monospace, monospace);
  --pg-plate-ink: #F8F7F2;      /* text on the olive plate: 7.3:1 */
  --pg-plate-soft: #DAD7CA;     /* soft text on the olive plate: 5.4:1 */
}

/* The phase strip is the homepage replay's control; these pages have no
   replay. The build removes it; this is the fallback. */
.pg .bar__strip { display: none !important; }

.pg-wrap {
  width: 100%;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}
.pg-sec { padding-block: var(--pg-pad); }
.pg-sec[id] { scroll-margin-top: calc(var(--vs-bar-h) + 1rem); }

/* ------------------------------------------------------------ headings -- */
.pg-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.pg-kicker {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0 0 1rem;
  font-family: var(--pg-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.pg-kicker > span {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  color: var(--sc-ink);
}
.pg-kicker > span::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--vs-line-strong);
}
.pg-h2 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight);
  font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: var(--vs-display-track);
  text-wrap: balance;
}
.pg-line {
  margin: 0.9rem 0 0;
  max-width: 52ch;
  font-size: var(--sc-t-base);
  line-height: 1.5;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}

.pg-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.pg-split > .pg-head {
  margin-bottom: 0;
  position: sticky;
  top: calc(var(--vs-bar-h) + 2rem);
}

.pg-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.pg-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pg-gap);
}
.pg-grid > li > .vs-card { height: 100%; }
.pg-grid--build,
.pg-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-grid--proof { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
/* A page with one result keeps a card-sized card, not a full-width strip. */
.pg-grid--proof > li:only-child { max-width: 26rem; }

/* ---------------------------------------------------------------- hero -- */
.pg-hero {
  position: relative;
  overflow: clip;
  padding: calc(var(--vs-bar-h) + clamp(2.5rem, 7vw, 5.5rem)) 0 var(--pg-pad);
  background: var(--sc-canvas);
}
.pg-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.pg-crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-family: var(--pg-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.pg-crumb li + li::before { content: "/"; margin-inline-end: 0.5em; color: var(--vs-line-strong); }
.pg-crumb a { color: var(--sc-ink-soft); text-decoration: none; }
.pg-crumb a:hover { color: var(--sc-ink); text-decoration: underline; }
.pg-crumb [aria-current] { color: var(--sc-ink); }

.pg-hero__title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight);
  font-size: clamp(2.55rem, 1.5rem + 4.3vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: var(--vs-display-track);
  text-wrap: balance;
}
.pg-hero__line {
  margin: 1.25rem 0 0;
  max-width: 40ch;
  font-size: var(--sc-t-lg);
  line-height: 1.42;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}

/* The plate: three sheets, drawn in CSS. Far drab sheet with contour lines,
   an olive sheet behind, and a paper card whose rows light once on load. */
.pg-plate {
  position: relative;
  aspect-ratio: 5 / 4;
  min-height: 17rem;
}
.pg-plate__sheet { position: absolute; border-radius: 14px; }
.pg-plate__sheet--far {
  inset: 0 12% 14% 0;
  background-color: var(--vs-plate-1);
  background-image: repeating-radial-gradient(ellipse at 72% 28%, transparent 0 17px, rgba(22, 23, 21, 0.075) 17px 18px);
  transform: rotate(-2.5deg);
}
.pg-plate__sheet--mid {
  inset: 16% 0 2% 22%;
  background-color: var(--vs-plate-3);
  background-image:
    repeating-linear-gradient(90deg, rgba(239, 237, 229, 0.07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(239, 237, 229, 0.07) 0 1px, transparent 1px 26px);
  box-shadow: var(--vs-card-shadow);
}
.pg-plate__card {
  position: absolute;
  left: 7%;
  right: 13%;
  top: 50%;
  transform: translateY(-46%);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--sc-surface);
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-card-r, 10px);
  box-shadow: var(--vs-card-shadow-hover);
}
.pg-plate__label {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--vs-line);
  font-family: var(--pg-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.pg-plate__rows {
  position: relative;
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-plate__rows::before {                 /* the thread between nodes */
  content: "";
  position: absolute;
  left: 5px;
  top: 0.6em;
  bottom: 0.6em;
  border-left: 1px dashed var(--vs-line-strong);
}
.pg-plate__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--sc-t-sm);
  line-height: 1.3;
  animation: pg-row-on 360ms var(--vs-ease-card, ease) both;
  animation-delay: calc(500ms + var(--row, 0) * 380ms);
}
.pg-plate__node {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sc-ink);
  border: 1.5px solid var(--sc-ink);
}
.pg-plate__row:last-child .pg-plate__node {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px var(--sc-surface), 0 0 0 4.5px var(--vs-ok);
}
@keyframes pg-row-on {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* ------------------------------------------------------------ hero photo -- */
/* The right hero column, when a page carries hero.image: a framed photo
   panel with the plate graphic overlapping its lower-left corner as the
   foreground plane (scroll-craft layering). Without a photo,
   .pg-hero__visual carries no modifier and .pg-plate keeps the standalone
   sizing set above. */
.pg-hero__visual--photo {
  position: relative;
  padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
}
.pg-hero__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1600 / 1008;
  overflow: hidden;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-card-r, 10px);
  box-shadow: var(--vs-card-shadow);
  background: var(--vs-plate-1);
}
/* Sized taller than its frame so the parallax translate (js/pages.js,
   capped at 12px) never uncovers an edge. */
.pg-hero__photo-inner {
  width: 100%;
  height: calc(100% + 24px);
  margin-top: -12px;
  will-change: transform;
}
.pg-hero__photo-inner picture,
.pg-hero__photo-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pg-hero__visual--photo .pg-plate {
  position: absolute;
  left: -10%;
  bottom: -14%;
  width: 56%;
  min-height: 0;
  z-index: 2;
}

/* ------------------------------------------------------------- problem -- */
.pg-problem,
.pg-how,
.pg-cta { background: var(--sc-surface); }
.pg-problem { border-block: 1px solid var(--vs-line); }

.pg-pains { list-style: none; margin: 0; padding: 0; }
.pg-pain {
  display: grid;
  gap: 0.45rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--vs-line);
}
.pg-pain:last-child { border-bottom: 1px solid var(--vs-line); }
.pg-pain__text {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 0.98rem + 0.75vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
q.pg-pain__text { quotes: "\201C" "\201D"; }
.pg-pain__who {
  font-family: var(--pg-mono);
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}

/* --------------------------------------------------------------- scope -- */
.pg-build .vs-card__kicker { color: var(--sc-ink-soft); }
.pg-demo { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.pg-demo.vs-uc__demo { max-width: 40rem; box-shadow: var(--vs-card-shadow); }
.pg-demo:empty { display: none; }

/* ------------------------------------------------------------- process -- */
.pg-how { border-block: 1px solid var(--vs-line); }
.pg-steps {
  --node: 14px;
  --steps-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  position: relative;
}
.pg-steps__track {
  position: absolute;
  left: var(--t-start, calc(var(--node) / 2));
  top: calc(var(--node) / 2 - 1px);
  width: var(--t-len, calc((200% + 2 * var(--steps-gap)) / 3));
  height: 2px;
  background: var(--vs-line);
  border-radius: 2px;
}
.pg-steps__fill {
  position: absolute;
  inset: 0;
  background: var(--sc-ink);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(var(--draw, 1));
}
.pg-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--steps-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-step { position: relative; padding-top: calc(var(--node) + 1.4rem); max-width: 34ch; }
.pg-step__node {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: var(--sc-ink);
  border: 2px solid var(--sc-ink);
  transition: background-color 240ms var(--vs-ease-card), border-color 240ms var(--vs-ease-card), box-shadow 240ms var(--vs-ease-card);
}
.pg-steps[data-steps-live] .pg-step:not(.is-reached) .pg-step__node {
  background: var(--sc-surface);
  border-color: var(--vs-line-strong);
}
.pg-step--last .pg-step__node,
.pg-steps[data-steps-live] .pg-step--last.is-reached .pg-step__node {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 4px var(--sc-surface), 0 0 0 6px var(--vs-ok);
}
.pg-step__num {
  margin: 0 0 0.4rem;
  font-family: var(--pg-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.pg-step__name {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight);
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.pg-step__line {
  margin: 0.55rem 0 0;
  font-size: var(--sc-t-sm);
  line-height: 1.55;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- results -- */
.pg-fig .vs-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
}
.pg-fig .vs-chip { align-self: flex-start; }
.pg-fig__num {
  margin: 0.6rem 0 0;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight);
  font-size: clamp(2.1rem, 1.5rem + 1.5vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pg-fig__to {
  margin-inline: 0.3em;
  font-family: var(--sc-font-text);
  font-weight: 400;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--sc-ink-soft);
}
.pg-fig__claim {
  margin: 0;
  font-size: var(--sc-t-sm);
  line-height: 1.5;
  text-wrap: pretty;
}
.pg-fig .vs-card__meta {
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--vs-line);
}

/* ---------------------------------------------------------------- quote -- */
.pg-quote { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.pg-quote__fig {
  margin: 0;
  max-width: 48rem;
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  border-left: 3px solid var(--vs-plate-3);
}
.pg-quote__text { margin: 0; }
.pg-quote__text p {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight);
  font-size: clamp(1.75rem, 1.15rem + 2.5vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: var(--vs-display-track);
  text-wrap: balance;
  quotes: "\201C" "\201D";
}
.pg-quote__text p::before { content: open-quote; }
.pg-quote__text p::after { content: close-quote; }
.pg-quote__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  margin-top: 1.4rem;
  font-size: var(--sc-t-sm);
}
.pg-quote__who { font-weight: 600; }
.pg-quote__role { color: var(--sc-ink-soft); }
.pg-quote__note {
  flex-basis: 100%;
  font-family: var(--pg-mono);
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- video -- */
.pg-video { border-top: 1px solid var(--vs-line); }
.pg-split--video { align-items: center; }
.pg-split--video > .pg-head { position: static; }
.pg-video__card { max-width: 40rem; justify-self: end; width: 100%; }
.pg-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.5rem;
  height: 3.5rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--sc-surface);
  box-shadow: 0 6px 18px -8px rgba(22, 23, 21, 0.45);
  transition: transform 240ms var(--vs-ease-card);
}
.pg-video__play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  width: 0.95rem;
  height: 1.1rem;
  translate: -50% -50%;
  background: var(--sc-ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.pg-video__dur {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  font-family: var(--pg-mono);
  font-size: var(--sc-t-xs);
  color: var(--sc-surface);
  background: rgba(22, 23, 21, 0.82);
}
@media (hover: hover) and (pointer: fine) {
  .pg-video__card:hover .pg-video__play { transform: scale(1.06); }
}

/* ---------------------------------------------------------------- price -- */
/* The section before always ends on its own padding. The process band has
   its own surface and border, so a page with no results, quote or video
   (price straight after process) needs the gap back. */
.pg-price-sec { padding-top: 0; }
.pg-how + .pg-price-sec { padding-top: var(--pg-pad); }
.pg-price {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  border-radius: 14px;
  color: var(--pg-plate-ink);
  background-color: var(--vs-plate-3);
  background-image:
    repeating-linear-gradient(90deg, rgba(239, 237, 229, 0.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgba(239, 237, 229, 0.05) 0 1px, transparent 1px 32px);
  box-shadow: var(--vs-card-shadow);
}
.pg-kicker--plate { color: var(--pg-plate-soft); }
.pg-price__line {
  margin: 0;
  max-width: 14ch;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight);
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.7rem);
  line-height: 1;
  letter-spacing: var(--vs-display-track);
  text-wrap: balance;
}
.pg-price__note {
  margin: 1rem 0 0;
  max-width: 44ch;
  color: var(--pg-plate-soft);
  text-wrap: pretty;
}
.pg-price__points {
  display: grid;
  gap: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: var(--sc-t-sm);
}
.pg-price__points li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(239, 237, 229, 0.16);
}
.pg-price__points li:first-child { border-top: 1px solid rgba(239, 237, 229, 0.16); }
.pg-price__points li::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: var(--pg-plate-soft);
}
.pg-price--solo { grid-template-columns: minmax(0, 1fr); }
.pg-price--solo .pg-price__line { max-width: none; }
.pg-price__side { display: flex; flex-direction: column; align-items: stretch; }
.pg-price__cta { align-self: flex-start; border-color: rgba(248, 247, 242, 0.7); }
.pg-price .vs-btn--primary:focus-visible { outline-color: var(--pg-plate-ink); }

/* ------------------------------------------------------------ questions -- */
.pg-faq { padding-top: 0; }
.pg-faq__list { border-top: 1px solid var(--vs-line); }
.pg-q { border-bottom: 1px solid var(--vs-line); }
.pg-q > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight);
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.pg-q > summary::-webkit-details-marker { display: none; }
.pg-q > summary:focus-visible { outline-offset: 2px; }
.pg-q__icon {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--vs-line-strong);
  border-radius: 50%;
  transition: background-color 160ms var(--vs-ease-card), border-color 160ms var(--vs-ease-card);
}
.pg-q__icon::before,
.pg-q__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7rem;
  height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
}
.pg-q__icon::after { rotate: 90deg; transition: rotate 240ms var(--vs-ease-card); }
.pg-q[open] .pg-q__icon::after { rotate: 0deg; }
@media (hover: hover) {
  .pg-q > summary:hover .pg-q__icon { background: var(--sc-surface); border-color: var(--sc-ink); }
}
.pg-q__a {
  margin: 0 0 1.25rem;
  max-width: 60ch;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- related -- */
.pg-related { padding-top: 0; }
.pg-related .pg-head { padding-top: var(--pg-pad); border-top: 1px solid var(--vs-line); max-width: none; }
.pg-index { padding-top: 0; }

/* ---------------------------------------------------------- closing CTA -- */
.pg-cta { border-top: 1px solid var(--vs-line); }
.pg-cta__inner { max-width: 46rem; }
.pg-cta__title {
  margin: 0;
  max-width: 17ch;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight);
  font-size: clamp(2.2rem, 1.4rem + 3.3vw, 4.2rem);
  line-height: 1;
  letter-spacing: var(--vs-display-track);
  text-wrap: balance;
}
.pg-doors {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vs-line);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}
.pg-doors__label {
  font-family: var(--pg-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink);
}
.pg-doors a { color: var(--sc-ink); text-underline-offset: 0.25em; }
.pg-doors a:hover { color: var(--vs-accent-text); }

/* ---------------------------------------------------------- breakpoints -- */
@media (max-width: 1100px) {
  .pg-grid--build,
  .pg-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .pg-hero__grid,
  .pg-split,
  .pg-price { grid-template-columns: minmax(0, 1fr); }
  .pg-split > .pg-head { position: static; }
  .pg-hero__title { max-width: 16ch; }
  .pg-plate { max-width: 30rem; aspect-ratio: 16 / 11; min-height: 0; }
  .pg-video__card { justify-self: stretch; }
  .pg-price { align-items: start; }
  /* The photo sits above the text at full width, with no overlap. Still
     position: relative (not static): .pg-plate is the containing block
     for its own absolutely-positioned sheets, so it must stay a
     positioning context or they escape to .pg-hero__visual--photo and
     cover the photo. */
  .pg-hero__visual--photo { order: -1; padding-bottom: 0; }
  .pg-hero__visual--photo .pg-plate {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin-top: 1.25rem;
  }
}

@media (max-width: 760px) {
  .pg-steps__list { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pg-step { padding-top: 0; padding-left: calc(var(--node) + 1.25rem); max-width: none; }
  .pg-step__node { top: 0.1rem; }
  .pg-steps__track {
    left: calc(var(--node) / 2 - 1px);
    top: var(--t-start, calc(var(--node) / 2 + 0.1rem));
    width: 2px;
    height: var(--t-len, calc(100% - 6rem));
  }
  .pg-steps__fill { transform-origin: center top; transform: scaleY(var(--draw, 1)); }
}

@media (max-width: 640px) {
  .pg-grid--build,
  .pg-grid--proof { grid-template-columns: minmax(0, 1fr); }
  /* Related cards drop their line on phones, so two fit side by side. */
  .pg-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .pg-grid--related .vs-card__text { display: none; }
  .pg-grid--related .vs-card__body { padding: 0.9rem; }
  .pg-grid--related .vs-card__title { font-size: 1rem; }
  .pg-actions .vs-btn { flex: 1 1 100%; }
  .pg-price__cta { align-self: stretch; }
  .pg-doors__label { flex-basis: 100%; }
  .pg-plate { aspect-ratio: 4 / 3; }
  .pg-plate__card { left: 5%; right: 9%; }
}

/* ------------------------------------------- legal and not-found pages -- */
/* Markup: the {{#legal}} and {{#notfound}} blocks in templates/page.html.
   Text pages: one column at reading width, no reveal (the text is there
   with or without JS). */
.pg-hero--legal { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.pg-hero--legal .pg-hero__copy { max-width: 62ch; }
.pg-hero--legal .pg-hero__title { max-width: 18ch; }
.pg-legal__date {
  margin: 1.25rem 0 0;
  font-family: var(--pg-mono);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}
.pg-legal__note {
  display: inline-block;
  margin: 1rem 0 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--vs-line-strong);
  background: var(--sc-surface);
  font-size: var(--sc-t-sm);
  line-height: 1.45;
  color: var(--sc-ink);
}
.pg-legal { padding-top: 0; }
.pg-legal__body { max-width: 68ch; }
.pg-legal__body .pg-legal__intro { margin: 0 0 2.25rem; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); }
.pg-legal__part + .pg-legal__part { margin-top: clamp(2rem, 4vw, 2.75rem); }
.pg-legal__h {
  margin: 0 0 0.75rem;
  font-family: var(--sc-font-display);
  font-weight: var(--vs-display-weight);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: var(--vs-display-track);
}
.pg-legal__body p { margin: 0 0 1rem; line-height: 1.65; color: var(--sc-ink); overflow-wrap: anywhere; }
.pg-legal__body a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.pg-legal__body a:hover { text-decoration-thickness: 2px; }
.pg-hero--notfound { min-height: 70vh; display: flex; align-items: center; }
.pg-hero--notfound .pg-hero__copy { max-width: 48rem; }

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .pg-plate__row { animation: none; }
  .pg-step__node,
  .pg-q__icon,
  .pg-q__icon::after,
  .pg-video__play { transition: none; }
}