@charset "utf-8";
/* Journey — venture page. Loaded after journey.css, which carries the tokens,
   the type scale and the shared chrome. Values from Journey_build_note.md §3–§4
   unless noted; section numbers in comments point back to it. */

/* ---------- shell ------------------------------------------------------------
   Venture-page sections are full-bleed bands whose inner padding equals the
   page margin (28px at 390, 36px at 1440), so the header's brand surface runs
   edge to edge while its text lines up with everything below it. */

.vpage { padding-bottom: calc(56px + 20px + 28px + env(safe-area-inset-bottom, 0px)); }

.band { padding-left: 28px; padding-right: 28px; }
.band__inner { max-width: 100%; margin: 0 auto; }

/* Below 1200 the phone page is a centred column, as the index is (close note §115).
   Many real phones are wider than 390 logical px (393, 412, 414, 428...), so the
   header's surface fell short of the true screen edges there, with grey either
   side (close note §132). The bleed is a separate layer behind the header's own
   box, sized and centred on the viewport, not on .vpage's narrower column — so
   it reaches the real edges while .vheader itself, and everything positioned
   from its edges (padding, the corner mark), is untouched. */
@media (min-width: 391px) and (max-width: 1199.98px) {
  .vpage { max-width: 390px; margin-left: auto; margin-right: auto; }

  .vheader::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: var(--vsurface);
    z-index: -1;
  }
}

/* ---------- A. header (build note §4) ---------------------------------------- */

.vheader__corner-mark {
  position: absolute;
  top: 64px;                         /* the name's line box: 64px down, 44px tall */
  right: 28px;
  width: 30px;
  height: 44px;
  object-fit: contain;               /* so its centre is the name's centre */
}

.vheader {
  position: relative;
  background: var(--vsurface);
  color: var(--vink);
  padding-top: 64px;
  padding-bottom: 34px;
}

.vheader__name {
  margin: 0;
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--vink);
}

.vheader__micro {
  margin: 8px 0 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--vreversed);
}

.vheader__status { margin-top: 20px; display: flex; align-items: center; }

/* The right-hand metadata column exists only in the 1440 header; at 390 the
   same facts live in the neutral band below it (build note §4). */
.vheader__aside { display: none; }

.pill {
  display: inline-flex;
  align-items: center;
  background: var(--pill-bg);          /* neutral in every case */
  color: var(--pill-word);
  border-radius: 18px;
  padding: 10px 14px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 9px;
  background: var(--dot);
}
.dates {
  margin-left: 10px;                   /* outside the pill, plain text */
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  color: var(--vreversed);
}

/* §7.2 puts the outcome directly under the status pill and date range. That is
   the 390 stack; at 1440 the pill sits in the right metadata column, which is
   330px and too narrow for a line of prose, so the outcome stays in the left
   column under the micro description. */
.outcome {
  margin: 20px 0 0;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--vreversed);
  max-width: 46ch;
}

/* ---------- B. metadata band -------------------------------------------------- */

.meta {
  padding-top: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--section-rule);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.label {
  display: block;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label);
}
.meta__value {
  margin: 8px 0 0;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.35;
  color: var(--body);
}
.meta__mark { flex: none; width: 32px; height: auto; }

/* ---------- C. description ---------------------------------------------------- */

.desc { padding-top: 24px; padding-bottom: 24px; }
.desc__part + .desc__part { margin-top: 24px; }
.desc__part .label {
  display: block;
  margin-bottom: 10px;               /* v2's weight and grey; subtle categories */
  color: var(--label);
}
.desc p {
  margin: 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
  max-width: 66ch;
}
.desc p + p { margin-top: 16px; }

/* ---------- D. highlights ------------------------------------------------------ */

.cardgrid { padding-top: 8px; padding-bottom: 8px; }
.highlights { display: grid; gap: 16px; }

.hcard {
  background: var(--card);
  border-radius: 32px;
  padding: 24px;
}

/* metric strip: up to 6 figures, each with its qualifier (spec §4.1 C) */
.hcard--metrics .metrics { margin-top: 0; }
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
.metric__value {
  display: block;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.metric__label {
  display: block;
  text-wrap: balance;                /* breaks as "revenue / per space" */
  margin-top: 4px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--body-2);
}
.metric__context {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.35;
  color: var(--caption);
}

.metric__star { font-weight: 400; font-size: 0.62em; vertical-align: 0.5em; }
.metrics-note {
  margin: 14px 0 0;
  font-weight: 400;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: var(--caption);
}

.cmp__title {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cmp__subtitle {
  margin: 6px 0 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--body-2);
}
.cmp__caption {
  margin: 18px 0 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--caption);
}

/* CAU-H1: four numbered steps. The content is a real sequence, so it is
   numbered. The deck's step circles are blue; blue appears only in the message
   card (build note §2), so they take the neutral primary instead. */
.steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  position: relative;
}
.steps::before {                     /* connector behind the numbers */
  content: "";
  position: absolute;
  left: 15px;
  top: 15px;
  bottom: 15px;
  width: 1px;
  background: var(--hairline);
}
/* the run ends on the last step; it used to trail past it into nothing */
.step[data-last] { background: var(--card); position: relative; }
.step { display: flex; align-items: center; gap: 14px; position: relative; }
.step__n {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-text);
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
.step__label { font-weight: 400; font-size: 17px; line-height: 1.3; color: var(--body); }


/* CAU-H2: the 2×2. Built in HTML rather than SVG so the labels stay at a real
   CSS size at any width instead of scaling with a viewBox. Positions are read
   off the 3× render of deck page 15. */
.plot {
  position: relative;
  margin-top: 30px;
  width: 100%;
}
/* v2's proportions and label placement: the boxes sit inside the field at the
   head of each axis rather than outside it. */
.plot__field { position: relative; width: 100%; aspect-ratio: 334 / 360; }
.plot__axis-v, .plot__axis-h { position: absolute; background: var(--body); }
.plot__axis-v { left: 46%; top: 6%; bottom: 0; width: 1px; }
.plot__axis-h { top: 62%; left: 0; right: 4%; height: 1px; }
.plot__arrow { position: absolute; width: 0; height: 0; }
.plot__arrow--up {
  left: 46%; top: 6%;
  translate: -50% -100%;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--body);
}
.plot__arrow--right {
  top: 62%; right: 4%;
  translate: 100% -50%;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--body);
}
.plot__axis-label {
  position: absolute;
  width: max-content;                /* the box hugs its text */
  max-width: 42%;
  background: var(--page);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 7px 10px;
}
.plot__axis-label--y { left: 46%; top: 0; margin-left: 10px; }
.plot__axis-label--x { top: 62%; right: 0; margin-top: 12px; text-align: right; }
/* v2's boxed axis labels, which read better at both widths. The text takes a
   cooler, lighter shade than the plotted names so the pair is clearly the axis
   rather than something sitting in a quadrant, and each box hugs its text. */
.plot__axis-name {
  display: block;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}
.plot__axis-descriptor {
  display: block;
  margin-top: 3px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.25;
  color: var(--label);
}
.plot__item {
  position: absolute;
  translate: 0 -50%;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.25;
  color: var(--body-2);
}
.plot__item--right { text-align: left; }
.plot__item--left { text-align: right; }
.plot__item--self { font-weight: 600; font-size: 15px; color: var(--ink); }
.plot__logo { width: 66px; height: auto; }   /* ~15px tall against 13px text */

/* text blocks: what happened, never what it proves (spec §0.4) */
.blocks p {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}
.blocks p + p { margin-top: 16px; }

/* ---------- E. proof ------------------------------------------------------------ */

/* The column is the screen's width, never the phone card's: on phones narrower
   than 390 the fixed 290px phone centres in a narrower card instead of pushing
   the card past the margin (close note §113, §114). At 390 the column is 334px
   either way. At 1440 .proof is display: contents, so this does not reach it. */
.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }

.frame {
  background: var(--card);
  border-radius: 32px;
  padding: 22px;
  position: relative;
  display: flex;
  justify-content: center;
}

/* Caucus takes the phone-first exception: phone frame at both widths (A5). */
/* One device size at both widths. At 390 the card's inner width is 290px, so
   the mock-up now fills its box the way the cards do on desktop. Amends build
   note §4's 238/452 phone figures. */
.device {
  position: relative;
  width: 290px;
  background: var(--bezel);
  border-radius: 34px;
  padding: 7px;
}
.screen {
  position: relative;
  width: 276px;
  height: 556px;
  border-radius: 28px;
  overflow: hidden;
  background: #ffffff;
}

/* the site's sticky navbar, rendered as a fixed bar and cropped out of the page
   images, so the wordmark and VIEW SPACES stay reachable at any scroll position */
.screen__bar { position: absolute; inset: 0 0 auto 0; z-index: 2; }
.screen__bar img { width: 100%; height: auto; }

.screen__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* The capture scrolls, and at its top and bottom the gesture chains to the
     page behind rather than dying in the frame (asset-inventory §1.3).
     `contain` was here and is precisely what blocks that hand-off. */
  overscroll-behavior-y: auto;
  scrollbar-width: none;
}
.screen__scroll::-webkit-scrollbar { display: none; }
.screen__page { position: relative; width: 100%; }
.screen__page img { width: 100%; height: auto; display: block; }

/* Hotspots stay visible. A3 drops CAU-L1's frame label because visible hotspots
   plus highlight-on-miss do the work it was there for, so they cannot be an
   on-hover-only affordance. */
.hotspot {
  position: absolute;
  display: block;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

/* The marker is a dot pinned to the top-right of the real control, not a box
   drawn over it. White core with a dark halo, so it reads on the black navbar
   and on white page content without introducing a colour: blue belongs to the
   message card (build note §2), and any accent would compete with the captured
   site's own blue and teal buttons. */
.hotspot__dot {
  position: absolute;
  isolation: isolate;
  top: 50%;
  left: 100%;
  margin-left: 7px;                  /* beside the control, not over it */
  /* flipped to the inside for controls that sit against the screen edge */
  margin-top: -4px;                  /* not translate: the core animates transform */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8E8E93;               /* solid, filled; reads on black and white */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.hotspot__dot--left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 7px;
}

/* Halo: a soft radial glow, strong at the core and fading to nothing at its
   edge, so it reads clearly on the black navbar and on white page content
   without the hard circular boundary a flat disc gives over white.
   One second, emanating outward. */
.hotspot__dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(158, 158, 166, 0.95) 0%,
    rgba(158, 158, 166, 0.80) 38%,
    rgba(158, 158, 166, 0.30) 68%,
    rgba(158, 158, 166, 0) 100%);
  animation: hotspot-pulse 1s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

@keyframes hotspot-pulse {
  0%   { opacity: 0.95; transform: scale(0.9); }
  65%  { opacity: 0.50; transform: scale(2.9); }
  100% { opacity: 0;    transform: scale(4.1); }
}

/* The core stays put: solid, one size, always. Only the halo moves. */

/* Tapping dead space makes every dot flare at once (spec §5.4). */
.screen.is-hinting .hotspot__dot::after { animation-duration: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  .hotspot__dot::after { animation: none; opacity: 0.7; transform: scale(2.2); }
}

/* a thin scroll indicator, so the frame reads as scrollable */
.screen__scrollbar {
  position: absolute;
  right: 3px;
  width: 3px;
  border-radius: 2px;
  background: rgba(17, 17, 19, 0.28);
  opacity: 0;
  transition: opacity 260ms var(--ease);
  z-index: 3;
  pointer-events: none;
}
.screen.is-scrolling .screen__scrollbar { opacity: 1; }

.stack { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.builtwith {
  width: 100%;
  border-top: 1px solid var(--hairline);   /* same hairline as the intro card */
  padding-top: 20px;
}
.builtwith .label { display: block; margin-bottom: 16px; color: var(--body-2); }
.pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* On the card's #F7F7F9 the standard pill grey is only six values away and
   disappears. A darker fill lifts them off it; the hairline shadow gives an
   edge without an outline. */
.pill--tool {
  background: #E7E7EB;
  color: var(--body);
  border-radius: 16px;
  padding: 8px 14px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 1px 1px rgba(17, 17, 19, 0.06);
}

/* CAU-P3: the tours as tappable cards reusing the site's own spaces-card
   photos, labelled with the site's own words */
.tour { background: var(--card); border-radius: 32px; padding: 22px; }
.tour__btn {
  display: block;
  text-decoration: none;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
/* Square at 390 so the thumbnails carry the same presence they do at 1440,
   where the card is 676 wide. 4:3 returns at the desktop breakpoint. */
.tour__btn img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.tour__tag {
  position: absolute;
  right: 12px; top: 12px;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  border-radius: 14px;
  padding: 7px 12px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
}
.tour__name {
  margin: 14px 0 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--caption);
  text-align: left;
}

/* ---------- full screen (spec §5.5) --------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
.overlay[hidden] { display: none; }
.overlay__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--section-rule);
}
.overlay__body { flex: 1; position: relative; }
.overlay__body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.overlay__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 16px;
  justify-items: center;
  padding: 28px;
  text-align: center;
}
.overlay__fallback p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body); }

/* ---------- F. previous / next --------------------------------------------------- */

.prevnext {
  padding-top: 28px;
  padding-bottom: 4px;
  border-top: 1px solid var(--section-rule);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.prevnext__link { text-decoration: none; }
.prevnext__name {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.prevnext__link[data-stub] { cursor: default; }

/* ---------- 1440 ------------------------------------------------------------------ */

@media (min-width: 1200px) {
  .band { padding-left: 36px; padding-right: 36px; }
  .band__inner { max-width: 1368px; }

  .vheader { padding-top: 56px; padding-bottom: 44px; }
  .vheader__inner { display: flex; gap: 64px; align-items: flex-start; }
  .vheader__main { flex: 1; min-width: 0; }
  .vheader__status--inline { display: none; }
  .vheader__aside {
    display: grid;
    justify-items: end;              /* flush to the band's right edge */
    text-align: right;
    flex: none;
    width: 330px;
    margin-top: 10px;
    gap: 26px;
  }
  .vheader__corner-mark { display: none; }   /* the aside carries it at 1440 */
  .vheader__name { font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; }
  .vheader__micro { margin-top: 10px; font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; }
  .vheader__aside .label { color: var(--label-on-dark); }
  .vheader__aside .meta__value { color: var(--vreversed); }
  .vheader__aside .meta__mark { width: 32px; }
  .outcome { font-size: 18px; line-height: 1.6; max-width: 54ch; }

  /* at 1440 Built with and Status live in the header's right column, so the
     neutral metadata band below the header is not used */
  .meta { display: none; }

  .desc { padding-top: 40px; padding-bottom: 44px; }
  /* Three labelled columns across the full width. The single left-aligned
     block left most of the row empty. */
  .desc__inner {
    max-width: 1368px;
    display: grid;
    grid-template-columns: 150px repeat(3, 1fr);   /* Year leads, narrow */
    gap: 40px;
  }
  .desc__part + .desc__part { margin-top: 0; }
  .desc p { font-size: 16px; line-height: 1.6; }

  /* One grid across both sections, so Landscape and the mock-up share a row.
     The sections keep their own labels; display:contents lets their children
     land directly in the grid. Cards sharing a row share a height, and blank
     space is allowed only on the last row. */
  .cardgrid {
    display: grid;
    grid-template-columns: repeat(2, 676px);
    justify-content: center;
    align-items: stretch;
    gap: 16px;
  }
  .highlights, .proof { display: contents; }
  /* Reading order stays as authored; only the desktop columns swap. */
  .hcard--flow { order: 1; }
  .hcard--metrics { order: 2; }
  .frame { order: 3; }
  .hcard--landscape { order: 4; }
  .tour { order: 5; }
  .cardgrid > * > .hcard,
  .cardgrid > * > .frame,
  .cardgrid > * > .tour { display: flex; flex-direction: column; }
  .cardgrid .steps { margin-top: auto; margin-bottom: auto; }
  .hcard { padding: 28px; }
  .frame > .stack { margin: auto 0; }
  .cardgrid .plot { margin-top: auto; margin-bottom: auto; }
  .metrics { grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
  .metric__value { font-size: 30px; }
  .cmp__title { font-size: 22px; }

  /* v2's flow: four equal columns, every number and label on its column's left
     edge, and the process line carrying the full width of the box. */
  .steps { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .steps::before { left: 15px; right: 0; top: 15px; bottom: auto; width: auto; height: 1px; }
  .step { flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; }
  .step__label { font-size: 16px; }

  .plot__field { aspect-ratio: 620 / 540; }
  .plot__item { font-size: 14px; }
  .plot__logo { width: 78px; }
  .plot__item--self { font-size: 17px; }
  .blocks p { font-size: 17px; line-height: 1.6; }

  .frame { padding: 28px; }
  .tour__btn { flex: none; }
  .frame { box-shadow: none; }
  .device { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16); }
  .frame__controls { top: 28px; right: 28px; }
  .ctl { width: 36px; height: 36px; border-radius: 11px; }
  .tour, .builtwith { padding: 24px; }
  .tour__btn { border-radius: 22px; }
  .tour__btn img { aspect-ratio: 4 / 3; }

  .prevnext { padding-top: 40px; }
}

/* ==================================================================================
   BOOMRG — Phase 5. Three cases the Caucus slice never exercised.
   ================================================================================== */

/* ---------- A. light header ------------------------------------------------------
   Caucus is the black case. BOOMRG is white with a hairline (build note §2), so the
   header needs an edge: without one it merges into the page and the brand surface
   stops being a surface at all. --vink and --vreversed come from the record. */

.vheader[data-light="true"][data-hairline="true"] {
  border-bottom: 1px solid var(--hairline);
}
.vheader[data-light="true"] .vheader__micro,
.vheader[data-light="true"] .outcome { color: var(--vreversed); }

/* ---------- E. scroll capture -----------------------------------------------------
   No fixed bar, so the scroller starts at the top of the screen rather than below a
   238px band. Nothing here is tappable: the navbar is not sticky and the return
   button leads to a login page, so it is out of the capture path (§4). */

.frame[data-scroll-capture] .screen__scroll { padding-top: 0; }
/* BOOMRG's own field colour, scoped (close note §36): an UndoGPT scroll capture
   would otherwise have inherited the maroon. */
.vpage[data-venture="boomrg"] .frame[data-scroll-capture] .screen { background: #5F1A37; }   /* the site's own field,
     so the 1px the image cannot cover at a fractional scale is not a white seam */

/* ---------- D. BOO-H1, the lobby poster -------------------------------------------
   Cropped artwork, not a native rebuild: inventory §1.6 rebuilds deck slides because
   16:9 cannot be read on a portrait phone, and this is a portrait poster. It carries
   its own headline, so the card carries no title (§4). Framed the same way as the
   photograph below it, so the two exhibits are presented alike. */

.hcard--poster { padding: 22px; }
.poster { display: block; width: 100%; height: auto; border-radius: 20px; }

/* ---------- the afterword ---------------------------------------------------------
   Its own box at the foot of the page, after the photograph: what ended, and then
   what happened afterwards. One paragraph, with the interval and the name in bold —
   the copy states them and stops, and the reader draws the rest (spec §0.4). Held
   apart from the exhibit cards by its own surface so it reads as a closing note
   rather than a fifth exhibit. */

.afterword {
  margin-top: 16px;
  background: var(--card);
  border-radius: 32px;
  padding: 24px;
}
.afterword p {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  max-width: 78ch;
}
.afterword strong { font-weight: 600; color: var(--ink); }

/* ---------- E. the Stack row  [BOOMRG-scoped] -------------------------------------------------------
   Stack and Time to MVP as two label-and-pill groups. A build figure belongs with the
   tools that produced it, not on a strip about what the service cost and covered. */

.vpage[data-venture="boomrg"] .builtwith { display: flex; flex-wrap: wrap; gap: 28px 48px; }
.vpage[data-venture="boomrg"] .builtwith__group { flex: none; }
.vpage[data-venture="boomrg"] .builtwith__group .label { display: block; margin-bottom: 16px; color: var(--body-2); }

/* ---------- E. BOO-P1, the lobby photograph ---------------------------------------
   No label and no caption [Shawn, Sept 2026]. */

.photo {
  background: var(--card);
  border-radius: 32px;
  padding: 22px;
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* ---------- 1440 -------------------------------------------------------------------- */

@media (min-width: 1200px) {
  /* The aside's label grey is tuned for a dark header; on white it is the normal one. */
  .vheader[data-light="true"] .vheader__aside .label { color: var(--label); }
  .vheader[data-light="true"] .vheader__aside .meta__value { color: var(--vreversed); }
  .vheader[data-light="true"] .meta__mark { width: 32px; height: 44px; object-fit: contain; }
  /* BOOMRG's mark box on its burgundy header, the same as on the light one. The
     drawn B centres on the title's glyphs (centre 79); it sat 7px low (§40). */
  .vpage[data-venture="boomrg"] .meta__mark { width: 32px; height: 44px; object-fit: contain; position: relative; top: -7px; }

  /* Five boxes, three rows, on six columns (close note §69):

       row 1   the highlights band, across (6)
       row 2   the poster (3)                    the mock-up (3)
       row 3   the photograph (2)   the afterword (4)

     Three of six columns with the 16px gap are exactly the shared 676px, so row 2
     is unchanged. The photograph was a full-width band and far too big; it now
     takes a third, and the afterword sits beside it, filling the row.

     Order on a phone is the same, since it is the DOM order: highlights, process,
     mock-up, picture, afterword. */
  /* Caucus's closing note: last, across both columns (close note §92) */
  .vpage[data-venture="caucus"] .cardgrid > .afterword { order: 6; grid-column: 1 / -1; margin-top: 0; padding: 28px 32px; }
  .vpage[data-venture="caucus"] .afterword p { max-width: none; }

  .vpage[data-venture="boomrg"] .cardgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vpage[data-venture="boomrg"] .cardgrid > * > .hcard--metrics { order: 1; grid-column: 1 / -1; }
  .vpage[data-venture="boomrg"] .hcard--poster { order: 2; grid-column: span 3; }
  .vpage[data-venture="boomrg"] .frame { order: 3; grid-column: span 3; }
  .vpage[data-venture="boomrg"] .cardgrid > * > .photo { order: 4; grid-column: span 2; }
  /* Fitted to its text and level with the photograph's top: the last row may end in
     blank space (B15), which reads better than two lines in a tall box (§70). */
  .vpage[data-venture="boomrg"] .cardgrid > .afterword { order: 5; grid-column: span 4; align-self: start; margin-top: 0; padding: 28px 32px; }
  /* no measure: the shared 78ch broke the text mid-box, as on Genii (B50) */
  .vpage[data-venture="boomrg"] .afterword p { max-width: none; }

  /* The four figures take the full width in one row. The rule has to outrank
     `.cardgrid > * > .hcard`, which sets display:flex — a grid declared at lower
     specificity is silently ignored and everything stacks in one column. */
  .vpage[data-venture="boomrg"] .cardgrid > * > .hcard--metrics { display: block; }
  .vpage[data-venture="boomrg"] .hcard--metrics .metrics { grid-template-columns: repeat(4, 1fr); gap: 0; }

  /* The poster card stretches to match the mock-up beside it, so the artwork is
     centred in the space rather than pinned to the top of it. */
  .vpage[data-venture="boomrg"] .cardgrid > * > .hcard--poster { justify-content: center; }

  /* The photograph at its delivered 4:3 (§8): the 16:9 crop existed only for the
     full-width band. Scoped now (§19); these three rules were BOOMRG's alone. */
  .vpage[data-venture="boomrg"] .photo, .vpage[data-venture="boomrg"] .hcard--poster { padding: 28px; }
  .vpage[data-venture="boomrg"] .poster, .vpage[data-venture="boomrg"] .photo img { border-radius: 22px; }
}

/* ==================================================================================
   Genii — Phase 5. A six-screen flow capture that hands off to a live form, and a
   natively drawn diagram. Scoped to the page where a rule would otherwise reach the
   other ventures.
   ================================================================================== */

/* ---------- D. GEN-H2, the quality feedback loop ----------------------------------
   Shapes are an SVG measured from the pricing guide; the words are HTML at a real
   size, as CAU-H2's are, so they stay legible at 290px (close note B44). */

.vpage[data-venture="genii"] .loop-wrap { margin: 20px auto 0; width: 100%; }
.vpage[data-venture="genii"] .loop { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.vpage[data-venture="genii"] .loop svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The steps under the loop, adapted from the pricing guide's list. */
.vpage[data-venture="genii"] .loop-steps {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 16px;
}
.vpage[data-venture="genii"] .loop-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 8px;
}
.vpage[data-venture="genii"] .loop-steps li::before {
  content: counter(step) ".";
  grid-row: 1 / span 2;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.vpage[data-venture="genii"] .loop-steps__head { font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--ink); }
.vpage[data-venture="genii"] .loop-steps__body { font-size: 15px; line-height: 1.5; color: var(--body); }

/* The header lamp at twice the shared mark size [Shawn, Sept 2026]: the mark is
   wide and short, so at the shared 30px it read as a speck. */
.vpage[data-venture="genii"] .vheader__corner-mark { width: 60px; right: 28px; }
.vpage[data-venture="genii"] .meta__mark { width: 64px; }

/* One line for the closing note at 1440: the shared 78ch measure broke it. */
.vpage[data-venture="genii"] .afterword p { max-width: none; }

.vpage[data-venture="genii"] .loop__label {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- E. the flow capture --------------------------------------------------- */

.vpage[data-venture="genii"] .frame[data-flow-capture] .screen__scroll { padding-top: 0; }

/* Six tool pills. `.builtwith__group` is flex:none so BOOMRG's two groups sit side
   by side; with one group of six it would refuse to wrap and push the page wider
   than the phone. */
.vpage[data-venture="genii"] .frame[data-flow-capture] .builtwith__group { flex: 1 1 100%; min-width: 0; }

/* A pop-up is a still of the whole screen, laid over the page beneath it. The page
   keeps its scroll position underneath, so closing the pop-up returns the reader to
   where they were, as it did on the site. */
.vpage[data-venture="genii"] .flow__popup {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #ffffff;
}
.vpage[data-venture="genii"] .flow__popup[hidden] { display: none; }
.vpage[data-venture="genii"] .flow__popup img { display: block; width: 100%; height: 100%; }

/* Dots on controls that fill most of the screen's width sit inside the corner:
   there is no room beside them. */
.vpage[data-venture="genii"] .hotspot__dot--inside {
  left: auto;
  right: 14px;
  top: 14px;
  margin: 0;
}

/* The live form. Rendered at the capture's own 390px width and scaled into the
   276px screen, so its type sits at the same scale as the pages before it and the
   hand-off reads as the next screen rather than a zoom (close note §14). */
.vpage[data-venture="genii"] .flow__live {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #ffffff;
}
.vpage[data-venture="genii"] .flow__live[hidden] { display: none; }
.vpage[data-venture="genii"] .flow__viewport { position: absolute; inset: 0; overflow: hidden; }
.vpage[data-venture="genii"] .flow__viewport iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: calc(556px * 390 / 276);
  border: 0;
  transform: scale(calc(276 / 390));
  transform-origin: 0 0;
}
.vpage[data-venture="genii"] .flow__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: #ffffff;
}
.vpage[data-venture="genii"] .flow__fallback[hidden] { display: none; }
.vpage[data-venture="genii"] .flow__fallback p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
.vpage[data-venture="genii"] .flow__fallback-link { font-weight: 500; font-size: 15px; color: var(--ink); }

/* Never a blank box: the pop-up stays up while the form loads, with a quiet
   spinner over it (spec §5.4, Loading). */
.vpage[data-venture="genii"] .flow__loading {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 22px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  border: 2px solid rgba(17, 17, 19, 0.16);
  border-top-color: rgba(17, 17, 19, 0.62);
  animation: genii-flow-spin 0.8s linear infinite;
}
.vpage[data-venture="genii"] .flow__loading[hidden] { display: none; }
@keyframes genii-flow-spin { to { transform: rotate(360deg); } }

/* Back, shown only while a form is in the frame: the form has no route back to
   the site, so this is the one control the frame carries (close note §14). */
.vpage[data-venture="genii"] .flow__back {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 8px;
  border: 1px solid #E3E3E6;
  border-radius: 10px;
  background: #ffffff;
  color: #3A3A3E;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.vpage[data-venture="genii"] .flow__back[hidden] { display: none; }

/* The way out when a browser refuses the frame. It still fires "load", so the
   timed fallback cannot be counted on; this link is up whenever a form is. */
.vpage[data-venture="genii"] .flow__escape {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  height: 34px;
  font-weight: 500;
  font-size: 14px;
  color: #3A3A3E;
}
.vpage[data-venture="genii"] .flow__escape[hidden] { display: none; }
.vpage[data-venture="genii"] .flow__escape--bar { position: static; margin-left: auto; height: 36px; }
.vpage[data-venture="genii"] .flow-overlay .overlay__bar { display: flex; align-items: center; gap: 12px; }
.vpage[data-venture="genii"] .flow__back svg,
.vpage[data-venture="genii"] .flow-overlay__close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* At 390 the frame cell is too narrow to hold the control beside the phone, so it
   sits above it and the phone moves down to make room. */
.vpage[data-venture="genii"] .frame[data-live="true"] { padding-top: 70px; }

/* Full screen on touch devices (spec §5.4, §5.5). */
.vpage[data-venture="genii"] .flow-overlay__close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #E3E3E6;
  border-radius: 11px;
  background: #ffffff;
  color: #3A3A3E;
  cursor: pointer;
}
.vpage[data-venture="genii"] .flow-overlay .overlay__body { flex: 1; position: relative; }

/* ---------- D. GEN-H3, the allocation step-through (close note §25, §26) -----------
   Five fictional companies, one per tier, drawn by the real script. One paragraph
   states the logic and the frames show it; every frame is rendered at build time.
   Without script the frames read as a storyboard, one under the next. With script (data-ready) they share one set of grid cells and only the
   current one is visible, so the card keeps the height of its tallest frame and the
   controls stay put from step to step. Ticket colours come from the record: Genii's
   three purples, a paler tint and one step between (--fill, --letter). */

.vpage[data-venture="genii"] .sim__note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--caption);
  max-width: 62ch;
}
.vpage[data-venture="genii"] .sim__lede {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
  max-width: 60ch;
}
.vpage[data-venture="genii"] .sim__frames { list-style: none; margin: 22px 0 0; padding: 0; }
.vpage[data-venture="genii"] .sim__frame + .sim__frame { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.vpage[data-venture="genii"] .sim__count {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.vpage[data-venture="genii"] .sim__stage { margin-top: 12px; }

/* the five companies */
.vpage[data-venture="genii"] .sim__head { display: flex; justify-content: space-between; padding: 0 12px 8px; }
.vpage[data-venture="genii"] .sim__head .label { color: var(--label); }
.vpage[data-venture="genii"] .sim__h-tickets, .vpage[data-venture="genii"] .sim__h-recent { display: none; }
.vpage[data-venture="genii"] .sim__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vpage[data-venture="genii"] .sim__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name chance" "tier chance" "tickets recent";
  column-gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
}
/* the three drawn each day, in Genii purple so they read at a glance [Shawn, Sept 2026] */
.vpage[data-venture="genii"] .sim__row[data-drawn] { background: #F1EBFF; box-shadow: inset 3px 0 0 #6F26FF; }
.vpage[data-venture="genii"] .sim__row[data-drawn] .sim__tag { color: #6F26FF; font-weight: 600; }
.vpage[data-venture="genii"] .sim__name { grid-area: name; font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); }
.vpage[data-venture="genii"] .sim__tier { grid-area: tier; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--caption); }
.vpage[data-venture="genii"] .sim__tickets { grid-area: tickets; display: flex; align-items: center; gap: 3px; margin-top: 8px; }
.vpage[data-venture="genii"] .sim__tk {
  width: 10px;
  height: 14px;
  border-radius: 3px;
  background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 19, 0.14);
}
/* a ticket lost to the seven-day count: the slot stays, empty */
.vpage[data-venture="genii"] .sim__tk--lost { background: none; box-shadow: none; border: 1px dashed #A8A8AE; }
.vpage[data-venture="genii"] .sim__recent {
  grid-area: recent;
  align-self: end;
  justify-self: end;
  font-size: 13px;
  line-height: 14px;
  color: var(--caption);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vpage[data-venture="genii"] .sim__chance {
  grid-area: chance;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.vpage[data-venture="genii"] .sim__pct { font-weight: 600; font-size: 17px; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.vpage[data-venture="genii"] .sim__tag { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; font-size: 12px; line-height: 1; color: var(--ink); }
.vpage[data-venture="genii"] .sim__tag svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the long run: tickets beside the leads they came to */
.vpage[data-venture="genii"] .sim__roster[data-mode="tally"] .sim__row { grid-template-areas: "name leads" "tier leads" "tickets tickets" "bar bar"; }
.vpage[data-venture="genii"] .sim__bar { grid-area: bar; display: block; height: 8px; margin-top: 8px; border-radius: 4px; background: #E7E7EB; overflow: hidden; }
.vpage[data-venture="genii"] .sim__fill {
  display: block;
  height: 100%;
  width: calc(var(--v) * 100%);
  border-radius: 4px;
  background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 19, 0.14);
}
.vpage[data-venture="genii"] .sim__leads { grid-area: leads; align-self: center; font-weight: 600; font-size: 17px; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }

/* the tickets for one request */
.vpage[data-venture="genii"] .sim__draw { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.vpage[data-venture="genii"] .sim__cap { margin: 0; font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--body); font-variant-numeric: tabular-nums; }
.vpage[data-venture="genii"] .sim__cap--run { margin-top: 14px; padding: 0 12px; }
.vpage[data-venture="genii"] .sim__chips { list-style: none; margin: 12px 0 0; padding: 0 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.vpage[data-venture="genii"] .sim__chip {
  position: relative;
  width: 22px;
  height: 28px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--fill);
  color: var(--letter);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 19, 0.14);
}
.vpage[data-venture="genii"] .sim__chip[data-state="drawn"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.vpage[data-venture="genii"] .sim__chip[data-state="skipped"] { opacity: 0.42; }
.vpage[data-venture="genii"] .sim__chip[data-state="skipped"]::after,
.vpage[data-venture="genii"] .sim__key[data-state="skipped"] i::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--ink);
  transform: rotate(-52deg);
}
.vpage[data-venture="genii"] .sim__chip[data-state="unread"] { opacity: 0.26; }
.vpage[data-venture="genii"] .sim__legend { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; line-height: 1.3; color: var(--caption); }
.vpage[data-venture="genii"] .sim__key { display: inline-flex; align-items: center; gap: 7px; }
.vpage[data-venture="genii"] .sim__key i { position: relative; width: 10px; height: 13px; border-radius: 3px; background: #9C9CA2; }
.vpage[data-venture="genii"] .sim__key[data-state="drawn"] i { outline: 1.5px solid var(--ink); outline-offset: 1.5px; }
.vpage[data-venture="genii"] .sim__key[data-state="skipped"] i { opacity: 0.55; }
.vpage[data-venture="genii"] .sim__key[data-state="skipped"] i::after { left: -2px; right: -2px; height: 1.5px; }
.vpage[data-venture="genii"] .sim__key[data-state="unread"] i { opacity: 0.3; }

/* controls, in the flow capture's control style; Next is the one to press */
.vpage[data-venture="genii"] .sim__controls { display: flex; gap: 8px; margin-top: 20px; }
.vpage[data-venture="genii"] .sim__controls[hidden] { display: none; }
.vpage[data-venture="genii"] .sim__btn {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #E3E3E6;
  border-radius: 11px;
  background: #ffffff;
  color: #3A3A3E;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.vpage[data-venture="genii"] .sim__btn--next { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.vpage[data-venture="genii"] .sim__btn--replay { margin-left: auto; }
.vpage[data-venture="genii"] .sim__btn:disabled { opacity: 0.38; cursor: default; }

/* one frame at a time. At 390 the controls sit under the stage, whose cell is as
   tall as the tallest frame, so they never move between steps. */
.vpage[data-venture="genii"] .hcard--sim[data-ready] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "lede" "note" "stage" "count" "controls";
  align-content: start;
}
.vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__frames,
.vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__frame { display: contents; }
.vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__title { grid-area: title; }
.vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__lede { grid-area: lede; }
.vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__note { grid-area: note; }
.vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__stage { grid-area: stage; margin-top: 22px; }
.vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__count { grid-area: count; margin-top: 20px; }
.vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__controls { grid-area: controls; margin-top: 10px; align-self: start; }
.vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__frame:not([data-current]) { visibility: hidden; }

/* Motion answers the reader's press: the tickets are read in order, the three drawn
   companies settle once the reading stops, and the long run counts up. Reduced
   motion, and the first view, show the end state at once. */
@media (prefers-reduced-motion: no-preference) {
  .vpage[data-venture="genii"] .hcard--sim[data-animate] .sim__frame[data-current][data-kind="draw"] .sim__chip {
    animation: genii-sim-read 240ms var(--ease) backwards;
    animation-delay: calc(var(--i) * 110ms);
  }
  .vpage[data-venture="genii"] .hcard--sim[data-animate] .sim__frame[data-current][data-kind="draw"] .sim__chip[data-state="unread"] {
    animation-delay: var(--settle);
  }
  .vpage[data-venture="genii"] .hcard--sim[data-animate] .sim__frame[data-current][data-kind="draw"] .sim__row[data-drawn] {
    animation: genii-sim-settle 320ms var(--ease) backwards;
    animation-delay: var(--settle);
  }
  .vpage[data-venture="genii"] .hcard--sim[data-animate] .sim__frame[data-current][data-kind="draw"] .sim__tag {
    animation: genii-sim-fade 320ms var(--ease) backwards;
    animation-delay: var(--settle);
  }
  .vpage[data-venture="genii"] .sim__fill { transition: width 80ms linear; }
}
@keyframes genii-sim-read { from { opacity: 0; transform: translateY(6px); } }
@keyframes genii-sim-settle { from { background-color: transparent; box-shadow: none; } }
@keyframes genii-sim-fade { from { opacity: 0; } }

/* ---------- 1440 -------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .vpage[data-venture="genii"] .loop__label { font-size: 14px; }

  /* Row 1 the strip, across. Row 2 the loop beside the mock-up. Row 3 the
     afterword. Five figures, so five columns. */
  /* Genii's highlights band: five figures across the full width, one row. These
     three declarations were previously inherited from BOOMRG's unscoped rules;
     Genii only ever declared the column count. Now stated here, so the band does
     not depend on another venture's stylesheet. */
  .vpage[data-venture="genii"] .cardgrid > * > .hcard--metrics { order: 1; grid-column: 1 / -1; display: block; }
  .vpage[data-venture="genii"] .hcard--metrics .metrics { grid-template-columns: repeat(var(--genii-cells, 6), 1fr); gap: 0; }
  /* Genii's afterword, likewise: it had been taking BOOMRG's rule. */
  .vpage[data-venture="genii"] .cardgrid > .afterword {
    order: 5; grid-column: 1 / -1; margin-top: 0; padding: 28px 32px;
  }
  .vpage[data-venture="genii"] .hcard--loop { order: 2; }
  .vpage[data-venture="genii"] .cardgrid > * > .hcard--loop { justify-content: center; }
  .vpage[data-venture="genii"] .hcard--loop .cmp__title { align-self: flex-start; }
  .vpage[data-venture="genii"] .loop-wrap { max-width: 400px; margin: 24px auto 0; }
  .vpage[data-venture="genii"] .loop-steps { margin-top: 32px; }
  .vpage[data-venture="genii"] .vheader__aside .meta__mark { width: 64px; }

  .vpage[data-venture="genii"] .flow__back { top: 28px; left: 28px; height: 36px; border-radius: 11px; }
  .vpage[data-venture="genii"] .flow__escape { top: 28px; right: 28px; height: 36px; }
  .vpage[data-venture="genii"] .frame[data-live="true"] { padding-top: 28px; }

  /* GEN-H3: full width, between the loop/mock-up row and the afterword. Narration
     and controls on the left, the companies and tickets on the right. The display
     rules outrank `.cardgrid > * > .hcard`, which sets flex (close note §10). */
  .vpage[data-venture="genii"] .cardgrid > * > .hcard--sim { order: 4; grid-column: 1 / -1; display: block; padding: 32px; }
  .vpage[data-venture="genii"] .cardgrid > * > .hcard--sim[data-ready] {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "title stage" "lede stage" "note stage" ". stage" "count stage";
    column-gap: 64px;
  }
  .vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__stage { margin-top: 0; }
  .vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__title { font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; }
  .vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__lede { margin-top: 14px; font-size: 17px; line-height: 1.6; }
  /* the count and the controls share the last row of the left column */
  .vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__count { grid-area: count; margin-top: 0; align-self: end; padding-bottom: 50px; }
  .vpage[data-venture="genii"] .hcard--sim[data-ready] .sim__controls { grid-area: count; align-self: end; margin-top: 0; }

  .vpage[data-venture="genii"] .sim__head,
  .vpage[data-venture="genii"] .sim__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 96px 84px;
    column-gap: 20px;
  }
  .vpage[data-venture="genii"] .sim__head { padding: 0 16px 10px; }
  .vpage[data-venture="genii"] .sim__h-tickets, .vpage[data-venture="genii"] .sim__h-recent { display: block; }
  .vpage[data-venture="genii"] .sim__h-recent, .vpage[data-venture="genii"] .sim__h-chance, .vpage[data-venture="genii"] .sim__h-leads { text-align: right; }
  .vpage[data-venture="genii"] .sim__row { grid-template-areas: "name tickets recent chance" "tier tickets recent chance"; padding: 12px 16px; align-items: center; }
  .vpage[data-venture="genii"] .sim__tickets { margin-top: 0; gap: 4px; }
  .vpage[data-venture="genii"] .sim__tk { width: 12px; height: 18px; }
  .vpage[data-venture="genii"] .sim__recent { align-self: center; font-size: 14px; }
  .vpage[data-venture="genii"] .sim__recent-suffix { display: none; }
  .vpage[data-venture="genii"] .sim__chance { flex-direction: row-reverse; align-items: center; gap: 10px; }
  .vpage[data-venture="genii"] .sim__pct { font-size: 18px; }

  .vpage[data-venture="genii"] .sim__roster[data-mode="tally"] .sim__head,
  .vpage[data-venture="genii"] .sim__roster[data-mode="tally"] .sim__row { grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1.2fr) 56px; }
  .vpage[data-venture="genii"] .sim__roster[data-mode="tally"] .sim__row { grid-template-areas: "name tickets bar leads" "tier tickets bar leads"; }
  .vpage[data-venture="genii"] .sim__roster[data-mode="tally"] .sim__h-leads { grid-column: 3 / 5; }
  .vpage[data-venture="genii"] .sim__bar { margin-top: 0; height: 10px; border-radius: 5px; }
  .vpage[data-venture="genii"] .sim__leads { text-align: right; font-size: 18px; }
  .vpage[data-venture="genii"] .sim__cap--run { padding: 0 16px; }

  .vpage[data-venture="genii"] .sim__draw { margin-top: 20px; padding-top: 18px; }
  .vpage[data-venture="genii"] .sim__cap { font-size: 14px; }
  .vpage[data-venture="genii"] .sim__chips { gap: 10px; margin-top: 14px; }
  .vpage[data-venture="genii"] .sim__chip { width: 30px; height: 38px; border-radius: 6px; font-size: 14px; }
  .vpage[data-venture="genii"] .sim__legend { margin-top: 16px; }
}

/* ==================================================================================
   UndoGPT — Phase 5. Footage of the extension on ChatGPT, a native Stop-vs-recall
   diagram, and the landing page as a scroll capture. Every rule is scoped to the
   page (close note §19), including the ones only UndoGPT uses today.
   ================================================================================== */

/* ---------- A. header ------------------------------------------------------------
   The light case is shared chrome (BOOMRG's). The mark is portrait, 580 × 754. */

.vpage[data-venture="undogpt"] .vheader__corner-mark { width: 30px; height: 39px; top: 66px; }
.vpage[data-venture="undogpt"] .meta__mark { width: 32px; height: 42px; object-fit: contain; }

/* ---------- D. UND-H1, Stop vs. recall ----------------------------------------------
   Two timelines of one sent prompt: sent, processed, answered. Each lane shows
   where its control cuts in. Steps after the cut are hollow and their line is
   dashed. Neutral ink only: blue belongs to the message card. */

.vpage[data-venture="undogpt"] .hcard--stoprecall { margin: 0; }   /* a figure */
.vpage[data-venture="undogpt"] .sr-lanes { display: grid; gap: 26px; margin-top: 22px; }
.vpage[data-venture="undogpt"] .sr-lane + .sr-lane { padding-top: 24px; border-top: 1px solid var(--hairline); }
.vpage[data-venture="undogpt"] .sr-name {
  margin: 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
}
.vpage[data-venture="undogpt"] .sr-track { position: relative; margin: 18px 6px 0; height: 52px; }
/* the line runs between the first and last dot centres; the part after the cut is dashed */
.vpage[data-venture="undogpt"] .sr-line {
  position: absolute;
  left: 6px; right: 6px; top: 13px;
  height: 0;
  border-top: 2px dashed #B9B9BE;
}
.vpage[data-venture="undogpt"] .sr-line::before {
  content: "";
  position: absolute;
  left: 0; top: -2px;
  width: var(--sr-cut);
  border-top: 2px solid var(--ink);
}
.vpage[data-venture="undogpt"] .sr-lane[data-cut="answer"] { --sr-cut: 75%; }
.vpage[data-venture="undogpt"] .sr-lane[data-cut="processed"] { --sr-cut: 25%; }
.vpage[data-venture="undogpt"] .sr-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.vpage[data-venture="undogpt"] .sr-step { display: flex; flex-direction: column; align-items: center; width: 0; }
.vpage[data-venture="undogpt"] .sr-step:first-child { align-items: flex-start; }
.vpage[data-venture="undogpt"] .sr-step:last-child { align-items: flex-end; }
.vpage[data-venture="undogpt"] .sr-dot {
  margin-top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--card);
}
.vpage[data-venture="undogpt"] .sr-step[data-state="off"] .sr-dot {
  background: var(--card);
  border: 2px solid #A8A8AE;
}
.vpage[data-venture="undogpt"] .sr-word {
  margin-top: 12px;
  white-space: nowrap;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.vpage[data-venture="undogpt"] .sr-step[data-state="off"] .sr-word { color: var(--label); }
/* the control, sitting on the line where it cuts in */
.vpage[data-venture="undogpt"] .sr-mark {
  position: absolute;
  top: 0;
  left: calc(6px + (100% - 12px) * var(--sr-cut-f));
  width: 28px; height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px var(--card);
}
.vpage[data-venture="undogpt"] .sr-lane[data-cut="answer"] .sr-mark { --sr-cut-f: 0.75; }
.vpage[data-venture="undogpt"] .sr-lane[data-cut="processed"] .sr-mark { --sr-cut-f: 0.25; }
.vpage[data-venture="undogpt"] .sr-mark--stop i { width: 9px; height: 9px; border-radius: 2px; background: #ffffff; }
.vpage[data-venture="undogpt"] .sr-mark--recall svg { width: 12px; height: 16px; }
.vpage[data-venture="undogpt"] .sr-result {
  margin: 14px 0 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}

/* ---------- E. the clips --------------------------------------------------------------
   Desktop footage, so no phone bezel. The two loops sit in rebuilds of the landing
   page's own sections (SS_2, SS_3); the demo sits in a plain card. */

.vpage[data-venture="undogpt"] .und-clips { display: grid; gap: 16px; }
.vpage[data-venture="undogpt"] .clip {
  margin: 0;
  background: var(--card);
  border-radius: 32px;
  padding: 22px;
}
.vpage[data-venture="undogpt"] .clip__media { position: relative; border-radius: 20px; overflow: hidden; }
/* white footage on the pale card needs an edge */
.vpage[data-venture="undogpt"] .clip__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 19, 0.08);
  pointer-events: none;
}
.vpage[data-venture="undogpt"] .clip__v { display: block; width: 100%; height: auto; background: #ffffff; }

/* the landing page's section: black, its blue swoosh, its type, the footage in its box */
.vpage[data-venture="undogpt"] .clip--brand {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #000000;
  padding: 40px 22px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.vpage[data-venture="undogpt"] .brand__swoosh {
  position: absolute;
  left: 0; top: 0;
  z-index: -1;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 800;
  overflow: visible;
  pointer-events: none;
}
.vpage[data-venture="undogpt"] .brand__swoosh path { fill: none; stroke-linecap: round; }
.vpage[data-venture="undogpt"] .brand__halo { stroke: #0A4FC0; stroke-width: 230; opacity: 0.55; filter: blur(60px); }
.vpage[data-venture="undogpt"] .brand__core { stroke: #0056C5; stroke-width: 120; filter: blur(22px); }
.vpage[data-venture="undogpt"] .brand__title {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-wrap: balance;
}
.vpage[data-venture="undogpt"] .brand__sub {
  margin: 12px auto 0;
  max-width: 440px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: #9F9FA7;
  text-wrap: balance;
}
.vpage[data-venture="undogpt"] .clip--brand .clip__media {
  margin-top: 28px;
  width: 82%;
  /* the recall card's own corner, 30px on 550 x 468 */
  border-radius: 5.8% / 6.8%;
}
.vpage[data-venture="undogpt"] .clip--brand .clip__media::after { box-shadow: none; }
/* Sized so the footage's own text renders near 11.5px, under the page's 12px labels
   (close note §72): the recall clip's tooltip is 34px type in its 550px source, the
   recall card's button 30px. */
.vpage[data-venture="undogpt"] .clip--brand[data-clip="und-p1-recall"] .clip__media { width: 63%; }
.vpage[data-venture="undogpt"] .clip--brand[data-clip="und-p2-popup"] .clip__media { width: 73%; }

/* one small control per loop: a moving picture needs a way to stop it */
.vpage[data-venture="undogpt"] .clip__ctl {
  position: absolute;
  right: 10px; bottom: 10px;
  z-index: 2;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 17, 19, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.vpage[data-venture="undogpt"] .clip__ctl[hidden] { display: none; }
.vpage[data-venture="undogpt"] .clip__i { display: none; line-height: 0; }
.vpage[data-venture="undogpt"] .clip__i svg { width: 14px; height: 14px; fill: currentColor; }
.vpage[data-venture="undogpt"] .clip__i svg .stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vpage[data-venture="undogpt"] [data-state="paused"] .clip__i--play,
.vpage[data-venture="undogpt"] [data-state="start"] .clip__i--play,
.vpage[data-venture="undogpt"] [data-state="playing"] .clip__i--pause,
.vpage[data-venture="undogpt"] [data-state="ended"] .clip__i--replay { display: block; }
.vpage[data-venture="undogpt"] .clip__ctl:focus-visible,
.vpage[data-venture="undogpt"] .demo__play:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the demo: a still with one play button until the reader asks for it */
.vpage[data-venture="undogpt"] .demo__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #ffffff;
}
.vpage[data-venture="undogpt"] .demo__play[hidden] { display: none; }

/* the demo's length on its poster, and its progress while it plays in place (§93) */
.vpage[data-venture="undogpt"] .demo__dur {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 4px 8px; border-radius: 8px; background: rgba(17, 17, 19, 0.72); color: #ffffff;
  font-weight: 500; font-size: 12px; line-height: 1.2; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.vpage[data-venture="undogpt"] .clip--demo[data-playing] .demo__dur { display: none; }
/* The pause control sits at the left, where a player's does, and the bar runs
   from beside it to the right edge (close note §124). The looping clips keep
   their control at the right. */
.vpage[data-venture="undogpt"] .clip--demo .clip__ctl { left: 10px; right: auto; }
.vpage[data-venture="undogpt"] .demo__bar {
  position: absolute; left: 52px; right: 14px; bottom: 14px; z-index: 2; height: 36px;
  display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 18px;
  background: rgba(17, 17, 19, 0.72); backdrop-filter: blur(8px); color: #ffffff;
}
.vpage[data-venture="undogpt"] .demo__bar[hidden] { display: none; }
.vpage[data-venture="undogpt"] .demo__time { flex: none; font-weight: 500; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.vpage[data-venture="undogpt"] .demo__seek {
  flex: 1; min-width: 0; height: 18px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; --p: 0%;
}
.vpage[data-venture="undogpt"] .demo__seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, #ffffff var(--p), rgba(255, 255, 255, 0.3) var(--p));
}
.vpage[data-venture="undogpt"] .demo__seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.vpage[data-venture="undogpt"] .demo__seek::-moz-range-progress { height: 4px; border-radius: 2px; background: #ffffff; }
.vpage[data-venture="undogpt"] .demo__seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #ffffff; border: 0;
}
.vpage[data-venture="undogpt"] .demo__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #ffffff; border: 0; }
.vpage[data-venture="undogpt"] .demo__seek:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; border-radius: 4px; }
.vpage[data-venture="undogpt"] .demo__play .clip__i {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(17, 17, 19, 0.82);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  place-items: center;
}
.vpage[data-venture="undogpt"] .demo__play[data-state="start"] .clip__i--play,
.vpage[data-venture="undogpt"] .demo__play[data-state="ended"] .clip__i--replay { display: grid; }
.vpage[data-venture="undogpt"] .demo__play .clip__i svg { width: 22px; height: 22px; }
.vpage[data-venture="undogpt"] .demo__play .clip__i--play svg { margin-left: 3px; }

/* ---------- E. the landing page ---------------------------------------------------------
   The site's own black, so a fractional scale never shows a white seam. */

.vpage[data-venture="undogpt"] .frame[data-scroll-capture] .screen { background: #000000; }
.vpage[data-venture="undogpt"] .builtwith__group .label { display: block; margin-bottom: 16px; color: var(--body-2); }

/* ---------- 1440 --------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  /* The drawn R centres on the title's glyphs (y 62-96, centre 79), as Caucus's
     mark does; at its natural place it sat 8px low (close note §39). */
  .vpage[data-venture="undogpt"] .meta__mark { width: 32px; height: 42px; position: relative; top: -8px; }

  /* Six columns, three rows (close note §72):

       row 1   SS_2 (2)             SS_3 (2)            Stop vs. recall (2)
       row 2   the mock-up (2)      the demo (4)
       row 3     (mock-up, cont.)   the afterword (4), fitted to its text

     The mock-up spans rows 2 and 3; row 3 is the flexible one, so the demo keeps its
     own height and the afterword sits 16px under it, with any blank space at the
     foot of the column (B15). The phone order is the DOM order, unchanged. */
  .vpage[data-venture="undogpt"] .cardgrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
  }
  .vpage[data-venture="undogpt"] .cardgrid > * > .und-clips { display: contents; }
  .vpage[data-venture="undogpt"] .und-clips > .clip--brand { order: 1; grid-column: span 2; }
  .vpage[data-venture="undogpt"] .cardgrid > * > .hcard--stoprecall { order: 2; grid-column: span 2; padding: 28px; }
  .vpage[data-venture="undogpt"] .cardgrid > * > .frame { order: 3; grid-column: span var(--und-phone-span, 2); grid-row: span 2; }
  .vpage[data-venture="undogpt"] .cardgrid > * > .clip--demo { order: 4; grid-column: span var(--und-demo-span, 4); align-self: start; }
  .vpage[data-venture="undogpt"] .cardgrid > .afterword { order: 5; grid-column: span var(--und-demo-span, 4); align-self: start; margin-top: 0; padding: 28px 32px; }
  .vpage[data-venture="undogpt"] .afterword p { max-width: none; }

  /* the landing page's sections, at a third: the phone's proportions, the box sized
     for the same ~11.5px footage text as on the phone, scaled to 13px here */
  .vpage[data-venture="undogpt"] .clip { padding: 28px; }
  .vpage[data-venture="undogpt"] .clip--brand { padding: 40px 28px 32px; }
  .vpage[data-venture="undogpt"] .brand__title { font-size: 28px; }
  .vpage[data-venture="undogpt"] .brand__sub { margin-top: 12px; font-size: 15px; }
  /* both footage boxes at the foot of their cards, so they end level */
  .vpage[data-venture="undogpt"] .brand__text { margin-bottom: 28px; }
  .vpage[data-venture="undogpt"] .clip--brand .clip__media,
  .vpage[data-venture="undogpt"] .brand__text + .clip__media { margin: auto 0 0; }
  .vpage[data-venture="undogpt"] .clip--brand[data-clip="und-p1-recall"] .clip__media { width: 208px; }
  .vpage[data-venture="undogpt"] .clip--brand[data-clip="und-p2-popup"] .clip__media { width: 238px; }

  /* Stop vs. recall stays horizontal, as on the phone; the lanes share the card's height */
  .vpage[data-venture="undogpt"] .hcard--stoprecall .sr-lanes { flex: 1; align-content: space-around; }

  .vpage[data-venture="undogpt"] .clip--demo .clip__ctl { left: 14px; right: auto; bottom: 14px; width: 36px; height: 36px; }
  .vpage[data-venture="undogpt"] .demo__bar { left: 60px; right: 14px; }
  .vpage[data-venture="undogpt"] .demo__play .clip__i { width: 72px; height: 72px; }
  .vpage[data-venture="undogpt"] .demo__play .clip__i svg { width: 28px; height: 28px; }
}

/* ==================================================================================
   Shared chrome added with Playbook Labs: a logo as the page title (B88) and the
   site button (B91). Header chrome, so shared; each page states its own sizes.
   ================================================================================== */

.vheader__name--logo { line-height: 0; letter-spacing: 0; }
.vheader__name--logo img { display: block; width: auto; height: var(--vlogo-h, 44px); }
.vheader[data-title-logo] .vheader__micro { margin-top: 14px; }
/* Status sits under the second line at both widths (close note §59); the aside,
   at 1440, carries only the small mark beside a typed name. */
.vheader__main > .vheader__status { display: flex; }
/* the status row: the pill on the left; a site button, where there is one, on the right (close note §64) */
.vheader__status--stack { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vheader__site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;                       /* the status pill's height, so the row reads level (§107) */
  padding: 0 16px;
  border-radius: 17px;
  background: var(--vsite-bg, #111113);
  color: var(--vsite-ink, #ffffff);
  font-weight: 500;
  font-size: 14px;                    /* the pill's word size */
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.vheader__site svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vheader__site:focus-visible { outline: 2px solid var(--vink); outline-offset: 3px; }

/* A typed name with a site button (close note B126): at 1440 the small mark leaves
   the flow, so the status row, and the button at its right, run to the band's edge.
   Only a header with both matches; a logo title has no aside. */
.vheader[data-site] .vheader__inner { position: relative; }

@media (min-width: 1200px) {
  .vheader[data-site] .vheader__aside { position: absolute; top: 0; right: 0; width: auto; margin-top: 0; }
  .vheader__name--logo img { height: var(--vlogo-h-1440, 46px); }
  .vheader[data-title-logo] .vheader__micro { margin-top: 16px; }
  .vheader[data-title-logo] .vheader__aside { margin-top: 0; }
}

/* ==================================================================================
   Playbook Labs — Phase 5. The method, the site's sample-playbook cards, and the
   homepage as a scroll capture. Every rule is scoped to the page (close note §19).
   ================================================================================== */

/* ---------- A. header: the gradient (B87), the wordmark title (B88/B89), the
   white site button on it (B91) ---------------------------------------------------- */

.vpage[data-venture="playbook-labs"] { --vsite-bg: #ffffff; --vsite-ink: #111113; }   /* logo heights: the record (§59) */

/* ---------- D. PBL-H2, the method (close note §48–§54) ------------------------------ */

.vpage[data-venture="playbook-labs"] { --pbl-blue:#2563EB; --pbl-purple:#9333EA; --pbl-pink:#DB2777; --pbl-sample:#6F5F94;
  --pbl-line:#5F6063;
  --pbl-gradient: linear-gradient(135deg,#2563EB 0%,#9333EA 55%,#DB2777 100%); }
.vpage[data-venture="playbook-labs"] .hcard--method { margin:0; padding:22px; }
.vpage[data-venture="playbook-labs"] .mt-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.vpage[data-venture="playbook-labs"] .mt-key { display:inline-flex; align-items:center; gap:7px; font-weight:500; font-size:13px; line-height:1; color:var(--pbl-sample); }
.vpage[data-venture="playbook-labs"] .mt-key::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--pbl-sample); }

.vpage[data-venture="playbook-labs"] .mt-flow {
  position:relative; margin-top:22px; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas: "in in" "f f" "pa si" "di ca" "m m" "sd sd" "f2 f2" ". po" "m2 m2" "pl pl";
}
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="in"] { grid-area:in; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="f"] { grid-area:f; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="pa"] { grid-area:pa; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="si"] { grid-area:si; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="di"] { grid-area:di; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="ca"] { grid-area:ca; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="m"] { grid-area:m; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="sd"] { grid-area:sd; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="f2"] { grid-area:f2; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="po"] { grid-area:po; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="m2"] { grid-area:m2; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="pl"] { grid-area:pl; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="c1"], .vpage[data-venture="playbook-labs"] .mt-flow > [data-at="c2"] { display:none; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="x"] { grid-row:8; grid-column:1 / -1; }

.vpage[data-venture="playbook-labs"] .mt-node { position:relative; z-index:1; background:#fff; border-radius:16px; padding:12px 11px; box-shadow: inset 0 0 0 1px var(--hairline); }
.vpage[data-venture="playbook-labs"] .mt-flow > :is([data-at="pa"],[data-at="si"],[data-at="di"],[data-at="ca"]) { margin:0 4px; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="pa"], .vpage[data-venture="playbook-labs"] .mt-flow > [data-at="si"] { margin-bottom:14px; }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="po"] { margin:0 4px 0 16px; }
.vpage[data-venture="playbook-labs"] .mt-top { display:flex; align-items:center; gap:8px; }
.vpage[data-venture="playbook-labs"] .mt-ico { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--tone); }
.vpage[data-venture="playbook-labs"] .mt-ico svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vpage[data-venture="playbook-labs"] [data-at="pl"] .mt-ico { background:var(--pbl-gradient); }
.vpage[data-venture="playbook-labs"] .mt-ico .mt-pl { width:13px; height:13px; stroke:none; }
.vpage[data-venture="playbook-labs"] .mt-name { margin:0; font-weight:600; font-size:15px; line-height:1.2; color:var(--ink); }
.vpage[data-venture="playbook-labs"] .mt-flow > :is([data-at="pa"],[data-at="si"],[data-at="di"],[data-at="ca"],[data-at="po"]) .mt-name { font-size:14px; }
.vpage[data-venture="playbook-labs"] .mt-what { margin:8px 0 0; font-size:13px; line-height:1.4; color:var(--body-2); }
.vpage[data-venture="playbook-labs"] .mt-case { margin:8px 0 0; font-weight:400; font-size:13px; line-height:1.4; color:var(--pbl-sample); }


.vpage[data-venture="playbook-labs"] .mt-node[data-tone="ink"] { --tone: var(--ink); }
.vpage[data-venture="playbook-labs"] .mt-node[data-tone="blue"] { --tone: var(--pbl-blue); }
.vpage[data-venture="playbook-labs"] .mt-node[data-tone="pink"] { --tone: var(--pbl-pink); }
.vpage[data-venture="playbook-labs"] .mt-node[data-tone="purple"] { --tone: var(--pbl-purple); }

/* the disciplines, inside their box */
.vpage[data-venture="playbook-labs"] .mt-pills { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px; }
.vpage[data-venture="playbook-labs"] .mt-pills li { font-weight:500; font-size:11px; line-height:1.2; padding:4px 7px; border-radius:10px; background:#F4F1FA; color:var(--pbl-sample); }
@media (max-width: 1199.98px) {
  /* one size for every pill, one word per line (close note §58) */
  .vpage[data-venture="playbook-labs"] .mt-pills { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; }
  .vpage[data-venture="playbook-labs"] .mt-pills li { word-spacing:100vw; padding:5px 6px; line-height:1.25; }
}

/* entry arrows: a small head where a line meets a box (top at 390, left at 1440) */
.vpage[data-venture="playbook-labs"] .mt-flow > .mt-node:not([data-at="in"])::before {
  content:""; position:absolute; left:50%; top:-5px; width:7px; height:5px; margin-left:-3.5px;
  background:var(--pbl-line); clip-path:polygon(0 0,100% 0,50% 100%);
}
/* every line is one 1px rule in ink */
.vpage[data-venture="playbook-labs"] .mt-c { position:relative; min-height:24px; }
.vpage[data-venture="playbook-labs"] .mt-c i { display:none; position:absolute; background:var(--pbl-line); }
.vpage[data-venture="playbook-labs"] .mt-flow > [data-at="x"] { min-height:0; }
.vpage[data-venture="playbook-labs"] .mt-rail { position:relative; grid-row:3 / 4; }
.vpage[data-venture="playbook-labs"] .mt-rail[data-rail="a"] { grid-column:1; }
.vpage[data-venture="playbook-labs"] .mt-rail[data-rail="b"] { grid-column:2; }
.vpage[data-venture="playbook-labs"] .mt-rail::before { content:""; position:absolute; left:50%; top:0; bottom:4px; width:1px; margin-left:-.5px; background:var(--pbl-line); }

@media (max-width: 1199.98px) {
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f"] i:nth-child(1) { display:block; left:50%; top:0; height:50%; width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f"] i:nth-child(2) { display:block; left:25%; width:50%; top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f"] i:nth-child(3) { display:block; left:25%; top:50%; height:calc(50% - 4px); width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f"] i:nth-child(4) { display:block; left:75%; top:50%; height:calc(50% - 4px); width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m"] i:nth-child(1) { display:block; left:25%; top:0; height:50%; width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m"] i:nth-child(2) { display:block; left:75%; top:0; height:50%; width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m"] i:nth-child(3) { display:block; left:25%; width:50%; top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m"] i:nth-child(4) { display:block; left:50%; top:50%; height:calc(50% - 4px); width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f2"] i:nth-child(1) { display:block; left:50%; top:0; height:100%; width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f2"] i:nth-child(2) { display:block; left:50%; width:calc(25% + 6px); top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f2"] i:nth-child(3) { display:block; left:calc(75% + 6px); top:50%; height:calc(50% - 4px); width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="x"] i:nth-child(1) { display:block; left:50%; top:0; height:100%; width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m2"] i:nth-child(1) { display:block; left:50%; top:0; height:calc(100% - 4px); width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m2"] i:nth-child(2) { display:block; left:50%; width:calc(25% + 6px); top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m2"] i:nth-child(3) { display:block; left:calc(75% + 6px); top:0; height:50%; width:1px; margin-left:-.5px; }

  .vpage[data-venture="playbook-labs"] .mt-node { text-align:center; }
  .vpage[data-venture="playbook-labs"] .mt-top { justify-content:center; }
  .vpage[data-venture="playbook-labs"] .mt-pills { justify-content:center; }
  .vpage[data-venture="playbook-labs"] .mt-head { flex-direction:column; align-items:center; text-align:center; }
}

@media (min-width: 1200px) {
  .vpage[data-venture="playbook-labs"] .cardgrid > * > .hcard--method { grid-column:1 / -1; padding:32px; display:block; }
  .vpage[data-venture="playbook-labs"] .mt-flow {
    margin-top:16px; padding:0 0 16px;
    grid-template-columns: 1fr 40px 1fr 36px 1fr 40px 1fr 40px 1fr 40px 1fr;
    grid-template-rows: var(--mt-row, 1fr) var(--mt-row, 1fr);
    grid-template-areas:
      "in f pa c1 di m sd f2 .  m2 pl"
      "in f si c2 ca m sd f2 po m2 pl";
  }
  .vpage[data-venture="playbook-labs"] .mt-flow > [data-at="c1"] { display:block; grid-area:c1; }
  .vpage[data-venture="playbook-labs"] .mt-flow > [data-at="c2"] { display:block; grid-area:c2; }
  .vpage[data-venture="playbook-labs"] .mt-flow > [data-at="x"] { grid-row:1 / 3; grid-column:9; }
  .vpage[data-venture="playbook-labs"] .mt-rail { display:none; }
  /* one box size: every box is as tall as the tallest (set by venture.js as --mt-h) */
  .vpage[data-venture="playbook-labs"] .mt-flow > .mt-node { margin:8px 0; padding:16px; height:var(--mt-h, auto); align-self:center; }
  .vpage[data-venture="playbook-labs"] .mt-flow > [data-at="po"] { align-self:start; margin:24px 0 0; }
  .vpage[data-venture="playbook-labs"] .mt-flow > :is([data-at="pa"],[data-at="si"],[data-at="di"],[data-at="ca"]) { margin:8px 0; }
  .vpage[data-venture="playbook-labs"] .mt-top { gap:10px; }
  .vpage[data-venture="playbook-labs"] .mt-ico { width:30px; height:30px; }
  .vpage[data-venture="playbook-labs"] .mt-ico svg { width:16px; height:16px; }
  .vpage[data-venture="playbook-labs"] .mt-ico .mt-pl { width:15px; height:15px; }
  .vpage[data-venture="playbook-labs"] .mt-flow > .mt-node .mt-name { font-size:16px; }
  .vpage[data-venture="playbook-labs"] .mt-what, .vpage[data-venture="playbook-labs"] .mt-case { font-size:14px; }
  .vpage[data-venture="playbook-labs"] .mt-pills li { font-size:12px; padding:5px 8px; }
  /* a touch more room between the card's title and the flow (close note §64) */
  .vpage[data-venture="playbook-labs"] .mt-flow { margin-top:24px; }
  .vpage[data-venture="playbook-labs"] .mt-flow > .mt-node:not([data-at="in"])::before {
    left:-5px; top:50%; width:5px; height:7px; margin:-3.5px 0 0; clip-path:polygon(0 0,100% 50%,0 100%);
  }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f"] i:nth-child(1) { display:block; left:0; width:50%; top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f"] i:nth-child(2) { display:block; left:50%; top:25%; height:50%; width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f"] i:nth-child(3) { display:block; left:50%; width:calc(50% - 4px); top:25%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f"] i:nth-child(4) { display:block; left:50%; width:calc(50% - 4px); top:75%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="c1"] i:nth-child(1) { display:block; left:0; width:calc(100% - 4px); top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="c2"] i:nth-child(1) { display:block; left:0; width:calc(100% - 4px); top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m"] i:nth-child(1) { display:block; left:0; width:50%; top:25%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m"] i:nth-child(2) { display:block; left:0; width:50%; top:75%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m"] i:nth-child(3) { display:block; left:50%; top:25%; height:50%; width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m"] i:nth-child(4) { display:block; left:50%; width:calc(50% - 4px); top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f2"] i:nth-child(1) { display:block; left:0; width:100%; top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f2"] i:nth-child(2) { display:block; left:50%; top:50%; height:calc(25% + 16px); width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="f2"] i:nth-child(3) { display:block; left:50%; width:calc(50% - 4px); top:calc(75% + 16px); height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="x"] i:nth-child(1) { display:block; left:0; width:100%; top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m2"] i:nth-child(1) { display:block; left:0; width:calc(100% - 4px); top:50%; height:1px; margin-top:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m2"] i:nth-child(2) { display:block; left:50%; top:50%; height:calc(25% + 16px); width:1px; margin-left:-.5px; }
.vpage[data-venture="playbook-labs"] .mt-c[data-at="m2"] i:nth-child(3) { display:block; left:0; width:50%; top:calc(75% + 16px); height:1px; margin-top:-.5px; }
}

/* ---------- E. the site's sample-playbook cards (B84) --------------------------------
   Our card holds the site's own white card, as the mock-up holds its site. Colours and
   type are the site's (Tailwind slate), as Genii's purples are Genii's. */

/* a range input's built-in width counts toward the column's minimum; the column
   is the screen's, whatever its content */
.vpage[data-venture="playbook-labs"] .proof { grid-template-columns: minmax(0, 1fr); }
/* the site comes first, so the method's section needs the gap a proof section has */
.vpage[data-venture="playbook-labs"] .highlights { margin-top: 16px; }
.vpage[data-venture="playbook-labs"] .pbl-card { margin: 0; background: var(--card); border-radius: 32px; padding: 22px; }
.vpage[data-venture="playbook-labs"] .pbl-site {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 20px;
}
.vpage[data-venture="playbook-labs"] .pbl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.vpage[data-venture="playbook-labs"] .pbl-badge { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.vpage[data-venture="playbook-labs"] .pbl-badge--mic { background: linear-gradient(135deg, #A855F7, #EC4899); color: #ffffff; }
.vpage[data-venture="playbook-labs"] .pbl-badge--mic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vpage[data-venture="playbook-labs"] .pbl-badge--logo { background: #000000; }
.vpage[data-venture="playbook-labs"] .pbl-badge--logo img { width: 22px; height: 22px; object-fit: contain; }
.vpage[data-venture="playbook-labs"] .pbl-title { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; color: #0F172A; }
.vpage[data-venture="playbook-labs"] .pbl-sub { margin: 3px 0 0; font-size: 14px; line-height: 1.3; color: #475569; }

/* the podcast: the site's chips, then a player in place of the browser's own */
.vpage[data-venture="playbook-labs"] .pbl-pills { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vpage[data-venture="playbook-labs"] .pbl-pills li { font-weight: 500; font-size: 12px; line-height: 16px; padding: 4px 12px; border-radius: 999px; background: #F1F5F9; color: #475569; }
.vpage[data-venture="playbook-labs"] .pbl-player {
  display: flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 18px 0 8px; border-radius: 27px; background: #F1F3F4;
}
.vpage[data-venture="playbook-labs"] .pbl-play {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0;
  background: none; color: #202124; display: grid; place-items: center; cursor: pointer;
}
.vpage[data-venture="playbook-labs"] .pbl-play:hover { background: rgba(32, 33, 36, 0.08); }
.vpage[data-venture="playbook-labs"] .pbl-play:focus-visible, .vpage[data-venture="playbook-labs"] .pbl-seek:focus-visible { outline: 2px solid #202124; outline-offset: 2px; }
.vpage[data-venture="playbook-labs"] .pbl-i { display: none; line-height: 0; }
.vpage[data-venture="playbook-labs"] .pbl-i svg { width: 18px; height: 18px; fill: currentColor; }
.vpage[data-venture="playbook-labs"] .pbl-play[data-state="paused"] .pbl-i--play,
.vpage[data-venture="playbook-labs"] .pbl-play[data-state="playing"] .pbl-i--pause { display: block; }
.vpage[data-venture="playbook-labs"] .pbl-time { flex: none; font-size: 13px; line-height: 1; color: #202124; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vpage[data-venture="playbook-labs"] .pbl-seek {
  --p: 0%;
  flex: 1 1 0; width: 0; min-width: 0; height: 20px; margin: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.vpage[data-venture="playbook-labs"] .pbl-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #202124 var(--p), #BDC1C6 var(--p)); }
.vpage[data-venture="playbook-labs"] .pbl-seek::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #202124 var(--p), #BDC1C6 var(--p)); }
.vpage[data-venture="playbook-labs"] .pbl-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #202124; border: 0; }
.vpage[data-venture="playbook-labs"] .pbl-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #202124; border: 0; }

/* the sample playbook: one page at a time in a stage that never changes size */
.vpage[data-venture="playbook-labs"] .pbl-stage {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1.04;
  border: 1px solid #E2E8F0; border-radius: 8px; background: #ffffff;
}
.vpage[data-venture="playbook-labs"] .pbl-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0; background: none; cursor: zoom-in; display: block;
}
.vpage[data-venture="playbook-labs"] .pbl-slide[hidden] { display: none; }
.vpage[data-venture="playbook-labs"] .pbl-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vpage[data-venture="playbook-labs"] .pbl-slide:focus-visible { outline: 2px solid #0F172A; outline-offset: -2px; }
.vpage[data-venture="playbook-labs"] .pbl-nav { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 16px; min-height: 44px; }
.vpage[data-venture="playbook-labs"] .pbl-step {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 10px; justify-content: center;
  border: 0; border-radius: 8px; background: none; color: #334155; cursor: pointer;
  font: inherit; font-weight: 500; font-size: 14px;
}
.vpage[data-venture="playbook-labs"] .pbl-step:hover { background: #F1F5F9; }
.vpage[data-venture="playbook-labs"] .pbl-step:focus-visible, .vpage[data-venture="playbook-labs"] .pbl-dot:focus-visible { outline: 2px solid #0F172A; outline-offset: 1px; }
.vpage[data-venture="playbook-labs"] .pbl-step svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vpage[data-venture="playbook-labs"] .pbl-step span { display: none; }                 /* the site hides the words on phones */
.vpage[data-venture="playbook-labs"] .pbl-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; }
.vpage[data-venture="playbook-labs"] .pbl-dot { width: 16px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.vpage[data-venture="playbook-labs"] .pbl-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #CBD5E1; }
.vpage[data-venture="playbook-labs"] .pbl-dot:hover::before { background: #94A3B8; }
.vpage[data-venture="playbook-labs"] .pbl-dot[aria-current="true"]::before { background: #1E40AF; }
.vpage[data-venture="playbook-labs"] .pbl-chip { margin: 12px 0 0; display: flex; justify-content: center; }
.vpage[data-venture="playbook-labs"] .pbl-chip [data-title] { font-weight: 500; font-size: 14px; line-height: 20px; padding: 8px 16px; border-radius: 999px; background: #F1F5F9; color: #334155; text-align: center; }

/* the site's full-screen view */
.vpage[data-venture="playbook-labs"] .pbl-lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.95);
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y pinch-zoom;
}
.vpage[data-venture="playbook-labs"] .pbl-lightbox[hidden] { display: none; }
.vpage[data-venture="playbook-labs"] .pbl-lb-stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px 16px 120px; box-sizing: border-box; }
.vpage[data-venture="playbook-labs"] .pbl-lb-stage img { max-width: min(100%, 1152px); max-height: 75vh; width: auto; height: auto; object-fit: contain; display: block; }
.vpage[data-venture="playbook-labs"] .pbl-lb-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px; border: 0; padding: 6px; background: none; color: #ffffff; cursor: pointer;
}
.vpage[data-venture="playbook-labs"] .pbl-lb-close svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vpage[data-venture="playbook-labs"] .pbl-lb-step {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 56px; height: 56px; border: 0; border-radius: 50%; padding: 12px;
  background: rgba(0, 0, 0, 0.5); color: #ffffff; cursor: pointer;
}
.vpage[data-venture="playbook-labs"] .pbl-lb-step[data-step="-1"] { left: 16px; }
.vpage[data-venture="playbook-labs"] .pbl-lb-step[data-step="1"] { right: 16px; }
.vpage[data-venture="playbook-labs"] .pbl-lb-step svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vpage[data-venture="playbook-labs"] .pbl-lb-close:hover, .vpage[data-venture="playbook-labs"] .pbl-lb-step:hover { color: #D1D5DB; }
.vpage[data-venture="playbook-labs"] .pbl-lb-close:focus-visible, .vpage[data-venture="playbook-labs"] .pbl-lb-step:focus-visible, .vpage[data-venture="playbook-labs"] .pbl-lb-dots button:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.vpage[data-venture="playbook-labs"] .pbl-lb-foot {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 16px 48px; text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.7) 50%, transparent);
  pointer-events: none;
}
.vpage[data-venture="playbook-labs"] .pbl-lb-title { margin: 0 0 16px; color: #ffffff; font-weight: 500; font-size: 16px; line-height: 1.4; }
.vpage[data-venture="playbook-labs"] .pbl-lb-dots { display: flex; justify-content: center; pointer-events: auto; }
.vpage[data-venture="playbook-labs"] .pbl-lb-dots .pbl-dot::before { background: rgba(255, 255, 255, 0.5); }
.vpage[data-venture="playbook-labs"] .pbl-lb-dots .pbl-dot:hover::before { background: rgba(255, 255, 255, 0.7); }
.vpage[data-venture="playbook-labs"] .pbl-lb-dots .pbl-dot[aria-current="true"]::before { background: #ffffff; }

/* ---------- E. the homepage ------------------------------------------------------------
   The site's footer navy, so a fractional scale never shows a white seam at the foot. */

.vpage[data-venture="playbook-labs"] .frame[data-scroll-capture] .screen { background: #0F172A; }
.vpage[data-venture="playbook-labs"] .builtwith__group .label { display: block; margin-bottom: 16px; color: var(--body-2); }

/* ---------- 1440 --------------------------------------------------------------------- */

@media (min-width: 1200px) {
  /* Three rows, nothing left blank (close note §58):

       row 1   the mock-up              the sample playbook
       row 2   the podcast, across
       row 3   the method, across

     On a phone: the mock-up, the method, the podcast, the sample playbook. */
  .vpage[data-venture="playbook-labs"] .cardgrid > * > .frame { order: 1; }
  .vpage[data-venture="playbook-labs"] .cardgrid > * > .pbl-card--sample { order: 2; display: flex; flex-direction: column; }
  .vpage[data-venture="playbook-labs"] .cardgrid > * > .pbl-card--podcast { order: 3; grid-column: 1 / -1; }
  .vpage[data-venture="playbook-labs"] .cardgrid > * > .hcard--method { order: 4; }

  .vpage[data-venture="playbook-labs"] .pbl-card { padding: 28px; }
  .vpage[data-venture="playbook-labs"] .pbl-site { padding: 32px; }
  .vpage[data-venture="playbook-labs"] .pbl-head { margin-bottom: 24px; }
  .vpage[data-venture="playbook-labs"] .pbl-badge { width: 48px; height: 48px; }
  .vpage[data-venture="playbook-labs"] .pbl-badge--mic svg { width: 24px; height: 24px; }
  .vpage[data-venture="playbook-labs"] .pbl-badge--logo img { width: 26px; height: 26px; }
  .vpage[data-venture="playbook-labs"] .pbl-title { font-size: 20px; }
  .vpage[data-venture="playbook-labs"] .pbl-pills { margin-bottom: 24px; }

  /* the sample fills the mock-up's height: its stage takes what is left */
  .vpage[data-venture="playbook-labs"] .pbl-card--sample .pbl-site { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .vpage[data-venture="playbook-labs"] .pbl-card--sample .pbl-stage { flex: 1 1 0; aspect-ratio: auto; min-height: 320px; }
  .vpage[data-venture="playbook-labs"] .pbl-step { padding: 0 16px; }
  .vpage[data-venture="playbook-labs"] .pbl-step span { display: inline; }
}

/* ==================================================================================
   Up next (close note §61, §62): shared chrome at the foot of every venture page.
   White at rest with a quiet shadow, so it reads as navigation, not as one of the
   page's grey exhibit cards; it lifts further on hover and focus. The next
   venture's small mark and description only, and the arrow filled in its header
   colour, as on its index card.
   ================================================================================== */

.upnext { margin-top: 16px; }
.upnext__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 32px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(17, 17, 19, 0.06), 0 0 0 1px rgba(17, 17, 19, 0.04);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--t-activate) var(--ease);
}
.upnext__card:hover {
  box-shadow: 0 10px 30px rgba(17, 17, 19, 0.10), 0 0 0 1px rgba(17, 17, 19, 0.04);
}
.upnext__card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #111113, 0 10px 30px rgba(17, 17, 19, 0.10);
}
.upnext__text { display: grid; gap: 12px; min-width: 0; }
.upnext__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.upnext__mark { flex: none; width: auto; height: 28px; }
.upnext__micro { font-size: 15px; line-height: 1.35; color: var(--body-2); }
.upnext__arrow {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--arrow-fill, #111113);
  display: grid;
  place-items: center;
}
.upnext__arrow svg { width: 14px; height: 14px; }
.upnext__arrow svg path { stroke: #ffffff; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* a light accent: its ring and dark arrow (close note B189); only a card with data-ring */
/* one notch lighter, with the index card (close note §125) */
.upnext__card[data-ring] .upnext__arrow { box-shadow: inset 0 0 0 1px var(--arrow-ring); }
.upnext__card[data-ring] .upnext__arrow svg path { stroke: var(--arrow-glyph-on); stroke-width: 1.6; }
.upnext__card[data-ring]:hover .upnext__arrow,
.upnext__card[data-ring]:focus-visible .upnext__arrow { box-shadow: inset 0 0 0 1.5px var(--arrow-ring); }
.upnext__card[data-ring]:hover .upnext__arrow svg path,
.upnext__card[data-ring]:focus-visible .upnext__arrow svg path { stroke-width: 1.8; }

@media (min-width: 1200px) {
  .upnext__card { padding: 24px 32px; }
  .upnext__mark { height: 30px; }
  .upnext__micro { font-size: 16px; }
}

/* ==================================================================================
   Advantage — Phase 5. The two working tools, "How Advantage runs", and the two
   Telegram chats. Every rule is scoped to the page (close note §19); keyframes
   carry an advantage- prefix.
   ================================================================================== */

/* ---------- A. header: white with a hairline (B140), the shared black site button,
   the mark at 40/46px (B125). The accent is the logo's purple (B141). ------------------ */

.vpage[data-venture="advantage"] { --adv-purple: #4B2882; --adv-green: #00693E; --adv-line: #5F6063; }
/* the logo's two colours as a stripe at the header's foot, parted by a white line (B142, B173) */
.vpage[data-venture="advantage"] .vheader::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12.5px;
  /* the white line is 0.5px: a true hairline on dense screens, a pixel on 1x (B179) */
  background: linear-gradient(to bottom, var(--adv-purple) 0 6px, #ffffff 6px 6.5px, var(--adv-green) 6.5px 12.5px);
}
/* Below the laptop range the header's surface bleeds to the real screen edges
   (§132); its foot stripe follows it, or it would stop short at the 390px
   column and read as the header's only inset edge (§133). Same geometry as
   the surface layer, and it keeps ::after's own stacking, so the stripe stays
   above the surface. */
@media (min-width: 391px) and (max-width: 1199.98px) {
  .vpage[data-venture="advantage"] .vheader::after {
    left: 50%;
    right: auto;
    width: 100vw;
    margin-left: -50vw;
  }
}
.vpage[data-venture="advantage"] .vheader__corner-mark { width: 45px; height: 45px; top: 63.5px; }   /* 12% larger, same centre (§108) */

/* ---------- E. the tools (B128) --------------------------------------------------------
   .vpage[data-venture="advantage"] poster at rest, a live frame on request. The window keeps one size either way. */

.vpage[data-venture="advantage"] .proof--tools { margin-top: 16px; }
.vpage[data-venture="advantage"] .adv-tool { margin: 0; background: var(--card); border-radius: 32px; padding: 22px; }
.vpage[data-venture="advantage"] .adv-tool__window { position: relative; border-radius: 16px; overflow: hidden; background: #08090c; box-shadow: 0 0 0 1px rgba(17,17,19,.06); }
.vpage[data-venture="advantage"] .adv-tool__poster { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; position: relative; }
.vpage[data-venture="advantage"] .adv-tool__poster img { display: block; width: 100%; height: auto; aspect-ratio: 780 / 1400; }
.vpage[data-venture="advantage"] .adv-tool__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,9,12,.72), rgba(8,9,12,0) 42%); }
.vpage[data-venture="advantage"] .adv-tool__open {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  height: 44px; padding: 0 20px; border-radius: 22px; background: #ffffff; color: #111113;
  font-weight: 500; font-size: 15px; line-height: 1; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.vpage[data-venture="advantage"] .adv-tool__open svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vpage[data-venture="advantage"] .adv-tool__poster:hover .adv-tool__open { background: #F1F1F3; }
.vpage[data-venture="advantage"] .adv-tool__poster:focus-visible { outline: 2px solid #111113; outline-offset: 3px; }
.vpage[data-venture="advantage"] .adv-tool__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; }
.vpage[data-venture="advantage"] .adv-tool__name { font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); }
.vpage[data-venture="advantage"] .adv-tool__fig { font-size: 14px; line-height: 1.4; color: var(--body-2); }
.vpage[data-venture="advantage"] .adv-tool__fig strong { font-weight: 600; color: var(--ink); }
/* the live window on desktop (B169), and its Full screen control */
.vpage[data-venture="advantage"] .adv-tool__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #08090c; }
.vpage[data-venture="advantage"] .adv-tool__window:fullscreen { border-radius: 0; }
/* on the live window, bottom right, where neither tool keeps anything (B172) */
.vpage[data-venture="advantage"] .adv-tool__full {
  position: absolute; right: 20px; bottom: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border: 0; border-radius: 22px; background: #ffffff; color: #111113; cursor: pointer;
  font: inherit; font-weight: 500; font-size: 15px; line-height: 1; box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.vpage[data-venture="advantage"] .adv-tool__full[hidden],
.vpage[data-venture="advantage"] .adv-tool__poster[hidden] { display: none; }
.vpage[data-venture="advantage"] .adv-tool__full svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vpage[data-venture="advantage"] .adv-tool__full:hover { background: #F1F1F3; }
.vpage[data-venture="advantage"] .adv-tool__full:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* the full-screen view: every tap on a phone, and the fallback elsewhere (B164) */
.vpage[data-venture="advantage"] .adv-overlay { position: fixed; inset: 0; z-index: 100; background: #08090c; display: flex; flex-direction: column; }
.vpage[data-venture="advantage"] .adv-overlay[hidden] { display: none; }
.vpage[data-venture="advantage"] .adv-overlay__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 52px; padding: 0 6px 0 18px; padding-top: env(safe-area-inset-top, 0px);
  background: #111113; color: #ffffff;
}
.vpage[data-venture="advantage"] .adv-overlay__title { margin: 0; font-weight: 600; font-size: 16px; line-height: 1; }
.vpage[data-venture="advantage"] .adv-overlay__close { width: 44px; height: 44px; border: 0; padding: 10px; background: none; color: #ffffff; cursor: pointer; }
.vpage[data-venture="advantage"] .adv-overlay__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vpage[data-venture="advantage"] .adv-overlay__close:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; }
.vpage[data-venture="advantage"] .adv-overlay__body { flex: 1; min-height: 0; }
.vpage[data-venture="advantage"] .adv-overlay__body iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- D. ADV-H1, How Advantage runs (B135-B137) ------------------------------
   Boxes in a grid; the lines between them are drawn by venture.js into one SVG,
   1px in #5F6063, with a 7 x 5 head whose tip touches the box it enters (§53, §54). */

.vpage[data-venture="advantage"] .highlights { margin-top: 16px; }
.vpage[data-venture="advantage"] .hcard--flow-adv { margin: 0; padding: 24px; }
.vpage[data-venture="advantage"] .af-grid {
  position: relative; margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr);
  row-gap: 22px;
  grid-template-areas: "wl" "dd" "ai" "ss" "oe" "pm" "ta" "lg" "en" "rs";
}
.vpage[data-venture="advantage"] .af-box[data-at="wl"] { grid-area: wl; } .vpage[data-venture="advantage"] .af-box[data-at="dd"] { grid-area: dd; }
.vpage[data-venture="advantage"] .af-box[data-at="ai"] { grid-area: ai; } .vpage[data-venture="advantage"] .af-box[data-at="ss"] { grid-area: ss; }
.vpage[data-venture="advantage"] .af-box[data-at="oe"] { grid-area: oe; } .vpage[data-venture="advantage"] .af-box[data-at="pm"] { grid-area: pm; }
.vpage[data-venture="advantage"] .af-box[data-at="ta"] { grid-area: ta; } .vpage[data-venture="advantage"] .af-box[data-at="lg"] { grid-area: lg; }
.vpage[data-venture="advantage"] .af-box[data-at="en"] { grid-area: en; } .vpage[data-venture="advantage"] .af-box[data-at="rs"] { grid-area: rs; }
.vpage[data-venture="advantage"] .af-box {
  position: relative; z-index: 1; margin-left: 20px;
  background: #ffffff; border-radius: 16px; padding: 14px 14px 15px; box-shadow: inset 0 0 0 1px var(--hairline);
}
.vpage[data-venture="advantage"] .af-box[data-side] { margin-left: 44px; }
.vpage[data-venture="advantage"] .af-box[data-retired] { background: #FBFBFC; box-shadow: none; outline: 1px dashed #8C8C8E; outline-offset: -1px; }
.vpage[data-venture="advantage"] .af-top { display: flex; align-items: center; gap: 10px; }
.vpage[data-venture="advantage"] .af-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tone); color: #ffffff; }
.vpage[data-venture="advantage"] .af-box[data-tone="green"] { --tone: var(--adv-green); }
.vpage[data-venture="advantage"] .af-box[data-tone="purple"] { --tone: var(--adv-purple); }
.vpage[data-venture="advantage"] .af-box[data-tone="grey"] { --tone: #8C8C8E; }
.vpage[data-venture="advantage"] .af-ico--mark { background: none; }
.vpage[data-venture="advantage"] .af-ico--mark .af-mark { display: block; width: 28px; height: 28px; border-radius: 50%; }
/* the alerts are names, set as chips; the box keeps to its content (§81) */
.vpage[data-venture="advantage"] .af-lines.af-lines--chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vpage[data-venture="advantage"] .af-lines.af-lines--chips li {
  padding: 5px 9px; border-radius: 10px; background: #F1F1F3; color: #1F1F22;
  font-weight: 500; font-size: 12px; line-height: 1.2;
}
.vpage[data-venture="advantage"] .af-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vpage[data-venture="advantage"] .af-name { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--ink); }
.vpage[data-venture="advantage"] .af-retired { margin-left: auto; font-weight: 500; font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 9px; background: #EDEDF0; color: #4A4A4E; }
.vpage[data-venture="advantage"] .af-lines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.vpage[data-venture="advantage"] .af-lines li { font-size: 13px; line-height: 1.35; color: var(--body-2); }
.vpage[data-venture="advantage"] .af-box[data-retired] .af-lines li { color: #5B5B60; }
.vpage[data-venture="advantage"] .af-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.vpage[data-venture="advantage"] .af-wires path { fill: none; stroke: var(--adv-line); stroke-width: 1; }
.vpage[data-venture="advantage"] .af-wires path[data-dash] { stroke-dasharray: 3 3; }
.vpage[data-venture="advantage"] .af-wires polygon { fill: var(--adv-line); }

.vpage[data-venture="advantage"] .af-foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); display: grid; gap: 20px; }
.vpage[data-venture="advantage"] .af-group .label { display: block; margin-bottom: 12px; color: var(--body-2); }
.vpage[data-venture="advantage"] .af-speed { margin: 0; font-size: 15px; line-height: 1.4; color: var(--body-2); }
.vpage[data-venture="advantage"] .af-speed strong { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin-right: 4px; }

/* ---------- E. the chats (B130) -----------------------------------------------------
   Telegram's light theme, rebuilt. Type near 11.5px, as inside the other clips (§74). */

.vpage[data-venture="advantage"] .proof--chats { margin-top: 0; }
.vpage[data-venture="advantage"] .adv-chat { margin: 0; }
.vpage[data-venture="advantage"] .adv-chat .screen { background: #00693E; }   /* the logo green (§83) */
.vpage[data-venture="advantage"] .tg { position: absolute; inset: 0; display: flex; flex-direction: column; }
.vpage[data-venture="advantage"] .tg-bar {
  flex: none; display: flex; align-items: center; gap: 6px; height: 64px; padding: 20px 10px 0 4px;
  background: rgba(247, 247, 249, .96); border-bottom: 1px solid #D8D8DC;
}
.vpage[data-venture="advantage"] .tg-back { width: 24px; height: 24px; color: #2F80D1; }
.vpage[data-venture="advantage"] .tg-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vpage[data-venture="advantage"] .tg-title { flex: 1; min-width: 0; display: grid; justify-items: center; text-align: center; }
.vpage[data-venture="advantage"] .tg-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 12.5px; line-height: 1.25; color: #000000; }
.vpage[data-venture="advantage"] .tg-sub { font-size: 10.5px; line-height: 1.3; color: #8E8E93; }
.vpage[data-venture="advantage"] .tg-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; }
.vpage[data-venture="advantage"] .tg-log {
  flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 10px 8px 12px;
  display: flex; flex-direction: column; gap: 5px; scrollbar-width: none; overscroll-behavior-y: auto;
}
.vpage[data-venture="advantage"] .tg-log::-webkit-scrollbar { display: none; }
/* messages start at the top; once they overflow, the log follows the newest (B177) */
.vpage[data-venture="advantage"] .tg-day { align-self: center; margin: 4px 0 2px; }
.vpage[data-venture="advantage"] .tg-day span { display: inline-block; padding: 3px 8px; border-radius: 9px; background: rgba(60, 80, 55, .32); color: #ffffff; font-weight: 500; font-size: 10.5px; line-height: 1.2; }
.vpage[data-venture="advantage"] .tg-msg { align-self: flex-start; max-width: 90%; }
.vpage[data-venture="advantage"] .tg-bubble { position: relative; background: #ffffff; border-radius: 13px 13px 13px 4px; padding: 6px 9px 6px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.vpage[data-venture="advantage"] .tg-bubble p { margin: 0; font-size: 11.5px; line-height: 1.36; color: #000000; overflow-wrap: anywhere; }
.vpage[data-venture="advantage"] .tg-bubble p::after { content: ""; display: inline-block; width: 30px; }
.vpage[data-venture="advantage"] .tg-bubble strong { font-weight: 600; }
.vpage[data-venture="advantage"] .tg-link { color: #2F80D1; }
.vpage[data-venture="advantage"] .tg-time { position: absolute; right: 8px; bottom: 4px; font-size: 9.5px; line-height: 1; color: #8E8E93; }
.vpage[data-venture="advantage"] .tg-btn {
  display: block; margin-top: 3px; padding: 7px 8px; border-radius: 10px; text-align: center;
  background: rgba(60, 80, 55, .30); color: #ffffff; font-weight: 500; font-size: 11px; line-height: 1.2;
}
/* a thin scroll indicator, as the other phones have (§85) */
.vpage[data-venture="advantage"] .tg-scroll {
  position: absolute; right: 3px; top: 0; width: 3px; height: 0; border-radius: 2px;
  background: rgba(255, 255, 255, 0.55); opacity: 0; pointer-events: none; z-index: 3;
  transition: opacity 260ms var(--ease);
}
.vpage[data-venture="advantage"] .tg.is-scrolling .tg-scroll { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vpage[data-venture="advantage"] .tg-scroll { transition: none; } }
.vpage[data-venture="advantage"] .tg-foot { flex: none; height: 50px; padding: 8px 10px 16px; background: rgba(247, 247, 249, .96); border-top: 1px solid #D8D8DC; display: flex; align-items: center; justify-content: center; }
.vpage[data-venture="advantage"] .tg-input { flex: 1; height: 26px; border-radius: 13px; border: 1px solid #D8D8DC; background: #ffffff; padding: 0 10px; display: flex; align-items: center; font-size: 11.5px; color: #8E8E93; }
.vpage[data-venture="advantage"] .tg-mute { font-size: 12.5px; font-weight: 500; color: #2F80D1; }

/* arrival: armed by venture.js; without it, the finished chat */
.vpage[data-venture="advantage"] .adv-chat[data-armed] .tg-log > [data-pending] { display: none; }
.vpage[data-venture="advantage"] .adv-chat[data-armed] .tg-log > .is-new { animation: advantage-arrive 260ms var(--ease) both; }
@keyframes advantage-arrive { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vpage[data-venture="advantage"] .adv-chat[data-armed] .tg-log > .is-new { animation: none; } }

.vpage[data-venture="advantage"] .adv-replay {
  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px;
  border: 0; border-radius: 16px; background: rgba(17, 17, 19, .78); color: #ffffff; cursor: pointer;
  font: inherit; font-weight: 500; font-size: 12.5px; line-height: 1; backdrop-filter: blur(8px);
}
.vpage[data-venture="advantage"] .adv-replay[hidden] { display: none; }
/* room under the last message for Replay, once the chat has played */
.vpage[data-venture="advantage"] .adv-chat[data-armed][data-state="done"] .tg-log { padding-bottom: 50px; }
.vpage[data-venture="advantage"] .adv-replay svg { width: 13px; height: 13px; fill: currentColor; }
.vpage[data-venture="advantage"] .adv-replay svg .stroke { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.vpage[data-venture="advantage"] .adv-replay:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ---------- 1440 ----------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .vpage[data-venture="advantage"] .vheader__aside .meta__mark { width: 52px; height: 52px; position: relative; top: -3px; }   /* 12% larger, same centre (§108) */

  /* Order, the same as on a phone (B153): the two chats side by side, the
     diagram, then the Strategy Lab and the Edge Finder, each across. */
  .vpage[data-venture="advantage"] .cardgrid > * > .adv-chat { order: 1; }
  .vpage[data-venture="advantage"] .cardgrid > * > .hcard--flow-adv { grid-column: 1 / -1; padding: 32px; display: block; order: 2; }
  .vpage[data-venture="advantage"] .cardgrid > * > .adv-tool { grid-column: 1 / -1; padding: 28px; display: block; order: 3; }
  .vpage[data-venture="advantage"] .cardgrid > .afterword { order: 4; grid-column: 1 / -1; margin-top: 0; padding: 28px 32px; }
  .vpage[data-venture="advantage"] .afterword p { max-width: none; }

  .vpage[data-venture="advantage"] .adv-tool__window { height: 760px; }
  .vpage[data-venture="advantage"] .adv-tool__poster, .vpage[data-venture="advantage"] .adv-tool__poster picture { height: 100%; }
  .vpage[data-venture="advantage"] .adv-tool__poster img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: top left; }
  .vpage[data-venture="advantage"] .adv-tool__open { bottom: 32px; }
  .vpage[data-venture="advantage"] .adv-tool__cap { margin-top: 16px; }

  .vpage[data-venture="advantage"] .af-grid {
    margin-top: 28px; column-gap: 44px; row-gap: 40px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-areas:
      ".  ai .  .  . "
      "wl dd oe pm lg"
      ".  ss ta ta en"
      ".  .  .  .  rs";
  }
  .vpage[data-venture="advantage"] .af-box, .vpage[data-venture="advantage"] .af-box[data-side] { margin-left: 0; }
  .vpage[data-venture="advantage"] .af-box[data-at="ta"] { align-self: start; }
  .vpage[data-venture="advantage"] .af-foot { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 44px; align-items: start; }
}

/* ==================================================================================
   Remit Collective — Phase 5. The site running live in the phone, its speed and Stack
   over the site's own burst, and how the billing desk works. Every rule is scoped to the page
   (close note §19); keyframes, if any, carry a remit- prefix.
   ================================================================================== */

.vpage[data-venture="remit-collective"] { --rm-line: #5F6063; }

/* ---------- A. header: cream (B185), the white pill (B186), the name at 40px on
   a phone, scaling below 390 (B187, §107). The star overshoots the capitals as the
   other marks do, 8% under UndoGPT's R, and sits 4px below the title's centre
   [Shawn, §107–§109]. ------------------------------------------------------------------ */

@media (max-width: 1199.98px) {
  /* 40px from 390 up; narrower phones scale it so the name keeps 14px from the star (§107) */
  .vpage[data-venture="remit-collective"] .vheader__name { font-size: clamp(32px, calc(40px - (390px - 100vw) * 0.2), 40px); }
  .vpage[data-venture="remit-collective"] .vheader__corner-mark { top: 66px; width: 34px; height: 40px; }
}

/* ---------- E. REM-L1, the site, live (B196) ----------------------------------------
   Laid out at 390 and scaled into the 276px screen; a poster until it loads. */

.vpage[data-venture="remit-collective"] .proof--rm { margin-top: 16px; }
.vpage[data-venture="remit-collective"] .rm-site { margin: 0; }
.vpage[data-venture="remit-collective"] .rm-site .screen { background: #EDEBE4; }
.vpage[data-venture="remit-collective"] .rm-site__poster {
  position: absolute; top: 0; left: 0; width: 276px; height: auto; display: block;
}
.vpage[data-venture="remit-collective"] .rm-site__poster[hidden] { display: none; }
.vpage[data-venture="remit-collective"] .rm-site__frame {
  position: absolute; top: 0; left: 0; border: 0; display: block;
  width: var(--rm-w); height: var(--rm-h);
  transform: scale(calc(276 / 390)); transform-origin: 0 0;
  background: #EDEBE4;
}
.vpage[data-venture="remit-collective"] .rm-site__bar { background: rgba(26, 26, 23, 0.32); }

/* ---------- D. beside the phone: the speed and the Stack, over the site's burst
   (§102, §106) ---------------------------------------------------------------------- */

.vpage[data-venture="remit-collective"] .highlights { margin-top: 16px; }
.vpage[data-venture="remit-collective"] .hcard--rm-speed {
  margin: 0; padding: 24px 24px 0; display: flex; flex-direction: column; overflow: hidden;
}
.vpage[data-venture="remit-collective"] .rm-speedcard { position: relative; z-index: 1; display: grid; gap: 24px; }
.vpage[data-venture="remit-collective"] .rm-figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vpage[data-venture="remit-collective"] .rm-fig { display: flex; flex-direction: column; min-width: 0; }
.vpage[data-venture="remit-collective"] .rm-fig__num { font-weight: 600; font-size: 30px; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.vpage[data-venture="remit-collective"] .rm-fig__label { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--body-2); }
/* the burst is for wide screens only (§107): a phone keeps the card's own padding */
.vpage[data-venture="remit-collective"] .hcard--rm-speed { padding-bottom: 24px; }
.vpage[data-venture="remit-collective"] .rm-burst { display: none; position: relative; flex: 1 0 auto; margin: 8px -32px 0; }
.vpage[data-venture="remit-collective"] .rm-burst canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vpage[data-venture="remit-collective"] .rm-burst::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--card) 0%, rgba(247, 247, 249, 0) 26%);
}

/* ---------- D. REM-H2, how the billing desk works (§101, §102) ---------------------
   Each box after the first is entered by a 1px line and a head 7px across and 5px
   along, its tip on the box's edge, the line stopping 4px short (close note §53, §54).
   The loop from learning back to the recovery path is drawn by venture.js. */

.vpage[data-venture="remit-collective"] .hcard--rm-method { margin: 0; padding: 24px; }
.vpage[data-venture="remit-collective"] .rm-flow { position: relative; margin-top: 20px; }
.vpage[data-venture="remit-collective"] .rm-boxes { list-style: none; margin: 0; padding: 0 22px 0 0; display: grid; row-gap: 24px; }
.vpage[data-venture="remit-collective"] .rm-box {
  position: relative; z-index: 1; background: #ffffff; border-radius: 16px; padding: 14px 14px 15px;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.vpage[data-venture="remit-collective"] .rm-box[data-planned] { background: #FBFBFC; box-shadow: none; outline: 1px dashed #8C8C8E; outline-offset: -1px; }
.vpage[data-venture="remit-collective"] .rm-top { display: flex; align-items: center; gap: 10px; }
.vpage[data-venture="remit-collective"] .rm-ico {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tone); color: #ffffff;
}
.vpage[data-venture="remit-collective"] .rm-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vpage[data-venture="remit-collective"] .rm-name { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--ink); }
.vpage[data-venture="remit-collective"] .rm-planned {
  flex: none; margin-left: auto; font-style: normal; font-weight: 500; font-size: 11px; line-height: 1;
  padding: 4px 8px; border-radius: 9px; background: #EDEDF0; color: #4A4A4E;
}
.vpage[data-venture="remit-collective"] .rm-line { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--body-2); }
.vpage[data-venture="remit-collective"] .rm-glabel {
  margin: 12px 0 6px; font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; color: #66666A;
}
.vpage[data-venture="remit-collective"] .rm-pills { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.vpage[data-venture="remit-collective"] .rm-glabel + .rm-pills { margin-top: 0; }
.vpage[data-venture="remit-collective"] .rm-pills li {
  padding: 5px 9px; border-radius: 10px; background: #F1F1F3; color: #1F1F22;
  font-weight: 500; font-size: 12px; line-height: 1.2;
}

/* phone: the line runs down the 24px gap above each box, on its centre */
.vpage[data-venture="remit-collective"] .rm-box + .rm-box::before {
  content: ""; position: absolute; left: 50%; margin-left: -0.5px; width: 1px;
  top: -24px; height: 20px; background: var(--rm-line);
}
.vpage[data-venture="remit-collective"] .rm-box + .rm-box::after {
  content: ""; position: absolute; left: 50%; margin-left: -3.5px; top: -5px;
  width: 7px; height: 5px; background: var(--rm-line);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.vpage[data-venture="remit-collective"] .rm-loop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vpage[data-venture="remit-collective"] .rm-loop path { fill: none; stroke: var(--rm-line); stroke-width: 1; }
.vpage[data-venture="remit-collective"] .rm-loop polygon { fill: var(--rm-line); }
.vpage[data-venture="remit-collective"] .rm-loop__label { display: none; }

/* the foot: where the service was headed, and what the product is (§106) */
.vpage[data-venture="remit-collective"] .rm-foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); display: grid; gap: 22px; }

.vpage[data-venture="remit-collective"] .rm-group .label { display: block; margin-bottom: 12px; color: var(--body-2); }
.vpage[data-venture="remit-collective"] .rm-path { display: flex; flex-direction: column; align-items: stretch; }
.vpage[data-venture="remit-collective"] .rm-step {
  flex: 1 1 0; min-width: 0; background: #ffffff; border-radius: 14px; padding: 10px 12px;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.vpage[data-venture="remit-collective"] .rm-step[data-planned] { background: #FBFBFC; box-shadow: none; outline: 1px dashed #8C8C8E; outline-offset: -1px; }
.vpage[data-venture="remit-collective"] .rm-step__name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--ink); }
.vpage[data-venture="remit-collective"] .rm-step__name .rm-planned { margin-left: 0; }
.vpage[data-venture="remit-collective"] .rm-step__note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--body-2); }
/* the path's arrow: down between the steps on a phone, across at 1440 */
.vpage[data-venture="remit-collective"] .rm-step__arrow { position: relative; flex: none; height: 20px; }
.vpage[data-venture="remit-collective"] .rm-step__arrow::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 16px; margin-left: -0.5px; background: var(--rm-line);
}
.vpage[data-venture="remit-collective"] .rm-step__arrow::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 5px; margin-left: -3.5px; background: var(--rm-line);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.vpage[data-venture="remit-collective"] .rm-nature { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vpage[data-venture="remit-collective"] .rm-nature li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 16px;
  background: #E7E7EB; color: var(--body); font-weight: 500; font-size: 14px; line-height: 1;
}
.vpage[data-venture="remit-collective"] .rm-nature li[data-planned] { background: #FBFBFC; outline: 1px dashed #8C8C8E; outline-offset: -1px; padding-right: 6px; }
.vpage[data-venture="remit-collective"] .rm-nature .rm-planned { margin-left: 0; }
.vpage[data-venture="remit-collective"] .rm-speeds { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.vpage[data-venture="remit-collective"] .rm-speed { margin: 0; font-size: 15px; line-height: 1.4; color: var(--body-2); }
.vpage[data-venture="remit-collective"] .rm-speed__k { display: block; font-size: 13px; color: var(--body-2); }
.vpage[data-venture="remit-collective"] .rm-speed strong { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .vpage[data-venture="remit-collective"] .rm-site__bar { transition: none; }
}

/* ---------- 1440 -------------------------------------------------------------------- */

@media (min-width: 1200px) {
  /* the site beside its speed and Stack, one height; the workflow across (§106) */
  .vpage[data-venture="remit-collective"] .proof--rm,
  .vpage[data-venture="remit-collective"] .highlights { margin-top: 0; }
  .vpage[data-venture="remit-collective"] .cardgrid > * > .rm-site { order: 1; }
  .vpage[data-venture="remit-collective"] .cardgrid > * > .hcard--rm-speed { order: 2; padding: 32px 32px 0; }
  .vpage[data-venture="remit-collective"] .vheader__aside .meta__mark { width: 38px; position: relative; top: 4px; }
  .vpage[data-venture="remit-collective"] .rm-speedcard { gap: 30px; }
  .vpage[data-venture="remit-collective"] .rm-figs { gap: 28px; }
  .vpage[data-venture="remit-collective"] .rm-fig__num { font-size: 40px; }
  .vpage[data-venture="remit-collective"] .rm-fig__label { font-size: 15px; }
  .vpage[data-venture="remit-collective"] .rm-burst { display: block; height: auto; min-height: 200px; }
  .vpage[data-venture="remit-collective"] .cardgrid > * > .hcard--rm-method { grid-column: 1 / -1; display: block; order: 3; padding: 32px; }

  .vpage[data-venture="remit-collective"] .rm-flow { margin-top: 24px; padding-bottom: 52px; }
  .vpage[data-venture="remit-collective"] .rm-boxes { padding: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 28px; row-gap: 0; }
  .vpage[data-venture="remit-collective"] .rm-box + .rm-box::before {
    left: -28px; top: 50%; margin-left: 0; margin-top: -0.5px; width: 24px; height: 1px;
  }
  .vpage[data-venture="remit-collective"] .rm-box + .rm-box::after {
    left: -5px; top: 50%; margin-left: 0; margin-top: -3.5px; width: 5px; height: 7px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .vpage[data-venture="remit-collective"] .rm-foot { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 26px 44px; align-items: start; }
  .vpage[data-venture="remit-collective"] .rm-group--path { max-width: 620px; }
  .vpage[data-venture="remit-collective"] .rm-loop__label {
    display: block; position: absolute; transform: translate(-50%, -50%); padding: 0 8px;
    background: var(--card); font-size: 12.5px; line-height: 1; color: var(--body-2); white-space: nowrap;
  }
  .vpage[data-venture="remit-collective"] .rm-path { flex-direction: row; }
  .vpage[data-venture="remit-collective"] .rm-step__arrow { width: 24px; height: auto; }
  .vpage[data-venture="remit-collective"] .rm-step__arrow::before { left: 0; top: 50%; width: 20px; height: 1px; margin-left: 0; margin-top: -0.5px; }
  .vpage[data-venture="remit-collective"] .rm-step__arrow::after {
    left: auto; right: 0; bottom: auto; top: 50%; width: 5px; height: 7px; margin-left: 0; margin-top: -3.5px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
}