.npcmp {
  --npcmp-label: minmax(240px, min(33.2%, 440px));
  --npcmp-gap:   28px;
  --npcmp-head:  59px;
  --np-pale:     #E6F9EA;
  --np-sand:     #E2DCD0;
  --np-regular:  #EBEAE6;

  /* Figma stack below the cards: 88px (on .npplans) + 16px frame gap + 40px head top. */
  margin-top: 16px;
  scroll-margin-top: var(--np-sticky-top);
}

.npcmp .np-container {
  width: 1406px;
  max-width: calc(100% - 96px);
}

.npcmp__container {
  position: relative;
}

.npcmp__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 56px;
  text-align: center;
}

.np2026 .npcmp__title {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 43px;
  color: #000;
}

.npcmp__title em,
.npcmp__title .green {
  font-style: normal;
  color: var(--np-green-muted);
}

.np2026 .npcmp__sub {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: var(--np-rich-beige);
}

.np2026 .npcmp__sub strong {
  font-weight: 700;
  color: #000;
}

.np2026 .npcmp__sub strong.npcmp__sub-lead { color: var(--np-rich-beige); }

.npcmp__table {
  position: relative;
  isolation: isolate;
}

.nprow {
  position: relative;
}

html.np-nav-ready .nnavbar { transition: margin-top .3s ease-in-out; }
html.np-nav-hidden .nnavbar { margin-top: calc(-1 * var(--np-nav-h, 0px)); }

/* ------------------------------------------------- table.plans-header */
/* Sits on the first section header line; sticks once the table scrolls. */

.npcmp__thead {
  position: sticky;
  top: var(--np-nav-offset, 0px);
  z-index: 4;
  display: grid;
  grid-template-columns: var(--npcmp-label) minmax(0, 1fr);
  column-gap: var(--npcmp-gap);
  align-items: start;
  height: var(--npcmp-head);
  margin-bottom: calc(-1 * var(--npcmp-head));
  padding: 20px 0 12px;
  border-bottom: 1.5px solid transparent;
  background: transparent;
  box-sizing: border-box;
  transition: top .3s ease-in-out, opacity .25s ease-in-out,
              transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

.npcmp__thead.is-stuck {
  background: var(--np-page);
  border-bottom-color: var(--np-ash);
}

/* desktop, as on the benefit landings: the bar shows up in place once the table reaches it and casts
   a shadow while pinned */
@media screen and (min-width: 992px) {
  .npcmp__thead.is-stuck {
    box-shadow: 0 14px 20px -18px rgba(0, 0, 0, .35);
  }

  .npcmp__thead:not(.is-stuck) {
    visibility: hidden;
    opacity: 0;
    border-bottom-color: var(--np-ash);
    background: var(--np-page);
    pointer-events: none;
    transition: top .3s ease-in-out, opacity .25s ease-in-out, visibility 0s .25s;
  }
}

/* Figma drops the "your plan:" caption - the section title takes that line.
   Kept in the grid (hidden, not removed) so it still holds the label column. */
.np2026 .npcmp__thead-label {
  margin: 0;
  padding: 0;
  visibility: hidden;
}

.npcmp__thead-label,
.npcmp__thead-sec {
  grid-column: 1;
  grid-row: 1;
}

/* pinned bar: the section being scrolled through, as its folded header (icon + title) */
.npcmp__thead-sec {
  position: relative;
  min-width: 0;
  height: 27px;
  margin-right: calc(-1 * var(--npcmp-gap));
}

.npcmp__thead-sec-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .2s ease-in-out, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s;
}

.npcmp__thead-sec-item.is-past { transform: translateY(-16px); }

.npcmp__thead.is-stuck .npcmp__thead-sec-item.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease-in-out, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

/* the section the bar is carrying: its own header (icon, title, line) steps aside */
@media screen and (min-width: 992px) {
  .npgrp__head > .npgrp__icon,
  .npgrp__head > .npgrp__title { opacity: 1; }

  .npgrp.is-under-bar .npgrp__head > .npgrp__icon,
  .npgrp.is-under-bar .npgrp__head > .npgrp__title,
  .npgrp.is-under-bar .npgrp__head::after { opacity: 0; }

  .npcmp .npgrp.is-under-bar .npgrp__head { border-bottom-color: transparent; }
}

.npcmp__thead-sec .npgrp__icon { transition: none; }

/* one line: a title that does not fit drops 2px (.is-fit-sm, set by pricing.js), then ends in an ellipsis */
.npcmp__thead-sec-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--np-anthracite);
}

.npcmp__thead-sec-title.is-fit-sm {
  font-size: 16px;
  letter-spacing: 1.44px;
}

.npcmp__plans {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.npcmp__plan {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.npcmp__plan-name {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 26px;
}

.npcmp__plan-title {
  font-size: 26px;
  font-weight: 900;
  line-height: .8em;
  letter-spacing: .05em;
  white-space: nowrap;
  color: var(--np-anthracite);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ------------------------------------------------------ table.section */

.npcmp__sections {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.npgrp + .npgrp { margin-top: 56px; }

.npgrp:not(.is-open):not(.npgrp--phone) + .npgrp:not(.is-open),
.npgrp:not(.is-open) + .npgrp--phone + .npgrp:not(.is-open) { margin-top: 12px; }

@media screen and (min-width: 992px) {
  .npgrp.is-open + .npgrp:not(.is-open) { margin-top: 54px; }

  .npgrp:first-child .npgrp__head,
  .npgrp:first-child:not(.is-open) .npgrp__head {
    display: grid;
    grid-template-columns: var(--npcmp-label) minmax(0, 1fr) auto;
    column-gap: var(--npcmp-gap);
    padding-left: 0;
    padding-right: 0;
  }

  /* icon and title share the label column: the title steps aside for the icon */
  .npgrp:first-child .npgrp__icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .npgrp:first-child:not(.is-open) .npgrp__icon { margin-left: 16px; }

  .npgrp:first-child .npgrp__title {
    grid-column: 1;
    grid-row: 1;
    margin-right: calc(-1 * var(--npcmp-gap));
    padding-left: 40px;
    text-wrap: balance;
    transition: font-size .32s ease-in-out, letter-spacing .32s ease-in-out,
                font-weight .32s ease-in-out, padding-left .32s ease-in-out, opacity .2s ease-in-out;
  }

  .npgrp:first-child:not(.is-open) .npgrp__title { padding-left: 48px; }

  .npgrp:first-child .npgrp__chev {
    grid-column: 3;
    grid-row: 1;
    margin-right: 24px;
  }
}

.npgrp--phone { display: none; }

.npgrp {
  position: relative;
  z-index: 1;
  transition: margin-top .32s ease-in-out;
}

.npgrp__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .32s ease-in-out, visibility 0s;
}

.npgrp:not(.is-open) .npgrp__body {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .32s ease-in-out, visibility 0s .32s;
}

.npgrp__body.is-resizing {
  transition: grid-template-rows .32s ease-in-out, visibility 0s, height .32s ease-in-out;
}

.npgrp__inner {
  min-height: 0;
  overflow: hidden;
}

/* State=open */
.npgrp__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 66px;
  padding: 20px 24px 12px 0;
  border: 0;
  border-bottom: 1.5px solid var(--np-ash);
  border-radius: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  transition: min-height .32s ease-in-out, padding .32s ease-in-out,
              border-color .32s ease-in-out, border-width .32s ease-in-out;
}

.npgrp--locked .npgrp__head { cursor: default; }

.npgrp__title {
  flex: 1 1 auto;
  font-size: 18px;
  font-weight: 900;
  line-height: 22px;
  letter-spacing: 1.62px;
  text-transform: uppercase;
  color: var(--np-anthracite);
  transition: font-size .32s ease-in-out, letter-spacing .32s ease-in-out,
              font-weight .32s ease-in-out, opacity .2s ease-in-out;
}

/* section icon: a line icon beside the title - 32px open, 24px folded */
.npgrp__icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  filter: brightness(0);
  transition: width .32s ease-in-out, height .32s ease-in-out, margin .32s ease-in-out, opacity .2s ease-in-out;
}

.npgrp.is-open .npgrp__icon { filter: none; }

.npgrp__icon img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
}

@media screen and (min-width: 992px) {
  .npgrp__head::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1.5px;
    left: 0;
    height: 1.5px;
    background: var(--np-ash);
    pointer-events: none;
    transition: opacity .32s ease-in-out;
  }

  .npgrp:not(.is-open) .npgrp__head::after { opacity: 0; }
}

/* State=folded */
.npgrp:not(.is-open) .npgrp__head {
  min-height: 74px;
  padding: 5px 24px 5px 16px;
  border-bottom: 2px solid var(--np-regular);
}

.npgrp:not(.is-open) .npgrp__icon {
  width: 24px;
  height: 24px;
}

.npgrp:not(.is-open) .npgrp__title {
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 1.44px;
}

.npgrp__plans { display: none; }

@media screen and (min-width: 992px) {
  .npgrp__title {
    font-size: 22px;
    font-weight: 800;
    line-height: 32px;
    letter-spacing: .5px;
  }

  .npgrp.is-open .npgrp__title-lead { color: var(--np-green-muted); }

  .npgrp:not(.is-open) .npgrp__title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .5px;
  }

  .npgrp__plans {
    grid-column: 2 / 4;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    pointer-events: none;
    transition: opacity .2s ease-in-out;
  }

  .npgrp.is-under-bar .npgrp__plans { opacity: 0; }

  .npgrp__plan {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 2.6vw, 26px);
  }

  .npgrp__plan-title {
    font-weight: 900;
    line-height: .8667em;
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--np-anthracite);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.npgrp__chev {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--np-anthracite);
  transition: opacity .2s ease-in-out, transform .32s ease-in-out;
}

.npgrp.is-open .npgrp__chev { transform: rotate(180deg); }

.npgrp--locked .npgrp__chev { display: none; }

.npgrp__chev svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------- table.row */

.npgrp__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ZEN-only block - white surface so the row gaps read white, not page beige */
.npgrp__premium {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: -8px;
  background: #fff;
}

.npcmp__table.is-full .npgrp--has-full .npgrp__rows--default,
.npcmp__table:not(.is-full) .npgrp__rows--full { display: none; }

.npcmp__table.is-swapped .npgrp--has-full .npgrp__rows { animation: np-rows-in .35s ease-out both; }

@keyframes np-rows-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nprow {
  display: grid;
  grid-template-columns: var(--npcmp-label) minmax(0, 1fr);
  column-gap: var(--npcmp-gap);
  align-items: center;
  min-height: 64px;
  padding: 2px 0;
  border-radius: 0;
  background: #fff;
  box-sizing: border-box;
}

.nprow--dark,
.nprow--light { background: #fff; }

/* ZEN-only premium block: tinted rows on white gaps */
.nprow--premium,
.nprow--premium.nprow--dark,
.nprow--premium.nprow--light { background: #F9F7F6; }

.nprow--premium + .nprow--premium { background: linear-gradient(#fff 0 8px, #F9F7F6 8px); }

.nprow__label {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 50px;
  padding: 0 12px 0 20px;
  box-sizing: border-box;
  overflow: clip;
}

.nprow__title {
  flex: 1 1 auto;
  order: 1;
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
  color: var(--np-ash);
}

.nprow__info {
  display: block;
  order: 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--np-dark-beige);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.nprow__info svg { display: block; width: 100%; height: 100%; }

@media screen and (min-width: 992px) {
  .nprow__info {
    border-radius: 50%;
    cursor: help;
    transition: color .15s ease-in-out;
  }

  .nprow__info:hover,
  .nprow__info[aria-describedby] { color: var(--np-anthracite); }

  .nprow__info:focus-visible {
    outline: 2px solid var(--np-green);
    outline-offset: 2px;
  }
}

/* (i) bubble: one element on <body> - the section bodies clip their rows */
.nptip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(300px, calc(100vw - 16px));
  padding: 12px 16px 13px;
  border-radius: 12px;
  background: #222;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  font-family: Nunito, sans-serif;
  font-feature-settings: 'liga' off, 'clig' off;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .15s ease-in-out, transform .15s ease-in-out, visibility 0s .15s;
}

.nptip.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .15s ease-in-out, transform .15s ease-in-out, visibility 0s;
}

.nptip::after {
  content: '';
  position: absolute;
  left: var(--nptip-x, 24px);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: #222;
  transform: rotate(45deg);
}

.nptip--above::after { bottom: -4px; }
.nptip--below::after { top: -4px; }

.nptip .nptip__title {
  display: block;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  color: #fff;
}

.nptip__text {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: #ECEBE7;
}

.nprow__desc,
.nprow__value.nprow__value--m { display: none; }

.nprow__cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  align-self: stretch;
  overflow: clip;
}

.nprow__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
}

.nprow__value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--np-anthracite);
}

.nprow__value--green { color: var(--np-green-muted); }

.nprow__value b { font-weight: inherit; }

@media screen and (min-width: 992px) {
  .nprow__value { font-weight: 600; }

  .nprow__value b,
  .nprow__value--green { font-weight: 700; }
}

.nprow__note {
  display: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--np-rich-beige);
}

.nprow__dash {
  display: block;
  width: 24px;
  height: 24px;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  background: url('../imgs/v2/cells/cross.svg') center / 24px 24px no-repeat;
}

.nprow__tick {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--np-green-muted);
  background: url('../imgs/v2/cells/check.svg') center / 24px 24px no-repeat;
}

.nprow__tick svg { display: none; width: 100%; height: 100%; }

/* ------------------------------------------------- table.premium-row */

.nprow--subhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 80px;
  margin-top: 8px;
  padding: 12px 24px;
  border-top: 2px solid #000;
  background: #fff;
  border-radius: 0;
  box-sizing: border-box;
}

.npgrp__rows .nprow--subhead:first-child { margin-top: 0; }

.nprow__subhead {
  font-size: 18px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 1.62px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--np-green-muted);
}

.nprow__subhead-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  color: var(--np-anthracite);
}

.nprow__lockup {
  display: inline-flex;
  align-items: center;
}

.nprow__lockup-name {
  font-size: 16px;
  font-weight: 900;
  line-height: 14px;
  letter-spacing: .8px;
  color: var(--np-anthracite);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* desktop: green rule, black-italic caps and the large ZEN lockup */
@media screen and (min-width: 992px) {
  .nprow--subhead { border-top-color: var(--np-ash); }

  .nprow__subhead {
    display: inline-flex;
    gap: 8px;
    font-size: 20px;
    font-style: italic;
    line-height: 22px;
    letter-spacing: .8px;
  }

  .nprow__subhead-light { color: var(--np-ash); }

  /* the lockup's lg variant at x.9465: a 22.7px name */
  .nprow__lockup-name {
    font-size: 30.83px;
    font-style: italic;
    line-height: 27px;
    letter-spacing: 1.54px;
    color: #000;
  }
}

/* ---------------------------------------------------- full pricing link */

.npcmp__more {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 64px;
  margin-top: 24px;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  font: inherit;
  cursor: pointer;
}

.npcmp__more-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 1.35px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--np-rich-beige);
}

.npcmp__more-chev {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--np-anthracite);
  transition: transform .2s ease-in-out;
}

.npcmp__more-chev svg { display: block; width: 100%; height: 100%; }

.npcmp__more[aria-expanded="true"] .npcmp__more-chev { transform: rotate(-90deg); }

/* the full price list as a PDF, under the sections */
.npcmp__download {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 64px;
  margin-top: 24px;
  padding: 20px 24px 20px 16px;
  box-sizing: border-box;
  text-decoration: none;
}

.npcmp__download-icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--np-green-muted);
}

.npcmp__download-icon svg { display: block; width: 100%; height: 100%; }

.npcmp__download-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 1.35px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--np-rich-beige);
}

.npcmp__download-label u {
  color: #000;
  text-decoration: underline;
  text-decoration-color: var(--np-green);
  text-decoration-thickness: 10%;
  text-decoration-skip-ink: none;
}

/* -------------------------------------------------------- table.cta-bar */

.npcmp__pick {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, min(max(240px, min(30.3%, 420px)), calc(100% - 812px))) minmax(0, 1fr);
  column-gap: var(--npcmp-gap);
  align-items: center;
  min-height: 72px;
  margin-top: 24px;
  padding: 12px 10px 12px 8px;
  border-top: 1.5px solid var(--np-anthracite);
  border-radius: 0 0 6px 6px;
  background: #fff;
  box-sizing: border-box;
  transition: box-shadow .2s ease-in-out, transform .3s ease-in-out;
}

.npcmp__pick.is-stuck { box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); }

.npcmp__pick.is-tucked { transform: translateY(calc(100% + 24px)); }

/* Figma drops the "pick yours:" caption from the bar (column is still needed). */
.np2026 .npcmp__pick-label {
  margin: 0;
  padding: 0;
  visibility: hidden;
}

.npcmp__pick-btns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  align-items: center;
}

.npcmp__pick-col {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
}

.npcmp__pick-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 48px;
  padding: 12px 24px;
  font-size: 14px;
  line-height: 24px;
}

.npcmp__pick-btn.npbtn--dark {
  background: var(--np-anthracite);
  color: var(--np-page);
}

/* free-trial pill above BETTER in the pinned plans bar, as the benefit landings' table flag */
.npcmp__plan-trial {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -22px;
  padding: 5px 19px 4px;
  border-radius: 38px;
  background: #121212;
  box-sizing: border-box;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
  line-height: 10px;
  letter-spacing: .77px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

.npcmp__plan-trial-accent { color: var(--np-green); }

@media screen and (max-width: 991px) {
  .npcmp__plan-trial { display: none; }
}

@media screen and (hover: hover) and (pointer: fine) {
  .npcmp__pick-btn.npbtn--dark:hover { color: #000; }
}

/* a label that does not fit its button drops 2px (.is-fit-sm, set by pricing.js), then ends in an ellipsis */
.npcmp__pick-btn .npbtn__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.npcmp__pick-btn .npbtn__label.is-fit-sm { font-size: 12px; }

/* ------------------------------------------------------ sticky bars (desktop) */
/* Both bars are full-width white strips - the plans bar pinned on top, the CTA bar at the
   bottom. The strip is the ::before, so the bars themselves keep the table's columns. */
@media screen and (min-width: 992px) {
  .npcmp { --npcmp-head: 83px; }

  .npcmp__thead { padding: 32px 0 24px; }

  .npcmp__thead,
  .npcmp__thead.is-stuck,
  .npcmp__thead:not(.is-stuck) {
    border-bottom-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .npcmp__thead::before,
  .npcmp__pick::before {
    content: '';
    position: absolute;
    top: 0;
    right: calc(50% - 50vw);
    bottom: 0;
    left: calc(50% - 50vw);
    z-index: -1;
    border-radius: 0 0 6px 6px;
    background: #fff;
    pointer-events: none;
  }

  .npcmp__thead::before {
    border-bottom: 2px solid #ECEBE7;
    box-shadow: 0 4px 32px rgba(111, 104, 94, .2);
  }

  /* the CTAs stand in the plan columns: the bar takes the table's grid, each button is centred
     in its column, 32px apart (16px each side) */
  .npcmp__pick {
    grid-template-columns: var(--npcmp-label) minmax(0, 1fr);
    min-height: 92px;
    padding: 22px 0;
    border-top: 0;
    border-radius: 0;
    background: transparent;
  }

  .npcmp__pick-btns { column-gap: 0; }

  .npcmp__pick-col { align-items: center; }

  .npcmp__pick-btn { width: calc(100% - 32px); }

  .npcmp__pick.is-stuck { box-shadow: none; }

  /* the hidden caption only holds the column - it must not wrap and stretch the bar */
  .np2026 .npcmp__pick-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .npcmp__pick::before {
    border-top: 2px solid #ECEBE7;
    transition: box-shadow .2s ease-in-out;
  }

  .npcmp__pick.is-stuck::before { box-shadow: 0 4px 32px rgba(111, 104, 94, .2); }
}

/* .npplans reserves its own band for the hover state (--npplans-reserve); this 88px
   is measured from the RESTING card bottom on top of it, so the enlarged card never
   eats into the gap and nothing shifts. Matches the Figma stack: 88 + 16 + 40. */

@media screen and (max-width: 991px) {
  .np2026 .npcmp {
    margin-top: 11px;
    padding-bottom: 0;
  }

  .npcmp .np-container {
    width: 100%;
    max-width: none;
  }

  .npcmp__head {
    gap: 6px;
    padding: 22px 20px 23px;
  }

  .np2026 .npcmp__title {
    font-size: 24px;
    font-weight: 900;
    line-height: 30px;
    letter-spacing: -.3px;
    text-wrap: balance;
  }

  .np2026 .npcmp__sub {
    width: 326px;
    max-width: 100%;
    font-size: 15px;
    font-weight: 600;
    line-height: 19px;
  }

  .np2026 .npcmp__sub strong { font-weight: 600; }

  .npcmp__table {
    margin: 0 -12px;
    padding: 0 0 24px;
  }

  .npcmp__thead {
    top: 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    height: auto;
    min-height: 0;
    margin-bottom: 0;
    padding: 0 17px;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
    overflow: visible;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), padding .2s ease-in-out;
  }

  .npcmp__thead.is-stuck,
  html.np-nav-hidden .npcmp__thead.is-stuck {
    padding-top: env(safe-area-inset-top, 0px);
    border-radius: 0;
    background: #000;
    box-shadow: none;
  }

  .npcmp__thead.is-out { transform: translateY(-100%); }

  .np2026 .npcmp__thead-label,
  .npcmp__thead-sec { display: none; }

  .npcmp__plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    width: 100%;
  }

  .npcmp__plan {
    z-index: auto;
    height: 52px;
    padding: 0 8px;
  }

  .npcmp__plan-name {
    height: 15px;
  }

  .npcmp__plan-title {
    font-size: 14.43px;
    line-height: 14.43px;
    letter-spacing: .72px;
    color: #fff;
  }

  .npcmp__sections { margin: 0; }

  .npgrp,
  .npgrp:not(.is-open) {
    border-radius: 0;
    overflow: visible;
    transition: none;
  }

  .npgrp + .npgrp { margin-top: 24px; }
  .npgrp:not(.is-open):not(.npgrp--phone) + .npgrp:not(.is-open),
  .npgrp:not(.is-open) + .npgrp--phone + .npgrp:not(.is-open),
  .npgrp:not(.is-open) + .npgrp:not(.is-open) { margin-top: 4px; }

  /* "Title table" - one band for both open and folded */
  .npgrp__head,
  .npgrp:not(.is-open) .npgrp__head,
  .npgrp--locked .npgrp__head {
    gap: 4px;
    height: 58px;
    min-height: 0;
    padding: 0 17px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    cursor: pointer;
    transition: none;
  }

  .npgrp:not(.is-open):not(:last-child) .npgrp__head { box-shadow: inset 0 -1px 0 var(--np-panel); }

  .npgrp__icon,
  .npgrp:not(.is-open) .npgrp__icon { display: none; }

  .npgrp__title,
  .npgrp:not(.is-open) .npgrp__title {
    font-size: 14px;
    font-weight: 900;
    line-height: 22px;
    letter-spacing: 1.26px;
    text-transform: uppercase;
    color: var(--np-anthracite);
    transition: none;
  }

  .npgrp:not(.is-open) .npgrp__title { color: var(--np-ash); }

  .npgrp__chev,
  .npgrp.is-open .npgrp__chev,
  .npgrp--locked .npgrp__chev {
    display: block;
    width: 15.15px;
    height: 15.15px;
    opacity: 1;
    transform: rotate(180deg);
  }

  .npgrp__chev svg path { stroke-width: 2.27; }

  .npgrp:not(.is-open) .npgrp__chev { transform: none; }

  .npgrp--locked.is-open .npgrp__chev { display: none; }

  .npgrp--locked.is-open .npgrp__head { cursor: default; }

  .npgrp__body {
    position: relative;
    z-index: 1;
  }

  .npgrp__inner {
    border-radius: 0;
    background: transparent;
  }

  .npgrp__rows { gap: 4px; }

  /* let the wrapped rows keep taking part in the phone `order:` shuffle */
  .npgrp__premium {
    display: contents;
    background: transparent;
  }

  .nprow,
  .nprow--dark,
  .nprow--light,
  .nprow--premium {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    padding: 16px 17px 12px;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    text-align: left;
    order: var(--np-morder, 0);
  }

  .nprow--mw,
  .nprow--ml { background: #fff; }

  .npgrp__premium .nprow--premium { background: var(--np-soft); }

  .nprow__label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    column-gap: 4px;
    align-items: center;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .nprow__title {
    order: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 18px;
    color: var(--np-ash);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .nprow__info {
    position: relative;
    order: 0;
    width: 16px;
    height: 16px;
    padding: 16px;
    margin: -16px;
    box-sizing: content-box;
    color: var(--np-dark-beige);
  }

  .nprow__info svg {
    width: 16px;
    height: 16px;
  }

  .nprow__desc {
    grid-column: 1;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--np-rich-beige);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .nprow__desc .nprow__desc-title {
    display: block;
    margin-bottom: 4px;
    font-weight: 800;
    color: var(--np-anthracite);
  }

  .nprow.is-info .nprow__desc { display: block; }
  .nprow.is-info { padding-top: 18px; }
  .nprow.is-info .nprow__label { align-items: start; }

  .nprow__cells {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    align-self: auto;
    overflow: visible;
  }

  .nprow__cells--same { grid-template-columns: minmax(0, 1fr); }
  .nprow__cells--same .nprow__cell:not(:first-child) { display: none; }

  .nprow__cell {
    gap: 8px;
    min-height: 40px;
    padding: 8px 6px;
    box-shadow: inset -1px 0 0 var(--np-panel);
  }

  .nprow__cell:last-child,
  .nprow__cells--same .nprow__cell { box-shadow: none; }

  .nprow__cell--note { gap: 0; }

  .nprow__value,
  .nprow__note,
  .nprow__dash {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--np-anthracite);
  }

  .nprow__value--green { color: var(--np-green-muted); }

  .nprow__value.nprow__value--d { display: none; }
  .nprow__value.nprow__value--m { display: block; }

  .nprow__cell--note .nprow__value { font-weight: 700; }
  .nprow__cell--note .nprow__note { margin-top: 8px; color: var(--np-rich-beige); }

  .nprow__cells--same .nprow__cell--note {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 4px;
  }

  .nprow__cells--same .nprow__cell--note .nprow__note { margin-top: 0; }

  .nprow__dash {
    width: auto;
    height: auto;
    overflow: visible;
    background: none;
    line-height: 12px;
    color: var(--np-dark-beige);
  }

  .nprow__tick {
    width: 24px;
    height: 24px;
    background: none;
  }

  .nprow__tick svg { display: block; }

  .nprow--subhead {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 6px;
    min-height: 44px;
    margin-top: 4px;
    padding: 12px 17px;
    box-shadow: none;
  }

  .nprow__subhead {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 1.17px;
  }

  .nprow__lockup-name {
    font-size: 14px;
    letter-spacing: .7px;
  }

  .npcmp__pick { display: none; }

  .npcmp__more {
    justify-content: center;
    gap: 8px;
    height: 56px;
    margin-top: 16px;
    padding: 16px;
  }

  .npcmp__more-label {
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1.17px;
  }

  .npcmp__more-chev {
    width: 20px;
    height: 20px;
  }

  .npcmp__download {
    justify-content: center;
    gap: 8px;
    height: 56px;
    margin-top: 16px;
    padding: 16px;
  }

  .npcmp__download-icon {
    width: 20px;
    height: 20px;
  }

  .npcmp__download-label {
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1.17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .npgrp,
  .npgrp__body,
  .npgrp:not(.is-open) .npgrp__body,
  .npgrp__head,
  .npgrp__title,
  .npgrp__icon,
  .npgrp__chev,
  .npcmp__more-chev,
  .npgrp__body.is-resizing,
  .npcmp__thead,
  .npcmp__thead-sec-item,
  .npcmp__thead.is-stuck .npcmp__thead-sec-item.is-current,
  .npgrp:first-child .npgrp__title,
  .npcmp__pick,
  html.np-nav-ready .nnavbar { transition: none; }

  .npcmp__table.is-swapped .npgrp--has-full .npgrp__rows { animation: none; }
}