/* ============================================================
   testimonials.css — social-proof index + person pages
   Requires: tokens.css + base.css + site.css loaded first.
   Tokens only, 0 hardcoded colors/spacing/font-size. Mobile-first
   (designed from 360px up). 60-30-10: white / blue / yellow.
   Yellow lives ONLY on the single .btn--cta — never here as fill.
   ============================================================ */

/* Page-local derived tokens — glow / overlay / backdrop colors built FROM the
   shared brand tokens via color-mix (no raw rgba, no new colors in tokens.css).
   Keeps the "0 хардкоду" gate green while staying on-palette. */
:root {
  --tst-glow-blue:   color-mix(in srgb, var(--c-primary) 16%, transparent);
  --tst-glow-accent: color-mix(in srgb, var(--c-accent) 10%, transparent);
  --tst-overlay:     color-mix(in srgb, var(--c-text) 82%, transparent);
  /* dimmed backdrop — derived purely from the brand text color (no raw hex);
     kept translucent so the blurred page shows through behind the modal */
  --tst-backdrop:    color-mix(in srgb, var(--c-text) 72%, transparent);
  /* bottom-fade for cropped inline proofs — solid card bg fading to transparent
     (derived from --c-bg, no raw hex), signals "there's more, click to open" */
  --tst-fade:        var(--c-bg);
}

/* ============================================================
   1. HERO — one message, blue-tinted surface, editorial
   ============================================================ */
.tst-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-surface-blue);
  text-align: center;
  padding-block: var(--sp-24);
}
.tst-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 16%, var(--tst-glow-blue), transparent 70%),
    radial-gradient(38% 38% at 84% 6%, var(--tst-glow-accent), transparent 70%);
}
.tst-hero__inner {
  position: relative;
  z-index: 1;
}
.tst-hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-5);
  color: var(--c-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tst-hero__title {
  margin-inline: auto;
  max-width: 18ch;
  font-size: var(--text-6xl);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.tst-hero__title b {
  color: var(--c-primary);
  font-weight: inherit;
}
.tst-hero__lead {
  margin: var(--sp-6) auto 0;
  max-width: 52ch;
  font-size: var(--text-xl);
  color: var(--c-text-2);
  line-height: var(--lh-relaxed);
}

@media (max-width: 768px) {
  .tst-hero { padding-block: var(--sp-16); }
  .tst-hero__title { font-size: var(--text-4xl); max-width: 100%; }
  .tst-hero__lead { font-size: var(--text-lg); }
}

/* ============================================================
   2. PROOF-STAT BAND — hard numbers, blue-on-light
   ============================================================ */
.tst-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.tst-stat {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.tst-stat__num {
  display: block;
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--c-primary);
}
.tst-stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--c-text-2);
  line-height: var(--lh-snug);
}

@media (min-width: 769px) {
  .tst-stats { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
  .tst-stat { padding: var(--sp-8) var(--sp-5); }
  .tst-stat__num { font-size: var(--text-5xl); }
}

/* ============================================================
   3. EDITORIAL HIERARCHY — section labels
   ============================================================ */
/* Eyebrow above each band's <h2>: signals the rank "level" so the three
   bands read as 1st / 2nd / 3rd tiers, not one uniform list. */
.tst-section__eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
  color: var(--c-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Generous whitespace BETWEEN bands (gestalt: more between than within).
   Consistent band rhythm on the 8px scale: each content band breathes with
   the same generous block padding; the inner grid gaps stay smaller than the
   band padding so groups read as distinct tiers. */
.tst-section--featured { padding-block: var(--sp-24); }
.tst-section--main     { padding-block: var(--sp-24); }
.tst-section--wall     { padding-block: var(--sp-24); }

@media (max-width: 768px) {
  .tst-section--featured,
  .tst-section--main,
  .tst-section--wall { padding-block: var(--sp-16); }
}

/* ============================================================
   3a. FEATURED BAND — hero-case (#1) + large 2-up (#2/#3)
   ============================================================ */
.tst-featured {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

/* ── Hero case (#1): stacked on mobile, image | story on desktop ── */
.tst-hero-case {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.tst-hero-case__visual { min-width: 0; }
.tst-hero-case__media {
  aspect-ratio: 4 / 3;
}
.tst-hero-case__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-self: center;
  min-width: 0;
}
.tst-hero-case__metric {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.tst-hero-case__metric__num {
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--c-primary);
  overflow-wrap: break-word;
}
.tst-hero-case__metric__rest {
  font-size: var(--text-base);
  color: var(--c-text-2);
  line-height: var(--lh-snug);
}
.tst-hero-case__quote {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-text);
  overflow-wrap: break-word;
}
.tst-hero-case__quote::before { content: "\201C"; }
.tst-hero-case__quote::after  { content: "\201D"; }

@media (min-width: 800px) {
  .tst-hero-case {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-10);
    padding: var(--sp-8);
  }
  .tst-hero-case__metric__num { font-size: var(--text-5xl); }
  .tst-hero-case__quote { font-size: var(--text-3xl); }
}

/* ── #2 / #3 large 2-up cards ── */
.tst-featured-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 700px) {
  .tst-featured-pair { grid-template-columns: repeat(2, 1fr); }
}
.tst-card--featured .card__body { gap: var(--sp-5); }
.tst-card--featured .tst-card__quote--lg {
  font-size: var(--text-xl);
}

/* ============================================================
   3b. MAIN GRID — medium standard cards (rest of tier 1 & 2)
   ============================================================ */
.tst-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 600px) {
  .tst-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .tst-grid { grid-template-columns: repeat(3, 1fr); }
}

/* card = .card from base.css; below is its inner editorial layout */
.tst-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  content-visibility: auto;
  contain-intrinsic-size: auto 460px;
}
.tst-card .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 auto;
}
.tst-card__figure { margin: 0; }

/* Money number — big, bold, blue (the eye-catch), + muted qualifier line */
.tst-card__metric {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.tst-card__metric__num {
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--c-primary);
  overflow-wrap: break-word;
}
.tst-card__metric__rest {
  font-size: var(--text-sm);
  color: var(--c-text-2);
  line-height: var(--lh-snug);
}

/* ── MAIN-GRID uniformity (item 5) ──────────────────────────
   The "Ещё десятки кейсов" grid must read as an orderly set of equal cards
   (like the wall), NOT a ragged mix. Scope these rules to .tst-grid so the
   FEATURED hero/2-up cards keep their larger, freer layout. We:
   • give the figure / media-note a single fixed aspect box (cover, top-anchored
     so portrait chat screenshots show their START, landscape ones their top);
   • clamp the headline metric to 2 lines and the quote to 3 lines so every
     card has the same vertical budget;
   • pin the cite/actions meta row to the bottom for a consistent baseline. */
.tst-grid .tst-card__figure,
.tst-grid .tst-proof,
.tst-grid .tst-media-note {
  aspect-ratio: 4 / 3;   /* one fixed media box; .tst-proof img already
                            uses object-fit:cover + object-position:top */
}
.tst-grid .tst-card__metric__num {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.tst-grid .tst-card__metric__rest {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
.tst-grid .tst-card__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: break-word;   /* long unbroken tokens wrap, never overflow */
}
.tst-grid .tst-card__cite {
  margin-top: auto;   /* consistent meta baseline across the row */
}
/* featured cards' big money number scales up further */
.tst-card__metric-big {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.tst-card__metric-big__num {
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--c-primary);
  overflow-wrap: break-word;
}
.tst-card__metric-big__rest {
  font-size: var(--text-base);
  color: var(--c-text-2);
  line-height: var(--lh-snug);
}

.tst-card__quote {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-text);
  overflow-wrap: break-word;
}
.tst-card__quote::before { content: "\201C"; }
.tst-card__quote::after  { content: "\201D"; }
.tst-card__cite {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  line-height: var(--lh-snug);
}
.tst-card__name {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  font-size: var(--text-base);
}
.tst-card__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
}
.tst-card__link {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  /* subtle non-arrow affordance: underline that thickens on hover/focus */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tst-card__link:hover,
.tst-card__link:focus-visible {
  text-decoration-thickness: 2px;
}

/* ── proof thumbnail (screenshot trigger) ──────────────────── */
.tst-proof {
  display: block;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  aspect-ratio: 4 / 3;          /* CLS-safe media box */
  cursor: zoom-in;
}
.tst-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
@media (prefers-reduced-motion: no-preference) {
  .tst-proof img { transition: transform var(--ease-base); }
  .tst-proof:hover img { transform: scale(1.04); }
}
.tst-proof:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* ── VIDEO CARD — poster + centered ▶, links to the person page ────────────
   Used on the index for records with a YouTube id (the video plays on the
   person page, not in a lightbox; no eager iframe here). The <a> carries the
   media-box class (.tst-hero-case__media or .tst-card-video--grid) so it
   inherits the same fixed aspect-ratio as the screenshot box — no layout
   shift. Poster is object-fit:cover; the ▶ badge is a blue circle ≥44px. */
.tst-card-video {
  display: block;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  cursor: pointer;
}
.tst-card-video--grid { aspect-ratio: 4 / 3; }
.tst-grid .tst-card-video--grid { aspect-ratio: 4 / 3; }
.tst-card-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;   /* keep the face in frame (portrait poster → 4/3 box) */
}
.tst-card-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--sp-16);          /* 64px — comfortably ≥44px tap target */
  height: var(--sp-16);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-text-inv);
  box-shadow: var(--shadow-lg);
  pointer-events: none;         /* the whole <a> is the hit target */
}
.tst-card-video__play svg { margin-left: 3px; }   /* optical-center the triangle */
.tst-card-video:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .tst-card-video__poster { transition: transform var(--ease-base); }
  .tst-card-video__play { transition: transform var(--ease-base), background var(--ease-fast); }
  .tst-card-video:hover .tst-card-video__poster { transform: scale(1.04); }
  .tst-card-video:hover .tst-card-video__play { transform: scale(1.08); background: var(--c-primary-dark); }
}
/* smaller badge on the compact grid cards so it stays proportional */
.tst-card-video--grid .tst-card-video__play {
  width: var(--sp-12);          /* 48px — still ≥44px */
  height: var(--sp-12);
}

/* ── "open original" chip — the proof affordance (replaces the old badge
   that collided with the image's own number). Lives at the bottom-left of
   the media, but is the LAST child so it never overlaps content; on hover
   it lifts for affordance. Always visible (not hover-only) for touch. ──── */
.tst-proof-chip {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--tst-overlay);
  color: var(--c-text-inv);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  pointer-events: none;        /* the whole <a> is the hit target */
  backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: no-preference) {
  .tst-proof-chip { transition: transform var(--ease-base); }
  .tst-proof:hover .tst-proof-chip { transform: translateY(-2px); }
}

/* media-only card (no screenshot): video / audio note box */
.tst-media-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-surface-blue);
  color: var(--c-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  aspect-ratio: 4 / 3;
  text-align: left;
}
.tst-media-note svg { flex: 0 0 auto; }

/* ============================================================
   4. WALL OF LOVE — compact tier-3
   ============================================================ */
.tst-wall {
  columns: 1;
  column-gap: var(--sp-6);
}
@media (min-width: 600px)  { .tst-wall { columns: 2; } }
@media (min-width: 1000px) { .tst-wall { columns: 3; } }

.tst-wall__item {
  break-inside: avoid;
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}
/* blue headline on wall cards — same structure as bigger cards, scaled down
   for the compact tier */
.tst-wall__headline {
  margin: 0 0 var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.tst-wall__headline__num {
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--c-primary);
  overflow-wrap: break-word;
}
.tst-wall__headline__rest {
  font-size: var(--text-xs);
  color: var(--c-text-2);
  line-height: var(--lh-snug);
}
.tst-wall__quote {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-base);
  line-height: var(--lh-snug);
  color: var(--c-text);
  overflow-wrap: break-word;
}
.tst-wall__quote::before { content: "\201C"; }
.tst-wall__quote::after  { content: "\201D"; }
.tst-wall__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
}
.tst-wall__thumb {
  display: block;
  margin-top: var(--sp-4);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  cursor: zoom-in;
}
.tst-wall__thumb img { width: 100%; height: auto; }
.tst-wall__thumb:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* ============================================================
   5. CTA band sub-text (on .section--blue)
   ============================================================ */
.tst-cta__sub {
  margin: var(--sp-5) auto 0;
  max-width: 46ch;
  font-size: var(--text-xl);
  color: var(--c-text-inv);
  opacity: 0.92;
  line-height: var(--lh-relaxed);
}

/* ============================================================
   6. LIGHTBOX (native <dialog>) — premium centered modal
   The <dialog> itself fills the viewport (transparent) and CENTERS the
   figure; the dim+blur lives on ::backdrop. Image is capped at ~92vw/~78vh
   with object-fit:contain, rounded + shadowed; styled close button sits at
   the top-right of the figure; caption (name · proof label) sits beneath.
   ============================================================ */
.tst-lightbox {
  /* fill the viewport so the figure can be centered and clicks outside it
     register as backdrop-close */
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: var(--sp-5);
  border: 0;
  background: transparent;     /* dim/blur is on ::backdrop */
  overflow: hidden;
}
/* center the figure within the full-viewport dialog */
.tst-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tst-lightbox::backdrop {
  background: var(--tst-backdrop);
  /* slight blur with graceful fallback (ignored where unsupported) */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tst-lightbox__figure {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 92vw;
}
.tst-lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-xl);
}
.tst-lightbox__caption {
  max-width: 60ch;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--c-text-inv);
  opacity: 0.9;
  line-height: var(--lh-snug);
}
.tst-lightbox__caption[hidden] { display: none; }
.tst-lightbox__close {
  position: absolute;
  top: calc(-1 * var(--sp-3));
  right: calc(-1 * var(--sp-3));
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-full);
  background: var(--c-bg);
  color: var(--c-text);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 1;
}
.tst-lightbox__close:hover { background: var(--c-surface); }
.tst-lightbox__close:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}
/* On small screens keep the close button on-image (top-right inside) so it
   stays reachable and never clipped off the viewport edge. */
@media (max-width: 480px) {
  .tst-lightbox { padding: var(--sp-3); }
  .tst-lightbox__img { max-height: 72vh; }
  .tst-lightbox__close { top: var(--sp-2); right: var(--sp-2); }
}
/* Smooth fade/scale-in — motion only when the user allows it. */
@media (prefers-reduced-motion: no-preference) {
  .tst-lightbox[open] { animation: tst-lb-fade var(--ease-base); }
  .tst-lightbox[open] .tst-lightbox__figure { animation: tst-lb-scale var(--ease-base); }
  @keyframes tst-lb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes tst-lb-scale {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* ============================================================
   7. YOUTUBE FACADE (click-to-load, no eager iframe)
   ============================================================ */
.tst-yt {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-text);
  cursor: pointer;
}
.tst-yt__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}
.tst-yt__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--sp-16);
  height: var(--sp-16);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-text-inv);
  box-shadow: var(--shadow-lg);
}
.tst-yt__play svg { margin-left: 3px; }
.tst-yt:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .tst-yt__play { transition: transform var(--ease-base), background var(--ease-fast); }
  .tst-yt:hover .tst-yt__play { transform: scale(1.08); background: var(--c-primary-dark); }
}
.tst-yt iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* In-flow person-page video frame: full reading-column width, centered,
   rounded + shadowed. Wrapper guarantees the facade is a block in normal
   flow (no float / absolute) so it can never render bottom-left/broken. */
.tst-person-video__frame {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.tst-person-video__frame .tst-yt { border-radius: 0; }

/* ── Portrait video facade (YouTube Shorts, 9:16) ──────────────────────────
   A Short crammed into a 16:9 frame would letterbox with huge black bars, so
   the portrait variant caps the frame to a phone-like width, centers it, and
   the facade button switches to a 9:16 aspect. Responsive, no 360px overflow
   (column-constrained below 360). Thumbnail uses object-fit:cover. */
.tst-person-video__frame--portrait {
  max-width: 360px;
  margin-inline: auto;
}
.tst-yt--portrait { aspect-ratio: 9 / 16; }
/* The lead is a VERBATIM client quote — style it like the page's other
   statement quotes (left-aligned, blue left-bar) so the section reads as one
   coherent left block: h2 (left) → quote (left, blue bar) → centered video.
   Mirrors .tst-statement__quote; not centered (was looking crooked under the
   left-aligned h2). */
.tst-person-video__lead {
  margin: 0 0 var(--sp-6);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--c-primary);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-text);
}

/* ============================================================
   8. PERSON PAGE — centered reading column, clear hierarchy,
      8px vertical rhythm.
   ============================================================ */
/* The reading column (.container--narrow) is already margin-auto centered;
   sections own consistent vertical rhythm via the shared .section padding. */
.tst-person-hero {
  background: var(--c-surface-blue);
  padding-block: var(--sp-16);
  text-align: center;
}
.tst-person-hero__back {
  display: inline-block;
  margin-bottom: var(--sp-8);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}
.tst-person-hero__name {
  font-size: var(--text-5xl);
  letter-spacing: -0.03em;
}
.tst-person-hero__role {
  margin-top: var(--sp-3);
  font-size: var(--text-lg);
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
}
/* Headline metric — the biggest, boldest blue number on the page. */
.tst-person-hero__metric {
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.tst-person-hero__metric-num {
  font-size: var(--text-5xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--c-primary);
  overflow-wrap: break-word;
}
.tst-person-hero__metric-rest {
  max-width: 40ch;
  font-size: var(--text-base);
  color: var(--c-text-2);
  line-height: var(--lh-snug);
}
/* Hero lead quote — the human voice under the metric (muted, ~xl). */
.tst-person-hero__quote {
  margin: var(--sp-6) auto 0;
  max-width: 48ch;
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--c-text-2);
  overflow-wrap: break-word;
}
.tst-person-hero__quote::before { content: "\201C"; }
.tst-person-hero__quote::after  { content: "\201D"; }

/* Statements band */
.tst-person-statements__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--sp-4);
}
.tst-statement {
  padding-block: var(--sp-10);
  border-top: 1px solid var(--c-border);
}
.tst-statement:first-of-type {
  border-top: 0;
  padding-top: var(--sp-8);
}
/* The last statement's bottom padding would STACK with the statements
   section's bottom padding + the next section's top padding into a triple
   gap before «Видео-отзыв». Drop it so only the normal inter-section rhythm
   (section bottom + next section top) separates them. */
.tst-statement:last-of-type {
  padding-bottom: 0;
}
.tst-statement__head {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-4);
}
.tst-statement__quote {
  margin: 0;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--c-primary);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-text);
}
/* per-statement metric — bold blue number (not a pill), consistent with
   the page-wide money-number hierarchy */
.tst-statement__metric {
  margin-top: var(--sp-5);
}
.tst-statement__metric-num {
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--c-primary);
  overflow-wrap: break-word;
}
.tst-figure {
  margin: var(--sp-6) 0 0;
}
/* Inline proof: references FULL-res image, capped to its intrinsic px width
   (inline style from generator) so it is never upscaled/blurred. Centered.
   Height is capped so a tall chat reads as a clickable PREVIEW (the full image
   opens in the lightbox) instead of a ~1400px wall. The img fills the box with
   object-fit:cover + object-position:top, so the top/start of the conversation
   shows; shots shorter than the cap are never upscaled (height:auto).
   PORTRAIT chats (h > w) are constrained to a phone-like width on desktop
   (.tst-figure--portrait below) so the quoted line near the bottom isn't
   cropped out of the preview. */
.tst-figure__media {
  display: block;
  position: relative;          /* anchor the bottom-fade affordance */
  margin-inline: auto;
  width: 100%;
  max-height: 640px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  cursor: zoom-in;
}
.tst-figure__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: cover;
  object-position: top;
}
.tst-figure__media:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* PORTRAIT inline proofs — phone-width on desktop, capped height shows ~80%+
   of the chat (vs ~45% at full column width). Never upscaled: the inline
   max-width:min(380px, natural) is set by the generator. These are ALWAYS
   cropped (the chat is taller than the box), so they carry the bottom-fade. */
.tst-figure--portrait .tst-figure__media,
.tst-figure--portrait .tst-figure__media img {
  max-height: 620px;
}
/* Bottom-fade overlay on cropped (portrait) previews: signals "there's more,
   click to open". Subtle, token-derived (no raw hex), non-interactive. */
.tst-figure--portrait .tst-figure__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--sp-12);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--tst-fade) 0%, transparent),
    color-mix(in srgb, var(--tst-fade) 78%, transparent)
  );
}
.tst-figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  text-align: center;
}

.tst-person-video__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--sp-6);
}

/* The transcription <details> now lives in its own .section
   (.tst-person-transcription), so the standard section padding provides the
   inter-section rhythm — no ad-hoc margins (which made the video's bottom gap
   inconsistent with its top gap). */
.tst-original {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
/* Summary reads clearly as an interactive control: chevron + label + hint,
   hover/focus states, blue focus ring. Native <details>/<summary> keeps it
   keyboard-accessible (Enter/Space toggles, focusable). */
.tst-original__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;            /* hint drops to its own line on narrow screens */
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  border-radius: var(--r-lg);
}
.tst-original__summary::-webkit-details-marker { display: none; }
.tst-original__chevron {
  flex: 0 0 auto;
  color: var(--c-primary);
}
.tst-original__summary-label { flex: 0 0 auto; }
.tst-original__summary-hint {
  font-size: var(--text-sm);
  font-weight: var(--fw-normal);
  color: var(--c-text-muted);
}
.tst-original[open] .tst-original__summary-hint { display: none; }
/* hover/focus affordance: subtle surface tint + underlined label */
.tst-original__summary:hover {
  background: var(--c-surface-blue);
}
.tst-original__summary:hover .tst-original__summary-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tst-original__summary:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: -3px;
}
/* chevron points right when closed, down when open (motion-gated) */
.tst-original[open] .tst-original__chevron {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: no-preference) {
  .tst-original__chevron { transition: transform var(--ease-base); }
}
.tst-original__body {
  padding: 0 var(--sp-6) var(--sp-6);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
}
/* preserve intentional single newlines (bullet lists, "Итого:" breakdowns)
   so they don't collapse into run-on text; content is unchanged */
.tst-original__body p { margin: 0; white-space: pre-line; }
.tst-original__body p + p { margin-top: var(--sp-4); }

/* CTA title matches the real section titles (30px), not the louder default
   h2 (36px) — keeps the hierarchy from inverting. */
.tst-person-cta__title {
  font-size: var(--text-3xl);
}
.tst-person-cta {
  margin-top: var(--sp-12);
  text-align: center;
}

@media (max-width: 480px) {
  .tst-person-hero__name { font-size: var(--text-4xl); }
  .tst-person-hero__metric-num { font-size: var(--text-4xl); }
  .tst-person-hero__quote { font-size: var(--text-lg); }
  .tst-statement__quote,
  .tst-person-video__lead { font-size: var(--text-xl); }
  /* big card money numbers ease down so they don't overflow 360px */
  .tst-hero-case__metric__num,
  .tst-card__metric-big__num { font-size: var(--text-3xl); }
}