:root{
      --bg:#000;
      --cardTopRed:#e53935;
      --cardTopGreen:#10a64a;
      --text:#fff;
      --ring:rgba(255,255,255,.85);
    }

    *{box-sizing:border-box;}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    }

    .plans{
      background:url("../images/plan-background.jpg") center / cover no-repeat;
      padding:64px 16px;
      position:relative;
      isolation:isolate;
    }

    .plans::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.82) 100%);
      z-index:-1;
    }
    .plans__wrap{max-width:1100px;margin:0 auto;}
    .plans__heading{
      margin:0 0 8px;
      font-size:34px;
      letter-spacing:.2px;
      text-align:center;
    }
    .plans__sub{
      margin:0 auto 28px;
      max-width:720px;
      text-align:center;
      color:rgba(255,255,255,.75);
      line-height:1.5;
      font-size:15px;
    }

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

    .features{
      margin-top:28px;
      display:grid;
      grid-template-columns:1.5fr 1fr;
      gap:22px;
      align-items:start;
    }

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

    .tile{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
    }

    .tile__imgWrap{
      width:100%;
      border-radius:18px;
      overflow:hidden;
      border:3px solid rgba(255,255,255,.75);
      box-shadow:0 16px 35px rgba(0,0,0,.55);
      background:rgba(0,0,0,.25);
      aspect-ratio: 16 / 9;
    }

    .tile__img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      filter:saturate(1.05) contrast(1.05);
    }

    .tile__label{
      font-size:22px;
      font-weight:900;
      text-shadow:0 10px 20px rgba(0,0,0,.65);
      letter-spacing:.2px;
      text-align:center;
    }

    .benefits{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.18);
      background:linear-gradient(180deg, rgba(26,26,32,.78) 0%, rgba(12,12,16,.82) 100%);
      box-shadow:0 18px 45px rgba(0,0,0,.6);
      overflow:hidden;
    }

    .benefits__top{
      padding:16px 16px;
      font-weight:900;
      font-size:22px;
      line-height:1.25;
      font-style:italic;
      background:rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.12);
    }

    .benefits__body{padding:14px 16px 16px;}

    .benefits__title{
      display:inline-block;
      padding:10px 12px;
      border-radius:12px;
      background:rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.14);
      font-weight:900;
      font-style:italic;
      margin-bottom:12px;
    }

    .benefits__list{margin:0; padding-left:18px;}

    .benefits__list li{
      margin:10px 0;
      padding:10px 12px;
      list-style:decimal;
      border-radius:12px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      font-style:italic;
      color:rgba(255,255,255,.9);
    }

    .plan{
      border-radius:14px;
      background:linear-gradient(180deg,#1c1c20 0%, #131317 100%);
      border:2px solid rgba(255,255,255,.18);
      box-shadow:0 18px 40px rgba(0,0,0,.55);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      cursor:pointer;
      transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .plan:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.28);
    }

    .plan.is-selected{
      border-color:var(--ring);
      box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 3px rgba(255,255,255,.22);
    }

    .plan__title{
      padding:14px 18px;
      font-weight:800;
      text-align:center;
      font-size:22px;
      border-bottom:2px solid rgba(0,0,0,.22);
    }
    .plan--red .plan__title{background:var(--cardTopRed);}
    .plan--green .plan__title{background:var(--cardTopGreen);}

    .plan__body{padding:16px 18px 10px; flex:1;}

    .plan__top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }

    .plan__bullets{
      flex:1;
    }

    .plan__selectBtn{
      appearance:none;
      border:2px solid rgba(255,255,255,.85);
      background:transparent;
      color:#fff;
      border-radius:12px;
      padding:10px 16px;
      font-weight:800;
      font-size:14px;
      line-height:1;
      cursor:pointer;
      box-shadow:0 10px 20px rgba(0,0,0,.25);
      transition:background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
      white-space:nowrap;
      user-select:none;
    }

    .plan__selectBtn:hover{transform:translateY(-1px);}

    .plan.is-selected .plan__selectBtn{
      background:#fff;
      color:#111;
      border-color:#fff;
    }

    .plan__bullets{
      margin:0 0 14px 18px;
      padding:0;
      color:rgba(255,255,255,.9);
      line-height:1.55;
      font-size:15px;
    }

    .plan__table{
      background:rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.14);
      border-radius:12px;
      overflow:hidden;
    }
    .pt{
      display:grid;
      grid-template-columns:1.2fr .9fr .9fr .9fr 1fr;
      gap:10px;
      padding:10px 12px;
      font-size:13px;
      color:rgba(255,255,255,.9);
    }
    .pt:not(.pt--head){border-top:1px solid rgba(255,255,255,.1);}
    .pt--head{
      font-weight:700;
      color:rgba(255,255,255,.85);
      background:rgba(255,255,255,.06);
      font-size:12.5px;
      text-transform:uppercase;
      letter-spacing:.6px;
    }
    .pt span:first-child{font-weight:700;color:#fff;}

    .plan__note{
      margin-top:12px;
      padding:12px 12px;
      border-radius:12px;
      border:1px dashed rgba(255,255,255,.22);
      color:rgba(255,255,255,.8);
      font-size:14px;
      line-height:1.5;
    }

    .plan__fee{
      padding:12px 18px;
      text-align:center;
      font-weight:800;
      font-size:20px;
      border-top:2px solid rgba(255,255,255,.14);
      margin-top:auto;
    }
    .plan--red .plan__fee{background:var(--cardTopRed);}
    .plan--green .plan__fee{background:var(--cardTopGreen);}

    .modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding:24px 16px;
      background:rgba(0,0,0,.72);
      backdrop-filter:blur(6px);
      z-index:9999;
    }

    .modal.is-open{display:flex;}

    .modal__dialog{
      width:min(720px, 100%);
      border-radius:18px;
      background:linear-gradient(180deg, rgba(35,35,42,.98) 0%, rgba(18,18,22,.98) 100%);
      border:1px solid rgba(255,255,255,.16);
      box-shadow:0 30px 80px rgba(0,0,0,.65);
      overflow:hidden;
      position:relative;
    }

    .modal__header{
      padding:18px 18px;
      border-bottom:1px solid rgba(255,255,255,.12);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }

    .modal__title{
      margin:0;
      font-size:18px;
      font-weight:900;
      letter-spacing:.2px;
    }

    .modal__subtitle{
      margin:6px 0 0;
      color:rgba(255,255,255,.72);
      font-size:13px;
      line-height:1.45;
    }

    .modal__close{
      appearance:none;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.16);
      color:#fff;
      border-radius:12px;
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      font-size:18px;
      font-weight:900;
      cursor:pointer;
    }

    .modal__body{padding:18px;}

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

    .field{display:flex; flex-direction:column; gap:6px;}
    .field--full{grid-column:1/-1;}

    .label{font-size:12.5px; color:rgba(255,255,255,.78); font-weight:800; letter-spacing:.3px;}
    .input, .textarea{
      width:100%;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.35);
      color:#fff;
      padding:12px 12px;
      outline:none;
      font-size:14px;
    }
    .textarea{min-height:110px; resize:vertical;}

    .modal__footer{
      padding:14px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-top:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
    }

    .selectedPlanBadge{
      font-size:13px;
      color:rgba(255,255,255,.8);
      font-weight:800;
    }

    .submitBtn{
      appearance:none;
      border:none;
      border-radius:12px;
      padding:12px 16px;
      font-weight:900;
      cursor:pointer;
      color:#111;
      background:#fff;
    }

    @media (max-width: 520px){
      .plan__top{gap:10px;}
      .plan__selectBtn{padding:9px 12px; font-size:13px; border-radius:10px;}

      .modal{padding:0;}
      .modal__dialog{
        width:100%;
        height:100%;
        border-radius:0;
      }
      .modal__body{padding:16px; overflow:auto; max-height:calc(100vh - 64px - 64px);}
      .form{grid-template-columns:1fr;}
      .textarea{min-height:140px;}
    }

    @media (max-width: 920px){
      .plans__grid{grid-template-columns:1fr;}
      .features{grid-template-columns:1fr;}
    }
    @media (max-width: 520px){
      .plans{padding:48px 14px; background-position:center top;}
      .plans::before{background:rgba(0,0,0,.7);}
      .plan__title{font-size:20px;}
      .plan__body{padding:14px 14px 10px;}
      .plan__bullets{font-size:14px;margin-left:16px;}

      .pt--head{display:none;}

      .pt{
        display:block;
        padding:10px 12px;
      }

      .pt span{
        display:block;
        padding:2px 0;
      }

      .pt span:first-child{
        font-size:14px;
        padding-bottom:6px;
      }

      .pt span:nth-child(2)::before{content:"1 Month: "; color:rgba(255,255,255,.72); font-weight:700;}
      .pt span:nth-child(3)::before{content:"3 Months: "; color:rgba(255,255,255,.72); font-weight:700;}
      .pt span:nth-child(4)::before{content:"6 Months: "; color:rgba(255,255,255,.72); font-weight:700;}
      .pt span:nth-child(5)::before{content:"Total Class: "; color:rgba(255,255,255,.72); font-weight:700;}

      .features{margin-top:22px;}
      .featureTiles{grid-template-columns:1fr;}
      .tile__label{font-size:20px;}
      .benefits__top{font-size:18px;}
    }