/* Product / Developers / Pricing routes. Shared chrome is in site.css. */
@view-transition { navigation: auto; }
.route-hero { padding: var(--space-page-lg) 0; border-bottom: 1px solid var(--marketing-border); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-page-lg); align-items: end; }
.eyebrow { margin-bottom: var(--space-2xl); color: var(--marketing-accent); font: 400 12px/1.4 var(--font-mono); }
h1 span, h2 span { color: var(--marketing-muted); }
.lead { max-width: 560px; color: var(--marketing-muted); font-size: 16px; }
.route-hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-xl); margin-top: var(--space-3xl); }
.route-hero .small-note { margin-top: var(--space-xl); }
.route-main > .section { border-bottom: 1px solid var(--marketing-border); padding-block: var(--space-page-lg); }
.route-main > .section:last-child { border-bottom: 0; }
.section-intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: var(--space-page); align-items: end; margin-bottom: var(--space-section); }
.section-intro p, .section > p { max-width: 620px; color: var(--marketing-muted); }
.section-intro a { color: var(--marketing-text); text-decoration: underline; text-underline-offset: 4px; }

.evidence-grid, .platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.evidence-card, .platform-card, .price-plan { min-height: 200px; padding: var(--space-3xl); border: 1px solid var(--marketing-border); border-radius: var(--rounded-lg); background: var(--marketing-surface); }
.evidence-card small, .platform-card small, .price-plan small { display: block; margin-bottom: var(--space-3xl); color: var(--marketing-accent); font: 400 12px/1.6 var(--font-mono); }
.evidence-card h3, .platform-card h3, .price-plan h3 { margin-bottom: var(--space-xl); font-size: 24px; }
.evidence-card p, .platform-card p, .price-plan > p:not(.price) { color: var(--marketing-muted); font-size: 14px; }
.platform-card a, .evidence-card a { display: inline-flex; align-items: center; gap: var(--space-lg); min-height: 44px; margin-top: var(--space-xl); color: var(--marketing-text); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }

.signal-strip { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3xl); align-items: center; padding: var(--space-3xl); border: 1px solid var(--marketing-border); border-radius: var(--rounded-md); background: var(--marketing-surface-2); }
.signal-strip strong { font: 400 12px/1.6 var(--font-mono); color: var(--marketing-accent); }
.signal-strip p { color: var(--marketing-muted); font-size: 14px; }
.signal-strip a { color: var(--marketing-text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }

/* Steps and lists */
.route-list { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--marketing-border); }
.route-list li { display: grid; grid-template-columns: 88px 1fr minmax(180px, .6fr); gap: var(--space-3xl); padding: var(--space-3xl) 0; border-bottom: 1px solid var(--marketing-border); align-items: baseline; }
.route-list span { color: var(--marketing-accent); font: 400 12px/1.6 var(--font-mono); }
.route-list strong { font-family: var(--font-marketing); font-size: 20px; letter-spacing: -.025em; font-weight: 600; }
.route-list p { color: var(--marketing-muted); font-size: 14px; }

/* A static recording timeline explains the ten-minute buffer without motion. */
.recording-rail { margin: 0; padding: var(--space-3xl); border: 1px solid var(--marketing-border); border-radius: var(--rounded-md); background: var(--marketing-surface); }
.recording-rail figcaption { display: flex; justify-content: space-between; gap: var(--space-xl); font: 400 12px/1.6 var(--font-mono); color: var(--marketing-muted); }
.recording-rail figcaption span:last-child { color: var(--marketing-accent); }
.recording-rail ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: var(--space-3xl) 0 var(--space-2xl); list-style: none; }
.recording-rail li { display: flex; flex-direction: column; gap: var(--space-lg); padding-top: var(--space-xl); border-top: 2px solid var(--marketing-border); font-size: 12px; position: relative; }
.recording-rail li::before { content: ''; position: absolute; top: -5px; width: 8px; height: 8px; background: var(--marketing-muted); border-radius: var(--rounded-xs); }
.recording-rail li:last-child { border-top-color: var(--marketing-accent); }
.recording-rail li:last-child::before { background: var(--marketing-accent); }
.recording-rail time { font: 400 12px/1.6 var(--font-mono); color: var(--marketing-muted); }
.recording-rail strong { font-weight: 500; color: var(--marketing-accent); }
.recording-rail > p { font-size: 12px; color: var(--marketing-muted); max-width: 80ch; }

/* Developers: install block */
.install-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-page-lg); align-items: start; }
.install-copy > p { color: var(--marketing-muted); margin-top: var(--space-3xl); max-width: 440px; }
.install-copy .text-link { margin-top: var(--space-3xl); }
.install-copy .small-note { margin-top: var(--space-xl); }
.install-code { background: var(--marketing-bg); border: 1px solid var(--marketing-border); border-radius: var(--rounded-md); min-width: 0; }
.code-heading, .code-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); padding: var(--space-xl) var(--space-2xl); font-size: 12px; color: var(--marketing-muted); }
.code-heading { border-bottom: 1px solid var(--marketing-border); }
.code-footer { border-top: 1px solid var(--marketing-border); }
.code-footer a { color: var(--marketing-text); min-height: 44px; display: inline-flex; align-items: center; }
.copy-button { background: none; color: var(--marketing-text); border: 1px solid var(--marketing-border); border-radius: var(--rounded-xs); padding: var(--space-lg) var(--space-xl); min-height: 44px; font-size: 12px; }
.copy-button:hover { background: var(--marketing-surface-2); }
.install-code pre { margin: 0; padding: var(--space-3xl); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--marketing-accent); }
.coverage-row { display: grid; grid-template-columns: 1fr 3fr 1.5fr; align-items: baseline; gap: var(--space-section); border-top: 1px solid var(--marketing-border); padding-block: var(--space-section); }
.coverage-number { color: var(--marketing-accent); font: 400 12px/1.6 var(--font-mono); }
.coverage-row h3 { font-size: 24px; }
.coverage-row p { color: var(--marketing-muted); font-size: 14px; margin-top: var(--space-xl); max-width: 60ch; }
.coverage-row a { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; padding-block: var(--space-xl); min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-lg); }
.coverage-row a:hover { color: var(--marketing-accent); }
.agent-flow { border-block: 1px solid var(--marketing-border); padding-block: var(--space-section); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3xl); font: 600 24px/1.3 var(--font-marketing); letter-spacing: -.02em; }
.agent-flow [aria-hidden] { color: var(--marketing-accent); }
.agent-links { display: flex; justify-content: space-between; gap: var(--space-section); margin-top: var(--space-3xl); align-items: center; }
.agent-links p { color: var(--marketing-muted); font-size: 14px; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.price-plan.pro { border-color: var(--marketing-accent); background: var(--marketing-surface-2); }
.price { margin: var(--space-3xl) 0 var(--space-lg); font-size: 48px; line-height: 1.2; letter-spacing: -.04em; }
.price span { font: 400 12px var(--font-ui); color: var(--marketing-muted); letter-spacing: 0; }
.price-plan ul { padding: 0; margin: var(--space-3xl) 0; list-style: none; font-size: 14px; }
.price-plan li { padding-block: var(--space-lg); border-bottom: 1px solid var(--marketing-border); }
.price-plan .button { margin-top: var(--space-lg); }
.faq { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); gap: var(--space-page); }
.faq details { border-bottom: 1px solid var(--marketing-border); }
.faq summary { padding-block: var(--space-2xl); cursor: pointer; font-size: 16px; }
.faq details:first-child summary { padding-top: 0; }
.faq p { color: var(--marketing-muted); padding-block: var(--space-lg) var(--space-3xl); font-size: 14px; }
.faq p a { text-decoration: underline; text-underline-offset: 4px; }

/* Final CTA on each route */
.route-final { display: flex; justify-content: space-between; align-items: center; gap: var(--space-section); }
.route-final .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); }
.route-final .text-link { color: var(--marketing-text); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1000px) {
  .route-hero, .section-intro, .install-layout, .faq { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .evidence-grid, .platform-grid { grid-template-columns: 1fr; }
  .evidence-card, .platform-card, .price-plan { min-height: 0; }
  .agent-flow { font-size: 20px; }
}
@media (max-width: 640px) {
  .route-hero { padding-block: var(--space-page); }
  .route-main > .section { padding-block: var(--space-page); }
  .lead, .section-intro p { font-size: 14px; }
  .route-list li { grid-template-columns: 48px 1fr; gap: var(--space-xl); }
  .route-list p { grid-column: 2; }
  .signal-strip { grid-template-columns: 1fr; gap: var(--space-xl); }
  .signal-strip a { white-space: normal; }
  .recording-rail { padding: var(--space-2xl); }
  .recording-rail figcaption { flex-direction: column; gap: var(--space-sm); }
  .recording-rail ol { grid-template-columns: 1fr 1fr; row-gap: var(--space-2xl); }
  .coverage-row { grid-template-columns: 1fr; gap: var(--space-xl); }
  .install-code pre { padding: var(--space-2xl); }
  .code-footer { flex-wrap: wrap; }
  .agent-flow { flex-direction: column; align-items: start; gap: var(--space-2xl); }
  .agent-flow [aria-hidden] { transform: rotate(90deg); }
  .agent-links { flex-direction: column; align-items: start; gap: var(--space-2xl); }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-plan { padding: var(--space-2xl); }
  .route-final { flex-direction: column; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }