/* The product preview. Live HTML in the application's own visual language, 31 August 2026.
 *
 * WHAT THIS REPLACES. The homepage and the edition page carried screenshots of the running
 * application. They were honest and they were the wrong object: an image of an interface looks
 * interactive and does nothing, which reads as a broken product rather than a real one, and it
 * copies the course onto the marketing page instead of demonstrating it. The founder's ruling:
 * "This is a beautifully designed real product", never "look at this animation".
 *
 * THE RULE THAT GOVERNS EVERY SELECTOR HERE. Each class mirrors the component it stands for in
 * course-app/src/styles/globals.css, with the same tokens, radii and type. .pv-opt IS .commit-opt,
 * .pv-art IS .artifact, .pv-card IS .card. When the application changes a component, this file
 * changes with it, and the way to check is to open the two side by side. What is deliberately
 * NOT mirrored is interactivity: nothing in a frame is a button, nothing has a hover state, and
 * every frame carries a PREVIEW label in its chrome, so a visitor is never invited to click a
 * picture. The real call is one link away at /call.
 *
 * Two layouts, one markup.
 *   Desktop with JS: the captions scroll in the left column and the product frame stays put on
 *   the right, swapping state as each caption arrives. Ordinary document scroll drives it; there
 *   is no pinning, no scroll hijack and no nested scroller.
 *   Everything else (phones, tablets under 900px, no JS, print): every step shows its caption
 *   above its own frame, in normal flow, and the document scrolls the way documents do.
 * Motion is one crossfade, .35s, and it is removed entirely under prefers-reduced-motion. */

/* ---------------------------------------------------------------- the frame */
.pv-frame {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-lift); overflow: hidden;
  font-family: var(--sans); color: var(--ink); font-size: .92rem; line-height: 1.55;
  letter-spacing: -.005em; text-align: left;
}
/* The application's persistent bar: one 48px row, hairline, current location by weight and a
   yellow underline. The PREVIEW tag is the one element the product does not have. */
.pv-chrome {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 18px;
  border-bottom: 1px solid var(--line); background: var(--paper);
}
.pv-chrome .pv-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .84rem; white-space: nowrap; }
.pv-chrome .pv-brand img { width: 20px; height: 20px; }
.pv-chrome .pv-links { display: flex; gap: 14px; margin-left: 6px; font-size: .8rem; color: var(--ink-2); }
.pv-chrome .pv-links span { padding: 13px 0 11px; border-bottom: 2px solid transparent; }
.pv-chrome .pv-links span[data-current] { color: var(--ink); font-weight: 700; border-bottom-color: var(--yellow); }
.pv-chrome .pv-count { margin-left: auto; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-chrome .pv-tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 8px;
  white-space: nowrap;
}
.pv-body { padding: 22px 24px 24px; }

/* ---------------------------------------------------------------- lesson chrome */
.pv-progress { height: 6px; background: var(--line); border-radius: 100px; overflow: hidden; }
.pv-progress i { display: block; height: 100%; background: var(--ink); }
.pv-progress-k { font-size: .78rem; color: var(--ink-3); margin: 7px 0 18px; }
.pv-eyebrow {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 400; margin: 0 0 6px;
}
.pv-h { font-size: 1.55rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 6px; }
.pv-meta { font-size: .86rem; color: var(--ink-3); margin: 0 0 18px; }

/* The situation block: paper-2 ground, a rule down the left, as in the product. */
.pv-situation {
  background: var(--paper-2); border-left: 3px solid var(--line-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 16px 18px 6px; margin: 0 0 18px;
}
.pv-situation p { margin: 0 0 12px; max-width: 62ch; }
.pv-situation p:first-child { font-size: 1.02rem; }

/* The artifact: somebody else's object arriving in your morning. White, hairline, mono header. */
.pv-art { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; margin: 14px 0; overflow: hidden; }
.pv-art-head { padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.pv-art-row { margin: 0 0 3px; font-size: .82rem; line-height: 1.5; }
.pv-art-row:last-child { margin-bottom: 0; }
.pv-art-row b {
  display: inline-block; min-width: 62px; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 400;
}
.pv-art-body { padding: 14px; }
.pv-art-body p { margin: 0 0 10px; max-width: 62ch; }
.pv-art-body p:last-child { margin-bottom: 0; }
.pv-art-chat { padding: 12px 14px; display: grid; gap: 8px; }
.pv-art-msg { margin: 0; font-size: .9rem; line-height: 1.5; max-width: 52ch; }
.pv-art-msg b {
  display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: 2px;
}
.pv-art-msg[data-me] { margin-left: auto; text-align: right; }

/* A small data table, the way the lesson prose sets one. */
.pv-table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: .88rem; }
.pv-table th {
  text-align: left; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400; padding: 6px 0; border-bottom: 1px solid var(--line-2);
}
.pv-table td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.pv-table th:not(:first-child), .pv-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.pv-table td:first-child { font-weight: 700; }

/* ---------------------------------------------------------------- the commit
   Mirrors .commit-stake, .commit-opts, .commit-opt, .commit-tag. Not buttons: these are the
   product's decision cards drawn as list items, and no rule here responds to hover or focus. */
.pv-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.pv-ask { font-size: 1.06rem; font-weight: 700; margin: 4px 0 4px; }
.pv-stake { font-size: .84rem; color: var(--ink-3); margin: 0 0 12px; max-width: 56ch; }
.pv-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pv-opt {
  position: relative; padding: 12px 15px; border: 2px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); font-size: .9rem; line-height: 1.45;
}
.pv-opt .pv-letter { font-weight: 700; margin-right: 9px; }
.pv-opts[data-locked] .pv-opt[data-chosen] { border-color: var(--ink); padding-left: 19px; }
.pv-opts[data-locked] .pv-opt[data-chosen]::before {
  content: ''; position: absolute; left: -2px; top: -2px; bottom: -2px; width: 6px;
  background: var(--ink); border-radius: var(--r-sm) 0 0 var(--r-sm);
}
/* The three not taken give up their fill, never their ink. */
.pv-opts[data-locked] .pv-opt:not([data-chosen]) { background: transparent; border-style: dashed; border-color: var(--line-2); }
.pv-commit-tag {
  display: block; font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 5px;
}
.pv-commit-tag em { font-style: normal; font-weight: 400; color: var(--ink-3); }

/* The reasoning that opens after the commit. */
.pv-reason { margin-top: 16px; border-left: 3px solid var(--ink); padding: 4px 0 4px 16px; }
.pv-reason p { margin: 0 0 10px; max-width: 62ch; color: var(--ink-2); }
.pv-reason p:last-child { margin-bottom: 0; }
.pv-reason b { color: var(--ink); }
.pv-strongest { margin-top: 14px; font-size: .9rem; }
.pv-strongest .pv-eyebrow { margin-bottom: 3px; }

/* The intervention and the rule, as the product sets them. */
.pv-int { display: flex; gap: 12px; align-items: flex-start; }
.pv-int img { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; background: var(--paper-2); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--l-ring, var(--line-2)); }
.pv-int[data-domain='strategy'] img { --l-ring: var(--l-strategy); }
.pv-int[data-domain='planning'] img { --l-ring: var(--l-planning); }
.pv-int .pv-q { margin: 0 0 4px; font-weight: 700; }
.pv-int p { margin: 0; color: var(--ink-2); }
.pv-rule { background: var(--yellow-soft); border: 1px solid var(--yellow); border-radius: var(--r); padding: 14px 18px; margin-top: 14px; }
.pv-rule p { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.4; }

/* ---------------------------------------------------------------- the callbook */
.pv-tone {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
.pv-tone[data-t='strongest'] { background: #E7F0E9; color: var(--ok); }
.pv-tone[data-t='defensible'] { background: var(--yellow-soft); color: var(--warn); }
.pv-tone[data-t='weak'] { background: #F3EDE4; color: var(--ink-2); }
.pv-counts { display: flex; gap: 22px; flex-wrap: wrap; }
.pv-counts b { display: block; font-size: 1.4rem; line-height: 1.1; }
.pv-counts span { display: block; font-size: .8rem; color: var(--ink-3); }
.pv-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 4px; }
.pv-chip {
  font-size: .8rem; font-weight: 600; min-height: 34px; padding: 6px 13px; display: inline-flex; align-items: center;
  border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--paper); color: var(--ink-2);
}
.pv-chip[data-on] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }
.pv-chip i { font-style: normal; font-weight: 400; margin-left: 4px; opacity: .75; }
.pv-entry { margin-top: 10px; }
.pv-entry .pv-title { font-weight: 700; }
.pv-entry .pv-prompt { color: var(--ink-3); font-size: .88rem; margin: 6px 0 0; }
.pv-entry .pv-said { margin: 9px 0 0; }
.pv-entry .pv-said .pv-eyebrow { margin-bottom: 2px; }
.pv-entry .pv-rulel { margin: 10px 0 0; font-size: .88rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 9px; }
.pv-stage-h { font-size: .98rem; font-weight: 700; margin: 18px 0 8px; }

/* ---------------------------------------------------------------- the dashboard */
.pv-next { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pv-next .pv-btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: .88rem;
}
.pv-stages { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pv-stages li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-2); font-size: .9rem; }
.pv-stages li[data-done] { border-color: var(--line-2); }
.pv-stages li[data-next] { background: var(--paper); border-color: var(--ink); }
.pv-stages li span { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the walkthrough layout */
.pv-scroll { margin-top: 30px; }
.pv-step { margin: 0 0 38px; }
.pv-step:last-child { margin-bottom: 0; }
.pv-cap { margin: 0 0 14px; }
.pv-cap-k {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.pv-cap-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;
}
.pv-cap h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 10px; }
.pv-cap p { margin: 0; color: var(--ink-2); font-size: .98rem; max-width: 40ch; }
.pv-foot { margin-top: 16px; font-size: .86rem; color: var(--ink-3); max-width: 62ch; }
.pv-foot a { color: var(--ink); }

/* The stacked variant, for the edition page: no sticky column, every caption above its own frame,
   because that page's job is depth rather than a first impression. */
.pv-stack { display: grid; gap: 36px; margin-top: 28px; }
.pv-stack .pv-step { margin: 0; }
.pv-stack .pv-frame { max-width: 760px; }
.pv-stack .pv-cap p { max-width: 62ch; }
.pv-stack .pv-frame { font-size: .9rem; }
/* The same restraint on a phone as the homepage walkthrough: the frames keep their content and
   lose their furniture, and the callbook shows two entries where the desktop shows three. */
@media (max-width: 899px) {
  .pv-stack .pv-progress, .pv-stack .pv-progress-k, .pv-stack .pv-chips { display: none; }
  .pv-stack [data-mobile-hide] { display: none; }
  .pv-stack .pv-body { padding-top: 18px; }
}

/* Desktop with JavaScript: captions in the left column, one frame area on the right that the
   four states share. Every frame occupies the same grid cell, so they stack; the active one is
   opaque, the rest are transparent and hidden from the accessibility tree. */
/* ---------------------------------------------------------------- the tabs, under 900px
   The founder's ruling of 31 August: a four-frame stack cost 2,400px of phone scrolling, so on a
   phone and a tablet the preview is ONE frame with four real controls. They are buttons, they
   work, they say which one is selected, and nothing advances on its own. The tablist is revealed
   by script and gets its roles from script, because without JavaScript the four steps are simply
   four stacked sections and calling them tabs would be a lie a screen reader repeats. */
.pv-tabs { display: none; }
@media (max-width: 899px) {
  .pv-tabs:not([hidden]) {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 16px;
  }
  .pv-tabs button {
    font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
    min-height: 44px; padding: 10px 15px;
    border: 1.5px solid var(--line-2); border-radius: 999px;
    background: var(--paper); color: var(--ink-2);
    transition: background-color var(--t), border-color var(--t), color var(--t);
  }
  .pv-tabs button[aria-selected='true'] {
    background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700;
  }
  .pv-tabs button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  /* One panel at a time. The caption travels with its frame, so the reader always has the
     sentence that explains what they are looking at. */
  /* Belt and braces with the scroll correction in v2.js: the browser must not try to keep its
     own anchor inside a panel that is being replaced. */
  .pv-scroll[data-tabbed], .pv-stack[data-tabbed] { overflow-anchor: none; }
  .pv-scroll[data-tabbed] .pv-step[hidden], .pv-stack[data-tabbed] .pv-step[hidden] { display: none; }
  .pv-scroll[data-tabbed] .pv-cap, .pv-stack[data-tabbed] .pv-cap { margin-bottom: 14px; }
  .pv-scroll[data-tabbed] .pv-cap-k, .pv-stack[data-tabbed] .pv-cap-k { display: none; }
  .pv-scroll[data-tabbed] .pv-step, .pv-stack[data-tabbed] .pv-step { margin-bottom: 0; }
  .pv-stack[data-tabbed] { gap: 0; }
  .pv-scroll .pv-progress, .pv-scroll .pv-progress-k { display: none; }
  .pv-scroll .pv-body { padding-top: 18px; }
  .pv-scroll [data-mobile-hide], .pv-scroll [data-phone-hide] { display: none; }
}
@media (min-width: 900px) {
  .js .pv-scroll { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); grid-auto-rows: auto; }
  .js .pv-scroll .pv-frame { font-size: .88rem; }
  .js .pv-scroll .pv-body { padding: 18px 22px 20px; }
  /* The lesson count already sits in the frame's bar, so the progress rows go here as well:
     the tallest frame has to fit under the bar on a 900px screen, and these were the 45px. */
  .js .pv-scroll .pv-progress, .js .pv-scroll .pv-progress-k, .js .pv-scroll [data-mobile-hide] { display: none; }
  .js .pv-scroll .pv-situation p:first-child { font-size: .96rem; }
  .js .pv-scroll .pv-table td { padding: 7px 0; }
  .js .pv-step { display: contents; }
  .js .pv-cap { grid-column: 1; min-height: 66vh; display: flex; flex-direction: column; justify-content: center; margin: 0; }
  .js .pv-step:first-child .pv-cap { min-height: 56vh; }
  .js .pv-step:last-child .pv-cap { min-height: 60vh; }
  .js .pv-frame-wrap { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 88px; align-self: start; }
  .js .pv-frame-wrap .pv-frame { transition: opacity .35s ease; }
  .js .pv-frame-wrap:not([data-active]) .pv-frame { opacity: 0; pointer-events: none; }
  .js .pv-frame-wrap:not([data-active]) { pointer-events: none; }
  .js .pv-foot { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pv-frame-wrap .pv-frame { transition: none; }
}
@media (max-width: 560px) {
  .pv-body { padding: 16px 16px 18px; }
  .pv-chrome { padding: 0 14px; gap: 10px; }
  .pv-chrome .pv-brand span { display: none; }
  .pv-chrome .pv-links { gap: 10px; }
  .pv-h { font-size: 1.35rem; }
  .pv-cap p { max-width: none; }
  .pv-counts { gap: 16px; }
}