/* Homepage V2. Preview only.
 *
 * Its own stylesheet on purpose: production's studio.css stays untouched while this is judged, so
 * the live page cannot be affected by an experiment and rollback is deleting two files.
 *
 * **No scroll pinning anywhere.** The section this replaces held 900px of content inside a 2,610px
 * pinned scrub, so a visitor scrolled two and a half screens to receive one comparison. Everything
 * below is ordinary document flow. Entrances are short, they are opt-in through a `js` class, and
 * nothing is required to read the page.
 *
 * The design rule throughout is information per viewport rather than word count. The page is
 * shorter because each screen carries a whole idea, not because sentences were cut.
 */

:root {
  --v2-max: 1160px;
  --v2-gap: clamp(56px, 8vh, 104px);
}

.v2 { background: var(--paper); }
/* The one action on the page must never look like two. At 375px "Try a real situation" wrapped in
   the nav button, which is 62px of a 62px-tall header saying the CTA did not fit. */
.v2 .nav .btn { white-space: nowrap; }
@media (max-width: 400px) {
  .v2 .brand { font-size: .82rem; }
  .v2 .nav .btn { padding: 9px 12px !important; font-size: .78rem !important; }
}
.v2 .wrap-v2 { max-width: var(--v2-max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

.v2 section { padding: var(--v2-gap) 0; }
.v2 .eyebrow {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin: 0 0 10px;
}
.v2 h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -.025em;
  margin: 0 0 14px; max-width: 20ch;
}
.v2 p { color: var(--ink-2); }
.v2 .lede { font-size: clamp(1rem, 1.5vw, 1.12rem); max-width: 56ch; }

/* ---------------------------------------------------------------- hero
   The live hero puts the headline 424px down on desktop against 183px on mobile, which makes
   desktop the weaker layout. This grid is vertically centred and capped, so the headline sits in
   the same relative place on both and the CTA is always in the first screen. */
.v2-hero {
  min-height: min(86svh, 760px);
  display: grid; align-items: center;
  grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 64px);
  padding-top: clamp(28px, 5vh, 56px) !important;
}
.v2-hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: .98; letter-spacing: -.035em;
  margin: 0 0 18px; max-width: 12ch;
}
.v2-hero .mark { background: linear-gradient(transparent 62%, var(--yellow) 62%); }
.v2-hero-art { position: relative; }
/* The v5 master is PLATED: opaque, on its own backdrop, rather than a cut-out floating on paper.
   So the image needs a frame, because a hard-edged rectangle of a slightly different cream reads
   as a mistake. Rounded to the page's own radius and capped: at full column width the character
   sat larger than the headline, which put the wrong thing first. */
.v2-hero-art img {
  width: 100%; max-width: 420px; height: auto; display: block; margin-left: auto;
  border-radius: var(--r-lg);
}
.v2-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.v2-cta-note { font-size: .86rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- contradiction
   One viewport, no pin. The two numbers sit side by side and the visitor is asked to choose,
   which is the point: the page should make somebody take a position, not watch an animation. */
.v2-contra { background: var(--paper-2); }
.v2-nums {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(14px, 3vw, 34px); margin: 30px 0 8px;
}
.v2-num {
  background: var(--paper); border: 2px solid var(--line-2); border-radius: var(--r);
  padding: clamp(18px, 3vw, 30px); text-align: center;
}
.v2-num b { display: block; font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -.04em; }
.v2-num small { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.v2-vs { font-weight: 700; color: var(--ink-3); font-size: .84rem; text-align: center; max-width: 12ch; }
.v2-choose { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.v2-choose button {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--paper); border: 2px solid var(--line-2); border-radius: 999px;
  padding: 11px 20px; min-height: 44px; color: var(--ink);
}
.v2-choose button:hover { border-color: var(--ink); }
.v2-choose button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.v2-after { margin-top: 18px; max-width: 58ch; }
.v2-after[hidden] { display: none; }

/* ---------------------------------------------------------------- product
   Three states of the running application, at their true aspect ratios.

   WHAT THIS REPLACES, AND WHY. The previous rule was
     height: clamp(260px, 38vh, 400px); object-fit: cover; object-position: top center;
     mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
   Measured on production, that box was about 48 percent wider in ratio than the source, so
   `cover` discarded 33 to 39 percent of every screenshot's height, and the mask then faded the
   bottom 18 percent of what survived. The fade landed on live lesson text, cutting a paragraph
   through mid-line, which is what made a real product preview read as a broken image.

   The height cap existed to stop three full-width plates adding 800px to the page. That reason
   is gone: the frames are now captured tighter, so showing all of every one costs roughly 200px
   against the cropped version. Compactness came from the capture, which is where it belongs.

   No height, no object-fit, no mask. `height: auto` with true width and height attributes, and a
   srcset so the product's own text is sharp at 1x and 2x rather than upscaled 1.14x on every
   retina screen. */
.v2-steps {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: grid; gap: clamp(30px, 4vw, 46px); max-width: 820px;
}
/* The step label is the product's own sequence: a learner meets these three in this order and
   cannot reach the third without committing at the second. Numbered because that is true, not
   because numbers look considered. */
/* Label and caption sit together ABOVE the frame, so the reader is told what they are about to
   look at rather than what they just looked at. Side by side on desktop, stacked on a phone. */
.v2-step-hd {
  display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; margin: 0 0 12px;
}
.v2-step-k {
  display: flex; align-items: center; gap: 10px; margin: 0; flex: 0 0 auto;
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}
.v2-step-k b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-size: .72rem; letter-spacing: 0; flex: 0 0 auto;
}
.v2-step-c {
  margin: 0; font-size: .92rem; color: var(--ink-2); flex: 1 1 24ch; max-width: 62ch;
}
.v2-shot {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow); margin: 0;
}
.v2-shot img {
  width: 100%; height: auto; display: block;
}

/* ---------------------------------------------------------------- spine */
.v2-spine { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 26px; border-radius: var(--r); overflow: hidden; }
.v2-step { background: var(--paper-2); padding: clamp(16px, 2.4vw, 24px); }
.v2-step b { display: block; font-size: 1.02rem; margin-bottom: 6px; }
.v2-step span { font-size: .9rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- the room */
.v2-room { background: var(--paper-2); }
.v2-lenses { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 2vw, 20px); margin-top: 30px; }
.v2-lens { text-align: center; }
/* Plated, so they are chips rather than cut-outs. A radius and one shared size is what makes five
   separate photographs read as one set: Creative's terracotta plate is far darker than the other
   four, and without a common frame it reads as the odd one out instead of as the distinctive one. */
.v2-lens img {
  width: clamp(64px, 8vw, 96px); height: auto; display: block; margin: 0 auto 10px;
  border-radius: 18px; box-shadow: 0 1px 2px rgba(22, 21, 15, .08);
}
.v2-lens b { display: block; font-size: .9rem; }
.v2-lens span { display: block; font-size: .84rem; color: var(--ink-2); margin-top: 4px; }
.v2-room-foot { margin-top: 30px; max-width: 54ch; }

/* ---------------------------------------------------------------- proof */
.v2-derive { margin-top: 26px; border: 2px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.v2-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px clamp(16px, 2.6vw, 24px); border-top: 1px solid var(--line); }
.v2-row:first-child { border-top: 0; }
.v2-row span { color: var(--ink-2); font-size: .95rem; }
.v2-row b { text-align: right; font-variant-numeric: tabular-nums; }
/* The derive block carried four-digit answers when these rows were built; since the assumption
   section (L103 refinement) they carry sentences, which must wrap. Below 560px the label stacks
   above the value, because a two-column grid of prose at 343px is two ribbons. */
@media (max-width: 560px) {
  .v2-row { grid-template-columns: 1fr; gap: 4px; }
  .v2-row b { text-align: left; }
}
.v2-row-out { background: var(--yellow-soft); }
.v2-row-out b { font-size: 1.15rem; }

/* ---------------------------------------------------------------- close */
.v2-close { text-align: center; }
.v2-close img {
  width: clamp(140px, 18vw, 190px); height: auto; margin: 0 auto 18px; display: block;
  border-radius: 50%;
}
.v2-close h2 { margin-left: auto; margin-right: auto; }
.v2-close .lede { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- reveal
   Three guards, as the working notes require: the hiding rule only exists under `.js`, anything
   already on screen is revealed immediately, and a timer releases everything regardless. A
   reveal that can strand content is worse than no reveal. */
.js .v2-rise { opacity: 0; transform: translateY(14px); }
.v2-rise { transition: opacity .5s ease, transform .5s ease; }
.v2-rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .v2-rise { opacity: 1; transform: none; }
  .v2-rise { transition: none; }
}

/* ---------------------------------------------------------------- mobile
   Desktop and mobile fail differently and needed separate work. Desktop was long because of a
   pinned scrub; mobile got long because every multi-column block reflows into extra rows and the
   section rhythm was tuned for a tall viewport. Measured: without this block mobile ran 6,449px
   against the live page's 5,390. */
@media (max-width: 880px) {
  /* The single biggest mobile saving: seven sections at 65px of padding each end is over 900px of
     nothing. A phone does not need a desktop's breathing room to feel calm. */
  :root { --v2-gap: 44px; }
  .v2 section { padding: 44px 0; }
  /* The spine reads better as a compact list than as stacked cards: same five stages, a third of
     the height, and the order stays obvious. */
  .v2-spine { display: block; border-radius: var(--r); }
  .v2-step { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .v2-step:last-child { border-bottom: 0; }
  .v2-step b { display: inline; margin-right: 8px; }
  .v2-step span { display: inline; }
  .v2-hero { grid-template-columns: 1fr; min-height: 0; padding-bottom: 8px !important; }
  .v2-hero-art { max-width: 230px; margin-top: 4px; }
  .v2-hero-art img { margin-left: 0; }
  .v2-nums { grid-template-columns: 1fr; }
  .v2-vs { max-width: none; padding: 4px 0; }
  .v2-spine { grid-template-columns: 1fr 1fr; }
  .v2-lenses { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
}
@media (max-width: 420px) {
  /* Three across, not two. Five specialists in a two-column grid leave the fifth alone on its own
     row, which reads as a sixth that failed to load. Three columns fits 3 + 2 and the badges are
     still 96px on a 375px screen. */
  .v2-lenses { grid-template-columns: repeat(3, 1fr); column-gap: 8px; }
  .v2-lens span { font-size: .78rem; }
  .v2-spine { grid-template-columns: 1fr; }
  /* One action per row rather than a 2 + 1 wrap, so the three answers read as three equal
     choices instead of two and an afterthought. */
  .v2-choose { display: grid; grid-template-columns: 1fr; }
  .v2-choose button { width: 100%; }
}

/* ------------------------------------------------------------------ certificate block
   One quiet card. The credential is an artifact of finishing, not a sales device, and the
   styling has to say so: no accent, no button, seal at the side. */
.v2-cert{
  display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:start;
  background:var(--card, #FFFDF7); border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; max-width:44rem;
}
.v2-cert img{border-radius:12px}
.v2-cert-k{margin:0 0 6px; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.v2-cert-b{margin:0; color:var(--ink-2); font-size:.95rem; line-height:1.6}
@media(max-width:560px){ .v2-cert{grid-template-columns:44px 1fr; gap:14px; padding:18px 16px} }

/* The specimen beside the copy: the credential itself at card size, drawn to match the paid
   app's issued render. Placeholder name, no date and no code, so nothing on it can be read as
   an issued record. Marked aria-hidden in the markup; the copy block carries the information. */
.v2-cert-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,380px); gap:24px; align-items:stretch}
.v2-cert-row .v2-cert{max-width:none}
.v2-cert-spec{
  background:var(--paper-2, #F5EFDD); border:2px solid var(--ink); border-radius:14px;
  padding:30px 22px 24px; text-align:center;
}
.v2-cert-spec img{border-radius:12px; display:block; margin:0 auto 14px}
.v2-spec-k{margin:0; font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.v2-spec-t{margin:8px 0 0; font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.v2-spec-name{margin:10px 0 0; font-size:1.35rem; font-weight:700; letter-spacing:-.02em; color:var(--ink)}
.v2-spec-e{margin:2px 0 14px; color:var(--ink-3); font-size:.85rem}
.v2-spec-rule{height:1px; background:var(--line-2, #C7BFAB); max-width:220px; margin:0 auto 12px}
.v2-spec-v{margin:0; color:var(--ink-3); font-size:.74rem}
@media(max-width:860px){
  .v2-cert-row{grid-template-columns:1fr}
  .v2-cert-spec{max-width:26rem}
}

/* ============================================================ 2026-08-16 hardening pass
   The staged contradiction, window bars on the product frames, the Room as a real
   disagreement, the edition strip, and the nav's edition link. Appended rather than woven in
   so the diff reads as one decision. */

.v2-nav-r { display: flex; align-items: center; gap: 20px; }
.v2-ed-link { font-size: .88rem; color: var(--ink-2); text-decoration: none; }
.v2-ed-link:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 620px) {
  .v2-ed-link { display: none; }  /* the edition strip and footer still route there */
}

/* The centrepiece. Dark ground so the two numbers become the loudest thing on the page. */
.v2-contra-dark { background: #1D1B16; color: var(--paper); padding: 88px 0; }
.v2-contra-dark .eyebrow { color: #E9A93B; }
.v2-contra-dark h2 { color: var(--paper); }
.v2-contra-dark .lede { color: #CFC8B4; }
.v2-contra-dark .v2-nums { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px; margin: 44px 0 10px; }
.v2-contra-dark .v2-num b { font-size: clamp(4rem, 11vw, 8.2rem); font-weight: 700; }
.v2-contra-dark .v2-num small { color: #A79F87; }
.v2-contra-dark .v2-num-alt b { color: #E9A93B; }
.v2-contra-dark .v2-vs { color: #A79F87; }
.v2-contra-dark .v2-choose button { background: transparent; color: var(--paper);
  border: 1.5px solid #4A463C; min-height: 50px; }
.v2-contra-dark .v2-choose button:hover { border-color: #E9A93B; }
.v2-contra-dark .v2-choose button[aria-pressed="true"] { background: #E9A93B; color: #1D1B16;
  border-color: #E9A93B; }
.v2-contra-dark .v2-after { border-left: 3px solid #E9A93B; padding: 4px 0 4px 18px;
  max-width: 62ch; }
.v2-contra-dark .v2-after p { color: #DDD6C2; }
.v2-contra-dark .v2-after b { color: var(--paper); }
@media (max-width: 880px) {
  .v2-contra-dark { padding: 64px 0; }
  .v2-contra-dark .v2-nums { grid-template-columns: 1fr; gap: 8px; }
  .v2-contra-dark .v2-vs { text-align: left; max-width: none; }
}

/* Window bar on the product frames, so a screenshot reads as software. */
.v2-shot-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--paper-2); }
.v2-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D8CFB6; }

/* The Room, staged: one situation, five defensible lines, characters at legible scale. The v6
   pass moved each specialist's identity into its face, and a face-carried identity needs pixels:
   116 against the old 88, fed by the square-400 derivative. The accent ring carries the domain
   token from tcs.css, so the cast reads as five named specialists rather than five decorations. */
.v2-room-case { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 24px; margin: 30px 0 22px; font-size: 1.04rem; max-width: 56ch; }
.v2-lenses { grid-template-columns: repeat(2, 1fr); }
.v2-lens { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: start;
  text-align: left; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px; }
.v2-lens img { width: 116px; height: 116px; border-radius: 16px; margin: 0;
  border: 3px solid transparent; }
.v2-lens.l-strategy img { border-color: var(--l-strategy); }
.v2-lens.l-planning img { border-color: var(--l-planning); }
.v2-lens.l-creative img { border-color: var(--l-creative); }
.v2-lens.l-performance img { border-color: var(--l-performance); }
.v2-lens.l-operations img { border-color: var(--l-operations); }
.v2-lens span { margin-top: 2px; }
@media (max-width: 880px) {
  .v2-lenses { grid-template-columns: 1fr; }
}

/* The edition strip. Dark card, no price: the price lives on /offer alone. */
.v2-edition { background: #1D1B16; color: var(--paper); border-radius: var(--r);
  padding: 36px; display: grid; grid-template-columns: 1fr auto; gap: 26px;
  align-items: center; }
.v2-edition-k { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: #E9A93B; font-weight: 600; margin-bottom: 8px; }
.v2-edition h3 { font-size: 1.3rem; margin-bottom: 6px; }
.v2-edition p { color: #CFC8B4; max-width: 52ch; font-size: .95rem; }
.v2-edition .btn { background: #E9A93B; color: #1D1B16; }
@media (max-width: 880px) {
  .v2-edition { grid-template-columns: 1fr; }
}

/* The dark stage neutralises the light plates: the numbers sit on the dark ground directly,
   at every width. Without this the base .v2-num cream box survives on mobile and paints the
   white 800 invisible. */
.v2-contra-dark .v2-num { background: transparent; border: 0; padding: 0; text-align: left; }
.v2-contra-dark .v2-vs { text-align: left; }

/* Nothing to undo at phone widths any more. The <picture> element swaps in a capture of the
   product at 430px below 620px, so the phone sees the phone product rather than a shrunken
   desktop one, and the frame is never cropped at any width. */