/* Liquid Glass surface based on the Habr SVG displacement technique. */
.subscription-card {
  position: fixed;
  z-index: 2;
  left: clamp(96px, 11vw, 220px);
  right: clamp(96px, 11vw, 220px);
  bottom: 48px;
  width: auto;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, .28);
  backdrop-filter: url("#liquid-displacement") blur(25px) saturate(180%);
  -webkit-backdrop-filter: url("#liquid-displacement") blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, .08),
    inset 0 1px 1px rgba(255, 255, 255, .8),
    inset 0 2px 4px rgba(255, 255, 255, .7),
    inset 0 -1px 1px rgba(0, 0, 0, .05);
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Diffuse refraction and the top specular line. */
.subscription-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(100% 150% at 0% 0%, rgba(255,255,255,.58), transparent 48%),
    linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 46%, rgba(255,255,255,.18));
  filter: url("#liquid-displacement");
}

.subscription-card::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 7%;
  right: 7%;
  height: 2px;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  box-shadow: 0 2px 4px rgba(255,255,255,.7);
  filter: blur(.45px);
}

/* The panel is one glass canvas; controls remain transparent layers inside it. */
.purchase-controls {
  position: relative;
  z-index: 1;
  width: min(475px, 43%);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Keep the brand and utility controls pinned to the top viewport edge. */
.header {
  position: fixed;
  z-index: 10;
  top: 24px;
  left: clamp(18px, 3.5vw, 68px);
  right: clamp(18px, 3.5vw, 68px);
}

.subscription-card .price { font-size: clamp(42px, 3.5vw, 52px); }
.subscription-card .eyebrow { margin-bottom: 5px; }
.subscription-card .terms { margin-top: 7px; }
.subscription-card .offer-copy h1 { margin-bottom: 4px; }
.subscription-card .purchase-controls { gap: 8px; }
.subscription-card .plan-tabs { padding-top: 3px; padding-bottom: 3px; }
.subscription-card .plan-tab { min-height: 36px; }
.subscription-card .buy-button { height: 42px; }

.plan-tabs {
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08), inset 0 1px 1px rgba(255,255,255,.8);
}

.plan-tab.active {
  background: rgba(0, 0, 0, .06);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}

.buy-button {
  margin-top: 0;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.85), 0 5px 14px rgba(35,38,40,.06);
}

.buy-button:hover, .buy-button:focus-visible {
  background: rgba(255, 255, 255, .38);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.95), 0 8px 20px rgba(35,38,40,.1);
}

.brand-pill { cursor: default; }
.brand-pill .brand-dot { color: #b51f2a; }

@font-face {
  font-family: "Armor Piercing";
  src: url("armor-piercing-2-0-bb_italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

.unavailable-message {
  position: fixed;
  z-index: 1;
  inset: 50% 20px auto;
  transform: translateY(-50%);
  text-align: center;
  color: #111416;
  font-family: "Armor Piercing", Impact, sans-serif;
  font-size: clamp(46px, 8vw, 150px);
  font-style: italic;
  line-height: .9;
  letter-spacing: -.045em;
  text-shadow: 0 3px 18px rgba(255,255,255,.35);
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .subscription-card { left: 18px; right: 18px; bottom: 28px; }
  .subscription-card { padding-top: 15px; padding-bottom: 15px; }
  .subscription-card .price { font-size: 48px; }
  .subscription-card .purchase-controls { margin-top: 16px; }
  .header { top: 14px; left: 14px; right: 14px; }
  .purchase-controls { width: 100%; margin-top: 25px; }
  .plan-tabs { gap: 2px; padding: 4px; }
  .plan-tab { font-size: 10px; }
  .unavailable-message { font-size: clamp(40px, 12vw, 86px); white-space: normal; }
}