* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: 'Lora', Georgia, serif;
  color: #2d1f4a;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(135deg, #faf6fc 0%, #efe6f5 45%, #e3d6ee 100%);
  background-attachment: fixed;
}

.pricing {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}

.back-link {
  color: #7a5ba8;
  font-size: 14px;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

h1 {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 52px;
  line-height: 1.1;
  color: #4a2d7a;
  text-align: center;
  margin: 20px 0 32px;
}

/* The sliding pill sits behind two equal halves and moves to whichever is selected. */
.billing-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 340px);
  margin: 0 auto 28px;
  padding: 4px;
  background: #efe3f7;
  border: 1.5px solid #7a5ba8;
  border-radius: 999px;
}
.billing-switch::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: linear-gradient(135deg, #a68bd1 0%, #7a5ba8 100%);
  border-radius: 999px;
  transition: transform 0.2s ease;
}
.billing-switch[data-period="yearly"]::before { transform: translateX(100%); }

.billing-switch button {
  position: relative;
  padding: 9px 8px;
  border: none;
  background: none;
  color: #5a3d8c;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.billing-switch button[aria-pressed="true"] { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .billing-switch::before, .billing-switch button { transition: none; }
}

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* A column, so each button sits at the bottom whatever the length of the list. */
.plan {
  display: flex;
  flex-direction: column;
  background: #fffdf5;
  border: 1px solid #d4c4e8;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 10px 28px rgba(74, 45, 122, 0.12);
}

.plan-paid { border: 2px solid #7a5ba8; }

h2 {
  font-size: 20px;
  font-weight: 500;
  color: #4a2d7a;
}

.price {
  font-size: 40px;
  font-weight: 500;
  color: #4a2d7a;
  margin-top: 12px;
}
.price span { font-size: 15px; font-weight: 400; color: #5a3d8c; }
.price s { font-size: 22px; font-weight: 400; color: #8a7fa6; }

.price-note {
  font-size: 14px;
  color: #5a3d8c;
  margin-top: 2px;
}

ul {
  flex: 1;
  list-style: none;
  margin: 22px 0 26px;
  padding-top: 20px;
  border-top: 1px solid #d4c4e8;
}

li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.45;
}
li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #7a5ba8;
  font-weight: 700;
}

.plan-btn {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 28px;
  background: linear-gradient(135deg, #a68bd1 0%, #7a5ba8 100%);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* The two states with nothing to click: Coming soon, and Current plan (a link with no address). */
.plan-btn:disabled,
a.plan-btn:not([href]) {
  background: #efe3f7;
  color: #5a3d8c;
  cursor: default;
}

@media (max-width: 600px) {
  .plans { grid-template-columns: 1fr; }
  h1 { font-size: 44px; margin-bottom: 24px; }
}