/* Page-level components for the ReputationsDefender SaaS and lead-generation pages.
   Colors and radii come from the tokens in public/global.css. */

/* ---------- Layout helpers ---------- */
.section { padding-block: 3rem; }
.section + .section { padding-top: 0; }
.section > h2:first-child { margin-top: 0; }
.section-intro { color: var(--color-text-muted); max-width: 66ch; margin-bottom: 2rem; }
.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 0.75rem;
}
.lead { font-size: 1.12rem; color: var(--color-text-muted); max-width: 64ch; }
.muted { color: var(--color-text-muted); }
.narrow { max-width: 760px; margin-inline: auto; }
.prose-wide { max-width: 72ch; }

/* ---------- Buttons (extends global.css) ---------- */
.btn:focus-visible, .nav-toggle:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}
.btn:disabled { opacity: 0.7; cursor: progress; }
.btn-primary:hover { color: #fff; }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* ---------- Hero and page hero ---------- */
.page-hero { padding-block: 3.5rem 2.5rem; border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); }
.page-hero h1 { max-width: 22ch; }
.page-hero-inner { max-width: none; }

.home-hero { padding-block: 4rem 3.5rem; border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt) url("/images/hero-bg.svg") no-repeat right center / cover; }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.home-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); max-width: 18ch; letter-spacing: -0.01em; }
.hero-note { font-size: 0.92rem; color: var(--color-text-muted); margin-top: 1rem; }

.trust-line { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; padding: 0; margin: 1.5rem 0 0; font-size: 0.92rem; color: var(--color-text-muted); }
.trust-line li::before { content: '✓'; color: var(--color-accent-dark); font-weight: 700; margin-right: 0.4rem; }

/* ---------- Cards and grids ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.info-card { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.info-card h3 { margin: 0; font-size: 1.08rem; color: var(--color-primary); }
.info-card p { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; }
.info-card a.more { margin-top: auto; font-weight: 600; text-decoration: none; }
.card-link { text-decoration: none; color: var(--color-text); transition: box-shadow 0.15s, transform 0.15s; }
.card-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; padding: 1.25rem; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.steps h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.steps p { margin: 0; color: var(--color-text-muted); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.check-list li { padding-left: 1.75rem; position: relative; }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-accent-dark); font-weight: 700; }

/* ---------- Sample dashboard and scan report ---------- */
.sample-dashboard, .scan-report-wrap { margin: 0; }
.sample-banner {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
  margin-bottom: 1rem;
}
.report-overview { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.25rem; }
.score-card { padding: 1.5rem; text-align: center; --tone: var(--color-primary); }
.score-card.tone-excellent { --tone: #1f8a4c; }
.score-card.tone-strong { --tone: #0f8f7e; }
.score-card.tone-attention { --tone: #a86b00; }
.score-card.tone-risk { --tone: #c2410c; }
.score-card.tone-critical { --tone: #b42318; }
.ring-wrap { position: relative; width: 170px; height: 170px; margin: 0 auto; }
.score-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--color-border); stroke-width: 10; }
.ring-progress { fill: none; stroke: var(--tone); stroke-width: 10; stroke-linecap: round; }
.ring-score {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  font-size: 2.6rem; font-weight: 800; color: var(--color-text);
}
.score-band { font-weight: 700; font-size: 1.15rem; color: var(--tone); margin: 1rem 0 0.25rem; }
.score-meaning { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }
.score-caption { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--color-text-muted); }
.metric-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-content: start; }
.metric { padding: 1.25rem; }
.metric-label { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.metric-value { margin: 0.35rem 0; font-size: 1.9rem; font-weight: 800; color: var(--color-text); line-height: 1.1; }
.metric-note { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }
.report-heading { margin-top: 2rem; outline: none; }
.report-meta { color: var(--color-text-muted); margin-bottom: 1.5rem; }
.report-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.list-card { padding: 1.25rem; }
.list-card h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.list-card ul, .list-card ol { padding-left: 1.2em; margin: 0; font-size: 0.92rem; }
.list-card li { margin-bottom: 0.5em; }
.report-limits { margin-top: 1.5rem; font-size: 0.92rem; color: var(--color-text-muted); }
.report-limits summary { cursor: pointer; font-weight: 600; color: var(--color-text); }
.report-cta { margin-top: 2rem; padding: 1.5rem; }
.report-cta h3 { margin: 0 0 0.4rem; }
.report-cta p { margin: 0; color: var(--color-text-muted); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 600; font-size: 0.95rem; }
.field .hint { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.6em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input[aria-invalid='true'], .field select[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: #b42318; }
.field-error { color: #b42318; font-size: 0.88rem; margin: 0; font-weight: 600; }
.field-error[hidden] { display: none; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; }
.check input { margin-top: 0.3rem; width: 20px; height: 20px; flex-shrink: 0; }
.form-status { border-radius: var(--radius-sm); padding: 0.8rem 1rem; font-size: 0.95rem; margin: 0; }
.form-status[data-kind='error'] { background: #fdecea; color: #7a1c14; border: 1px solid #f5b5ad; }
.form-status[hidden] { display: none; }
.form-success { padding: 1.5rem; font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.form-privacy { font-size: 0.86rem; color: var(--color-text-muted); margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.scan-form-card { padding: 1.75rem; }
.scan-form-card[hidden] { display: none; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; align-items: stretch; }
.plan { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.plan h3 { margin: 0; font-size: 1.1rem; }
.plan-price { margin: 0; }
.amount { font-size: 2rem; font-weight: 800; color: var(--color-text); }
.cadence { color: var(--color-text-muted); font-size: 0.95rem; margin-left: 0.2rem; }
.plan-summary { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }
.plan-features { list-style: none; padding: 0; margin: 0.4rem 0 0.8rem; font-size: 0.92rem; display: grid; gap: 0.5rem; flex: 1; }
.plan-features li { padding-left: 1.4rem; position: relative; }
.plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--color-accent-dark); font-weight: 700; }
.plan-cta { width: 100%; font-size: 0.95rem; padding-inline: 0.8em; }
.plan-highlight { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.pricing-note { margin-top: 1.25rem; font-size: 0.9rem; color: var(--color-text-muted); max-width: 70ch; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
.table-wrap table { min-width: 560px; }

/* ---------- Final CTA and bands ---------- */
.cta-band { background: var(--color-primary); color: #fff; padding-block: 3.25rem; margin-top: 3rem; }
.cta-band h2 { color: #fff; margin: 0 0 0.5rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta-band p { margin: 0; color: rgba(255, 255, 255, 0.88); max-width: 60ch; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-band .btn-primary { background: #fff; color: var(--color-primary); }
.cta-band .btn-primary:hover { background: #eef4f9; color: var(--color-primary-dark); }
.callout-strong { background: var(--color-bg-alt); border-left: 4px solid var(--color-primary); padding: 1rem 1.25rem; border-radius: var(--radius-sm); }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.25rem; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { margin: 0.75rem 0 0; color: var(--color-text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .home-hero-grid, .split { grid-template-columns: 1fr; gap: 2rem; }
  .card-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-lists { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .card-grid, .card-grid.two { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .report-overview { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .section { padding-block: 2.25rem; }
  .home-hero, .page-hero { padding-block: 2.5rem 2rem; }
  .form-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .card-grid.four { grid-template-columns: 1fr; }
  .hero-actions .btn, .form-actions .btn, .cta-band .btn { width: 100%; }
  .metric-grid { grid-template-columns: 1fr; }
  .scan-form-card { padding: 1.25rem; }
  .steps li { grid-template-columns: 2.25rem 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-link:hover { transform: none; }
}