/*
 * DIA CAPITAL — Section 10C · Planes. FINAL — FROZEN FOR THIS PHASE (promoted from Visual V2.1; includes the earlier canonical V2 base,
 * the V2 page-theme / progression block and the V2.1 tablet 2 + 1 + Light-field block). Previous canonical: src/archive/section-10c-v2-canonical/.
 * (adopted 2026-10-13; COMPOSITION APPROVED / CANONICAL). v1.0 archived in
 * src/archive/section-10c-v1.0/.
 *
 * Requires the base system (main.css). Fills the dia.sections layer; scoped
 * under .dia-apex. A dark commercial field in both themes (.dia-island). Static.
 *
 * Premium commercial architecture, not SaaS cards and not Section 05's open
 * exhibition: one shared field holding three structured "bays" — near-square,
 * low-elevation surfaces joined edge to edge (one frame, hairline dividers), each
 * with an artwork chamber on top (a palette-derived light pool and a soft shelf) and
 * a tightly aligned information stack below (subgrid rows: level → name →
 * positioning → price → inclusions → CTA). All three bays are identical in size,
 * type and CTA. Products are optically matched (Gold ≈ 92 % / Pro ≈ 96 % / Elite
 * ≈ 98 % of the chamber, one common height cap): scope reads from architecture.
 */

@layer dia.sections {
  .dia-apex .dia-plans2 {
    --dia-plans2-ground: color-mix(in srgb, var(--dia-island-bg) 72%, #000);
    --dia-plans2-bay: color-mix(in srgb, var(--dia-surface) 46%, var(--dia-plans2-ground));
    --dia-plans2-edge: color-mix(in srgb, var(--dia-border) 85%, transparent);
    --dia-plans2-chamber-h: clamp(220px, 18vw, 280px);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--dia-text);
    background:
      radial-gradient(ellipse 70% 45% at 50% 42%, color-mix(in srgb, var(--dia-surface) 55%, transparent) 0%, transparent 78%),
      var(--dia-plans2-ground);
  }

  .dia-apex .dia-plans2::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 95% at 50% 45%, transparent 60%, rgb(0 0 0 / 0.36) 100%);
  }

  /* ---------- Head ---------- */

  .dia-apex .dia-plans2__head {
    max-inline-size: 48rem;
  }

  .dia-apex .dia-plans2__title {
    margin-block-start: var(--space-4);
  }

  .dia-apex .dia-plans2__intro {
    max-inline-size: 40rem;
    margin-block-start: var(--space-5);
  }

  /* ---------- One frame, three bays ---------- */

  .dia-apex .dia-plans2__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: var(--dia-plans2-chamber-h) repeat(6, auto);
    margin: var(--space-9) 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--dia-plans2-edge);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--dia-plans2-ground) 60%, transparent);
    box-shadow:
      0 30px 80px -40px rgb(0 0 0 / 0.65),
      inset 0 1px 0 color-mix(in srgb, var(--dia-text) 6%, transparent);
  }

  .dia-apex .dia-plans2__plan {
    --dia-plans2-w: 96%;

    position: relative;
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: var(--space-4);
    min-inline-size: 0;
    padding: 0 var(--space-6) var(--space-6);
    background: linear-gradient(to bottom, var(--dia-plans2-bay), color-mix(in srgb, var(--dia-plans2-bay) 55%, var(--dia-plans2-ground)));
  }

  .dia-apex .dia-plans2__plan + .dia-plans2__plan {
    border-inline-start: 1px solid var(--dia-plans2-edge);
  }

  .dia-apex .dia-plans2__plan:first-child {
    border-start-start-radius: var(--radius-sm);
    border-end-start-radius: var(--radius-sm);
  }

  .dia-apex .dia-plans2__plan:last-child {
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
  }

  /* Edge light along the top of each bay (restrained). */
  .dia-apex .dia-plans2__plan::before {
    content: "";
    position: absolute;
    inset-inline: 18%;
    inset-block-start: -1px;
    block-size: 1px;
    background: linear-gradient(to right, transparent, var(--dia-plans2-edge-light), transparent);
    pointer-events: none;
  }

  .dia-apex .dia-plans2__plan--gold {
    --dia-plans2-w: 92%;
    --dia-plans2-edge-light: color-mix(in srgb, var(--apex-gold) 55%, transparent);
    --dia-plans2-pool: radial-gradient(ellipse 42% 44% at 50% 56%, color-mix(in srgb, var(--apex-gold) 16%, transparent) 0%, transparent 72%);
  }

  .dia-apex .dia-plans2__plan--bundle-pro {
    --dia-plans2-w: 96%;
    --dia-plans2-edge-light: color-mix(in srgb, var(--apex-volume) 50%, transparent);
    --dia-plans2-pool:
      radial-gradient(ellipse 34% 36% at 50% 54%, color-mix(in srgb, var(--apex-gold) 14%, transparent) 0%, transparent 72%),
      radial-gradient(ellipse 56% 52% at 50% 50%, color-mix(in srgb, var(--apex-fractal) 8%, transparent) 0%, transparent 74%);
  }

  .dia-apex .dia-plans2__plan--bundle-elite {
    --dia-plans2-w: 98%;
    --dia-plans2-edge-light: color-mix(in srgb, var(--apex-fund-open) 50%, transparent);
    --dia-plans2-pool:
      radial-gradient(ellipse 34% 36% at 50% 52%, color-mix(in srgb, var(--apex-gold) 15%, transparent) 0%, transparent 72%),
      radial-gradient(ellipse 30% 30% at 28% 42%, color-mix(in srgb, var(--apex-fractal) 8%, transparent) 0%, transparent 74%),
      radial-gradient(ellipse 30% 30% at 74% 64%, color-mix(in srgb, var(--apex-volume) 8%, transparent) 0%, transparent 74%);
  }

  /* ---------- Artwork chamber ---------- */

  .dia-apex .dia-plans2__art {
    position: relative;
    display: grid;
    place-items: end center;
    margin: 0 calc(-1 * var(--space-6));
    padding: var(--space-6) var(--space-6) var(--space-4);
    background: var(--dia-plans2-pool);
    border-block-end: 1px solid var(--dia-plans2-edge);
  }

  /* Soft shelf shadow. */
  .dia-apex .dia-plans2__art::after {
    content: "";
    position: absolute;
    inset-inline: 22%;
    inset-block-end: 6px;
    block-size: 20px;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(0 0 0 / 0.5), transparent 72%);
    pointer-events: none;
  }

  .dia-apex .dia-plans2__art picture {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: end center;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
  }

  .dia-apex .dia-plans2__img {
    display: block;
    inline-size: var(--dia-plans2-w);
    block-size: auto;
    max-block-size: calc(var(--dia-plans2-chamber-h) - var(--space-6) - var(--space-4));
    object-fit: contain;
    object-position: 50% 100%;
  }

  /* ---------- Information stack ---------- */

  .dia-apex .dia-plans2__id {
    padding-block-start: var(--space-3);
  }

  .dia-apex .dia-plans2__level {
    margin: 0;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-plans2__name {
    margin: var(--space-2) 0 0;
    font-family: var(--font-display);
    font-size: var(--dia-fs-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--dia-text);
  }

  .dia-apex .dia-plans2__pos {
    max-inline-size: 26rem;
    margin: 0;
    font-size: var(--dia-fs-body);
    line-height: 1.6;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  /* Price: a slightly raised tray, the most readable commercial element. */
  .dia-apex .dia-plans2__price {
    display: grid;
    row-gap: var(--space-2);
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--dia-plans2-edge);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--dia-plans2-ground) 55%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dia-text) 5%, transparent);
  }

  .dia-apex .dia-plans2__price-row {
    display: grid;
    row-gap: 2px;
  }

  .dia-apex .dia-plans2__price dt {
    white-space: nowrap;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-plans2__price dd {
    margin: 0;
    white-space: nowrap;
  }

  /* Label and value each stay whole; in a narrow tray the value drops below its label. */
  .dia-apex .dia-plans2__price-row--regular {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-3);
  }

  .dia-apex .dia-plans2__price-row--regular dd {
    font-size: var(--dia-fs-body);
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-plans2__price-row--current dd .dia-plans2__amount {
    font-family: var(--font-display);
    font-size: var(--dia-fs-h1);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--dia-text);
  }

  .dia-apex .dia-plans2__price-row--current dd .dia-plans2__period {
    font-size: var(--dia-fs-body);
    font-weight: 600;
    color: var(--dia-text);
  }

  /* Inclusions */
  .dia-apex .dia-plans2__includes-key {
    margin: 0;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-plans2__inc {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--dia-fs-body);
    line-height: 1.5;
    color: var(--dia-text);
  }

  .dia-apex .dia-plans2__inc > li {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
  }

  .dia-apex .dia-plans2__inc > li + li {
    margin-block-start: var(--space-2);
  }

  .dia-apex .dia-plans2__inc > li::before {
    content: "";
    flex: none;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--dia-text-secondary);
    transform: translateY(-2px);
  }

  .dia-apex .dia-plans2__inc > .dia-plans2__inc--matrix::before {
    box-sizing: border-box;
    inline-size: 8px;
    block-size: 8px;
    border: 1.5px solid var(--dia-bronze);
    background: transparent;
    transform: translateY(-1px);
  }

  .dia-apex .dia-plans2__inc > .dia-plans2__inc--inherited {
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-plans2__inc > .dia-plans2__inc--inherited::before {
    inline-size: 10px;
    block-size: 1.5px;
    border-radius: 0;
    transform: translateY(-4px);
  }

  /* Identical CTA on all three bays; full width of the bay for a clean column end. */
  .dia-apex .dia-plans2__cta {
    align-self: end;
    justify-self: stretch;
  }

  /* ---------- Notes: quiet ---------- */

  .dia-apex .dia-plans2__notes {
    max-inline-size: 48rem;
    margin-block-start: var(--space-7);
    font-size: var(--dia-fs-small);
    line-height: 1.6;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-plans2__notes p {
    margin: 0;
  }

  .dia-apex .dia-plans2__notes p + p {
    margin-block-start: var(--space-1);
  }

  /* ---------- 768–1023px: one full-width bay per row (art | details) ---------- */

  @media (max-width: 1023px) {
    .dia-apex .dia-plans2__list {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: none;
    }

    .dia-apex .dia-plans2__plan {
      grid-row: auto;
      grid-template-rows: none;
      grid-template-columns: minmax(0, 1fr); /* explicit single track: long words at large text scales wrap instead of widening it */
      padding: 0 var(--space-6) var(--space-6);
    }

    .dia-apex .dia-plans2__plan + .dia-plans2__plan {
      border-inline-start: 0;
      border-block-start: 1px solid var(--dia-plans2-edge);
    }

    .dia-apex .dia-plans2__plan:first-child,
    .dia-apex .dia-plans2__plan:last-child {
      border-radius: 0;
    }

    .dia-apex .dia-plans2__art {
      block-size: var(--dia-plans2-chamber-h);
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .dia-apex .dia-plans2 {
      --dia-plans2-chamber-h: 100%;
    }

    .dia-apex .dia-plans2__plan {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: var(--space-7);
      align-items: start;
      padding: var(--space-6);
    }

    .dia-apex .dia-plans2__plan > :not(.dia-plans2__art) {
      grid-column: 2;
    }

    .dia-apex .dia-plans2__art {
      grid-column: 1;
      grid-row: 1 / span 7;
      align-self: stretch;
      block-size: auto;
      min-block-size: 300px;
      margin: calc(-1 * var(--space-6)) 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
      padding: var(--space-5);
      border-block-end: 0;
      border-inline-end: 1px solid var(--dia-plans2-edge);
      place-items: center;
      /* Pool centred on the product in this layout. */
      background-position: 50% 50%;
    }

    .dia-apex .dia-plans2__art::after {
      display: none;
    }

    .dia-apex .dia-plans2__art picture {
      place-items: center;
      block-size: auto;
    }

    .dia-apex .dia-plans2__img {
      max-block-size: 300px;
      object-position: 50% 50%;
    }

    .dia-apex .dia-plans2__cta {
      justify-self: start;
    }
  }

  @media (max-width: 767px) {
    .dia-apex .dia-plans2 {
      --dia-plans2-chamber-h: clamp(220px, 62vw, 260px);
    }

    .dia-apex .dia-plans2__list {
      margin-block-start: var(--space-8);
    }

    .dia-apex .dia-plans2__plan {
      row-gap: var(--space-4);
      padding: 0 var(--space-5) var(--space-6);
    }

    .dia-apex .dia-plans2__art {
      margin-inline: calc(-1 * var(--space-5));
      padding-inline: var(--space-5);
    }

    .dia-apex .dia-plans2__price {
      padding: var(--space-4);
    }
  }
}

/* =====================================================================
 * Pricing V2 — native page theme, scale progression, price hierarchy
 * ===================================================================== */
@layer dia.sections {
  .dia-apex .dia-plans2--v2 {
    --dia-plans2-ground: var(--dia-bg);
    --dia-plans2-bay: color-mix(in srgb, var(--dia-text) 4%, var(--dia-bg));
    --dia-plans2-edge: color-mix(in srgb, var(--dia-text) 15%, transparent);
    --dia-plans2-chamber-h: clamp(240px, 20vw, 300px);
    --dia-plans2-art-h: calc(var(--dia-plans2-chamber-h) - var(--space-6) - var(--space-4));
    background:
      radial-gradient(ellipse 70% 45% at 50% 40%, color-mix(in srgb, var(--dia-text) 5%, transparent) 0%, transparent 78%),
      var(--dia-bg);
  }

  .dia-theme-light .dia-apex .dia-plans2--v2 { --dia-plans2-bay: #FFFFFF; --dia-plans2-edge: color-mix(in srgb, var(--dia-text) 14%, transparent); }

  .dia-apex .dia-plans2--v2::after { background: radial-gradient(ellipse 120% 95% at 50% 45%, transparent 62%, rgb(0 0 0 / 0.22) 100%); }
  .dia-theme-light .dia-apex .dia-plans2--v2::after { display: none; }

  .dia-apex .dia-plans2--v2 .dia-plans2__list { background: color-mix(in srgb, var(--dia-bg) 60%, transparent); }
  .dia-theme-light .dia-apex .dia-plans2--v2 .dia-plans2__list { box-shadow: 0 26px 50px -38px rgb(12 28 36 / 0.3); }

  /* Scale progression: perceived artwork height Gold 82 % · Pro 94 % · Elite 100 % of the common chamber. */
  .dia-apex .dia-plans2--v2 .dia-plans2__plan--gold { --dia-plans2-s: 0.82; }
  .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-pro { --dia-plans2-s: 0.94; }
  .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-elite { --dia-plans2-s: 1; }

  .dia-apex .dia-plans2--v2 .dia-plans2__img {
    inline-size: auto;
    max-inline-size: 100%;
    block-size: calc(var(--dia-plans2-art-h) * var(--dia-plans2-s));
    max-block-size: none;
  }

  /* Atmospheric footprint grows with the ecosystem (restrained). */
  .dia-apex .dia-plans2--v2 .dia-plans2__plan--gold { --dia-plans2-pool: radial-gradient(ellipse 38% 40% at 50% 60%, color-mix(in srgb, var(--apex-gold) 16%, transparent) 0%, transparent 72%); }
  .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-pro { --dia-plans2-pool:
    radial-gradient(ellipse 40% 40% at 50% 56%, color-mix(in srgb, var(--apex-gold) 14%, transparent) 0%, transparent 72%),
    radial-gradient(ellipse 60% 56% at 50% 52%, color-mix(in srgb, var(--apex-fractal) 9%, transparent) 0%, transparent 76%); }
  .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-elite { --dia-plans2-pool:
    radial-gradient(ellipse 38% 38% at 50% 54%, color-mix(in srgb, var(--apex-gold) 15%, transparent) 0%, transparent 72%),
    radial-gradient(ellipse 66% 62% at 50% 52%, color-mix(in srgb, var(--apex-fractal) 9%, transparent) 0%, transparent 78%),
    radial-gradient(ellipse 34% 34% at 76% 64%, color-mix(in srgb, var(--apex-volume) 9%, transparent) 0%, transparent 74%); }

  /* Light: the dark-designed product art gets a controlled local dark field inside each chamber (not a section island). */
  .dia-theme-light .dia-apex .dia-plans2--v2 .dia-plans2__art {
    background:
      radial-gradient(ellipse 48% 54% at 50% 54%, rgb(7 20 28 / 0.97) 0%, rgb(7 20 28 / 0.9) 58%, transparent 100%),
      var(--dia-plans2-pool);
  }
  .dia-theme-light .dia-apex .dia-plans2--v2 .dia-plans2__art::after { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(0 0 0 / 0.28), transparent 72%); }

  /* Price: current is primary; regular is secondary with a subtle strike. */
  .dia-apex .dia-plans2--v2 .dia-plans2__price { row-gap: var(--space-2); }
  .dia-apex .dia-plans2--v2 .dia-plans2__price-row--current dd .dia-plans2__amount { font-size: var(--dia-fs-h1); }
  .dia-apex .dia-plans2--v2 .dia-plans2__price-row--regular dd { font-size: var(--dia-fs-small); }
  .dia-apex .dia-plans2--v2 .dia-plans2__price-row--regular dd .dia-plans2__amount,
  .dia-apex .dia-plans2--v2 .dia-plans2__price-row--regular dd .dia-plans2__period {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--dia-text-secondary) 70%, transparent);
  }
  .dia-apex .dia-plans2--v2 .dia-plans2__price-row--current dt { color: var(--dia-accent-text-raised); }

  .dia-theme-light .dia-apex .dia-plans2--v2 .dia-plans2__price { background: #F6F7F7; }

  /* Tablet art column: same progression. */
  @media (min-width: 768px) and (max-width: 1023px) {
    .dia-apex .dia-plans2--v2 { --dia-plans2-art-h: 250px; }
    .dia-apex .dia-plans2--v2 .dia-plans2__img { max-block-size: none; }
    .dia-apex .dia-plans2--v2 .dia-plans2__art { min-block-size: 0; }
    .dia-theme-light .dia-apex .dia-plans2--v2 .dia-plans2__art {
      background:
        radial-gradient(ellipse 66% 40% at 50% 50%, rgb(7 20 28 / 0.97) 0%, rgb(7 20 28 / 0.9) 58%, transparent 100%),
        var(--dia-plans2-pool);
    }
  }

  @media (max-width: 767px) {
    .dia-apex .dia-plans2--v2 { --dia-plans2-chamber-h: clamp(210px, 56vw, 240px); }
  }
}

/* =====================================================================
 * Pricing V2.1 — tablet 2 + 1, softer Light artwork field
 * ===================================================================== */
@layer dia.sections {
  /* Light: product emerges from a broad, multi-stop atmospheric field (no ellipse edge, no pill). */
  .dia-theme-light .dia-apex .dia-plans2--v2 .dia-plans2__art,
  .dia-theme-light .dia-apex .dia-plans2--v2 .dia-plans2__art {
    background:
      radial-gradient(ellipse 36% 46% at 38% 62%, rgb(7 20 28 / 0.30) 0%, transparent 70%),
      radial-gradient(ellipse 34% 42% at 66% 44%, rgb(10 28 40 / 0.26) 0%, transparent 72%),
      radial-gradient(ellipse 60% 64% at 50% 52%,
        rgb(7 20 28 / 0.74) 0%, rgb(7 20 28 / 0.62) 18%, rgb(7 20 28 / 0.46) 36%,
        rgb(7 20 28 / 0.28) 54%, rgb(7 20 28 / 0.12) 72%, rgb(7 20 28 / 0.03) 88%, transparent 100%),
      radial-gradient(ellipse 40% 34% at 50% 80%, rgb(182 120 60 / 0.10) 0%, transparent 70%),
      var(--dia-plans2-pool);
  }

  /* ---------- Tablet 768–1023: Gold | Pro, then Elite spanning the row ---------- */
  @media (min-width: 768px) and (max-width: 1023px) {
    .dia-apex .dia-plans2--v2 {
      --dia-plans2-chamber-h: 232px;
      --dia-plans2-art-h: calc(var(--dia-plans2-chamber-h) - var(--space-6) - var(--space-4));
    }

    .dia-apex .dia-plans2--v2 .dia-plans2__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: var(--dia-plans2-chamber-h) repeat(6, auto) auto;
    }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--gold,
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-pro {
      grid-row: span 7;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
      column-gap: 0;
      align-items: stretch;
      padding: 0 var(--space-5) var(--space-5);
      border-block-start: 0;
    }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-pro { border-inline-start: 1px solid var(--dia-plans2-edge); }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--gold > *,
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-pro > * { grid-column: 1; }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--gold .dia-plans2__art,
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-pro .dia-plans2__art {
      grid-row: auto;
      align-self: auto;
      margin: 0 calc(-1 * var(--space-5));
      padding: var(--space-6) var(--space-5) var(--space-4);
      min-block-size: 0;
      block-size: auto;
      border-inline-end: 0;
      border-block-end: 1px solid var(--dia-plans2-edge);
      place-items: end center;
    }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--gold .dia-plans2__art::after,
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-pro .dia-plans2__art::after { display: block; }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--gold .dia-plans2__art picture,
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-pro .dia-plans2__art picture { place-items: end center; block-size: 100%; }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--gold .dia-plans2__cta,
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-pro .dia-plans2__cta { justify-self: stretch; }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--gold .dia-plans2__img,
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-pro .dia-plans2__img { object-position: 50% 100%; }

    /* Elite: the wider ecosystem as a horizontal bay (art | plan, price, scope, CTA). */
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-elite {
      grid-column: 1 / -1;
      grid-row: 8;
      grid-template-rows: none;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: var(--space-6);
      align-items: start;
      padding: var(--space-5);
      border-inline-start: 0;
      border-block-start: 1px solid var(--dia-plans2-edge);
    }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-elite > :not(.dia-plans2__art) { grid-column: 2; }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-elite .dia-plans2__art {
      grid-column: 1;
      grid-row: 1 / span 5;
      align-self: stretch;
      block-size: auto;
      min-block-size: 0;
      margin: calc(-1 * var(--space-5)) 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
      padding: var(--space-5);
      border-block-end: 0;
      border-inline-end: 1px solid var(--dia-plans2-edge);
      place-items: center;
    }

    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-elite .dia-plans2__art::after { display: none; }
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-elite .dia-plans2__art picture { place-items: center; block-size: auto; }
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-elite .dia-plans2__img { object-position: 50% 50%; }
    .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-elite .dia-plans2__cta { justify-self: stretch; }

    /* Same height-based progression inside the narrower bays. */
    .dia-apex .dia-plans2--v2 .dia-plans2__price { padding: var(--space-3) var(--space-4); }
    .dia-apex .dia-plans2--v2 .dia-plans2__price-row--current dd .dia-plans2__amount { font-size: var(--dia-fs-h2); }
    .dia-apex .dia-plans2--v2 .dia-plans2__pos { font-size: var(--dia-fs-small); }
    .dia-apex .dia-plans2--v2 .dia-plans2__name { font-size: var(--dia-fs-h4); }
  }

  /* Light, tablet: the Elite art column keeps the same soft field, centred on the product. */
  @media (min-width: 768px) and (max-width: 1023px) {
    .dia-theme-light .dia-apex .dia-plans2--v2 .dia-plans2__plan--bundle-elite .dia-plans2__art {
      background:
        radial-gradient(ellipse 60% 52% at 50% 50%,
          rgb(7 20 28 / 0.74) 0%, rgb(7 20 28 / 0.6) 20%, rgb(7 20 28 / 0.42) 40%,
          rgb(7 20 28 / 0.22) 60%, rgb(7 20 28 / 0.07) 80%, transparent 100%),
        var(--dia-plans2-pool);
    }
  }

  @media (max-width: 767px) {
    .dia-apex .dia-plans2--v2 .dia-plans2__plan { row-gap: var(--space-3); padding-block-end: var(--space-5); }
  }

  /* Large text scale only: price label and value may wrap in a narrow tray (they stay whole at normal scale). */
  .dia-apex .dia-plans2__price { container-type: inline-size; }
  @container (max-width: 12em) {
    .dia-apex .dia-plans2__price dt,
    .dia-apex .dia-plans2__price dd { white-space: normal; }
  }
}