/* Pricing: plan cards, feature tiles, no-monthly-fees promise and the paying timeline.
   Our colours only: indigo, violet, cyan, pink. Labels are plain bold text, never pills. */
@property --pz-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pz { --pz-grad: linear-gradient(100deg, #22d3ee, #6366f1 45%, #a855f7 70%, #ec4899); margin: 26px 0 10px; }

/* Price line on the pricing page */
.pz-banner { margin: 0 auto 8px; max-width: 30ch; text-align: center; font-size: clamp(1.9rem, 4.6vw, 3.3rem) !important; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.pz-hot { background: linear-gradient(100deg, #22d3ee, #a855f7 55%, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Plan cards */
.pz-plans { display: grid; gap: 26px; }
@media (min-width: 860px) { .pz-plans { grid-template-columns: 1.08fr 1fr; align-items: stretch; } }
.pz-plan { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 34px 30px 30px; border-radius: 28px; background: #fff; color: #0f0c29; box-shadow: 0 24px 60px rgba(15, 12, 41, .28); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.pz-plan:hover { transform: translateY(-6px); box-shadow: 0 34px 70px rgba(79, 70, 229, .35); }
.pz-plan--hot { background: radial-gradient(120% 90% at 0% 0%, #2b1f7a 0%, #140f45 55%, #0d0a2e 100%); color: #fff; }
/* A slowly turning gradient frame around the main card */
.pz-plan--hot::before { content: ""; position: absolute; inset: -3px; z-index: -2; border-radius: 31px; background: conic-gradient(from var(--pz-ang), #22d3ee, #6366f1, #a855f7, #ec4899, #22d3ee); animation: pz-spin 6s linear infinite; }
.pz-plan--hot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 28px; background: inherit; }
@keyframes pz-spin { to { --pz-ang: 360deg; } }
.pz-name { margin: 0; font-weight: 900; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .12em; color: #7c3aed !important; }
.pz-plan--hot .pz-name { color: #67e8f9 !important; }
.pz-price { margin: 0; display: flex; align-items: flex-start; gap: 4px; font-size: clamp(4.4rem, 10vw, 7rem); font-weight: 900; line-height: .9; letter-spacing: -.04em; background: linear-gradient(100deg, #4f46e5, #a855f7 55%, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pz-plan--hot .pz-price { background-image: linear-gradient(100deg, #67e8f9, #c4b5fd 50%, #f9a8d4); filter: drop-shadow(0 6px 24px rgba(168, 85, 247, .45)); }
.pz-cur { font-size: .45em; margin-top: .12em; }
.pz-from { align-self: center; margin-right: 8px; font-size: .22em; letter-spacing: .08em; text-transform: uppercase; }
.pz-once { margin: 0; font-weight: 800; font-size: 1.15rem !important; color: inherit !important; }
.pz-plan:not(.pz-plan--hot) .pz-once { color: #1e1b4b !important; }

/* £99 now, the rest later: a bar split in two */
.pz-split { display: grid; grid-template-columns: 1fr 2fr; height: 74px; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); background: rgba(124, 58, 237, .12); }
.pz-seg { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; color: #fff; transform-origin: left; }
.pz-seg b { font-size: 1.45rem; line-height: 1.05; font-weight: 900; }
.pz-seg span { font-size: .95rem; font-weight: 700; opacity: .95; }
.pz-seg1 { background: linear-gradient(135deg, #06b6d4, #4f46e5); }
.pz-seg2 { background: linear-gradient(135deg, #7c3aed, #db2777); }
.pz-plan.fx .pz-seg { transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .8, .2, 1) .25s; }
.pz-plan.fx .pz-seg2 { transition-delay: .55s; }
.pz-plan.fx.is-in .pz-seg { transform: none; }
.pz-mini { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.pz-mini li { position: relative; padding-left: 32px; font-size: 1.12rem; font-weight: 700; color: inherit !important; }
.pz-plan:not(.pz-plan--hot) .pz-mini li { color: #1e1b4b !important; }
.pz-mini li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, #22d3ee, #a855f7); }
.pz-btn { margin-top: auto; align-self: flex-start; font-size: 1.15rem !important; padding: 16px 26px !important; }
.pz-btn--alt { background: #0f0c29 !important; color: #fff !important; }
.pz-plan .pay-link { margin-top: 2px; }

/* Every website includes */
.pz-h { margin: 52px 0 18px !important; font-size: clamp(2rem, 4.6vw, 3.2rem) !important; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; }
.pz-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.pz-feats li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; color: #0f0c29 !important; font-size: 1.12rem; font-weight: 800; line-height: 1.3; box-shadow: 0 10px 26px rgba(15, 12, 41, .14); transition: transform .3s, box-shadow .3s; }
.pz-feats li:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(124, 58, 237, .3); }
.pz-ico { flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #22d3ee, #6366f1 50%, #ec4899); box-shadow: 0 8px 18px rgba(99, 102, 241, .35); transition: transform .4s cubic-bezier(.2, .8, .2, 1.4); }
.pz-ico svg { width: 26px; height: 26px; }
.pz-feats li:nth-child(3n+2) .pz-ico { background: linear-gradient(135deg, #a855f7, #ec4899); }
.pz-feats li:nth-child(3n) .pz-ico { background: linear-gradient(135deg, #06b6d4, #4f46e5); }
.pz-feats li:hover .pz-ico { transform: rotate(-8deg) scale(1.08); }

/* No monthly fees. Ever. */
.pz-nofee { margin: 30px 0 0; padding: 30px 28px; border-radius: 26px; text-align: center; color: #fff; background: linear-gradient(110deg, #4f46e5, #7c3aed, #db2777, #7c3aed, #4f46e5); background-size: 300% 100%; animation: pz-flow 14s ease-in-out infinite; box-shadow: 0 24px 50px rgba(124, 58, 237, .35); }
@keyframes pz-flow { 50% { background-position: 100% 0; } }
.pz-nofee .pz-big { margin: 0 0 6px; font-size: clamp(2rem, 5.4vw, 3.6rem) !important; font-weight: 900; line-height: 1.05; text-transform: uppercase; color: #fff !important; }
.pz-nofee .grad-text { background: none !important; -webkit-text-fill-color: #67e8f9 !important; color: #67e8f9 !important; }
.pz-nofee p { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff !important; }

/* How paying works: 1, 2, 3 joined by a line that fills as it comes into view */
.pz-steps { position: relative; list-style: none; margin: 34px 0 10px; padding: 0; display: grid; gap: 22px; counter-reset: none; }
.pz-steps::before { content: ""; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 6px; border-radius: 6px; background: linear-gradient(180deg, #22d3ee, #a855f7, #ec4899); transform: scaleY(0); transform-origin: top; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.pz-steps.is-in::before { transform: none; }
.pz-step { position: relative; padding: 24px 24px 24px 112px; border-radius: 24px; background: #fff; color: #0f0c29; box-shadow: 0 18px 40px rgba(15, 12, 41, .2); opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.pz-steps.is-in .pz-step { opacity: 1; transform: none; }
.pz-steps.is-in .pz-step:nth-child(2) { transition-delay: .35s; }
.pz-steps.is-in .pz-step:nth-child(3) { transition-delay: .7s; }
.pz-num { position: absolute; left: 12px; top: 22px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, #22d3ee, #6366f1 50%, #ec4899); box-shadow: 0 0 0 6px #fff, 0 10px 26px rgba(99, 102, 241, .5); }
.pz-amt { margin: 0; font-size: clamp(2.4rem, 6vw, 3.4rem) !important; font-weight: 900; line-height: 1; letter-spacing: -.03em; background: linear-gradient(100deg, #4f46e5, #a855f7 55%, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.pz-step h3 { margin: 6px 0 6px !important; font-size: 1.45rem !important; font-weight: 900; color: #0f0c29 !important; -webkit-text-fill-color: #0f0c29 !important; background: none !important; }
.pz-step p:not(.pz-amt) { margin: 0; font-size: 1.12rem !important; color: #3f3a63 !important; }
@media (min-width: 860px) {
  .pz-steps { grid-template-columns: repeat(3, 1fr); gap: 26px; padding-top: 44px; }
  .pz-steps::before { left: 16%; right: 16%; top: 40px; bottom: auto; width: auto; height: 6px; background: linear-gradient(90deg, #22d3ee, #a855f7, #ec4899); transform: scaleX(0); transform-origin: left; }
  .pz-steps.is-in::before { transform: none; }
  .pz-step { padding: 64px 26px 28px; text-align: center; }
  .pz-num { left: 50%; top: -34px; transform: translateX(-50%); width: 76px; height: 76px; font-size: 2.2rem; }
}

/* Gentle fade-up for anything marked fx */
.fx:not(.pz-plan):not(.pz-steps) { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.fx.is-in:not(.pz-plan):not(.pz-steps) { opacity: 1; transform: none; }
.pz-plan.fx { opacity: 0; transform: translateY(26px); }
.pz-plan.fx.is-in { opacity: 1; transform: none; transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.pz-plan.fx.is-in:hover { transform: translateY(-6px); }
.pz-plans .pz-plan.fx:nth-child(2) { transition-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .pz-plan--hot::before, .pz-nofee { animation: none; }
  .fx, .pz-plan.fx, .pz-step, .pz-seg, .pz-steps::before { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Wider than the text column, so the cards can breathe */
.pz, .pz-steps, .sty-grid { width: min(1120px, 94vw); max-width: none; margin-left: calc(50% - min(560px, 47vw)) !important; margin-right: 0; }
.pz { margin-bottom: 64px !important; }
.pz-split { grid-template-columns: minmax(118px, 1fr) 2fr; }
@media (min-width: 1000px) { .pz-feats { grid-template-columns: repeat(4, 1fr); } }
.pz-feats li:last-child { grid-column: 1 / -1; justify-content: center; font-size: 1.3rem; color: #fff !important; background: linear-gradient(110deg, #4f46e5, #7c3aed 50%, #db2777); }
.pz-feats li:last-child .pz-ico { background: #fff; color: #7c3aed; }
.pz-steps { margin-bottom: 56px !important; }
.pz-feats, .pz-steps, .pz-mini { padding-left: 0 !important; margin-left: 0; }
.pz-steps { margin-left: calc(50% - min(560px, 47vw)) !important; }