.checkout-main{ padding:150px 0 100px; }
.checkout-container{ max-width:760px; }

.checkout-intro{ text-align:center; margin-bottom:48px; }
.checkout-intro h1{ font-size:clamp(32px,5vw,46px); margin-bottom:18px; }
.checkout-intro .lead{ margin:0 auto; }

/* Step indicator */
.checkout-steps{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:40px;
}
.checkout-step{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-head); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-dim-2);
}
.checkout-step-num{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-dim);
  transition:all .3s ease;
}
.checkout-step.active{ color:var(--text); }
.checkout-step.active .checkout-step-num{ border-color:var(--gold); color:var(--gold-light); background:rgba(198,161,91,0.1); }
.checkout-step.done .checkout-step-num{ border-color:var(--gold); color:var(--gold); }
.checkout-step.done{ color:var(--text-dim); }
.checkout-step-line{ width:40px; height:1px; background:var(--border); }

/* Card / panels */
.checkout-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:44px;
}
.checkout-panel{ display:none; }
.checkout-panel.active{ display:block; }
.checkout-panel-title{ font-size:22px; margin-bottom:28px; }

.checkout-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.checkout-note{ font-size:13px; color:var(--text-dim-2); margin:20px 0 0; }

.checkout-actions{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:34px; padding-top:28px; border-top:1px solid var(--border);
}

/* Plan cards */
.plan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.plan-option{ display:block; cursor:pointer; }
.plan-option input{ position:absolute; opacity:0; pointer-events:none; }
.plan-card{
  position:relative; display:flex; flex-direction:column; gap:6px;
  border:1px solid var(--border); border-radius:8px; padding:22px 20px;
  transition:border-color .25s ease, background .25s ease;
}
.plan-option input:checked + .plan-card{
  border-color:var(--gold); background:rgba(198,161,91,0.06);
}
.plan-option:hover .plan-card{ border-color:var(--border-hover); }
.plan-card.featured{ border-color:rgba(198,161,91,0.35); }
.plan-tag{
  position:absolute; top:-11px; left:18px; background:var(--gold); color:#1A1408;
  font-family:var(--ff-head); font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; font-weight:600;
}
.plan-name{ font-family:var(--ff-head); font-size:14.5px; text-transform:uppercase; letter-spacing:0.02em; }
.plan-price{ font-family:var(--ff-head); font-size:24px; color:var(--gold-light); }
.plan-price small{ font-family:var(--ff-body); font-size:11px; color:var(--text-dim); text-transform:lowercase; margin-left:4px; }
.plan-desc{ font-size:12.5px; color:var(--text-dim); font-weight:300; }

/* Recap */
.checkout-recap{ display:flex; flex-direction:column; gap:0; }
.recap-row{
  display:flex; justify-content:space-between; gap:24px;
  padding:14px 0; border-bottom:1px solid var(--border);
  font-size:14px;
}
.recap-row:last-child{ border-bottom:none; }
.recap-label{ color:var(--text-dim); font-family:var(--ff-head); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; flex-shrink:0; }
.recap-value{ color:var(--text); text-align:right; }

/* Success */
.checkout-success{ text-align:center; padding:64px 44px; }
.checkout-success-icon{
  width:64px; height:64px; border-radius:50%; background:rgba(198,161,91,0.12);
  border:1px solid var(--gold); color:var(--gold-light); font-size:28px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
}
.checkout-success h2{ font-size:26px; margin-bottom:14px; }
.checkout-success p{ color:var(--text-dim); font-size:15px; line-height:1.7; max-width:420px; margin:0 auto 30px; }

@media (max-width: 620px){
  .checkout-main{ padding:130px 0 70px; }
  .checkout-card{ padding:30px 24px; }
  .checkout-grid-2, .plan-grid{ grid-template-columns:1fr; }
  .checkout-steps{ gap:6px; }
  .checkout-step span:last-child{ display:none; }
  .checkout-step-line{ width:20px; }
  .recap-row{ flex-direction:column; gap:4px; }
  .recap-value{ text-align:left; }
}