/* organizations.php — page-specific styles only. Shared tokens, nav,
   footer, .section/.section-header/.reveal/.btn base styles come from
   landing.css (loaded first by head.php). */

/* .track-grid/.track-card themselves live in landing.css (shared with
   index.php's #tools section) — this just gives organizations.php's
   3-card version its own responsive column count instead of landing.css's
   2-up default, self-contained with its own breakpoints so it can't win
   over landing.css's mobile rule by cascade order (a same-specificity
   rule in a later stylesheet beats an earlier stylesheet's media-query
   rule regardless of viewport, which an inline style here used to do). */
.track-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .track-grid-3 { grid-template-columns: 1fr; } }

.btn-ghost-dark { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.5); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.1); }
.btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: white; }
.btn-white { background: white; color: var(--navy); }
.btn-white:hover { background: #f1f5f9; }

/* ── Hero ── */
.org-hero { background: radial-gradient(ellipse at top right, #16233b 0%, var(--ink) 55%); color: white; padding: 72px 0 64px; text-align: center; }
.org-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 42px; line-height: 1.15; margin: 0 auto 18px; font-weight: 800; max-width: 780px; }
.org-hero h1 em { font-style: italic; color: var(--green-bright); }
.org-hero .lede { font-size: 18px; max-width: 640px; margin: 0 auto 32px; color: #cbd5e1; }

/* ── Problem / Solution ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 960px; margin: 0 auto; }
.split-card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 32px; }
.split-card h3 { font-size: 18px; color: var(--navy); margin: 0 0 14px; font-family: 'Playfair Display', Georgia, serif; }
.split-card p { font-size: 15px; color: #475569; margin: 0 0 12px; }
.split-card ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: #475569; }
.split-card li { margin-bottom: 8px; }
.split-card.problem { border-top: 4px solid #dc2626; }
.split-card.solution { border-top: 4px solid var(--green); }

/* ── Benefits grid ── */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.benefit-card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 28px; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.04); }
.benefit-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
.benefit-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #dcfce7; color: var(--green); margin-bottom: 16px; }
.benefit-icon svg { width: 23px; height: 23px; }
.benefit-card h3 { font-size: 17px; color: var(--navy); margin: 0 0 8px; }
.benefit-card p { font-size: 14.5px; color: #475569; margin: 0; }

/* ── Privacy callout ── */
.privacy-callout { background: var(--ink); color: white; border-radius: 20px; padding: 48px 40px; text-align: center; max-width: 900px; margin: 0 auto; }
.privacy-callout h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 28px; margin: 0 0 16px; color: white; }
.privacy-callout p { font-size: 16.5px; color: #cbd5e1; max-width: 620px; margin: 0 auto 28px; }
.privacy-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; text-align: left; }
.privacy-point { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 20px; }
.privacy-point h4 { font-size: 14.5px; color: white; margin: 0 0 6px; }
.privacy-point p { font-size: 13.5px; color: #94a3b8; margin: 0; line-height: 1.5; }

/* ── How it works ── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; max-width: 960px; margin: 0 auto; }
.step { text-align: center; padding: 10px; }
.step-num { width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: white; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.step h3 { font-size: 17px; color: var(--navy); margin: 0 0 8px; }
.step p { font-size: 14.5px; color: #475569; margin: 0; }

/* ── Pricing teaser ── */
.pricing-teaser { background: white; border: 1px solid var(--line); border-radius: 20px; padding: 48px 40px; text-align: center; max-width: 800px; margin: 0 auto; box-shadow: 0 8px 30px rgba(0,0,0,0.05); }
.pricing-teaser h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 28px; color: var(--navy); margin: 0 0 12px; }
.pricing-teaser p { font-size: 16px; color: #475569; margin: 0 0 28px; }
.price-range { font-size: 42px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.price-range span { font-size: 18px; font-weight: 500; color: var(--ash); }
.price-note { font-size: 14px; color: var(--ash); margin-bottom: 28px; }

/* ── Final CTA ── */
.final-cta { background: var(--ink); color: white; text-align: center; padding: 80px 0; }
.final-cta h2 { color: white; font-family: 'Playfair Display', Georgia, serif; font-size: 32px; margin: 0 0 16px; }
.final-cta p { font-size: 17px; max-width: 540px; margin: 0 auto 32px; color: #cbd5e1; }
.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 700px) {
    .org-hero { padding: 48px 0 44px; }
    .org-hero h1 { font-size: 28px; }
    .org-hero .lede { font-size: 16px; }
    .split { grid-template-columns: 1fr; }
    .privacy-points { grid-template-columns: 1fr; }
    .privacy-callout { padding: 36px 24px; }
    .privacy-callout h2 { font-size: 22px; }
    .pricing-teaser { padding: 36px 24px; }
    .price-range { font-size: 34px; }
    .final-cta h2 { font-size: 26px; }
    .cta-buttons .btn { width: 100%; }
}