/* ==========================================================================
   video.css: /video-testimonials (wave 3, 2026-09-04; fixed the same day).
   Loads after feature-v2.css, feature-v3.css, show.css, home.css and
   widgets-real.css.

   Five things worth knowing before editing:
   1. The publish picker is one white card with two panes that bleed to its
      edges: the dashboard's "Video reviews" panel on the tinted left, the
      customer's own website on the white right. One surface deep, per the
      site skill: the video card inside the site pane is the `.shot`
      exception, not a third card.
   2. The three switches are real controls (role="switch", aria-checked,
      driven by /js/video.js). Nothing else inside the device is button
      shaped. The still state (?ix=off, JS off) is all three off, which is
      how a video actually arrives, and the site pane then shows an explicit
      empty seat, because that is what the Single Video widget renders when
      nothing is published: nothing.
   3. The height is held by the widget itself, not by a min-height. The
      widget and the empty seat share one grid cell (.vt-slot > * is
      1 / 1), and the off state hides the widget with `visibility`, not
      `display`. So the slot is exactly one widget tall in every state at
      every width, and flicking a switch cannot move the page. Measured at
      1440, 991, 520 and 390 after the fix: identical in all eight states.
   4. Nothing in a mock on this page renders under 13px. The shared .shot-h
      (11.5px), .m-from (12.5px) and the ported kit's .cw2-meta (12.5px) /
      .cw2-brand span (12px) are all lifted below, and so is the review-site
      tile the product runs at 12px.
   6. Simplify-and-port pass, 2026-09-05 (late): the four-step .plan strip and
      the two .card mocks are gone, replaced by .vt-pair. The publish picker
      is the page's device and is untouched.
   5. The faces are the site's decorative stock portraits (see
      src/data/people.ts). They stand in for the frame a video would be
      paused on. They are not customers and carry no name of their own.
   ========================================================================== */

.vt-page .vt-tight { padding-top: 0; }
/* the quote sits closer to the timeline than the shared 64-116px, top and bottom */
.vt-page .tq-section { padding: clamp(40px, 4vw, 56px) 0; }
.vt-head { max-width: 680px; margin-bottom: 34px; }
.vt-head .sub + .sub { margin-top: 10px; }
.vt-page .vt-head .sub a { color: #002bb5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.vt-page .vt-head .sub a:hover { color: var(--ink); }
.vt-page .fine a { color: #002bb5; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.vt-page .fine a:hover { color: var(--ink); }

/* the shared mock type that runs under 13px everywhere else */
.vt-page .shot-h { font-size: 13px; }
.vt-page .m-from { font-size: 13px; }

/* ---------- hero: the customer's recorder (TestimonialFlow, RecordingScreen) ---------- */
.vt-rec { padding: 18px 20px 16px; }
.vt-rec .m-from { margin-bottom: 12px; color: var(--ink); font-weight: 600; }
.vt-stage { position: relative; border-radius: 12px; background: linear-gradient(140deg, #2b2545, #4b3d7a 46%, #7866CC); overflow: hidden; }
.vt-stage--rec { aspect-ratio: 16 / 10; }
.vt-stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(180deg, rgba(15, 13, 25, 0), rgba(15, 13, 25, .72)); }
.vt-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.vt-frame { position: absolute; inset: 44px 16px 16px; border-radius: 8px; background:
  linear-gradient(#fff, #fff) 0 0 / 18px 2px no-repeat, linear-gradient(#fff, #fff) 0 0 / 2px 18px no-repeat,
  linear-gradient(#fff, #fff) 100% 0 / 18px 2px no-repeat, linear-gradient(#fff, #fff) 100% 0 / 2px 18px no-repeat,
  linear-gradient(#fff, #fff) 0 100% / 18px 2px no-repeat, linear-gradient(#fff, #fff) 0 100% / 2px 18px no-repeat,
  linear-gradient(#fff, #fff) 100% 100% / 18px 2px no-repeat, linear-gradient(#fff, #fff) 100% 100% / 2px 18px no-repeat;
  opacity: .5; }
/* the red REC pill, verbatim from RecordingScreen */
.vt-rec-pill { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: #d92040; color: #fff; font: 600 13px/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.vt-rec-pill i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
/* the question the customer is answering, which the recorder keeps on screen */
.vt-q { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; color: #fff; font: 500 14px/1.4 var(--font-display); text-shadow: 0 1px 8px rgba(15, 13, 25, .5); }
.vt-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px; }
.vt-stop { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); }
.vt-stop i { width: 13px; height: 13px; border-radius: 3px; background: #fff; }
.vt-next { padding: 9px 15px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--v2-line); font: 600 13.5px/1.3 var(--font-display); color: var(--ink); }
@keyframes vt-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: no-preference) { .vt-rec-pill i { animation: vt-blink 1.5s ease-in-out infinite; } }
.no-motion .vt-rec-pill i { animation: none; }

/* ---------- the publish picker ---------- */
.vt-pub { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); overflow: hidden; }
.vt-panel { display: flex; flex-direction: column; padding: 24px 24px 20px; background: var(--v2-card); box-shadow: inset -1px 0 0 var(--v2-line); }
.vt-panel-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.vt-panel-h b { font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.vt-panel-h span { font: 400 13px/1.4 var(--font-body); color: #6b7088; }
.vt-list { margin-top: 6px; }
.vt-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 0; border-top: 1px solid var(--v2-line); }
.vt-row:first-child { border-top: 0; }
.vt-thumb { position: relative; width: 42px; height: 56px; border-radius: 9px; overflow: hidden; background: #2b2545; }
.vt-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; display: block; }
.vt-thumb::before { content: ""; position: absolute; inset: 0; background: rgba(15, 13, 25, .3); }
/* the play glyph is a clipped rectangle, not a border triangle: the border trick reads to the slop detector as a side-tab accent */
.vt-thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 14px; margin: -7px 0 0 -4px; background: rgba(255, 255, 255, .96); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vt-meta { min-width: 0; }
.vt-meta b { display: block; font: 600 14.5px/1.35 var(--font-display); color: var(--ink); }
.vt-meta > span { display: block; margin-top: 2px; font: 400 13px/1.4 var(--font-body); color: var(--v2-body); }
/* the state line is always in the layout, so a chip appearing cannot change the row height */
.vt-state { min-height: 23px; margin-top: 4px; }
.vt-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font: 600 13px/1.4 var(--font-display); white-space: nowrap; }
.vt-chip[hidden] { display: none; }
.vt-chip--live { background: #e6ecff; color: #002bb5; }
.vt-chip--wait { box-shadow: inset 0 0 0 1px var(--v2-line); color: #6b7088; }
.vt-sw { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 2px; border: 0; background: none; cursor: pointer; font: 600 13px/1.3 var(--font-display); color: #6b7088; }
.vt-sw i { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px; background: #d7dbe8; transition: background .22s var(--ease-out); }
.vt-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 13, 25, .3); transition: transform .22s var(--ease-out); }
.vt-sw em { font-style: normal; }
.vt-sw[aria-checked="true"] { color: var(--ink); }
.vt-sw[aria-checked="true"] i { background: var(--blue); }
.vt-sw[aria-checked="true"] i::after { transform: translateX(16px); }
.vt-sw:hover i { background: #c3c9dc; }
.vt-sw[aria-checked="true"]:hover i { background: #0033d6; }
.vt-sw:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

/* the site the widget sits on */
.vt-site { display: flex; flex-direction: column; padding: 24px 24px 20px; background: #fff; }
.vt-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--v2-line); }
.vt-bar i { width: 8px; height: 8px; border-radius: 50%; background: #e1e4ee; }
.vt-bar i:first-child { margin-left: 2px; }
.vt-bar span { margin-left: 10px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }
.vt-page-mock { display: flex; flex-direction: column; flex: 1; padding-top: 16px; }
.vt-sec { font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.vt-sec--next { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--v2-line); }
.vt-tt { margin-top: 8px; }
.vt-tt li { display: flex; gap: 12px; padding: 4px 0; font: 400 13px/1.5 var(--font-body); color: var(--v2-body); }
.vt-tt li span { width: 88px; flex: none; color: #6b7088; }
.vt-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--v2-line); font: 400 13px/1.4 var(--font-body); color: #6b7088; }

/* the video's seat: the widget and the empty state share one cell, so the seat is one widget tall in every state */
.vt-slot { display: grid; margin-top: 12px; }
.vt-slot > * { grid-area: 1 / 1; }
.vt-widget.is-hidden { visibility: hidden; }
.vt-empty { display: grid; place-items: center; padding: 14px; border: 1px dashed #c3c9dc; border-radius: 14px; color: #6b7088; font: 500 13.5px/1.4 var(--font-display); }
.vt-empty[hidden] { display: none; }
/* the Single Video card, in the ported widget kit (widgets-real.css) */
.vt-vcard { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.vt-stage--play { aspect-ratio: 4 / 3; }
.vt-stage--play[data-pub-tint="b"] { background: linear-gradient(140deg, #16304f, #2f5da0 48%, #4079c9); }
.vt-stage--play[data-pub-tint="c"] { background: linear-gradient(140deg, #4a1c35, #963f63 48%, #c0567f); }
.vt-stage--play .vt-face { object-position: 50% 10%; }
.vt-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(255, 255, 255, .94); }
.vt-play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 16px; margin: -8px 0 0 -5px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vt-side { min-width: 0; }
.vt-page .vt-side .cw2-text { margin-top: 5px; font-size: 14px; line-height: 1.5; }
/* the kit's own clamp, plus a floor at the same three lines, so a longer testimonial cannot make the card taller
   than a shorter one and no switch changes the height of the seat */
.vt-page .vt-side .cw2-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.5em); }
.vt-page .vt-side .vt-src { margin-top: 8px; font-size: 13px; }
.vt-page .cw2-brand span { font-size: 13px; }
.vt-note { margin-top: 18px; min-height: calc(2 * 1.55em); font: 400 15px/1.55 var(--font-body); color: var(--ink); }

/* ==========================================================================
   THE PAIR: two ported screens, deliberately unequal
   Not a card grid. No tint, no equal columns, no shared height: a hairline over
   each half, the copy above its own screen, and a 1.12fr / .88fr split so the
   two read as one composition rather than as two of the same thing. The page's
   device is the publish picker above; this band is its evidence.

   Both screens are ports and their odd values are the product's:
     .vt-tile  the review-site tiles from ReviewSitesDropdown/index.module.scss
               (8px 12px, 10px radius, 1px border, and on selection a brand
               border over color-mix(brand 10%, white), resolved to #e6ecff).
               The product runs the tile label at 12px; the site floor is 13px.
     .vt-lrow  the reviews list, with the absence of a rating written down
               rather than left as a gap (claims §B9: a video testimonial
               carries no star rating, and nothing may be said about averages).
   ========================================================================== */
.vt-pair { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 3.2vw, 48px); align-items: start; }
.vt-half { min-width: 0; padding-top: 20px; border-top: 2px solid var(--v2-line); }
.vt-half h3 { font: 700 18px/1.32 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.vt-half > p { margin-top: 9px; max-width: 46ch; font: 400 15px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.vt-half > p b { color: var(--ink); font-weight: 600; }
.vt-page .vt-half > p a { color: #002bb5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.vt-page .vt-half > p a:hover { color: var(--ink); }

.vt-screen { margin-top: 20px; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), 0 18px 44px -30px rgba(15, 13, 25, .45); font-family: var(--font-body); }
.vt-screen-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--v2-line); font: 600 13px/1.3 var(--font-display); color: var(--ink); }
.vt-screen-h span { padding: 3px 8px; border-radius: 6px; background: var(--ghost); font-weight: 500; color: var(--blue); }

/* the review-site tiles, ported */
.vt-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vt-tile { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--v2-line); background: #fff; font: 500 13px/1.3 var(--font-display); color: var(--ink); }
.vt-tile.is-on { border-color: var(--blue); background: #e6ecff; }
.vt-tile i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px var(--v2-line); color: #fff; font: 700 13px/1 var(--font-display); font-style: normal; }
.vt-tile i .icon { width: 13px; height: 13px; }
.vt-tile .vt-v { background: var(--ink); box-shadow: none; font-size: 13px; }
.vt-tile b { font: 700 13px/1 var(--font-display); color: var(--blue); }

.vt-qs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v2-line); }
.vt-qs-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.vt-qs-h span { color: #002bb5; }
.vt-qs ol { margin-top: 8px; display: grid; gap: 6px; counter-reset: vtq; padding: 0; }
.vt-qs li { display: flex; gap: 8px; font: 400 13px/1.45 var(--font-body); color: var(--ink); }
.vt-qs li::before { counter-increment: vtq; content: counter(vtq) "."; flex: none; color: #5b6076; }

/* the reviews list */
.vt-lrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--v2-line); }
.vt-lrow:first-of-type { border-top: 0; }
.vt-lrow .vt-thumb { width: 30px; height: 40px; border-radius: 7px; }
.vt-lrow .vt-thumb::after { width: 7px; height: 10px; margin: -5px 0 0 -3px; }
.vt-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px var(--v2-line); font: 700 13px/1 var(--font-display); }
.vt-ico .icon { width: 17px; height: 17px; }
.vt-lrow .vt-meta b { font-size: 13.5px; }
.vt-stars { color: #8a5b00; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
/* the absence of a rating is written down, not left as a gap */
.vt-norating { font: 400 13px/1.4 var(--font-body); color: #5b6076; white-space: nowrap; }

.vt-network { max-width: 74ch; margin: clamp(30px, 3.4vw, 44px) auto 0; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-align: center; text-wrap: pretty; }

/* ---------- breakpoints ---------- */
@media (max-width: 991px) {
  .vt-pair { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .vt-pub { grid-template-columns: 1fr; }
  .vt-panel { box-shadow: inset 0 -1px 0 var(--v2-line); }
}
/* the note is the only paragraph outside the card that changes, so it reserves the height of its longest state:
   the off note, which is the one on screen at rest */
@media (max-width: 360px) { .vt-note { min-height: calc(3 * 1.55em); } }
@media (max-width: 560px) {
  .vt-panel, .vt-site { padding: 20px 18px 18px; }
  .vt-vcard { grid-template-columns: 1fr; }
  /* the stacked stage is wider than it is tall, so the same square portrait needs a lower crop to keep the face in it */
  .vt-stage--play { aspect-ratio: 16 / 10; }
  .vt-stage--play .vt-face { object-position: 50% 36%; }
  .vt-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; }
  /* the label shortens, it never disappears: the switch has to say what it does on a phone too */
  .vt-sw-x { display: none; }
  .vt-sw { gap: 8px; }
  .vt-thumb { width: 38px; height: 50px; }
}

/* the live recording in the hero (2026-09-05): the loop fills the stage like the portrait did; Ava's still portrait
   sits bottom-right as her avatar, above the stage gradient and clear of the question text */
.vt-stage--rec video.vt-face { object-position: 50% 30%; background: #2b2545; }
.vt-self { position: absolute; z-index: 3; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid #fff; box-shadow: 0 2px 10px rgba(15, 13, 25, .35); }
.vt-stage--rec .vt-q { right: 68px; }
@media (max-width: 560px) { .vt-self { width: 38px; height: 38px; right: 10px; bottom: 10px; } .vt-stage--rec .vt-q { right: 58px; } }