:root {
  --bg:#07080a;
  --panel:#111318;
  --panel2:#17191f;
  --text:#f5f5f6;
  --muted:#a1a5ae;
  --silver:#dfe1e5;
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.26);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,255,255,.08),transparent 30rem),
    radial-gradient(circle at 90% 28%,rgba(145,150,160,.06),transparent 28rem),
    var(--bg);
  color:var(--text);
  font-family:"DM Sans",sans-serif;
  line-height:1.6;
}
button{font:inherit}
a{color:inherit;text-decoration:none}
.shell{width:min(1180px,calc(100% - 34px));margin-inline:auto}

.logo{
  font-family:"Manrope",sans-serif;
  font-size:29px;
  font-weight:800;
  letter-spacing:-.07em;
  background:linear-gradient(110deg,#74777e,#fff 24%,#a7abb3 45%,#f7f7f7 65%,#737780);
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}
.payment-header{
  width:min(1180px,calc(100% - 34px));
  min-height:69px;
  margin:18px auto 0;
  padding:12px 17px;
  position:sticky;
  top:18px;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(7,8,10,.85);
  backdrop-filter:blur(18px);
}
.payment-header nav{display:flex;align-items:center;gap:25px;color:var(--muted);font-size:13px;font-weight:700}
.payment-header nav a:hover{color:var(--text)}

.eyebrow{
  color:#c8cbd1;
  font-size:11px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.payment-hero{
  padding:88px 0 56px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:35px;
  align-items:end;
}
.payment-hero h1{
  max-width:820px;
  margin-top:10px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(52px,8vw,92px);
  line-height:.96;
  letter-spacing:-.07em;
}
.payment-hero>div>p:not(.eyebrow){
  max-width:740px;
  margin-top:22px;
  color:var(--muted);
  font-size:18px;
}
.security-card{
  max-width:315px;
  padding:19px;
  display:flex;
  gap:13px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.035);
}
.lock-icon{
  width:43px;height:43px;
  flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--line2);
  border-radius:14px;
  color:var(--silver);
  font-size:20px;
}
.security-card p{color:var(--muted);font-size:12px;margin-top:3px}

.plans-section{padding:24px 0 85px}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;align-items:stretch}
.plan-card{
  position:relative;
  padding:28px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:29px;
  background:rgba(255,255,255,.035);
}
.plan-card.featured{
  transform:translateY(-15px);
  border-color:var(--line2);
  background:
    radial-gradient(circle at top,rgba(255,255,255,.10),transparent 20rem),
    rgba(255,255,255,.05);
}
.popular-badge{
  position:absolute;
  top:18px;right:18px;
  padding:7px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff,#9297a0);
  color:#08090b;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.plan-top{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.plan-number{
  width:33px;height:33px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--silver);
}
.plan-card h2{
  margin-top:25px;
  font-family:"Manrope",sans-serif;
  font-size:34px;
  line-height:1.03;
  letter-spacing:-.045em;
}
.plan-card>p{margin-top:14px;color:var(--muted)}
.target-row{
  margin-top:25px;
  padding:15px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(0,0,0,.22);
}
.target-row span,.price-row span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.target-row strong{font-family:"Manrope";font-size:28px;letter-spacing:-.04em}
.price-row{margin:22px 0}
.price-row strong,.price-row span{display:block}
.price-row strong{font-family:"Manrope";font-size:35px;letter-spacing:-.045em}
.smaller-price strong{font-size:27px}
.plan-card ul{list-style:none;display:grid;gap:11px;margin-bottom:26px;color:#d7d9dd}
.plan-card li:before{content:"✓";margin-right:9px;font-weight:900;color:#fff}

.checkout-button,.primary-checkout,.secondary-checkout{
  min-height:49px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}
.plan-card .checkout-button{width:100%;margin-top:auto}
.primary-checkout{
  border:0;
  background:linear-gradient(135deg,#fafafa,#9da2ab);
  color:#07080a;
}
.secondary-checkout{
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:var(--text);
}
.checkout-button:hover,.primary-checkout:hover,.secondary-checkout:hover{transform:translateY(-1px)}

.checkout-information{
  padding:0 0 95px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
}
.method-panel,.policy-panel{
  padding:32px;
  border:1px solid var(--line);
  border-radius:27px;
  background:var(--panel);
}
.method-panel h2,.policy-panel h2{
  margin-top:8px;
  font-family:"Manrope";
  font-size:34px;
  letter-spacing:-.045em;
}
.method-grid{margin-top:23px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.method-grid>div{
  padding:15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}
.method-grid strong,.method-grid span{display:block}
.method-grid span{margin-top:3px;color:var(--muted);font-size:12px}
.policy-panel ul{margin-top:20px;padding-left:20px;display:grid;gap:9px;color:#cfd1d6}
.policy-panel>a{display:inline-block;margin-top:22px;color:var(--silver);font-weight:700}

.payment-footer{
  padding:33px 0 48px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 24px;
  border-top:1px solid var(--line);
  color:var(--muted);
}
.payment-footer small{grid-column:2;color:#727781}

dialog{
  width:min(590px,calc(100% - 30px));
  padding:0;
  border:1px solid var(--line2);
  border-radius:24px;
  background:var(--panel2);
  color:var(--text);
}
dialog::backdrop{background:rgba(0,0,0,.75)}
.dialog-head{
  padding:20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:1px solid var(--line);
}
.dialog-head h2{margin-top:4px;font-family:"Manrope";font-size:28px;letter-spacing:-.04em}
.dialog-head button{
  width:34px;height:34px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--text);
  font-size:21px;
  cursor:pointer;
}
dialog>p{padding:20px;color:var(--muted)}
dialog code{color:#f0f1f3}
.dialog-actions{padding:0 20px 18px;display:flex;justify-content:flex-end;gap:9px}
.dialog-link{font-size:13px}
.dialog-status{padding-top:0!important;color:var(--silver)!important;font-size:12px}

@media(max-width:970px){
  .payment-hero{grid-template-columns:1fr}
  .security-card{max-width:none}
  .plans-grid{grid-template-columns:1fr}
  .plan-card.featured{transform:none}
}
@media(max-width:700px){
  .payment-header{border-radius:22px}
  .payment-header nav a:first-child,.payment-header nav a:last-child{display:none}
  .payment-hero{padding-top:60px}
  .checkout-information{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr}
  .payment-footer{grid-template-columns:1fr}
  .payment-footer small{grid-column:1}
}
@media(max-width:500px){
  .shell,.payment-header{width:calc(100% - 22px)}
  .payment-hero h1{font-size:54px}
  .plan-card{padding:23px}
  .popular-badge{position:static;width:max-content;margin-bottom:15px}
  .dialog-actions{flex-direction:column}
  .dialog-actions>*{width:100%}
}


/* =========================================================
   SAT+ PREMIUM MICRO-INTERACTIONS
   Subtle 3D lift, cursor tilt, magnetic buttons, click press.
   ========================================================= */

.sat-interactive-surface{
  --sat-rx:0deg;
  --sat-ry:0deg;
  --sat-lift:0px;
  --sat-shine-x:50%;
  --sat-shine-y:50%;
  position:relative;
  transform:
    perspective(1100px)
    translate3d(0,var(--sat-lift),0)
    rotateX(var(--sat-rx))
    rotateY(var(--sat-ry));
  transform-style:preserve-3d;
  will-change:transform;
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    border-color .24s ease,
    background-color .24s ease,
    box-shadow .24s ease;
}

.sat-interactive-surface::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(
      circle at var(--sat-shine-x) var(--sat-shine-y),
      rgba(255,255,255,.105),
      rgba(255,255,255,.025) 22%,
      transparent 47%
    );
  transition:opacity .22s ease;
}

.sat-interactive-surface.sat-surface-active{
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:
    0 17px 36px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.sat-interactive-surface.sat-surface-active::after{
  opacity:1;
}

.sat-interactive-surface.sat-surface-pressed{
  transition-duration:.08s;
  transform:
    perspective(1100px)
    translate3d(0,var(--sat-lift),0)
    rotateX(var(--sat-rx))
    rotateY(var(--sat-ry))
    scale(.992);
}

.sat-magnetic{
  --sat-mx:0px;
  --sat-my:0px;
  transform:translate3d(var(--sat-mx),var(--sat-my),0);
  will-change:transform;
  transition:
    transform .20s cubic-bezier(.2,.8,.2,1),
    border-color .18s ease,
    background-color .18s ease,
    opacity .18s ease;
}

.sat-magnetic:hover{
  transform:
    translate3d(var(--sat-mx),var(--sat-my),0)
    translateY(-1px);
}

.sat-magnetic.sat-button-pressed{
  transition-duration:.07s;
  transform:
    translate3d(var(--sat-mx),var(--sat-my),0)
    scale(.975);
}

.sat-pop-control{
  transition:
    transform .17s cubic-bezier(.2,.8,.2,1),
    background-color .17s ease,
    border-color .17s ease,
    color .17s ease !important;
}

.sat-pop-control:hover{
  transform:translateY(-2px) scale(1.012);
}

.sat-pop-control:active{
  transform:translateY(0) scale(.975);
}

/* Inputs also react, but they do not move while the user is typing. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea{
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
select:hover,
textarea:hover{
  border-color:rgba(255,255,255,.23) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus{
  border-color:rgba(255,255,255,.34) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.045);
}

/* Touch devices get a simple press effect instead of cursor tilt. */
@media(hover:none),(pointer:coarse){
  .sat-interactive-surface{
    transform:none;
    will-change:auto;
  }

  .sat-interactive-surface:active{
    transform:scale(.992);
  }

  .sat-interactive-surface::after{
    display:none;
  }

  .sat-magnetic{
    transform:none;
    will-change:auto;
  }

  .sat-magnetic:active{
    transform:scale(.975);
  }
}

@media(prefers-reduced-motion:reduce){
  .sat-interactive-surface,
  .sat-magnetic,
  .sat-pop-control{
    transform:none !important;
    transition:
      border-color .18s ease,
      background-color .18s ease,
      color .18s ease !important;
  }

  .sat-interactive-surface::after{
    display:none;
  }
}