/* creatyk.com · /planes and /en/plans. Uses the tokens, text styles and components of base.css
   (DESIGN.md and the landing-page-design skill have the rules); only this area's own rules live here.
   Owner: the funciones + planes agent. The plan cards (planCards() in pages/planes.mjs) are this page's;
   they are base .card / .card--pick, so surface, full border, radius and padding come from there.
   Parts: compact plan cards with live prices (skeleton bars while they are checked), the risk reversal,
   the comparison table (its header stays while you read it, and on phones each row stacks under the
   three plan names), how the license works, and the FAQ.
   Rules: text sizes only through the named styles in the markup, spacing only --spacing-*, radius only
   --radius-* (nested: inner = outer minus gap), flat --bg-* surfaces, no glows or gradients, motion on
   --ease, and only transform and opacity move. */

/* ── plan cards: compact; the pick has the violet ring of .card--pick ──────────────────────────── */
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-200); align-items: stretch; }
.plan {
  display: flex; flex-direction: column; min-width: 0;
  transition: transform var(--dur-move) var(--ease), background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(calc(var(--spacing-50) * -1)); background: var(--bg-2); border-color: var(--line-2); }
  .plan--pick:hover { border-color: var(--accent-text); }
}
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-100); min-height: var(--spacing-400); }
.plan__name { color: var(--ink); text-wrap: balance; }
.plan .badge, .plan .chip { text-align: center; }
.plan__tag { margin-top: var(--spacing-75); min-height: var(--spacing-500); color: var(--ink-2); text-wrap: pretty; }
.plan__price { margin-top: var(--spacing-200); display: flex; align-items: baseline; gap: var(--spacing-50); }
.plan__amount { color: var(--ink); }
.plan__per { color: var(--ink-3); }
.plan__life { margin-top: var(--spacing-25); width: fit-content; color: var(--ink-2); }
.plan .btn { margin-top: var(--spacing-200); }
.plan__list { margin-top: var(--spacing-200); display: grid; gap: var(--spacing-75); }
.plan__list li { display: grid; grid-template-columns: var(--spacing-200) minmax(0, 1fr); gap: var(--spacing-75); align-items: start; color: var(--ink-2); text-wrap: pretty; }
.plan__list .icon { width: var(--spacing-200); height: var(--spacing-200); margin-top: var(--spacing-25); color: var(--accent-text); }

/* Live prices: while planes.js checks them, each price line is a skeleton bar of its own size
   (the same surface and pulse as base .skeleton). Without scripts the built in prices just show. */
.js .is-plans:not(.prices-ready) [data-price],
.js .is-plans:not(.prices-ready) [data-life] { color: transparent; background: var(--bg-3); border-radius: var(--radius-4); }
@media (prefers-reduced-motion: no-preference) {
  .js .is-plans:not(.prices-ready) [data-price],
  .js .is-plans:not(.prices-ready) [data-life] { animation: ck-pulse 1600ms var(--ease) infinite alternate; }
}

.plans-status {
  margin: var(--spacing-300) auto 0; max-width: var(--measure); padding: var(--spacing-100) var(--spacing-200);
  border: 1px solid var(--line-2); border-radius: var(--radius-12); background: var(--bg-1);
  text-align: center; color: var(--ink-2); text-wrap: pretty;
}

/* ── risk reversal and the note ──────────────────────────────────────────────────────────────── */
.plans-risk { margin: var(--spacing-400) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-100) var(--spacing-400); }
.plans-risk li { display: flex; align-items: flex-start; gap: var(--spacing-75); color: var(--ink-2); text-wrap: pretty; }
.plans-risk .icon { flex: none; width: var(--spacing-200); height: var(--spacing-200); margin-top: var(--spacing-25); color: var(--accent-text); }
.plans-note { margin-top: var(--spacing-200); text-align: center; color: var(--ink-3); text-wrap: balance; }
.plans-note__link {
  color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px;
  transition: color var(--dur-hover) var(--ease), text-decoration-color var(--dur-hover) var(--ease);
}
.plans-note__link:hover { color: var(--ink); text-decoration-color: currentColor; }
.plans-note__link:active { color: var(--accent-text); }

/* ── four levels, three plans: the real level cards, each with the plan that unlocks it ────── */
.pl-levels__row { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-200); }
.pl-level { display: grid; justify-items: center; gap: var(--spacing-200); }
.pl-level__shot { width: 100%; display: grid; place-items: center; }
.pl-level__shot img { width: auto; max-width: 100%; }
.pl-plan { display: inline-flex; align-items: center; min-height: var(--spacing-300); padding: var(--spacing-25) var(--spacing-100); border-radius: var(--radius-full); background: var(--bg-3); white-space: nowrap; }
.pl-plan--free { color: var(--ok); }
.pl-plan--nova { color: var(--accent-text); }
.pl-plan--quasar { color: var(--gold); }

/* ── the comparison ──────────────────────────────────────────────────────────────────────────── */
.cmp-wrap { border: 1px solid var(--line); border-radius: var(--radius-16); background: var(--bg-1); overflow: clip; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { padding: var(--spacing-100) var(--spacing-200); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.cmp thead th, .cmp thead td { position: sticky; top: var(--header-h); z-index: 2; background: var(--bg-2); border-bottom-color: var(--line-2); }
.cmp__corner { width: 40%; color: var(--ink-3); }
.cmp__plan { width: 20%; }
.cmp__plan-name { display: block; color: var(--ink); }
.cmp__plan-price { display: block; color: var(--ink-3); }
.cmp thead .is-pick { background: var(--bg-3); }
.cmp thead .is-pick .cmp__plan-name { color: var(--accent-text); }
.cmp tbody .is-pick { background: var(--bg-2); }
.cmp tbody th[scope="row"] { color: var(--ink-2); text-wrap: pretty; }
.cmp__group th { padding-top: var(--spacing-300); color: var(--accent-text); }
.cmp td .icon { width: 20px; height: 20px; }
.cmp__yes .icon { color: var(--accent-text); }
.cmp__no .icon { color: var(--ink-4); }
.cmp__text { color: var(--ink); }
.cmp__text > span:last-child { text-wrap: pretty; }
.cmp__who { display: none; }
.cmp tbody:last-child tr:last-child > * { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .cmp tbody tr:not(.cmp__group) > * { transition: background-color var(--dur-hover) var(--ease); }
  .cmp tbody tr:not(.cmp__group):hover > * { background: var(--bg-2); }
  .cmp tbody tr:not(.cmp__group):hover > .is-pick { background: var(--bg-3); }
}

/* ── how the license works ───────────────────────────────────────────────────────────────────── */
.pl-license__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-700); align-items: center; }
.pl-steps { margin-top: var(--spacing-75); gap: var(--spacing-200); }
.pl-steps li { color: var(--ink-2); text-wrap: pretty; }
.pl-account { margin: 0; display: grid; gap: var(--spacing-200); }
.pl-account__sky { position: relative; isolation: isolate; height: 240px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-24); background: var(--bg-0); overflow: clip; }
.pl-account__sky .space { z-index: -1; }
.pl-account__shot { width: fit-content; }
.pl-account figcaption { color: var(--ink-3); text-align: center; text-wrap: balance; }
.pl-facts { margin: var(--spacing-700) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-400); }
.pl-fact dt { color: var(--ink); text-wrap: balance; }
.pl-fact dd { margin: var(--spacing-75) 0 0; color: var(--ink-2); text-wrap: pretty; }
.pl-source { margin-top: var(--spacing-400); color: var(--ink-3); }

/* ── questions ───────────────────────────────────────────────────────────────────────────────── */
.pl-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-700); align-items: start; }
.pl-faq__side { position: sticky; top: calc(var(--header-h) + var(--spacing-400)); }
.pl-faq__side .section-head { margin-bottom: var(--spacing-300); }
.pl-faq__side .section-lead a { color: var(--accent-text); }
.pl-faq .qa__q span { text-wrap: balance; }
.pl-faq .qa__a p { text-wrap: pretty; }

/* ── tablet and phone ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .pl-levels__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .plan__tag { min-height: 0; }
}
@media (max-width: 999px) {
  .pl-license__grid, .pl-faq__grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-600); }
  .pl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-faq__side { position: static; }
}
@media (max-width: 760px) {
  /* The comparison stacks: the three plan names stay on top, each feature sits above its three answers. */
  .cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp thead { position: sticky; top: var(--header-h); z-index: 3; }
  .cmp thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--bg-2); border-bottom: 1px solid var(--line-2); }
  .cmp thead th { position: static; padding: var(--spacing-100); border-bottom: 0; }
  .cmp thead .cmp__corner { display: none; }
  .cmp tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp tbody th[scope="row"] { grid-column: 1 / -1; padding: var(--spacing-200) var(--spacing-100) var(--spacing-50); border-bottom: 0; color: var(--ink); }
  .cmp td { padding: var(--spacing-50) var(--spacing-100) var(--spacing-200); }
  .cmp__group th { grid-column: 1 / -1; padding: var(--spacing-300) var(--spacing-100) var(--spacing-75); }
  .cmp tbody .is-pick { background: transparent; }
}
@media (max-width: 680px) {
  .pl-facts { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-300); }
  .plan { padding: var(--spacing-200); }
  .plans-risk { flex-direction: column; align-items: flex-start; gap: var(--spacing-100); }
  .plans-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .plan { transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
  .plan:hover { transform: none; }
}