/* Extracted from recruiter-dashboard/upgrade/index.html. */
body { background: linear-gradient(180deg, #eef2f0 0%, var(--canvas) 320px); }
    /* ── Page heading ─────────────────────────────── */
    .upgrade-heading { text-align: center; margin-bottom: 32px; }
    .upgrade-heading h1 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 700; color: var(--ink, #01382c); }
    .upgrade-heading p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft, #4b6a60); max-width: 520px; margin-inline: auto; line-height: 1.55; }

    /* ── Billing toggle ───────────────────────────── */
    .billing-toggle {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; margin-bottom: 36px;
    }
    .billing-toggle__label {
      font-size: 0.875rem; font-weight: 600;
      color: var(--ink-soft, #4b6a60); cursor: pointer;
      transition: color .15s;
    }
    .billing-toggle__label.is-active { color: var(--ink, #01382c); }
    .billing-toggle__switch {
      position: relative; width: 56px; height: 32px;
      border-radius: 999px; background: rgba(1,56,44,0.12);
      cursor: pointer; border: none; padding: 0;
      transition: background .2s;
    }
    .billing-toggle__switch[aria-checked="true"] { background: var(--accent, #059669); }
    .billing-toggle__switch::after {
      content: ""; position: absolute; top: 4px; left: 4px;
      width: 24px; height: 24px; border-radius: 50%;
      background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12);
      transition: transform .2s;
    }
    .billing-toggle__switch[aria-checked="true"]::after { transform: translateX(24px); }
    .billing-toggle__badge {
      display: inline-flex; align-items: center;
      padding: 3px 10px; border-radius: 999px;
      background: #ecfdf5; color: #059669;
      font-size: 0.6875rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.04em;
    }

    /* ── Pricing grid ─────────────────────────────── */
    .pricing-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px; margin-bottom: 48px;
    }
    @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

    .pricing-card {
      position: relative;
      border: 1px solid var(--line, rgba(1,56,44,0.1));
      border-radius: 18px; padding: 28px;
      background: var(--surface, #fff);
      display: flex; flex-direction: column;
    }
    .pricing-card--popular {
      border-color: var(--accent, #059669);
      box-shadow: 0 0 0 1px var(--accent, #059669), 0 4px 24px rgba(5,150,105,0.08);
    }

    .pricing-card__popular-badge {
      position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
      padding: 4px 14px; border-radius: 999px;
      background: var(--accent, #059669); color: #fff;
      font-size: 0.6875rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .pricing-card__name {
      margin: 0 0 4px; font-size: 1.125rem; font-weight: 700;
      color: var(--ink, #01382c);
    }
    .pricing-card__price {
      margin: 0 0 4px; font-size: 2rem; font-weight: 700;
      color: var(--ink, #01382c); line-height: 1.2;
    }
    .pricing-card__price span { font-size: 0.875rem; font-weight: 500; color: var(--ink-soft, #4b6a60); }
    .pricing-card__billed {
      margin: 0 0 20px; font-size: 0.75rem;
      color: var(--ink-faint, #8fa6a0); min-height: 1em;
    }

    .pricing-card__features {
      list-style: none; margin: 0 0 24px; padding: 0;
      display: grid; gap: 10px; flex: 1;
    }
    .pricing-card__features li {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: 0.8125rem; color: var(--ink, #01382c); line-height: 1.45;
    }
    .pricing-card__features li::before {
      content: "";
      flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
      border-radius: 50%; background: #ecfdf5;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: center;
    }

    .pricing-card__cta {
      display: flex; align-items: center; justify-content: center;
      min-height: 44px; border-radius: 10px;
      font-size: 0.875rem; font-weight: 600;
      text-decoration: none; cursor: pointer;
      transition: background .15s, border-color .15s, opacity .15s;
      border: none;
    }
    .pricing-card__cta--current {
      background: var(--canvas, #f3f5f7); color: var(--ink-soft, #4b6a60);
      cursor: default; opacity: 0.7;
    }
    .pricing-card__cta--primary {
      background: var(--accent, #059669); color: #fff;
    }
    .pricing-card__cta--primary:hover { background: #047857; }
    .pricing-card__cta--outline {
      background: transparent; color: var(--ink, #01382c);
      border: 1.5px solid var(--line, rgba(1,56,44,0.1));
    }
    .pricing-card__cta--outline:hover { border-color: var(--accent, #059669); color: var(--accent, #059669); }

    /* ── Feature comparison table ─────────────────── */
    .comparison-section { margin-bottom: 48px; }
    .comparison-section h2 {
      margin: 0 0 4px; font-size: 1.125rem; font-weight: 700;
      color: var(--ink, #01382c);
    }
    .comparison-section > p {
      margin: 0 0 20px; font-size: 0.8125rem;
      color: var(--ink-soft, #4b6a60);
    }

    .comparison-table {
      width: 100%; border-collapse: collapse;
      font-size: 0.8125rem;
    }
    .comparison-table thead th {
      text-align: center; padding: 12px 14px;
      font-weight: 700; font-size: 0.8125rem;
      color: var(--ink, #01382c);
      border-bottom: 2px solid var(--line, rgba(1,56,44,0.1));
    }
    .comparison-table thead th:first-child { text-align: left; }
    .comparison-table tbody td {
      padding: 12px 14px; text-align: center;
      border-bottom: 1px solid var(--line, rgba(1,56,44,0.1));
      color: var(--ink, #01382c);
    }
    .comparison-table tbody td:first-child {
      text-align: left; font-weight: 500;
    }
    .comparison-table .check {
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; border-radius: 50%;
      background: #ecfdf5; color: #059669;
      font-size: 0.75rem; font-weight: 700;
    }
    .comparison-table .dash { color: var(--ink-faint, #8fa6a0); }

    @media (max-width: 639px) {
      .comparison-table { font-size: 0.6875rem; }
      .comparison-table thead th,
      .comparison-table tbody td { padding: 8px 5px; }
      .comparison-table thead th:first-child,
      .comparison-table tbody td:first-child { padding-left: 0; }
      .comparison-table thead th:last-child,
      .comparison-table tbody td:last-child { padding-right: 0; }

      /* Pricing cards: tighten padding */
      .pricing-card { padding: 22px 18px; }
      .upgrade-heading h1 { font-size: 1.25rem; }
    }