/* pricing.css — extracted from pricing.html during the Webflow → Eleventy migration.
   Tokens live in tokens.css, reset in base.css, header/footer in components.css.
   Dead nav/footer rules removed (verified unused: no page referenced them). */

body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--font);
        font-size: 15px;
        line-height: 1.6;
        overflow-x: hidden;
      }

button {
        cursor: pointer;
        border: none;
        font-family: inherit;
      }

a {
        text-decoration: none;
      }

::-webkit-scrollbar {
        width: 5px;
      }

::-webkit-scrollbar-track {
        background: var(--bg);
      }

::-webkit-scrollbar-thumb {
        background: var(--border2);
        border-radius: 99px;
      }

.orb {
        position: fixed;
        pointer-events: none;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.06;
        z-index: 0;
      }

.orb-1 {
        width: 700px;
        height: 700px;
        background: #6366f1;
        top: -250px;
        right: -150px;
      }

.orb-2 {
        width: 500px;
        height: 500px;
        background: #8b5cf6;
        bottom: 5%;
        left: -150px;
      }

.page {
        position: relative;
        z-index: 1;
      }

.nav-link.active {
        color: var(--accent2);
      }

/* PAGE HERO */
      .page-hero {
        background: var(--bg2);
        border-bottom: 1px solid var(--border);
        padding: 72px 24px 64px;
        text-align: center;
      }

.page-hero-inner {
        max-width: 640px;
        margin: 0 auto;
      }

.section-label {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--accent2);
        margin-bottom: 14px;
      }

.page-hero h1 {
        font-size: clamp(30px, 4.5vw, 52px);
        font-weight: 800;
        letter-spacing: -1.2px;
        line-height: 1.1;
        color: var(--text);
        margin-bottom: 18px;
      }

.grad {
        background: linear-gradient(
          135deg,
          var(--accent2) 0%,
          #a78bfa 50%,
          var(--teal) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

.page-hero-lead {
        font-size: 17px;
        color: var(--text2);
        line-height: 1.7;
        margin-bottom: 32px;
      }

.hero-cta {
        background: var(--accent-g);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        padding: 13px 32px;
        border-radius: var(--r2);
        border: none;
        cursor: pointer;
        transition: opacity 0.15s;
      }

.hero-cta:hover {
        opacity: 0.88;
      }

.hero-trust {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--text3);
        margin-top: 14px;
      }

/* PRICING GRID */
      .pricing-section {
        max-width: 1180px;
        margin: 0 auto;
        padding: 64px 24px;
      }

.pricing-section-label {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--accent2);
        margin-bottom: 10px;
        text-align: center;
      }

.pricing-section-sub {
        font-size: 15px;
        color: var(--text2);
        text-align: center;
        margin-bottom: 48px;
      }

/* PRIMARY CARDS ROW */
      .cards-primary {
        display: grid;
        /* LAUNCH: 2 cards (Free + Full) while the $25 Re-Audit card is hidden.
           Restore to repeat(3, 1fr) and remove max-width/margin centering when
           the Re-Audit card is un-commented below. */
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 16px;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
      }

.cards-secondary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 64px;
      }

.p-card {
        background: var(--bg2);
        border: 1px solid var(--border);
        border-radius: var(--r3);
        padding: 28px 26px;
        display: flex;
        flex-direction: column;
        position: relative;
        transition:
          box-shadow 0.2s,
          border-color 0.2s;
      }

.p-card:hover {
        box-shadow: 0 8px 32px rgba(99, 102, 241, 0.09);
      }

.p-card.popular {
        border-color: var(--accent);
        background: rgba(99, 102, 241, 0.04);
      }

.p-card.subtle {
        background: var(--bg3);
        border-style: dashed;
      }

.popular-tag {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--accent-g);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 16px;
        border-radius: 99px;
        white-space: nowrap;
        font-family: var(--mono);
      }

.p-card-label {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text3);
        margin-bottom: 10px;
      }

.p-card-name {
        font-size: 20px;
        font-weight: 800;
        color: var(--text);
        margin-bottom: 4px;
        letter-spacing: -0.3px;
      }

.p-card-price {
        font-size: 40px;
        font-weight: 800;
        color: var(--text);
        letter-spacing: -2px;
        line-height: 1;
        margin-bottom: 4px;
      }

.p-card-price span {
        font-size: 14px;
        font-weight: 400;
        color: var(--text3);
        font-family: var(--mono);
        letter-spacing: 0;
      }

.p-card-tagline {
        font-size: 14px;
        color: var(--text2);
        line-height: 1.55;
        margin-bottom: 20px;
        min-height: 40px;
      }

.p-card-divider {
        height: 1px;
        background: var(--border);
        margin-bottom: 20px;
      }

.p-card-includes {
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text3);
        margin-bottom: 12px;
      }

.p-card-features {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-bottom: 24px;
        flex: 1;
      }

.p-card-features li {
        font-size: 13px;
        color: var(--text2);
        display: flex;
        align-items: flex-start;
        gap: 9px;
        line-height: 1.45;
      }

.p-card-features li::before {
        content: "✓";
        color: var(--green);
        font-family: var(--mono);
        font-size: 11px;
        flex-shrink: 0;
        margin-top: 2px;
        font-weight: 700;
      }

.p-card-features li.muted::before {
        content: "→";
        color: var(--text3);
      }

.p-card-features li.muted {
        color: var(--text3);
      }

.p-card-note {
        font-size: 12px;
        color: var(--text3);
        line-height: 1.55;
        margin-bottom: 18px;
        padding: 10px 14px;
        background: var(--bg3);
        border-radius: var(--r);
        border-left: 3px solid var(--border2);
        font-style: italic;
      }

.p-card-btn {
        width: 100%;
        padding: 12px;
        border-radius: var(--r2);
        font-size: 14px;
        font-weight: 700;
        font-family: var(--font);
        cursor: pointer;
        border: none;
        transition: opacity 0.15s;
        margin-top: auto;
      }

.btn-primary {
        background: var(--accent-g);
        color: #fff;
      }

.btn-secondary {
        background: var(--surface);
        color: var(--text2);
        border: 1px solid var(--border2);
      }

.btn-outline {
        background: transparent;
        color: var(--accent2);
        border: 1.5px solid var(--accent);
        padding: 11px;
      }

.p-card-btn:hover {
        opacity: 0.85;
      }

/* PROGRESS STRIP */
      .progress-strip {
        background: var(--bg2);
        border: 1px solid var(--border);
        border-radius: var(--r2);
        padding: 18px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-bottom: 64px;
        flex-wrap: wrap;
      }

.prog-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text2);
        white-space: nowrap;
      }

.prog-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent-g);
        flex-shrink: 0;
      }

.prog-arrow {
        color: var(--border2);
        margin: 0 12px;
        font-size: 14px;
      }

/* AGENCY SECTION */
      .agency-section {
        background: var(--bg2);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 64px 24px;
      }

.agency-inner {
        max-width: 1180px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: center;
      }

.agency-left {
      }

.agency-eyebrow {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--accent2);
        margin-bottom: 12px;
      }

.agency-h2 {
        font-size: clamp(24px, 3vw, 36px);
        font-weight: 800;
        letter-spacing: -0.6px;
        color: var(--text);
        margin-bottom: 14px;
        line-height: 1.2;
      }

.agency-desc {
        font-size: 15px;
        color: var(--text2);
        line-height: 1.7;
        margin-bottom: 24px;
      }

.agency-card {
        background: var(--bg);
        border: 1px solid var(--accent);
        border-radius: var(--r3);
        padding: 32px 28px;
      }

.agency-price {
        font-size: 36px;
        font-weight: 800;
        color: var(--text);
        letter-spacing: -1.5px;
        margin-bottom: 2px;
      }

.agency-price span {
        font-size: 14px;
        font-weight: 400;
        color: var(--text3);
        font-family: var(--mono);
        letter-spacing: 0;
      }

.agency-name {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text2);
        margin-bottom: 20px;
      }

.agency-features {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-bottom: 20px;
      }

.agency-features li {
        font-size: 13px;
        color: var(--text2);
        display: flex;
        align-items: flex-start;
        gap: 9px;
        line-height: 1.45;
      }

.agency-features li::before {
        content: "✓";
        color: var(--green);
        font-family: var(--mono);
        font-size: 11px;
        flex-shrink: 0;
        margin-top: 2px;
        font-weight: 700;
      }

.agency-extras {
        font-size: 12px;
        color: var(--text3);
        font-family: var(--mono);
        line-height: 1.7;
        padding-top: 14px;
        border-top: 1px solid var(--border);
      }

.agency-btn {
        width: 100%;
        margin-top: 20px;
        padding: 13px;
        border-radius: var(--r2);
        font-size: 14px;
        font-weight: 700;
        font-family: var(--font);
        background: var(--accent-g);
        color: #fff;
        border: none;
        cursor: pointer;
        transition: opacity 0.15s;
      }

.agency-btn:hover {
        opacity: 0.88;
      }

/* MID CTA */
      .mid-cta {
        background: var(--accent-g);
        border-radius: var(--r3);
        padding: 52px 40px;
        text-align: center;
        margin: 0 auto 64px;
        max-width: 700px;
      }

.mid-cta h2 {
        font-size: clamp(22px, 3vw, 32px);
        font-weight: 800;
        color: #fff;
        margin-bottom: 10px;
        letter-spacing: -0.4px;
      }

.mid-cta p {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 24px;
        line-height: 1.65;
      }

.mid-cta-btn {
        display: inline-block;
        background: #fff;
        color: var(--accent2);
        font-family: var(--font);
        font-size: 14px;
        font-weight: 700;
        padding: 12px 32px;
        border-radius: var(--r2);
        border: none;
        cursor: pointer;
        transition: opacity 0.15s;
      }

.mid-cta-btn:hover {
        opacity: 0.9;
      }

/* FAQ */
      .faq-section {
        max-width: 820px;
        margin: 0 auto;
        padding: 0 24px 80px;
      }

.faq-section-h2 {
        font-size: clamp(22px, 3vw, 30px);
        font-weight: 800;
        color: var(--text);
        letter-spacing: -0.4px;
        margin-bottom: 28px;
      }

.faq-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

.faq-item {
        background: var(--bg2);
        border: 1px solid var(--border);
        border-radius: var(--r2);
        overflow: hidden;
      }

.faq-q {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
        gap: 12px;
        transition: background 0.15s;
      }

.faq-q:hover {
        background: var(--bg3);
      }

.faq-chev {
        color: var(--text3);
        font-size: 12px;
        transition: transform 0.2s;
        flex-shrink: 0;
      }

.faq-item.open .faq-chev {
        transform: rotate(180deg);
      }

.faq-a {
        display: none;
        padding: 0 20px 18px;
        font-size: 14px;
        color: var(--text2);
        line-height: 1.75;
      }

.faq-item.open .faq-a {
        display: block;
      }

@media (max-width: 1024px) {
.cards-primary,
        .cards-secondary {
          grid-template-columns: repeat(2, 1fr);
        }
.agency-inner {
          grid-template-columns: 1fr;
        }
}

@media (max-width: 768px) {
.page-hero {
          padding: 48px 16px 40px;
        }
.pricing-section {
          padding: 40px 16px;
        }
.cards-primary,
        .cards-secondary {
          grid-template-columns: 1fr;
        }
.progress-strip {
          gap: 6px;
          justify-content: flex-start;
        }
.prog-arrow {
          margin: 0 6px;
        }
.agency-section {
          padding: 40px 16px;
        }
.mid-cta {
          padding: 36px 20px;
          margin: 0 0 48px;
        }
.faq-section {
          padding: 0 16px 60px;
        }
}