/* registered so the artwork can EASE up to its hover size instead of snapping */
@property --art-k {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.npplans {
  margin-top: 64px;
  /* Figma: the cards frame carries 88px below the row. The hover card grows down
     into exactly this space, so it needs no band of its own and nothing shifts. */
  padding-bottom: 88px;
}

.npplans__row {
  display: grid;
  grid-template-columns: repeat(4, 314px);
  justify-content: space-between;
  align-items: stretch;
}

.npplans__col {
  position: relative;
  min-width: 0;
}

/* ------------------------------------------------------------------ card */

.npcard {
  --art-k: 1;
  --npc-bd: 1px;
  --npc-t: .26s cubic-bezier(.2, .7, .3, 1);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  /* auto + a floor, never a flat 100%: the height then follows the enlarging
     content frame by frame instead of snapping when the hover state lands */
  height: auto;
  min-height: 100%;
  padding: 32px 8px 0;
  border: var(--npc-bd) solid var(--np-stroke);
  border-radius: 18px;
  background: #fff;
  transition: border-color .26s ease-in-out,
              box-shadow .26s ease-in-out;
}

/* Style=muted - the unfilled GOOD treatment */
.npcard--good {
  background: transparent;
}

/* Style=highlight - the recommended plan */
.npcard--better {
  border-color: var(--np-warm-grey);
  box-shadow: 0 12px 32px -6px rgba(179, 170, 157, .44);
  /* offset down + negative spread keeps Figma's glow but pulls it off the top
     edge, so it no longer washes over the badge and the page behind it */
}

/* ------------------------------------------------------------- badge */

.np2026 .npcard__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  margin: 0;
  padding: 7px 18px;
  border: 1px solid #fff;
  border-radius: 24px;
  background: var(--np-green-muted);
  white-space: nowrap;
}

.npcard__badge-w {
  display: block;
  font-size: 11px;
  font-weight: 800;
  line-height: 10px;
  letter-spacing: 1.21px;
  text-transform: uppercase;
  color: #fff;
}

/* -------------------------------------------------------- card.header */

.npcard__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding-bottom: 20px;
  overflow: clip;
  text-align: center;
}

/* 23px tall like it was with the ZEN mark: the title sits centred in it, clear of the head's clip */
.np2026 .npcard__titlerow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 23px;
  margin: 0;
}

.npcard__title {
  font-size: 26px;
  font-weight: 900;
  line-height: 22px;
  letter-spacing: 1px;
  color: var(--np-anthracite);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.npcard__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  overflow: clip;
  overflow-clip-margin: 6px;
}

/* plan.claim */
.np2026 .npcard__tagline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin: 0;
}

.npcard__tline {
  display: block;
  width: 100%;
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: .52px;
  text-transform: uppercase;
  color: #000;
}

.npcard__tline--muted  { font-weight: 800; color: var(--np-rich-beige); }
.npcard__tline--accent { color: var(--np-green-muted); }

/* card.visual */
.npcard__art {
  position: relative;
  display: block;
  width: calc(244px * var(--art-k));
  height: calc(160px * var(--art-k) + 8px);
  padding-bottom: 8px;
  box-sizing: border-box;
}

.npcard__artimg {
  position: relative;
  display: block;
  width: calc(244px * var(--art-k));
  height: calc(160px * var(--art-k));
}

.npcard__artimg img {
  position: absolute;
  display: block;
  max-width: none;
  left: calc(var(--art-x) * var(--art-k));
  top: calc(var(--art-y) * var(--art-k));
  width: calc(var(--art-w) * var(--art-k));
  height: calc(var(--art-h) * var(--art-k));
}

/* the four card images share one frame, so one placement */
.npcard--good,
.npcard--better,
.npcard--best,
.npcard--zen { --art-x: 2.4px; --art-y: -15.3px; --art-w: 240.6px; --art-h: 201px; }

.npcard__play {
  position: absolute;
  left: calc(207.7px * var(--art-k));
  top: calc(88.9px * var(--art-k));
  z-index: 4;
  display: block;
  width: calc(40px * var(--art-k));
  height: calc(40px * var(--art-k));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 0;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
}

button.npcard__play { cursor: pointer; }

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

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

/* plan.price */
.np2026 .npcard__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  white-space: nowrap;
}

/* plan.price is the one block Figma lays out on line boxes, not trimmed ones:
   28 + 10 gap + 10 = the 48px frame everything below the divider hangs off. */
.npcard__amount {
  display: block;
  font-size: 30px;
  font-weight: 900;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--np-anthracite);
}

.npcard__period {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 10px;
  color: var(--np-rich-beige);
}

/* a plan without a period ("Free") keeps its line, so the rule and the content below line up across the cards */
.npcard__period--empty {
  visibility: hidden;
}

/* plan.divider */
.npcard__rule {
  flex-shrink: 0;
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, rgba(179, 170, 157, 0) 0%, #b3aa9d 50%, rgba(179, 170, 157, 0) 100%);
}

/* ---------------------------------------------------------- card.body */

.npcard__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 8px 16px;
}

/* plan.proof */
.np2026 .npcard__claim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px 8px 4px;
  border-radius: 14px;
  text-align: center;
}

.npcard__cline {
  display: block;
  width: 100%;
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: .26px;
  text-transform: uppercase;
  color: var(--np-anthracite);
}

.npcard__cline--accent {
  font-weight: 900;
  color: var(--np-green-muted);
}

/* card.cta - Figma insets the button 11px on both sides of the 280px slot */
.npcard__mid {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 6px 11px 0;
}

.npcard__btn {
  flex: 0 0 auto;
  width: 100%;
  height: 48px;
  gap: 6px;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 24px;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.npcard__btn.npbtn--dark { color: var(--np-green-muted); }

/* card.benefits */
.npcard__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-top: 16px;
  overflow: clip;
}

/* plan.you-get */
.np2026 .npcard__gets {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 12px 8px 4px 19px;
  box-sizing: border-box;
}

.npcard__gline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  width: 100%;
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: .52px;
  text-transform: uppercase;
  color: var(--np-anthracite);
}

.npcard__gline b,
.npcard__gline strong { font-weight: 900; color: var(--np-anthracite); }

.npcard__gline:first-child > b:first-child,
.npcard__gline:first-child > strong:first-child {
  font-weight: 800;
  color: var(--np-rich-beige);
}

.npcard__soft { font-weight: 800; color: var(--np-rich-beige); }

.npcard__accent,
.npcard .green,
.npcard__gline b.npcard__accent,
.npcard__gline .green strong { color: var(--np-green-muted); }

/* card.features */
.np2026 .npcard__features {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 0;
  overflow: clip;
}

.npcard__feature {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
}

.np2026 .npcard__feature--hidden { display: none; }

.npcard__bullet {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--np-green-muted);
}

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

.npcard__feature-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.npcard__feature-title {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 19px;
  color: #000;
}

.npcard__feature-sub {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--np-rich-beige);
}

/* Figma renders the supporting line in one weight - keep author <b> neutral */
.npcard__feature-sub b,
.npcard__feature-sub strong {
  font-weight: 600;
  color: inherit;
}

/* ------------------------------------------------------- desktop row floor */

@media screen and (min-width: 1350px) {
  /* Figma's cards row is 1011px tall and every card carries the same airy bottom.
     Here that height is also the row's ONLY height source, because of the rule
     below - which makes it a constant the hover state can never move. */
  .npplans__row { min-height: 1011px; }

  /* Every card sits out of the flow, not just the hovered one. If a card returned
     to the flow it would do so the instant the pointer left, while it is still
     enlarged and still easing back for another .26s - and for all that time it
     would resize the grid row and drag the comparison section down with it. */
  .npplans__col .npcard {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* ------------------------------------------------- Style=hover (desktop) */
/* The hover enlargement is switched off for now: every :hover rule below is commented
   out - uncomment them to bring it back (the transitions further down stay live). */

@media screen and (min-width: 1350px) and (hover: hover) and (pointer: fine) {
  /* .npplans__col:hover { z-index: 6; } */

  /* plan.card / Style=hover - the real Figma enlargement, not a proportional scale:
     wider frame (314 -> 364) with a bigger badge, headline, artwork, play and CTA.
     The card is taken OUT OF FLOW and centred on its resting box, so however much
     taller the enlarged copy makes it, the grid row keeps the height pinned on it
     and nothing below - the comparison section included - moves. Figma's card grows
     314x1011 -> 364x1035, i.e. +25px per side and +12px top/bottom; a card whose
     own content needs more than that keeps growing downward into the 88px band
     .npplans reserves under the row. */
  /* Every enlarged value below is numeric - the two offsets are margins rather
     than top/left - so the card can ease the whole way into its hover size and
     back out again (see the transition block). */
  /* .npplans__col:hover .npcard {
    --art-k: 1.19057;

    z-index: 6;
    width: 364px;
    margin: -12px 0 0 -25px;
    min-height: calc(100% + 24px);
    padding-top: 48px;
    border-color: var(--np-warm-grey);
    box-shadow: 0 12px 32px -6px rgba(179, 170, 157, .44);
    background: #fff;
  } */

  /* .npplans__col:hover .npcard__titlerow { gap: 7.6px; } */

  /* .npplans__col:hover .npcard__title {
    font-size: 40px;
    line-height: 34px;
    letter-spacing: 1.5px;
  } */

  /* .npplans__col:hover .npcard__play {
    width: 48px;
    height: 48px;
  } */

  /* .npplans__col:hover .npcard__panel { width: 298px; } */

  /* Size=large hugs its label on desktop instead of taking the 11px inset */
  /* .npplans__col:hover .npcard__mid { padding-inline: 0; } */

  /* .npplans__col:hover .npcard__btn {
    width: auto;
    min-width: 280px;
    height: 58px;
    gap: 7.1px;
    padding: 19px 28.6px;
    font-size: 17px;
    line-height: 29px;
  } */

  /* min-width is not animatable here - it snaps on enter and drops the instant the
     pointer leaves, so a short label jumped 280 -> its bare hug width -> back up.
     Where calc-size() exists the 280px floor goes into the width itself and eases. */
  /* @supports (width: calc-size(fit-content, size)) {
    .npplans__col:hover .npcard__btn {
      width: calc-size(fit-content, max(280px, size));
      min-width: 0;
    }
  } */

  /* .np2026 .npplans__col:hover .npcard__badge {
    top: -18px;
    padding: 9px 23px;
    border-width: 1.3px;
    border-radius: 31px;
  } */

  /* .npplans__col:hover .npcard__badge-w {
    font-size: 14px;
    line-height: 13px;
    letter-spacing: 1.54px;
  } */

  /* ------------------------------------------------------ hover transition */

  .npcard {
    /* lets the CTA ease between its 100% resting width and its hover hug width
       where the browser supports it - elsewhere only that one width snaps */
    interpolate-size: allow-keywords;

    transition: border-color .26s ease-in-out,
                box-shadow .26s ease-in-out,
                width var(--npc-t),
                margin var(--npc-t),
                min-height var(--npc-t),
                padding-top var(--npc-t),
                --art-k var(--npc-t);
  }

  .npcard__titlerow { transition: gap var(--npc-t); }

  .npcard__play {
    transition: width var(--npc-t), height var(--npc-t);
  }

  .npcard__title,
  .npcard__badge-w {
    transition: font-size var(--npc-t), line-height var(--npc-t), letter-spacing var(--npc-t);
  }

  .npcard__panel { transition: width var(--npc-t); }

  .npcard__mid { transition: padding var(--npc-t); }

  .npcard__btn {
    transition: background-color .2s ease-in-out,
                color .2s ease-in-out,
                width var(--npc-t),
                height var(--npc-t),
                gap var(--npc-t),
                padding var(--npc-t),
                font-size var(--npc-t),
                line-height var(--npc-t);
  }

  .np2026 .npcard__badge {
    transition: top var(--npc-t),
                padding var(--npc-t),
                border-width var(--npc-t),
                border-radius var(--npc-t);
  }
}

/* --------------------------------------------------------- slider/dots */

.nppager {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 37px;
}

.nppager__dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--np-anthracite);
  cursor: pointer;
}

.nppager__dot.is-active { background: var(--np-green-muted); }

@media screen and (max-width: 1349px) {
  .nppager { display: flex; }

  .npplans__viewport {
    overflow: hidden;
    margin: -2px -12px 0;
    padding: 20px 12px 0;
  }

  .npplans__row {
    display: flex;
    gap: 18px;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 1011px;
    touch-action: pan-y;
    cursor: grab;
    transition: transform .35s ease;
    will-change: transform;
  }

  .npplans__row.is-dragging {
    cursor: grabbing;
    user-select: none;
    transition: none;
  }

  .npplans__col {
    flex: 0 0 314px;
    max-width: 314px;
  }
}

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

  .nppager {
    height: auto;
    padding: 10px 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .npcard,
  .npcard__titlerow,
  .npcard__play,
  .npcard__title,
  .npcard__panel,
  .npcard__mid,
  .npcard__btn,
  .np2026 .npcard__badge,
  .npcard__badge-w {
    transition: none;
  }
}