/* 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 and .btn-outline (dark-hero variants) now live in
   landing.css as the one canonical version — see that file's comment. */
.btn-white { background: white; color: var(--navy); }
.btn-white:hover { background: #f1f5f9; }

/* ── Hero ──
   .org-hero's own background/h1/lede rules used to be redeclared here —
   byte-for-byte identical to landing.css's canonical version, except this
   copy never got deleted when that consolidation happened, so it kept
   silently winning the cascade (same specificity, loaded after
   landing.css) and re-applying the old dark hero here even after
   landing.css was fixed to a light one on 2026-08-16. Removed — this file
   now only carries .org-hero-note, which landing.css doesn't define. */
.org-hero-note { font-size: 13.5px; color: var(--ash); margin: 18px 0 0; }
.org-hero-note a { color: var(--amber); font-weight: 600; text-decoration: none; }
.org-hero-note a:hover { text-decoration: underline; }

/* ── Problem / Solution ──
   max-width bumped twice in the same session (2026-08-25): first 960→1100
   on the theory that .split/.privacy-callout/.steps were independently
   clamped well under the page's 1160px .container. User's screenshot
   showed that wasn't enough — the real root cause was landing.css's
   shared .container itself, only 1160px when auth-login.css/register.css
   had already independently settled on 1200px for their own pages (see
   that fix's comment in landing.css). Bumped .container to 1280 there,
   and these three caps again here (1100→1200, privacy-callout 1000→1080)
   to keep pace instead of under-filling the wider container. Also bumped
   the shared .page-hero/.org-hero h1/lede max-widths in landing.css,
   since this page's hero is plain centered text with no image/visual
   element the way index.php's hero has one.
   .pricing-teaser below is left at 800, unchanged: it's shared with
   index.php's own pricing section and reads fine narrow as a compact
   "sized to your program" card, not a full section of content. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1200px; margin: 0 auto; }
.split-card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.split-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(12,24,38,0.22); }
.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: var(--green-light); 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: 1080px; 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: 1200px; 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/-h2/-p now live once in landing.css (see
   about-us.css's comment — this file just never got the same trim). */
.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Segment chips (index.php hero, "Built for" cue) ──
   Stands in for a logo wall until there are real customer logos to show
   — same enterprise-SaaS "who this is for" cue, just built from labels
   instead of marks. Lives inline in the hero rather than its own
   section — see index.php's comment at its point of use. */
.segment-strip-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.segment-strip-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); margin-right: 4px; }
.segment-chip { font-size: 13.5px; font-weight: 600; color: var(--navy); background: var(--paper); border: 1px solid var(--line); padding: 8px 16px; border-radius: 99px; }

/* ── Grant & Funder Reporting showcase (index.php) ──
   Reuses landing.css's .showcase-layout/.showcase-tabs/.showcase-media
   tab-slider (the same "click a track to see what's inside" widget that
   used to run index.php's old #tools section) so SCA/milestone/Intro
   Packet reports each get their own click-to-switch panel instead of
   one shared bullet list. Just the compact "report preview" header that
   sits above each panel's .showcase-textblock is new — icon + title +
   mono subtitle, echoing .hp-chrome-url's mono treatment without pulling
   in the full .hero-preview/.hp-chrome browser-chrome shell, which is
   too tall to repeat three times inside .showcase-media's fixed
   min-height once a textblock has to fit underneath it too. */
.showcase-report-preview { display: flex; align-items: center; gap: 12px; padding: 26px 32px 0; }
.showcase-report-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--panel-accent, var(--navy)); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.showcase-report-icon svg { width: 20px; height: 20px; }
.showcase-report-title { font-weight: 700; color: var(--navy); font-size: 14.5px; }
.showcase-report-sub { font-size: 12px; color: var(--ash); margin-top: 2px; }
.showcase-report-stats { display: flex; gap: 26px; padding: 16px 32px 0; }
.showcase-report-stats span { display: block; font-size: 20px; font-weight: 800; color: var(--navy); }
.showcase-report-stats div { font-size: 10.5px; color: var(--ash); text-transform: uppercase; letter-spacing: 0.04em; }

/* ── "How it actually works" mechanics showcase ──
   Same .showcase-layout widget as the Grant & Funder Reporting one
   above, just a 4th tab, so a 4th --panel-accent color is needed (that
   custom property only exists as page-specific utility classes today —
   navy/green/teal, see css/utilities.css's own header on why those
   aren't hand-extended). An ID selector here keeps this page-specific
   4th color out of that auto-generated file. */
#mech-4 { --panel-accent: var(--amber); }

@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; }
    .cta-buttons .btn { width: 100%; }
}

/* ── Comparison table (index.php "Why we're different") ──
   Replaces that section's old two-column prose split-card (organizations.php
   still uses .split/.split-card as-is for its own Problem/Solution section
   above — left untouched) with a scannable feature-by-feature table, closer
   to how enterprise buyers actually stack vendors up. .compare-table-wrap
   scrolls horizontally on narrow viewports rather than squeezing three
   columns unreadably, same pattern legal.css's .glance-table already uses
   for its own responsive table. The Forzara column gets a light green
   tint + checkmarks so it reads as the clear pick at a glance; the "typical
   software" column stays neutral with a plain X rather than a red-tinted
   cell, closer to how Stripe/Notion/Vercel-style comparison tables treat
   the competitor column, factual rather than combative. */
.compare-table-wrap { overflow-x: auto; border-radius: 16px; box-shadow: var(--shadow); max-width: 900px; margin: 0 auto; }
.compare-table { width: 100%; border-collapse: collapse; background: white; min-width: 640px; }
.compare-table th, .compare-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14.5px; }
.compare-table thead th { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ash); background: var(--paper); }
.compare-table thead th.compare-col-forzara { color: var(--navy); background: var(--green-light); }
.compare-table tbody th { font-weight: 700; color: var(--navy); white-space: nowrap; background: var(--paper); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td { color: #475569; line-height: 1.5; }
.compare-table td.compare-yes { background: var(--green-light); color: #1e293b; font-weight: 500; }
.compare-table .compare-icon { display: inline-flex; margin-right: 8px; vertical-align: -3px; }
.compare-table td.compare-no .compare-icon { color: #dc2626; }
.compare-table td.compare-yes .compare-icon { color: var(--green); }
.compare-table .compare-icon svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
    .compare-table-wrap { border-radius: 12px; }
}