/* =========================================================
   Page abonnements
========================================================= */

.pricing-notes__link{
  margin-left:6px;
  color:var(--text-strong);
  font-weight:600;
  text-decoration:none;
  text-underline-offset:3px;
  transition:color .2s ease;
}

.pricing-notes__link:hover{
  color:var(--accent);
}

.subscriptions-hero{
  min-height:calc(100vh - var(--nav-h));
  padding-top:clamp(92px, 10vw, 132px);
}

.subscriptions-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

.subscription-card{
  position:relative;

  display:flex;
  flex-direction:column;
  gap:16px;

  min-height:100%;
  padding:28px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(88,241,211,.11);

  background:
    linear-gradient(180deg, rgba(20,25,36,.58), rgba(20,25,36,.30)),
    rgba(11,17,30,.42);

  box-shadow:none;
  overflow:hidden;
}

.subscription-card::before{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  top:0;

  height:1px;

  background:linear-gradient(
    90deg,
    rgba(88,241,211,.46),
    rgba(26,81,166,.26),
    transparent
  );

  opacity:.72;
}

.subscription-card--featured{
  border-color:rgba(88,241,211,.30);

  background:
    radial-gradient(520px 240px at 20% 0%, rgba(88,241,211,.075), transparent 60%),
    radial-gradient(520px 260px at 100% 18%, rgba(106,51,216,.12), transparent 62%),
    linear-gradient(180deg, rgba(20,25,36,.70), rgba(20,25,36,.36));

  box-shadow:
    0 18px 46px rgba(0,0,0,.22),
    0 0 0 1px rgba(88,241,211,.055) inset;
}

.subscription-card__badge{
  position:absolute;
  top:18px;
  right:18px;

  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(88,241,211,.16);

  color:rgba(244,250,255,.88);
  background:rgba(88,241,211,.045);

  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.subscription-card__label{
  margin:0;

  color:var(--accent);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.subscription-card h2{
  margin:0;

  color:var(--text-strong);
  font-family:var(--font-title);
  font-size:clamp(23px, 2.4vw, 31px);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.045em;

  padding-right:0; /* <-- important */
}

.subscription-card__price{
  margin:0;

  color:var(--text-strong);
  font-family:var(--font-title);
  font-size:clamp(25px, 2.8vw, 34px);
  font-weight:600;
  letter-spacing:-.045em;
}

.subscription-card__desc{
  margin:0;

  color:rgba(168,177,195,.90);
  line-height:1.68;
}

.subscription-list{
  display:grid;
  gap:10px;

  padding:0;
  margin:0 0 8px;
  list-style:none;
}

.subscription-list li{
  position:relative;

  padding-left:24px;

  color:rgba(231,236,243,.80);
  font-size:14px;
  line-height:1.55;
}

.subscription-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;

  width:9px;
  height:5px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);

  transform:rotate(-45deg);
}

.subscription-card .btn{
  width:100%;
  margin-top:auto;
}

.subscriptions-note{
  max-width:820px;
  margin:24px auto 0;
  padding-top:18px;
  border-top:1px solid var(--line-soft);

  text-align:center;
}

.subscriptions-note p{
  margin:0;

  color:rgba(168,177,195,.82);
  font-size:13px;
  line-height:1.6;
}

@media (max-width: 1100px){
  .subscriptions-grid{
    grid-template-columns:1fr;
  }

  .subscription-card h2{
    padding-right:0;
  }
}

@media (max-width: 760px){
  .subscriptions-hero{
    padding-top:calc(var(--nav-h) + 42px);
  }

  .subscription-card{
    padding:24px;
  }

  .subscription-card__badge{
    position:relative;
    top:auto;
    right:auto;
    width:max-content;
    order:-1;
  }

  .subscriptions-note{
    text-align:left;
  }
}

.billing-toggle{
  width:max-content;
  max-width:100%;
  margin:-28px auto 36px;
  padding:5px;
  border-radius:999px;
  border:1px solid rgba(88,241,211,.14);

  display:flex;
  gap:4px;

  background:
    linear-gradient(180deg, rgba(20,25,36,.58), rgba(20,25,36,.30)),
    rgba(11,17,30,.54);

  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.018) inset;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.billing-toggle__btn{
  min-width:104px;
  min-height:38px;
  padding:0 16px;
  border:0;
  border-radius:999px;

  color:rgba(218,231,242,.68);
  background:transparent;

  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;

  transition:
    color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .18s ease;
}

.billing-toggle__btn:hover{
  color:var(--text-strong);
}

.billing-toggle__btn.is-active{
  color:#fff;
  background:var(--gradient-main);

  box-shadow:
    0 10px 24px rgba(26,81,166,.24),
    0 0 24px rgba(88,241,211,.08);
}

.billing-toggle__btn:active{
  transform:scale(.98);
}

.subscription-card__price{
  transition:
    opacity .18s ease,
    transform .18s ease;
}

.subscription-card__price.is-changing{
  opacity:0;
  transform:translateY(4px);
}

@media (max-width: 760px){
  .billing-toggle{
    width:100%;
    margin:-18px auto 28px;
  }

  .billing-toggle__btn{
    flex:1;
    min-width:0;
  }
}

.subscription-card__saving{
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(88,241,211,.18);

  color:rgba(244,250,255,.92);
  background:rgba(88,241,211,.07);

  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;

  box-shadow:0 0 22px rgba(88,241,211,.08);
}

.subscription-card__saving[hidden]{
  display:none !important;
}

.subscription-card__type{
  margin:-8px 0 0;
  color:rgba(218,231,242,.62);
  font-size:14px;
  font-weight:600;
}

.subscription-card__billing{
  margin:-10px 0 0;

  color:rgba(218,231,242,.58);
  font-size:13px;
  font-weight:600;
  line-height:1.45;
}

.subscription-card__price[data-price]::after{
  content:"";
}

[data-billing-mode="yearly"] .subscription-card__price{
  color:var(--text-strong);
}

[data-billing-mode="yearly"] .subscription-card__billing{
  color:rgba(88,241,211,.78);
}


.subscriptions-note p{
  margin:0;

  color:rgba(168,177,195,.82);
  font-size:13px;
  line-height:1.6;
}

.subscriptions-note p + p{
  margin-top:8px;
}

.subscriptions-note__star{
  color:rgba(88,241,211,.78);
  font-weight:800;
}

.subscriptions-note__billing{
  color:rgba(218,231,242,.68) !important;
}