/*
 * NAS Website Branding Kit v1.0 — Centralized Design System
 * Source of truth for all public-facing website components.
 * Load after nas.css. Do not duplicate tokens defined in nas.css.
 */

/* ── Additional tokens not in nas.css ─────────────────────────── */
:root {
  /* Audience pathway colors */
  --purple:        #6d5a86;
  --purple-soft:   #eee8f3;
  --green:         #5a7a3e;
  --green-soft:    #e8eddf;
  --blue:          #496f88;
  --blue-soft:     #e4edf2;
  --red-soft:      #f7e3dc;

  /* Status colors */
  --status-green:  #2a4a1e;

  /* Extended surface */
  --white:         #fffdf9;
  --rule-soft:     #e8e0cc;
  --gold-soft:     #e0cfa8;

  /* Font stacks */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', Menlo, Consolas, monospace;

  /* Layout */
  --max: 1180px;

  /* Extended radii */
  --radius-xl: 30px;
  --radius-lg: 22px;

  /* Extended shadows */
  --shadow-soft: 0 18px 55px rgba(26,20,16,.08);
  --shadow-card: 0 10px 28px rgba(26,20,16,.08);
}

/* ── Eyebrow ──────────────────────────────────────────────────── */
.eyebrow, .section-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ember);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.eyebrow::before, .section-eyebrow::before {
  content: "";
  flex: 0 0 24px;
  height: 2px;
  background: var(--ember);
}

/* ── CTA buttons ─────────────────────────────────────────────── */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  min-height: 44px;
  text-decoration: none;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.cta:hover {
  background: var(--ember-deep);
  border-color: var(--ember-deep);
  color: var(--paper);
}
.cta.primary-ember {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--paper);
  box-shadow: 0 4px 18px rgba(200,73,31,.28);
}
.cta.primary-ember:hover {
  background: var(--ember-deep);
  border-color: var(--ember-deep);
}
.cta.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.cta.secondary:hover {
  color: var(--ember);
  border-color: var(--ember);
  background: rgba(200,73,31,.06);
}
/* Use on dark backgrounds where .secondary text would be invisible */
.cta.secondary-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
.cta.secondary-light:hover {
  color: #fff;
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.08);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ── Product card CTA (used inside product cards on audience pages) ───── */
.product-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ember);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s;
  border: none;
  cursor: pointer;
  letter-spacing: .04em;
  margin-top: auto;
}
.product-cta:hover { background: var(--ember-deep); color: #fff; }
.product-cta--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--rule);
}
.product-cta--ghost:hover { background: var(--paper-warm); border-color: var(--ink-muted); }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-width: 0;
  box-shadow: 0 6px 18px rgba(26,20,16,.035);
}
.card.white { background: var(--white); }
.card.warm  { background: var(--paper-warm); }
.card.dark  {
  background: var(--ink);
  color: var(--paper);
  border-color: rgba(250,246,240,.16);
}
.card.dark p,
.card.dark li  { color: rgba(250,246,240,.75); }
.card.dark strong { color: var(--paper); }

.kicker {
  color: var(--ember);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.card-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.16;
  margin-bottom: 9px;
}

/* ── Grids ───────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }

/* ── Black emphasis band ─────────────────────────────────────── */
.black-band {
  background: radial-gradient(circle at 85% 8%, rgba(200,73,31,.26), transparent 24rem),
              linear-gradient(135deg, #1a1410, #241a14);
  color: var(--paper);
  border-radius: var(--radius-xl);
  padding: 52px 48px;
  margin: 28px 0;
  overflow: hidden;
  position: relative;
}
.black-band h2,
.black-band h3,
.black-band h4 { color: var(--paper); }
.black-band p  { color: rgba(250,246,240,.76); }
/* eyebrows are always ember-red regardless of background */
@media (max-width: 600px) {
  .black-band { padding: 36px 24px; border-radius: var(--radius-lg); }
}

/* ── Audience pathway cards ──────────────────────────────────── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
  margin: 24px 0;
}
.audience-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: 30px 28px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  text-decoration: none;
  display: block;
}
.audience-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
/* Nonprofit path — warm paper */
.audience-card.clients {
  background: var(--paper);
}
/* Consultant/partner path — purple tint */
.audience-card.partners {
  background: var(--purple-soft);
  border-color: rgba(109,90,134,.25);
}
/* Foundation/funder path — green tint */
.audience-card.foundations {
  background: var(--green-soft);
  border-color: rgba(90,122,62,.25);
}
.audience-card .path {
  color: var(--ember);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.audience-card.partners .path { color: var(--purple); }
.audience-card.foundations .path { color: var(--green); }
.audience-card h3 {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--ink);
}
.audience-card p {
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.58;
  margin-bottom: 20px;
}

/* ── Product cards ────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin: 24px 0;
}
.product-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: 30px 28px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--gold);
}
.product-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(200,73,31,.06);
}
.product-mark {
  color: var(--ember);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.product-card h3 {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.08;
  margin: 0 0 10px;
  color: var(--ink);
}
.product-card p {
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.58;
}
.mini-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.mini-list li {
  border-top: 1px dotted var(--rule);
  padding: 9px 0;
  color: var(--ink-soft);
  font-size: 12.5px;
}

/* ── Price cards ─────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin: 24px 0;
}
.price-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: 28px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.price-card.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
}
.price-card.featured h3,
.price-card.featured .price { color: var(--paper); }
.price-card.featured p,
.price-card.featured li,
.price-card.featured .price-sub { color: rgba(250,246,240,.74); }
.price-card.featured .tier { color: var(--gold-soft); }
.tier {
  color: var(--ember);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}
.price-card h3 {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--ink);
}
.price-card p { color: var(--ink-muted); font-size: 13px; line-height: 1.55; }
.price {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  margin: 18px 0 6px;
  color: var(--ink);
}
.price span { font-size: 16px; color: var(--ink-muted); }
.price-sub { color: var(--ink-muted); font-size: 12.5px; margin-bottom: 16px; }

/* ── Comparison table ────────────────────────────────────────── */
.comparison-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  margin: 20px 0;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 13.5px;
  font-family: var(--sans);
}
.comparison-table th,
.comparison-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  text-align: left;
  overflow-wrap: break-word;
}
.comparison-table th {
  background: var(--paper-warm);
  color: var(--ember);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
}
.comparison-table td { color: var(--ink-soft); }
.comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table tr:hover td { background: rgba(250,246,240,.5); }
@media (max-width: 700px) {
  .comparison-table { min-width: 600px; }
}

/* ── Pull quote ──────────────────────────────────────────────── */
.quote {
  border-left: 4px solid var(--ember);
  background: var(--paper-warm);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 24px 28px;
  margin: 28px 0;
  max-width: 860px;
}
.quote blockquote {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.38;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}
.quote cite {
  display: block;
  color: var(--ink-muted);
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 12px;
}

/* ── FAQ items ───────────────────────────────────────────────── */
.faq-item {
  overflow: hidden;                     /* Keep: clips open/close animation */
}
.faq-item summary {
  cursor: pointer;
  padding: 0;                           /* Removed — <details> inline style provides 20px 24px */
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.faq-item p {
  padding: 0;                           /* Removed — <details> inline style provides 20px 24px */
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* ── Form panel ──────────────────────────────────────────────── */
.form-panel {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.field label {
  color: var(--ember);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-family: var(--sans);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 13px 14px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  font-family: var(--sans);
  font-size: 14.5px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 4px rgba(200,73,31,.09);
}

/* ── Badge ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid currentColor;
  padding: 4px 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge.green  { color: var(--green); }
.badge.gold   { color: var(--gold); }
.badge.ember  { color: var(--ember); }
.badge.ink    { color: var(--ink-muted); }

/* ── Lock list (check list) ──────────────────────────────────── */
.lock-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.lock-list li {
  position: relative;
  padding: 8px 0 8px 22px;
  border-bottom: 1px dotted var(--rule);
  color: var(--ink-soft);
  line-height: 1.48;
  font-size: 13.5px;
}
.lock-list li:last-child { border-bottom: 0; }
.lock-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 900;
}
.lock-list.no-list li::before { content: "×"; color: var(--ember); }

/* ── Process steps grid ──────────────────────────────────── */
.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin: 24px 0;
  counter-reset: step;
}
.step-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-height: 220px;
  counter-increment: step;
}
.step-card::before {
  content: "0" counter(step);
  font-family: var(--mono);
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .12em;
  display: block;
  margin-bottom: 14px;
}
.step-card h3 {
  font-family: var(--serif);
  font-size: 21px;
  margin: 0 0 10px;
  color: var(--ink);
}
.step-card p {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Section utilities ───────────────────────────────────────── */
.lede {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink-soft);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  .audience-grid,
  .product-grid,
  .pricing-grid,
  .process { grid-template-columns: 1fr; }
  .grid-3,
  .grid-4  { grid-template-columns: 1fr; }
  .grid-2  { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
}
@media (max-width: 640px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta     { justify-content: center; }
}

/* ── NAS Logo partial ───────────────────────────────────────────────────── */
.nas-logo{display:inline-flex;align-items:center;gap:.55em;font-family:'Fraunces',Georgia,serif;line-height:1;text-decoration:none;color:inherit;}
.nas-mono{font-size:1.28em;font-weight:700;letter-spacing:-.04em;white-space:nowrap;color:inherit;}
em.nas-em{color:#C4512A;font-style:normal;}
.nas-divider{display:block;width:2px;align-self:stretch;background:currentColor;opacity:.6;flex-shrink:0;border-radius:1px;}
.nas-stack{display:flex;flex-direction:column;gap:3px;justify-content:center;}
.nas-name{font-size:1em;font-weight:600;letter-spacing:-.025em;color:inherit;white-space:nowrap;}
.nas-name em.nas-em{font-style:italic;}
.nas-tagline{font-size:.62em;font-weight:500;font-style:italic;color:#B98A2E;letter-spacing:-.01em;white-space:nowrap;}