/* ============================================================
   ixprt — product page primitives
   Layout for /products/<slug>/. Per-product dashboard mocks
   keep their own styles inline in each page's <style> block.
   ============================================================ */

/* Outer scope ------------------------------------------------ */
.product-page main { padding: 0 24px; }
.product-page .container { max-width: 1240px; margin: 0 auto; }

/* Section spacing ------------------------------------------- */
.product-section { padding: 72px 0; border-top: 1px solid var(--color-border); }
.product-section:first-of-type { border-top: 0; padding-top: 48px; }

/* Page caption (e.g., "Index / Diagest") ------------------- */
.product-cap {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.product-cap-rule { width: 36px; height: 1px; background: var(--color-text-dim); display: inline-block; }

/* Hero ------------------------------------------------------ */
.hero-product {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
  padding: 64px 0 48px;
}
.hero-product-copy h1 {
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 22px 0;
  color: var(--color-text);
}
.hero-product-copy h1 em {
  color: var(--color-accent);
  font-style: normal;
}
.hero-product-copy .subheadline {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 28px 0;
  max-width: 36ch;
}
.hero-product-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* Mock chrome (browser-style frame for hero dashboards) ----- */
.product-mock {
  background: #06080c;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 1px rgba(61, 177, 232, 0.14) inset;
}

/* Marquee divider ------------------------------------------- */
.product-marquee {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 0;
  overflow: hidden;
}

/* Audience grid --------------------------------------------- */
.audience-header { margin-bottom: 32px; max-width: 720px; }
.audience-header h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 14px 0;
  color: var(--color-text);
}
.audience-header p {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.audience-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 24px;
  transition: border-color 180ms ease;
}
.audience-card:hover { border-color: rgba(61, 177, 232, 0.4); }
.audience-card-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
  display: block;
}
.audience-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px 0;
  color: var(--color-text);
}
.audience-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* How it works (3-col flow) --------------------------------- */
.flow-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 32px;
}
.flow-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 22px;
  min-height: 140px;
}
.flow-step-cap {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.flow-step h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--color-text);
}
.flow-step p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
.flow-arrow {
  color: var(--color-accent);
  font-size: 22px;
  font-family: 'IBM Plex Mono', monospace;
}

/* CTA bar --------------------------------------------------- */
.cta-bar {
  background: linear-gradient(180deg, rgba(61, 177, 232, 0.05) 0%, rgba(61, 177, 232, 0.02) 100%);
  border: 1px solid rgba(61, 177, 232, 0.22);
  border-radius: 8px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin: 24px 0;
}
.cta-bar-copy h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px 0;
  color: var(--color-text);
}
.cta-bar-copy p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}
.cta-bar-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* FAQ ------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 18px; max-width: 820px; margin-top: 32px; }
.faq-item { border-bottom: 1px solid var(--color-border); padding-bottom: 18px; }
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.faq-item p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

/* Responsive ------------------------------------------------ */
@media (max-width: 900px) {
  .hero-product { grid-template-columns: 1fr; gap: 32px; }
  .flow-grid { grid-template-columns: 1fr; }
  .flow-arrow { display: none; }
  .cta-bar { grid-template-columns: 1fr; padding: 24px; }
}

/* Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
}