/* ==========================================================================
   Nexus landing v5: the pricing section (#pricing), in the pricing design
   of 2026-10-27. The same cards, buttons and motion as the /pricing page,
   ported from src/components/billing: the cards from pricing-page.tsx
   (PAGE_CSS), the buttons from pricing-plans.tsx (BTN_CSS), the toggle,
   the rolling prices and the folding yearly line from pricing-motion.tsx
   (MOTION_CSS).
   The buttons' cursor hover is the landing's own (buttons.css), v4.js
   drives the toggle, and a card only brightens its edge on hover.
   ========================================================================== */

.nxlp {
  --nxlp-cy: #7df9ff;
  --nxlp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.4 2.3L10 3.2' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  color: var(--fg-1); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums;
}
.nxlp :where(button) { font: inherit; color: inherit; background-color: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; }
.nxlp :focus-visible { outline: 1px solid var(--nxlp-cy); outline-offset: 2px; }

/* Monthly | Yearly, right above the cards */
.nxlp-top { display: flex; justify-content: flex-end; margin-bottom: 20px; }

/* the personal plans and Team, side by side in two labeled groups */
.nxlp-groups { display: grid; grid-template-columns: 3fr 1fr; gap: 24px; }
.nxlp-grp { display: flex; flex-direction: column; min-width: 0; }
.nxlp-grp > .gl { font-size: 13px; color: var(--fg-2); margin: 0 0 12px 2px; white-space: nowrap; }
.nxlp-grp .cards { flex: 1; display: grid; gap: 12px; }
.nxlp-grp.you .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nxlp .card { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-1); padding: 24px; display: flex; flex-direction: column; min-width: 0; transition: border-color 220ms linear; }
.nxlp .card:hover { border-color: var(--line-3); }
.nxlp .card.hot { border-color: rgba(125, 249, 255, 0.32); background: linear-gradient(rgba(125, 249, 255, 0.075), rgba(125, 249, 255, 0) 240px), var(--bg-1); }
.nxlp .card.hot:hover { border-color: rgba(125, 249, 255, 0.5); }
.nxlp .card.team { background: var(--bg-2); }
.nxlp .card .nm { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 26px; }
.nxlp .card .nm b { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.01em; white-space: nowrap; }
.nxlp .card .tl { margin-top: 4px; font-size: 14px; color: var(--fg-2); white-space: nowrap; }
.nxlp .card .pr { margin-top: 28px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.nxlp .card .pr b { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.035em; color: #fff; }
.nxlp .card .pr > span { font-size: 14px; color: var(--fg-2); }
.nxlp .card .bl { font-size: 12.5px; line-height: 16px; color: var(--fg-2); white-space: nowrap; }
.nxlp .card .bl > div > span { padding-top: 6px; }
.nxlp .card .nxpb-btn { margin-top: 24px; }
.nxlp .card .nums { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-2); display: grid; gap: 10px; }
.nxlp .card .nums div { display: flex; gap: 6px; font-size: 14px; white-space: nowrap; }
.nxlp .card .nums b { color: #fff; font-weight: 600; }
.nxlp .card .nums span { color: var(--fg-2); }
.nxlp .card .inc { margin-top: 22px; display: grid; gap: 12px; }
.nxlp .card .inc + .inc { margin-top: 18px; }
.nxlp .lead { font-size: 12.5px; color: var(--fg-2); white-space: nowrap; }
.nxlp .ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.nxlp .ck li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-1); white-space: nowrap; }
.nxlp .ck li::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--nxlp-cy); -webkit-mask: var(--nxlp-check) center / contain no-repeat; mask: var(--nxlp-check) center / contain no-repeat; }
.nxlp .tag { font-size: 12px; line-height: 16px; font-weight: 500; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: var(--fg-1); white-space: nowrap; }
.nxlp .tag.cy { background: rgba(125, 249, 255, 0.12); color: var(--nxlp-cy); }
.nxlp .tag.soon { background: transparent; border: 1px solid var(--line-3); color: var(--fg-2); padding: 2px 7px; }

/* the buttons (BTN_CSS); links here, so they also drop the underline */
.nxlp .nxpb-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; flex: none; padding: 0 16px; border: 1px solid var(--line-3); border-radius: 6px; background-color: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--fg-0); white-space: nowrap; text-decoration: none; cursor: pointer; }
.nxlp .nxpb-btn.out:hover { border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.nxlp .nxpb-btn.cy { background-color: #7df9ff; border-color: transparent; color: #03262a; }
.nxlp .nxpb-btn.off { color: var(--fg-3); border-color: var(--line-2); cursor: default; }
.nxlp .nxpb-btn:focus-visible { outline: 1px solid #7df9ff; outline-offset: 2px; }

/* the motion (MOTION_CSS): the white thumb slides to the pick, a price rolls
   up into Yearly and back down into Monthly, the yearly line folds open */
.nxm-tog, .nxm-roll, .nxm-fold { --nxm-ease: cubic-bezier(0.16, 1, 0.3, 1); --nxm-fold: cubic-bezier(0.45, 0, 0.2, 1); }

.nxm-tog { position: relative; display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--line-3); border-radius: 6px; isolation: isolate; }
.nxm-tog button { position: relative; z-index: 1; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 4px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--fg-2); white-space: nowrap; cursor: pointer; transition: color 240ms linear; }
.nxm-tog button:hover { color: var(--fg-0); }
.nxm-tog button.on { color: #050505; cursor: default; }
.nxm-tog:not(.ready) button.on { background: #f5f5f5; }
.nxm-tog button:focus-visible { outline: 1px solid #7df9ff; outline-offset: 2px; }
.nxm-tog em { font-style: normal; color: #7df9ff; transition: color 240ms linear; }
.nxm-tog button.on em { color: #0b6d78; }
.nxm-thumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; border-radius: 4px; background: #f5f5f5; }
.nxm-tog:not(.ready) .nxm-thumb { display: none; }
.nxm-tog.glide .nxm-thumb { transition: transform 460ms var(--nxm-ease), width 460ms var(--nxm-ease); }

.nxm-roll { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.nxm-roll > span { grid-area: 1 / 1; transition: transform 560ms var(--nxm-ease) var(--nxm-d, 0ms), opacity 240ms linear var(--nxm-d, 0ms); }
.nxm-roll > .up { transform: translateY(-80%); opacity: 0; }
.nxm-roll > .dn { transform: translateY(80%); opacity: 0; }

.nxm-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--nxm-fold); }
.nxm-fold.on { grid-template-rows: 1fr; transition: grid-template-rows 520ms var(--nxm-ease); }
.nxm-fold > div { min-height: 0; overflow: hidden; }
.nxm-fold > div > span { display: block; transform: translateY(-50%); opacity: 0; transition: transform 300ms var(--nxm-fold), opacity 180ms linear; }
.nxm-fold.on > div > span { transform: none; opacity: 1; transition: transform 560ms var(--nxm-ease) 60ms, opacity 280ms linear 60ms; }

/* Below 1200px a 3fr / 1fr row runs out of room for the one-line text, so
   Team moves under the personal plans. */
@media (max-width: 1199px) {
  .nxlp-groups { grid-template-columns: minmax(0, 1fr); }
}
/* There Team lays its three parts across the row, each on the column of a
   card above it: 62px is their 12px gap plus two 24px paddings and two 1px
   edges. */
@media (min-width: 901px) and (max-width: 1199px) {
  .nxlp .card.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto) 1fr; column-gap: 62px; }
  .nxlp .card.team > * { grid-column: 1; }
  .nxlp .card.team > .nums, .nxlp .card.team > .inc { grid-row: 1 / -1; align-self: start; margin-top: 0; }
  .nxlp .card.team > .nums { grid-column: 2; padding-top: 0; border-top: 0; }
  .nxlp .card.team > .inc { grid-column: 3; }
}
/* Phones and small tablets: the plans sit in one row that runs to the
   screen's edges and snaps card by card, the next card showing at the edge;
   the toggle sits under the heading's left edge (the section head is one
   column here too) and the plan names over the row move it (v4.js). Each
   card keeps its own height, so Free never turns into a tall empty box. */
.nxlp-pager { display: none; }
@media (max-width: 900px) {
  .nxlp-top { justify-content: flex-start; margin-bottom: 14px; }
  .nxlp-pager { display: flex; gap: 22px; margin: 0 0 14px 2px; }
  .nxlp-pager button { position: relative; height: 34px; padding: 0 1px; font-size: 14px; font-weight: 500; color: var(--x-fg-3); transition: color 220ms linear; }
  .nxlp-pager button.on { color: #fff; }
  .nxlp-pager button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--nxlp-cy); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1); }
  .nxlp-pager button.on::after { transform: scaleX(1); }
  .nxlp-groups {
    position: relative; display: flex; align-items: flex-start; gap: 12px;
    margin: 0 calc(var(--x-pad) * -1); padding: 0 var(--x-pad) 4px; scroll-padding: 0 var(--x-pad);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .nxlp-groups::-webkit-scrollbar { display: none; }
  .nxlp-grp, .nxlp-grp .cards { display: contents; }
  .nxlp-grp > .gl { display: none; }
  .nxlp .card { flex: 0 0 min(84vw, 340px); scroll-snap-align: start; padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nxlp-pager button::after { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nxm-tog.glide .nxm-thumb, .nxm-roll > span, .nxm-fold, .nxm-fold.on, .nxm-fold > div > span, .nxm-fold.on > div > span { transition: none; }
}