/* ==========================================================================
   Shared styles for feature, solution, compare, and security pages.
   Loaded alongside local-home-v2.css on all sub-pages.
   ========================================================================== */

/* ---------- Page-level hero overrides ---------- */

.feature-page .hero {
  padding-bottom: 58px;
}

.feature-page .hero-grid {
  align-items: start;
}

@media (min-width: 901px) {
  .feature-page .hero-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
  }
}

.feature-page .hero-panel {
  max-width: none;
}

.feature-page .hero-proof-list {
  margin: 16px 0 0;
  padding-left: 18px;
}

.feature-page .hero-proof-list li {
  margin-bottom: 8px;
}

/* ---------- Sections ---------- */

.feature-section {
  padding: 82px 0;
}

/* ---------- Content grids (feature, solution, security, compare, etc.) ---------- */

.feature-grid,
.solution-grid,
.security-grid,
.compare-page-grid,
.proof-grid,
.segment-grid,
.review-grid,
.controls-grid,
.roi-grid,
.cta-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}

@media (min-width: 901px) {
  .feature-grid,
  .solution-grid,
  .security-grid,
  .compare-page-grid,
  .proof-grid,
  .segment-grid,
  .review-grid,
  .controls-grid,
  .roi-grid,
  .cta-band {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  }
}

.feature-grid + .feature-grid,
.solution-grid + .solution-grid,
.security-grid + .security-grid,
.segment-grid + .segment-grid,
.controls-grid + .controls-grid,
.roi-grid + .roi-grid {
  margin-top: 26px;
}

/* ---------- Content cards ---------- */

.feature-card,
.solution-card,
.security-card,
.compare-card,
.proof-card,
.segment-card,
.review-card,
.control-card,
.feature-page .roi-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(77, 38, 0, 0.14);
  padding: 22px;
}

.feature-card h3,
.solution-card h3,
.security-card h3,
.compare-card h3,
.proof-card h3,
.segment-card h3,
.review-card h3,
.control-card h3,
.feature-page .roi-card h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.15;
}

.feature-card p,
.solution-card p,
.security-card p,
.compare-card p,
.proof-card p,
.segment-card p,
.review-card p,
.control-card p,
.feature-page .roi-card p,
.feature-list li,
.solution-list li,
.security-list li,
.segment-card li,
.feature-page .cta-copy p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}

.feature-list,
.solution-list,
.security-list,
.segment-card ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.feature-list li,
.solution-list li,
.security-list li,
.segment-card li {
  margin-bottom: 10px;
}

/* ---------- ROI card strong ---------- */

.feature-page .roi-card strong {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

/* ---------- Proof band (dark section) ---------- */

.proof-band {
  position: relative;
  color: var(--white);
  padding: 42px 0;
}

.proof-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #5c2a00, #4d2600 54%, #5d2a00);
  clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%);
  z-index: -1;
}

.proof-copy h2,
.proof-copy p,
.proof-card h3,
.proof-card p {
  color: var(--white);
}

.proof-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  padding: 18px;
}

.proof-card + .proof-card {
  margin-top: 12px;
}

.proof-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
}

/* ---------- Proof metrics ---------- */

.proof-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.proof-metric {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(77, 38, 0, 0.14);
  padding: 16px;
}

.proof-metric span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.proof-metric strong {
  display: block;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

/* ---------- Utilities ---------- */

.timeline-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

.breadcrumb {
  padding-top: 24px;
  font-size: 13px;
  color: var(--muted);
}

.breadcrumb a {
  text-decoration: underline;
}

/* ---------- CTA overrides ---------- */

.feature-page .cta {
  padding-top: 86px;
}

.feature-page .cta-shell {
  grid-template-columns: 1fr;
}

@media (min-width: 901px) {
  .feature-page .cta-shell {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
  }
}

.cta-band {
  align-items: center;
}

.cta-actions-stack {
  display: grid;
  gap: 12px;
}

.cta-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .feature-page .hero-grid,
  .feature-grid,
  .solution-grid,
  .security-grid,
  .compare-page-grid,
  .proof-grid,
  .segment-grid,
  .review-grid,
  .controls-grid,
  .roi-grid,
  .cta-band,
  .feature-page .cta-shell,
  .proof-metrics {
    grid-template-columns: 1fr;
  }

  .feature-page .hero-panel,
  .feature-page .hero-media {
    max-width: none;
  }

  .feature-section {
    padding: 56px 0;
  }
}