@font-face {
  font-family: "Plan Manrope";
  src: url("../../assets/fonts/manrope-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
.subscription {
  --plan-scale: .5;
  background: #030303;
  color: #fff;
  padding-top: calc(100px * var(--plan-scale));
  padding-bottom: calc(74px * var(--plan-scale));
}
.subscription > .container { max-width: calc(1630px * var(--plan-scale)); }
.subscription h2 { color: #fff; font-family: var(--font-display); font-size: calc(80px * var(--plan-scale)); font-weight: 400; line-height: 1; margin: 0; }
.subscription__subtitle { color: #acacac; font-family: var(--font-display); font-size: calc(40px * var(--plan-scale)); line-height: 2; margin: calc(14px * var(--plan-scale)) 0 calc(47px * var(--plan-scale)); text-align: center; }
.plans { display: grid; gap: calc(60px * var(--plan-scale)); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: auto; max-width: calc(1238px * var(--plan-scale)); }
.plan-card {
  border: 0;
  border-radius: calc(66px * var(--plan-scale));
  background: rgba(138,138,138,.1);
  box-shadow: inset 0 0 0 calc(1px * var(--plan-scale)) #fff, inset 0 calc(4px * var(--plan-scale)) calc(80px * var(--plan-scale)) rgba(155,178,255,.54);
  font-family: "Plan Manrope", var(--font-heading);
  min-width: 0;
  min-height: calc(730px * var(--plan-scale));
  padding: calc(70px * var(--plan-scale)) calc(51.187px * var(--plan-scale)) calc(44px * var(--plan-scale));
  position: relative;
}
.plan-card--plus { border: 0; background: url("./images/plus-card-front.svg") center / 100% 100% no-repeat, url("./images/plus-card-back.svg") center / 100% 100% no-repeat; box-shadow: none; padding-top: calc(74px * var(--plan-scale)); }
.plan-card :where(h3, p) { margin: 0; }
.plan-card h3 { font-size: calc(51.534px * var(--plan-scale)); font-weight: 800; line-height: 1.36; margin-bottom: calc(14.724px * var(--plan-scale)); }
.plan-price { font-size: calc(51.534px * var(--plan-scale)); font-weight: 600; line-height: 1.4; }
.plan-price span { font-size: calc(35.337px * var(--plan-scale)); font-weight: 400; }
.plan-card .plan-note { font-size: calc(25.767px * var(--plan-scale)); line-height: 1.36; margin-top: calc(14.724px * var(--plan-scale)); }
.plan-card .plan-trial { background: linear-gradient(90deg, #a6baff, #e6e7ff, #bbdbff); background-clip: text; color: transparent; font-size: calc(24px * var(--plan-scale)); line-height: 1.4; position: absolute; right: calc(30px * var(--plan-scale)); top: calc(20px * var(--plan-scale)); }
.plan-card ul { display: grid; gap: calc(18.405px * var(--plan-scale)); list-style: none; margin: 0; padding: 0; }
.plan-card--base ul { background: url("./images/base-divider.svg") left top / 100% 1px no-repeat; color: rgba(255,255,255,.8); margin-top: calc(40px * var(--plan-scale)); padding-top: calc(34px * var(--plan-scale)); }
.plan-card li { display: flex; font-size: calc(28px * var(--plan-scale)); gap: .2em; line-height: 1.36; }
.plan-card li::before { content: "·"; flex: 0 0 auto; }
.plan-card .plan-intro { background: url("./images/plus-divider.svg") left top / 100% 1px no-repeat; font-size: calc(29.448px * var(--plan-scale)); line-height: 1.36; margin-top: calc(28.712px * var(--plan-scale)); padding-top: calc(20px * var(--plan-scale)); margin-bottom: calc(25px * var(--plan-scale)); }
.plan-card--plus ul { gap: calc(25px * var(--plan-scale)); }
/* Match the desktop node's text boxes and offsets without border-box rounding. */
@media (min-width: 768px) {
  .plan-card h3 { line-height: calc(70px * var(--plan-scale)); }
  .plan-price { line-height: calc(72px * var(--plan-scale)); }
  .plan-card--plus { padding-inline: calc(52px * var(--plan-scale)); }
  .plan-card--plus .plan-price { line-height: calc(70px * var(--plan-scale)); }
  .plan-card .plan-note { line-height: calc(35px * var(--plan-scale)); }
  .plan-card .plan-trial { line-height: calc(33px * var(--plan-scale)); }
  .plan-card li { line-height: calc(38px * var(--plan-scale)); }
  .plan-card .plan-intro { line-height: calc(40px * var(--plan-scale)); }
  .plan-card--base ul { margin-top: calc(34.276px * var(--plan-scale)); padding-top: calc(39.343px * var(--plan-scale)); }
}
.subscription--plans-ready h2, .subscription--plans-ready .plan-card { opacity: 0; transform: translateY(28px); transition: opacity 720ms ease, transform 1040ms cubic-bezier(.22,1,.36,1); }
.subscription--plans-ready.is-plans-revealed h2, .subscription--plans-ready.is-plans-revealed .plan-card { opacity: 1; transform: none; }
.subscription--plans-ready.is-plans-revealed .plan-card:nth-child(1) { transition-delay: 220ms; }
.subscription--plans-ready.is-plans-revealed .plan-card:nth-child(2) { transition-delay: 400ms; }
@media (min-width: 1440px) { .subscription { --plan-scale: .5625; } }
@media (min-width: 1920px) { .subscription { --plan-scale: .75; } }
@media (min-width: 2560px) { .subscription { --plan-scale: 1; } }
@media (max-width: 767px) {
  .subscription { padding-block: 40px; }
  .subscription > .container { max-width: none; }
  .subscription h2 { font-size: 28px; line-height: 1.2; }
  .subscription__subtitle { font-size: 16px; line-height: 1.4; margin: 12px 0 28px; }
  .plans {
    align-items: stretch;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: auto;
    max-width: 520px;
    width: 100%;
  }
  .plan-card {
    border-radius: 21.971px;
    min-height: 280px;
    padding: 26px 12px 20px;
    box-shadow: inset 0 0 0 .275px #fff, inset 0 1.099px 21.971px rgba(155,178,255,.54);
  }
  .plan-card--plus {
    --trial-strip-height: 20px;
    background: linear-gradient(160deg, #333, #111 75%);
    display: flex;
    flex-direction: column;
    isolation: isolate;
    overflow: hidden;
    min-height: 280px;
    padding: 35px 12px 20px;
    box-shadow: none;
  }
  .plan-card--plus::before {
    background: url("./images/plus-card-mobile.png") center / 100% 100% no-repeat;
    border-radius: inherit;
    content: "";
    inset: var(--trial-strip-height) 0 0 .41px;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }
  .plan-card h3 { font-size: 16px; line-height: 1.36; margin-bottom: 4px; }
  .plan-price { font-size: 18px; line-height: 1.4; }
  .plan-price span { font-size: 11px; line-height: 1; }
  .plan-card--base .plan-price { font-family: "PingFang HK", "PingFang SC", "Plan Manrope", var(--font-heading); }
  .plan-card .plan-note { font-size: 9px; line-height: 1.4; margin-top: 4px; }
  .plan-card--plus .plan-trial {
    align-items: center;
    display: flex;
    font-size: 11px;
    height: var(--trial-strip-height);
    justify-content: center;
    left: 0;
    line-height: 1.2;
    right: 0;
    text-align: center;
    top: 0;
    white-space: nowrap;
  }
  .plan-card--plus .plan-price { font-size: 16px; line-height: 1.4; order: 2; }
  .plan-card--plus .plan-price span { font-size: 10px; }
  .plan-card--plus h3 { order: 1; margin: 0 0 4px; }
  .plan-card--plus .plan-note { order: 3; }
  .plan-card .plan-intro { font-size: 10.5px; line-height: 1.4; margin: 10px 0 6px; padding-top: 6px; }
  .plan-card--plus .plan-intro { order: 4; }
  .plan-card--plus ul { order: 5; }
  .plan-card li { font-size: 10.5px; line-height: 1.4; }
  .plan-card--base ul { background: none; margin-top: 24px; padding-top: 0; }
  .plan-card ul, .plan-card--plus ul { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .subscription--plans-ready h2, .subscription--plans-ready .plan-card { opacity: 1; transform: none; transition: none; }
}