/* Agent Native: readable app availability and benefit-led explanations. */
.agent-native-page .agent-native-payoff { font-weight:650; color:#26233a; }
.agent-native-page .agent-native-hero .agent-native-payoff { max-width:600px; font-size:1.15rem; line-height:1.5; margin:1.1rem 0 1.8rem; }
.agent-native-explainer h2 { max-width:850px; margin:1.1rem 0 1.5rem; font-size:clamp(2.2rem,4.5vw,4.4rem); line-height:1.05; letter-spacing:-.05em; }
.agent-native-explainer p { max-width:850px; font-size:clamp(1.1rem,1.8vw,1.35rem); line-height:1.6; color:#625b57; }
.agent-native-section--dark.agent-native-explainer p { color:#d4cfee; }
.agent-native-section--dark.agent-native-explainer .agent-native-payoff { color:#fff; }
.agent-native-explainer .agent-native-compat { margin-top:2rem; }
.agent-native-grid-heading { max-width:850px; margin-bottom:2.5rem; }
.agent-native-grid-heading h2 { margin:1.1rem 0 1.4rem; font-size:clamp(2.4rem,5vw,4.8rem); line-height:1.02; letter-spacing:-.055em; }
.agent-native-grid-heading p, .agent-native-grid-note { font-size:1.2rem; line-height:1.55; color:#5a535f; }
.agent-native-app-grid { border:1px solid #d8d0e2; border-radius:1.4rem; overflow:hidden; background:#fff; box-shadow:0 12px 35px rgba(38,35,58,.06); }
.agent-native-app-grid table { width:100%; border-collapse:collapse; table-layout:fixed; }
.agent-native-app-col { width:50%; }
.agent-native-app-grid thead th { padding:1.6rem 1.5rem; background:#26233a; color:#fff; font-size:1.3rem; line-height:1.3; font-weight:650; text-align:center; }
.agent-native-app-grid thead th:first-child { text-align:left; }
.agent-native-app-grid tbody th { padding:1.5rem; color:#26233a; font-size:clamp(1.2rem,2.2vw,1.65rem); line-height:1.3; text-align:left; font-weight:700; }
.agent-native-app-grid tbody td { padding:1.3rem .7rem; text-align:center; }
.agent-native-app-grid tbody tr + tr > * { border-top:1px solid #e8e3ed; }
.agent-native-app-grid tbody tr:nth-child(even) { background:#faf8fc; }
.agent-native-check { display:inline-grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%; background:#e0f4e9; color:#14824b; font-size:2rem; line-height:1; font-weight:750; }
.agent-native-dash { color:#b4abbc; font-size:1.6rem; }
.agent-native-grid-note { margin:1.5rem 0 0; max-width:850px; }
@media (max-width:600px) {
  .agent-native-app-col { width:50%; }
  .agent-native-app-grid { border-radius:.9rem; }
  .agent-native-app-grid thead th { padding:1.15rem .25rem; font-size:.85rem; }
  .agent-native-app-grid thead th:first-child { padding-left:.85rem; }
  .agent-native-app-grid tbody th { padding:1.2rem .55rem; font-size:1rem; overflow-wrap:normal; }
  .agent-native-app-grid tbody td { padding:1.1rem .3rem; }
  .agent-native-check { width:2.3rem; height:2.3rem; font-size:1.6rem; }
  .agent-native-grid-heading p, .agent-native-grid-note { font-size:1.08rem; }
}

@media (max-width:360px) { .agent-native-app-grid thead th { font-size:.75rem; } }

/* Hero video card and the "beside you" block that now holds the diagram. */
.agent-native-hero-grid { grid-template-areas:"lead video" "more video"; row-gap:0; }
.agent-native-hero-grid > .agent-native-hero-lead { grid-area:lead; align-self:end; }
.agent-native-hero-grid > .agent-native-hero-more { grid-area:more; align-self:start; }
.agent-native-hero-grid > .agent-native-hero-video { grid-area:video; align-self:center; justify-self:stretch; max-width:none; margin:0; }
.agent-native-hero-more .lede { margin-top:0; }
.agent-native-beside { padding-top:clamp(2.5rem,5vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem); }
.agent-native-beside .agent-native-video { grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); gap:clamp(1.5rem,4vw,3.5rem); padding:clamp(1rem,2.5vw,2rem); }
.agent-native-beside .agent-native-kicker { margin-bottom:.9rem; }
@media (max-width:900px) { .agent-native-beside .agent-native-video { grid-template-columns:1fr; } .agent-native-hero-grid { grid-template-areas:"lead" "video" "more"; } .agent-native-hero-grid > .video-card.video-card--hero.agent-native-hero-video { margin:.25rem 0 2rem; } }
