.pricing-hero {
    background: linear-gradient(180deg, var(--ink-50) 0%, var(--paper) 100%);
    padding: var(--sp-12) 0 var(--sp-8);
    text-align: center;
    border-bottom: 1px solid var(--ink-200);
  }
  .pricing-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: var(--sp-3) 0; }
  .pricing-hero p.lead { font-size: var(--fs-md); color: var(--ink-600); max-width: 640px; margin: 0 auto var(--sp-4); }

  .billing-toggle {
    display: inline-flex;
    background: var(--ink-100);
    border-radius: var(--r-full);
    padding: 4px;
    margin-bottom: var(--sp-6);
  }
  .billing-toggle button {
    background: transparent; border: none; cursor: pointer;
    padding: 8px 18px; border-radius: var(--r-full);
    font-weight: 600; font-size: var(--fs-sm); color: var(--ink-600);
    transition: all var(--t-fast) var(--ease);
  }
  .billing-toggle button.active {
    background: var(--paper); color: var(--ink-900);
    box-shadow: var(--shadow-sm);
  }
  .save-badge {
    display: inline-block; background: var(--success); color: #fff;
    border-radius: var(--r-full); padding: 2px 10px;
    font-size: var(--fs-xs); font-weight: 700;
    margin-left: 6px; letter-spacing: 0.04em;
  }

  .tier-grid {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 1100px; margin: 0 auto;
  }
  .tier {
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    display: flex; flex-direction: column;
    position: relative;
  }
  .tier.featured {
    border-color: var(--civic-blue);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15), var(--shadow-md);
    transform: scale(1.02);
  }
  .tier-tag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--civic-blue); color: #fff;
    padding: 4px 14px; border-radius: var(--r-full);
    font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .tier h3 { margin: 0; font-size: var(--fs-lg); }
  .tier .price { font-size: 2.5rem; font-weight: 800; color: var(--ink-900); margin: var(--sp-3) 0 0; letter-spacing: -0.02em; }
  .tier .price small { font-size: var(--fs-base); color: var(--ink-500); font-weight: 500; }
  .tier .tier-tagline { color: var(--ink-600); font-size: var(--fs-sm); min-height: 3em; margin: var(--sp-3) 0; }
  .tier ul { list-style: none; padding: 0; margin: var(--sp-4) 0; flex: 1; }
  .tier li { padding: 6px 0; color: var(--ink-700); font-size: var(--fs-sm); display: flex; gap: 8px; align-items: flex-start; }
  .tier li::before { content: '✓'; color: var(--success); font-weight: 800; flex-shrink: 0; }
  .tier li.dim { color: var(--ink-400); }
  .tier li.dim::before { content: '·'; color: var(--ink-300); }
  .tier button, .tier a.btn {
    width: 100%; padding: 12px; border-radius: var(--r-md);
    font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
    border: 1px solid transparent; display: inline-flex;
    align-items: center; justify-content: center;
  }
  .tier .btn-primary { background: var(--civic-blue); color: #fff; }
  .tier .btn-primary:hover { background: var(--civic-blue-hover); }
  .tier .btn-secondary { background: transparent; color: var(--ink-700); border-color: var(--ink-300); }
  .tier .btn-secondary:hover { background: var(--ink-100); color: var(--ink-900); }

  .mission-bar {
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin: var(--sp-8) auto;
    max-width: 720px;
    text-align: center;
  }
  .mission-bar h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
  .mission-bar p { color: var(--ink-600); font-size: var(--fs-sm); margin: 0; }

  .faq { max-width: 720px; margin: var(--sp-8) auto; }
  .faq details { background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-2); }
  .faq summary { font-weight: 600; cursor: pointer; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before { content: '+'; color: var(--civic-blue); font-weight: 800; margin-right: 8px; }
  .faq details[open] summary::before { content: '−'; }
  .faq p { margin: var(--sp-3) 0 0; color: var(--ink-600); font-size: var(--fs-sm); line-height: 1.6; }