/* ==========================================================================
   v2 — additions only. Loads on top of theme.css and page.css, and is not
   referenced by the live page, so nothing here can affect it.
   ========================================================================== */

/* Two deliberate lines in the hero, same device as the reframe headline. */
.v2 .hero__title span { display: block; }
.v2 .hero__title { text-wrap: normal; }

/* The three things Paul asked for before anything else: what it costs, how
   long it takes, and what happens if he cannot make it. */
.facts {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  list-style: none; margin: 4px 0 0; padding: 0;
}
.facts li {
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fgc-cream); border: 1px solid rgba(255, 249, 238, 0.42);
  border-radius: 999px; padding: 7px 13px;
}

/* The mirror: their own words, set large enough to be read rather than skimmed,
   with the last line stepping up as the one that lands. */
.mirror { display: grid; gap: 22px; max-width: 54ch; }
.mirror p { margin: 0; font-size: 20px; line-height: 1.55; color: var(--pg-muted); }
.mirror__turn {
  color: var(--pg-fg) !important;
  font-size: clamp(22px, 2.4vw, 28px) !important; line-height: 1.35 !important;
  border-top: 1px solid var(--pg-line); padding-top: 22px;
}

/* The catch is a trust device, so it reads plainly rather than as a feature. */
.catch { display: grid; gap: 18px; justify-items: start; }
.catch .h2--loud { max-width: 16ch; }

/* Accordion sits on bg-alt in this version. */
.v2 .acc__btn { padding-block: 22px; }
.v2 .acc__panel p { color: var(--pg-muted); }

/* ---------- Mobile fold ----------
   The facts row earns its place (it answers cost, length and "what if I can't
   make it" before anything else) but it costs vertical space, so the hero type
   tightens to keep both register buttons clear of a 390px fold with an
   in-app browser's chrome on top. */
@media (max-width: 560px) {
  .v2 .hero__title { font-size: 30px; line-height: 1.04; letter-spacing: -0.03em; }
  .v2 .hero .lede { font-size: 15px; line-height: 1.42; }
  .v2 .hero__copy { gap: 10px; }
  .v2 .hero__body { padding-top: 14px; gap: 16px; }
  .facts { gap: 6px; }
  .facts li { font-size: 10px; padding: 5px 10px; letter-spacing: 0.1em; }
  .mirror p { font-size: 17px; }
  .mirror__turn { font-size: 20px !important; }
}

/* ---------- The reader's own voice ----------
   One line above each section, in the question they are actually holding when
   they arrive at it. Serif italic so it reads as thought rather than as a
   heading, and quiet enough that it never competes with the h2 under it. */
.dialogue {
  margin: 0 0 18px; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 2.1vw, 28px); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--pg-muted); max-width: 30ch;
}
.dialogue::before { content: "\201C"; }
.dialogue::after  { content: "\201D"; }
.reframe .dialogue { text-align: center; max-width: 26ch; margin-inline: auto; }

/* Doing nothing is a choice with a price on it, so it gets its own plate. */
.inaction {
  display: grid; gap: 14px; max-width: 62ch;
  border-top: 1px solid var(--pg-line); padding-top: clamp(24px, 3vw, 36px);
}
.inaction .dialogue { margin-bottom: 4px; }

/* ---------- The free brief ----------
   The system already has .prompt: black plate, lime monospace. It is scrollable
   on small screens, so it takes a tab stop and an accessible name. */
.prompt {
  max-width: 62rem; border: 1px solid var(--pg-line);
  font-size: 14px; line-height: 1.75;
}
.prompt:focus-visible { outline: 2px solid var(--fgc-lime); outline-offset: 3px; }
@media (max-width: 560px) { .prompt { font-size: 12.5px; padding: 18px; } }

/* Headings keep their last two words together via   in the markup; this
   stops the balancer fighting that on the wider ones. */
.v2 h2 { text-wrap: balance; }

/* Three deliberate lines. The serif run is wider than the sans, so left to wrap
   it overflowed the copy column and pushed the full stop onto a line of its
   own. Explicit lines also let the reveal land on its own. */
.v2 .hero__title { line-height: 0.98; }
.v2 .hero__title span:last-child em { font-style: italic; }

/* Balance the reader's lines rather than leaving a stub on the last one. These
   are short enough that the balancer handles them well, and it is more robust
   than binding words by hand at every breakpoint. */
.dialogue { text-wrap: balance; }
.reframe .dialogue { max-width: 30ch; }
.mirror__turn, .reframe__line, .reframe__claim, .versus__note { text-wrap: pretty; }
.v2 .lede, .v2 .body, .mirror p, .inaction p { text-wrap: pretty; }

.v2 .lede, .v2 .body, .mirror p, .inaction p { text-wrap: pretty; }

/* ---------- Editorial split ----------
   The standard two-column article pattern: one text column carrying the
   eyebrow, the heading and the copy at the same width, and one image column.
   Previously the heading ran the full 1185px shell while the copy sat in a
   456px measure, which is what made the section read as unresolved. */
.split-ed {
  /* Text takes two thirds, the portrait about a third. The mirror copy runs
     at 20px so a ~720px column still lands near 70 characters a line rather
     than the 90 it would be at body size. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.split-ed__text {
  display: grid; gap: 18px; align-content: center;
  /* the column is 1fr, but the words stop at a readable measure: without this
     the copy reaches 88 characters a line on a 1440 screen */
  max-width: 46rem;
}
.split-ed__text .dialogue { margin-bottom: 0; }
.split-ed__text .h2--loud { margin-block: 2px 6px; }
.split-ed__img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 22%; border-radius: var(--radius-card); display: block;
}
.split-ed .mirror { display: grid; gap: 20px; max-width: none; }
@media (max-width: 900px) {
  .split-ed { grid-template-columns: 1fr; gap: 32px; justify-items: start; }
  .split-ed__img { max-width: 17rem; }
  /* stacked, the column is the full shell, so cap the measure or the copy
     runs to ~84 characters a line at tablet width */
  .split-ed__text { max-width: 54ch; }
}

/* ---------- Session icons, at a size you can actually read ----------
   They were 40px, which made four careful drawings into four smudges. At
   ~88px the open loops and the dashed third bar are legible, and the row
   reads as illustration rather than as bullet ornaments. */
.v2 .numbered__icon svg { width: clamp(78px, 8vw, 112px); height: auto; }
.v2 .numbered { gap: 18px; padding-top: 22px; }
.v2 .numbered__icon { opacity: 0.95; }
@media (max-width: 860px) { .v2 .numbered__icon svg { width: 84px; } }

/* ---------- The thing they walk away with ----------
   This is the payoff line, so it is set as one, not as a note in a box. */
.leave {
  display: grid; gap: 14px; max-width: 36rem;
  background: none; border: 0; padding: 0; border-radius: 0;
}
.leave__line {
  margin: 0; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.16; letter-spacing: -0.02em;
  color: var(--fgc-lime); text-wrap: balance;
}

/* ---------- Two paths ----------
   The old version gave the section title and the two card statements the same
   type size, so nothing led. The title is now the loud step and the statements
   drop well below it. The cards also sat on --pg-alt against black, a two per
   cent difference that made two options read as one block, so they take a
   visible edge, a lime label each, and an "or" between them. */
.paths {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2.5vw, 28px); align-items: stretch;
}
.path {
  display: grid; gap: 18px; align-content: start;
  padding: clamp(24px, 3vw, 38px);
  background: var(--pg-alt); border: 1px solid var(--pg-line);
  border-radius: var(--radius-card);
  transition: border-color 260ms var(--ease), transform 260ms var(--ease);
}
.path:hover { border-color: rgba(255, 249, 238, 0.5); transform: translateY(-3px); }
.path .tag-lime { justify-self: start; }
.path__line {
  margin: 0; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.32;
  letter-spacing: -0.015em; color: var(--pg-fg); text-wrap: pretty;
}
.paths__or {
  align-self: center; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(18px, 2vw, 26px); color: var(--pg-muted);
}
@media (max-width: 860px) {
  .paths { grid-template-columns: 1fr; }
  .paths__or { justify-self: center; }
}

/* ---------- The two routes, as two boxes ----------
   They were two unbounded columns of type on the same black ground, so the
   comparison had to be inferred. Both are now bounded. Route two carries the
   lime edge, a lime tint and a label, because it is the one the whole page is
   walking them towards; route one is deliberately the duller of the two. */
.versus {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2.5vw, 28px); align-items: stretch;
}
.versus__col {
  display: grid; gap: 12px; align-content: start;
  padding: clamp(24px, 3vw, 40px);
  background: var(--pg-alt); border: 1px solid var(--pg-line);
  border-radius: var(--radius-card);
}
.versus__col--alt {
  border-color: var(--fgc-lime);
  background: linear-gradient(180deg, rgba(232,255,191,0.07), rgba(232,255,191,0.02));
}
.versus__col--alt .tag-lime { justify-self: start; margin-bottom: 2px; }
.versus__col--alt .eyebrow { color: var(--fgc-lime); opacity: 0.85; }
.versus__or {
  align-self: center; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(18px, 2vw, 26px); color: var(--pg-muted);
}
@media (max-width: 860px) {
  .versus { grid-template-columns: 1fr; }
  .versus__or { justify-self: center; }
}

/* ---------- The audit, running ----------
   preload="none" so the 5.6MB only moves if somebody presses play; the poster
   carries the still. Capped well below full width because it is a near-square
   screen recording and would otherwise dominate the section. */
.demo { margin: 0; display: grid; gap: 14px; justify-items: start; }
.demo__video {
  display: block; width: 100%; max-width: 30rem; height: auto;
  border-radius: var(--radius-img); border: 1px solid var(--pg-line);
  background: #000;
}
.demo__video:focus-visible { outline: 2px solid var(--fgc-lime); outline-offset: 3px; }
.demo__cap {
  font-size: 14px; line-height: 1.5; color: var(--pg-muted); max-width: 34ch;
}

/* ---------- The preview: prompt left, recording right ---------- */
.brief-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(24px, 4vw, 48px); align-items: start;
}
.brief-grid .prompt { max-width: none; margin: 0; }
@media (max-width: 900px) { .brief-grid { grid-template-columns: 1fr; } }

/* Image on the left, words on the right. */
.split-ed--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
.split-ed--flip .split-ed__img { order: -1; }
@media (max-width: 900px) {
  .split-ed--flip { grid-template-columns: 1fr; }
  .split-ed--flip .split-ed__img { order: 0; }
}

/* ---------- Autoplay, done responsibly ----------
   No autoplay attribute: the file is 5.7MB and preload is none, so nothing is
   fetched until it scrolls into view. Muted and looping because no browser
   permits autoplay with sound, and controls stay on so a viewer can unmute or
   stop it, which is also what WCAG 2.2.2 asks for on moving content. Reduced
   motion leaves it on the poster until pressed. */
.demo { margin: 0; display: grid; gap: 12px; justify-items: start; }
.demo__video { width: 100%; max-width: 24rem; }

/* ---------- Brands: a rail that never stops ----------
   Same seam discipline as the logo rail: the roster is duplicated exactly once
   and the track travels -50%, so the loop point is invisible. Spacing rides on
   the cards rather than flex gap, or half a gap lands in the wrong place.
   It pauses on hover and on keyboard focus so a moving link can still be
   clicked, and the button is the explicit control WCAG 2.2.2 asks for. */
.carousel--loop .cases {
  overflow: hidden; display: block; padding: 0; margin-inline: 0;
  scroll-snap-type: none;
}
.carousel--loop .cases__track {
  display: flex; width: max-content; gap: 0;
  animation: caseRail 78s linear infinite;
  will-change: transform;
}
.carousel--loop .case {
  flex: 0 0 clamp(280px, 27vw, 400px);
  margin-right: clamp(14px, 2vw, 22px);
  scroll-snap-align: none;
}
@keyframes caseRail { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.carousel--loop:hover .cases__track,
.carousel--loop:focus-within .cases__track,
.carousel--loop.is-paused .cases__track { animation-play-state: paused; }
.carousel__btn[aria-pressed="true"] { border-color: var(--fgc-lime); color: var(--fgc-lime); }
@media (prefers-reduced-motion: reduce) {
  .carousel--loop .cases__track { animation: none; }
  .carousel--loop .cases { overflow-x: auto; }
}

/* The system sets the footer wordmark at 10% cream, which all but vanishes on
   a true black footer. It is decorative and aria-hidden, so this is purely a
   visibility call rather than a contrast one. */
.v2 .footer-wordmark { color: rgba(255, 249, 238, 0.2); }

/* ---------- Credentials row ----------
   The system's .stat, three across. Borderless and unboxed, because the
   numbers are the structure and a box round each one would just add three more
   outlines to a page that has plenty. */
.creds {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--pg-line); padding-top: clamp(24px, 3vw, 40px);
}
.creds .stat { border: 0; background: none; padding: 0; gap: 8px; }
.creds .stat__value { font-size: clamp(34px, 4vw, 58px); letter-spacing: -0.04em; }
.creds .stat__label { font-size: 14px; line-height: 1.4; max-width: 22ch; }
@media (max-width: 700px) {
  .creds { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .creds .stat:last-child { grid-column: 1 / -1; }
}

/* ---------- What changes for them ----------
   Icon in a tinted rounded square, title and copy to its right. Deliberately a
   different rhythm from the session row above it, which puts its icons on top
   in four columns, so the two sections do not read as the same block twice. */
.walk-head { display: grid; gap: 14px; justify-items: center; text-align: center; }
.walk-head .h2--loud { max-width: 18ch; }
.walk-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 52px) clamp(32px, 5vw, 72px);
}
.walk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: start; }
.walk__icon {
  flex: none; display: grid; place-items: center;
  width: clamp(52px, 5vw, 64px); aspect-ratio: 1;
  border-radius: 16px; background: rgba(232, 255, 191, 0.12);
  color: var(--fgc-cream);
}
.walk__icon svg { width: 62%; height: auto; display: block; }
.walk__text { display: grid; gap: 8px; }
.walk__title { margin: 0; font-size: clamp(19px, 1.9vw, 23px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; color: var(--pg-fg); text-wrap: balance; }
.walk__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pg-muted); text-wrap: pretty; }
/* three items in a two-column grid leaves a gap, so the last one centres */
.walk-grid > :last-child { grid-column: 1 / -1; max-width: calc(50% - clamp(16px, 2.5vw, 36px)); justify-self: center; }
@media (max-width: 860px) {
  .walk-grid { grid-template-columns: 1fr; }
  .walk-grid > :last-child { grid-column: auto; max-width: none; justify-self: stretch; }
}