@layer dn-product-theme {
  html body #renewCheckout {position:fixed!important;inset:0!important;z-index:2147483000!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:24px!important;background:rgba(15,23,42,.48)!important;backdrop-filter:blur(4px);}
  html body #renewCheckout.hidden {display:none!important;}
  html body.renew-checkout-open {overflow:hidden!important;}
  html body #renewCheckout .renew-checkout-panel {box-sizing:border-box!important;width:min(620px,100%)!important;max-height:calc(100dvh - 48px)!important;overflow:auto!important;background:#fff!important;color:#172033!important;border:1px solid #dfe5ee!important;border-radius:22px!important;padding:26px!important;box-shadow:0 24px 80px #0004!important;}
  html body #renewCheckout .renew-checkout-head {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin:0 0 12px!important;}
  html body #renewCheckout .renew-checkout-head h2 {font-size:22px!important;color:#172033!important;}
  html body #closeRenewCheckout {width:34px!important;height:34px!important;border:0!important;background:transparent!important;color:#172033!important;font-size:26px!important;cursor:pointer;}
  html body #renewCheckout .renew-checkout-plan {margin:0 0 22px!important;color:#465870!important;font-size:16px!important;}
  html body #renewCheckout .renew-grid {gap:12px!important;margin:12px 0!important;}
  html body #renewCheckout label {display:block!important;margin:12px 0 6px!important;}
  html body #renewCheckout .renew-order-actions {position:static!important;margin:20px 0 0!important;padding:0!important;background:transparent!important;border:0!important;}
  html body #renewCheckout #renewMsg:not(:empty) {margin-top:14px!important;}
  @media(max-width:640px){html body #renewCheckout{padding:12px!important;}html body #renewCheckout .renew-checkout-panel{padding:20px!important;max-height:calc(100dvh - 24px)!important;}}
  html body #renewModal.sw-inline-renew #renewPackages.port-packages,
  html body #renewModal #renewPackages.port-packages {
    display: grid !important;
    width: 100%;
    max-width: 1237px;
    grid-template-columns: repeat(3, minmax(0, 384px)) !important;
    justify-content: center;
    align-items: stretch !important;
    gap: 22px !important;
    margin: 16px auto 22px !important;
  }

  .renew-tier {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 733px;
    flex-direction: column;
    padding: 28px !important;
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 23px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.06);
    color: #111;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .renew-tier:hover,
  .renew-tier:focus-within,
  .renew-tier.active {
    transform: none;
    border-color: #3a83f6;
    background: linear-gradient(180deg, #fff 0%, #edf5ff 100%);
    box-shadow: 0 18px 42px rgba(58, 131, 246, .15);
  }

  .renew-tier-head { min-height: 174px; }
  .renew-tier-name {
    font-family: "Microsoft Sans Serif", "Segoe UI", sans-serif;
    font-size: 20px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: .08em;
    text-align: left;
  }
  .renew-tier-badge {
    position: absolute;
    top: 20px;
    right: 22px;
    padding: 3px 7px;
    border-radius: 8px;
    background: #e2f7fa;
    color: #3a83f6;
    font-size: 12px;
    font-weight: 800;
  }
  .renew-tier-head h3 {
    margin: 30px 0 0 !important;
    color: #111;
    font-size: 24px;
    line-height: 1.25;
    white-space: normal;
  }
  .renew-tier-head h3 span { color: #3a83f6; }
  .renew-tier-head p {
    margin: 14px 0 0 !important;
    color: #555 !important;
    font-size: 16px !important;
    line-height: 1.6;
  }

  html body #renewModal.sw-inline-renew #renewPackages .port-package.renew-tier-cta,
  html body #renewModal #renewPackages .port-package.renew-tier-cta {
    display: flex;
    width: 100%;
    min-height: 43px !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    box-shadow: none;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  }
  html body #renewModal #renewPackages .renew-tier:hover .renew-tier-cta,
  html body #renewModal #renewPackages .renew-tier:focus-within .renew-tier-cta,
  html body #renewModal #renewPackages .renew-tier.active .renew-tier-cta {
    transform: translateY(-1px);
    background: #3a83f6 !important;
    box-shadow: 0 10px 22px rgba(58, 131, 246, .24);
  }
  html body #renewModal #renewPackages .renew-tier-star {
    display: none !important;
    margin: 0 !important;
    color: #fff !important;
    background: transparent !important;
    font-size: 22px !important;
    line-height: 1;
  }
  html body #renewModal #renewPackages .renew-tier-cta[aria-pressed="true"] .renew-tier-star { display: inline !important; }

  .renew-tier-price {
    margin: 28px 0 0 !important;
    color: #000;
    font-family: "Microsoft Sans Serif", "Segoe UI", sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .02em;
  }
  html body #renewModal .renew-tier-price small { font-size: 18px !important; vertical-align: super; }
  html body #renewModal .renew-tier-price em { font-size: 16px !important; font-style: normal; color: #555 !important; margin-left: 6px !important; }
  .renew-tier-features {
    display: grid;
    gap: 18px;
    margin: 26px 0 0 !important;
    padding: 0 !important;
    color: #222 !important;
    font-size: 16px !important;
    line-height: 1.6;
    list-style: none;
  }
  .renew-tier-features li:last-child { color: #3a83f6; }
  .renew-tier-plus .renew-tier-features li:last-child { color: #585858; }

  html body #renewModal:not(.sw-inline-renew) .port-packages { grid-template-columns: 1fr !important; }
  html body #renewModal:not(.sw-inline-renew) .renew-tier { min-height: 0; }

  @media (max-width: 1180px) {
    html body #renewModal.sw-inline-renew #renewPackages.port-packages,
    html body #renewModal #renewPackages.port-packages {
      grid-template-columns: 1fr !important;
      max-width: 680px;
    }
    .renew-tier { min-height: 0; }
  }

  @media (max-width: 640px) {
    .renew-tier { padding: 24px !important; border-radius: 18px; }
    .renew-tier-name { font-size: 20px; }
    .renew-tier-head { min-height: 0; margin-bottom: 22px; }
    .renew-tier-head h3 { font-size: 22px; white-space: normal; }
    .renew-tier-price,
    .renew-tier-price em { font-size: 34px; }
    .renew-tier-features { gap: 13px; }
  }
}