/*!
 * pricing-2026 (p26) — PORTED COPY for the landing pages.
 *
 * ┌──────────────────────────────────────────────────────────────────────┐
 * │ UPSTREAM: vodlix-site-statamic/public/css/pricing-2026.css           │
 * │ Fix bugs THERE first, then re-copy this file. Never let the two      │
 * │ diverge — the whole point is that landing.vodlix.com and vodlix.com  │
 * │ render the same pricing block.                                       │
 * │                                                                      │
 * │ Copied verbatim 2026-08-20 (1,032 lines). Nothing was deleted, so a  │
 * │ later landing page can also use the ledger table, the PAYG glance    │
 * │ table, the FAQ accordion and the end band without a second port.     │
 * │ Exactly two things were ADDED, both marked "LANDING-PAGE PORT":      │
 * │   1. the --v2-* ramp (below), which upstream inherits from           │
 * │      vodlix.css and which does not exist on a landing page;          │
 * │   2. a note at the two rules that assume the marketing site's fixed  │
 * │      nav (.p26hero's negative margin-top, and the --p26-pin sticky   │
 * │      offset on the ledger's plan-name row).                          │
 * └──────────────────────────────────────────────────────────────────────┘
 *
 * Served at https://landing.vodlix.com/shared/p26/pricing-2026.css — always
 * reference it fully-qualified (this repo's CLAUDE.md: relative and
 * root-absolute paths each break on one of the two hosts a page is served
 * from).
 */

/* ══════════════════════════════════════════════════════════════════════
   LANDING-PAGE PORT (1/2) — the --v2-* ramp.

   Upstream, every --p26-* token reads a site-wide --v2-* value declared in
   vodlix.css. Landing pages load vodlix-2026.css instead, which uses a
   different token vocabulary (--ink / --sub / --line / --surface), so the
   --v2-* names resolve to nothing there.

   Each --p26-* declaration carries a light-mode fallback, so light mode
   would render identically either way — but DARK mode would not: the ramp
   inverts under [data-mode="dark"] and a fallback cannot. So the token
   definitions are brought across rather than the rules being dropped.
   Values copied verbatim from vodlix-site-statamic/public/css/vodlix.css
   (:root, plus its [data-mode="dark"] remap). Scoped to .p26, so nothing
   leaks into the Vodlix 2026 design system on the rest of the page.
   ══════════════════════════════════════════════════════════════════════ */

.p26 {
  --v2-page:     #fbfbfc;
  --v2-surface:  #ffffff;
  --v2-raised:   #f4f4f6;
  --v2-sunken:   #e7e7ec;
  --v2-ink-1:    #0c0c0e;
  --v2-ink-2:    #26262c;
  --v2-ink-3:    #3a3a42;
  --v2-ink-4:    #6b6b75;
  --v2-ink-5:    #8f8f99;
  --v2-ink-6:    #b4b4bd;
  --v2-hair-1:   #f1f1f4;
  --v2-hair-2:   #e7e7ec;
  --v2-hair-3:   #d9d9e0;
}
[data-mode="dark"] .p26 {
  --v2-page:     #0e0e11;
  --v2-surface:  #16161a;
  --v2-raised:   #1c1c22;
  --v2-sunken:   #26262c;
  --v2-ink-1:    #f5f5f7;
  --v2-ink-2:    #e7e7ec;
  --v2-ink-3:    #c6c6cf;
  --v2-ink-4:    #9b9ba7;
  --v2-ink-5:    #8f8f99;
  --v2-ink-6:    #71717c;
  --v2-hair-1:   rgba(255,255,255,.07);
  --v2-hair-2:   rgba(255,255,255,.11);
  --v2-hair-3:   rgba(255,255,255,.16);
}

/* ─────────────────────── upstream file begins ─────────────────────── */

/*!
 * pricing-2026 — the 2026 pricing page, on the locked design system.
 *
 * Deliberately NOT Tailwind utilities: public/css/tailwind.css is a committed,
 * pre-compiled build and no CSS build runs on deploy, so any new utility class
 * would silently render unstyled (docs/DESIGN-SYSTEM.md §12–13). Everything is
 * scoped under .p26 so it cannot leak into the rest of the site.
 *
 * Tokens: consumes the site-wide --v2-* ramp declared in vodlix.css (remapped
 * under [data-mode="dark"]), so dark mode needs no second palette here — only
 * the few surfaces that deliberately invert (the ink card, the end band).
 *
 * DS rules honoured (docs/ds + V2-TASKS.md):
 *   - copy is ink; grey is metadata only (I-12)
 *   - primary action is dark ink, red is the accent alternate (I-6)
 *   - gradient is hero-only; one easing cubic-bezier(.2,.8,.25,1), ≤250ms,
 *     nothing moves on hover; borders over shadows
 *   - no hex on an <svg> — ticks are currentColor, coloured by class
 *   - tables: sticky first column, horizontal swipe on a phone
 *
 * Mobile-first throughout. Breakpoints: 640 / 900 / 1160.
 */

.p26 {
  --p26-ink:    var(--v2-ink-1, #0c0c0e);
  --p26-ink-2:  var(--v2-ink-3, #3a3a42);   /* the one supporting step */
  --p26-faint:  var(--v2-ink-4, #6b6b75);   /* METADATA ONLY — dates, captions, hints */
  --p26-line:   var(--v2-hair-2, #e7e7ec);
  --p26-line-2: var(--v2-hair-1, #f1f1f4);
  --p26-bg:     var(--v2-page, #fbfbfc);
  --p26-surface:var(--v2-surface, #ffffff);
  --p26-soft:   var(--v2-raised, #f4f4f6);
  --p26-red:    #E61D2C;
  --p26-red-dk: #DB1223;
  --p26-off:    var(--v2-ink-6, #b4b4bd);   /* the greyed tick */
  --p26-r: 18px;
  --p26-r-sm: 12px;
  --p26-ease: cubic-bezier(.2, .8, .25, 1);
  /* The ink objects (featured card, end band): dark on light, inverted on
     dark — same principle as the primary button (I-6/I-7). */
  --p26-ink-obj-bg: #101014;
  --p26-ink-obj-fg: #f5f5f7;
  --p26-ink-obj-sub: #9b9ba7;
  --p26-ink-obj-line: rgba(255, 255, 255, .12);

  font-family: var(--ff-body, 'Noto Sans', system-ui, sans-serif);
  color: var(--p26-ink);
  background: var(--p26-bg);
  -webkit-font-smoothing: antialiased;
}
[data-mode="dark"] .p26 {
  --p26-ink-obj-bg: #f5f5f7;
  --p26-ink-obj-fg: #0c0c0e;
  --p26-ink-obj-sub: #3a3a42;
  --p26-ink-obj-line: rgba(12, 12, 14, .14);
}

.p26 *, .p26 *::before, .p26 *::after { box-sizing: border-box; }

.p26__wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 640px)  { .p26__wrap { padding-inline: 24px; } }
@media (min-width: 1160px) { .p26__wrap { padding-inline: 32px; } }

/* ══════════════════════════════════════════════════════════════════════
   HERO — the one gradient on the page. The warm DS wash (home's palette)
   drifting very slowly behind a transparent navbar; the nav flips to the
   frosted bar on scroll via the site's own is_hero_light mechanism.
   ══════════════════════════════════════════════════════════════════════ */

/* COMPACT: the fold budget on a 1440x900 Mac is the whole design constraint
   here — the ink cards' price line must be visible without scrolling, so the
   hero spends as little height as it can get away with. */
/* LANDING-PAGE PORT (2/2a): .p26hero assumes the marketing site's FIXED nav —
   it tucks itself underneath by --navh. A landing page's own hero is the DS
   `.stage`, and the p26 block sits mid-page, so this class is unused here.
   Kept so a future full-page port needs no second copy of the file; if you do
   use it, set --navh to that page's real nav height first. */
.p26hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* run under the fixed nav, exactly like the home hero */
  margin-top: calc(-1 * var(--navh, 58px));
  padding-top: calc(var(--navh, 58px) + 64px);
  padding-bottom: 18px;
}
@media (min-width: 900px) {
  .p26hero { padding-top: calc(var(--navh, 58px) + 76px); padding-bottom: 22px; }
}

/* Two drifting wash layers. Oversized so edges never show; blurred radials
   in the home hero's own palette, softened for copy legibility. */
.p26hero__wash, .p26hero__wash2 {
  position: absolute;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
}
.p26hero__wash {
  background:
    radial-gradient(42% 44% at 78% 26%, rgba(248, 148, 54, .34) 0%, transparent 70%),
    radial-gradient(46% 48% at 24% 20%, rgba(230,29,44, .26) 0%, transparent 70%);
  animation: p26drift-a 26s ease-in-out infinite alternate;
}
.p26hero__wash2 {
  background:
    radial-gradient(40% 42% at 62% 70%, rgba(238, 171, 110, .30) 0%, transparent 70%),
    radial-gradient(34% 36% at 12% 78%, rgba(248, 148, 54, .18) 0%, transparent 70%);
  animation: p26drift-b 34s ease-in-out infinite alternate;
}
/* the wash settles into the page ground before the cards arrive */
.p26hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--p26-bg));
}
@keyframes p26drift-a {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.06); }
}
@keyframes p26drift-b {
  from { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
  to   { transform: translate3d(-2%, -2%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .p26hero__wash, .p26hero__wash2 { animation: none; }
}
/* the wash is quieter in dark mode so ink stays sharp */
[data-mode="dark"] .p26hero__wash  { opacity: .5; }
[data-mode="dark"] .p26hero__wash2 { opacity: .5; }

.p26hero__inner { text-align: center; }

.p26__eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p26-ink-2);
  margin-bottom: 8px;
}
/* One line on desktop — the category tiles below are the real hero content. */
.p26__h1 {
  font-family: var(--ff-display, 'Merriweather Sans', system-ui, sans-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--p26-ink);
  margin: 0 auto;
  max-width: 44ch;
  text-wrap: balance;   /* no dangling last word when it wraps */
}
.p26__h1 em { font-style: normal; color: var(--p26-red); }

/* ── Control bar: category tiles + billing switch, frosted on the wash ──
   Each group reads as a CATEGORY: icon chip, name, and the one fact that
   separates it. The selected tile is the ink object (inverts on dark,
   same rule as the primary button). */
.p26__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.p26__cats {
  display: flex;
  gap: 8px;
  justify-content: center;
  max-width: 100%;
}
.p26__cat {
  appearance: none;
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: start;
  border: 1px solid var(--p26-line);
  border-radius: 14px;
  padding: 10px 16px 10px 12px;
  background: color-mix(in srgb, var(--p26-surface) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--p26-ink);
  transition: border-color .2s var(--p26-ease), background-color .2s var(--p26-ease), color .2s var(--p26-ease);
}
.p26__cat:hover { border-color: var(--v2-hair-3, #d9d9e0); }
.p26__catIcon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--p26-line);
  background: var(--p26-surface);
  color: var(--p26-ink);
  transition: inherit;
}
.p26__catText { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.p26__catText b { font-size: 13.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.p26__catText small { font-size: 11.5px; line-height: 1.3; color: var(--p26-faint); white-space: nowrap; }
.p26__cat[aria-selected="true"] {
  background: var(--p26-ink-obj-bg);
  border-color: var(--p26-ink-obj-bg);
  color: var(--p26-ink-obj-fg);
}
.p26__cat[aria-selected="true"] .p26__catIcon {
  background: color-mix(in srgb, var(--p26-ink-obj-fg) 12%, transparent);
  border-color: var(--p26-ink-obj-line);
  color: var(--p26-ink-obj-fg);
}
.p26__cat[aria-selected="true"] .p26__catText small { color: var(--p26-ink-obj-sub); }
/* Starting-price chip on each category tile ("from $99/mo"). Values carry
   data-vlx-usd so VlxFX repaints them on currency change. */
.p26__catFrom {
  flex: none;
  margin-inline-start: 6px;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--p26-line);
  background: var(--p26-surface);
  color: var(--p26-ink);
  transition: inherit;
}
.p26__catFromUnit { font-weight: 500; color: var(--p26-faint); }
.p26__cat[aria-selected="true"] .p26__catFrom {
  background: color-mix(in srgb, var(--p26-ink-obj-fg) 12%, transparent);
  border-color: var(--p26-ink-obj-line);
  color: var(--p26-ink-obj-fg);
}
.p26__cat[aria-selected="true"] .p26__catFromUnit { color: var(--p26-ink-obj-sub); }
/* Phones: the three tiles share ONE row — each becomes a compact column
   (icon, name, price chip below), equal widths, same DOM. */
@media (max-width: 639px) {
  .p26__cats { flex-wrap: nowrap; align-items: stretch; width: 100%; gap: 6px; }
  .p26__cat {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 6px 9px;
    border-radius: 14px;
    text-align: center;
  }
  .p26__catIcon { width: 26px; height: 26px; border-radius: 8px; }
  .p26__catIcon svg { width: 14px; height: 14px; }
  .p26__catText { align-items: center; }
  .p26__catText b { font-size: 12px; line-height: 1.2; white-space: normal; }
  .p26__catText small { display: none; }
  .p26__catFrom { margin-inline-start: 0; margin-top: auto; font-size: 10.5px; padding: 3px 7px; }
}

.p26__billing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--p26-ink);
  min-height: 34px;
}
.p26__switch {
  appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--v2-sunken, #e7e7ec);
  transition: background-color .2s var(--p26-ease);
}
.p26__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--p26-surface);
  box-shadow: 0 1px 2px rgba(16, 16, 20, .25);
  transition: transform .2s var(--p26-ease);
}
.p26__switch[aria-checked="true"] { background: var(--p26-ink-obj-bg); }
.p26__switch[aria-checked="true"]::after { transform: translateX(18px); }
[dir="rtl"] .p26__switch[aria-checked="true"]::after { transform: translateX(-18px); }
.p26__save {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--p26-red-dk);
  background: color-mix(in srgb, var(--p26-red) 12%, var(--p26-surface));
  border: 1px solid color-mix(in srgb, var(--p26-red) 30%, transparent);
  border-radius: 999px;
  padding: 3px 9px;
}

.p26__blurb {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--p26-ink);
  max-width: 56ch;
  margin: 18px auto 0;
}
.p26__blurb strong, .p26__blurb b { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   INK CARDS — DS variant V1. The chosen plan is the dark object on the
   page (inverts on dark mode, like the primary button).
   ══════════════════════════════════════════════════════════════════════ */

.p26__grid {
  display: grid;
  gap: 14px;
  align-items: stretch;
  margin-top: 16px;
}
@media (min-width: 900px) {
  .p26__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .p26__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
}

.p26__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--p26-line);
  border-radius: 20px;
  background: var(--p26-surface);
  padding: 26px 24px;
  transition: border-color .2s var(--p26-ease);
}
.p26__card:hover { border-color: var(--v2-hair-3, #d9d9e0); }

.p26__card--featured {
  background: var(--p26-ink-obj-bg);
  border-color: var(--p26-ink-obj-bg);
  color: var(--p26-ink-obj-fg);
}
@media (min-width: 900px) {
  .p26__card--featured { margin-block: -14px; padding-block: 40px; }
  .p26__grid--two .p26__card--featured { margin-block: 0; }
  .p26__grid--two .p26__card { padding-block: 40px; }
}

.p26__badge {
  position: absolute;
  top: 16px;
  inset-inline-end: 18px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--p26-ink-obj-bg);
  background: var(--p26-ink-obj-fg);
  border-radius: 999px;
  padding: 4px 10px;
}

.p26__name {
  font-family: var(--ff-display, 'Merriweather Sans', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.p26__for {
  font-size: 12.5px;
  color: var(--p26-faint);
  margin: 2px 0 0;
}
.p26__card--featured .p26__for { color: var(--p26-ink-obj-sub); }

.p26__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 16px;
}
.p26__amount {
  font-family: var(--ff-display, 'Merriweather Sans', system-ui, sans-serif);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.p26__per { font-size: 13px; color: var(--p26-faint); }
.p26__card--featured .p26__per { color: var(--p26-ink-obj-sub); }
.p26__sub {
  font-size: 12.5px;
  color: var(--p26-faint);
  margin: 6px 0 0;
  min-height: 1.4em;
}
.p26__card--featured .p26__sub { color: var(--p26-ink-obj-sub); }
.p26__sub strong { color: inherit; font-weight: 700; }

/* CTA pair follows the DS button system: on a light card the action is a
   neutral outline; on the ink card it is the inverted solid. The red
   primary is reserved for the single featured action per group. */
.p26__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  border-radius: 999px;
  border: 1px solid var(--v2-hair-3, #d9d9e0);
  background: transparent;
  color: inherit;
  font-size: var(--fs-btn, 14.5px);
  font-weight: 600;
  text-decoration: none;
  min-height: 42px;
  padding: 0 18px;
  transition: background-color .2s var(--p26-ease), border-color .2s var(--p26-ease);
}
.p26__cta:hover { background: var(--p26-soft); border-color: var(--v2-hair-3, #d9d9e0); }
.p26__cta--primary {
  background: var(--p26-red);
  border-color: var(--p26-red);
  color: #fff;
}
.p26__cta--primary:hover { background: var(--p26-red-dk); border-color: var(--p26-red-dk); }
.p26__card--featured .p26__cta:not(.p26__cta--primary) {
  border-color: var(--p26-ink-obj-line);
}
.p26__card--featured .p26__cta:not(.p26__cta--primary):hover {
  background: color-mix(in srgb, var(--p26-ink-obj-fg) 10%, transparent);
}

.p26__feats {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.p26__feat {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
}
.p26__feat svg { flex: none; margin-top: 2px; }
.p26__feats:has(+ .p26__meta) { margin-bottom: 18px; }
.p26__feat--off { color: var(--p26-faint); }
.p26__card--featured .p26__feat--off { color: var(--p26-ink-obj-sub); }

.p26__meta {
  display: flex;
  gap: 18px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--p26-line-2);
  font-size: 12px;
  color: var(--p26-faint);
}
.p26__card--featured .p26__meta { border-top-color: var(--p26-ink-obj-line); color: var(--p26-ink-obj-sub); }
.p26__metaItem b { color: var(--p26-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.p26__card--featured .p26__metaItem b { color: var(--p26-ink-obj-fg); }

/* quiet custom-plan line under a card grid */
.p26__customline {
  text-align: center;
  font-size: 13.5px;
  color: var(--p26-ink-2);
  margin: 22px 0 0;
}
.p26__customline a { color: var(--p26-red-dk); font-weight: 600; text-decoration: none; }
.p26__customline a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   ICONS — currentColor only (DS: never a hex on an <svg>).
   on  = ink tick;  off = the greyed tick (never a dash).
   ══════════════════════════════════════════════════════════════════════ */

.p26-i { color: var(--p26-ink); }
.p26-i--off { color: var(--p26-off); }
/* matrix-only: not-included is a faint CROSS — in a grid a greyed tick reads
   as a tick (owner report). Cards keep the greyed tick beside their text. */
.p26-i--none { color: var(--p26-off); opacity: .55; }
.p26__card--featured .p26-i { color: var(--p26-ink-obj-fg); }
.p26__card--featured .p26-i--off { color: var(--p26-ink-obj-sub); }

/* ══════════════════════════════════════════════════════════════════════
   SECTIONS below the cards
   ══════════════════════════════════════════════════════════════════════ */

.p26__h2 {
  font-family: var(--ff-display, 'Merriweather Sans', system-ui, sans-serif);
  font-size: var(--fs-h2, 28px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--p26-ink);
  margin: 0;
}
/* Optional eyebrow above the pricing headline (a calling page's own line,
   e.g. /launch-ott-apps "All plans are paid monthly"). */
.p26__h2eyebrow { font-size: 13.5px; font-weight: 700; color: #E61D2C; margin: 0 0 8px; }
.p26home .p26__h2eyebrow { text-align: center; }

.p26__h2sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--p26-ink-2);
  margin: 8px 0 0;
  max-width: 62ch;
}

.p26__know { padding: 56px 0 8px; }
.p26__notes {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
@media (min-width: 900px) { .p26__notes { grid-template-columns: repeat(3, 1fr); } }
.p26__note {
  border: 1px solid var(--p26-line);
  border-radius: var(--p26-r);
  background: var(--p26-surface);
  padding: 20px;
}
.p26__noteT {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-display, 'Merriweather Sans', system-ui, sans-serif);
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
}
.p26__noteB {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--p26-ink-2);
  margin: 10px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════
   THE LEDGER — every plan, every fact, ONE table. Sticky first column,
   horizontal swipe on a phone (DS table conventions), section rows as
   headings, plan head with live price + CTA.
   ══════════════════════════════════════════════════════════════════════ */

.p26__compare { padding: 56px 0 8px; }

/* Full-height sheet on the PAGE — no inner scroll box (owner: the capped
   box felt like overflow hidden and was hated). On wide screens the table
   fits the wrap, so nothing clips and the thead can pin to the page below
   the fixed nav. Under 1160px the wrap swipes horizontally instead, and
   the vertical pinning is desktop-only. */
.p26__tableWrap {
  margin-top: 24px;
  border: 1px solid var(--p26-line);
  border-radius: var(--p26-r);
  background: var(--p26-surface);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
@media (min-width: 1160px) {
  .p26__tableWrap { overflow: visible; }
}

.p26__table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  line-height: 1.45;
}
.p26__table th, .p26__table td {
  padding: 11px 14px;
  text-align: center;
  border-bottom: 1px solid var(--p26-line-2);
  background: var(--p26-surface);
  vertical-align: middle;
}
.p26__table tbody tr:last-child th,
.p26__table tbody tr:last-child td { border-bottom: 0; }

/* first column: the row label, sticky through the swipe */
.p26__table th[scope="row"],
.p26__table td:first-child,
.p26__table th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  text-align: start;
  font-weight: 500;
  color: var(--p26-ink);
  min-width: 168px;
  max-width: 210px;
  /* the hairline that separates the frozen label from the moving sheet */
  border-inline-end: 1px solid var(--p26-line);
}

/* On a phone the frozen label must not eat the sheet: cap it so at least
   two plan columns stay in view beside it. */
@media (max-width: 639px) {
  .p26__table th[scope="row"],
  .p26__table td:first-child,
  .p26__table th:first-child {
    min-width: 122px;
    max-width: 148px;
    font-size: 12.5px;
    padding-inline: 10px;
  }
}

/* Desktop: the group band + plan head pin to the PAGE beneath the fixed
   nav while the sheet scrolls by, so plan names, prices and CTAs stay in
   view. Needs the wrap unclipped (overflow visible ≥1160) — page-level
   sticky dies inside an overflow container. --p26-pin is the fixed nav's
   real height (banner + bar); measured, and safe to tune here. */
@media (min-width: 1160px) {
  /* Only the PLAN-NAME row pins (owner: "the plan name, nothing else") —
     the group band scrolls away with the page. The offset is the TUCKED
     nav height: by the time anyone is deep enough in the sheet for the
     pin to matter, the banner has slid away. */
  /* LANDING-PAGE PORT (2/2b): 66px is the marketing site's TUCKED nav height
     (banner + bar). A landing page's `.d-nav` is a different height, so any
     landing page that uses the ledger table should re-measure and override
     --p26-pin page-locally. Nothing on this page uses the ledger yet. */
  .p26 { --p26-pin: 66px; }
  .p26__planHead th { position: sticky; top: var(--p26-pin); z-index: 4; }
  .p26__planHead th:first-child { inset-inline-start: 0; z-index: 5; }
}

.p26__groupBand th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p26-faint);
  border-bottom: 1px solid var(--p26-line);
  padding: 10px 14px 8px;
}
.p26__groupBand th:not(:first-child) { border-inline-start: 1px solid var(--p26-line); }

/* plan head: name + live price + CTA */
.p26__planHead th { border-bottom: 1px solid var(--p26-line); padding: 14px 12px; }
.p26__planName {
  display: block;
  font-family: var(--ff-display, 'Merriweather Sans', system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--p26-ink);
}
.p26__planPrice {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  color: var(--p26-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.p26__planPrice sub {
  bottom: 0;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--p26-faint);
}
.p26__planCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  border: 1px solid var(--v2-hair-3, #d9d9e0);
  border-radius: 999px;
  background: transparent;
  color: var(--p26-ink);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 4px 12px;
  white-space: nowrap;
  transition: background-color .2s var(--p26-ease);
}
.p26__planCta:hover { background: var(--p26-soft); }

/* section heading rows — metadata, so faint is allowed here */
.p26__sectionRow th {
  text-align: start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p26-faint);
  background: var(--v2-raised, #f4f4f6);
  padding: 9px 14px;
  position: sticky;
  inset-inline-start: 0;
}
.p26__sectionRow th { border-inline-end: 0; max-width: none; }

/* data cells */
.p26__table td { color: var(--p26-ink); font-variant-numeric: tabular-nums; }
.p26__table td svg,
.p26__paygT td svg { display: inline-block; vertical-align: middle; }
.p26__cellNote { font-size: 11px; color: var(--p26-faint); display: block; margin-top: 2px; }

/* The featured column is the INK OBJECT through the whole sheet — dark
   sheet-through-column on light, paper column on dark (same rule as the
   selected category tile and the Business card). Ticks are currentColor,
   so they invert with the column; every faint/hairline token remaps to
   its ink-object counterpart. */
.p26__table .is-feat {
  background: var(--p26-ink-obj-bg);
  color: var(--p26-ink-obj-fg);
  border-bottom-color: var(--p26-ink-obj-line);
}
.p26__table .is-feat .p26__planName,
.p26__table .is-feat .p26__planPrice { color: var(--p26-ink-obj-fg); }
.p26__table .is-feat .p26__planPrice sub,
.p26__table .is-feat .p26__cellNote { color: var(--p26-ink-obj-sub); }
/* .p26-i carries its own color, so inheritance from the inverted column
   never reaches the tick — same override the featured card already uses. */
.p26__table .is-feat .p26-i { color: var(--p26-ink-obj-fg); }
.p26__table .is-feat .p26-i--none { color: var(--p26-ink-obj-sub); }
.p26__table .is-feat .p26__planCta {
  border-color: var(--p26-ink-obj-line);
  color: var(--p26-ink-obj-fg);
  background: color-mix(in srgb, var(--p26-ink-obj-fg) 10%, transparent);
}
.p26__table .is-feat .p26__planCta:hover {
  background: color-mix(in srgb, var(--p26-ink-obj-fg) 18%, transparent);
}

/* swipe hint — phones only, gone after the first scroll */
.p26__swipeHint {
  display: none;
  margin: 10px auto 0;
  width: fit-content;
  font-size: 11.5px;
  color: var(--p26-faint);
  border: 1px solid var(--p26-line);
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--p26-surface);
}
@media (max-width: 899px) { .p26__swipeHint { display: block; } }

.p26__footnotes {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--p26-faint);
}
.p26__footnotes p { margin: 2px 0; }

/* ══════════════════════════════════════════════════════════════════════
   FAQ — DS accordion
   ══════════════════════════════════════════════════════════════════════ */

.p26__faq { padding: 56px 0 8px; max-width: 880px; margin-inline: auto; } /* = .wrap--narrow, the FAQ width on every other page */
.p26__faqList { margin-top: 20px; }
.p26__faqItem { border-bottom: 1px solid var(--p26-line); }
.p26__faqItem:first-child { border-top: 1px solid var(--p26-line); }
.p26__faqQ {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: start;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--p26-ink);
  padding: 16px 2px;
}
.p26__faqQ svg { flex: none; color: var(--p26-faint); transition: transform .2s var(--p26-ease); }
.p26__faqQ[aria-expanded="true"] svg { transform: rotate(45deg); }
.p26__faqA {
  font-size: 14px;
  line-height: 1.65;
  color: var(--p26-ink-2);
  padding: 0 2px 18px;
  max-width: 64ch;
}

/* ══════════════════════════════════════════════════════════════════════
   END BAND — the quiet dark closer (neutral surface: gradient is
   hero-only). Dark in BOTH modes, like the DS footer — it sits right
   above the (always-dark) footer, so it must not invert.
   ══════════════════════════════════════════════════════════════════════ */

.p26__end {
  --p26-ink-obj-bg: #101014;
  --p26-ink-obj-fg: #f5f5f7;
  --p26-ink-obj-sub: #9b9ba7;
  --p26-ink-obj-line: rgba(255, 255, 255, .14);
  margin: 64px 0 72px;
  border-radius: 22px;
  background: var(--p26-ink-obj-bg);
  color: var(--p26-ink-obj-fg);
  text-align: center;
  padding: 44px 24px;
}
[data-mode="dark"] .p26 .p26__end { border: 1px solid var(--p26-line); }
@media (min-width: 900px) { .p26__end { padding: 56px 48px; } }
.p26__end h2 {
  font-family: var(--ff-display, 'Merriweather Sans', system-ui, sans-serif);
  font-size: var(--fs-h2, 28px);
  font-weight: 700;
  margin: 0;
}
.p26__end p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--p26-ink-obj-sub);
  max-width: 56ch;
  margin: 10px auto 0;
}
.p26__endRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.p26__endBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-height: 42px;
  padding: 0 22px;
  font-size: var(--fs-btn, 14.5px);
  font-weight: 600;
  text-decoration: none;
  background: var(--p26-ink-obj-fg);
  color: var(--p26-ink-obj-bg);
  border: 1px solid var(--p26-ink-obj-fg);
  transition: opacity .2s var(--p26-ease);
}
.p26__endBtn:hover { opacity: .88; }
.p26__endBtn--ghost {
  background: transparent;
  color: var(--p26-ink-obj-fg);
  border-color: var(--p26-ink-obj-line);
}
.p26__endBtn--ghost:hover { opacity: 1; background: color-mix(in srgb, var(--p26-ink-obj-fg) 10%, transparent); }

/* x-cloak: nothing flashes before Alpine wakes */
.p26 [x-cloak] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   THE TWO METERS — plain-language disclosure under the ledger. A job can
   draw on IPU (our compute) and AI tokens (third-party models) at once,
   and the owner's rule is that we say so rather than let the IPU
   allowance read as the whole story.
   ══════════════════════════════════════════════════════════════════════ */

.p26__meters {
  margin-top: 22px;
  border: 1px solid var(--p26-line);
  border-radius: var(--p26-r);
  background: var(--p26-soft);
  padding: 20px;
}
.p26__metersT {
  font-family: var(--ff-display, 'Merriweather Sans', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--p26-ink);
  margin: 0;
}
.p26__metersB {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--p26-ink-2);
  margin: 10px 0 0;
  max-width: 74ch;
}
.p26__meterGrid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
@media (min-width: 720px) { .p26__meterGrid { grid-template-columns: 1fr 1fr; } }
.p26__meter {
  border: 1px solid var(--p26-line);
  border-radius: var(--p26-r-sm);
  background: var(--p26-surface);
  padding: 14px 16px;
}
.p26__meter b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--p26-ink);
}
.p26__meter span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--p26-ink-2);
}


/* ══════════════════════════════════════════════════════════════════════
   PAYG QUICK TABLE — what Pay as You Grow has and what it does not,
   readable in one glance under the PAYG cards. Data from the pricing spec
   (payg entitlements + rule 4: SVOD only).
   ══════════════════════════════════════════════════════════════════════ */

.p26__paygQuick { max-width: 760px; margin: 26px auto 0; }
.p26__paygQuick h3 {
  font-family: var(--ff-display, 'Merriweather Sans', system-ui, sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--p26-ink);
  margin: 0 0 12px;
  text-align: center;
}
.p26__paygT {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  border: 1px solid var(--p26-line);
  border-radius: var(--p26-r-sm);
  overflow: hidden;
  background: var(--p26-surface);
}
.p26__paygT th, .p26__paygT td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--p26-line-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.p26__paygT tbody tr:last-child th, .p26__paygT tbody tr:last-child td { border-bottom: 0; }
.p26__paygT thead th {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--p26-ink);
  border-bottom: 1px solid var(--p26-line);
}
.p26__paygT tbody th {
  text-align: start;
  font-weight: 500;
  color: var(--p26-ink);
}
.p26__paygT .p26__cellNote { font-size: 11px; }
.p26__paygSplit th {
  text-align: start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p26-faint);
  background: var(--v2-raised, #f4f4f6);
}

/* Category heading icons — same faint colour as the heading text, sitting
   on the text baseline. currentColor, so dark mode is free. */
.p26__sectionRow th .p26__catSvg {
  display: inline-block;
  vertical-align: -2px;
  margin-inline-end: 7px;
}

/* ── Apps+ runs FOUR cards (Custom joined the row). Two-up on tablet,
   four-up on wide; the ink card keeps its pop only where there is room. */
@media (min-width: 640px) and (max-width: 1159px) {
  .p26__grid--four { grid-template-columns: repeat(2, 1fr); }
  .p26__grid--four .p26__card--featured { margin-block: 0; padding-block: 26px; }
}
@media (min-width: 1160px) {
  .p26__grid--four { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
/* the Custom card's "price" is a phrase, not a number */
.p26__amount--word { font-size: 26px; line-height: 1.2; letter-spacing: 0; }

/* ══════════════════════════════════════════════════════════════════════
   HOME TEASER — the same cards on a tinted band, one per pricing model.
   .p26 supplies the tokens; this only handles the section chrome and the
   little group label the pricing page does not need (there the tabs say
   which group you are looking at; here all three sit side by side).
   ══════════════════════════════════════════════════════════════════════ */

.p26home { padding-block: 56px; background: var(--p26-soft); }
@media (min-width: 900px) { .p26home { padding-block: 76px; } }
.p26home .p26__h2, .p26home .p26__h2sub { text-align: center; }
.p26home .p26__h2sub { margin-inline: auto; max-width: 62ch; }
/* The shared cards partial brings its own grids (.p26__grid / --four /
   --two), so home only needs the control bar spacing. Home is not a hero,
   so the frosted tiles sit on the tinted band instead of artwork. */
.p26home .p26__controls { margin-top: 22px; }
/* :not([aria-selected]) — this rule and `.p26__cat[aria-selected="true"]`
   have the SAME specificity (0,2,0), so being later it was overriding the
   selected tab's ink fill while the selected rule's light `color` still
   applied: light text on a light tile (and ink-on-ink in dark). Only the
   UNSELECTED tiles need the solid surface here. */
.p26home .p26__cat:not([aria-selected="true"]) { background: var(--p26-surface); }
.p26home .p26__grid { margin-top: 26px; }
/* Which MODEL this card belongs to — the pricing page says it with tabs. */
.p26home__group {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p26-faint);
  margin-bottom: 8px;
}
.p26__card--featured .p26home__group { color: var(--p26-ink-obj-sub); }
.p26home__all { text-align: center; margin-top: 22px; }