/* ==========================================================================
   plus-bundle-v2.css  :  page layer for /plus-bundle
   --------------------------------------------------------------------------
   Scoped to `.nm-pb` on <body>, loaded AFTER site-v2.css. Consumes the shared
   v2 tokens (site-v2.css §1) and declares no colours or type sizes of its own
   beyond composition values. Modelled on affiliate-v2.css, the closest sibling
   (another single-offer landing page), so the two read as one system.

   Rhythm is NOT set here. Every section reuses a shell the shared layer owns
   (`.shopify-first-sec`, `.section.pad-layout`, `.bg-light`,
   `.pricing-hero-faq-copy-copy`, `.nm-final-cta`), so site-v2.css §6 keeps owning the
   vertical gaps.

   Three deliberate differences from the sibling, all from DESIGN-SYSTEM.md:
   - links, step numbers and meta lines are sentence-case sans, never PT Mono
     (PT Mono is machine text only);
   - read-only facts are rows with an icon, never bordered chips;
   - nothing animates on its own (no staged rows, no looping dot).

   Type floors: the site scales its whole ramp with the viewport (html
   .694vw), so at 1024px the smallest rung is 8.9px. The panel's app lines
   and prices, the deal boxes, the cards and the notes carry offer facts, so
   they take max(token, 12 to 15px); at 1440 every token is above its floor
   and nothing changes.

   Radius follows "sharp shell, curved interior": panels are square, the app
   icons and tiles inside them take --v2-radius-inner or less.
   ========================================================================== */

.nm-pb {
  --pb-gap: clamp(1.6rem, 1.6vw, 2.4rem);
  --pb-cell-pad: clamp(2.4rem, 2.4vw, 3.2rem);
  --pb-hairline: var(--v2-line);
  --pb-on-dark: rgba(254, 254, 252, 0.74);
  --pb-on-dark-dim: rgba(254, 254, 252, 0.6);
  --pb-hairline-dark: rgba(254, 254, 252, 0.1);
}

/* Smooth scrolling for the hero's #how-it-works anchor (root element only). */
:root:has(body.nm-pb) {
  scroll-behavior: smooth;
}
/* The navbar is fixed, so an anchor target must clear it. */
.nm-pb #how-it-works,
.nm-pb #who-qualifies {
  scroll-margin-top: calc(var(--nm-nav-h) + 2.4rem);
}

/* Left-aligned eyebrows drop the leading hairline (site-v2.css §12 idiom). */
.nm-pb .nm-pb-hero__copy .badge-hero:before {
  display: none;
}

/* Centred section intro */
.nm-pb .nm-pb-intro {
  max-width: 78rem;
  margin-bottom: clamp(4rem, 5vw, 6rem);
}
.nm-pb .nm-pb-intro .badge-hero {
  margin-bottom: 1.6rem;
}
.nm-pb .nm-pb-intro .big-heading-n {
  margin: 0;
}

/* One link affordance for the page: sentence-case sans, underlined. */
.nm-pb .nm-pb-link {
  /* 13px floor: on a phone the fluid rung drops to 10px. */
  font-size: max(var(--fs-body-sm), 13px);
  font-weight: 500;
  color: var(--v2-blue);
  text-decoration: underline;
  text-decoration-color: rgba(0, 59, 175, 0.35);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.2s ease;
}
.nm-pb .nm-pb-link:hover,
.nm-pb .nm-pb-link:focus-visible {
  text-decoration-color: var(--v2-blue);
}

/* Optical nudge for a heading line whose first letter carries side bearing:
   the display face's U and N (H1 line 1) carry about 4px at 60px, measured on
   the render (ink at 65 against the column's 60), so the line looked indented
   under the eyebrow. Same on two app-section lines, measured the same way:
   "Run" (R, 4px at 48px) and "into" (i, 3px). In em, so it scales with the type. */
.nm-pb .nm-pb-optical {
  margin-left: -0.067em;
}

/* A quiet line under an offer: conditions plus the terms link. */
.nm-pb .nm-pb-note {
  margin: 1.6rem 0 0;
  font-size: max(var(--fs-body-sm), 13px);
  line-height: 1.5;
  color: var(--v2-muted);
}
.nm-pb .nm-pb-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ==========================================================================
   1. HERO  :  the offer (left) and what it includes (right)
   ========================================================================== */
.nm-pb .nm-pb-hero {
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  grid-column-gap: clamp(4rem, 6vw, 9rem);
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 24%, rgba(67, 128, 249, 0.16) 0%, transparent 68%),
    radial-gradient(ellipse 46% 46% at 88% 72%, rgba(67, 128, 249, 0.08) 0%, transparent 62%);
  overflow: hidden;
}
/* A hairline that closes the fold, same idiom as the other v2 dark heroes. */
.nm-pb .nm-pb-hero:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(67, 128, 249, 0.28), transparent);
}
.nm-pb .nm-pb-hero__copy {
  z-index: 2;
  position: relative;
  flex: 1 1 50%;
  max-width: 64rem;
  text-align: left;
}
/* The kicker row: the eyebrow, then the offer pill. Sam, 2026-11-06: "much
   less harsh and yet obvious. like a badge or something for saying 'New
   customers only'", and earlier "a promotion that ends". So one pill says who
   the offer is for and, while an end date is set, until when ("Open until
   [offer end date]", a visible placeholder; drop it and the clock if no date
   is set). No countdown, never "Limited-time" or a bare "Ends". Since
   2026-11-07 it reads "For stores new to Notify Me!" and appears in the hero
   and the final band only; the app boxes say it in plain words instead. */
.nm-pb .nm-pb-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.6rem;
  margin-bottom: 2rem;
}
/* The eyebrow's fluid size reaches 8.9px on a phone; 11px is its floor here. */
.nm-pb .nm-pb-hero__kicker .badge-hero {
  font-size: max(var(--fs-eyebrow), 11px);
}
/* The offer pill, on the dark bands (hero, final band): the same light pill
   as on light surfaces (6px radius, 13px, weight 500, no border, no tick,
   never red), with the blue tint turned for a dark ground: the hero's accent
   (primary-dark) as the tint, near-white text (12:1+). On /pricing's light
   surfaces it is brand blue on a 10% tint of it. It reads as a label, never a
   control: not a link, not a tooltip (touch cannot hover). */
.nm-pb .nm-pb-promo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 3px 8px;
  border-radius: 6px;
  background-color: rgba(67, 128, 249, 0.2);
  color: #eef4ff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}
/* The pill's two halves never break inside themselves; it breaks at the middot. */
.nm-pb .nm-pb-promo__text > span:not(.nm-pb-promo__sep) {
  white-space: nowrap;
}
/* On a phone the two halves stack and the middot goes, so the pill hugs its
   longer line instead of stretching into a full-width box. */
@media (max-width: 479px) {
  .nm-pb .nm-pb-promo__text {
    display: grid;
  }
  .nm-pb .nm-pb-promo__sep {
    display: none;
  }
}
.nm-pb .nm-pb-promo__icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: var(--_apps---colors--secondary);
}
.nm-pb .nm-pb-hero__copy .big-heading-n {
  margin: 0 0 2.4rem;
  text-align: left;
}
/* The site's blue text gradient starts at #03369a, which measures 2.2:1 on the
   dark hero (below the 3:1 large-text floor). On this dark band it runs on the
   design system's on-dark tokens instead: primary-dark #4380f9 (4.9:1) to the
   on-dark highlight #c2dcff. Light sections keep the standard gradient. */
.nm-pb .nm-pb-hero .text-gradient.blue {
  background-image: linear-gradient(90deg, var(--_apps---colors--primary-dark), var(--_apps---colors--secondary));
}
/* The one condition the merchant acts on, as a plain line under the heading:
   no icon, no tick (a tick marks a gain, not a rule). Who the offer is for is the
   pill above; the rest of the rule is in the terms. It sits right above the
   button, so the per-store deadline is the last thing read before acting. */
.nm-pb .nm-pb-hero__cond {
  max-width: 54rem;
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--pb-on-dark);
  text-wrap: pretty;
}
/* An app's plan: a small, quiet badge after the app's name, so the plan never
   renames the app (Sam, 2026-11-06: "put the plan name in a badge like
   Discountry [Ultimate] so the app name wouldn't contradict with the plan
   name"). Neutral grey, small and square-ish, so it never looks like the
   blue offer pill. On the dark hero panel the same chip is a faint light fill. */
.nm-pb .nm-pb-plan {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f2f4;
  color: #4a4f57;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: 0.15em;
}
.nm-pb .nm-pb-panel .nm-pb-plan {
  background: rgba(254, 254, 252, 0.12);
  color: rgba(254, 254, 252, 0.82);
}
.nm-pb .nm-pb-appsec__plan .nm-pb-plan {
  vertical-align: 0.3em;
}
.nm-pb .nm-pb-hero__btns {
  display: flex;
  flex-wrap: wrap;
  grid-column-gap: 1.2rem;
  grid-row-gap: 1.2rem;
  margin-top: 3.2rem;
}
.nm-pb .nm-pb-hero .nm-pb-note {
  color: var(--pb-on-dark-dim);
}
.nm-pb .nm-pb-hero .nm-pb-note a {
  color: var(--pb-on-dark);
}

/* ---- The panel: the value first, the three apps, the plan they come with ---
   It echoes the app's own offer card (Sam, 2026-11-06): "Includes 3 apps for a
   year", "Up to $10,116 value", then each app with its list price struck and
   "Free for 12 months". One display size on the card, the value, so the eye
   lands on one number and the rest reads by colour and position. The
   price of Notify Me! Plus is one quiet foot line with the way to compare
   plans, so the card reads as what the store gets, not as an invoice. */
.nm-pb .nm-pb-panel {
  z-index: 2;
  position: relative;
  flex: 0 1 50rem;
  max-width: 50rem;
  border: 1px solid rgba(254, 254, 252, 0.12);
  background: linear-gradient(180deg, rgba(39, 38, 50, 0.96), rgba(18, 17, 28, 0.96));
  box-shadow: 0 3.2rem 8rem rgba(0, 0, 0, 0.45);
}
.nm-pb .nm-pb-panel__head {
  padding: 2.4rem 2.4rem 2.2rem;
  border-bottom: 1px solid var(--pb-hairline-dark);
  background: radial-gradient(ellipse 90% 140% at 0% 0%, rgba(67, 128, 249, 0.18), transparent 70%);
}
.nm-pb .nm-pb-panel__title {
  margin: 0;
  font-family: inherit;
  font-size: max(var(--fs-body), 14px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: rgba(254, 254, 252, 0.92);
}
.nm-pb .nm-pb-panel__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.8rem;
  margin: 1.2rem 0 0;
  font-family: var(--v2-display);
  font-weight: 400;
  letter-spacing: var(--tr-heading);
  color: #fefefc;
}
.nm-pb .nm-pb-panel__num {
  font-size: var(--fs-h1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nm-pb .nm-pb-panel__upto,
.nm-pb .nm-pb-panel__unit {
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--_apps---colors--secondary);
}
.nm-pb .nm-pb-apps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nm-pb .nm-pb-app {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem 2.4rem;
}
.nm-pb .nm-pb-app + .nm-pb-app {
  border-top: 1px solid var(--pb-hairline-dark);
}
.nm-pb .nm-pb-app__icon {
  display: block;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 1rem;
  /* A hairline ring keeps the two dark app icons' edges on the dark panel.
     Drawn inside the icon (negative offset) so it never moves the icon's
     edge off the text column. */
  outline: 1px solid rgba(254, 254, 252, 0.16);
  outline-offset: -1px;
}
.nm-pb .nm-pb-app__name {
  min-width: 0;
  /* 15px floor: the name stays larger than its 13px meta and fee lines on a phone. */
  font-size: max(var(--fs-body), 15px);
  font-weight: 500;
  line-height: 1.35;
  color: #fefefc;
}
.nm-pb .nm-pb-app__meta {
  display: block;
  margin-top: 0.3rem;
  font-size: max(var(--fs-meta), 13px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--pb-on-dark-dim);
}
.nm-pb .nm-pb-apps .nm-pb-app:first-child {
  padding-top: 2rem;
}
.nm-pb .nm-pb-apps .nm-pb-app:last-child {
  padding-bottom: 2rem;
}
/* Each app's deal, the app's own card in words: the list price struck and
   quiet, "Free for 12 months" under it in the hero's highlight. */
.nm-pb .nm-pb-app__deal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  text-align: right;
  white-space: nowrap;
}
.nm-pb .nm-pb-app__was {
  font-size: max(var(--fs-meta), 12px);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--pb-on-dark-dim);
  text-decoration-thickness: 1px;
}
.nm-pb .nm-pb-app__free {
  font-size: max(var(--fs-body-sm), 13px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--_apps---colors--secondary);
}
/* The plan it all comes with, and its price, as one quiet line. */
.nm-pb .nm-pb-panel__foot {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 2.4rem;
  border-top: 1px solid var(--pb-hairline-dark);
  background: rgba(254, 254, 252, 0.03);
}
.nm-pb .nm-pb-panel__foot-icon {
  flex: none;
  display: block;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.7rem;
  outline: 1px solid rgba(254, 254, 252, 0.16);
  outline-offset: -1px;
}
.nm-pb .nm-pb-panel__with {
  flex: 1 1 auto;
  min-width: 0;
  font-size: max(var(--fs-body-sm), 13px);
  line-height: 1.4;
  color: var(--pb-on-dark);
}
.nm-pb .nm-pb-panel__price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--pb-on-dark-dim);
}
.nm-pb .nm-pb-panel__link {
  flex: none;
  font-size: max(var(--fs-body-sm), 13px);
  font-weight: 500;
  line-height: 1.4;
  color: #fefefc;
  text-decoration: underline;
  text-decoration-color: rgba(254, 254, 252, 0.35);
  text-underline-offset: 0.3em;
  white-space: nowrap;
}
.nm-pb .nm-pb-panel__link:hover,
.nm-pb .nm-pb-panel__link:focus-visible {
  text-decoration-color: #fefefc;
}

/* ==========================================================================
   1b. THE THREE APPS  :  one section per app, one pattern, the picture alternates
   --------------------------------------------------------------------------
   The site's alternating editorial rows (partners-v2.css §16), in this page's
   type and link rules. Every section has the same parts in the same order:
   the app and its plan, the outcome as the heading, two sentences, four rows,
   the deal, then the proof and the listing link. Grid areas keep the copy
   centred against the picture on desktop and put the heading before the
   picture on phones, so the reader knows whose screen it is.
   ========================================================================== */
.nm-pb .nm-pb-appsec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* The two 1fr rows share any height the picture has over the copy, so the
     copy sits centred against it; when the copy is taller they collapse to 0. */
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    ".    visual"
    "head visual"
    "body visual"
    ".    visual";
  column-gap: clamp(4rem, 6vw, 8rem);
  width: 100%;
}
.nm-pb .nm-pb-appsec--flip .nm-pb-appsec__grid {
  grid-template-areas:
    "visual ."
    "visual head"
    "visual body"
    "visual .";
}
.nm-pb .nm-pb-appsec__head {
  grid-area: head;
  text-align: left;
}
.nm-pb .nm-pb-appsec__body {
  grid-area: body;
  text-align: left;
}
.nm-pb .nm-pb-appsec__visual {
  grid-area: visual;
  align-self: center;
  margin: 0;
}
/* A media frame inside a section is interior content, so it is curved
   (site-v2.css §13); the hairline keeps the light screenshot's edge on white. */
.nm-pb .nm-pb-appsec__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--v2-media-radius);
  outline: 1px solid rgba(18, 17, 28, 0.06);
  outline-offset: -1px;
  box-shadow: 0 2.4rem 6rem rgba(18, 17, 28, 0.08);
}

/* The app and its plan: the hero panel's row vocabulary (icon, name, a quiet line). */
.nm-pb .nm-pb-appsec__id {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 2.4rem;
}
.nm-pb .nm-pb-appsec__icon {
  flex: none;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 1.1rem;
}
.nm-pb .nm-pb-appsec__plan {
  display: block;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--tr-heading);
  color: var(--_apps---colors--foreground);
}
.nm-pb .nm-pb-appsec__cat {
  display: block;
  margin-top: 0.2rem;
  font-size: max(var(--fs-body-sm), 13px);
  line-height: 1.4;
  color: var(--v2-muted);
}
.nm-pb .nm-pb-appsec__head .big-heading-n {
  margin: 0;
  text-align: left;
}
.nm-pb .nm-pb-appsec__lead {
  margin: 2rem 0 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--v2-muted);
  text-wrap: pretty;
}

/* What it does: rows with an icon, the gain's first words in weight 500. */
.nm-pb .nm-pb-appsec__list {
  display: grid;
  gap: 1.2rem;
  margin: 2.8rem 0 0;
  padding: 0;
  list-style: none;
}
.nm-pb .nm-pb-appsec__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.2rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--_apps---colors--foreground);
}
.nm-pb .nm-pb-appsec__item strong {
  font-weight: 500;
}
/* The icons' viewBoxes are cropped to the drawing, so the first ink sits on the
   column's left edge with the heading above it (measured on the render). */
.nm-pb .nm-pb-check {
  width: 1em;
  height: 1em;
  margin-top: 0.3em;  /* (1.6 - 1) / 2: centred on the first line */
  color: var(--v2-blue);
}

/* The deal, value first (Sam, 2026-11-06, "improve its design"):
   "$0 for 12 months" leads, then the list price struck and small with
   what a year of it costs at list price, then one quiet line on who gets it.
   No pill, no fee line. One display size in the box, the $0, so the free
   price is the one thing read first. Square
   like the page's other panels; nothing in it is a control. */
.nm-pb .nm-pb-deal {
  margin-top: 3.2rem;
  padding: 2.2rem 2.4rem;
  border: 1px solid var(--pb-hairline);
  background: #f8f9fb;
}
.nm-pb .nm-pb-deal p {
  margin: 0;
}
.nm-pb .nm-pb-deal__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  font-family: var(--v2-display);
  font-weight: 400;
  letter-spacing: var(--tr-heading);
  color: var(--_apps---colors--foreground);
}
.nm-pb .nm-pb-deal__amount {
  font-size: calc(var(--fs-h2) * 1.3);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--v2-blue);
}
.nm-pb .nm-pb-deal__term {
  font-size: var(--fs-h4);
  line-height: 1.2;
}
.nm-pb .nm-pb-deal p.nm-pb-deal__list {
  margin-top: 0.8rem;
  font-size: max(var(--fs-body-sm), 13px);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--v2-muted);
}
.nm-pb .nm-pb-deal__list s {
  text-decoration-thickness: 1px;
}
/* Who gets it, in plain words under a hairline: the per-app half of the rule
   sits with the offer (NN/g, "Communicating Ecommerce Discounts": basic
   restrictions in the offer itself), quiet, with a small store mark. */
.nm-pb .nm-pb-deal p.nm-pb-deal__who {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--pb-hairline);
  font-size: max(var(--fs-body-sm), 13px);
  line-height: 1.4;
  color: var(--v2-muted);
}
.nm-pb .nm-pb-deal__icon {
  flex: none;
  width: max(1.6rem, 14px);
  height: max(1.6rem, 14px);
  color: var(--v2-blue);
}

/* The listing's own proof, beside the link that leads to it. */
.nm-pb .nm-pb-appsec__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 2.4rem;
  margin: 2rem 0 0;
}
.nm-pb .nm-pb-proof {
  font-size: max(var(--fs-body-sm), 11px);
  line-height: 1.5;
  color: var(--v2-muted);
}
.nm-pb .nm-pb-proof strong {
  font-weight: 500;
  color: var(--_apps---colors--foreground);
}
.nm-pb .nm-pb-proof__star {
  color: var(--v2-gold);
}

/* Text for screen readers only (the struck price's "Regular price"). */
.nm-pb .nm-pb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   2. WHO QUALIFIES and HOW IT WORKS  :  one card pattern, two jobs
   --------------------------------------------------------------------------
   Both are a row of cards, each with a small picture, a title and a line:
   three conditions said as what the store does (Sam, 2026-11-06: "instead
   of 'New customers only' provide a who qualifies section"), then four steps.
   The cards are the outer shell, so square; the pictures inside are curved
   (sharp shell, curved interior, DESIGN-SYSTEM.md). The pictures are
   decorative (aria-hidden): every fact is in the card's text. No card is a
   link, so none lifts on hover, and nothing moves on its own.
   ========================================================================== */
.nm-pb .nm-pb-cards {
  display: grid;
  gap: var(--pb-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nm-pb .nm-pb-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nm-pb .nm-pb-cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nm-pb .nm-pb-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--pb-cell-pad);
  border: 1px solid var(--pb-hairline);
  background: #fff;
  text-align: left;
}
.nm-pb .nm-pb-card__title {
  margin: 0 0 0.8rem;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  color: var(--_apps---colors--foreground);
  text-wrap: pretty;
}
.nm-pb .nm-pb-card p {
  margin: 0;
  font-size: max(var(--fs-body), 14px);
  line-height: var(--lh-body);
  color: var(--v2-muted);
  text-wrap: pretty;
}
.nm-pb .nm-pb-card .nm-pb-link {
  margin-top: auto;
  padding-top: 1.6rem;
  align-self: flex-start;
}

/* ---- Who qualifies: a small picture per condition ------------------------ */
.nm-pb .nm-pb-art {
  display: flex;
  align-items: center;
  height: 5.6rem;
  min-height: 44px;
  margin-bottom: 2rem;
}
/* First install: the Notify Me! icon with a small "+" */
.nm-pb .nm-pb-art__app {
  position: relative;
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  min-width: 36px;
  min-height: 36px;
}
.nm-pb .nm-pb-art__app img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1.1rem;
}
.nm-pb .nm-pb-art__badge {
  position: absolute;
  right: -0.6rem;
  bottom: -0.6rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
  background: var(--v2-blue);
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
}
.nm-pb .nm-pb-art__badge svg {
  width: 55%;
  height: 55%;
}
/* Within 30 days: a calendar leaf */
.nm-pb .nm-pb-cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid rgba(0, 59, 175, 0.18);
  border-top: 0.6rem solid var(--v2-blue);
  border-radius: 1.1rem;
  background: #fff;
  color: var(--v2-blue);
}
.nm-pb .nm-pb-cal__num {
  font-family: var(--v2-display);
  font-size: max(1.8rem, 14px);
  line-height: 1;
}
.nm-pb .nm-pb-cal__lbl {
  font-size: max(0.9rem, 8px);
  line-height: 1.2;
  color: var(--v2-muted);
}
/* Apps new to your store: the three icons, overlapped */
.nm-pb .nm-pb-art--apps img {
  display: block;
  width: 4rem;
  height: 4rem;
  min-width: 30px;
  min-height: 30px;
  border-radius: 1rem;
  box-shadow: 0 0 0 2px #fff;
}
.nm-pb .nm-pb-art--apps img + img {
  margin-left: -0.8rem;
}
/* The one quiet line under the conditions: how long, and that usage fees
   apply. Said once on the page, plus one FAQ answer (Sam, 2026-11-06). */
.nm-pb .nm-pb-qualify__note {
  margin-top: 3.2rem;
  text-align: center;
  text-wrap: balance;
}

/* ---- How it works: a small picture of each step's moment ----------------- */
.nm-pb .nm-pb-step__art {
  display: grid;
  place-items: center;
  height: 13rem;
  min-height: 104px;
  margin-bottom: 2.4rem;
  padding: 1.2rem;
  border-radius: var(--v2-radius-inner);
  background: rgba(0, 59, 175, 0.05);
}
.nm-pb .nm-pb-step__num {
  display: block;
  margin-bottom: 0.8rem;
  font-size: max(var(--fs-meta), 12px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--v2-blue);
}
/* The mini screens: a white chip like a row of the real screen, drawn small.
   They are pictures, never controls: no hover, no pointer, aria-hidden. */
.nm-pb .nm-pb-mini {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(18, 17, 28, 0.08);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.8rem 2rem rgba(18, 17, 28, 0.06);
  font-size: max(1.3rem, 12px);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--_apps---colors--foreground);
  pointer-events: none;
}
.nm-pb .nm-pb-mini__icon {
  flex: none;
  display: block;
  width: 2.8rem;
  height: 2.8rem;
  min-width: 22px;
  min-height: 22px;
  border-radius: 0.7rem;
}
.nm-pb .nm-pb-mini__glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  min-width: 22px;
  min-height: 22px;
  border-radius: 0.7rem;
  background: rgba(0, 59, 175, 0.08);
  color: var(--v2-blue);
}
.nm-pb .nm-pb-mini__glyph svg {
  width: 60%;
  height: 60%;
}
.nm-pb .nm-pb-mini__radio {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  min-width: 13px;
  min-height: 13px;
  margin-left: 0.4rem;
  border: 0.5rem solid var(--v2-blue);
  border-radius: 50%;
  background: #fff;
}
.nm-pb .nm-pb-mini__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  min-width: 15px;
  min-height: 15px;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--v2-blue);
  color: #fff;
}
.nm-pb .nm-pb-mini__check svg {
  width: 60%;
  height: 60%;
}
.nm-pb .nm-pb-mini--mail,
.nm-pb .nm-pb-mini--claim {
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
}
.nm-pb .nm-pb-mini__head,
.nm-pb .nm-pb-mini__row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nm-pb .nm-pb-mini__codes {
  display: flex;
  gap: 0.4rem;
}
.nm-pb .nm-pb-mini__code {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.6rem;
  background: #f3f5f9;
  font-size: max(1rem, 9px);
  letter-spacing: 0.08em;
  color: var(--v2-muted);
}
.nm-pb .nm-pb-mini__code img {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  min-width: 14px;
  min-height: 14px;
  border-radius: 0.4rem;
}
.nm-pb .nm-pb-mini__field {
  flex: 1 1 auto;
  min-width: 8rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(18, 17, 28, 0.14);
  border-radius: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--v2-muted);
}
.nm-pb .nm-pb-mini__row--done .nm-pb-mini__check {
  margin-left: 0;
}

/* ==========================================================================
   3b. FAQ  :  the site's shared FAQ accordion, unchanged
   --------------------------------------------------------------------------
   Same markup and classes as /pricing (SECTIONS.md tools-2): webflow.js opens
   and closes it, site-v2.css §13 styles it. Sam, 2026-11-06: "make the faqs
   expandable like the rest of the website". The only page-level rules are a
   visible focus ring, because this page makes each question row focusable,
   and room under the fixed menu bar for the #terms-faq links (Sam, 2026-11-09:
   the offer terms moved here and the section is "Terms & FAQ").
   ========================================================================== */
.nm-pb #terms-faq {
  scroll-margin-top: 110px;
}
.nm-pb .nm-pb-faq .div-block-51:focus {
  outline: none;
}
.nm-pb .nm-pb-faq .div-block-51:focus-visible {
  outline: 2px solid var(--v2-blue);
  outline-offset: 6px;
}

/* ==========================================================================
   3c. FINAL CTA  :  the shared band (site-v2.css §9), with the offer's end
   --------------------------------------------------------------------------
   The same tag as the hero, above the heading; the sub carries the per-store
   deadline right above the buttons.
   ========================================================================== */
.nm-pb .nm-final-cta .nm-pb-promo {
  margin-bottom: 2.4rem;
}
/* Two sentences (who gets it, then the deadline): a wider measure keeps them
   to two even lines instead of three with an orphan. */
.nm-pb .nm-final-cta__sub {
  max-width: 62rem;
  text-wrap: balance;
}

/* ==========================================================================
   4. TERMS PAGE  :  the shared legal layout, at a reading size
   --------------------------------------------------------------------------
   The legal pages ship body text at 14px; offer terms are read before a
   purchase, so this page sets them at the body-large rung (NN/g: policy text
   at a comfortable size, short rules, bold key phrases).
   ========================================================================== */
.nm-pb-terms .terms-content .terms-text {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}
/* Each rule is one chunk: its title sits closer to its own text than to the
   rule above (the shared layout leaves the two gaps equal). With no contents
   rail the column keeps a reading measure (~70 characters) on the H1's edge. */
.nm-pb-terms .terms-content {
  max-width: var(--prose-measure);
  row-gap: 3.2rem;
}
.nm-pb-terms .terms-content .div-block-26 {
  row-gap: 0.6rem;
}
/* The terms' own headline, then its one-sentence summary right under it. */
.nm-pb-terms .terms-content .nm-pb-terms__lead {
  font-family: var(--v2-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--_apps---colors--foreground);
}
/* The rule titles are <h2> (the sibling pages use <h5> under the <h1>, which
   skips four levels); this pins them to the legal pages' own title size so the
   v2 heading ladder does not blow them up to section-title size. */
.nm-pb-terms .terms-content .terms-title {
  margin: 0;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  color: var(--_apps---colors--foreground);
}
.nm-pb-terms .terms-content .terms-text a,
.nm-pb-terms .nm-pb-terms__back a {
  color: var(--v2-blue);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
/* No closing band on this page (the shared one pitches the free plan), so the
   footer brings the site's own 150px gap; the legal layout's 80px bottom
   padding, made to sit above that band, would only add an empty strip. */
.nm-pb-terms .contact-us-main {
  padding-bottom: 0;
}
.nm-pb-terms .nm-pb-terms__back {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--v2-line);
  font-size: var(--fs-body);
  color: var(--v2-muted);
}

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */
/* Four steps in one row only where each step's picture fits its tile
   (measured: the widest, the email, needs about 170px inside the tile). */
@media (max-width: 1279px) {
  .nm-pb .nm-pb-cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .nm-pb .nm-pb-hero {
    flex-flow: column;
    align-items: flex-start;
  }
  .nm-pb .nm-pb-hero__copy {
    flex: none;
    max-width: none;
  }
  .nm-pb .nm-pb-panel {
    flex: none;
    width: 100%;
    max-width: 56rem;
    margin-top: clamp(4rem, 6vw, 6rem);
  }
  /* One column: the app and its heading, its picture, then the rest. */
  .nm-pb .nm-pb-appsec__grid,
  .nm-pb .nm-pb-appsec--flip .nm-pb-appsec__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "head"
      "visual"
      "body";
    row-gap: clamp(2.8rem, 5vw, 4rem);
  }
  .nm-pb .nm-pb-appsec__visual {
    width: 100%;
    max-width: 64rem;
  }
  .nm-pb .nm-pb-appsec__lead {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  /* Stacked: one card per row. The step pictures shrink so four steps do not
     become four screens of scrolling. */
  .nm-pb .nm-pb-cards--3,
  .nm-pb .nm-pb-cards--4 {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }
  .nm-pb .nm-pb-card {
    padding: 2.4rem;
  }
  .nm-pb .nm-pb-step__art {
    height: auto;
    min-height: 96px;
    margin-bottom: 2rem;
  }
  .nm-pb .nm-pb-art {
    margin-bottom: 1.6rem;
  }
  .nm-pb .nm-pb-card__title {
    font-size: max(var(--fs-h4), 17px);
  }
  .nm-pb .nm-pb-app {
    gap: 1.2rem;
    padding: 1.4rem 1.8rem;
  }
  .nm-pb .nm-pb-panel__head,
  .nm-pb .nm-pb-panel__foot {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }
  /* On a phone the app's own line moves under its name, and the deal keeps its
     two lines on the right. */
  .nm-pb .nm-pb-app__deal {
    gap: 0;
  }
}

/* Motion is an enhancement, never a gate. */
@media (prefers-reduced-motion: reduce) {
  :root:has(body.nm-pb) {
    scroll-behavior: auto;
  }
  .nm-pb .nm-pb-link {
    transition: none;
  }
}