/* ==========================================================================
   PRICING PLANS — Starter / Growth / Enterprise product-led comparison.
   Loaded by pricing.html only.

   Each card is a size container: the illustration (.pl-art) is drawn in em
   with font-size tied to the card's width, so it scales as one piece, and the
   card's type steps with cqi. Entrance waits for .is-in on the section (set
   once by pricing-hero.js on first view).
   ========================================================================== */
.pl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pl-section {
  --pl-ease: cubic-bezier(.22, 1, .36, 1);
  --pl-navy: #0b1533; --pl-muted: #536789;
  position: relative; isolation: isolate; overflow-x: clip;
  padding: clamp(28px, 4vh, 56px) 0 clamp(48px, 7vh, 96px);
}
/* Ambient glows: blue left, green centre, purple right. */
.pl-section::before {
  content: ''; position: absolute; inset: 8% 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 45% at 12% 55%, rgb(20 107 255 / 7%), transparent 70%),
    radial-gradient(28% 45% at 50% 60%, rgb(16 185 129 / 7%), transparent 70%),
    radial-gradient(30% 45% at 88% 55%, rgb(124 58 237 / 7%), transparent 70%);
}
.pl-shell { width: min(100% - 2 * clamp(12px, 1.8vw, 32px), 1760px); margin-inline: auto; }

/* --- Heading ------------------------------------------------------------- */
.pl-head { text-align: center; max-width: 1640px; margin: 0 auto; }
.pl-title { margin: 0; font-size: clamp(30px, 2.75vw, 52px); font-weight: 700; line-height: 1.12; letter-spacing: -.04em; color: var(--pl-navy); text-wrap: balance; }
.pl-title > span { display: inline-block; }
.pl-grad { background: linear-gradient(90deg, #146bff 0%, #4b67ff 55%, #6d35e8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
.pl-lede { max-width: 1100px; margin: clamp(10px, 1.6vh, 16px) auto 0; font-size: clamp(15.5px, 1.05vw, 19px); line-height: 1.5; color: #5d6c8c; text-wrap: pretty; }

/* --- Cards --------------------------------------------------------------- */
.pl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.3vw, 24px); margin-top: clamp(26px, 4vh, 36px); align-items: stretch; }
.pl-card {
  --a: #146bff; --a-rgb: 20 107 255; --tint: #e5f0ff;
  --base: linear-gradient(145deg, #ffffff 0%, #f3f8ff 100%);
  --art-top: 0px;
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  container-type: inline-size;
  display: flex; flex-direction: column;
  min-height: 640px;
  padding: clamp(24px, 1.75vw, 32px);
  border-radius: clamp(22px, 1.6vw, 28px);
  background: var(--base);
  border: 1px solid rgb(var(--a-rgb) / 25%);
  box-shadow: 0 20px 60px rgb(40 70 130 / 8%), inset 0 1px 0 #fff;
  transition: transform 450ms var(--pl-ease), box-shadow 450ms var(--pl-ease), border-color 450ms var(--pl-ease);
}
.pl-card--growth { --a: #0faf78; --a-rgb: 15 175 120; --tint: #e3f8ef; --base: linear-gradient(145deg, #ffffff 0%, #ecfff8 100%); border-color: rgb(16 185 129 / 75%); box-shadow: 0 20px 60px rgb(40 70 130 / 8%), 0 24px 60px -30px rgb(16 185 129 / 40%), inset 0 1px 0 #fff; }
.pl-card--enterprise { --a: #7c3aed; --a-rgb: 124 58 237; --tint: #efe6ff; --base: linear-gradient(145deg, #ffffff 0%, #f7f1ff 100%); }
.pl-card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(75% 46% at 82% 16%, rgb(var(--a-rgb) / 15%), rgb(var(--a-rgb) / 5%) 55%, transparent 75%); opacity: .8; transition: opacity 450ms var(--pl-ease); }

.pl-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pl-blob { position: absolute; border-radius: 50%; filter: blur(55px); will-change: transform; }
.pl-blob--a { width: 72%; height: 50%; right: -18%; top: -8%; background: rgb(var(--a-rgb) / 21%); animation: pl-drift 10s ease-in-out infinite alternate; }
.pl-blob--b { width: 50%; height: 36%; left: -18%; bottom: 4%; background: rgb(var(--a-rgb) / 12%); animation: pl-drift 12s ease-in-out -4s infinite alternate-reverse; }
.pl-card--growth .pl-blob--a { animation-duration: 12s; }
.pl-card--growth .pl-blob--b { background: rgb(250 204 21 / 16%); left: auto; right: 4%; bottom: auto; top: 26%; width: 26%; height: 18%; }
.pl-card--enterprise .pl-blob--a { animation-duration: 14s; background: rgb(139 92 246 / 22%); }
.pl-card--enterprise .pl-blob--b { background: rgb(99 102 241 / 12%); }
.pl-card--growth { --art-top: 22px; }
.pl-card--growth .pl-art { right: -.4em; }
.pl-card--growth .pl-desc { width: 56%; }
.pl-ring { position: absolute; width: 58%; aspect-ratio: 1; right: -10%; top: -12%; border-radius: 50%; border: 1.5px solid rgb(16 185 129 / 16%); animation: pl-drift 14s ease-in-out infinite alternate; }
@keyframes pl-drift { from { transform: translate3d(0, 0, 0) scale(1); opacity: .85; } to { transform: translate3d(-14px, 10px, 0) scale(1.06); opacity: 1; } }

/* Top row, title, description */
.pl-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.pl-tier { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 16px; border-radius: 999px; background: var(--tint); color: var(--a); font-size: 13px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.pl-card--growth .pl-tier { color: #0b8f62; }
.pl-pick {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 9px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #0fbb83, #08a875); color: #fff; font-size: clamp(13px, .86vw, 15px); font-weight: 650; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 8px 18px -10px rgb(15 175 120 / 80%);
}
.pl-pick svg { width: 18px; height: 18px; flex-shrink: 0; }
.pl-pick::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 45%) 50%, transparent 70%); transform: translateX(-120%); animation: pl-sheen 6s ease-in-out 2.5s infinite; }
@keyframes pl-sheen { 0% { transform: translateX(-120%); } 33%, 100% { transform: translateX(120%); } }

.pl-name { position: relative; z-index: 3; width: 64%; margin: clamp(18px, 2.2vh, 26px) 0 0; font-size: clamp(27px, 6.9cqi, 36px); font-weight: 750; line-height: 1.03; letter-spacing: -.04em; color: var(--pl-navy); }
.pl-name span { color: var(--a); }
.pl-card--growth .pl-name span { color: #0b9d6c; }
.pl-desc { position: relative; z-index: 3; width: 60%; max-width: 350px; margin: 16px 0 0; font-size: clamp(14.5px, 3.05cqi, 16px); line-height: 1.5; color: var(--pl-muted); }

/* Illustration */
/* --u is the illustration unit. It is substituted inside the card, so cqi
   resolves against the card's own width. .pl-intro reserves the art's height
   so the feature list always starts below it. */
.pl-intro { --u: clamp(8.2px, calc(100cqi / 44), 11.2px); position: relative; min-height: calc(23.2 * var(--u) + var(--art-top) - 28px); }
.pl-art { --u: clamp(8.2px, calc(100cqi / 44), 11.2px); position: absolute; z-index: 2; right: .2em; top: calc(3.4em + var(--art-top)); width: 24em; height: 21em; font-size: var(--u); pointer-events: none; }
.pl-art-par { --rx: 0deg; --ry: 0deg; position: absolute; inset: 0; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 500ms var(--pl-ease); }
.pl-card.is-tracking .pl-art-par { transition-duration: 260ms; }
.pl-art > * { will-change: transform; }
.pl-glow { position: absolute; left: 1em; top: 0; width: 22em; height: 20em; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--a-rgb) / 22%), rgb(var(--a-rgb) / 6%) 60%, transparent); }

.st-back { position: absolute; left: 10.5em; top: 2.6em; width: 7.5em; height: 9em; border-radius: 1.4em; background: linear-gradient(160deg, #ffffff, #e7f0ff); box-shadow: 0 1.2em 2.6em -1em rgb(30 70 150 / 25%); transform: rotate(10deg); }
.st-profile { position: absolute; left: 4em; top: 2.6em; width: 10.5em; height: 13.5em; padding: 1.6em 1.4em; border-radius: 1.6em; background: linear-gradient(165deg, rgb(255 255 255 / 96%), rgb(236 243 255 / 92%)); border: 1px solid #fff; box-shadow: 0 1.6em 3.4em -1.2em rgb(30 70 150 / 32%), inset 0 1px 0 #fff; transform: rotate(-9deg); }
.st-avatar { display: grid; place-items: center; width: 5.2em; height: 5.2em; border-radius: 50%; background: linear-gradient(150deg, #4f8cff, #146bff); box-shadow: 0 .6em 1.4em -.4em rgb(20 107 255 / 60%); }
.st-avatar svg { width: 3.2em; height: 3.2em; }
.st-profile i { display: block; height: .75em; margin-top: .9em; border-radius: 1em; background: #d8e5fb; }
.st-profile i:nth-of-type(1) { width: 85%; margin-top: 1.4em; background: #b9d0f8; }
.st-profile i:nth-of-type(2) { width: 65%; }
.st-profile i:nth-of-type(3) { width: 75%; }
.st-cal { position: absolute; left: 13.2em; top: 7.2em; display: grid; place-items: center; width: 6.6em; height: 6.6em; border-radius: 1.5em; background: linear-gradient(150deg, #5b95ff, #1462f5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), 0 1em 2em -.8em rgb(20 107 255 / 60%); transform: rotate(5deg); }
.st-cal svg { width: 3.6em; height: 3.6em; }
.st-clock { position: absolute; left: 14.6em; top: 14.4em; display: grid; place-items: center; width: 5.2em; height: 5.2em; border-radius: 50%; background: linear-gradient(150deg, #4f8cff, #1462f5); box-shadow: 0 0 0 .4em #fff, 0 1em 2em -.6em rgb(20 107 255 / 55%); }
.st-clock svg { width: 3em; height: 3em; }

.gr-card { position: absolute; left: 4.4em; top: 3em; width: 12.5em; padding: 1.5em 1.4em 1.3em; border-radius: 1.6em; background: linear-gradient(165deg, rgb(255 255 255 / 96%), rgb(236 255 247 / 92%)); border: 1px solid #fff; box-shadow: 0 1.6em 3.4em -1.2em rgb(10 110 80 / 35%), inset 0 1px 0 #fff; transform: rotate(-4deg); }
.gr-card > b { display: block; font-size: 1.7em; font-weight: 800; letter-spacing: .02em; color: #0b6b4c; }
.gr-rupee { display: flex; align-items: center; gap: .6em; margin-top: .9em; }
.gr-rupee span { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #dff7ec; color: #0b9d6c; font-size: 1.3em; font-weight: 700; }
.gr-rupee i, .gr-row i { display: block; height: .6em; flex: 1; border-radius: 1em; background: #cdeedf; }
.gr-row { display: flex; align-items: center; gap: .5em; margin-top: .75em; }
.gr-row em { font-style: normal; font-size: .95em; font-weight: 700; color: #0b6b4c; width: 2em; }
.gr-tick { position: relative; width: 1.6em; height: 1.6em; flex-shrink: 0; border-radius: 50%; background: #12b76a; }
.gr-tick::after { content: ''; position: absolute; left: 33%; top: 20%; width: 28%; height: 45%; border: solid #fff; border-width: 0 .18em .18em 0; transform: rotate(45deg); }
.gr-flag { position: absolute; left: 15.6em; top: 3.4em; width: 4.6em; height: 4.6em; border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, #ff9933 0 33.3%, #ffffff 33.3% 66.6%, #138808 66.6%); box-shadow: 0 0 0 .3em #fff, 0 .8em 1.8em -.5em rgb(15 30 70 / 35%); }
.gr-flag span { position: absolute; left: 50%; top: 50%; width: 1.25em; height: 1.25em; margin: -.625em 0 0 -.625em; border-radius: 50%; border: .14em solid #0a3a8c; }
.gr-coins { position: absolute; display: block; width: 5em; }
.gr-coins i { position: absolute; left: 0; width: 5em; height: 1.6em; border-radius: 50%; background: linear-gradient(180deg, #ffd45e 0%, #f5b42a 55%, #d98b0b 100%); box-shadow: inset 0 .2em 0 rgb(255 255 255 / 55%), 0 .15em 0 #c27a08; }
.gr-coins i:nth-child(1) { bottom: 0; } .gr-coins i:nth-child(2) { bottom: 1em; } .gr-coins i:nth-child(3) { bottom: 2em; }
.gr-coins i:nth-child(4) { bottom: 3em; } .gr-coins i:nth-child(5) { bottom: 4em; } .gr-coins i:nth-child(6) { bottom: 5em; }
.gr-coins--a { left: 15.6em; top: 12.6em; height: 7em; }
.gr-coins--b { left: 19.4em; top: 15.4em; height: 4.4em; transform: scale(.9); }
.gr-spark { position: absolute; width: .8em; height: .8em; border-radius: 50%; background: #34d399; }
.gr-spark--1 { left: 2.6em; top: 9em; }
.gr-spark--2 { left: 21.6em; top: 1.6em; width: .6em; height: .6em; background: #0faf78; }

.en-tower { position: absolute; left: 9em; top: 1.2em; width: 7.4em; height: 17.5em; border-radius: .9em .9em .4em .4em; background: linear-gradient(165deg, #a98bff 0%, #7c4dff 55%, #5b2fd6 100%); box-shadow: 0 1.6em 3.4em -1.2em rgb(91 47 214 / 50%), inset .25em 0 0 rgb(255 255 255 / 20%); }
.en-tower i { position: absolute; inset: 1.6em 1em 1.4em; background: repeating-linear-gradient(180deg, transparent 0 1em, #7a4bf2 1em 1.6em), repeating-linear-gradient(90deg, rgb(255 255 255 / 65%) 0 1em, transparent 1em 1.6em); border-radius: .2em; opacity: .9; }
.en-tower b { position: absolute; left: 1.2em; right: 1.2em; top: -.9em; height: 1.4em; border-radius: .5em .5em 0 0; background: #9f7bff; }
.en-wing { position: absolute; left: 4.2em; top: 8.8em; width: 7em; height: 10em; border-radius: .8em .8em .3em .3em; background: linear-gradient(165deg, #c4b2ff 0%, #9a74ff 100%); box-shadow: 0 1.2em 2.6em -1em rgb(91 47 214 / 40%); }
.en-wing i { position: absolute; inset: 1.2em .9em 1em; background: repeating-linear-gradient(180deg, transparent 0 .9em, #a885ff .9em 1.5em), repeating-linear-gradient(90deg, rgb(255 255 255 / 70%) 0 .9em, transparent .9em 1.5em); opacity: .9; }
.en-shield { position: absolute; left: 13.6em; top: 4.6em; display: grid; place-items: center; width: 6.2em; height: 6.2em; border-radius: 50%; background: rgb(255 255 255 / 92%); box-shadow: 0 1em 2.2em -.6em rgb(91 47 214 / 45%); }
.en-shield > span { display: grid; place-items: center; width: 4.6em; height: 4.6em; border-radius: 50%; background: linear-gradient(150deg, #9b6bff, #6d28d9); }
.en-shield svg { width: 2.6em; height: 2.6em; }
.en-chart { position: absolute; left: 15.4em; top: 12.4em; display: flex; align-items: flex-end; gap: .55em; width: 7.4em; height: 6.4em; padding: 1em 1.1em; border-radius: 1.3em; background: linear-gradient(165deg, rgb(255 255 255 / 96%), rgb(243 236 255 / 92%)); border: 1px solid #fff; box-shadow: 0 1.2em 2.6em -1em rgb(91 47 214 / 40%); }
.en-chart i { flex: 1; height: calc(var(--h) * 100%); border-radius: .3em .3em .1em .1em; background: linear-gradient(180deg, #8b5cf6, #c4b5fd); }
.en-chart svg { position: absolute; left: 1em; right: 1em; top: 1em; width: calc(100% - 2em); height: 3em; overflow: visible; }

/* Feature rows */
.pl-feats { position: relative; z-index: 2; flex: 1 0 auto; display: grid; grid-auto-rows: minmax(46px, auto); align-content: stretch; gap: 7px; margin: clamp(20px, 2.6vh, 28px) 0 0; padding: 0; list-style: none; }
.pl-feats li {
  display: flex; align-items: center; gap: 14px; padding: 4px 14px 4px 5px;
  border-radius: 15px; background: rgb(255 255 255 / 68%); border: 1px solid rgb(255 255 255 / 80%);
  box-shadow: 0 1px 2px rgb(40 70 130 / 4%);
  font-size: clamp(13.5px, 2.85cqi, 15px); font-weight: 500; line-height: 1.35; color: var(--pl-muted);
  transition: transform 230ms var(--pl-ease), background-color 230ms ease, color 230ms ease, box-shadow 230ms ease;
}
.pl-fi { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; color: var(--a); background: var(--tint); transition: transform 220ms var(--pl-ease); }
.pl-fi svg { width: 19px; height: 19px; }
.pl-feats li:hover { transform: translateX(3px); background: rgb(255 255 255 / 92%); color: #33435f; box-shadow: 0 4px 12px -6px rgb(var(--a-rgb) / 30%); }
.pl-feats li:hover .pl-fi { transform: scale(1.05); }

/* CTA */
.pl-cta {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; margin-top: auto; border-radius: 14px; border: 2px solid var(--a);
  background: rgb(var(--a-rgb) / 4%); color: var(--a);
  font-size: 16px; font-weight: 650; text-decoration: none;
  transition: transform 280ms var(--pl-ease), background-color 260ms ease, color 260ms ease, box-shadow 260ms var(--pl-ease);
}
.pl-cta svg { width: 22px; height: 22px; transition: transform 260ms var(--pl-ease); }
.pl-cta:hover { transform: translateY(-2px); background: var(--a); color: #fff; box-shadow: 0 12px 24px -14px rgb(var(--a-rgb) / 75%); }
.pl-cta:hover svg { transform: translateX(5px); }
.pl-cta:active { transform: translateY(0) scale(.98); transition-duration: 120ms; }
.pl-cta:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }
.pl-cta--solid { color: #fff; border-color: transparent; background: linear-gradient(180deg, #13b981, #0faf78); box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 10px 22px -12px rgb(15 175 120 / 75%); }
.pl-cta--solid:hover { background: linear-gradient(180deg, #1ac78d, #12bb81); }

/* The CTA sits a fixed step under the list and on the card floor (margin-top: auto). */
.pl-feats { margin-bottom: 24px; }

/* --- Hover --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .pl-card:hover { transform: translateY(-5px); border-color: rgb(var(--a-rgb) / 38%); box-shadow: 0 28px 70px -10px rgb(40 70 130 / 14%), inset 0 1px 0 #fff; }
  .pl-card--growth:hover { border-color: rgb(16 185 129 / 85%); box-shadow: 0 28px 70px -10px rgb(40 70 130 / 12%), 0 30px 70px -30px rgb(16 185 129 / 55%), inset 0 1px 0 #fff; }
  .pl-card:hover::after { opacity: 1; }
  .pl-art { transition: transform 450ms var(--pl-ease); }
  .pl-card:hover .pl-art { transform: translateY(-7px) scale(1.015); }
}

/* --- Entrance (once) ----------------------------------------------------- */
.js .pl-section:not(.is-in) :is(.pl-a, .pl-card) { opacity: 0; }
.pl-section.is-in .pl-a { animation: pl-up 720ms var(--pl-ease) var(--d, 0ms) backwards; }
.pl-section.is-in .pl-title .pl-a { --y: 25px; }
.pl-section.is-in .pl-lede { --y: 15px; }
.pl-section.is-in .pl-card { animation: pl-up 800ms var(--pl-ease) backwards; animation-delay: calc(260ms + var(--k) * 120ms); --y: 40px; }
.pl-section.is-in .pl-art-par { animation: pl-art 800ms var(--pl-ease) calc(580ms + var(--k) * 120ms) backwards, pl-float var(--float, 6s) ease-in-out calc(1500ms + var(--k) * 700ms) infinite; }
.pl-card--growth { --float: 5.4s; }
.pl-card--enterprise { --float: 6.6s; }
@keyframes pl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.pl-section.is-in .pl-feats li { animation: pl-row 520ms var(--pl-ease) backwards; animation-delay: calc(620ms + var(--k) * 120ms + var(--r) * 50ms); }
.pl-section.is-in .pl-tier.pl-a { animation-delay: calc(420ms + var(--k) * 120ms); --y: 8px; }
@keyframes pl-up { from { opacity: 0; transform: translateY(var(--y, 20px)); } }
@keyframes pl-art { from { opacity: 0; transform: perspective(900px) translateY(25px) scale(.88); } }
@keyframes pl-row { from { opacity: 0; transform: translateX(-10px); } }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .pl-cards { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
  .pl-title { font-size: clamp(30px, 4.6vw, 44px); }
}
@media (max-width: 600px) {
  .pl-title { font-size: clamp(28px, 8.2vw, 36px); }
  .pl-title > span { display: inline; }
  .pl-card { padding: 22px 18px; }
}
/* Narrow cards: illustration shrinks to the corner and the copy runs full width under the title. */
/* The art sits beside the title, which reserves the art's height, and the
   description runs full width underneath — nothing has to wrap around it. */
@container (max-width: 360px) {
  .pl-intro, .pl-art { --u: calc(100cqi / 47); }
  .pl-intro { min-height: 0; }
  .pl-art { top: 44px; right: -.8em; }
  .pl-card--growth .pl-art { top: 57px; right: -1.2em; }
  .pl-name { width: 58%; min-height: calc(17.6 * var(--u) - 28px); }
  .pl-card--growth .pl-name { min-height: calc(17.6 * var(--u) - 15px); }
  .pl-desc, .pl-card--growth .pl-desc { width: 100%; max-width: none; margin-top: 18px; }
  .pl-feats li { gap: 12px; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pl-section *, .pl-section *::before, .pl-section *::after { animation: none !important; }
  .js .pl-section:not(.is-in) :is(.pl-a, .pl-card) { opacity: 1; }
  .pl-art-par { transform: none !important; transition: none; }
  .pl-card:hover, .pl-card:hover .pl-art, .pl-cta:hover, .pl-cta:hover svg, .pl-feats li:hover .pl-fi { transform: none !important; }
}