/* =====================================================================
   LeadsNimble Plan Comparison — the full "what actually changes between
   tiers" matrix for the detailed /pricing/ page.

   Built from the design system's own vocabulary (the aurora-nightfall tokens
   resolved to literals and re-scoped under --lnpm-*), LIGHT the default mode,
   [data-mode="dark"] flipping the palette, and the dark palette control
   section emitted at [data-mode="dark"] {{WRAPPER}} .lnew-price-matrix so it
   outranks the light controls on specificity, not source order — the same
   arrangement as lnew-pricing2.css / lnew-plan-builder.css.

   FOUR STRUCTURAL DECISIONS
   -------------------------
   1. IT IS A REAL <table>. Not a grid of divs: the content is a matrix with
      row and column headers, and a screen reader that can announce "Pro,
      Connections per type, 3" is worth more than any layout convenience.
      <th scope="col"> on the plan headers, <th scope="row"> on the row
      labels, and the group headings are <th colspan> rows.

   2. MOBILE IS A SCROLLER WITH A PINNED LABEL COLUMN, not a re-stack.
      Rebuilding a 5-column matrix as five stacked cards duplicates every
      row label five times and triples the page's height; pinning the first
      column and letting the plans scroll under it keeps the comparison a
      comparison. The pin is `position: sticky; left: 0` on the first cell of
      every row, which needs `border-collapse: separate` — a collapsed table
      drops the sticky cell's own borders behind its neighbours.

   3. THE HEADER ROW PINS TOO, at --lnpm-sticky-top. On a ten-row matrix the
      plan names leave the viewport before the last row arrives, and a cell
      reading "10" with no visible column header is noise. Offset defaults to
      88px to clear the flat dark nav 2 bar.

   4. CONTROLS WRITE TOKENS; MEDIA QUERIES WRITE PROPERTIES — an Elementor
      `default` emits an unconditional (0,2,0) desktop rule that outranks the
      (0,1,0) @media rules here at every width. See
      [[elementor-control-css-beats-media-queries]].
   ===================================================================== */

/* Local reset, :where()-wrapped so it carries ZERO specificity. */
.lnew-price-matrix, .lnew-price-matrix *, .lnew-price-matrix *::before, .lnew-price-matrix *::after { box-sizing: border-box; }

/* THE `hidden` GUARD. A UA's `[hidden] { display: none }` carries ZERO
   specificity, so any `display: flex` / `inline-flex` / `grid` in this file
   out-ranks it and an element hidden by attribute stays visible. `!important`
   is deliberate: `hidden` is not a style preference, it is a statement that
   the element is not part of the page. */
.lnew-price-matrix [hidden] { display: none !important; }

:where(.lnew-price-matrix) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-price-matrix) :where(p) { margin: 0; }
:where(.lnew-price-matrix) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.lnew-price-matrix) :where(li) { margin: 0; }
:where(.lnew-price-matrix) :where(svg) { display: block; }
:where(.lnew-price-matrix) :where(h1, h2, h3, h4, h5) { margin: 0; }
:where(.lnew-price-matrix) :where(b, strong) { font-weight: 700; }
:where(.lnew-price-matrix) :where(i, em) { font-style: normal; }

.lnew-price-matrix {
  /* ---- motion ---- */
  --lnpm-ease: cubic-bezier(.22,1,.36,1);
  --lnpm-rv-dist: 70px;
  --lnpm-rv-dur: 1.2s;
  --lnpm-rv-step: 70ms;

  /* ---- geometry ---- */
  --lnpm-maxw: 1360px;
  --lnpm-gutter: 28px;
  --lnpm-head-align: center;
  --lnpm-title-size: clamp(31px, 3.6vw, 47px);
  --lnpm-lead-size: 18px;

  --lnpm-card-radius: 24px;
  --lnpm-sticky-top: 88px;
  --lnpm-label-w: 280px;
  --lnpm-col-w: 148px;
  --lnpm-cell-pad-y: 15px;
  --lnpm-cell-pad-x: 16px;

  --lnpm-plan-size: 16px;
  --lnpm-tag-size: 12.5px;
  --lnpm-group-size: 11px;
  --lnpm-label-size: 14.5px;
  --lnpm-note-size: 12.5px;
  --lnpm-cell-size: 14.5px;

  --lnpm-btn-size: 13.5px;
  --lnpm-btn-pad-y: 9px;
  --lnpm-btn-pad-x: 16px;
  --lnpm-btn-radius: 10px;

  /* the two beds side by side: the module list is long, the channel list
     short, so they are NOT equal halves */
  --lnpm-beds-cols: 1.7fr 1fr;
  --lnpm-bed-colw: 180px;
  --lnpm-bed-pad: 26px 28px;
  --lnpm-chip-size: 13.5px;

  /* ---- type ---- */
  --lnpm-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lnpm-font-head: 'Parkinsans', 'DM Sans', sans-serif;

  /* ---- palette · LIGHT ---- */
  --lnpm-bg: #dde2f4;
  --lnpm-ink: #12122a;
  --lnpm-body: #454a63;
  --lnpm-muted: #6b7089;
  --lnpm-muted-2: #9498b0;
  --lnpm-line: #e7e9f4;
  --lnpm-line-2: #f0f1f8;
  --lnpm-surface: #ffffff;
  --lnpm-zebra: #fafbfe;
  --lnpm-group-bg: #f4f6fc;

  --lnpm-eyebrow-bg: #eef0ff;
  --lnpm-eyebrow-ink: #5b46e0;
  --lnpm-eyebrow-border: #e0e3ff;

  --lnpm-grad-1: #6366f1;
  --lnpm-grad-2: #a855f7;
  --lnpm-grad-3: #22d3ee;
  --lnpm-accent-grad: linear-gradient(100deg, var(--lnpm-grad-1) 0%, var(--lnpm-grad-2) 52%, var(--lnpm-grad-3) 100%);
  --lnpm-accent: #6d5cf5;
  --lnpm-accent-ink: #ffffff;
  --lnpm-accent-halo: rgba(139,124,255,.28);
  --lnpm-accent-soft-bg: #eef0ff;
  --lnpm-accent-soft-border: #e0e3ff;

  --lnpm-featured-bg: #f6f4ff;
  --lnpm-glass-blur: none;
  --lnpm-glass-hi: transparent;

  --lnpm-sh-sm-1: rgba(30,30,80,.05);
  --lnpm-sh-sm-2: rgba(30,30,80,.05);
  --lnpm-sh-md: rgba(30,30,80,.10);
  --lnpm-shadow-sm: 0 1px 2px var(--lnpm-sh-sm-1), 0 2px 6px var(--lnpm-sh-sm-2);
  --lnpm-shadow-md: 0 12px 34px var(--lnpm-sh-md);
  --lnpm-card-shadow: var(--lnpm-shadow-md);
  /* the band that separates the pinned label column from the cells beside it.
     A gradient strip, not a box-shadow — see the note further down. */
  --lnpm-pin-w: 13px;
  --lnpm-pin-ink: rgba(30,30,80,.10);

  position: relative;
  overflow-x: clip;
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--lnpm-bg);
  font-family: var(--lnpm-font-sans);
  color: var(--lnpm-body);
  font-size: 17px;
  /* stated, not inherited — see [[wp-theme-inherited-type-leak]] */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

[data-mode="dark"] .lnew-price-matrix {
  --lnpm-bg: #10101d;
  --lnpm-ink: #f5f6ff;
  --lnpm-body: #b8bed6;
  --lnpm-muted: #949bbb;
  --lnpm-muted-2: #6d7398;
  --lnpm-line: rgba(255,255,255,.10);
  --lnpm-line-2: rgba(255,255,255,.06);
  --lnpm-surface: rgba(255,255,255,.045);
  --lnpm-zebra: rgba(255,255,255,.02);
  --lnpm-group-bg: rgba(255,255,255,.05);

  --lnpm-eyebrow-bg: rgba(255,255,255,.05);
  --lnpm-eyebrow-ink: #cdc6ff;
  --lnpm-eyebrow-border: rgba(255,255,255,.12);

  --lnpm-accent: #8b7cff;
  --lnpm-accent-soft-bg: rgba(139,124,255,.12);
  --lnpm-accent-soft-border: rgba(139,124,255,.24);

  --lnpm-featured-bg: rgba(139,124,255,.08);
  --lnpm-glass-blur: blur(14px) saturate(150%);
  --lnpm-glass-hi: rgba(255,255,255,.10);

  --lnpm-sh-sm-1: rgba(0,0,0,.4);
  --lnpm-sh-sm-2: transparent;
  --lnpm-sh-md: rgba(0,0,0,.5);
  --lnpm-shadow-sm: 0 1px 2px var(--lnpm-sh-sm-1);
  --lnpm-card-shadow: inset 0 1px 0 var(--lnpm-glass-hi), var(--lnpm-shadow-md);
  --lnpm-pin-ink: rgba(0,0,0,.45);
}

/* =====================================================================
   Layout shell + head — the design system's standard opening
   ===================================================================== */
.lnew-price-matrix__wrap {
  width: 100%;
  max-width: var(--lnpm-maxw);
  margin-inline: auto;
  padding-inline: var(--lnpm-gutter);
}

.lnew-price-matrix__head {
  margin-inline: auto;
  margin-bottom: 44px;
  text-align: var(--lnpm-head-align);
}

.lnew-price-matrix__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--lnpm-font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--lnpm-eyebrow-ink);
  background: var(--lnpm-eyebrow-bg);
  border: 1px solid var(--lnpm-eyebrow-border);
  padding: 7px 14px; border-radius: 100px;
}
.lnew-price-matrix__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lnpm-accent);
  box-shadow: 0 0 0 4px var(--lnpm-accent-halo);
  opacity: .45;
  animation: lnpm-dot-lamp 5.2s ease-in-out infinite;
}
@keyframes lnpm-dot-lamp {
  0%        { opacity: .35; box-shadow: 0 0 0 4px var(--lnpm-accent-halo), 0 0 0 0 transparent; }
  8%        { opacity: 1;   box-shadow: 0 0 0 4px var(--lnpm-accent-halo), 0 0 7px 1px var(--lnpm-accent); }
  22%       { opacity: 1;   box-shadow: 0 0 0 4px var(--lnpm-accent-halo), 0 0 7px 1px var(--lnpm-accent); }
  40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnpm-accent-halo), 0 0 0 0 transparent; }
}

.lnew-price-matrix__title {
  font-family: var(--lnpm-font-head);
  font-weight: 500;
  font-size: var(--lnpm-title-size);
  margin-top: 18px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lnpm-ink);
  text-wrap: balance;
}
.lnew-price-matrix__lead {
  margin-top: 18px;
  font-size: var(--lnpm-lead-size);
  color: var(--lnpm-muted);
  line-height: 1.65;
  text-wrap: balance;
}
.lnew-price-matrix__accent {
  background: var(--lnpm-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* =====================================================================
   The table card
   ===================================================================== */
.lnew-price-matrix__card {
  position: relative;
  background: var(--lnpm-surface);
  -webkit-backdrop-filter: var(--lnpm-glass-blur);
  backdrop-filter: var(--lnpm-glass-blur);
  border: 1px solid var(--lnpm-line);
  border-radius: var(--lnpm-card-radius);
  box-shadow: var(--lnpm-card-shadow);
  /* clip is what rounds the table's own corners against the card, and it is
     also what makes the horizontal scroll below stay inside the card */
  overflow: hidden;
}

.lnew-price-matrix__scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.lnew-price-matrix__table {
  width: 100%;
  /* separate, NOT collapse — a collapsed table drops the sticky first
     column's borders behind the cells sliding under it (decision 2) */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: var(--lnpm-cell-size);
}

/* ---- column head ----
   NOT sticky by default, and that is a considered default rather than a
   missing feature. `position: sticky` clamps in BOTH directions: with a
   non-zero `top` (which this needs, to clear the fixed site header) the
   header slides DOWN over the first body rows the moment the table's top
   edge passes above that offset. On a ten-row matrix — about 1,100px against
   a 900px viewport — that costs the first group heading and the first row of
   data to save perhaps 200px of scrolling, and the header then unpins again
   at the end of the table anyway. Switch "Pin The Plan Header" on in the
   Style tab for a much longer matrix, where the trade flips. */
.lnew-price-matrix__th {
  z-index: 3;
  vertical-align: bottom;
  text-align: center;
  width: var(--lnpm-col-w);
  padding: 20px var(--lnpm-cell-pad-x) 16px;
  background: var(--lnpm-surface);
  border-bottom: 1px solid var(--lnpm-line);
  font-weight: 400;
}
/* opt-in vertical pinning (see the note above). The label column's HORIZONTAL
   pin below is unconditional — it has no such trade-off, because a table can
   only ever be scrolled sideways past its own left edge. */
.lnew-price-matrix--pin .lnew-price-matrix__th {
  position: sticky;
  top: var(--lnpm-sticky-top);
}

/* the corner cell pins in BOTH directions, so it must outrank each */
.lnew-price-matrix__th--label {
  position: sticky;
  left: 0;
  z-index: 5;
  width: var(--lnpm-label-w);
  text-align: left;
}
.lnew-price-matrix__th--featured { background: var(--lnpm-featured-bg); }

/* `display: block` on all four of these is load-bearing, not cosmetic. They
   are <span>s living directly inside a <th> — a table cell is not a flex
   container, so an inline span sits on the same line as its neighbour and the
   header reads "Free For the solo founder proving the idea works." as one run
   of text. Blocks put the name, the tagline, the row label and its note each
   on their own line, which is the whole point of having them as separate
   elements. */
.lnew-price-matrix__plan {
  display: block;
  font-family: var(--lnpm-font-head);
  font-size: var(--lnpm-plan-size); font-weight: 700;
  line-height: 1.3;
  color: var(--lnpm-ink);
}
.lnew-price-matrix__tag {
  display: block;
  margin-top: 5px;
  font-size: var(--lnpm-tag-size);
  color: var(--lnpm-muted);
  line-height: 1.45;
}
.lnew-price-matrix__badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 11px;
  border-radius: 100px;
  background: var(--lnpm-accent-grad);
  color: var(--lnpm-accent-ink);
  font-family: var(--lnpm-font-sans);
  font-size: 11px; font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.lnew-price-matrix__th-cta { margin-top: 12px; }

/* ---- group heading row ----
   The `th` itself is NOT the sticky element, and that is deliberate: it
   carries `colspan` across every plan column, so its own box is exactly as
   wide as the whole scrollable row. `position: sticky` only has room to move
   an element within its own box's width — a box that already equals its
   container's width has zero room, so `left: 0` on the `th` directly is a
   no-op and the label scrolls away with the rest of the table (the bug this
   replaced). Pinning the inner text span instead gives sticky a narrow box
   with real room to travel, while the `th`'s tinted background keeps
   spanning the full row underneath it. */
.lnew-price-matrix__group th {
  padding: 0;
  background: var(--lnpm-group-bg);
  border-top: 1px solid var(--lnpm-line);
  border-bottom: 1px solid var(--lnpm-line);
  text-align: left;
}
.lnew-price-matrix__group-t {
  position: sticky;
  left: 0;
  display: inline-block;
  padding: 13px var(--lnpm-cell-pad-x);
  font-size: var(--lnpm-group-size); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.6;
  color: var(--lnpm-muted-2);
}

/* ---- body rows ---- */
.lnew-price-matrix__row:nth-child(even) .lnew-price-matrix__cell,
.lnew-price-matrix__row:nth-child(even) .lnew-price-matrix__rowlabel { background: var(--lnpm-zebra); }

.lnew-price-matrix__rowlabel {
  position: sticky;
  left: 0;
  z-index: 2;
  width: var(--lnpm-label-w);
  padding: var(--lnpm-cell-pad-y) var(--lnpm-cell-pad-x);
  background: var(--lnpm-surface);
  border-bottom: 1px solid var(--lnpm-line-2);
  text-align: left;
  font-weight: 400;
}

/* =====================================================================
   THE PINNED-COLUMN EDGE — one continuous band, not one shadow per cell.

   This was originally `box-shadow: 6px 0 12px -8px` on each label cell, and
   it looked broken for a reason worth writing down: a blurred box-shadow is
   darkest along the middle of an edge and fades toward that box's corners.
   Stack fourteen cells vertically and you get fourteen shadow segments, each
   fading out at its own top and bottom — a visibly beaded edge with a lighter
   notch at every row boundary. That periodic lightening is what reads as a
   "gap between the cells".

   The fix is to stop casting a shadow per box. Each label cell instead paints
   a full-height gradient strip just outside its right edge: no vertical
   falloff, so consecutive strips tile into ONE unbroken band down the whole
   table. The sticky cells already establish a containing block, so the strip
   positions against the cell without any extra `position: relative`.

   Kept visible at all widths, deliberately — it is the edge of the frozen
   column and reads as depth whether or not the table is currently scrolled.
   ===================================================================== */
.lnew-price-matrix__th--label::after,
.lnew-price-matrix__rowlabel::after {
  content: "";
  position: absolute;
  top: 0;
  /* -1px, NOT 0, and this is the whole point of the rule.
     `top: 0; bottom: 0` on an absolutely-positioned child resolves against the
     PADDING box, and every one of these cells carries a 1px border-bottom — so
     each strip came out exactly 1px shorter than its row and left a
     transparent tick at all ten interior boundaries. That is the same beading
     this replaced, just at a finer pitch, and it is worst in dark mode where a
     45%-black band is interrupted by a light hairline. The extra pixel on the
     final row is clipped by the card's own overflow: hidden. */
  bottom: -1px;
  right: calc(var(--lnpm-pin-w) * -1);
  width: var(--lnpm-pin-w);
  /* An EASED ramp, not a linear one. A linear fade is the obvious way to write
     this and it reads harder than the box-shadow it replaced, because a
     Gaussian blur falls off fast near the edge and then trails a long way out.
     These stops approximate that curve, which is what makes the band look soft
     rather than like a printed rule. color-mix keeps the whole thing driven by
     the single colour the Style tab exposes. */
  background: linear-gradient(to right,
    var(--lnpm-pin-ink) 0%,
    color-mix(in srgb, var(--lnpm-pin-ink) 58%, transparent) 18%,
    color-mix(in srgb, var(--lnpm-pin-ink) 30%, transparent) 38%,
    color-mix(in srgb, var(--lnpm-pin-ink) 13%, transparent) 58%,
    color-mix(in srgb, var(--lnpm-pin-ink) 4%, transparent) 78%,
    transparent 100%);
  pointer-events: none;
}
/* The last row carries no border-bottom, so the -1px above would hang a single
   pixel past the scroller — and because `overflow-x: auto` forces overflow-y to
   compute to `auto` too, that one pixel is enough to make the whole table card
   vertically scrollable and show a scrollbar down its right edge. */
.lnew-price-matrix__table tbody tr:last-child .lnew-price-matrix__rowlabel::after { bottom: 0; }
/* A GUARD, not a live rule. The group-heading <th> carries no label class
   today, so it never draws a strip and the band already breaks cleanly at each
   heading. This keeps that true if anyone later gives that cell the rowlabel
   class — which is tempting, since it duplicates `position: sticky; left: 0`
   precisely because it lacks it. A full-width heading bar must not have a
   vertical edge drawn across its middle. */
.lnew-price-matrix__group th::after { content: none; }
.lnew-price-matrix__rowlabel-t {
  display: block;
  font-size: var(--lnpm-label-size); font-weight: 600;
  line-height: 1.45;
  color: var(--lnpm-ink);
}
.lnew-price-matrix__rowlabel-n {
  display: block;
  margin-top: 3px;
  font-size: var(--lnpm-note-size);
  color: var(--lnpm-muted-2);
  line-height: 1.5;
}

.lnew-price-matrix__cell {
  padding: var(--lnpm-cell-pad-y) var(--lnpm-cell-pad-x);
  border-bottom: 1px solid var(--lnpm-line-2);
  text-align: center;
  color: var(--lnpm-body);
  line-height: 1.45;
  overflow-wrap: break-word;
}
.lnew-price-matrix__cell b { color: var(--lnpm-ink); font-weight: 700; }
/* the featured column keeps its tint the whole way down, so the eye can
   follow one plan without re-finding its header */
.lnew-price-matrix__cell--featured,
.lnew-price-matrix__row:nth-child(even) .lnew-price-matrix__cell--featured { background: var(--lnpm-featured-bg); }

/* a "yes" cell becomes a tick; a "no" cell becomes a dim rule */
.lnew-price-matrix__yes {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lnpm-accent-soft-bg);
  border: 1px solid var(--lnpm-accent-soft-border);
  color: var(--lnpm-accent);
}
.lnew-price-matrix__yes svg { width: 12px; height: 12px; }
.lnew-price-matrix__no { color: var(--lnpm-muted-2); }

/* the last row loses its rule so it meets the card's rounded edge cleanly */
.lnew-price-matrix__table tbody tr:last-child .lnew-price-matrix__cell,
.lnew-price-matrix__table tbody tr:last-child .lnew-price-matrix__rowlabel { border-bottom: none; }

/* the "scroll sideways" hint, shown by JS only when the table actually
   overflows and hidden again once the visitor has scrolled it */
.lnew-price-matrix__hint {
  display: none;
  align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--lnpm-muted-2);
  transition: opacity .3s ease;
}
.lnew-price-matrix__hint.is-on { display: flex; }
.lnew-price-matrix__hint.is-done { opacity: 0; pointer-events: none; }
.lnew-price-matrix__hint svg { width: 15px; height: 15px; animation: lnpm-nudge 2.4s ease-in-out infinite; }
@keyframes lnpm-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* =====================================================================
   Buttons
   ===================================================================== */
.lnew-price-matrix__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%;
  font-family: var(--lnpm-font-sans);
  font-size: var(--lnpm-btn-size); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.6;
  padding: var(--lnpm-btn-pad-y) var(--lnpm-btn-pad-x);
  border-radius: var(--lnpm-btn-radius);
  white-space: nowrap;
  transition: transform .22s var(--lnpm-ease), box-shadow .3s var(--lnpm-ease),
              background .22s ease, border-color .22s ease, color .22s ease;
}
.lnew-price-matrix__btn--ghost {
  background: var(--lnpm-surface);
  color: var(--lnpm-ink);
  border: 1px solid var(--lnpm-line);
  box-shadow: var(--lnpm-shadow-sm);
}
.lnew-price-matrix__btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--lnpm-accent);
  box-shadow: var(--lnpm-shadow-md);
}
.lnew-price-matrix__btn--primary {
  background: var(--lnpm-accent-grad);
  color: var(--lnpm-accent-ink);
  border: none;
  box-shadow: 0 10px 26px var(--lnpm-accent-halo);
}
.lnew-price-matrix__btn--primary:hover { transform: translateY(-2px); }
.lnew-price-matrix__btn:focus-visible { outline: 2px solid var(--lnpm-accent); outline-offset: 2px; }

/* =====================================================================
   "Every plan includes …" — the chip beds that carry the argument the
   matrix cannot: nothing is gated, only the volume changes.
   ===================================================================== */
.lnew-price-matrix__beds {
  display: grid;
  grid-template-columns: var(--lnpm-beds-cols);
  gap: var(--lnpm-gap, 18px);
  align-items: start;
  margin-top: 36px;
}
.lnew-price-matrix__bed-h {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lnpm-line-2);
}
.lnew-price-matrix__bed-t {
  font-family: var(--lnpm-font-head);
  font-size: 17px; font-weight: 700;
  line-height: 1.4;
  color: var(--lnpm-ink);
}
.lnew-price-matrix__bed-s {
  font-size: 14px;
  color: var(--lnpm-muted);
  line-height: 1.6;
}
/* A COLUMNED LIST, not a heap of chips.

   Sixteen bordered pills and six more directly under a bordered table was the
   most congested thing on the page — twenty-two outlined objects competing
   with each other and with the matrix above. The content is a LIST ("here is
   everything you get"), so it is set as one: a single calm card, CSS columns,
   a tick per line, no per-item border or shadow. The eye reads a column in
   one sweep; it cannot read twenty-two pills in one sweep.

   `break-inside: avoid` is required — without it a two-line item splits its
   tick from its text across a column boundary. */
/* COLUMN-WIDTH, not column-count, and that is the whole responsive story.

   The first cut had PHP write a per-bed column count inline
   (style="--lnpm-bed-cols:4"), derived from the item count. Inline styles beat
   every stylesheet rule for that element, so no media query could ever lower
   it — the 16-item card stayed four columns at 390px and burst 160px past the
   viewport, clipped rather than scrolled because the section is overflow-x:
   clip. Asking for a column WIDTH instead lets the browser choose the count
   from the space available: the long list takes four columns in a wide card,
   the short one takes two, and both collapse to one on a phone. No count, no
   breakpoints, nothing for an inline style to defeat. */
.lnew-price-matrix__chips {
  columns: var(--lnpm-bed-colw) auto;
  column-gap: 30px;
}
.lnew-price-matrix__chip {
  display: flex; align-items: flex-start; gap: 9px;
  break-inside: avoid;
  padding: 6px 0;
  font-size: var(--lnpm-chip-size); font-weight: 500;
  line-height: 1.45;
  color: var(--lnpm-body);
  transition: color .2s ease;
}
.lnew-price-matrix__chip:hover { color: var(--lnpm-ink); }
.lnew-price-matrix__chip svg {
  flex: none; width: 15px; height: 15px;
  margin-top: 3px;
  color: var(--lnpm-accent);
}

/* The bed itself is the card now — one surface holding the whole list. */
.lnew-price-matrix__bed {
  /* grid items are min-width:auto by default, so a wide child can force its
     own track past its share of the row — the cap that stops it. */
  min-width: 0;
  padding: var(--lnpm-bed-pad);
  border-radius: var(--lnpm-card-radius);
  background: var(--lnpm-surface);
  -webkit-backdrop-filter: var(--lnpm-glass-blur);
  backdrop-filter: var(--lnpm-glass-blur);
  border: 1px solid var(--lnpm-line);
  box-shadow: var(--lnpm-shadow-sm);
}

.lnew-price-matrix__foot {
  /* the beds are a grid now, so the closing line has to be told to span both
     columns — otherwise it becomes a grid item and sits under the left card */
  grid-column: 1 / -1;
  margin-top: 26px;
  text-align: center;
  font-size: 14px;
  color: var(--lnpm-muted);
  line-height: 1.6;
}
.lnew-price-matrix__foot b { color: var(--lnpm-ink); font-weight: 600; }

/* =====================================================================
   Scroll reveal
   ===================================================================== */
.lnew-price-matrix .lnew-reveal {
  opacity: 0;
  transform: translate3d(0, var(--lnpm-rv-dist), 0);
  transition: opacity var(--lnpm-rv-dur) var(--lnpm-ease),
              transform var(--lnpm-rv-dur) var(--lnpm-ease);
  transition-delay: calc(var(--i, 0) * var(--lnpm-rv-step));
}
.lnew-price-matrix .lnew-reveal.is-in { opacity: 1; transform: none; }
.elementor-editor-active .lnew-price-matrix .lnew-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lnew-price-matrix .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-price-matrix__eyebrow-dot,
  .lnew-price-matrix__hint svg { animation: none !important; }
  .lnew-price-matrix__eyebrow-dot { opacity: 1; }
  .lnew-price-matrix__chip, .lnew-price-matrix__btn { transition: none; }
}

/* =====================================================================
   Responsive. The label column and the plan columns narrow before the
   table is allowed to overflow, so a 5-plan matrix still fits a laptop.
   ===================================================================== */
@media (max-width: 1240px) {
  .lnew-price-matrix { --lnpm-label-w: 240px; --lnpm-col-w: 136px; --lnpm-cell-pad-x: 13px; }
}

@media (max-width: 1040px) {
  .lnew-price-matrix {
    --lnpm-gutter: 24px;
    --lnpm-label-w: 210px;
    --lnpm-bed-pad: 22px 24px;
    padding-top: 84px; padding-bottom: 84px;
  }
  .lnew-price-matrix__head { margin-bottom: 34px; }
}

@media (max-width: 760px) {
  .lnew-price-matrix {
    --lnpm-gutter: 20px;
    --lnpm-beds-cols: 1fr;
    --lnpm-lead-size: 16.5px;
    --lnpm-label-w: 172px;
    --lnpm-col-w: 128px;
    --lnpm-cell-pad-y: 13px;
    --lnpm-cell-pad-x: 11px;
    --lnpm-label-size: 13.5px;
    --lnpm-cell-size: 13.5px;
    --lnpm-note-size: 11.5px;
    padding-top: 64px; padding-bottom: 64px;
  }
  .lnew-price-matrix__head { margin-bottom: 28px; }
  /* the vertical pin is forced off on a phone even when the author asked for
     it: a three-line sticky header on a 640px-tall viewport eats the rows it
     exists to label. The horizontal pin on the label column stays. */
  .lnew-price-matrix--pin .lnew-price-matrix__th { position: static; top: auto; }
  .lnew-price-matrix--pin .lnew-price-matrix__th--label { position: sticky; left: 0; }
}

@media (max-width: 460px) {
  .lnew-price-matrix {
    --lnpm-gutter: 16px;
    --lnpm-bed-pad: 18px 18px;
    --lnpm-label-w: 146px;
    --lnpm-col-w: 116px;
    --lnpm-card-radius: 18px;
    --lnpm-chip-size: 12.5px;
    --lnpm-chip-pad: 7px 12px;
    padding-top: 54px; padding-bottom: 54px;
  }
  .lnew-price-matrix__head { margin-bottom: 24px; }
}