/* Agentic Demand. Video landing page.
   Tokens live in design-tokens.css. This file owns only the video-page
   layout patterns (hero with embed, three pillars, dark sub-CTA).
   2026-09-15: headings moved OFF Instrument Serif italic onto var(--font-display)
   (Instrument Sans). This page was the ONLY place the serif rendered, which is
   exactly why its headings matched nothing else on the site. Kyle, on seeing it live.
   Superseded note, kept for the record:
   Instrument Serif italic was a page-local typographic treatment for the
   two headlines. All other type stays on DM Sans.
*/

/* Hero ---------------------------------------------------------------- */
.video-hero {
  padding: var(--space-9) 0 var(--space-8);
  background: var(--color-bg);
}
.video-hero .agd-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.video-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-brand);
  max-width: min(15.004em, 100%);
  margin: 0 0 var(--space-4);
}
.video-hero-lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: min(42.408em, 100%);
  margin: 0 0 var(--space-7);
}

/* Video figure -------------------------------------------------------- */
.video-figure {
  width: 100%;
  max-width: 960px;
  margin: 0 auto var(--space-5);
  padding: 0;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(15, 61, 46, 0.08);
  overflow: hidden;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}
.video-figure:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15, 61, 46, 0.12);
}
.video-figure video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: calc(var(--radius-lg) - 1px);
}

/* Hero CTA row -------------------------------------------------------- */
.video-cta-row {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-5);
}

/* Pillars section ----------------------------------------------------- */
.video-pillars .agd-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.video-pillars-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-brand);
  max-width: min(15.004em, 100%);
  margin: 0 0 var(--space-4);
}
.video-pillars-lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: min(42.408em, 100%);
  margin: 0 0 var(--space-8);
}

.video-pillars-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  text-align: left;
}
@media (max-width: 860px) {
  .video-pillars-grid { grid-template-columns: 1fr; }
}

.video-pillar-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-6);
}
.video-pillar-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent-deep);
  margin-bottom: var(--space-3);
}
.video-pillar-card h3 {
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-3);
  color: var(--color-brand);
  position: relative;
  padding-bottom: var(--space-3);
}
.video-pillar-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}
.video-pillar-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.video-pillar-card p:last-child {
  margin-bottom: 0;
}

/* Dark sub-CTA -------------------------------------------------------- */
.video-cta {
  background: var(--color-bg-invert);
  color: var(--color-text-invert);
  text-align: center;
}
.video-cta-title {
  color: var(--color-text-invert);
  font-size: var(--fs-h2);
  max-width: min(15.004em, 100%);
  margin: 0 auto var(--space-4);
}
.video-cta p {
  color: var(--color-text-invert-muted);
  max-width: min(35.568em, 100%);
  margin: 0 auto var(--space-6);
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.video-cta-actions {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.video-cta .agd-btn--primary {
  background: var(--color-accent);
  color: var(--color-brand);
}
.video-cta .agd-btn--primary:hover {
  background: var(--color-accent-deep);
  color: var(--color-text-invert);
}
.video-cta .agd-btn--secondary {
  background: transparent;
  color: var(--color-text-invert);
  border-color: rgba(255, 255, 255, 0.35);
}
.video-cta .agd-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-text-invert);
  color: var(--color-text-invert);
}

/* Mobile tune --------------------------------------------------------- */
@media (max-width: 720px) {
  .video-hero { padding: var(--space-8) 0 var(--space-7); }
  .video-hero .agd-container,
  .video-pillars .agd-container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .video-figure { border-radius: var(--radius-md); }
  .video-figure video { border-radius: calc(var(--radius-md) - 1px); }
}