/* The price list.
 *
 * Loaded after qyverix.css and marketing.css, and ADDITIVE ONLY: every rule
 * below is inside `.pl`, plus the one `.page.pl-out` override that lets the
 * storefront run its bands full-bleed. That mirrors what `.page.mkt` does for
 * the home page and is the only rule here that touches a product class.
 *
 * WHY IT EXISTS. /plans renders outside `.mkt`, so the marketing layer never
 * reached it: the price list was app-styled output on a marketing route --
 * Inter throughout, .card and .kv doing all the work, and the one thing the
 * page is actually deciding (may this plan be used to charge anyone?) reduced
 * to the eleventh row of a checklist. The typography here is the same pairing
 * the home page and learn.qyverix.in use, so the two pages read as one site.
 *
 * ONE SET OF RULES, TWO FRAMES. views/plans.js renders the same sections for
 * the signed-out storefront (`.pl-out`) and for /billing/plans inside the
 * console (`.pl-in`). The storefront gets Outfit, Fraunces, alternating bands
 * and full-bleed; the console keeps Inter and the product's own rhythm,
 * because its weight hierarchy is built on Inter's half-steps and re-typing
 * the console to sell it would be the tail wagging the dog.
 *
 * Colour is tokens only, and only the tokens qyverix.css declares in its
 * PRIMARY block. The numeric --s*/--t-* scale and the --accent-wash aliases
 * are marked in that file as legacy "until step 9", so nothing here depends on
 * them surviving.
 */

/* One lift, declared once. Dark mode carries separation on hairlines rather
   than shadow -- that is rule 3 of the design system, and the usual tell of a
   bad port is a light-mode shadow left switched on. */
.pl { --pl-lift: 0 12px 32px rgba(23, 23, 49, .10); }
:root[data-theme="dark"] .pl { --pl-lift: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pl { --pl-lift: none; }
}

/* ══ the storefront frame ═════════════════════════════════════════════════ */

/* .page is where the console's padding and 1280px max-width live. The bands
   need the full viewport, so the storefront takes the container over and each
   band's own .pl-wrap does the centring instead. */
.page.pl-out {
  max-width: none;
  padding: 0;
  font-family: Outfit, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
}

.pl-wrap { max-width: 1080px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); }
.pl-out .pl-sec { padding-block: clamp(38px, 5.2vw, 68px); }

/* Alternating grounds rather than hairlines, which is the rhythm the home
   page established. views/plans.js assigns the band by POSITION, so the
   pattern survives the comparison section dropping out. */
.pl-out .pl-band { background: var(--surface); }

/* ══ display type ═════════════════════════════════════════════════════════
 *
 * Fraunces for display, Outfit for everything else -- the estate's pairing.
 * Headlines only: a serif at 13px in a column of specifications is harder to
 * read, and this page is mostly specifications. */
.pl-h1, .pl-h2, .pl-name, .pl-faq-q, .pl-fork-q {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  color: var(--text-1);
}
.pl-h1 { font-weight: 600; line-height: 1.04; font-size: clamp(31px, 4.6vw, 50px); }
.pl-h2 { font-weight: 600; line-height: 1.12; font-size: clamp(24px, 3vw, 34px); }

/* The second clause. Italic AND coloured AND a different face, so it still
   reads as emphasis in greyscale and to anyone who cannot separate the violet
   from the near-black. */
.pl-em { font-style: italic; color: var(--accent); font-weight: 600; }

.pl-kicker {
  display: inline-block; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
  background: var(--accent-surface); border-radius: var(--rp);
  padding: 4px 12px; margin-bottom: 16px;
}
.pl-lede {
  font-size: clamp(15px, 1.5vw, 16.5px); line-height: 1.6; color: var(--text-2);
  max-width: 54ch; margin-top: 14px;
}
.pl-lede-sm { font-size: 14px; margin-top: 8px; }
.pl-note { margin-top: 16px; font-size: 12.5px; color: var(--text-3); }
.pl-note a { color: var(--accent); font-weight: 600; }

/* ══ hero ═════════════════════════════════════════════════════════════════ */
.pl-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(34px, 5vw, 64px) clamp(40px, 5.6vw, 72px);
  background: var(--base);
  border-bottom: 1px solid var(--border);
}
/* The same slow wash the home hero drifts, at the same amplitude: 24s and a
   few percent of travel sit below the threshold where a moving background
   starts competing with the headline for attention. */
.pl-hero::before {
  content: ''; position: absolute; inset: -25% -10% auto -10%; height: 130%;
  background: radial-gradient(640px 320px at 18% 10%,
              color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%);
  pointer-events: none;
  animation: pl-drift 24s ease-in-out infinite alternate;
}
@keyframes pl-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, 3%, 0) scale(1.06); }
}
.pl-hero-in {
  position: relative; z-index: 1;
  display: grid; gap: clamp(26px, 3.5vw, 48px); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .pl-hero-in { grid-template-columns: 1.05fr .95fr; } }
.pl-hero-copy { min-width: 0; }

/* ══ the fork ═════════════════════════════════════════════════════════════
 *
 * The decision, drawn. Twelve limits differ between the two plans and none of
 * them is the thing being decided -- a Student plan may not be used to charge
 * anyone for anything, which is a different product rather than a smaller one.
 * So the hero's second column is the one question that is not a quantity, with
 * its two answers priced.
 *
 * Deliberately not links. It is an orientation device, and two 300px-wide
 * targets in a hero that already carries the real buttons is a fork in the
 * navigation as well as in the copy. */
.pl-fork {
  min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r4); padding: 18px; box-shadow: var(--shadow-card);
}
.pl-fork-q { font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; line-height: 1.2; }
.pl-arm {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r3);
  background: var(--surface-alt);
}
.pl-arm-a {
  display: grid; place-items: center; height: 24px; border-radius: var(--rp);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.pl-arm-name { font-size: 15px; font-weight: 650; color: var(--text-1); }
.pl-arm-price {
  font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--text-1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pl-arm-price i { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.pl-arm.is-hi {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.pl-arm.is-hi .pl-arm-a {
  color: var(--accent); background: var(--accent-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.pl-fork-foot { margin-top: 13px; font-size: 12px; line-height: 1.55; color: var(--text-3); }

/* ══ the plan cards ═══════════════════════════════════════════════════════ */
.pl-cards {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.pl-card {
  min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r4); overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1),
              box-shadow .22s cubic-bezier(.22, .61, .36, 1), border-color .22s;
}
.pl-card:hover { transform: translateY(-3px); box-shadow: var(--pl-lift); border-color: var(--border-strong); }
.pl-card.is-hi { border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.pl-card.is-hi:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* Both cards carry a flag, not just the recommended one. A strip on one card
   and nothing on the other put the two plan names on different baselines and
   read as a badge rather than as the statement it is. */
.pl-flag {
  padding: 9px var(--gut); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
.pl-card.is-hi .pl-flag {
  color: var(--accent); background: var(--accent-surface);
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.pl-card-in { padding: var(--gut); }
.pl-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-name { font-size: 25px; font-weight: 600; line-height: 1.1; }
.pl-tag { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

.pl-price { margin-top: 18px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pl-amt {
  font-size: clamp(36px, 4.4vw, 44px); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--text-1); font-variant-numeric: tabular-nums;
}
.pl-per { font-size: 14px; font-weight: 500; color: var(--text-2); }
.pl-gst { margin-top: 7px; font-size: 12px; color: var(--text-3); }

/* The prepaid term, at the size of a price.
 *
 * 36 months presented as "₹149/mo" with the real figure in a footnote is the
 * kind of thing that produces chargebacks, so the amount charged keeps the
 * same 700 weight as the monthly price above it and sits in its own box
 * rather than in a line of small print. */
.pl-term {
  margin-top: 16px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--r3);
  background: var(--surface-alt);
}
.pl-term-top { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.pl-term-amt {
  font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  color: var(--text-1); font-variant-numeric: tabular-nums;
}
.pl-term-what { font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.pl-term-note { margin-top: 9px; font-size: 12px; line-height: 1.55; color: var(--text-3); }

/* Quantities are a ruled spec list, not a tick list. A green check beside
   "Websites: 2" says the number is good news, which is exactly the thing a
   price list should not be doing -- only the boolean row earns a glyph. */
.pl-specs { margin-top: 18px; border-top: 1px solid var(--border); }
.pl-spec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.pl-spec dt { font-size: 13px; color: var(--text-2); }
.pl-spec dd {
  font-size: 13.5px; font-weight: 650; color: var(--text-1);
  font-variant-numeric: tabular-nums; text-align: right;
}
.pl-spec-bool dd { display: inline-flex; align-items: center; gap: 6px; }
.pl-spec-bool.is-yes dd { color: var(--accent); }
.pl-spec-bool.is-no dd { color: var(--text-3); font-weight: 500; }

.pl-card-in > .btn, .pl-buys { margin-top: 18px; }
.pl-buys { display: grid; gap: 8px; }
.pl-next { margin-top: 9px; font-size: 12px; line-height: 1.45; color: var(--text-3); text-align: center; }

/* ══ what changes ═════════════════════════════════════════════════════════
 *
 * A ladder rather than a second table. There are exactly two columns and one
 * direction, and from -> to reads in a single pass where a table sends the eye
 * back to a column head to work out which side it is looking at. */
.pl-lad { list-style: none; margin-top: 24px; border-top: 1px solid var(--border); }
.pl-rung {
  /* Every rung is its own grid, so nothing aligns across rows unless a column
     is given a width. With the "to" column left at auto the arrows landed at
     eleven different x positions down the ladder. 260px is what the widest
     value on the page needs -- the three-engine list -- so every arrow lines
     up and nothing has to wrap to get there. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto 26px 260px 54px;
  align-items: center; gap: 0 12px;
  padding: 12px; border-bottom: 1px solid var(--border);
}
/* A leader, because the row is 1080px wide and the eye loses the line between
   "Deployments per day" and the figure it belongs to. It is what a printed
   price list does about exactly this, and it is the only ornament on the page:
   faint enough to read as texture, not as a rule. */
.pl-rung-k { font-size: 14px; color: var(--text-2); display: flex; align-items: baseline; gap: 12px; }
.pl-rung-k::after {
  content: ''; flex: 1; align-self: center;
  border-bottom: 1px dotted color-mix(in srgb, var(--text-3) 40%, transparent);
}
.pl-rung-from {
  font-size: 14px; color: var(--text-3); text-align: right;
  font-variant-numeric: tabular-nums;
}
.pl-rung-arr { font-size: 15px; text-align: center; color: color-mix(in srgb, var(--accent) 50%, transparent); }
.pl-rung-to {
  font-size: 16.5px; font-weight: 650; color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.pl-rung-to.is-bool { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }

/* How much bigger, not just how big. */
.pl-rung-mult {
  justify-self: end; padding: 2px 7px; border-radius: var(--rp);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); background: var(--accent-surface);
  font-variant-numeric: tabular-nums;
}
/* Most rows have no multiplier -- a text row, or one that got smaller. The
   column stays, so every chip on the page lines up. */
.pl-rung-mult:empty { display: none; }

/* The row that is the decision. Everything else on this ladder is a quantity
   you can grow into; this one is a different product. */
.pl-rung.is-decider {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.pl-rung.is-decider .pl-rung-k { color: var(--text-1); font-weight: 650; }

/* ══ worth knowing ════════════════════════════════════════════════════════ */
.pl-faq {
  margin-top: 24px; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.pl-faq-i {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r3); padding: 15px 17px;
}
.pl-faq-q { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.pl-faq-a { margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* ══ close ════════════════════════════════════════════════════════════════ */
.pl-close { text-align: center; }
.pl-close .pl-lede { margin-inline: auto; }
.pl-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
/* There is no marketing footer on this route -- it lives in the home view --
   so the links a price list is expected to carry are gathered here. */
.pl-fine {
  margin-top: 24px; display: flex; gap: 8px 18px;
  justify-content: center; flex-wrap: wrap; font-size: 12.5px;
}
/* The padding is the tap target, not decoration. These are flex items, so
   their computed display is blockified and ops/layout-check's exemption for an
   inline link inside a <p> does not reach them -- at 12.5px they measured
   19px tall, under the 24px minimum. */
.pl-fine a { color: var(--text-3); padding-block: 5px; }
.pl-fine a:hover { color: var(--accent); }

/* ══ phone ════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  /* The rung becomes two lines: what it is, then what it does. Everything
     right of the label needs about 450px, so below that the wide layout was
     squeezing "Deployments per day" onto two lines against a leader two dots
     long. */
  .pl-rung { grid-template-columns: auto 22px auto minmax(0, 1fr); gap: 3px 10px; }
  .pl-rung-k { grid-column: 1 / -1; font-size: 13px; display: block; }
  .pl-rung-k::after { content: none; }
  .pl-rung-from { text-align: left; }
  .pl-rung-mult { justify-self: start; }
}

/* ══ the console frame ════════════════════════════════════════════════════
 *
 * /billing/plans is the same list inside the product. It keeps the router's
 * .page container, the product's rhythm and Inter -- the console's weight
 * hierarchy is built on Inter's 550/650/750 half-steps, and the accent means
 * one thing in there, so the storefront's italic violet clause is dropped
 * rather than carried in. */
.pl-in .pl-sec { padding-block: 0; background: none; }
.pl-in .pl-sec + .pl-sec { margin-top: 26px; }
.pl-in .pl-wrap { max-width: none; padding-inline: 0; }
.pl-in .pl-h2, .pl-in .pl-name, .pl-in .pl-faq-q { font-family: var(--sans); letter-spacing: 0; }
.pl-in .pl-h2 { font-size: 17px; font-weight: 650; }
.pl-in .pl-name { font-size: 19px; font-weight: 700; }
.pl-in .pl-faq-q { font-size: 13.5px; font-weight: 650; }
.pl-in .pl-em { font-style: normal; color: var(--text-1); font-weight: 650; }
.pl-in .pl-amt { font-size: 34px; }
.pl-in .pl-lede { font-size: 13.5px; }

/* ══ motion ═══════════════════════════════════════════════════════════════
 *
 * The reveal itself lives in marketing.css under .mkt-anim, which
 * marketing/motion.js only adds once it has proved it can also un-hide --
 * nothing here hides anything. These are the page's own hovers, which are
 * enhancement in the same sense. */
@media (prefers-reduced-motion: reduce) {
  .pl-hero::before { animation: none; }
  .pl-card { transition: none; }
  .pl-card:hover { transform: none; }
}