:root {
  --sb-pricing-shell: min(1824px, calc(100% - 224px));
  --ink: #111827;
  --muted: #536174;
  --soft: #f5f8fc;
  --line: #dbe5f2;
  --blue: #1572e8;
  --blue-dark: #073fb8;
  --green: #31ce36;
  --dark: #07111f;
}

.pricing-page {
      overflow: hidden;
      color: var(--ink);
      background: #fff;
    }

    .pricing-page .shell {
      width: var(--sb-pricing-shell);
      margin: 0 auto;
    }

    .hero {
      padding: 96px 0 74px;
      border-bottom: 1px solid var(--line);
      text-align: center;
      background:
        linear-gradient(rgba(21, 114, 232, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 114, 232, .05) 1px, transparent 1px),
        radial-gradient(circle at 16% 10%, rgba(21, 114, 232, .11), rgba(21, 114, 232, 0) 30%),
        radial-gradient(circle at 86% 6%, rgba(49, 206, 54, .08), rgba(49, 206, 54, 0) 28%),
        #fff;
      background-size: 56px 56px, 56px 56px, auto, auto, auto;
    }

    .hero-content {
      max-width: 980px;
      margin: 0 auto;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      margin-bottom: 20px;
      padding: 7px 14px;
      border-radius: 999px;
      color: var(--blue);
      background: rgba(21, 114, 232, .1);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .pricing-page h1,
    .pricing-page h2,
    .pricing-page h3 {
      margin: 0;
      color: var(--ink);
      font-weight: 600;
      letter-spacing: 0;
    }

    .pricing-page h1 {
      max-width: 940px;
      margin-right: auto;
      margin-left: auto;
      font-size: 56px;
      line-height: 1.1;
    }

    .lead {
      max-width: 760px;
      margin: 24px auto 0;
      color: var(--muted);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.68;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
      margin-top: 44px;
    }

    .pricing-page .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 24px;
      border: 1px solid transparent;
      border-radius: 45px;
      color: var(--ink);
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
      background-size: 200% 100%;
      background-position: 100% 0;
      transition: background-position .34s ease, border-color .18s ease, color .18s ease;
    }

    .pricing-page .button-primary {
      color: #fff;
      background-image: linear-gradient(90deg, var(--blue-dark) 0 50%, var(--blue) 50% 100%);
    }

    .pricing-page .button-secondary {
      color: var(--ink);
      border-color: #d5e1f0;
      background-image: linear-gradient(90deg, #eef2f7 0 50%, #fff 50% 100%);
    }

    .pricing-page .button:hover,
    .pricing-page .button:focus {
      background-position: 0 0;
      text-decoration: none;
    }

    .hero-actions .button {
      min-width: 218px;
    }

    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 26px;
      margin: 32px 0 0;
      padding: 0;
      list-style: none;
      color: #344054;
      font-size: 15px;
      font-weight: 600;
    }

    .hero-proof li {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .hero-proof i {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 0 0 7px rgba(49, 206, 54, .12);
    }

    .hero-support {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      max-width: 1440px;
      margin: 62px auto 0;
      text-align: left;
    }

    .hero-support-item {
      padding: 20px;
      border: 1px solid #dbe5f2;
      border-radius: 8px;
      background: rgba(255, 255, 255, .86);
    }

    .hero-support-item strong {
      display: block;
      color: var(--ink);
      font-size: 18px;
      font-weight: 600;
      line-height: 1.25;
    }

    .hero-support-item span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
    }

    .billing {
      scroll-margin-top: 118px;
      padding: 80px 0 104px;
      background:
        linear-gradient(180deg, #fff 0%, #fff 58%, #f6f9fd 100%);
      text-align: center;
    }

    .billing-grid {
      display: flex;
      flex-direction: column;
      gap: 34px;
      align-items: center;
      justify-content: center;
      margin-bottom: 86px;
    }

    .billing .section-title,
    .billing .section-text {
      margin-right: auto;
      margin-left: auto;
    }

    .section-title {
      max-width: 780px;
      font-size: 42px;
      line-height: 1.14;
    }

    .section-text {
      max-width: 760px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.66;
    }

    .billing-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border-radius: 999px;
      background: #111827;
    }

    .billing-option {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 16px;
      border: 0;
      border-radius: 999px;
      color: #cbd5e1;
      background: transparent;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
    }

    .billing-option:hover,
    .billing-option:focus {
      color: var(--green);
    }

    .billing-option.active {
      color: #1f2937;
      background: #fff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
    }

    .billing-discount {
      padding: 2px 7px;
      border: 1px solid #86efac;
      border-radius: 6px;
      color: #15803d;
      background: #ecfdf5;
      font-size: 12px;
      font-weight: 700;
    }

    .plan-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      align-items: start;
    }

    .plan-card {
      position: relative;
      min-width: 0;
      border: 1px solid #dbe5f2;
      border-radius: 22px;
      background: #fff;
      text-align: left;
      overflow: hidden;
      box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .plan-card:hover {
      transform: translateY(-4px);
      border-color: #b6c7dc;
      box-shadow: 0 24px 58px rgba(15, 23, 42, .12);
    }

    .plan-card.is-featured {
      border: 2px solid var(--blue);
      transform: translateY(-8px);
      box-shadow: 0 22px 62px rgba(21, 114, 232, .17);
    }

    .plan-card.is-featured:hover {
      transform: translateY(-12px);
      box-shadow: 0 28px 74px rgba(21, 114, 232, .22);
    }

    .plan-card.is-dark {
      color: #fff;
      border-color: var(--dark);
      background: var(--dark);
      overflow: visible;
      box-shadow: 0 24px 64px rgba(7, 17, 31, .24);
    }

    .plan-tag {
      position: absolute;
      top: 16px;
      right: 18px;
      z-index: 2;
      padding: 7px 12px;
      border-radius: 999px;
      color: #fff;
      background: #f97316;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .plan-card.is-dark .plan-tag {
      color: #fff;
      background: #4e617b;
    }

    .plan-card.is-dark .plan-tag.is-offer {
      background: #dc3f22;
    }

    .plan-header {
      padding: 36px 32px 24px;
    }

    .plan-name {
      display: block;
      color: var(--ink);
      font-size: 28px;
      font-weight: 700;
      line-height: 1.2;
      margin: 0 0 6px;
    }

    .plan-card.is-dark .plan-name {
      color: #fff;
    }

    .plan-limit {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.45;
    }

    .plan-card.is-dark .plan-limit {
      color: #cbd5e1;
    }

    .plan-positioning {
      min-height: 96px;
      padding: 0 32px 26px;
      color: var(--ink);
      font-size: 17px;
      font-weight: 700;
      line-height: 1.36;
    }

    .plan-card.is-dark .plan-positioning {
      color: #fff;
    }

    .price-box {
      padding: 0 32px 30px;
    }

    .price-lead {
      margin-bottom: 10px;
      color: var(--ink);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.3;
    }

    .plan-card.is-dark .price-lead {
      color: #fff;
    }

    .price-current {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      min-height: 86px;
      color: var(--ink);
    }

    .plan-card.is-dark .price-current {
      color: #fff;
    }

    .price-currency {
      margin-top: 12px;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
    }

    .price-main {
      display: block;
      font-size: 72px;
      line-height: .98;
      font-weight: 700;
      letter-spacing: 0;
    }

    .price-cents {
      margin-top: 12px;
      font-size: 24px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: 0;
    }

    .price-period {
      margin-top: 8px;
      font-size: 16px;
      color: var(--muted);
      font-weight: 600;
    }

    .plan-card.is-dark .price-period {
      color: #cbd5e1;
    }

    .savings-box {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 14px;
      padding: 8px 12px;
      border: 1px solid #86efac;
      border-radius: 10px;
      color: #15803d;
      background: #ecfdf5;
      font-size: 14px;
      font-weight: 700;
    }

    .plan-card.is-dark .savings-box {
      color: #dcfce7;
      background: rgba(34, 197, 94, .14);
      border-color: rgba(134, 239, 172, .35);
    }

    .features {
      display: grid;
      gap: 14px;
      margin: auto 0 0;
      padding: 28px 32px;
      border-top: 1px solid #e5e7eb;
      border-bottom: 1px solid #e5e7eb;
      list-style: none;
    }

    .plan-card.is-dark .features {
      border-color: rgba(255, 255, 255, .12);
    }

    .feature {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 10px;
      align-items: start;
      color: #374151;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
    }

    .plan-card.is-dark .feature {
      color: #e5e7eb;
    }

    .feature i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      color: #31ce36;
      font-size: 16px;
      line-height: 1;
    }

    .plan-card.is-dark .feature i {
      color: #16c75e;
    }

    .feature.bad {
      color: #7b8796;
    }

    .feature.bad i {
      color: #ff584f;
    }

    .cta-area {
      padding: 30px 32px 22px;
    }

    .plan-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 52px;
      padding: 12px 18px;
      border: 0;
      border-radius: 45px;
      color: #fff;
      background: var(--blue);
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: filter .18s ease, transform .18s ease, background-position .34s ease;
    }

    .plan-button:hover,
    .plan-button:focus {
      color: #fff;
      filter: brightness(.95);
      transform: translateY(-1px);
    }

    .plan-button.secondary {
      color: var(--blue);
      border: 1px solid var(--blue);
      background: #fff;
    }

    .plan-card.is-dark .plan-button {
      color: var(--ink);
      background: #fff;
    }

    .plan-card.is-dark .plan-button:hover,
    .plan-card.is-dark .plan-button:focus {
      color: var(--ink);
    }

    .plan-note {
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.45;
      text-align: center;
    }

    .plan-card.is-dark .plan-note {
      color: #cbd5e1;
    }

    .refund-line {
      padding: 16px 30px 22px;
      color: var(--ink);
      background: #f9fafb;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

    .plan-card.is-dark .refund-line {
      color: #fff;
      background: rgba(255, 255, 255, .06);
    }

    .fit {
      padding: 84px 0;
      background: var(--soft);
      border-top: 1px solid #e1eaf5;
      border-bottom: 1px solid #e1eaf5;
    }

    .fit-grid {
      display: grid;
      grid-template-columns: .58fr 1fr;
      gap: 64px;
      align-items: start;
    }

    .fit-list {
      display: grid;
      gap: 14px;
    }

    .fit-item {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 18px;
      padding: 20px;
      border: 1px solid #dbe5f2;
      border-radius: 8px;
      background: #fff;
    }

    .fit-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      color: #fff;
      background: var(--dark);
      font-size: 18px;
      font-weight: 700;
    }

    .fit-item strong {
      display: block;
      color: var(--ink);
      font-size: 20px;
      font-weight: 600;
      line-height: 1.25;
    }

    .fit-item p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.58;
    }

    .faq {
      padding: 84px 0;
      background: var(--dark);
      color: #fff;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: .55fr 1fr;
      gap: 70px;
      align-items: start;
    }

    .faq h2 {
      color: #fff;
      font-size: 42px;
      line-height: 1.14;
    }

    .faq .section-text {
      color: #b8c4d6;
    }

    .faq-list {
      display: grid;
      gap: 12px;
    }

    details.faq-item {
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 68px;
      padding: 0 20px;
      color: #fff;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      list-style: none;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: "+";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      color: var(--dark);
      background: #fff;
      font-weight: 700;
    }

    .faq-item[open] summary::after {
      content: "-";
    }

    .faq-item p {
      margin: 0;
      padding: 0 20px 22px;
      color: #c8d2e1;
      font-size: 16px;
      line-height: 1.62;
    }

    .final-cta {
      position: relative;
      overflow: hidden;
      padding: 104px 0 108px;
      border-top: 1px solid #dbe5f2;
      background:
        linear-gradient(rgba(21, 114, 232, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 114, 232, .05) 1px, transparent 1px),
        radial-gradient(circle at 18% 100%, rgba(21, 114, 232, .14) 0%, rgba(21, 114, 232, .06) 24%, rgba(255, 255, 255, 0) 46%),
        radial-gradient(circle at 84% 100%, rgba(49, 206, 54, .12) 0%, rgba(49, 206, 54, .05) 22%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(0deg, rgba(245, 251, 255, .92) 0%, rgba(255, 255, 255, 0) 68%),
        #fff;
      background-size: 56px 56px, 56px 56px, auto, auto, auto, auto;
      text-align: center;
    }

    .final-content {
      max-width: 960px;
      margin: 0 auto;
    }

    .final-cta h2 {
      max-width: 900px;
      margin-right: auto;
      margin-left: auto;
      font-size: 42px;
      line-height: 1.14;
    }

    .final-cta p {
      max-width: 700px;
      margin: 18px auto 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.66;
    }

    .final-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }

    .final-actions .button {
      min-width: 218px;
    }

    @media (max-width: 1499.98px) {
      :root {
        --sb-pricing-shell: min(1520px, calc(100% - 120px));
      }

    }

    @media (max-width: 1099.98px) {
      :root {
        --sb-pricing-shell: calc(100% - 56px);
      }

      .hero {
        padding: 74px 0 58px;
      }

      .billing-grid,
      .fit-grid,
      .faq-grid {
        grid-template-columns: 1fr;
        gap: 38px;
      }

      .pricing-page h1 {
        max-width: 760px;
        font-size: 48px;
      }

      .section-title,
      .faq h2,
      .final-cta h2 {
        font-size: 36px;
      }

      .plan-grid {
        grid-template-columns: 1fr;
      }

      .hero-support {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .plan-positioning {
        min-height: auto;
      }

      .plan-card.is-featured,
      .plan-card.is-featured:hover {
        transform: none;
      }

    }

    @media (max-width: 699.98px) {
      :root {
        --sb-pricing-shell: calc(100% - 64px);
      }

      .hero {
        padding: 54px 0 44px;
      }

      .pricing-page h1 {
        font-size: 38px;
      }

      .lead {
        font-size: 18px;
      }

      .hero-actions {
        display: grid;
      }

      .button {
        width: 100%;
      }

      .hero-support {
        grid-template-columns: 1fr;
      }

      .final-actions {
        display: grid;
      }

      .fit-item {
        padding: 20px;
      }

      .billing,
      .fit,
      .faq,
      .final-cta {
        padding: 58px 0;
      }

      .section-title,
      .faq h2,
      .final-cta h2 {
        font-size: 31px;
      }

      .section-text {
        font-size: 17px;
      }

      .billing-toggle {
        width: auto;
        max-width: 100%;
        justify-content: center;
      }

      .price-text {
        font-size: 36px;
      }

      .fit-item {
        grid-template-columns: 1fr;
      }

      .fit-number {
        width: 48px;
        height: 48px;
      }

      .faq-item summary {
        min-height: 62px;
        font-size: 16px;
      }
    }

    @media (max-width: 419.98px) {
      :root {
        --sb-pricing-shell: calc(100% - 40px);
      }

      .pricing-page h1 {
        font-size: 34px;
      }

      .hero-proof {
        display: grid;
      }

    }