/* A bounded composition that belongs to the page, without player chrome. */
.demo { align-self: start; }
.stage-viewport { position: relative; height: min(660px, calc(100svh - 140px)); }
.stage {
  height: 660px;
  margin: 0;
  transform: scale(var(--scene-scale, 1));
  transform-origin: top center;
}
.stage:focus-visible { outline: 1px solid #c4b2d4; outline-offset: 6px; border-radius: 24px; }
.demo-note { position: absolute; bottom: 3px; left: 6%; margin: 0; font-size: 8px; color: #b8adbc; }
.ambient-purple { background: radial-gradient(ellipse, #e9def270, #eee8f126 46%, transparent 72%); }

/* Evidence and conclusion share the same final row. Neither adds height. */
.evidence {
  top: 15%; bottom: 6%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) 130px;
  gap: 17px;
}
.evidence-heading { grid-row: 1; grid-column: 1; margin-bottom: 0; }
.creative-grid { grid-row: 2; grid-column: 1; min-height: 0; }
.creative-card { display: flex; flex-direction: column; min-height: 0; }
.creative-image { height: auto; min-height: 0; flex: 1; }
.creative-image > img { position: absolute; inset: 0; }
.creative-info { flex-shrink: 0; }
.campaign-analysis, .finding { grid-row: 3; grid-column: 1; align-self: center; }
.campaign-analysis { padding: 0 7px; }
.finding { position: relative; inset: auto; margin: 0 4%; gap: 19px; }
.finding-number { font-size: clamp(55px, 11cqw, 79px); }
.finding h2 { font-size: clamp(21px, 4.25cqw, 30px); }
.finding p { font-size: 11px; }
.stage[data-phase=reveal] .creative-grid { transform: translateY(-2px) scale(.97); }
.stage[data-phase=reveal] .loser { transform: translateY(-4px); }
.stage[data-phase=reveal] .campaign-analysis { visibility: hidden; }
.stage[data-phase=evidence] .finding { visibility: hidden; }

@media (min-width: 801px) {
  .hero { padding-top: clamp(90px, 12svh, 110px); }
  .hero-layout { padding-bottom: 26px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(44px, min(4.8vw, 8.3svh), 78px); margin-bottom: 22px; }
  .eyebrow { margin-bottom: 20px; }
  .hero-actions { margin-top: 25px; }
  .trial-note { margin-top: 14px; }
  .google-signin { margin-top: 12px; }
  .integrations { margin-top: 22px; padding-top: 15px; }
  .integrations > div { margin-top: 13px; }
}
@media (min-width: 801px) and (max-height: 720px) {
  .hero { padding-top: 85px; }
  .hero h1 { font-size: clamp(39px, min(4.8vw, 7.5svh), 54px); margin-bottom: 17px; letter-spacing: -2.5px; }
  .hero h1 > span { letter-spacing: -2.6px; }
  .eyebrow { margin-bottom: 15px; }
  .lead { font-size: 14px; line-height: 1.65; max-width: 430px; }
  .hero-actions { margin-top: 20px; }
  .trial-button { padding-top: 12px; padding-bottom: 12px; }
  .trial-note { margin-top: 12px; }
  .google-signin { margin-top: 10px; }
  .integrations { margin-top: 17px; padding-top: 12px; }
  .integrations > div { margin-top: 10px; }
  .integrations img { width: 23px; height: 22px; }
  .stage-viewport { height: calc(100svh - 116px); }
}
@media (min-width: 801px) and (max-width: 1000px) {
  .stage { height: 610px; }
  .stage-viewport { max-height: 610px; }
  .evidence { grid-template-rows: auto minmax(0, 1fr) 125px; gap: 14px; }
}
@media (max-width: 800px) {
  .demo { align-self: auto; }
  .stage-viewport { height: min(640px, calc(100svh - 110px)); }
  .stage { height: 640px; }
  .evidence { top: 15%; bottom: 6%; grid-template-rows: auto minmax(0, 1fr) 127px; }
}
@media (max-width: 480px) {
  .stage-viewport { height: min(515px, calc(100svh - 95px)); }
  .stage { height: 515px; }
  .evidence { top: 17%; bottom: 7%; gap: 13px; grid-template-rows: auto minmax(0, 1fr) 110px; }
  .evidence-heading { margin-bottom: 0; }
  .campaign-analysis { padding: 0 3px; }
  .finding { inset: auto; margin: 0 2%; gap: 12px; }
  .finding-number { font-size: 58px; }
  .finding h2 { font-size: 23px; }
  .finding p { font-size: 9px; }
  .demo-note { font-size: 7px; bottom: 2px; left: 5%; }
}
@media (max-width: 360px) {
  .finding-number { font-size: 52px; }
  .finding h2 { font-size: 21px; }
}

/* Connection status has its own row; source cards cannot cover its text. */
.demo .gather {
  top: 20%; bottom: 9%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(68px, 1fr) auto;
  column-gap: 12%; row-gap: 10px;
}
.demo .gather .source {
  position: relative; inset: auto; width: auto; min-width: 0;
  align-self: stretch;
}
.demo .source-google { grid-column: 1; grid-row: 1; }
.demo .source-meta { grid-column: 2; grid-row: 1; }
.demo .source-website { grid-column: 1; grid-row: 3; }
.demo .source-memory { grid-column: 2; grid-row: 3; }
.demo .gather-center {
  position: relative; inset: auto; grid-column: 1 / -1; grid-row: 2;
  align-self: center; justify-self: center; width: 100%; z-index: 1;
}
.demo .gather-center > span {
  margin-top: 8px; color: var(--ink-2); line-height: 1.35;
  white-space: normal; overflow-wrap: anywhere;
}
.demo .gather .thinking-mark { width: 34px; height: 34px; font-size: 27px; }
.demo .gather .connections { pointer-events: none; }
.demo .gather .source > p,.demo .gather .source > small { color: #716778; }
.demo .gather-caption { bottom: -7%; color: #716778; line-height: 1.35; }
@media(max-width:800px) {
  .demo .gather { column-gap: 9%; grid-template-rows: auto minmax(66px, 1fr) auto; }
}
@media(max-width:480px) {
  .demo .gather { top: 20%; bottom: 10%; column-gap: 8%; row-gap: 8px; grid-template-rows: auto minmax(58px, 1fr) auto; }
  .demo .gather .thinking-mark { width: 29px; height: 29px; font-size: 23px; border-radius: 9px; }
  .demo .gather-center > span { margin-top: 6px; font-size: 10px; }
}