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

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

/* Subpage display tier: headlines here run 59-110 chars, so the hero
   clamp is smaller than the homepage's 56px ceiling. */
.hero h1 {
  font-size: clamp(35px, 3.6vw, 46px);
}

.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: 80px 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;
}

/* Copy-beside-cards grids: the copy column is much shorter than the card
   stack, so center it instead of leaving a void beneath. */
.proof-grid,
.review-grid {
  align-items: center;
}

/* A sample panel dropped into a narrow feature-grid rail: center the
   flanking card and restack the sample rows so text isn't squeezed into
   one-word lines by the date/cite chips. */
.feature-grid:has(.sample-panel) {
  align-items: center;
}

.feature-grid .sample-row {
  grid-template-columns: auto 1fr;
}

.feature-grid .sample-row > div {
  grid-column: 1 / -1;
  grid-row: 2;
}

.feature-grid .sample-row .sample-cite {
  justify-self: end;
}

@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;
}

/* ---------- Solutions hub equal tiles ---------- */

.solutions-page .segment-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.solutions-page .segment-grid .solution-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.solutions-page .segment-grid .solution-card .hero-media {
  flex: 0 0 auto;
}

.solutions-page .segment-grid .solution-card .hero-media img {
  aspect-ratio: 16 / 9;
}

.solutions-page .segment-grid .solution-card .timeline-note {
  margin-top: auto;
  padding-top: 14px;
}

@media (min-width: 901px) {
  .solutions-page .segment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .solutions-page .segment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.feature-card,
.solution-card,
.security-card,
.compare-card,
.proof-card,
.segment-card,
.review-card,
.control-card,
.feature-page .roi-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  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: 20px;
  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:not(.section-kicker) {
  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, #5d2a00, #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 var(--card-border-dark);
  background: var(--card-bg-dark);
  padding: 18px;
}

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

.proof-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  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: var(--card-bg-dark);
  border: 1px solid var(--card-border-dark);
  padding: 16px;
}

.proof-metric span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.proof-metric strong {
  display: block;
  color: var(--white);
  font-size: 26px;
  line-height: 1.1;
}

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

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

/* ---------- 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;
}

@media (min-width: 901px) {
  .cta-band {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
    column-gap: 64px;
  }
}

.cta-band .cta-copy h2 {
  max-width: 24ch;
}

.cta-actions-stack {
  display: grid;
  gap: 12px;
  align-self: center;
  width: 100%;
  max-width: 320px;
  justify-self: end;
}

.cta-note {
  font-size: 13px;
  color: var(--brown);
  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;
  }
}

@media (max-width: 640px) {
  .feature-section {
    padding: 44px 0;
  }

  .feature-card,
  .solution-card,
  .security-card,
  .compare-card,
  .segment-card,
  .review-card,
  .control-card {
    padding: 18px;
  }

  .feature-grid + .feature-grid,
  .solution-grid + .solution-grid,
  .controls-grid + .controls-grid {
    margin-top: 18px;
  }
}