#subscription-page{
  --sub-navy:#0D315F;
  --sub-navy-deep:#0D2346;
  --sub-gold:#D6B574;
  --sub-gold-2:#D9AE58;
  --sub-cream:#F7F3EB;
  --sub-paper:#FFFCF7;
  --sub-ink:#18304F;
  --sub-muted:#7C8795;
  --sub-line:#E4D9C8;
  --sub-soft:#F1E9DC;
  background:
    radial-gradient(circle at 10% 18%, rgba(214,181,116,.10), transparent 28%),
    radial-gradient(circle at 92% 72%, rgba(13,49,95,.055), transparent 26%),
    var(--sub-cream);
  color:var(--sub-ink);
}

#subscription-page *{box-sizing:border-box}

.sub-page{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto;
  padding:34px 0 74px;
}

.sub-hero{
  position:relative;
  min-height:390px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:50px;
  align-items:center;
  overflow:hidden;
  padding:64px 70px;
  border:1px solid rgba(214,181,116,.45);
  border-radius:34px;
  background:
    linear-gradient(135deg,rgba(13,49,95,.99),rgba(13,35,70,.99));
  box-shadow:0 28px 70px rgba(13,35,70,.14);
}

.sub-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to left,rgba(0,0,0,.85),transparent 80%);
  pointer-events:none;
}

.sub-hero-copy{position:relative;z-index:2}

.sub-eyebrow,
.sub-section-kicker,
.sub-after-head>span,
.sub-bottom-cta>div>span{
  display:block;
  color:var(--sub-gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:2.1px;
}

.sub-hero h1{
  margin:15px 0 18px;
  color:#fff;
  font-size:clamp(42px,5vw,72px);
  line-height:1.13;
  font-weight:900;
}

.sub-hero h1 span{color:#E4C687}

.sub-hero p{
  max-width:650px;
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:2;
}

.sub-hero-mark{
  position:relative;
  z-index:1;
  width:290px;
  height:290px;
  margin-inline:auto;
  display:grid;
  place-items:center;
}

.sub-mark-ring{
  position:absolute;
  border:1px solid rgba(214,181,116,.28);
  border-radius:50%;
}

.sub-mark-ring-a{inset:12px}
.sub-mark-ring-b{inset:52px;border-color:rgba(255,255,255,.12)}

.sub-mark-center{
  width:148px;
  height:148px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  border:1px solid rgba(214,181,116,.55);
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 40px rgba(214,181,116,.06),0 0 45px rgba(0,0,0,.08);
}

.sub-mark-center span{font-size:48px;font-weight:900;line-height:1}
.sub-mark-center small{margin-top:8px;color:#E1C483;font-weight:800}

.sub-pricing{padding:76px 0 26px}

.sub-section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
  margin-bottom:28px;
}

.sub-section-head h2,
.sub-after-head h2,
.sub-bottom-cta h2{
  margin:8px 0 0;
  color:var(--sub-navy);
  font-size:clamp(30px,3.5vw,46px);
  line-height:1.25;
  font-weight:900;
}

.sub-section-head p{
  max-width:430px;
  margin:0;
  color:var(--sub-muted);
  font-size:14px;
  line-height:1.9;
}

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

.sub-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:30px;
  overflow:hidden;
  border:1px solid var(--sub-line);
  border-radius:28px;
  background:rgba(255,252,247,.92);
  box-shadow:0 16px 42px rgba(13,49,95,.07);
}

.sub-card:after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  left:-70px;
  bottom:-90px;
  border:1px solid rgba(214,181,116,.16);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(214,181,116,.04),0 0 0 56px rgba(214,181,116,.025);
  pointer-events:none;
}

.sub-card-featured{
  border:1.5px solid var(--sub-gold);
  background:
    linear-gradient(180deg,rgba(255,252,247,.98),rgba(250,245,236,.98));
  box-shadow:0 22px 58px rgba(13,49,95,.12);
}

.sub-ribbon{
  position:absolute;
  top:0;
  left:0;
  padding:9px 18px 10px;
  border-radius:0 0 15px 0;
  background:var(--sub-gold);
  color:var(--sub-navy-deep);
  font-size:11px;
  font-weight:900;
}

.sub-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-top:7px;
}

.sub-plan-label{
  color:#A18654;
  font-size:10px;
  font-weight:900;
  letter-spacing:.4px;
}

.sub-card h3{
  margin:6px 0 0;
  color:var(--sub-navy);
  font-size:23px;
  font-weight:900;
}

.sub-plan-index{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:var(--sub-navy);
  border:1px solid #E5D8C5;
  background:#F8F2E8;
  font-size:12px;
  font-weight:900;
}

.sub-price-wrap{
  text-align:center;
  padding:30px 0 20px;
  border-bottom:1px solid #EAE0D2;
}

.sub-price{
  direction:rtl;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:8px;
}

.sub-price strong{
  color:var(--sub-navy);
  font-size:64px;
  line-height:.95;
  font-weight:900;
  letter-spacing:-2px;
}

.sub-price span{
  margin-bottom:8px;
  color:#7C8795;
  font-size:14px;
  font-weight:800;
}

.sub-price-wrap>p{
  margin:11px 0 0;
  color:var(--sub-muted);
  font-size:12px;
  font-weight:700;
}

.sub-old-price{
  display:inline-block;
  margin-bottom:12px;
  color:#A9B0B9;
  font-size:18px;
  font-weight:800;
  text-decoration:line-through;
  text-decoration-thickness:2px;
}

.sub-price-wrap .sub-equivalent{
  color:var(--sub-navy);
  font-size:13px;
  font-weight:900;
}

.sub-saving{
  margin-top:16px;
  padding:11px 13px;
  text-align:center;
  color:#8A671F;
  background:#FFF4D9;
  border:1px solid #EBD6A6;
  border-radius:12px;
  font-size:12px;
  font-weight:900;
}

.sub-access-box{
  margin-top:20px;
  padding:15px 16px;
  border:1px solid #DEE5EC;
  border-radius:16px;
  background:#F6F8FA;
}

.sub-access-box strong{
  display:block;
  color:var(--sub-navy);
  font-size:13px;
  font-weight:900;
}

.sub-access-box span{
  display:block;
  margin-top:5px;
  color:#778291;
  font-size:11px;
  line-height:1.75;
}

.sub-access-featured{
  border-color:#E7D1A3;
  background:#FFF9EC;
}

.sub-features{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:24px 0 28px;
  padding:0;
  flex:1;
}

.sub-features li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#405169;
  font-size:13px;
  line-height:1.7;
}

.sub-features li span{
  width:21px;
  height:21px;
  flex:0 0 21px;
  display:grid;
  place-items:center;
  margin-top:1px;
  border-radius:50%;
  color:#2E7045;
  background:#EAF4ED;
  font-size:11px;
  font-weight:900;
}

.sub-cta{
  position:relative;
  z-index:2;
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:13px 20px;
  border-radius:14px;
  text-decoration:none!important;
  color:#fff!important;
  background:var(--sub-navy);
  font-size:13px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(13,49,95,.12);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}

.sub-cta:hover{
  transform:translateY(-2px);
  background:#173E70;
  box-shadow:0 14px 28px rgba(13,49,95,.17);
}

.sub-cta span{font-size:18px;line-height:1}

.sub-cta-featured{
  color:var(--sub-navy-deep)!important;
  background:var(--sub-gold);
}

.sub-cta-featured:hover{background:#E0BD72}

.sub-note{
  position:relative;
  z-index:2;
  margin:11px 0 0;
  text-align:center;
  color:#929AA4;
  font-size:10px;
  line-height:1.7;
}

.sub-after{
  margin-top:54px;
  padding:38px;
  border:1px solid var(--sub-line);
  border-radius:28px;
  background:rgba(255,252,247,.82);
}

.sub-after-head{text-align:center;margin-bottom:28px}
.sub-after-head h2{font-size:32px}

.sub-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.sub-steps article{
  padding:22px;
  border:1px solid #E7DDCF;
  border-radius:18px;
  background:#FFFEFB;
}

.sub-steps b{
  color:var(--sub-gold-2);
  font-size:11px;
  letter-spacing:1px;
}

.sub-steps h3{
  margin:8px 0 7px;
  color:var(--sub-navy);
  font-size:16px;
  font-weight:900;
}

.sub-steps p{
  margin:0;
  color:var(--sub-muted);
  font-size:12px;
  line-height:1.8;
}

.sub-bottom-cta{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:28px 32px;
  border-radius:24px;
  color:#fff;
  background:var(--sub-navy-deep);
  box-shadow:0 16px 38px rgba(13,35,70,.12);
}

.sub-bottom-cta h2{color:#fff;font-size:27px}

.sub-bottom-cta a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.07);
}

.sub-bottom-cta a:hover{background:rgba(255,255,255,.12)}

@media(max-width:900px){
  .sub-hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:48px 34px;
    text-align:center;
  }

  .sub-hero p{margin-inline:auto}
  .sub-hero-mark{width:220px;height:220px}
  .sub-mark-center{width:124px;height:124px}
  .sub-mark-center span{font-size:40px}

  .sub-section-head{align-items:flex-start;flex-direction:column}
  .sub-grid{grid-template-columns:1fr}
  .sub-steps{grid-template-columns:1fr}
}

@media(max-width:640px){
  .sub-page{width:min(100% - 22px,1180px);padding-top:18px}
  .sub-hero{padding:38px 22px;border-radius:24px;gap:25px}
  .sub-hero h1{font-size:38px}
  .sub-hero p{font-size:14px}
  .sub-hero-mark{width:180px;height:180px}
  .sub-mark-ring-a{inset:6px}
  .sub-mark-ring-b{inset:34px}
  .sub-mark-center{width:108px;height:108px}
  .sub-mark-center span{font-size:35px}

  .sub-pricing{padding-top:50px}
  .sub-card{padding:23px 18px;border-radius:22px}
  .sub-card-head{padding-top:15px}
  .sub-price strong{font-size:54px}
  .sub-section-head h2{font-size:32px}
  .sub-after{padding:24px 16px;border-radius:22px}
  .sub-after-head h2{font-size:27px}
  .sub-bottom-cta{align-items:flex-start;flex-direction:column;padding:24px 20px}
  .sub-bottom-cta a{width:100%;justify-content:center}
}


/* Arabic kicker clipping fix */
.sub-after-head > span{
  display:inline-block;
  letter-spacing:0;
  line-height:1.8;
  padding:0 4px;
  margin-bottom:6px;
}


.sub-bottom-cta > div > span{
  display:inline-block;
  letter-spacing:0;
  line-height:1.8;
  padding:0 4px;
  margin-bottom:6px;
}