@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --accent:#24584b;
  --accent-dark:#173c33;
  --accent-light:#e7f0ec;

  --warm-bg:#faf7f1;
  --warm-surface:#fffdf9;
  --warm-surface-2:#f4eee4;
  --warm-surface-3:#efe6d9;
  --warm-border:#e4d9c8;
  --warm-muted:#837766;

  --text-primary:#19211f;
  --text-secondary:#53605c;

  --bronze:#b87832;
  --shadow-sm:0 12px 34px rgba(33, 37, 34, 0.06);
  --shadow-md:0 18px 50px rgba(33, 37, 34, 0.10);

  --radius-lg:22px;
  --radius-md:16px;
}

.plans-page{
  background:
    radial-gradient(circle at top, rgba(36, 88, 75, 0.07), transparent 30%),
    linear-gradient(to bottom, #fbf9f5 0%, #f7f2ea 45%, #faf7f2 100%);
  color:var(--text-primary);
}

.plans-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem 1rem;
  border:1px solid rgba(36, 88, 75, 0.14);
  border-radius:999px;
  background:rgba(231, 240, 236, 0.9);
  color:var(--accent-dark);
  font:600 .82rem/1 "DM Sans", sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.plans-title{
  font-family:"Playfair Display", serif;
  font-size:clamp(2.2rem, 4vw, 3.8rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--text-primary);
}

.plans-subtitle{
  max-width:720px;
  margin-inline:auto;
  color:var(--text-secondary);
  font:500 1.04rem/1.8 "DM Sans", sans-serif;
}

.plans-grid-shell{
  padding:1.5rem;
  border:1px solid rgba(228, 217, 200, 0.8);
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}

.plan-card{
  position:relative;
  height:100%;
  border:1px solid rgba(228, 217, 200, 0.95);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, #fffdf9 0%, #f8f2e9 100%);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.plan-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, rgba(36,88,75,0.14), rgba(36,88,75,0.5), rgba(36,88,75,0.14));
  opacity:.9;
}

.plan-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-md);
  border-color:rgba(36, 88, 75, 0.2);
}

.plan-card-inner{
  position:relative;
  padding:2rem 1.75rem 1.75rem;
  display:flex;
  flex-direction:column;
  height:100%;
}

.plan-top{
  margin-bottom:1.4rem;
}

.plan-tag{
  display:inline-block;
  padding:.48rem .9rem;
  border-radius:999px;
  background:#f1e9dd;
  border:1px solid #e2d6c6;
  color:var(--accent-dark);
  font:700 .78rem/1 "DM Sans", sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  max-width:100%;
}

.plan-tag-featured{
  background:#deebe5;
  border-color:rgba(36, 88, 75, 0.16);
}

.plan-name{
  font-family:"Playfair Display", serif;
  font-size:1.85rem;
  line-height:1.1;
  color:var(--text-primary);
}

.plan-text{
  color:var(--text-secondary);
  font:500 .98rem/1.7 "DM Sans", sans-serif;
}

.plan-price-wrap{
  padding:1.15rem 0 1.35rem;
  border-top:1px solid rgba(228, 217, 200, 0.85);
  border-bottom:1px solid rgba(228, 217, 200, 0.85);
  margin-bottom:1.35rem;
}

.plan-price{
  font-family:"Playfair Display", serif;
  font-size:2.7rem;
  line-height:1;
  color:var(--text-primary);
  letter-spacing:-0.03em;
}

.plan-price-custom{
  font-size:2.25rem;
}

.plan-period{
  margin-top:.4rem;
  color:var(--warm-muted);
  font:600 .95rem/1.5 "DM Sans", sans-serif;
}

.plan-saving{
  margin-top:.55rem;
  color:var(--accent);
  font:700 .88rem/1.5 "DM Sans", sans-serif;
}

.plan-features{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.plan-features li{
  position:relative;
  display:block;
  padding-left:1.8rem;
  color:var(--text-secondary);
  font:500 .95rem/1.6 "DM Sans", sans-serif;
}

.plan-features li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55rem;
  width:.7rem;
  height:.7rem;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(36, 88, 75, 0.10);
}

.plan-card-featured{
  border-color:rgba(36, 88, 75, 0.18);
  background:linear-gradient(180deg, #f2f7f4 0%, #e8f0ec 100%);
  box-shadow:0 16px 40px rgba(23, 60, 51, 0.10);
}

.plan-card-featured::before{
  height:5px;
  background:linear-gradient(90deg, rgba(36,88,75,0.18), var(--accent), rgba(36,88,75,0.18));
}

.plan-card-featured .plan-top{
  padding-top:0;
}

.plan-popular{
  position:absolute;
  top:1.2rem;
  right:1.2rem;
  z-index:3;
  padding:.55rem 1rem;
  border-radius:999px;
  background:var(--accent-dark);
  color:#fff;
  font:700 .74rem/1 "DM Sans", sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 12px 28px rgba(23, 60, 51, 0.22);
  white-space:nowrap;
}

.plan-btn{
  min-height:52px;
  border-radius:999px;
  font:700 .96rem/1 "DM Sans", sans-serif;
  letter-spacing:.01em;
  transition:
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1.25rem;
}

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

.plan-btn-solid{
  background:var(--accent);
  border:1px solid var(--accent);
  color:#fff;
}

.plan-btn-solid:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
  color:#fff;
  box-shadow:0 14px 26px rgba(23, 60, 51, 0.18);
}

.plan-btn-dark{
  background:#1c2724;
  border:1px solid #1c2724;
  color:#fff;
}

.plan-btn-dark:hover{
  background:#121816;
  border-color:#121816;
  color:#fff;
  box-shadow:0 14px 26px rgba(18, 24, 22, 0.18);
}

.plan-btn-outline{
  background:transparent;
  border:1px solid rgba(36, 88, 75, 0.34);
  color:var(--accent-dark);
}

.plan-btn-outline:hover{
  background:var(--accent-light);
  border-color:rgba(36, 88, 75, 0.44);
  color:var(--accent-dark);
}

.plan-btn-disabled{
  background:#f1eee8;
  border:1px solid #d7d0c3;
  color:#8a8174;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
}

.plan-btn-disabled:hover{
  transform:none;
  background:#f1eee8;
  border-color:#d7d0c3;
  color:#8a8174;
}

.plan-btn-outline-dark{
  background:transparent;
  border:1px solid rgba(25, 33, 31, 0.18);
  color:var(--text-primary);
}

.plan-btn-outline-dark:hover{
  background:#f4eee4;
  border-color:rgba(25, 33, 31, 0.28);
  color:var(--text-primary);
}

.plans-info-box{
  padding:2rem;
  border:1px solid rgba(228, 217, 200, 0.9);
  border-radius:28px;
  background:linear-gradient(135deg, #fdf9f2, #f2eadf);
  box-shadow:0 10px 28px rgba(33, 37, 34, 0.05);
}

.plans-info-label{
  display:inline-block;
  color:var(--accent-dark);
  font:700 .82rem/1 "DM Sans", sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.plans-info-title{
  font-family:"Playfair Display", serif;
  font-size:clamp(1.6rem, 2.5vw, 2.2rem);
  line-height:1.15;
  color:var(--text-primary);
}

.plans-info-steps{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.plans-step{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1rem 1.1rem;
  border:1px solid rgba(233, 224, 211, 0.9);
  border-radius:18px;
  background:rgba(255,255,255,0.6);
}

.plans-step-number{
  flex:0 0 auto;
  min-width:2.2rem;
  height:2.2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--accent-light);
  color:var(--accent-dark);
  font:700 .82rem/1 "DM Sans", sans-serif;
}

.plans-step p{
  color:var(--text-secondary);
  font:500 .96rem/1.65 "DM Sans", sans-serif;
}

.plans-note{
  color:var(--warm-muted);
  font:500 .94rem/1.7 "DM Sans", sans-serif;
}

.plan-card form{
  margin:0;
}

@media (max-width: 1199.98px){
  .plan-card-featured .plan-top{
    padding-top:0;
  }
}

@media (max-width: 991.98px){
  .plan-card-inner{
    padding:1.5rem;
  }

  .plans-grid-shell{
    padding:1rem;
  }

  .plans-info-box{
    padding:1.5rem;
  }

  .plan-card-featured .plan-top{
    padding-top:0;
  }
}

@media (max-width: 767.98px){
  .plans-page{
    padding-top:1rem;
  }

  .plans-title{
    font-size:clamp(2rem, 9vw, 2.8rem);
  }

  .plans-subtitle{
    font-size:.98rem;
    line-height:1.7;
  }

  .plan-price{
    font-size:2.35rem;
  }

  .plan-popular{
    top:1rem;
    right:1rem;
    font-size:.66rem;
    padding:.45rem .8rem;
  }

  .plan-card-featured .plan-top{
    padding-top:0;
  }
}