/* =========================================================
   PagePolicies v1 CSS
   Purpose: High-contrast, aggressive, transactional utility
   Notes:
   - Red is used ONLY for primary CTAs
   - No gradients, no shadows, no brand softness
   - Designed to sell decisively, not charm
   ========================================================= */


/* -------------------------------
   GLOBAL BASE
   ------------------------------- */

body {
  background-color: #ffffff;
  color: #111111;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* Keep line length readable (important for trust) */
.pp-section,
.pp-hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* Horizontal separators: quiet but firm */
hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0;
}


/* -------------------------------
   TYPOGRAPHY
   ------------------------------- */

/* Hero headline = decisive, not playful */
.pp-hero h1 {
  font-size: 44px;
  line-height: 1.15;
  margin-bottom: 20px;
  font-weight: 700;
}

/* Section headers */
.pp-section h2 {
  font-size: 26px;
  margin-bottom: 16px;
  font-weight: 600;
}

/* Body copy */
.pp-section p,
.pp-section li {
  font-size: 16px;
  color: #111111;
}

/* Lists: clean, not decorative */
.pp-section ul,
.pp-section ol {
  padding-left: 20px;
}

.pp-section li {
  margin-bottom: 10px;
}


/* -------------------------------
   HERO
   ------------------------------- */

.pp-hero {
  text-align: left;
}

.pp-hero-sub {
  font-size: 18px;
  margin-bottom: 28px;
  color: #1f2937; /* slightly softer than pure black */
}

.pp-operator-note {
  font-size: 13px;
  margin-top: 18px;
  color: #6b7280;
}


/* -------------------------------
   PRIMARY CTA (AGGRESSIVE RED)
   ------------------------------- */

/*
   This is the ONLY place red should appear.
   Red = action, not emotion.
*/

.pp-btn-primary {
  background-color: #DC2626; /* transactional red */
  color: #ffffff;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
}

/* Hover: darker, more serious */
.pp-btn-primary:hover {
  background-color: #B91C1C;
}

/* Focus state for accessibility */
.pp-btn-primary:focus {
  outline: 2px solid #991B1B;
  outline-offset: 2px;
}


/* -------------------------------
   SECONDARY CTA (NEUTRAL)
   ------------------------------- */

/*
   Secondary actions must NOT compete with red.
*/

.pp-btn-secondary {
  background-color: transparent;
  color: #111111;
  border: 2px solid #111111;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

.pp-btn-secondary:hover {
  background-color: #111111;
  color: #ffffff;
}


/* -------------------------------
   FOOTNOTES / SAFETY COPY
   ------------------------------- */

.pp-footnote,
.pp-footer-note {
  font-size: 13px;
  color: #6b7280;
  margin-top: 16px;
  max-width: 760px;
}


/* -------------------------------
   FINAL CTA SECTION
   ------------------------------- */

.pp-final-cta {
  padding-bottom: 64px;
}


/* -------------------------------
   MOBILE ADJUSTMENTS
   ------------------------------- */

@media (max-width: 640px) {

  .pp-hero h1 {
    font-size: 34px;
  }

  .pp-section h2 {
    font-size: 22px;
  }

  .pp-btn-primary,
  .pp-btn-secondary {
    width: 100%;
    text-align: center;
  }


}

.pp-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 24px 0;
}

.pp-plan-card {
  border: 1px solid #e2e2e2;
  padding: 20px;
  border-radius: 6px;
  background: #fff;
}

.pp-plan-primary {
  border-color: #c62828;
}

.pp-price {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 8px 0;
}

.pp-plan-note {
  font-size: 0.95rem;
  color: #555;
}

.pp-small-note {
  font-size: 0.85rem;
  color: #666;
  margin-top: 16px;
}