/**
 * Qode Prism — landing · Pricing section · page-scoped CSS.
 * Namespaced `.pl-pr*`. Same rules as prism-landing.page.css: colour comes from the QLunar2
 * ink tokens and the veil-aware --q2-on-dark flag (0 = light veil, 1 = dark veil), layout
 * reacts to container width (q2-workspace), no viewport @media for layout.
 * Tier accents per card: --ta / --tb (gradient pair) and --tc (readable accent for icons).
 */

@property --pl-pr-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.pl-sec--pricing { position: relative; }
.pl-pr__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38rem 26rem at 14% 10%, color-mix(in srgb, #ff8a3d calc(7% + 9% * var(--q2-on-dark, 0)), transparent), transparent 70%),
    radial-gradient(46rem 30rem at 52% 46%, color-mix(in srgb, #2f6bff calc(11% + 17% * var(--q2-on-dark, 0)), transparent), transparent 70%),
    radial-gradient(40rem 28rem at 92% 80%, color-mix(in srgb, #8b5cf6 calc(9% + 15% * var(--q2-on-dark, 0)), transparent), transparent 70%);
}
.pl-pr { position: relative; z-index: 1; }

/* ── Head ── */
.pl-pr__em {
  background: linear-gradient(100deg, #2f6bff 0%, #8b5cf6 52%, #ff8a3d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 0.06em;
}
.pl-pr__head .pl-copy { max-width: 42rem; }

/* ── Grid ── */
.pl-pr__grid { list-style: none; margin: 0; padding: 0.75rem 0; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@container q2-workspace (min-width: 700px) { .pl-pr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container q2-workspace (min-width: 1120px) {
  .pl-pr__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .pl-pr__plan--flow { margin-block: -0.75rem; padding-block: calc(var(--space-6) + 0.75rem) calc(var(--space-5) + 0.75rem); }
}

/* ── Plan card ── */
.pl-pr .pl-pr__plan {
  --ta: #2f6bff; --tb: #5ad1ff;
  --tc: color-mix(in srgb, var(--ta) calc(70% + 30% * var(--q2-on-dark, 0)), var(--q2-ink-0));
  position: relative; isolation: isolate; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: calc(var(--radius-card-lg, 18px) + 0.375rem);
  border: 1px solid var(--pl-line);
  box-shadow: 0 28px 60px -38px color-mix(in srgb, #0a215c calc(40% - 14% * var(--q2-on-dark, 0)), transparent);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease, border-color 0.3s ease;
}
.pl-pr .pl-pr__plan--spark { --ta: #ff7a2f; --tb: #ffb347; }
.pl-pr .pl-pr__plan--flow  { --ta: #0045ff; --tb: #3fa8ff; }
.pl-pr .pl-pr__plan--power { --ta: #7a4bff; --tb: #e04bd0; }
.pl-pr .pl-pr__plan--nova  { --ta: #b9a6ff; --tb: #ffd08a; }

/* Cursor-following light + a faint always-on tint at the top edge. */
.pl-pr__plan::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: 0.55; transition: opacity 0.4s ease;
  background: radial-gradient(24rem circle at var(--px, 50%) var(--py, -8%), color-mix(in srgb, var(--ta) 24%, transparent), transparent 62%);
}
.pl-pr__plan:is(:hover, :focus-within)::after { opacity: 1; }

/* Hairline gradient border (mask-composite trick). */
.pl-pr__plan::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ta) 75%, transparent), transparent 36%, transparent 64%, color-mix(in srgb, var(--tb) 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.6; transition: opacity 0.35s ease;
}
.pl-pr__plan:is(:hover, :focus-within)::before { opacity: 1; }
@media (hover: hover) {
  .pl-pr .pl-pr__plan:hover { transform: translateY(-6px); box-shadow: 0 44px 90px -44px color-mix(in srgb, var(--ta) 60%, transparent); }
}

/* Flow — the featured plan: full-strength border + a slow breathing aura. */
.pl-pr .pl-pr__plan--flow { box-shadow: 0 30px 90px -42px rgba(0, 69, 255, 0.55); }
.pl-pr .pl-pr__plan--flow::before { opacity: 1; padding: 1.5px; background: linear-gradient(150deg, #5ad1ff, #0045ff 42%, #8b5cf6); }
.pl-pr .pl-pr__plan--flow::after { opacity: 0.9; animation: pl-pr-breathe 6s ease-in-out infinite; }
@keyframes pl-pr-breathe { 50% { opacity: 0.55; } }

/* Nova — obsidian card with a rotating prism-spectrum edge. */
.pl-pr .pl-pr__plan--nova {
  --q2-ink-0: #eaf0ff; --q2-ink-1: #b9c6ea; --q2-ink-2: #8e9bc4; --q2-ink-heading: #ffffff; --q2-ink-link: #a9c0ff;
  --pl-line: rgba(255, 255, 255, 0.14); --pl-line-strong: rgba(255, 255, 255, 0.26);
  --tc: #cdbfff;
  color: #eaf0ff;
  background:
    radial-gradient(120% 70% at 85% -10%, rgba(122, 75, 255, 0.38), transparent 60%),
    radial-gradient(90% 60% at 0% 108%, rgba(255, 138, 61, 0.16), transparent 62%),
    linear-gradient(165deg, #0e1740, #060a1f 72%);
  border-color: transparent;
  box-shadow: 0 34px 100px -46px rgba(139, 92, 246, 0.8);
}
.pl-pr .pl-pr__plan--nova::before {
  opacity: 1; padding: 1.5px;
  background: conic-gradient(from var(--pl-pr-ang), #ff9a3c, #ffe08a, #5ad1ff, #2f6bff, #8b5cf6, #e04bd0, #ff9a3c);
  animation: pl-pr-spin 10s linear infinite;
}
@keyframes pl-pr-spin { to { --pl-pr-ang: 360deg; } }

/* ── Card content ── */
.pl-pr__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pl-pr__mark {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, var(--ta), var(--tb));
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--ta) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.pl-pr__mark svg { width: 1.4rem; height: 1.4rem; }
.pl-pr__badge {
  display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill, 999px);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--tc); border: 1px solid color-mix(in srgb, var(--ta) 42%, transparent); background: color-mix(in srgb, var(--ta) 11%, transparent);
}
.pl-pr .pl-pr__plan--flow .pl-pr__badge { color: #fff; border-color: transparent; background: linear-gradient(135deg, #0045ff, #3fa8ff); box-shadow: 0 8px 22px -10px rgba(0, 69, 255, 0.85); }

.pl-pr__name { margin: 0; font-size: clamp(1.75rem, 1.35rem + 0.8vw, 2.15rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; color: var(--q2-ink-heading); }
.pl-pr__tag { margin: var(--space-2) 0 0; min-height: 2.7em; font-size: 0.92rem; line-height: 1.45; color: var(--q2-ink-1); text-wrap: balance; }

.pl-pr__price { margin: 0; display: flex; align-items: baseline; gap: 0.2rem; line-height: 1; color: var(--q2-ink-heading); }
.pl-pr__cur { align-self: flex-start; margin-top: 0.55rem; font-size: 1.6rem; font-weight: 300; color: var(--q2-ink-1); }
.pl-pr__num {
  display: inline-block; font-size: clamp(3.4rem, 2.6rem + 2vw, 4.4rem); font-weight: 200; letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--q2-ink-heading) 30%, color-mix(in srgb, var(--q2-ink-heading) 55%, var(--ta)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pl-pr__per { margin-left: 0.3rem; font-size: 0.9rem; color: var(--q2-ink-2); }
.pl-pr__note { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--q2-ink-2); }

/* Limits — the three numbers that actually separate the plans. */
.pl-pr__limits { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--pl-line); }
.pl-pr__limits > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.3rem; padding: var(--space-3) var(--space-1); text-align: center; }
.pl-pr__limits > div + div { border-left: 1px solid var(--pl-line); }
.pl-pr__limits dt { margin: 0; min-height: 2.5em; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.25; text-transform: uppercase; color: var(--q2-ink-2); }
.pl-pr__limits dd { margin: 0; font-size: 1.7rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--q2-ink-heading); }
.pl-pr__limits dd .pl-pr__inf { font-size: 2rem; line-height: 0.95; }

.pl-pr .pl-pr__cta { width: 100%; justify-content: center; text-align: center; text-decoration: none; }
.pl-pr .pl-pr__plan--nova .pl-pr__cta {
  color: #0a1440; border-color: transparent; background: linear-gradient(180deg, #ffffff, #d9e3ff);
  box-shadow: 0 14px 34px -14px rgba(169, 192, 255, 0.85);
}
.pl-pr .pl-pr__plan--nova .pl-pr__cta:is(:hover, :focus-visible) { background: linear-gradient(180deg, #ffffff, #c4d3ff); }

.pl-pr__lead { margin: 0 0 var(--space-3); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--q2-ink-2); }
.pl-pr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.pl-pr__list li { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); gap: 0.65rem; align-items: start; font-size: 0.9rem; line-height: 1.42; color: var(--q2-ink-1); }
.pl-pr__list b { font-weight: 600; color: var(--q2-ink-heading); }
.pl-pr__chk { width: 1.15rem; height: 1.15rem; margin-top: 0.08rem; padding: 0.2rem; box-sizing: border-box; border-radius: 50%; color: var(--tc); background: color-mix(in srgb, var(--ta) 16%, transparent); }
.pl-pr__fine { margin: auto 0 0; padding-top: var(--space-2); font-size: 0.78rem; line-height: 1.45; color: var(--q2-ink-2); }

/* ── Staged reveal (only once the script marked the section ready, so no-JS stays visible) ── */
.pl-pr-ready .pl-pr__plan:not(.is-in) { opacity: 0; }
.pl-pr-ready .pl-pr__plan.is-in { opacity: 1; animation: pl-pr-in 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 110ms) backwards; }
@keyframes pl-pr-in { from { opacity: 0; transform: translateY(28px) scale(0.97); } }

/* ── Compare all ── */
.pl-pr__compare { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); text-align: center; }
.pl-pr__toggle { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; list-style: none; user-select: none; }
.pl-pr__toggle::-webkit-details-marker { display: none; }
.pl-pr__toggle svg { width: 1.1rem; height: 1.1rem; transition: transform 0.35s ease; }
.pl-pr__compare[open] .pl-pr__toggle svg { transform: rotate(180deg); }
.pl-pr__tablewrap {
  margin-top: var(--space-5); overflow-x: auto; text-align: left; overscroll-behavior-x: contain;
  border: 1px solid var(--pl-line); border-radius: calc(var(--radius-card-lg, 18px) + 0.25rem);
}
.pl-pr__table { width: 100%; min-width: 46rem; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
.pl-pr__table :is(th, td) { padding: 0.85rem 1rem; border-bottom: 1px solid var(--pl-line); vertical-align: middle; }
.pl-pr__table thead th { text-align: center; padding-block: 1.15rem; font-size: 1.02rem; font-weight: 600; color: var(--q2-ink-heading); }
.pl-pr__table thead th small { display: block; margin-top: 0.15rem; font-size: 0.78rem; font-weight: 400; color: var(--q2-ink-2); }
.pl-pr__table tbody th[scope="row"] {
  width: 28%; text-align: left; font-weight: 400; color: var(--q2-ink-1);
  position: sticky; left: 0; z-index: 1;
  background: color-mix(in srgb, color-mix(in srgb, #ffffff calc((1 - var(--q2-on-dark, 0)) * 100%), #0c1226) 92%, transparent);
}
.pl-pr__table td { text-align: center; color: var(--q2-ink-1); font-variant-numeric: tabular-nums; }
.pl-pr__table :is(thead th, td):nth-child(3) { background: color-mix(in srgb, #2f6bff 7%, transparent); }
.pl-pr__table :is(thead th, td):nth-child(5) { background: color-mix(in srgb, #8b5cf6 6%, transparent); }
.pl-pr__table tbody:last-child tr:last-child :is(th, td) { border-bottom: 0; }
.pl-pr__table .pl-pr__grp th {
  padding-top: 1.5rem; padding-bottom: 0.6rem; text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--q2-ink-link); border-bottom-color: var(--pl-line-strong); background: transparent; position: static;
}
.pl-pr__yes { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; color: #2f6bff; background: color-mix(in srgb, #2f6bff 14%, transparent); }
.pl-pr__yes svg { width: 0.9rem; height: 0.9rem; }
.pl-pr__no { color: var(--q2-ink-2); opacity: 0.55; }

.pl-pr__foot { margin: var(--space-6) auto 0; max-width: 46rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pl-pr-ready .pl-pr__plan:not(.is-in) { opacity: 1; }
  .pl-pr-ready .pl-pr__plan.is-in, .pl-pr .pl-pr__plan--flow::after, .pl-pr .pl-pr__plan--nova::before { animation: none; }
  .pl-pr .pl-pr__plan, .pl-pr__toggle svg { transition: none; }
}