/* =========================================================
   AXIS TITANIUM CHECKOUT
   ========================================================= */

.titanium-page{
  position:relative;
  isolation:isolate;
  margin:0;
  padding:0 0 70px;
  color:#fff;
  background:#0e1b34;
  overflow:hidden;
}

/* Full decorative background layer.
   This is NOT part of layout flow, so changing its height
   does not move the membership panels. */
.titanium-page::before{
  content:"";
  position:absolute;
  z-index:-3;
  top:0;
  left:0;
  right:0;
  height:670px;
  background:
    linear-gradient(180deg,rgba(0,7,12,.02),rgba(0,7,12,.06)),
    url("../img/titanium-bg.png") center 41% / cover no-repeat;
  pointer-events:none;
}

/* AXIS FADE: exact solid page color at the end. */
.titanium-page::after{
  content:"";
  position:absolute;
  z-index:-2;
  top:0;
  left:0;
  right:0;
  height:670px;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(14,27,52,0) 0%,
      rgba(14,27,52,.02) 42%,
      rgba(14,27,52,.10) 58%,
      rgba(14,27,52,.30) 70%,
      rgba(14,27,52,.66) 84%,
      rgba(14,27,52,.92) 94%,
      #0e1b34 100%
    ),
    radial-gradient(circle at 50% 38%,rgba(0,0,0,0),rgba(0,0,0,.10) 88%);
}

.titanium-hero{
  position:relative;
  min-height:0;
  height:auto;
  overflow:visible;
  background:none;
}

.titanium-hero::after{
  content:none;
}

.titanium-hero-overlay{
  display:none;
}

.titanium-hero-content{
  position:relative;
  z-index:2;
  width:min(1360px,calc(100% - 40px));
  margin:0 auto;  padding-top:82px;
  padding-bottom:20px;
}

.titanium-eyebrow{
  margin:0 0 9px;
  color:#39caff;
  font-size:13px;
  font-weight:950;
  letter-spacing:4px;
}

.titanium-hero h1{
  margin:0;
  font-size:clamp(38px,4.5vw,64px);
  line-height:.98;
  font-weight:950;
  letter-spacing:1.6px;
  color:#f4f7fa;
  text-shadow:0 4px 14px rgba(0,0,0,.78);
}

.titanium-subtitle{
  margin:15px 0 0;
  color:#2fc8ff;
  font-size:19px;
  font-weight:950;
  letter-spacing:2px;
}

.titanium-intro{
  max-width:650px;
  margin:17px 0 0;
  color:#dbe7ef;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  font-size:15px;
  line-height:1.72;
  font-weight:600;
  letter-spacing:.15px;
  text-shadow:0 2px 8px rgba(0,0,0,.48);
}

.titanium-wrap{
  position:relative;
  z-index:3;
  width:min(1360px,calc(100% - 40px));
  margin:0 auto;
  padding-top:0;
}

.titanium-breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:16px;
  color:#86a7ba;
  font-size:12px;
  font-weight:850;
  letter-spacing:.4px;
}

.titanium-breadcrumb a{
  color:#42caff;
  text-decoration:none;
}

.titanium-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.75fr);
  gap:24px;
  align-items:start;
}

.benefits-panel,
.checkout-panel{
  background:
    radial-gradient(circle at 18% 0%,rgba(46,180,255,.13),transparent 34%),
    linear-gradient(145deg,rgba(10,34,51,.985) 0%,rgba(5,22,35,.99) 52%,rgba(3,16,27,.995) 100%);
  border:1px solid rgba(56,197,255,.46);
  box-shadow:
    0 22px 46px rgba(0,0,0,.38),
    0 0 22px rgba(22,157,225,.10),
    inset 0 1px 0 rgba(155,229,255,.08),
    inset 0 0 38px rgba(35,172,235,.035);
}

.benefits-panel{
  padding:26px;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}

.section-heading{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}

.section-heading span{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(48,193,255,.65));
}

.section-heading span:last-child{
  background:linear-gradient(90deg,rgba(48,193,255,.65),transparent);
}

.section-heading h2{
  margin:0;
  color:#f3f6f8;
  font-size:24px;
  font-weight:950;
  letter-spacing:1px;
}

.benefit-list{
  display:grid;
  gap:12px;
}

.benefit-row{
  position:relative;
  min-height:116px;
  display:grid;
  grid-template-columns:118px 1fr;
  overflow:hidden;
  border:1px solid rgba(69,190,239,.30);
  background:
    linear-gradient(100deg,rgba(13,42,61,.88),rgba(7,27,41,.92) 42%,rgba(4,19,31,.96));
  box-shadow:
    inset 0 1px 0 rgba(141,224,255,.045),
    inset 0 0 22px rgba(33,163,225,.025);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.benefit-row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg,#56d8ff,#168fda);
  box-shadow:0 0 10px rgba(52,198,255,.45);
}

.benefit-row:hover{
  transform:translateY(-2px);
  border-color:rgba(74,207,255,.52);
  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(141,224,255,.07);
}

.benefit-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid rgba(53,190,250,.24);
  background:
    radial-gradient(circle,rgba(50,190,255,.22),transparent 62%),
    linear-gradient(180deg,rgba(14,48,69,.88),rgba(8,29,44,.90));
}

.benefit-icon svg{
  width:62px;
  height:62px;
  fill:none;
  stroke:#46caff;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 9px rgba(46,194,255,.32));
}

.coins-icon svg{
  stroke:#ffc248;
}

.benefit-copy{
  padding:18px 20px;
}

.benefit-copy h3{
  margin:0 0 7px;
  color:#37caff;
  font-size:18px;
  line-height:1.2;
  font-weight:950;
}

.benefit-copy p{
  margin:0;
  color:#bed0dc;
  font-size:13px;
  line-height:1.55;
}

.checkout-column{
  position:sticky;
  top:110px;
  min-width:0;
}

.checkout-panel{
  position:relative;
  top:auto;
  width:100%;
  box-sizing:border-box;
  padding:26px;
  text-align:center;
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
}

.checkout-tier{
  color:#37caff;
  font-size:15px;
  font-weight:950;
  letter-spacing:1.2px;
}

.titanium-emblem{
  width:132px;
  height:132px;
  margin:14px auto 4px;
  color:#e6f5ff;
  filter:drop-shadow(0 0 10px rgba(91,211,255,.38)) drop-shadow(0 0 20px rgba(75,124,255,.20));
}

.titanium-emblem img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.checkout-panel > h2{
  margin:0;
  color:#eaf7ff;
  font-size:32px;
  font-weight:950;
  letter-spacing:2px;
}

.checkout-price{
  margin-top:12px;
  padding:6px 0;
  border:0;
}

.price-divider{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  height:12px;
}

.price-divider::before,
.price-divider::after{
  content:"";
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(55,202,255,.10),
    rgba(55,202,255,.58)
  );
}

.price-divider::after{
  background:linear-gradient(
    90deg,
    rgba(55,202,255,.58),
    rgba(55,202,255,.10)
  );
}

.price-divider .diamond{
  width:8px;
  height:8px;
  transform:rotate(45deg);
  border:1px solid #37caff;
  background:rgba(55,202,255,.16);
  box-shadow:
    0 0 5px rgba(55,202,255,.65),
    inset 0 0 4px rgba(151,231,255,.28);
}

.price-divider.bottom{
  opacity:.72;
  margin-top:2px;
}

.price-divider.top{
  margin-bottom:3px;
}

.checkout-price strong{
  display:block;
  font-size:42px;
  line-height:1;
  font-weight:950;
  color:#fff;
}

.checkout-price span{
  display:block;
  margin-top:6px;
  color:#95aabc;
  font-size:11px;
  font-weight:850;
}

.checkout-summary{
  margin-top:18px;
  padding:16px;
  text-align:left;
  border:1px solid rgba(61,186,242,.28);
  background:
    linear-gradient(180deg,rgba(12,37,53,.82),rgba(6,24,37,.90));
  box-shadow:
    inset 0 1px 0 rgba(157,227,255,.05),
    inset 0 0 20px rgba(40,166,220,.025);
}

.checkout-summary > div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:6px 0;
  color:#b8cbd8;
  font-size:12px;
}

.checkout-summary > div strong{
  color:#9eb6c5;
  white-space:nowrap;
  font-size:11px;
}

.checkout-summary .checkout-total{
  margin-top:10px;
  padding-top:13px;
  border-top:1px solid rgba(74,190,241,.28);
  font-size:15px;
  font-weight:950;
}

.checkout-summary .checkout-total span{
  color:#fff;
}

.checkout-summary .checkout-total strong{
  color:#37caff;
  font-size:15px;
}

.paypal-button{
  width:70%;
  margin:18px auto 0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:block;
}

.paypal-button img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  transition:transform .16s ease,filter .16s ease;
}

.paypal-button:hover img{
  transform:scale(1.015);
  filter:brightness(1.08);
}

.paypal-button:focus-visible{
  outline:2px solid #37caff;
  outline-offset:4px;
}

.secure-note{
  margin-top:15px;
  color:#879dac;
  font-size:11px;
  line-height:1.45;
}


.paynow-checkout-legal{
  box-sizing:border-box;
  width:100%;
  margin-top:0;
  padding:16px 20px 17px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid rgba(44,191,255,.30);
  border-top:0;
  background:
    linear-gradient(180deg,rgba(8,29,44,.72),rgba(3,17,28,.88));
  box-shadow:
    inset 0 1px 0 rgba(155,229,255,.05),
    0 10px 24px rgba(0,0,0,.16);
}

.paynow-shield{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.paynow-shield svg{
  width:32px;
  height:32px;
  fill:none;
  stroke:#42caff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(66,202,255,.34));
}

.paynow-copy{
  min-width:0;
}

.paynow-mor{
  color:#d8e8f1;
  font-size:13px;
  line-height:1.45;
}

.paynow-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 10px;
  margin-top:5px;
  font-size:13px;
  line-height:1.4;
}

.paynow-links a{
  color:#54d2ff;
  text-decoration:underline;
  text-underline-offset:2px;
}

.paynow-links a:hover{
  color:#9ae8ff;
}

.paynow-links span{
  color:#55788c;
}

.purchase-notes{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(44,191,255,.26);
  background:rgba(9,27,41,.86);
}

.purchase-notes > div{
  padding:19px 20px;
  border-right:1px solid rgba(44,191,255,.20);
}

.purchase-notes > div:last-child{
  border-right:0;
}

.purchase-notes strong{
  display:block;
  margin-bottom:5px;
  color:#38c9ff;
  font-size:12px;
  font-weight:950;
  letter-spacing:.7px;
}

.purchase-notes span{
  color:#9eb5c4;
  font-size:11px;
  line-height:1.45;
}

.back-shop{
  display:block;
  width:max-content;
  margin:24px auto 0;
  color:#3fcaff;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  letter-spacing:.5px;
}

.back-shop:hover{
  color:#8ee5ff;
}

@media(max-width:1000px){
  .titanium-layout{
    grid-template-columns:1fr;
  }

  .checkout-column{
    position:relative;
    top:auto;
  }

  .checkout-panel{
    position:relative;
    top:auto;
  }

  .purchase-notes{
    grid-template-columns:1fr 1fr;
  }

  .purchase-notes > div:nth-child(2){
    border-right:0;
  }

  .purchase-notes > div:nth-child(-n+2){
    border-bottom:1px solid rgba(44,191,255,.20);
  }
}

@media(max-width:700px){

  .paynow-checkout-legal{
    align-items:flex-start;
    justify-content:flex-start;
    padding:14px;
  }

  .paynow-mor,
  .paynow-links{
    font-size:12px;
  }


  .titanium-page::before,
  .titanium-page::after{
    height:560px;
  }

  .titanium-hero{
    height:auto;
    min-height:0;
  }

  .titanium-hero-content{
    width:calc(100% - 24px);
    padding-top:58px;
    padding-bottom:18px;
  }

  .titanium-wrap{
    width:calc(100% - 20px);
    margin:0 auto;
    padding-top:0;
  }

  .titanium-hero h1{
    font-size:36px;
  }

  .titanium-subtitle{
    font-size:14px;
  }

  .benefits-panel,
  .checkout-panel{
    padding:16px;
  }

  .benefit-row{
    grid-template-columns:82px 1fr;
  }

  .benefit-copy{
    padding:15px 14px;
  }

  .benefit-copy h3{
    font-size:15px;
  }

  .benefit-icon svg{
    width:48px;
    height:48px;
  }

  .purchase-notes{
    grid-template-columns:1fr;
  }

  .purchase-notes > div{
    border-right:0;
    border-bottom:1px solid rgba(44,191,255,.20);
  }

  .purchase-notes > div:last-child{
    border-bottom:0;
  }
}