/*
 * =========================================================
 * OLYTIC SOLUTIONS - 2026 AI Governance & Safety Kit
 * ai-governance-kit.css
 *
 * Landing page for the paid kit generator product.
 *
 * Sections styled:
 *   1. HERO           - Dark hero, urgency headline
 *   2. DEADLINES      - Two regulatory deadline cards
 *   3. PROBLEM        - Shadow AI liability framing
 *   4. DELIVERABLES   - Four document cards
 *   5. HOW IT WORKS   - Three-step process
 *   6. WHO IT'S FOR   - ICP self-selection
 *   7. FAQ            - Static Q&A
 *   8. CTA            - Final dark conversion block
 *
 * Requires: tokens.css, typography.css, buttons.css,
 *           nav.css, footer.css, layout.css
 * =========================================================
 */


/* ─── SECTION 1: HERO ─────────────────────────────────── */

.kit-hero {
  padding-top: calc(var(--space-20) + var(--nav-height));
  padding-bottom: var(--space-24);
}

.kit-hero__inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-16);
  align-items: center;
}

.kit-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-6);
}

.kit-hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
  flex-shrink: 0;
}

.kit-hero__accent-rule {
  width: 48px;
  height: 3px;
  background-color: var(--color-gold);
  margin-bottom: var(--space-6);
}

.kit-hero__headline {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #FFFFFF;
  margin: 0 0 var(--space-6) 0;
}

.kit-hero__sub {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.80);
  margin: 0 0 var(--space-10) 0;
  max-width: 520px;
}

.kit-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.kit-hero__proof {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.45);
  display: flex;
  gap: var(--space-5);
}

.kit-hero__proof-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kit-hero__proof-item::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-gold);
  flex-shrink: 0;
}

/* Right panel: price card */
.kit-price-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(200, 169, 110, 0.30);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.kit-price-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
}

.kit-price-card__price {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.kit-price-card__price-note {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.50);
  margin-bottom: var(--space-6);
}

.kit-price-card__items {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kit-price-card__items li {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: var(--leading-snug);
}

.kit-price-card__items li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-gold);
  margin-top: 6px;
  flex-shrink: 0;
}

.kit-price-card__cta {
  width: 100%;
}


/* ─── SECTION 2: DEADLINES ────────────────────────────── */

.deadlines-section {
  border-top: 1px solid #E4E4E2;
  border-bottom: 1px solid #E4E4E2;
}

.deadlines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.deadline-card {
  background-color: #FFFFFF;
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}

.deadline-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.deadline-card--red::before {
  background-color: var(--color-danger);
}

.deadline-card--amber::before {
  background-color: var(--color-caution);
}

.deadline-card__jurisdiction {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

.deadline-card__law {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}

.deadline-card__date {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-obsidian);
  margin-bottom: var(--space-2);
}

.deadline-card__countdown {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.deadline-card--red .deadline-card__countdown {
  color: var(--color-danger);
}

.deadline-card--amber .deadline-card__countdown {
  color: var(--color-caution);
}

.deadline-card__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-muted);
}


/* ─── SECTION 3: PROBLEM ──────────────────────────────── */

.problem-lede {
  font-size: var(--text-xl);
  line-height: var(--leading-body);
  color: var(--color-body-steel);
  margin-bottom: var(--space-8);
  font-weight: var(--weight-regular);
}

.problem-body p {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-body-steel);
  margin-bottom: var(--space-5);
}

.problem-body p:last-child {
  margin-bottom: 0;
}

.risk-callout {
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6) var(--space-8);
  margin-top: var(--space-8);
}

.risk-callout__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.risk-callout__body {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-body-steel);
  margin: 0;
}


/* ─── SECTION 4: DELIVERABLES ─────────────────────────── */

.deliverables-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-4);
}

.deliverables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.deliverable-card {
  background-color: #FFFFFF;
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-xs);
  position: relative;
}

.deliverable-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.deliverable-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.deliverable-card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-muted);
  margin: 0;
}

.deliverable-card__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-danger);
  background-color: rgba(220, 38, 38, 0.07);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  margin-top: var(--space-4);
}

.deliverable-card__flag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-danger);
}

/* Stoplight indicators in the stoplight card */
.stoplight-preview {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.stoplight-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stoplight-dot--red    { background-color: var(--color-danger);  }
.stoplight-dot--amber  { background-color: var(--color-caution); }
.stoplight-dot--green  { background-color: var(--color-success); }


/* ─── SECTION 5: HOW IT WORKS ─────────────────────────── */

.steps-section .section-title {
  margin-bottom: var(--space-12);
}

.steps-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  counter-reset: step-counter;
}

.step {
  position: relative;
  padding-top: var(--space-6);
  border-top: 3px solid var(--color-gold);
}

.step__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.step__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.step__body {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-body-steel);
  margin: 0;
}


/* ─── SECTION 6: WHO IT'S FOR ─────────────────────────── */

.icp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.icp-col {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
}

.icp-col--for {
  background-color: #FFFFFF;
  border: var(--border-default);
}

.icp-col--not-for {
  background-color: var(--color-surface);
  border: var(--border-default);
}

.icp-col__heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.icp-col--for .icp-col__heading {
  color: var(--color-teal);
}

.icp-col--not-for .icp-col__heading {
  color: var(--color-muted);
}

.icp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.icp-list li {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-body-steel);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.icp-col--for .icp-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-teal);
  margin-top: 7px;
  flex-shrink: 0;
}

.icp-col--not-for .icp-list li::before {
  content: '';
  width: 8px;
  height: 2px;
  background-color: var(--color-muted);
  margin-top: 9px;
  flex-shrink: 0;
}


/* ─── SECTION 7: FAQ ───────────────────────────────────── */

.faq-list {
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: var(--border-default);
  padding: var(--space-6) 0;
}

.faq-item:last-child {
  border-bottom: var(--border-default);
}

.faq-item__q {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.faq-item__a {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-body-steel);
  margin: 0;
  max-width: 700px;
}


/* ─── SECTION 8: FINAL CTA ────────────────────────────── */

.kit-cta-final {
  text-align: center;
}

.kit-cta-final__rule {
  width: 48px;
  height: 3px;
  background-color: var(--color-gold);
  margin: 0 auto var(--space-6);
}

.kit-cta-final__headline {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: #FFFFFF;
  margin-bottom: var(--space-5);
}

.kit-cta-final__sub {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.70);
  margin-bottom: var(--space-10);
}

.kit-cta-final__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.kit-cta-final__reassurance {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.35);
}


/* ─── RESPONSIVE ───────────────────────────────────────── */

@media (max-width: 900px) {
  .kit-hero__inner {
    grid-template-columns: 1fr;
  }

  .kit-hero__headline {
    font-size: var(--text-4xl);
  }

  .kit-price-card {
    max-width: 480px;
  }

  .deadlines-grid {
    grid-template-columns: 1fr;
  }

  .deliverables-grid {
    grid-template-columns: 1fr;
  }

  .steps-list {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .icp-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .kit-hero__headline {
    font-size: var(--text-3xl);
  }

  .kit-hero__sub {
    font-size: var(--text-md);
  }

  .kit-cta-final__headline {
    font-size: var(--text-3xl);
  }

  .deadline-card__date {
    font-size: var(--text-xl);
  }

  .kit-hero__proof {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}