/* Subscription page */
.sub-page-head{margin-bottom:28px;}
.sub-page-head h1{font-size:clamp(1.85rem,3.5vw,2.35rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;}
.sub-page-head p{margin-top:8px;font-size:14px;color:var(--fg-2);font-weight:500;}

.sub-top{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:28px;}
.sub-block__title{
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);
}
.sub-block__title svg{width:15px;height:15px;color:var(--pink);flex:none;}

.sub-status-card{
  position:relative;overflow:hidden;border-radius:20px;
  background:linear-gradient(165deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.04) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 18px 40px -28px rgba(6,10,22,.75);
}
.sub-status-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 11px, transparent 11px 22px);opacity:.55;
}
.sub-status-card.on{
  background:linear-gradient(165deg, rgba(90,134,203,.2) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 100%);
  box-shadow:inset 0 0 0 1px rgba(90,134,203,.35), 0 28px 56px -26px rgba(90,134,203,.32);
}
.sub-status-card__state-badge{
  position:absolute;top:12px;left:12px;z-index:4;
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;
  background:rgba(255,255,255,.12);color:var(--misty);box-shadow:var(--hi);
}
.sub-status-card.on .sub-status-card__state-badge{
  background:rgba(90,134,203,.28);color:#9db8e8;
}
.sub-status-card .sub-product__hero{
  min-height:108px;padding:36px 0 14px;
}
.sub-status-card .sub-product__hero-bg::before{background-size:36px;}
.sub-status-card .sub-product__hero-bg::after{
  right:-18px;bottom:-22px;width:88px;height:88px;
}
.sub-status-card .sub-product__hero-glow{
  left:8%;top:22%;width:64px;height:64px;
}
.sub-status-card .sub-product__days-wrap{padding:0 16px 2px;}
.sub-status-card .sub-product__days{
  font-size:clamp(1.35rem,2.4vw,1.65rem);letter-spacing:-.03em;line-height:1;
}
.sub-status-card.on .sub-product__days{
  font-size:clamp(1.45rem,2.6vw,1.75rem);color:#9db8e8;
}
.sub-status-card .sub-product__days-u{
  margin-top:3px;font-size:11px;font-weight:600;
}
.sub-status-card .sub-product__apple{
  right:-10px;bottom:-18px;width:72px;
}
.sub-status-card .sub-product__logo-mark{
  top:10px;right:12px;width:20px;height:20px;opacity:.45;
}
.sub-status-card.on .sub-product__hero-bg::after{
  background:radial-gradient(120% 120% at 34% 28%, rgba(90,134,203,.38), rgba(90,134,203,.1) 50%, transparent 72%);
}
.sub-status-card.on .sub-product__hero-glow{
  background:radial-gradient(circle, rgba(90,134,203,.42) 0%, transparent 70%);
}
.sub-hint{margin-top:10px;font-size:12.5px;color:var(--fg-3);line-height:1.5;font-weight:500;}

.sub-key-form{display:flex;gap:10px;flex-wrap:wrap;}
.sub-key-form input{
  flex:1;min-width:220px;height:50px;border-radius:999px;padding:0 18px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:none;color:#fff;font-family:ui-monospace,monospace;font-size:13px;
  box-shadow:var(--hi), inset 0 0 0 1px rgba(255,255,255,.1);
  transition:background .2s var(--ease), box-shadow .2s var(--ease), backdrop-filter .2s var(--ease);
}
.sub-key-form input::placeholder{color:var(--fg-3);}
.sub-key-form input:focus{
  outline:none;
  background:rgba(255,255,255,.11);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--hi), inset 0 0 0 1px rgba(242,174,188,.38), 0 0 32px -10px rgba(242,174,188,.32);
}
.sub-key-form .btn{height:50px;padding:0 22px;border-radius:14px;white-space:nowrap;}
#sub-key-msg{font-size:13px;font-weight:600;margin-top:12px;display:none;}

.sub-divider{
  height:1px;border:none;margin:0 0 28px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

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

.sub-product{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  min-height:340px;padding:0;border-radius:26px;text-decoration:none;color:#fff;
  background:linear-gradient(165deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.04) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 26px 50px -32px rgba(6,10,22,.82);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sub-product::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 11px, transparent 11px 22px);opacity:.55;
}
.sub-product:hover{
  transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px rgba(242,174,188,.32), 0 32px 62px -28px rgba(242,174,188,.28);
}
.sub-product.pop{
  background:linear-gradient(165deg, rgba(242,174,188,.22) 0%, rgba(255,255,255,.06) 48%, rgba(255,255,255,.03) 100%);
  box-shadow:inset 0 0 0 1px rgba(242,174,188,.38), 0 28px 56px -26px rgba(242,174,188,.35);
}
.sub-product.pop:hover{
  box-shadow:inset 0 0 0 1px rgba(242,174,188,.55), 0 36px 68px -24px rgba(242,174,188,.45);
}

.sub-product__badge{
  position:absolute;top:16px;left:16px;z-index:3;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px;
  background:rgba(255,255,255,.12);color:var(--misty);box-shadow:var(--hi);
}
.sub-product.pop .sub-product__badge{background:var(--pink);color:var(--burgundy);}

.sub-product__hero{
  position:relative;z-index:1;flex:none;min-height:168px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:52px 0 6px;overflow:hidden;
}
.sub-product__hero-bg{position:absolute;inset:0;pointer-events:none;}
.sub-product__hero-bg::before{
  content:"";position:absolute;inset:-30% -20%;
  background:url('../img/logo.png') center/52px repeat;
  opacity:.07;transform:rotate(-14deg);
}
.sub-product__hero-bg::after{
  content:"";position:absolute;right:-28px;bottom:-32px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(120% 120% at 34% 28%, rgba(252,239,241,.32), rgba(242,220,219,.12) 52%, transparent 72%);
}
.sub-product.pop .sub-product__hero-bg::after{
  background:radial-gradient(120% 120% at 34% 28%, rgba(242,174,188,.38), rgba(242,174,188,.1) 50%, transparent 72%);
}
.sub-product__hero-glow{
  position:absolute;left:10%;top:18%;width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle, rgba(90,134,203,.35) 0%, transparent 70%);
  filter:blur(8px);pointer-events:none;
}
.sub-product__days-wrap{
  position:relative;z-index:2;padding:0 22px 4px;
}
.sub-product__days{
  display:block;font-size:clamp(3rem,5.5vw,3.75rem);font-weight:900;
  letter-spacing:-.06em;line-height:.88;color:#fff;
}
.sub-product.pop .sub-product__days{color:var(--pink);}
.sub-product__days-u{
  display:block;margin-top:5px;font-size:13px;font-weight:700;color:var(--fg-2);letter-spacing:.02em;
}
.sub-product__apple{
  position:absolute;right:-14px;bottom:-28px;z-index:3;width:118px;height:auto;
  object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 22px 36px rgba(60,10,30,.45));
  transition:transform .35s var(--ease);
}
.sub-product:hover .sub-product__apple{transform:translateY(-6px) rotate(-4deg) scale(1.05);}
.sub-product__logo-mark{
  position:absolute;top:14px;right:18px;z-index:2;width:28px;height:28px;
  object-fit:contain;opacity:.55;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));
}

.sub-product__body{
  position:relative;z-index:2;padding:0 22px 22px;
  display:flex;flex-direction:column;
}
.sub-product__eyebrow{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);
  margin-bottom:6px;
}
.sub-product__title{
  font-size:1.28rem;font-weight:900;letter-spacing:-.03em;line-height:1.15;margin-bottom:8px;
}
.sub-product__desc{
  font-size:12.5px;line-height:1.58;color:var(--fg-2);margin-bottom:18px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sub-product__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.sub-product__price{
  font-size:1.65rem;font-weight:900;letter-spacing:-.03em;color:#fff;
}
.sub-product.pop .sub-product__price{color:var(--pink);}
.sub-product__go{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:800;color:var(--fg-2);
  padding:9px 14px;border-radius:99px;
  background:rgba(255,255,255,.08);box-shadow:var(--hi);
  transition:background .2s, color .2s;
}
.sub-product:hover .sub-product__go{background:rgba(242,174,188,.18);color:#fff;}
.sub-product.pop .sub-product__go{background:var(--pink);color:var(--burgundy);}
.sub-product.pop:hover .sub-product__go{background:var(--pink-2);}

@media(max-width:980px){
  .sub-top{grid-template-columns:1fr;}
  .sub-products{grid-template-columns:1fr;}
}
@media(min-width:981px) and (max-width:1180px){
  .sub-products{grid-template-columns:repeat(2,minmax(0,1fr));}
}