/* ============================================================
   Product subpage shared styles
   ============================================================ */

/* === Live app frame === */
.pp-live { padding: 24px 24px 96px; border-bottom: 1px solid var(--b-line); }
.pp-live-h {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: 32px; padding-bottom: 24px;
}
.pp-live-h .pp-live-h-l { display: flex; flex-direction: column; gap: 6px; }
.pp-live-h-eyebrow {
  font-family: var(--b-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--b-muted);
  display: flex; align-items: center; gap: 10px;
}
.pp-live-h-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--b-accent); box-shadow: 0 0 12px var(--b-accent);
  animation: pp-pulse 1.6s ease-in-out infinite;
}
@keyframes pp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}
.pp-live-h-title {
  font-family: var(--b-display); font-size: 56px; line-height: 1;
  letter-spacing: -0.035em; font-weight: 500; margin: 4px 0 0;
}
.pp-live-h-title .lt { font-style: italic; font-weight: 300; color: var(--b-ink-2); }
.pp-live-h-meta {
  font-family: var(--b-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--b-muted);
  display: flex; align-items: center; gap: 16px;
}
.pp-live-h-meta .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 10px #22c55e; animation: pp-pulse 1.6s ease-in-out infinite;
}
.pp-live-frame {
  border: 1px solid var(--b-line); border-radius: 14px;
  overflow: hidden; background: var(--b-bg-2);
  position: relative;
}
.pp-live-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--b-line);
  background: var(--b-bg);
  font-family: var(--b-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--b-muted);
}
.pp-live-bar-dots { display: flex; gap: 6px; }
.pp-live-bar-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--b-line);
}
.pp-live-bar-dots span:first-child { background: #ff5f57; }
.pp-live-bar-dots span:nth-child(2) { background: #febc2e; }
.pp-live-bar-dots span:nth-child(3) { background: #28c840; }
.pp-live-bar-host { color: var(--b-ink-2); }
.pp-live-bar-host b { color: var(--b-accent); font-weight: 500; }
.pp-live-bar-r {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
}
.pp-live-bar-r .live-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--b-line); border-radius: 4px;
  color: var(--b-ink-2); background: var(--b-bg-2);
}
.pp-live-bar-r .live-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
  animation: pp-pulse 1.6s ease-in-out infinite;
}
.pp-live-frame-body {
  position: relative;
  /* Let the inner ariaapp render at its native height */
}

/* Caption strip below */
.pp-live-cap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--b-line); border-top: none;
  border-radius: 0 0 14px 14px;
  background: var(--b-bg);
  margin-top: -14px; /* tuck under the frame radius */
}
.pp-live-cap-cell {
  padding: 18px 20px; border-right: 1px solid var(--b-line);
  display: flex; flex-direction: column; gap: 6px;
}
.pp-live-cap-cell:last-child { border-right: none; }
.pp-live-cap-k {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--b-muted);
}
.pp-live-cap-v { font-size: 13px; color: var(--b-ink-2); line-height: 1.4; }
.pp-live-cap-v b { color: var(--b-ink); font-weight: 500; }

/* === Anatomy section (shared scaffold) === */
.pp-anatomy { padding: 104px 24px; border-bottom: 1px solid var(--b-line); }
.pp-anatomy-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px;
  margin-top: 36px; align-items: start;
}
.pp-anatomy-aside h2 { margin: 0; }
.pp-anatomy-aside-d {
  font-size: 17px; color: var(--b-ink-2); max-width: 460px;
  line-height: 1.5; margin-top: 24px;
}
.pp-anatomy-stage {
  border: 1px solid var(--b-line); border-radius: 12px;
  background: var(--b-bg-2); overflow: hidden;
  position: relative;
}
.pp-anatomy-stage-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--b-line);
  font-family: var(--b-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--b-muted);
  background: var(--b-bg);
}
.pp-anatomy-stage-bar .pp-pill {
  padding: 3px 8px; border: 1px solid var(--b-accent);
  background: var(--b-accent-soft); color: var(--b-accent);
  border-radius: 4px;
}
.pp-anatomy-legend {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px;
  margin-top: 32px;
  font-family: var(--b-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--b-muted);
}
.pp-anatomy-legend-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed var(--b-line);
}
.pp-anatomy-legend-row::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.pp-anatomy-legend-row.k1::before { background: var(--b-accent); }
.pp-anatomy-legend-row.k2::before { background: #fb923c; }
.pp-anatomy-legend-row.k3::before { background: #22c55e; }
.pp-anatomy-legend-row.k4::before { background: #ef4444; }

/* === Lumina anatomy — annotated SOAP note === */
.lum-anatomy-note {
  padding: 28px 32px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 14px; line-height: 1.65;
  color: var(--b-ink);
  background: #fdfcfa;
  position: relative;
}
.lum-anatomy-note h4 {
  font-family: var(--b-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--b-muted);
  margin: 24px 0 8px; font-weight: 500;
}
.lum-anatomy-note h4:first-child { margin-top: 0; }
.lum-anatomy-note p { margin: 0 0 6px; }
.lum-anatomy-note .ann {
  background: linear-gradient(transparent 60%, color-mix(in oklch, var(--b-accent) 25%, transparent) 60%);
  padding: 0 2px; cursor: help; position: relative;
}
.lum-anatomy-note .ann.k2 {
  background: linear-gradient(transparent 60%, color-mix(in oklch, #fb923c 32%, transparent) 60%);
}
.lum-anatomy-note .ann.k3 {
  background: linear-gradient(transparent 60%, color-mix(in oklch, #22c55e 32%, transparent) 60%);
}
.lum-anatomy-note .ann.k4 {
  background: linear-gradient(transparent 60%, color-mix(in oklch, #ef4444 28%, transparent) 60%);
}
.lum-anatomy-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-family: var(--b-mono); font-size: 9px; font-weight: 600;
  color: white; margin-left: 4px; vertical-align: middle;
  letter-spacing: 0;
}
.lum-anatomy-pin.k1 { background: var(--b-accent); }
.lum-anatomy-pin.k2 { background: #fb923c; }
.lum-anatomy-pin.k3 { background: #22c55e; }
.lum-anatomy-pin.k4 { background: #ef4444; }

.lum-anatomy-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.lum-anatomy-card {
  border: 1px solid var(--b-line); border-radius: 10px;
  padding: 18px 20px; background: var(--b-bg);
  position: relative;
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  align-items: start;
}
.lum-anatomy-card-pin {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--b-mono); font-size: 11px; font-weight: 600;
  color: white;
}
.lum-anatomy-card-pin.k1 { background: var(--b-accent); }
.lum-anatomy-card-pin.k2 { background: #fb923c; }
.lum-anatomy-card-pin.k3 { background: #22c55e; }
.lum-anatomy-card-pin.k4 { background: #ef4444; }
.lum-anatomy-card-h {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--b-muted);
  margin-bottom: 4px;
}
.lum-anatomy-card-t { font-size: 14px; font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.lum-anatomy-card-d { font-size: 13px; color: var(--b-ink-2); line-height: 1.5; }
.lum-anatomy-card-meta {
  font-family: var(--b-mono); font-size: 10px; color: var(--b-muted);
  margin-top: 6px; letter-spacing: 0.04em;
}

/* === Echo anatomy — call transcript === */
.echo-call-stage { padding: 0; }
.echo-call-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--b-line);
  background: linear-gradient(180deg, var(--b-bg-2) 0%, var(--b-bg) 100%);
}
.echo-call-bar-num {
  font-family: var(--b-mono); font-size: 13px; color: var(--b-ink);
}
.echo-call-bar-meta {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--b-muted);
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
}
.echo-call-wave {
  display: flex; align-items: center; gap: 2px; height: 18px;
}
.echo-call-wave span {
  width: 2px; background: var(--b-accent); border-radius: 1px;
  animation: echo-wave 1.2s ease-in-out infinite;
}
.echo-call-wave span:nth-child(1) { animation-delay: 0s; height: 30%; }
.echo-call-wave span:nth-child(2) { animation-delay: 0.1s; height: 60%; }
.echo-call-wave span:nth-child(3) { animation-delay: 0.2s; height: 90%; }
.echo-call-wave span:nth-child(4) { animation-delay: 0.3s; height: 50%; }
.echo-call-wave span:nth-child(5) { animation-delay: 0.4s; height: 80%; }
.echo-call-wave span:nth-child(6) { animation-delay: 0.5s; height: 40%; }
@keyframes echo-wave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}
.echo-call-body { padding: 24px 28px; max-height: 520px; overflow-y: auto; }
.echo-call-turn {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px;
  margin-bottom: 18px; position: relative;
}
.echo-call-turn-meta {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--b-muted); text-align: right; padding-top: 8px;
}
.echo-call-turn-bubble {
  background: var(--b-bg); border: 1px solid var(--b-line);
  border-radius: 12px; padding: 12px 16px;
  font-size: 14px; line-height: 1.5;
  position: relative;
}
.echo-call-turn.echo .echo-call-turn-bubble {
  background: var(--b-accent-soft); border-color: var(--b-accent);
  color: var(--b-ink);
}
.echo-call-turn-who {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--b-muted); margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.echo-call-turn.echo .echo-call-turn-who { color: var(--b-accent); }
.echo-call-turn-who::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.echo-call-action {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 5px 10px;
  background: var(--b-bg); border: 1px dashed var(--b-line);
  border-radius: 6px;
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--b-ink-2);
}
.echo-call-action::before {
  content: "→"; color: var(--b-accent); font-weight: 600;
}
.echo-call-action.green { border-color: #22c55e; color: #166534; }
.echo-call-action.green::before { color: #22c55e; }
.echo-call-action.red { border-color: #ef4444; color: #991b1b; }
.echo-call-action.red::before { color: #ef4444; }

.echo-call-summary {
  margin: 0; padding: 22px 28px;
  background: var(--b-bg-2);
  border-top: 1px solid var(--b-line);
}
.echo-call-summary-h {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--b-muted); margin-bottom: 10px;
}
.echo-call-summary-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 12px;
  font-size: 13px; line-height: 1.5; padding: 5px 0;
  border-bottom: 1px dashed var(--b-line);
}
.echo-call-summary-row:last-child { border-bottom: none; }
.echo-call-summary-row .k {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--b-muted);
  padding-top: 2px;
}
.echo-call-summary-row .v { color: var(--b-ink); }
.echo-call-summary-row .v b { font-weight: 500; }

/* === RevQ anatomy — claim diff === */
.revq-diff-stage { padding: 0; }
.revq-diff-bar {
  padding: 16px 20px; border-bottom: 1px solid var(--b-line);
  background: linear-gradient(180deg, var(--b-bg-2) 0%, var(--b-bg) 100%);
  display: flex; align-items: center; gap: 14px;
}
.revq-diff-bar-id {
  font-family: var(--b-mono); font-size: 13px; color: var(--b-ink); font-weight: 500;
}
.revq-diff-bar-tag {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
}
.revq-diff-bar-tag.before { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.revq-diff-bar-tag.after { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.revq-diff-bar-recovered {
  margin-left: auto;
  font-family: var(--b-display); font-size: 24px; font-weight: 500;
  color: #16a34a; letter-spacing: -0.02em;
}
.revq-diff-cols {
  display: grid; grid-template-columns: 1fr 1fr;
}
.revq-diff-col {
  padding: 24px 24px; border-right: 1px solid var(--b-line);
}
.revq-diff-col:last-child { border-right: none; }
.revq-diff-col-h {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--b-muted); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.revq-diff-col-h::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
}
.revq-diff-col.before .revq-diff-col-h::before { background: #ef4444; }
.revq-diff-col.after .revq-diff-col-h::before { background: #22c55e; }
.revq-diff-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 14px;
  padding: 10px 0; border-bottom: 1px dashed var(--b-line);
  font-family: var(--b-mono); font-size: 12px;
  align-items: baseline;
}
.revq-diff-row .k {
  font-size: 10px; letter-spacing: 0.1em; color: var(--b-muted);
  text-transform: uppercase;
}
.revq-diff-row .v { color: var(--b-ink); }
.revq-diff-row.bad .v { color: #b91c1c; }
.revq-diff-row.bad .v::before { content: "✗ "; }
.revq-diff-row.good .v { color: #15803d; }
.revq-diff-row.good .v::before { content: "✓ "; }
.revq-diff-fired {
  margin-top: 16px; padding: 14px 16px;
  background: var(--b-bg-2); border: 1px solid var(--b-line);
  border-left: 3px solid var(--b-accent);
  border-radius: 6px;
}
.revq-diff-fired-h {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--b-accent); margin-bottom: 6px;
}
.revq-diff-fired-t { font-size: 13px; line-height: 1.5; color: var(--b-ink); }
.revq-diff-fired-meta {
  font-family: var(--b-mono); font-size: 10px; color: var(--b-muted);
  margin-top: 6px;
}

/* === Use cases / scenarios block === */
.pp-scenarios { padding: 104px 24px; border-bottom: 1px solid var(--b-line); }
.pp-scenarios-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--b-line); border-radius: 12px; overflow: hidden;
  margin-top: 36px;
}
.pp-scenario {
  padding: 28px 28px 32px; border-right: 1px solid var(--b-line);
  display: flex; flex-direction: column; gap: 16px; min-height: 320px;
  position: relative;
}
.pp-scenario:last-child { border-right: none; }
.pp-scenario-tag {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--b-accent);
  display: flex; align-items: center; gap: 8px;
}
.pp-scenario-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--b-accent);
}
.pp-scenario-h {
  font-family: var(--b-display); font-size: 26px; line-height: 1.1;
  letter-spacing: -0.02em; font-weight: 500;
}
.pp-scenario-d { font-size: 14px; line-height: 1.55; color: var(--b-ink-2); }
.pp-scenario-foot {
  margin-top: auto; padding-top: 16px;
  border-top: 1px dashed var(--b-line);
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  align-items: end;
}
.pp-scenario-stat {
  font-family: var(--b-display); font-size: 32px; line-height: 1;
  letter-spacing: -0.03em; font-weight: 500; color: var(--b-accent);
}
.pp-scenario-stat-l {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--b-muted);
  margin-top: 4px;
}
.pp-scenario-quote {
  font-family: 'Georgia', serif; font-style: italic;
  font-size: 13px; line-height: 1.5; color: var(--b-ink-2);
  text-align: right; max-width: 200px;
}
.pp-scenario-quote::before { content: '"'; }
.pp-scenario-quote::after { content: '"'; }

/* === Cross-sell footer === */
.pp-crosssell { padding: 88px 24px; border-bottom: 1px solid var(--b-line); }
.pp-crosssell-h2 {
  font-family: var(--b-display); font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.035em; line-height: 1; font-weight: 500; margin: 0 0 36px;
}
.pp-crosssell-h2 .lt { font-style: italic; font-weight: 300; color: var(--b-ink-2); }
.pp-crosssell-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--b-line); border-radius: 12px; overflow: hidden;
}
.pp-crosssell-card {
  padding: 32px 32px 36px; border-right: 1px solid var(--b-line);
  display: flex; flex-direction: column; gap: 16px;
  text-decoration: none; color: inherit;
  transition: background 0.2s;
}
.pp-crosssell-card:last-child { border-right: none; }
.pp-crosssell-card:hover { background: var(--b-bg-2); }
.pp-crosssell-card-tag {
  font-family: var(--b-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--b-muted);
}
.pp-crosssell-card-logo {
  height: 32px; width: auto; align-self: flex-start;
  object-fit: contain; flex-shrink: 0;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
}
.pp-crosssell-card-d {
  font-size: 15px; line-height: 1.5; color: var(--b-ink-2);
}
.pp-crosssell-card-arrow {
  font-family: var(--b-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--b-accent);
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; gap: 8px;
}
.pp-crosssell-card-arrow::after {
  content: "→"; transition: transform 0.2s;
}
.pp-crosssell-card:hover .pp-crosssell-card-arrow::after { transform: translateX(4px); }

/* ============ FAQ ACCORDION ============ */
.pp-faq {
  padding: 96px 24px;
  border-bottom: 1px solid var(--b-line);
  background: var(--b-bg);
}
.pp-faq-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 48px;
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
}
.pp-faq-head .b-section-meta {
  grid-column: 1 / -1;
}
.pp-faq-h {
  font-family: var(--b-display);
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0;
  color: var(--b-ink);
  text-wrap: balance;
}
.pp-faq-h .lt {
  font-style: italic;
  font-weight: 300;
  color: var(--b-muted);
}
.pp-faq-h .hi {
  color: var(--b-ink);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
  text-decoration-color: var(--b-accent);
}
.pp-faq-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--b-ink-2);
  max-width: 460px;
}
.pp-faq-list {
  max-width: 1380px;
  margin: 0 auto;
  border-top: 1px solid var(--b-line);
}
.pp-faq-item {
  border-bottom: 1px solid var(--b-line);
  transition: background-color 0.2s;
}
.pp-faq-item.open {
  background: var(--b-bg-2);
}
.pp-faq-q {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: 20px;
  align-items: baseline;
  padding: 28px 4px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--b-display);
  color: var(--b-ink);
  transition: padding 0.2s;
}
.pp-faq-q:hover {
  padding-left: 12px;
}
.pp-faq-q-num {
  font-family: var(--b-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b-muted);
  align-self: center;
}
.pp-faq-q-text {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.pp-faq-q-icon {
  font-family: var(--b-mono);
  font-size: 22px;
  font-weight: 300;
  color: var(--b-ink-2);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s;
  align-self: center;
  text-align: center;
}
.pp-faq-item.open .pp-faq-q-icon {
  transform: rotate(45deg);
  color: var(--b-accent);
}
.pp-faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pp-faq-item.open .pp-faq-a-wrap {
  grid-template-rows: 1fr;
}
.pp-faq-a-inner {
  overflow: hidden;
}
.pp-faq-a {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: 20px;
  padding: 0 4px 32px;
}
.pp-faq-a-text {
  grid-column: 2 / 3;
  font-size: 16px;
  line-height: 1.6;
  color: var(--b-ink-2);
  max-width: 800px;
}
.pp-faq-a-text b {
  color: var(--b-ink);
  font-weight: 500;
}

@media (max-width: 900px) {
  .pp-faq { padding: 64px 20px; }
  .pp-faq-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .pp-faq-q,
  .pp-faq-a { grid-template-columns: 36px 1fr 28px; gap: 14px; }
  .pp-faq-q { padding: 22px 0; }
  .pp-faq-q-icon { font-size: 20px; }
}

/* ============================================================
   TABLET + MOBILE RESPONSIVE PASS (added 2026-06)
   Product pages carry bespoke multi-column grids in each page's
   inline <style> (loaded AFTER this file), so overrides use
   !important to win on source order. Collapses every grid so
   nothing overflows the viewport on phones/tablets.
   ============================================================ */

/* Tablet portrait + phones */
@media (max-width: 900px) {
  /* Section padding trim */
  .pp-live, .pp-anatomy, .pp-scenarios, .pp-crosssell,
  .bridge, .deep, .dil, .spx, .tpl, .agents, .cycle, .learned,
  .posting, .ar, .camp, .ns, .spec, .flow {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Live header: stack title + meta */
  .pp-live-h { grid-template-columns: 1fr !important; gap: 16px !important; align-items: start !important; }
  .pp-live-h-meta { flex-wrap: wrap !important; gap: 10px 16px !important; }
  .pp-live-h-title { font-size: clamp(34px, 9vw, 52px) !important; }

  /* Caption + stat strips: 4-col -> 2-col, allow shrink */
  .pp-live-cap, .bridge-strip, .pp-stat-strip, .dil-stat-strip, .camp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .pp-live-cap-cell, .bridge-cell, .pp-stat { min-width: 0 !important; }
  .pp-live-cap-cell:nth-child(2n), .bridge-strip .bridge-cell:nth-child(2n) { border-right: none !important; }

  /* Every asymmetric / 2-3-col content grid -> single column */
  .pp-anatomy-grid, .pp-scenarios-grid, .pp-crosssell-grid, .revq-diff-cols,
  .pp-anatomy-legend,
  .bridge-head, .bridge-flow, .tpl-head, .tpl-explorer, .tpl-body, .tpl-specs,
  .deep-grid, .dil-stage, .flow-grid, .pp-row, .spx-intro,
  .agents-grid, .agents-head, .ar-grid, .cycle-grid, .learned-grid, .posting-grid,
  .bridge-replace, .bridge-upload, .camp-head, .ns-outcome-grid, .spec-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Remove inter-column borders that look wrong once stacked */
  .pp-scenario, .pp-crosssell-card, .revq-diff-col, .tpl-spec {
    border-right: none !important;
    border-bottom: 1px solid var(--b-line) !important;
  }
  .pp-scenario:last-child, .pp-crosssell-card:last-child, .revq-diff-col:last-child { border-bottom: none !important; }

  /* Drop forced min-heights so stacked cards don't get huge */
  .pp-scenario, .bridge-card, .tpl-explorer { min-height: 0 !important; }
  .tpl-explorer { height: auto !important; }

  /* In-frame app mockups are desktop-width UI — let them scroll inside the
     frame instead of stretching the page. */
  .pp-live-frame-body, .pp-anatomy-stage, .pp-live-frame { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Bridge footer + flow arrows */
  .bridge-foot { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .bridge-foot-r { flex-wrap: wrap !important; white-space: normal !important; gap: 12px 20px !important; }
  .bridge-arrow { transform: rotate(90deg); margin: 4px 0; }

  /* Misc wide labels */
  .pp-scenario-quote { max-width: none !important; text-align: left !important; }
  .echo-ai-tag { white-space: normal !important; }

  /* Headings that were locked to large fixed px */
  .bridge-head .b-h, .tpl-head .b-h, .deep .b-h { font-size: clamp(30px, 7vw, 48px) !important; }
}

/* Small phones */
@media (max-width: 560px) {
  .pp-live-cap, .bridge-strip, .pp-stat-strip, .dil-stat-strip, .camp-stats {
    grid-template-columns: 1fr !important;
  }
  .pp-live-cap-cell, .bridge-cell, .pp-stat { border-right: none !important; border-bottom: 1px solid var(--b-line) !important; }
  .pp-live { padding: 18px 16px 64px !important; }
  /* Narrow-phone shrink safety for value/label rows */
  .ar-card, .feature-v, .ar-bars, .ar-bar-row, .agent-log-row, .posting-paper, .ns-line { min-width: 0 !important; }
  .feature-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .feature-v { word-break: break-word; }
}