:root{
      --bg:#f6f7f7;
      --card:#ffffff;
      --card-soft:#fbfbfb;
      --line:#d8e3e0;
      --line-soft:#e8efed;
      --text:#1f2937;
      --muted:#667085;

      --teal:#0f766e;
      --teal-2:#0b8a81;
      --teal-soft:#e7f4f1;
      --teal-soft-2:#dff0eb;

      --gold:#efc96f;
      --gold-soft:#fff5e6;

      --green:#16a34a;
      --green-soft:#e9f8ee;

      --blue:#2563eb;
      --blue-soft:#eaf2ff;

      --gray-soft:#f3f4f6;

      --shadow:0 12px 34px rgba(16,24,40,.07);
      --shadow-soft:0 8px 20px rgba(16,24,40,.05);
      --transition:240ms cubic-bezier(.2,.8,.2,1);
    }

    *{ box-sizing:border-box; }
    *::before,*::after{ box-sizing:border-box; }

    html{
      scroll-behavior:smooth;
      overflow-x:hidden;
    }

    body{
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(15,118,110,.04) 0, rgba(15,118,110,0) 18%),
        radial-gradient(circle at bottom right, rgba(15,118,110,.03) 0, rgba(15,118,110,0) 16%),
        linear-gradient(180deg, #fafafa 0%, #f4f6f5 100%);
      overflow-x:hidden;
      max-width:100%;
    }

    .container{
      width:min(1280px, calc(100% - 24px));
      margin:34px auto 70px;
      overflow-x:hidden;
    }

    .hero{
      text-align:center;
      margin-bottom:28px;
    }

    .hero h1{
      margin:0 0 14px;
      font-size:clamp(30px, 4vw, 52px);
      line-height:1.04;
      letter-spacing:-0.04em;
      font-weight:800;
      color:#1b2430;
    }

    .hero p{
      margin:0;
      color:var(--muted);
      font-size:15px;
    }

    .billing-wrap{
      display:flex;
      justify-content:center;
      margin:22px 0 30px;
    }

    .billing-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px;
      border-radius:999px;
      background:#eef3f2;
      border:1px solid #dfe8e5;
      max-width:100%;
    }

    .billing-btn{
      border:none;
      background:transparent;
      color:#475467;
      padding:10px 18px;
      border-radius:999px;
      font-size:15px;
      font-weight:700;
      cursor:pointer;
      transition:all var(--transition);
      white-space:nowrap;
    }

    .billing-btn.active{
      background:#fff;
      color:#111827;
      box-shadow:0 4px 10px rgba(16,24,40,.08);
    }

    .pricing-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:16px;
      margin-bottom:26px;
    }

    body.subscription-plans-loading .subscription-main{
      min-height:calc(100vh - 220px);
    }

    body.subscription-plans-loading #topLoader{
      width:72%;
    }

    body.subscription-plans-loading .compare-btn{
      opacity:.65;
      cursor:wait;
      pointer-events:none;
    }

    .price-card{
      position:relative;
      background:linear-gradient(180deg, #fff 0%, #fcfdfd 100%);
      border:1.5px solid #cfe0dc;
      border-radius:22px;
      box-shadow:var(--shadow);
      padding:24px 20px 20px;
      min-height:470px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      overflow:hidden;
    }

    .price-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 44px rgba(16,24,40,.10);
      border-color:#b7d2cc;
    }

    .subscription-skeleton-card{
      min-height:470px;
      pointer-events:none;
      transform:none !important;
    }

    .skeleton-line,
    .skeleton-price,
    .skeleton-box,
    .skeleton-button,
    .skeleton-list span,
    .skeleton-pill{
      display:block;
      border-radius:999px;
      background:linear-gradient(90deg, #eef3f1 0%, #f8fbfa 45%, #eef3f1 90%);
      background-size:220% 100%;
      animation:subscriptionSkeleton 1.15s ease-in-out infinite;
    }

    .skeleton-line{ height:14px; width:100%; margin-bottom:14px; }
    .skeleton-line.short{ width:42%; }
    .skeleton-line.medium{ width:68%; }
    .skeleton-line.wide{ width:92%; }
    .skeleton-line.title{ width:min(360px, 76%); height:34px; margin:0 auto 12px; border-radius:14px; }
    .skeleton-line.center{ margin-left:auto; margin-right:auto; }
    .skeleton-price{ width:74%; height:54px; margin:22px 0 16px; border-radius:16px; }
    .skeleton-box{ width:100%; height:86px; margin:18px 0; border-radius:18px; }
    .skeleton-button{ width:100%; height:48px; border-radius:999px; }
    .skeleton-list{ display:grid; gap:12px; margin:20px 0 0; }
    .skeleton-list span{ height:13px; width:88%; }
    .skeleton-list span:nth-child(even){ width:72%; }
    .skeleton-pill{ width:150px; height:46px; flex:0 0 auto; border:0 !important; }
    .skeleton-pill.small{ width:128px; height:40px; }
    .skeleton-table-row td{ padding:16px 18px; }
    .skeleton-table-row .skeleton-line{ margin:0; height:13px; }
    .skeleton-mobile-card{ pointer-events:none; }

    @keyframes subscriptionSkeleton{
      0%{ background-position:120% 0; }
      100%{ background-position:-120% 0; }
    }

    .price-card.featured{
      border-color:var(--gold);
    }

    .featured-badge{
      position:absolute;
      top:14px;
      left:50%;
      transform:translateX(-50%);
      background:linear-gradient(135deg, #1c9a89, var(--teal));
      color:#fff;
      padding:10px 18px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      letter-spacing:.08em;
      box-shadow:0 12px 20px rgba(15,118,110,.18);
      white-space:nowrap;
    }

    .mini-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      align-self:flex-start;
      background:linear-gradient(135deg, #1c9a89, var(--teal));
      color:#fff;
      border-radius:999px;
      padding:6px 12px;
      font-size:12px;
      font-weight:800;
      margin-bottom:10px;
      white-space:nowrap;
    }

    .plan-head{ text-align:center; }

    .plan-head h3{
      margin:0;
      font-size:22px;
      font-weight:800;
      color:#17212b;
    }

    .price-line{
      margin:10px 0 10px;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      gap:3px;
      flex-wrap:wrap;
      min-height:58px;
    }

    .currency{
      font-size:20px;
      font-weight:800;
      line-height:1;
      margin-bottom:8px;
    }

    .amount{
      font-size:48px;
      line-height:.95;
      font-weight:800;
      letter-spacing:0;
      max-width:100%;
      overflow-wrap:anywhere;
    }

    .duration{
      font-size:16px;
      font-weight:700;
      color:#475467;
      margin-bottom:8px;
    }

    .price-line.price-medium .amount{ font-size:42px; }
    .price-line.price-medium .currency{ font-size:18px; }
    .price-line.price-long .amount{ font-size:36px; }
    .price-line.price-long .currency{ font-size:17px; }
    .price-line.price-xlong .amount{ font-size:31px; }
    .price-line.price-xlong .currency{ font-size:16px; }
    .price-line.price-long,
    .price-line.price-xlong{
      gap:4px;
      align-items:baseline;
    }

    .caption{
      min-height:20px;
      margin-bottom:16px;
      color:#667085;
      font-size:14px;
      text-align:center;
    }

    .discount-box{
      margin:0 auto 18px;
      width:100%;
      max-width:260px;
      border:1px solid #efdfbf;
      background:linear-gradient(180deg, #fffaf1 0%, #fff5e8 100%);
      border-radius:18px;
      padding:12px 14px;
      text-align:center;
    }

    .discount-label{
      font-size:11px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#9a6a22;
      font-weight:800;
      margin-bottom:4px;
    }

    .discount-value{
      font-size:28px;
      line-height:1;
      font-weight:800;
      color:#8a5a18;
    }

    .discount-sub{
      margin-top:6px;
      font-size:13px;
      color:#7b6b56;
    }

    .feature-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:12px;
    }

    .feature-list li{
      position:relative;
      padding-left:24px;
      font-size:15px;
      color:#24313b;
      line-height:1.45;
    }

    .feature-list li::before{
      content:"✓";
      position:absolute;
      left:0;
      top:0;
      color:var(--teal);
      font-weight:800;
    }

    .plan-footer{ margin-top:22px; }

    .btn{
      width:100%;
      min-height:54px;
      border:none;
      border-radius:999px;
      font-size:17px;
      font-weight:800;
      cursor:pointer;
      transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition);
    }

    .btn:hover{ transform:translateY(-2px); }

    .btn-primary{
      background:linear-gradient(135deg, var(--teal), var(--teal-2));
      color:#fff;
      box-shadow:0 12px 22px rgba(15,118,110,.18);
    }

    .btn-sm{
      width:auto;
      min-height:40px;
      padding:0 16px;
      font-size:14px;
      border-radius:999px;
    }

    .compare-wrap{
      display:flex;
      justify-content:center;
      margin-bottom:26px;
    }

    .compare-btn{
      min-width:min(380px,100%);
      min-height:58px;
      border:none;
      border-radius:999px;
      background:linear-gradient(135deg, var(--teal), var(--teal-2));
      color:#fff;
      font-size:20px;
      font-weight:800;
      cursor:pointer;
      box-shadow:0 16px 28px rgba(15,118,110,.18);
      padding:0 22px;
    }

    .module-tabs-wrap,
    .submodule-tabs-wrap{
      display:flex;
      justify-content:center;
      width:100%;
      overflow:hidden;
    }

    .module-tabs,
    .submodule-tabs{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:0;
      padding:4px;
      background:#fff;
      border:1.5px solid #dfe9e6;
      border-radius:999px;
      box-shadow:var(--shadow);
      max-width:100%;
      width:100%;
      overflow-x:auto;
      overflow-y:hidden;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }

    .module-tabs::-webkit-scrollbar,
    .submodule-tabs::-webkit-scrollbar{
      display:none;
    }

    .module-tabs{
      margin-bottom:18px;
    }

    .module-tab,
    .submodule-tab{
      border:none;
      background:transparent;
      color:#1f2937;
      padding:14px 22px;
      border-radius:0;
      white-space:nowrap;
      font-size:16px;
      font-weight:800;
      cursor:pointer;
      transition:all var(--transition);
      flex:1 0 auto;
      min-width:max-content;
      border-right:1px solid #e4ece9;
    }

    .submodule-tab{
      font-size:14px;
      padding:11px 20px;
    }

    .module-tab:last-child,
    .submodule-tab:last-child{
      border-right:none;
    }

    .module-tab:hover,
    .submodule-tab:hover{
      color:var(--teal);
      background:#f7fbfa;
    }

    .module-tab.active,
    .submodule-tab.active{
      background:linear-gradient(135deg, var(--teal-soft), #eef8f5);
      color:var(--teal);
      box-shadow:inset 0 0 0 1px #d5ebe5;
    }

    .module-tab:first-child{
      border-top-left-radius:999px;
      border-bottom-left-radius:999px;
    }

    .module-tab:last-child{
      border-top-right-radius:999px;
      border-bottom-right-radius:999px;
    }

    .submodule-tab:first-child{
      border-top-left-radius:999px;
      border-bottom-left-radius:999px;
    }

    .submodule-tab:last-child{
      border-top-right-radius:999px;
      border-bottom-right-radius:999px;
    }

    .comparison-card{
      background:#fff;
      border:1.5px solid #dfe9e6;
      border-radius:24px;
      overflow:hidden;
      box-shadow:var(--shadow);
      max-width:100%;
    }

    .comparison-header{
      padding:16px 22px 0;
      border-bottom:1px solid #edf2f1;
      background:#fff;
    }

    .module-title-center{
      text-align:center;
      padding:0 0 14px;
    }

    .module-title-center h2{
      margin:0;
      font-size:38px;
      line-height:1.06;
      letter-spacing:-0.04em;
      font-weight:900;
      color:#1c2633;
    }

    .module-title-center p{
      margin:8px 0 0;
      font-size:16px;
      color:#667085;
      font-weight:600;
    }

    .submodule-tabs-wrap{
      padding:0 0 14px;
    }

    .module-description{
      padding:16px 22px 18px;
      border-bottom:1px solid #edf2f1;
      background:#fff;
      font-size:17px;
      line-height:1.5;
      color:#344054;
      text-align:center;
      font-weight:600;
    }

    .table-wrap{
      overflow:auto;
      overflow-y:hidden;
      background:#fff;
      max-width:100%;
      width:100%;
    }

    .table-wrap::-webkit-scrollbar{
      height:10px;
      width:10px;
    }

    .table-wrap::-webkit-scrollbar-thumb{
      background:#cfd8d5;
      border-radius:999px;
    }

    table{
      width:100%;
      min-width:1120px;
      border-collapse:collapse;
    }

    thead th{
      padding:18px 14px;
      text-align:center;
      font-size:16px;
      font-weight:900;
      color:#17212b;
      border-right:1px solid #e7eeec;
      border-bottom:1px solid #e7eeec;
      background:#fcfdfd;
    }

    thead th:first-child{
      text-align:left;
      min-width:390px;
      background:#f9fbfb;
    }

    tbody td{
      padding:15px 14px;
      text-align:center;
      font-size:15px;
      color:#24313b;
      border-right:1px solid #e7eeec;
      border-bottom:1px solid #e7eeec;
      vertical-align:middle;
      background:#fff;
      font-weight:700;
    }

    tbody td:first-child{
      text-align:left;
      font-weight:800;
      color:#2d3c4f;
      background:#fbfcfc;
      width:390px;
    }

    tbody tr:nth-child(odd) td:first-child{
      background:#edf4f2;
    }

    .row-discount td{
      background:#fffdfa;
    }

    .row-discount td:first-child{
      background:#f7efe3;
      color:#8a5a18;
      font-weight:900;
    }

    .discount-plain{
      font-size:18px;
      font-weight:900;
      color:#8a5a18;
      line-height:1.2;
    }

    .discount-highlight{
      background:linear-gradient(180deg, #fff8ea 0%, #fff1d8 100%);
    }

    .discount-big{
      display:block;
      font-size:18px;
      font-weight:900;
      color:#8a5a18;
      line-height:1.2;
    }

    .discount-inline-note{
      font-size:14px;
      font-weight:800;
      color:#9a6a22;
    }

    .row-commission-parent td{
      background:linear-gradient(180deg, #f8fcfb 0%, #f1f8f6 100%);
    }

    .row-commission-parent td:first-child{
      background:linear-gradient(180deg, #e9f5f2 0%, #def0ea 100%);
      color:#17695f;
      font-weight:900;
    }

    .row-commission-child td{
      background:#fffdfa;
    }

    .row-commission-child td:first-child{
      padding-left:34px;
      font-weight:800;
      background:#fffaf5;
    }

    .row-commission-grandchild td{
      background:#fff;
    }

    .row-commission-grandchild td:first-child{
      padding-left:58px;
      font-weight:700;
      background:#fffdf9;
    }

    .row-date-override td{
      background:#fff7eb;
    }

    .row-date-override td:first-child{
      background:#fff1d8;
      color:#8a5a18;
    }

    .expandable-label{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .row-label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      position:relative;
      min-width:0;
      flex-wrap:wrap;
    }

    .tooltip-wrap{
      position:relative;
      display:inline-flex;
      align-items:center;
      vertical-align:middle;
    }

    .tooltip-icon{
      width:18px;
      height:18px;
      border:none;
      border-radius:999px;
      background:var(--teal-soft);
      color:var(--teal);
      font-size:11px;
      font-weight:900;
      display:inline-grid;
      place-items:center;
      cursor:pointer;
      padding:0;
      line-height:1;
    }

    .tooltip-box{
      position:absolute;
      left:24px;
      top:50%;
      transform:translateY(-50%);
      width:270px;
      background:#1f2937;
      color:#fff;
      font-size:12px;
      line-height:1.48;
      font-weight:600;
      padding:10px 12px;
      border-radius:12px;
      box-shadow:0 12px 24px rgba(16,24,40,.24);
      opacity:0;
      visibility:hidden;
      transition:all .18s ease;
      z-index:50;
      pointer-events:none;
      text-align:left;
    }

    .tooltip-wrap:hover .tooltip-box,
    .tooltip-wrap:focus-within .tooltip-box{
      opacity:1;
      visibility:visible;
    }

    .expand-btn{
      min-width:28px;
      height:28px;
      border:none;
      border-radius:10px;
      background:var(--teal-soft);
      color:var(--teal);
      font-size:18px;
      font-weight:900;
      cursor:pointer;
      display:inline-grid;
      place-items:center;
      padding:0;
      line-height:1;
      transition:transform var(--transition), background var(--transition);
      flex-shrink:0;
    }

    .expand-btn:hover{
      background:#d4f0ea;
      transform:translateY(-1px);
    }

    .promo-view-btn{
      min-height:38px;
      padding:0 14px;
      border:none;
      border-radius:999px;
      background:linear-gradient(135deg, var(--teal), var(--teal-2));
      color:#fff;
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      box-shadow:0 8px 16px rgba(15,118,110,.16);
      white-space:nowrap;
    }

    .commission-rate-with-promo{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      width:100%;
    }

    .commission-discounted-rate{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-width:0;
      line-height:1.15;
      white-space:nowrap;
    }

    .commission-original-rate{
      color:#1f2a44;
      display:inline-block;
      text-decoration:line-through;
      text-decoration-thickness:2px;
      text-decoration-color:#172033;
      opacity:.85;
    }

    .commission-final-rate{
      color:var(--teal);
      font-weight:900;
    }

    .commission-rate-with-promo .promo-view-btn{
      width:28px;
      min-width:28px;
      min-height:28px;
      height:28px;
      padding:0;
      font-size:12px;
      line-height:28px;
      box-shadow:none;
    }

    .promo-indicator-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:28px;
      min-width:28px;
      height:28px;
      border:1px solid var(--teal);
      border-radius:999px;
      background:#e8f5f2;
      color:var(--teal);
      font-size:12px;
      font-weight:900;
      line-height:1;
    }

    .mobile-comparison{
      display:none;
      padding:16px;
      background:#fff;
    }

    .accordion-item{
      border:1px solid #e2ece9;
      border-radius:18px;
      overflow:hidden;
      margin-bottom:12px;
      background:#fff;
      box-shadow:var(--shadow-soft);
    }

    .accordion-toggle{
      width:100%;
      border:none;
      background:#f7fbfa;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 16px;
      cursor:pointer;
      font-size:15px;
      font-weight:800;
      color:#1f2937;
    }

    .accordion-toggle.active{
      background:var(--teal-soft);
      color:var(--teal);
    }

    .accordion-chevron{
      width:28px;
      height:28px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:#fff;
      border:1px solid #dbe8e4;
      font-size:14px;
      transition:transform var(--transition);
      flex-shrink:0;
    }

    .accordion-toggle.active .accordion-chevron{
      transform:rotate(180deg);
    }

    .accordion-panel{
      height:0;
      overflow:hidden;
      transition:height 320ms ease;
      background:#fff;
    }

    .accordion-panel-inner{
      padding:12px;
    }

    .feature-card{
      background:#fff;
      border:1px solid #e5edeb;
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 8px 20px rgba(16,24,40,.05);
      margin-bottom:14px;
    }

    .feature-card:last-child{ margin-bottom:0; }

    .feature-card-header{
      padding:14px 16px;
      background:#eef7f5;
      border-bottom:1px solid #deebe7;
      font-size:15px;
      font-weight:800;
      color:#16333a;
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }

    .feature-card-header.commission{
      background:#f8efe3;
      color:#7b5a26;
    }

    .feature-card-body{
      display:grid;
      gap:10px;
      padding:12px;
    }

    .plan-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      border:1px solid #edf2f1;
      border-radius:14px;
      padding:12px 14px;
      background:#fafcfb;
    }

    .plan-row .label{
      min-width:82px;
      font-size:14px;
      font-weight:800;
      color:var(--teal);
    }

    .plan-row .value{
      flex:1;
      text-align:right;
      font-size:15px;
      line-height:1.45;
      color:#24313b;
      font-weight:800;
      min-width:0;
    }

    .plan-row.pro{
      background:#fffaf0;
      border-color:#f3dfaf;
    }

    .plan-row.business{
      background:#f5fbfa;
      border-color:#dcebe7;
    }

    .modal{
      position:fixed;
      inset:0;
      background:rgba(15,23,42,.45);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:2000;
    }

    .modal.open{
      display:flex;
    }

    .modal-card{
      width:min(1200px, 100%);
      max-height:min(92vh, 900px);
      background:#fff;
      border-radius:24px;
      box-shadow:0 30px 70px rgba(16,24,40,.28);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      max-width:100%;
    }

    .modal-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      padding:20px 22px;
      border-bottom:1px solid #edf2f1;
      background:#fff;
    }

    .modal-title-group h3{
      margin:0;
      font-size:28px;
      line-height:1.1;
      font-weight:900;
      color:#182230;
    }

    .modal-title-group p{
      margin:8px 0 0;
      color:#667085;
      font-size:14px;
      font-weight:600;
    }

    .modal-close{
      width:42px;
      height:42px;
      border:none;
      border-radius:12px;
      background:#f3f6f5;
      color:#344054;
      font-size:22px;
      font-weight:800;
      cursor:pointer;
      flex-shrink:0;
    }

    .modal-body{
      padding:18px 22px 22px;
      overflow:auto;
    }

    .promo-top{
      display:grid;
      grid-template-columns:1.15fr 1.2fr;
      gap:18px;
      margin-bottom:18px;
    }

    .promo-card{
      border:1px solid #e4ece9;
      border-radius:20px;
      background:#fff;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
    }

    .promo-card-head{
      padding:14px 16px;
      background:#f7fbfa;
      border-bottom:1px solid #e8efed;
      font-size:14px;
      font-weight:900;
      color:#344054;
      letter-spacing:.02em;
    }

    .promo-card-body{
      padding:16px;
    }

    .promo-main-title{
      margin:0 0 10px;
      font-size:22px;
      line-height:1.1;
      font-weight:900;
      color:#182230;
    }

    .promo-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }

    .promo-stat{
      border:1px solid #e7efed;
      border-radius:16px;
      background:#fbfcfc;
      padding:12px;
      min-width:0;
    }

    .promo-stat .label{
      display:block;
      font-size:12px;
      font-weight:800;
      color:#667085;
      text-transform:uppercase;
      letter-spacing:.06em;
      margin-bottom:6px;
    }

    .promo-stat .value{
      display:block;
      font-size:20px;
      font-weight:900;
      color:#182230;
      line-height:1.15;
      word-break:break-word;
    }

    .promo-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-top:14px;
      min-height:38px;
      padding:0 14px;
      border-radius:999px;
      background:var(--gold-soft);
      color:#9a6a22;
      border:1px solid #efd59f;
      font-size:13px;
      font-weight:900;
    }

    .calendar-card{
      border:1px solid #e4ece9;
      border-radius:20px;
      background:#fff;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      min-width:0;
    }

    .calendar-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:16px;
      border-bottom:1px solid #edf2f1;
      background:#fff;
      flex-wrap:wrap;
    }

    .calendar-head h4{
      margin:0;
      font-size:22px;
      font-weight:900;
      color:#182230;
    }

    .legend{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }

    .legend-item{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      font-weight:800;
      color:#475467;
    }

    .legend-dot{
      width:10px;
      height:10px;
      border-radius:999px;
      display:inline-block;
      flex-shrink:0;
    }

    .legend-dot.green{ background:var(--green); }
    .legend-dot.blue{ background:var(--blue); }
    .legend-dot.gray{ background:#c7ccd4; }

    .calendar-grid{
      padding:14px;
      display:grid;
      grid-template-columns:repeat(7, minmax(0,1fr));
      gap:8px;
    }

    .weekday{
      text-align:center;
      font-size:12px;
      font-weight:900;
      color:#667085;
      padding:6px 0;
      text-transform:uppercase;
      letter-spacing:.06em;
    }

    .day-cell{
      min-height:82px;
      border:1px solid #e7efed;
      border-radius:16px;
      background:#fafcfb;
      padding:8px;
      display:flex;
      flex-direction:column;
      gap:6px;
      align-items:flex-start;
      justify-content:flex-start;
      cursor:pointer;
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      min-width:0;
    }

    .day-cell:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 20px rgba(16,24,40,.08);
    }

    .day-cell.inactive{
      background:#f7f8f9;
      color:#98a2b3;
      cursor:default;
    }

    .day-cell.normal{
      background:#f8fafb;
    }

    .day-cell.active-promo{
      background:var(--green-soft);
      border-color:#b7e4c3;
    }

    .day-cell.upcoming-promo{
      background:var(--blue-soft);
      border-color:#c6d9ff;
    }

    .day-cell.selected{
      outline:2px solid var(--teal);
      outline-offset:-2px;
    }

    .day-number{
      font-size:14px;
      font-weight:900;
      color:#182230;
    }

    .day-tag{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:22px;
      padding:0 8px;
      border-radius:999px;
      font-size:11px;
      font-weight:900;
      letter-spacing:.04em;
      white-space:nowrap;
    }

    .day-tag.green{
      background:#ccefd8;
      color:#136c34;
    }

    .day-tag.blue{
      background:#d7e6ff;
      color:#1d4ed8;
    }

    .promo-bottom{
      display:grid;
      grid-template-columns:1.25fr .85fr;
      gap:18px;
      margin-top:18px;
    }

    .upcoming-list{
      border:1px solid #e4ece9;
      border-radius:20px;
      background:#fff;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      min-width:0;
    }

    .upcoming-head{
      padding:14px 16px;
      background:#f7fbfa;
      border-bottom:1px solid #e8efed;
      font-size:16px;
      font-weight:900;
      color:#182230;
    }

    .upcoming-items{
      padding:8px 10px 10px;
      display:grid;
      gap:10px;
    }

    .upcoming-item{
      border:1px solid #e7efed;
      border-radius:16px;
      padding:14px;
      background:#fbfcfc;
    }

    .upcoming-item h5{
      margin:0 0 6px;
      font-size:16px;
      font-weight:900;
      color:#182230;
    }

    .upcoming-item p{
      margin:0;
      font-size:13px;
      line-height:1.5;
      color:#475467;
      font-weight:600;
    }

    .side-panel{
      border:1px solid #e4ece9;
      border-radius:20px;
      background:#fff;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      min-width:0;
    }

    .side-panel-head{
      padding:14px 16px;
      background:#f7fbfa;
      border-bottom:1px solid #e8efed;
      font-size:16px;
      font-weight:900;
      color:#182230;
    }

    .side-panel-body{
      padding:16px;
      display:grid;
      gap:12px;
    }

    .side-detail{
      border:1px solid #e7efed;
      border-radius:16px;
      background:#fbfcfc;
      padding:12px;
    }

    .side-detail .label{
      display:block;
      font-size:12px;
      font-weight:800;
      color:#667085;
      text-transform:uppercase;
      letter-spacing:.06em;
      margin-bottom:6px;
    }

    .side-detail .value{
      display:block;
      font-size:18px;
      font-weight:900;
      color:#182230;
      line-height:1.25;
      word-break:break-word;
    }

    @media (max-width:1100px){
      .pricing-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }

      .promo-top,
      .promo-bottom{
        grid-template-columns:1fr;
      }
    }

    @media (max-width:768px){
      .container{
        width:min(100% - 16px, 1280px);
        margin:20px auto 48px;
      }

      .hero h1{ font-size:32px; }
      .pricing-grid{ grid-template-columns:1fr; }
      .price-card{ min-height:auto; }
      .amount{ font-size:42px; }
      .price-line.price-medium .amount{ font-size:38px; }
      .price-line.price-long .amount{ font-size:34px; }
      .price-line.price-xlong .amount{ font-size:30px; }
      .compare-btn{ width:100%; font-size:18px; }

      .module-tab{
        padding:12px 16px;
        font-size:15px;
      }

      .submodule-tab{
        padding:10px 16px;
        font-size:14px;
      }

      .comparison-header{
        padding:14px 16px 0;
      }

      .module-title-center h2{
        font-size:28px;
      }

      .module-description{
        padding:14px 18px 16px;
        font-size:16px;
      }

      .table-wrap{
        display:none;
      }

      .mobile-comparison{
        display:block;
      }

      .tooltip-box{
        width:220px;
        left:0;
        top:26px;
        transform:none;
      }

      .modal{
        padding:10px;
      }

      .modal-card{
        max-height:94vh;
        border-radius:18px;
      }

      .modal-head,
      .modal-body{
        padding-left:14px;
        padding-right:14px;
      }

      .calendar-grid{
        gap:6px;
        padding:10px;
      }

      .day-cell{
        min-height:72px;
        padding:6px;
      }

      .promo-grid{
        grid-template-columns:1fr;
      }
    }
  
#topLoader{position:fixed;top:0;left:0;height:4px;width:0;background:var(--gold);z-index:999999;transition:width .35s ease}.subscription-alert{display:none;margin:0 auto 18px;max-width:1280px;padding:13px 18px;border-radius:14px;font-weight:700}.subscription-alert.show{display:block}.subscription-alert.ok{background:#dcf8e7;color:#075f38}.subscription-alert.error{background:#ffe7e7;color:#9c1d1d}.wallet-strip{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:var(--shadow-soft);font-weight:800;color:var(--teal)}.wallet-strip span:first-child{color:var(--muted);font-weight:700}.btn[disabled]{opacity:.55;cursor:not-allowed}.page-loading{min-height:260px;display:grid;place-items:center;color:var(--muted);font-weight:700}.plan-footer{display:grid;gap:8px}.current-plan-note{font-size:12px;font-weight:800;color:var(--teal);text-align:center}.subscription-shell-actions{position:fixed;right:18px;top:18px;display:flex;gap:8px;z-index:50}.subscription-shell-actions .shell-btn{border:0;background:#2b2b2b;color:#fff;border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-soft)}.subscription-switch-modal{position:fixed;inset:0;z-index:99999;display:none;place-items:center;padding:18px;background:rgba(8,20,18,.55)}.subscription-switch-modal.open{display:grid}.subscription-switch-card{width:min(100%,620px);position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.24);padding:24px}.subscription-switch-close{position:absolute;right:16px;top:14px;width:36px;height:36px;border:0;border-radius:50%;background:#eef6f4;color:#2b2b2b;font-size:24px;line-height:1;cursor:pointer}.subscription-switch-card h3{margin:0 42px 16px 0;font-size:24px;font-weight:900}.subscription-switch-note{margin:0 0 14px;color:var(--muted);font-weight:700}.subscription-switch-rows{display:grid;border:1px solid var(--line);border-radius:14px;overflow:hidden}.subscription-switch-rows div{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:center}.subscription-switch-rows div:last-child{border-bottom:0}.subscription-switch-rows span{color:var(--muted);font-weight:700}.subscription-switch-rows strong{text-align:right;color:var(--ink);font-weight:900}.subscription-switch-error{margin-top:12px;padding:12px 14px;border-radius:12px;background:#ffe7e7;color:#9c1d1d;font-weight:800}.subscription-switch-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.subscription-switch-actions .btn{border:0;border-radius:999px;padding:12px 20px;font-weight:900}.subscription-switch-actions .btn-light{background:#eef6f4;color:#123}.subscription-switch-actions .btn-primary{background:var(--teal);color:#fff}.subscription-switch-rows.compact{margin-top:10px}.subscription-split-payment{margin-top:14px}.subscription-split-payment h4{margin:16px 0 10px;font-size:16px;font-weight:800}.subscription-gateway-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:12px}.subscription-gateway-card{display:flex;align-items:center;gap:10px;min-height:62px;padding:12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:#fff;font-weight:800}.subscription-gateway-card.selected{border-color:var(--teal);box-shadow:0 0 0 2px rgba(15,118,110,.08)}.subscription-gateway-card img{width:46px;height:30px;object-fit:contain}.subscription-gateway-card input{accent-color:var(--teal)}.subscription-gateway-fallback{width:34px;height:34px;border-radius:10px;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center}.subscription-payment-fees{border:1px solid var(--line);border-radius:12px;background:#fbfffd;padding:12px 14px}.subscription-payment-fees div{display:flex;justify-content:space-between;gap:16px;padding:4px 0}.subscription-payment-fees p{margin:8px 0 0;color:var(--muted);font-size:13px}.subscription-payment-otp{display:none;margin-top:12px}.subscription-payment-otp.show{display:block}.subscription-payment-otp label{display:block;margin-bottom:6px;font-weight:800}.subscription-payment-otp input{width:100%;min-height:46px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit}.subscription-payment-message{margin-top:10px;padding:10px 12px;border-radius:10px;background:#eaf2ff;color:#174078;font-weight:800}@media(max-width:720px){.subscription-shell-actions{position:static;justify-content:center;margin:12px auto 0}.wallet-strip{font-size:13px}.subscription-switch-card{padding:18px}.subscription-switch-actions{display:grid}.subscription-switch-rows div{display:grid;gap:4px}.subscription-switch-rows strong{text-align:left}}

.current-plan-dates{
  display:grid;
  gap:3px;
  padding:8px 10px;
  border:1px solid #d8e7e3;
  border-radius:12px;
  background:#f7fcfb;
  color:#65758a;
  font-size:11px;
  font-weight:800;
  line-height:1.35;
  text-align:center;
}

.subscription-checkout-main{
  width:min(100% - 48px,980px);
  max-width:980px;
  margin:34px auto 70px;
}
.subscription-checkout-card{
  background:#fff;
  border:1px solid #d9e8e4;
  border-radius:18px;
  box-shadow:0 18px 55px rgba(16,24,40,.12);
  overflow:hidden;
}
.subscription-checkout-head{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:flex-start;
  padding:28px 32px;
  border-bottom:1px solid #dbe9e5;
  background:linear-gradient(135deg,#06745f,#0c9b84);
  color:#fff;
}
.subscription-checkout-head h1{
  margin:0 0 7px;
  font-size:30px;
  line-height:1.15;
  font-weight:900;
  color:#fff;
}
.subscription-checkout-head p{
  margin:0;
  max-width:650px;
  color:rgba(255,255,255,.82);
  font-weight:800;
  line-height:1.45;
}
.subscription-checkout-back{
  width:42px;
  height:42px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:28px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.subscription-checkout-back:hover{background:rgba(255,255,255,.24)}
.subscription-checkout-body{
  padding:28px 32px 30px;
  background:#fff;
}
.subscription-checkout-body .subscription-switch-note{
  margin:0 0 18px;
  padding:14px 16px;
  border-left:4px solid var(--teal);
  border-radius:12px;
  background:#eef8f6;
  color:#3d5161;
  font-weight:800;
}
.subscription-checkout-body .subscription-switch-rows{
  border:1px solid #d8e7e3;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.subscription-checkout-body .subscription-switch-rows div{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(160px,auto);
  align-items:center;
  gap:18px;
  padding:13px 16px;
  border-bottom:1px solid #e6f0ed;
}
.subscription-checkout-body .subscription-switch-rows div:nth-child(even){background:#fbfdfc}
.subscription-checkout-body .subscription-switch-rows div:last-child{border-bottom:0}
.subscription-checkout-body .subscription-switch-rows span{
  color:#65758a;
  font-weight:800;
}
.subscription-checkout-body .subscription-switch-rows strong{
  color:#182230;
  font-weight:900;
  text-align:right;
}
.subscription-checkout-body .subscription-switch-error{
  margin:18px 0 14px;
  padding:14px 16px;
  border:1px solid #ffd5d5;
  border-radius:14px;
  background:#fff0f0;
  color:#9c1d1d;
  font-weight:900;
}
.subscription-split-payment h4{
  margin:22px 0 12px;
  color:#182230;
  font-size:17px;
  font-weight:900;
}
.subscription-gateway-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin-bottom:14px;
}
.subscription-gateway-card{
  min-height:72px;
  padding:15px 16px;
  border:1px solid #d8e7e3;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 22px rgba(16,24,40,.04);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.subscription-gateway-card:hover{
  border-color:#91c9be;
  transform:translateY(-1px);
}
.subscription-gateway-card.selected{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,137,119,.11),0 12px 24px rgba(16,24,40,.06);
}
.subscription-payment-fees{
  border:1px solid #d8e7e3;
  border-radius:14px;
  background:#f8fcfb;
  padding:16px;
}
.subscription-payment-fees div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:6px 0;
  color:#182230;
  font-weight:800;
}
.subscription-payment-fees strong{font-weight:900}
.subscription-payment-fees p{
  margin:10px 0 0;
  color:#65758a;
  font-size:13px;
  font-weight:800;
}
.subscription-payment-otp label{
  margin:16px 0 7px;
  color:#182230;
  font-weight:900;
}
.subscription-payment-otp input{
  min-height:52px;
  border:1px solid #d8e7e3;
  border-radius:14px;
  background:#fff;
}
.subscription-checkout-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:20px 32px;
  border-top:1px solid #dbe9e5;
  background:#f7fbfa;
  position:sticky;
  bottom:0;
}
.subscription-checkout-actions button{
  min-height:52px;
  border:0;
  border-radius:999px;
  padding:0 26px;
  font-weight:900;
  cursor:pointer;
  box-shadow:none;
}
.subscription-modal-cancel{
  background:#eaf5f2;
  color:#182230;
}
.subscription-modal-cancel:hover{background:#dcefeb}
.subscription-modal-confirm{
  background:var(--teal);
  color:#fff;
  box-shadow:0 14px 30px rgba(0,137,119,.22);
}
.subscription-modal-confirm:hover{filter:brightness(.96)}
.subscription-modal-confirm:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}
.btn-subscription-cancel{
  background:#fff;
  color:#9c1d1d;
  border:1px solid #f2b8b8;
  box-shadow:none;
}
.btn-subscription-cancel:hover{
  background:#fff1f1;
}
.btn-subscription-resume{
  background:#0f766e;
  color:#fff;
  border:1px solid rgba(15,118,110,.22);
  box-shadow:0 14px 28px rgba(15,118,110,.16);
}
.btn-subscription-resume:hover{
  filter:brightness(.96);
}
.subscription-switch-modal{
  position:absolute;
  top:0;
  right:0;
  bottom:auto;
  left:0;
  min-height:100dvh;
  overflow:visible;
  align-items:initial;
  -webkit-overflow-scrolling:touch;
}
.subscription-switch-modal.open{
  display:block;
}
.subscription-switch-card{
  max-height:none;
  display:block;
  overflow:visible;
  margin:24px auto;
}
.subscription-switch-body{
  min-height:initial;
  overflow:visible;
  padding-right:0;
}
.subscription-switch-actions{
  padding-top:12px;
  border-top:1px solid rgba(216,231,227,.9);
  background:#fff;
}
@media(max-width:720px){
  .subscription-switch-modal{
    padding:10px;
    min-height:100dvh;
  }
  .subscription-switch-card{
    max-height:none;
    width:100%;
    margin:10px auto;
  }
}
.cancel-plan-note{
  border:0;
  background:transparent;
  display:block;
  width:100%;
  padding:0;
  font-size:12px;
  font-weight:800;
  color:#9c6a00;
  text-align:center;
  line-height:1.35;
}
.cancel-plan-action{
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.cancel-plan-action:hover{
  color:#6b4700;
}
.subscription-cancel-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  place-items:center;
  padding:18px;
  background:rgba(12,24,22,.62);
  backdrop-filter:blur(4px);
}
.subscription-cancel-modal.open{
  display:grid;
}
.subscription-cancel-card{
  position:relative;
  width:min(100%,520px);
  border:1px solid rgba(15,118,110,.24);
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 90px rgba(0,0,0,.28);
  padding:26px;
}
.subscription-cancel-close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#eef6f4;
  color:#24313b;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.subscription-cancel-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#fff4e2;
  color:#9a6a22;
  border:1px solid #efdfbf;
  font-size:24px;
  font-weight:900;
  margin-bottom:14px;
}
.subscription-cancel-card h3{
  margin:0 42px 10px 0;
  color:#182230;
  font-size:28px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:0;
}
.subscription-cancel-copy{
  margin:0 0 16px;
  color:#667085;
  font-size:15px;
  line-height:1.5;
  font-weight:700;
}
.subscription-cancel-summary{
  display:grid;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fbfdfc;
}
.subscription-cancel-summary div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:13px 14px;
  border-bottom:1px solid var(--line);
}
.subscription-cancel-summary div:last-child{
  border-bottom:0;
}
.subscription-cancel-summary span{
  color:#667085;
  font-weight:800;
}
.subscription-cancel-summary strong{
  color:#182230;
  text-align:right;
  font-weight:900;
}
.subscription-cancel-actions{
  display:flex;
  gap:12px;
  margin-top:18px;
}
.subscription-cancel-actions button{
  flex:1;
  min-height:52px;
  border:0;
  border-radius:999px;
  padding:0 18px;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}
.subscription-cancel-secondary{
  background:#eef6f4;
  color:#182230;
}
.subscription-cancel-danger{
  background:linear-gradient(135deg, #0f766e, #0b8a81);
  color:#fff;
  box-shadow:0 14px 28px rgba(15,118,110,.20);
}
@media(max-width:720px){
  .subscription-checkout-main{
    width:min(100% - 16px,980px);
    margin-top:18px;
  }
  .subscription-checkout-head{
    padding:22px;
  }
  .subscription-checkout-head h1{font-size:26px}
  .subscription-checkout-body{padding:20px}
  .subscription-checkout-body .subscription-switch-rows div{
    grid-template-columns:1fr;
    gap:4px;
  }
  .subscription-checkout-body .subscription-switch-rows strong{text-align:left}
  .subscription-checkout-actions{
    display:grid;
    padding:16px;
    position:static;
  }
  .subscription-cancel-card{
    padding:20px;
  }
  .subscription-cancel-actions,
  .subscription-cancel-summary div{
    display:grid;
  }
  .subscription-cancel-summary strong{
    text-align:left;
  }
}

body:not(.subscription-data-ready) .subscription-main > :not(.js-page-skeleton) {
  display: none !important;
}

body:not(.subscription-data-ready) .subscription-main .js-page-skeleton {
  display: block !important;
  visibility: visible !important;
}

body.subscription-data-ready .subscription-main .js-page-skeleton {
  display: none !important;
}

.subscription-page-load-skeleton,
.subscription-page-load-skeleton * {
  box-sizing: border-box;
}

.sub-skel-line,
.sub-skel-pill,
.sub-skel-box,
.sub-skel-button,
.sub-skel-row span {
  display: block;
  border-radius: 999px;
  background: #dbe6e3;
  background-image: linear-gradient(90deg, #dbe6e3 0%, #f4f8f7 45%, #dbe6e3 90%);
  background-size: 220% 100%;
  animation: subSkeletonShimmer 1.2s linear infinite;
}

.sub-skel-hero,
.sub-skel-card,
.sub-skel-compare,
.sub-skel-table {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.sub-skel-hero {
  min-height: 219px;
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 34px 24px;
  margin-bottom: 30px;
  text-align: center;
}

.sub-skel-hero .title { width: min(560px, 82%); height: 32px; }
.sub-skel-hero .subtitle { width: min(480px, 72%); height: 16px; }
.sub-skel-hero .wallet { width: 190px; height: 38px; }
.sub-skel-toggle {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: #eef6f4;
}
.sub-skel-toggle .sub-skel-pill { width: 96px; height: 34px; background-color: #fff; }

.sub-skel-pricing {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.sub-skel-card {
  min-height: 470px;
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 16px;
}
.sub-skel-card .sub-skel-pill { width: 92px; height: 28px; }
.sub-skel-card .price { width: 120px; height: 42px; }
.sub-skel-card .sub-skel-line { width: 100%; height: 14px; }
.sub-skel-card .sub-skel-box { width: 100%; height: 88px; border-radius: 16px; }
.sub-skel-card .sub-skel-button { width: 100%; height: 46px; margin-top: auto; border-radius: 999px; background-color: var(--teal); }

.sub-skel-compare {
  padding: 22px;
}
.sub-skel-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 18px;
}
.sub-skel-tabs .sub-skel-pill { width: 120px; height: 38px; }
.sub-skel-table { padding: 20px; }
.sub-skel-table .head { width: 260px; height: 24px; margin: 0 auto 18px; }
.sub-skel-row {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 14px;
  min-height: 42px;
  align-items: center;
  border-top: 1px solid var(--line);
}
.sub-skel-row span { height: 13px; }

@keyframes subSkeletonShimmer {
  to { background-position: -220% 0; }
}

@media(max-width:1100px) {
  .sub-skel-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media(max-width:720px) {
  .sub-skel-pricing { grid-template-columns: 1fr; }
  .sub-skel-tabs { flex-wrap: wrap; }
  .sub-skel-row { grid-template-columns: 1.4fr 1fr 1fr; }
  .sub-skel-row span:nth-child(n+4) { display: none; }
}