/**
 * homepage-sections.css — Phase 7 — Problems, Tiers, FAQ, Final-CTA, Reveal.
 *
 * Ported from design_handoff_koallabs_homepage/prototype/sections.css
 * (scrollytelling subset extracted into framework-scrolly.css).
 *
 * Loaded only on / via koallabs/homepage library.
 * Token-consuming only — no token root re-declarations.
 * Reveal uses [data-reveal] + [data-reveal-stagger] attribute hooks
 * (keep underscore-hyphen convention per 07-RESEARCH.md).
 */

/* ---------- "Why SAFE-AI exists" problem section ---------- */
.problems {
  padding: 96px 0; border-top: 1px solid var(--color-border);
  background:
    radial-gradient(800px 300px at 15% 0%, rgba(255,68,68,0.04), transparent 60%),
    var(--color-background);
}
.problems .header {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-bottom: 56px; align-items: end;
}
.problems .header h2 { margin: 12px 0 0; }
.problems .header p { font-size: 17px; line-height: 1.7; color: var(--color-foreground-muted); max-width: 50ch; margin: 0; }

.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.problem-card {
  position: relative;
  padding: 28px; background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: 10px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s ease, transform .2s ease;
}
.problem-card:hover { border-color: var(--color-foreground-subtle); }
.problem-card .tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--color-score-weak); padding: 3px 8px; border: 1px solid rgba(255,68,68,0.3);
  border-radius: 4px; align-self: flex-start; text-transform: uppercase;
}
.problem-card .tag.amber { color: var(--color-score-mid); border-color: rgba(245,158,11,0.35); }
.problem-card h3 {
  margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--color-foreground);
}
.problem-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-foreground-muted); }
.problem-card .answer {
  margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--color-border);
  display: flex; align-items: center; gap: 10px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em; color: var(--color-accent);
}
.problem-card .answer::before {
  content: '→'; font-size: 16px;
}

/* ---------- What you get (service tiers) ---------- */
.tiers {
  padding: 96px 0; border-top: 1px solid var(--color-border);
}
.tiers .top { margin-bottom: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; }
.tiers .top h2 { margin: 12px 0 0; }
.tiers .top p { font-size: 17px; line-height: 1.7; color: var(--color-foreground-muted); max-width: 50ch; margin: 0; }

.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 32px; display: flex; flex-direction: column;
  position: relative;
}
.tier.featured { border-color: rgba(0,212,170,0.4); }
/* "Most requested" badge removed per founder QA — not yet data-backed. */
.tier .t-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--color-foreground-subtle); text-transform: uppercase; margin-bottom: 12px;
}
/* min-height on name + desc locks the price row to a consistent Y across all
   3 tiers regardless of wording length (founder QA — price rows were drifting). */
.tier .t-name { font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0 0 8px; min-height: 2.4em; }
.tier .t-desc { font-size: 14px; line-height: 1.55; color: var(--color-foreground-muted); margin: 0 0 24px; min-height: 4.65em; }
.tier .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px; }
.tier .price.stacked { flex-direction: column; align-items: flex-start; gap: 4px; }
.tier .price .amt { font-size: 36px; font-weight: 600; letter-spacing: -0.01em; }
.tier .price .amt.free { color: var(--color-accent); }
.tier .price .unit { font-family: var(--font-mono); font-size: 12px; color: var(--color-foreground-muted); letter-spacing: 0.04em; }
.tier ul { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.tier li { padding-left: 24px; position: relative; font-size: 14px; line-height: 1.5; margin-bottom: 10px; color: var(--color-foreground); }
.tier li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  background:
    linear-gradient(45deg, transparent 40%, var(--color-accent) 40%, var(--color-accent) 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--color-accent) 40%, var(--color-accent) 60%, transparent 60%);
}
.tier li::before {
  background: none; border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg); width: 10px; height: 5px; top: 6px;
}

/* ---------- FAQ ---------- */
.faq { padding: 96px 0; border-top: 1px solid var(--color-border); }
.faq .top { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-bottom: 48px; align-items: end; }
.faq .top h2 { margin: 12px 0 0; }
.faq .top p { font-size: 17px; line-height: 1.7; color: var(--color-foreground-muted); margin: 0; max-width: 50ch; }
.faq-item {
  border-bottom: 1px solid var(--color-border); padding: 24px 0;
  display: grid; grid-template-columns: 72px 1fr auto; gap: 24px; align-items: baseline;
}
.faq-item .n { font-family: var(--font-mono); font-size: 12px; color: var(--color-foreground-subtle); letter-spacing: 0.1em; }
.faq-item .q h3 { margin: 0 0 12px; font-size: 20px; font-weight: 600; color: var(--color-foreground); }
.faq-item .q p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-foreground-muted); max-width: 60ch; }
.faq-item .icon { color: var(--color-accent); font-family: var(--font-mono); font-size: 18px; }

/* ---------- Final CTA ---------- */
.final-cta {
  padding: 120px 0; border-top: 1px solid var(--color-border);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(0,212,170,0.10), transparent 60%),
    var(--color-background);
  text-align: center; position: relative; overflow: hidden;
}
.final-cta .container { max-width: 820px; margin: 0 auto; padding: 0 32px; position: relative; }
.final-cta h2 { font-size: clamp(36px, 5vw, 56px); margin: 0 0 20px; letter-spacing: -0.02em; font-weight: 600; line-height: 1.1; }
.final-cta p { font-size: 18px; line-height: 1.6; color: var(--color-foreground-muted); margin: 0 0 36px; }
.final-cta .btn-row { justify-content: center; }
.final-cta .meta {
  margin-top: 28px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.1em; color: var(--color-foreground-subtle);
}

/* ============================================================
   Reveal-on-scroll
   Any element with [data-reveal] starts invisible (opacity 0, +14px)
   and the JS toggles .is-in when it enters the viewport. Child stagger
   is driven by --reveal-i set in JS on each child.
   Respects prefers-reduced-motion.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger] > [data-reveal] {
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Responsive (D-12: mobile <900px handoff defaults preserved) ---------- */
@media (max-width: 900px) {
  .problems .header, .tiers .top, .faq .top { grid-template-columns: 1fr; gap: 20px; }
  .problem-grid, .tier-grid { grid-template-columns: 1fr; }
  .faq-item { grid-template-columns: 1fr; }
}