/* ==========================================================================
   home-v2.css  —  Enterprise reflow styles for /index-v2 ONLY
   Everything is namespaced under `.home-v2` so it cannot leak into the live
   site or any page that shares notify-me.webflow.css.
   Brand tokens reused: --blue #003baf, --very-dark #12111c, TT Drugs display,
   Inter body, PT Mono labels.
   ========================================================================== */

/* ---- Lighter Tt Drugs faces (this page only) ----------------------------
   The global stylesheet registers Tt Drugs at a single DemiBold (600) weight,
   which is why headings could not render thinner than 600. These additive
   @font-face rules register the real Light (300) and Regular (400) cuts from
   the TypeType family so v2 headings can actually thin out. Same family name,
   different weights — purely additive, does not change the 600 face the rest
   of the site uses. ------------------------------------------------------- */
@font-face {
  font-family: "Tt Drugs";
  src: url("../fonts/TTDrugs-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tt Drugs";
  src: url("../fonts/TTDrugs-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.home-v2 {
  --v2-blue: #003baf;
  --v2-blue-bright: #4380f9;
  --v2-ink: #12111c;
  --v2-ink-2: #1b1a26;
  --v2-line: #e6e8ee;
  --v2-muted: #5b606b;
  --v2-gold: #fbbf24;
  --v2-display: "Tt Drugs", "TT Drugs DemiBold", "Inter Tight", sans-serif;

  /* ======================================================================
     TYPE SCALE — the single practical rule for this page (v2-2 polish).
     ----------------------------------------------------------------------
     The page had grown 5+ near-identical lead sizes, eyebrow tracking from
     0.08em→0.2em, and four overlapping card-title clamps. This collapses
     everything onto ONE ladder so every rung is intentional and the page
     reads as one consistent, enterprise-grade system.

     THREE families, THREE weights — hierarchy comes from SIZE, SPACE and
     COLOR, never heavy weight:
       • Display = Tt Drugs   → headings, big numbers, brand names, quotes
       • Text    = Inter Tight → body, leads, UI
       • Mono    = PT Mono    → eyebrows / kickers / labels only
       • Weights → 400 display & body · 500 UI/emphasis/labels · 300 leads only

     One ladder, ~1.25 ratio. All fluid via clamp() (root is fluid-rem too).
     Tokens are applied through the "TYPE SYSTEM" block at the end of this
     file — change a value here and the whole page follows.
     ====================================================================== */

  /* Display & headings (Tt Drugs) */
  --fs-display: clamp(3.6rem, 5.2vw, 6rem);    /* hero H1 (set inline in HTML) */
  --fs-h1:      clamp(3.4rem, 4.4vw, 4.8rem);  /* section titles (.big-heading-n) */
  --fs-h2:      clamp(2.4rem, 2.8vw, 3rem);    /* major card / customer-story titles */
  --fs-h3:      clamp(2rem, 2.1vw, 2.4rem);    /* feature-card titles (bento) */
  --fs-h4:      clamp(1.8rem, 1.6vw, 2rem);    /* small titles (stepper, brand card) */
  --fs-stat:    clamp(4.6rem, 6vw, 6.6rem);    /* big metric numbers */
  --fs-quote:   clamp(2rem, 2.2vw, 2.6rem);    /* pull quotes */

  /* Body & UI (Inter Tight) */
  --fs-lead:    clamp(1.6rem, 1.5vw, 1.8rem);  /* EVERY lead / sub-paragraph */
  --fs-body-lg: 1.7rem;
  --fs-body:    1.5rem;
  --fs-body-sm: 1.35rem;
  --fs-meta:    1.25rem;
  --fs-caption: 1.15rem;

  /* Labels / eyebrows (PT Mono) */
  --fs-eyebrow: 1.2rem;
  --tr-eyebrow: 0.16em;

  /* Line-heights & display tracking */
  --lh-display: 1.05;
  --lh-heading: 1.12;
  --lh-lead:    1.55;
  --lh-body:    1.6;
  --tr-display: -0.02em;
  --tr-heading: -0.01em;

  /* Section titles run off the ladder's --fs-h1 rung (legacy --v2-h2 alias,
     consumed by the .big-heading-n:not(.hero) rule below). */
  --v2-h2: var(--fs-h1);
  --v2-h2-leading: 1.1;
  --v2-h2-tracking: -0.015em;
  /* Enterprise/sharp surfaces: flatten the shared card/section radius token
     for this page only. Buttons (--fill 10000rem), badges (999px) and circles
     (50%/100%) use separate values and stay rounded. */
  --border-radius-default: 0rem;
  /* Body type for this page only — Inter Tight (tighter, more modern than the
     global Inter body face). Cascades to all non-display text inside .home-v2. */
  font-family: "Inter Tight", Inter, sans-serif;
}

/* ---- Smooth, motivated reveals respect reduced motion globally ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Type weight: match premium benchmarks (Shopify / Recharge / Gorgias).
   Hierarchy comes from size + spacing + color, NOT bold. The global stylesheet
   ships h1–h4 at font-weight: 700; this page pulls every heading down so nothing
   reads as black/heavy. See DESIGN-SYSTEM.md → Font Weight Scale.
   Tt Drugs now has real Light (300) / Regular (400) cuts loaded above, so display
   headings render genuinely thin at 400. Inter/body emphasis sits at 500. ---- */
.home-v2 h1,
.home-v2 h2,
.home-v2 h3,
.home-v2 h4,
.home-v2 .big-heading-n,
.home-v2 .heading-32 {
  font-weight: 400;
}
/* Unified section-heading scale. Applies to every .big-heading-n section title
   EXCEPT the hero H1, which keeps its larger inline clamp. This replaces the
   three competing sizes the page had (6rem / 5rem / flat 6.4rem). */
.home-v2 .big-heading-n:not(.hero) {
  font-size: var(--v2-h2);
  line-height: var(--v2-h2-leading);
  letter-spacing: var(--v2-h2-tracking);
}
/* Titles read in their authored SENTENCE case. Several global rules force
   text-transform: capitalize, which Title-Cases Every Word; this page wants
   sentence case, with names and highlighted parts capitalized in the HTML
   itself (e.g. "Shopify", "Notify Me!", gradient highlight spans). Neutralise
   capitalize on every such element that appears on this page. */
.home-v2 .big-heading-n,
.home-v2 .step-box-title,
.home-v2 .explore-blogs-title { text-transform: none; }
/* The footer newsletter "Subscribe" submit is uppercased by newsletter-form.css;
   sentence-case it to match the casing rules (a CTA is not an eyebrow label). */
.home-v2 .nm-newsletter-btn { text-transform: none; }
.home-v2 strong,
.home-v2 b { font-weight: 500; }
/* Misc inherited 600s on the page → cap at 500 (e.g. newsletter "Subscribe"). */
.home-v2 .sib-form button,
.home-v2 button[type="submit"],
.home-v2 .heading-32 ~ * strong { font-weight: 500; }

/* ==========================================================================
   1. HERO — dark section already exists. Refine CTAs + viz + rating line.
   ========================================================================== */

/* Primary CTA: keep white .main-btn (pops on dark), lay out icon + label */
.home-v2 .nm-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 2rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.home-v2 .nm-hero-cta .image-2 { width: 1.9rem; height: 1.9rem; margin: 0; }
.home-v2 .nm-hero-cta span { line-height: 1; }

/* Secondary CTA: keep transparent/white-border .secondary-btn, add play glyph.
   .secondary-btn sets no font-family (unlike .main-btn), so it falls back to the
   body sans-serif — pin it to PT Mono so it matches the primary "Book a demo". */
.home-v2 .nm-hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 1.9rem;
  font-family: "PT Mono", sans-serif;
}
.home-v2 .nm-play-ico { width: 1.1rem; height: 1.2rem; flex: 0 0 auto; }

.home-v2 .btn-wrapper-stock {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Rating line under CTAs (inline CSS already colours it white). Refine. */
.home-v2 .nm-hero-review-text strong { font-weight: 500; color: #fff; }

/* Hero viz frame: lift the animated product bento off the dark bg */
.home-v2 .nm-hero-viz-wrap {
  position: relative;
}
.home-v2 #nmhx-root {
  filter: drop-shadow(0 22px 60px rgba(0, 0, 0, 0.45));
}

/* ---- Logo strip → premium "trusted by" band on dark --------------------- */
.home-v2 .nm-logo-strip { padding-top: 1.4rem; }
.home-v2 .nm-logo-strip__label {
  margin: 0 0 1.5rem;
  text-align: center;
  font-family: "PT Mono", monospace;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
/* White-silhouette logos read as a unified, enterprise wall on dark */
.home-v2 .nm-logo-strip .company-logo-hero {
  filter: brightness(0) invert(1);
  opacity: 0.62;
  transition: opacity 0.25s ease;
}
.home-v2 .nm-logo-strip .swiper-slide:hover .company-logo-hero { opacity: 1; }

/* ==========================================================================
   3. TESTIMONIALS reflow — stars, initials avatars, outcome line
   (layered onto the existing tabbed store testimonials)
   ========================================================================== */
.home-v2 .nm-tm-stars {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--v2-gold);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 1.1rem;
}
.home-v2 .nm-tm-attrib {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
}
.home-v2 .nm-tm-avatar {
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, var(--v2-blue), var(--v2-blue-bright));
  box-shadow: 0 4px 12px rgba(0, 59, 175, 0.25);
}
.home-v2 .nm-tm-attrib__meta { line-height: 1.3; text-align: left; }
.home-v2 .nm-tm-attrib__name { font-weight: 500; color: var(--v2-ink); font-size: 1.45rem; }
.home-v2 .nm-tm-attrib__role { font-size: 1.25rem; color: var(--v2-muted); }
.home-v2 .nm-tm-outcome {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(0, 59, 175, 0.08);
  color: var(--v2-blue);
  font-weight: 500;
  font-size: 1.3rem;
}
.home-v2 .nm-tm-outcome::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #10b981;
}

/* --------------------------------------------------------------------------
   3b. CUSTOMER-STORY CARD redesign (the tabbed brand testimonials)
   The base Webflow markup gave us a broken-looking "tenure" pill (a
   transparent→white gradient blob), an orphaned country line, and an
   untreated quote. This rebuilds the whole card as a balanced two-column
   editorial "customer story": refined quote + clean tenure credential on the
   left, full-bleed lifestyle photo on the right. Pure restyle — no markup
   change; reorder is avoided so the DOM stays readable.
   -------------------------------------------------------------------------- */

/* Card shell → balanced 2-col grid, tighter padding, hairline frame */
.home-v2 .yellow-box-stores-home-page-tab {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: stretch;
  gap: clamp(3rem, 4.5vw, 6rem);
  /* Fixed (clamped) height = same for every tab → no height jump when switching.
     Comfortably clears the tallest quote (~36rem) plus padding; the photo just
     cover-fills it. Grows only on very wide screens. */
  height: clamp(50rem, 34vw, 58rem);
  padding: clamp(3.2rem, 4vw, 5.6rem);
  background-color: #f9f7e5;
  border: 1px solid #ece6c8;
  box-shadow: 0 1px 0 rgba(18, 17, 28, 0.02);
}

/* Left content column → flow with the signature footer pinned to the bottom.
   Gap is zeroed so each element's spacing is controlled with margins. */
.home-v2 .store-yellow-box-content {
  gap: 0;
  height: 100%;
  justify-content: flex-start;
}

/* Stars — a touch larger as the opening credibility cue */
.home-v2 .store-yellow-box-content .nm-tm-stars {
  font-size: 1.7rem;
  margin-bottom: 1.6rem;
}

/* Brand name → clean display face instead of the techy monospace */
.home-v2 .store-yellow-box-content .title-28-pt {
  font-family: var(--v2-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
  margin: 0 0 1.8rem;
}

/* Tenure credential → contained pill (was a broken gradient blob).
   Circle-number badge + label reads clearly as a stat, not a button. */
.home-v2 .store-yellow-box-content .box-inside-yellow-box-stores {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  width: max-content;
  max-width: 100%;
  padding: 0.7rem 1.8rem 0.7rem 0.7rem;
  background-image: none;
  background-color: #fff;
  border: 1px solid #ece6c8;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(18, 17, 28, 0.05);
}
.home-v2 .store-yellow-box-content .stores-content-percentage {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: rgba(0, 59, 175, 0.07);
  border: 1px solid rgba(0, 59, 175, 0.14);
  font-family: var(--v2-display);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--v2-blue);
}
.home-v2 .store-yellow-box-content .stores-inner-box-p {
  margin: 0;
  max-width: none;
  font-size: 1.4rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--v2-ink);
}

/* Quote → the focal pull-quote, with an editorial blue accent rule */
.home-v2 .store-yellow-box-content .stores-box-p {
  margin: 2.6rem 0 0;
  max-width: 44rem;
  padding-left: 2rem;
  border-left: 2px solid rgba(0, 59, 175, 0.28);
  font-size: clamp(1.7rem, 1.55vw, 2rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--v2-ink-2);
}

/* Signature footer → brand wordmark + location, pushed to the card bottom.
   margin-top:auto opens whitespace above the footer so it reads as a signature.
   Logos vary wildly in aspect (wide wordmarks vs square emblems), so they're
   capped by a BOUNDING BOX (max-height + max-width) rather than a fixed height —
   that keeps every brand mark at a consistent footprint instead of collapsing
   the square ones (e.g. Maison) to a tiny dot. */
.home-v2 .store-yellow-box-content .image-3,
.home-v2 .store-yellow-box-content .image-3.bigger {
  height: auto;
  width: auto;
  max-height: 3.6rem;
  max-width: 15rem;
  margin: auto 0 0;
}
/* The (classless) country line → quiet mono meta-label with a location dot */
.home-v2 .store-yellow-box-content > div:not([class]) {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.4rem;
  font-family: "PT Mono", monospace;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-muted);
}
.home-v2 .store-yellow-box-content > div:not([class])::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--v2-blue);
  opacity: 0.65;
}

/* Photo column → framed media panel. A subtle radius unifies the source set:
   some webps ship baked-in rounded corners and others are sharp, so a small
   container radius brings the sharp ones in line and the whole set reads
   cohesive. Cream bottom-fade dropped so the photo reads as a clean panel.

   EQUAL TAB HEIGHTS: the image used to drive the card height, so a portrait shot
   (e.g. Roller Rabbit) made its tab taller than the square ones. The card now
   owns a fixed height (above); the image is absolutely positioned so it never
   contributes its intrinsic height — it just cover-fills the frame, identically
   on every tab. */
.home-v2 .yellow-box-stores-home-page-tab .div-block-2 {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 1.2rem;
  border: 1px solid rgba(18, 17, 28, 0.06);
  box-shadow: 0 12px 34px rgba(18, 17, 28, 0.14);
}
.home-v2 .yellow-box-stores-home-page-tab .image-tab-home {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-v2 .yellow-box-stores-home-page-tab .div-block-58 { display: none; }

/* Mobile → single column, photo below the story */
@media (max-width: 991px) {
  .home-v2 .yellow-box-stores-home-page-tab {
    grid-template-columns: 1fr;
    height: auto;
    gap: 3rem;
    padding: clamp(2.4rem, 6vw, 3.6rem);
  }
  .home-v2 .store-yellow-box-content .image-3,
  .home-v2 .store-yellow-box-content .image-3.bigger { margin-top: 3.2rem; }
  /* Stacked below the text on mobile → the card is auto-height, so the photo
     needs its own definite height: a compact landscape frame. */
  .home-v2 .yellow-box-stores-home-page-tab .div-block-2 { height: auto; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   4. INTEGRATIONS STRIP (new) — "works with your stack"
   ========================================================================== */
.home-v2 .nm-integrations {
  padding: clamp(5rem, 8vw, 8rem) 0;
  text-align: center;
}
.home-v2 .nm-integrations__head {
  max-width: 60rem;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
}
.home-v2 .nm-integrations__badge {
  display: inline-block;
  margin: 0 0 1.8rem;
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 17, 28, 0.05);
  font-family: "PT Mono", monospace;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v2-blue);
}
.home-v2 .nm-integrations__sub {
  margin-top: 1.2rem;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--v2-muted);
}

/* ---- The flow diagram: hub → wires → marquee ---------------------------- */
.home-v2 .nm-intflow {
  position: relative;
  max-width: 108rem;
  margin: 0 auto;
  padding-top: 2rem;
}
/* Faint blueprint grid behind the hub + wires only, faded toward the edges.
   Lives on a pseudo-element so its radial mask never touches the logo tiles. */
.home-v2 .nm-intflow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26rem;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(18, 17, 28, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 17, 28, 0.04) 1px, transparent 1px);
  background-size: 4.4rem 4.4rem;
  background-position: center top;
  -webkit-mask-image: radial-gradient(115% 90% at 50% 26%, #000 28%, transparent 72%);
          mask-image: radial-gradient(115% 90% at 50% 26%, #000 28%, transparent 72%);
}

/* Central hub */
.home-v2 .nm-intflow__hub {
  position: relative;
  z-index: 3;
  width: 7.6rem;
  height: 7.6rem;
  margin: 0 auto;
}
.home-v2 .nm-intflow__core {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, var(--v2-blue-bright) 0%, var(--v2-blue) 62%, #022a7e 100%);
  border: 1px solid rgba(67, 128, 249, 0.55);
  border-radius: 1.4rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 0 rgba(18, 17, 28, 0.04),
    0 18px 44px rgba(0, 59, 175, 0.32);
}
.home-v2 .nm-intflow__core img {
  width: 3.6rem;
  height: auto;
}
.home-v2 .nm-intflow__ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 1.8rem;
  border: 1px solid rgba(67, 128, 249, 0.5);
  animation: nm-intflow-ring 3.2s ease-out infinite;
}
.home-v2 .nm-intflow__ring--2 { animation-delay: 1.6s; }
@keyframes nm-intflow-ring {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.3); }
}

/* Flow wires */
.home-v2 .nm-intflow__wires {
  display: block;
  width: 100%;
  height: clamp(7.2rem, 10.8vw, 9.6rem);
  margin-top: -0.6rem;
  position: relative;
  z-index: 1;
}
.home-v2 .nm-intflow__wire-base path { stroke: rgba(0, 59, 175, 0.16); }
.home-v2 .nm-intflow__wire-flow path {
  stroke-dasharray: 80 920;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(67, 128, 249, 0.6));
  animation: nm-intflow-pulse 2.6s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes nm-intflow-pulse {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1000; }
}

/* Marquee rows */
.home-v2 .nm-intflow__rows {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: -1rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.home-v2 .nm-intflow__row {
  /* Clip the scrolling track horizontally, but let a hovered tile's lift and
     shadow spill vertically. `overflow: hidden` cropped both axes; `clip visible`
     clips only the X axis and leaves Y visible (no forced auto/scroll). The
     `hidden` line is a fallback for engines without the `clip` keyword. */
  overflow: hidden;
  overflow: clip visible;
}
.home-v2 .nm-intflow__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Spacing lives on each tile (margin-right) rather than a flex `gap` on the
   track. This is what makes the loop truly seamless: every tile occupies a
   uniform `tile + gap` unit, so the two identical sets are each exactly half
   the track and translateX(-50%) lands pixel-perfectly on the duplicate — no
   half-gap drift, no visible "end of list" at the loop reset. */
.home-v2 .nm-intflow__row--a .nm-intflow__track {
  animation: nm-intflow-marquee 42s linear infinite;
}
@keyframes nm-intflow-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.home-v2 .nm-intflow__tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9rem;
  height: 9rem;
  margin-right: 1.6rem;
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: 1.4rem;
  box-shadow: 0 1px 2px rgba(18, 17, 28, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.home-v2 .nm-intflow__tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(18, 17, 28, 0.10);
  border-color: rgba(0, 59, 175, 0.28);
}
.home-v2 .nm-intflow__tile img {
  width: 4.6rem;
  height: 4.6rem;
  object-fit: contain;
}
@media (max-width: 575px) {
  .home-v2 .nm-intflow__tile { width: 7.4rem; height: 7.4rem; border-radius: 1.2rem; }
  .home-v2 .nm-intflow__tile img { width: 3.8rem; height: 3.8rem; }
  .home-v2 .nm-intflow__rows { gap: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-intflow__track,
  .home-v2 .nm-intflow__wire-flow path,
  .home-v2 .nm-intflow__ring { animation: none; }
  .home-v2 .nm-intflow__ring { opacity: 0; }
}

/* ==========================================================================
   4b. SOCIAL-PROOF BAND — App Store rating · GMV processed · customer quote
   Dark full-bleed band between the integrations strip and the store
   testimonials. Sharp/flat to match the page; gold stars + blue gradient
   numbers echo the hero & integrations visual language. It sits OUTSIDE the
   flow-rhythm list (it's a dark full-bleed band, like .nm-devapi/.nm-final-cta)
   so it takes the inter-section gap as transparent margin-top — the next
   section's padding-top owns the gap below it.
   ========================================================================== */
.home-v2 .nm-proof {
  position: relative;
  overflow: hidden;
  margin-top: var(--v2-rhythm);
  padding: clamp(5.5rem, 8vw, 9rem) 0;
  background:
    radial-gradient(120% 150% at 50% -25%, #1f2a52 0%, #12111c 58%),
    var(--v2-ink);
}
/* Faint blueprint grid, masked to a soft top-centre vignette — same texture
   language as the integrations hub, keeps the dark band from reading as flat. */
.home-v2 .nm-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 4.4rem 4.4rem;
  -webkit-mask-image: radial-gradient(95% 80% at 50% 0%, #000 10%, transparent 70%);
          mask-image: radial-gradient(95% 80% at 50% 0%, #000 10%, transparent 70%);
}
.home-v2 .nm-proof__inner { position: relative; z-index: 2; }

/* Header */
.home-v2 .nm-proof__head { text-align: center; max-width: 60rem; margin: 0 auto clamp(4rem, 5.5vw, 5.5rem); }
.home-v2 .nm-proof__badge {
  display: inline-block;
  margin: 0 0 1.8rem;
  padding: 0.55rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-family: "PT Mono", monospace;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v2-secondary, #c2dcff);
}
.home-v2 .nm-proof__title { color: #fff; margin: 0; }

/* 3-up grid: two metrics + a wider quote, hairline dividers between */
.home-v2 .nm-proof__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.45fr;
  align-items: stretch;
  gap: clamp(2.4rem, 4vw, 4.8rem);
}
.home-v2 .nm-proof__col { position: relative; }
/* Vertical fading hairline before the 2nd & 3rd columns */
.home-v2 .nm-proof__col + .nm-proof__col::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: calc(clamp(2.4rem, 4vw, 4.8rem) / -2);
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.16) 18%,
    rgba(255, 255, 255, 0.16) 82%,
    transparent
  );
}

/* Shared kicker above every column */
.home-v2 .nm-proof__kicker {
  display: block;
  margin-bottom: 1.6rem;
  font-family: "PT Mono", monospace;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Metric columns */
.home-v2 .nm-proof__num {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--v2-display);
  font-weight: 500;
  font-size: clamp(5.4rem, 7vw, 7.4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
}
.home-v2 .nm-proof__unit {
  font-size: 0.4em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0;
}
.home-v2 .nm-proof__stars {
  display: flex;
  gap: 0.25rem;
  margin-top: 1.4rem;
  color: var(--v2-gold);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.home-v2 .nm-proof__label {
  margin: 1.4rem 0 0;
  max-width: 30ch;
  font-size: 1.45rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* Mini GMV bar chart — sits where the stars sit in col 1, keeps the two
   metric columns the same height and adds a live visual element. */
.home-v2 .nm-proof__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 2.4rem;
  margin-top: 1.4rem;
}
.home-v2 .nm-proof__bars span {
  flex: 1;
  max-width: 0.9rem;
  height: var(--h);
  border-radius: 2px;
  background: linear-gradient(to top, var(--v2-blue), var(--v2-blue-bright));
  transform-origin: bottom;
  animation: nm-proof-bar 1.4s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) both;
}
@keyframes nm-proof-bar {
  from { transform: scaleY(0.08); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Testimonial column */
.home-v2 .nm-proof__quote {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.home-v2 .nm-proof__quote-text {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--v2-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 2.4vw, 2.85rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #fff;
}
.home-v2 .nm-proof__quote-text em { font-style: normal; color: var(--v2-secondary, #c2dcff); }
.home-v2 .nm-proof__attrib {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: auto;
  padding-top: 2.4rem;
}
.home-v2 .nm-proof__avatar {
  flex: 0 0 auto;
  width: 4.6rem;
  height: 4.6rem;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 6px 18px rgba(0, 0, 0, 0.35);
}
.home-v2 .nm-proof__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.home-v2 .nm-proof__attrib-meta { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.35; }
.home-v2 .nm-proof__attrib-name { font-weight: 500; font-size: 1.5rem; color: #fff; }
.home-v2 .nm-proof__attrib-role { font-size: 1.3rem; color: rgba(255, 255, 255, 0.55); }

/* Tablet: metrics side-by-side on top, quote full-width below */
@media (max-width: 991px) {
  .home-v2 .nm-proof__grid { grid-template-columns: 1fr 1fr; }
  .home-v2 .nm-proof__quote { grid-column: 1 / -1; }
  /* Divider only before the 2nd metric; the quote takes a top border instead */
  .home-v2 .nm-proof__quote::before { display: none; }
  .home-v2 .nm-proof__quote {
    margin-top: clamp(3rem, 5vw, 4rem);
    padding-top: clamp(3rem, 5vw, 4rem);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* Mobile: single column, horizontal dividers between every block */
@media (max-width: 575px) {
  .home-v2 .nm-proof__grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .home-v2 .nm-proof__col + .nm-proof__col::before { display: none; }
  .home-v2 .nm-proof__metric + .nm-proof__metric,
  .home-v2 .nm-proof__quote {
    padding-top: 3.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .home-v2 .nm-proof__quote { margin-top: 0; }
  .home-v2 .nm-proof__label { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-proof__bars span { animation: none; }
}

/* ==========================================================================
   5. CLOSING CTA BAND (new) — strong finish before footer
   ========================================================================== */
.home-v2 .nm-final-cta {
  position: relative;
  overflow: hidden;
  /* Full-bleed: no horizontal inset (edge to edge). Top/bottom margins are set
     in the rhythm rule below. */
  margin: clamp(5rem, 8vw, 8rem) 0;
  padding: clamp(4.5rem, 8vw, 8rem) 2rem;
  border-radius: 0;
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% -20%, #1f2a52 0%, #12111c 60%),
    var(--v2-ink);
}
.home-v2 .nm-final-cta__inner { position: relative; z-index: 2; max-width: 70rem; margin: 0 auto; }
.home-v2 .nm-final-cta h2 {
  color: #fff;
  font-family: var(--v2-display);
  font-weight: 500;
  font-size: clamp(3.2rem, 5vw, 5.4rem);
  line-height: 1.1;
  margin: 0 0 1.6rem;
}
.home-v2 .nm-final-cta__sub {
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52rem;
  margin: 0 auto 2.8rem;
}
.home-v2 .nm-final-cta__btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.8rem;
}
.home-v2 .nm-final-cta__primary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.2rem 2.4rem;
  border-radius: 999px;
  background: #fff;
  color: var(--v2-ink);
  font-weight: 500;
  font-size: 1.6rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home-v2 .nm-final-cta__primary img { width: 1.9rem; height: 1.9rem; }
.home-v2 .nm-final-cta__primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.home-v2 .nm-final-cta__secondary {
  display: inline-flex;
  align-items: center;
  padding: 1.2rem 2.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 500;
  font-size: 1.6rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.home-v2 .nm-final-cta__secondary:hover { border-color: #fff; transform: translateY(-2px); }
.home-v2 .nm-final-cta__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.35rem;
}
.home-v2 .nm-final-cta__rating .nm-tm-stars { margin: 0; font-size: 1.35rem; }

/* ==========================================================================
   6. VERTICAL RHYTHM — one consistent gap between every section
   ----------------------------------------------------------------------------
   The page mixed three spacing systems: a flat 8rem from the shared Webflow
   sections, a fluid clamp(5rem,8vw,8rem) on the new sections, an extra 80px
   stores top-override, a 0-top steps section, and an 80px margin on the final
   CTA. The result was seam gaps swinging between ~80px and ~170px — visibly
   untidy. This block collapses all of that into ONE rhythm token so every
   boundary breathes by the same amount.

   Model: each flow section owns the gap ABOVE it (padding-top = --v2-rhythm)
   and contributes NO bottom padding, so seams never stack/double. The hero
   feeds straight into the first section, and the footer owns its own top gap.
   Full-bleed (devapi) and boxed (final-cta) sections are handled explicitly so
   they sit in the same rhythm without breaking their edge-to-edge treatments. */
.home-v2 {
  /* Single source of truth for inter-section spacing on this page. */
  --v2-rhythm: clamp(13rem, 15vw, 21rem);
}

/* Flow sections: gap lives on top, bottoms are zeroed so seams stay single. */
.home-v2 .section.pad-layout,                /* bento */
.home-v2 .stores-landing-section.pad-layout, /* testimonials */
.home-v2 .stock-steps-notify-section.pad-layout, /* "Don't worry" steps */
.home-v2 .nm-integrations,                   /* integrations strip */
.home-v2 .nm-partners {                      /* partnerships two-up */
  padding-top: var(--v2-rhythm);
  padding-bottom: 0;
}
/* Hero → bento is the one seam that sits against the dark hero, so it gets a
   tighter gap (half the page rhythm) — the bento heading should follow the hero
   closely rather than float a full section-gap below it. */
.home-v2 .section.pad-layout { padding-top: calc(var(--v2-rhythm) / 2); }

/* Full-bleed developer split: no internal section padding (the two panels
   carry their own), so give it the rhythm as top margin instead. */
.home-v2 .nm-devapi { margin-top: var(--v2-rhythm); }

/* Boxed final CTA: it's an inset card, so the rhythm is its top margin and the
   bottom margin closes the gap before the footer. Horizontal inset preserved. */
.home-v2 .nm-final-cta {
  margin-top: var(--v2-rhythm);
  /* Stick to the footer: no bottom gap. The band's base colour (#12111c) and
     the footer share the same dark, so they merge into one continuous block. */
  margin-bottom: 0;
}

.home-v2 .big-heading-n.stores-heading {
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* The Roller Rabbit testimonial photo is a portrait shot, so cover-fit it into
   the square tab slot (which otherwise stretches its image to fill). Bias the
   crop toward the upper third so the model's face stays in frame. Scoped to
   this image only — the other tabs keep their square photos untouched. */
.home-v2 .image-tab-home.is-portrait {
  object-fit: cover;
  object-position: 50% 30%;
}

/* Featured posts are now hardcoded cards (real /post/* links) — the Webflow CMS
   list never populated on the static/Astro build, so it was replaced inline.
   Defensive: keep any stray empty-state placeholder hidden. */
.home-v2 .explore-blogs-grid .w-dyn-empty { display: none; }

/* Section title uses the Tt Drugs display face (rest of the v2 page) instead of
   the global PT Mono cut. */
.home-v2 .explore-blogs-title { font-family: var(--v2-display); }

/* Trailing "Explore featured posts" band — brought back for the event, shown
   compact via css/blog-compact.css. The band is visible again; only the
   Resources boxes above stay hidden (via their own .hide-release gate), so
   just the featured posts show before the footer. */
.home-v2 .dark-section .resources-section { display: none; }

/* ==========================================================================
   7. TRANSPARENT NAV over the cinematic hero
   The fixed navbar is transparent (with a soft top scrim for legibility)
   while the video hero is in view, then fills solid once the hero is
   completely scrolled past. Toggled by the .nm-nav-solid class (see the
   inline scroll handler in index-v2.html).
   ========================================================================== */
.home-v2 .navbar {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(8, 10, 14, 0.55) 0%, rgba(8, 10, 14, 0) 100%);
  box-shadow: none;
  transition: background-color 0.35s ease, background-image 0.35s ease, box-shadow 0.35s ease;
}
.home-v2 .navbar.nm-nav-solid {
  background-color: #ffffff;
  background-image: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 30px rgba(0, 0, 0, 0.10);
}

/* Recolor the nav contents for the solid (white) bar. Over the hero the nav
   stays transparent with white contents (default); once .nm-nav-solid is set
   the logo, links, caret, hamburger and CTA flip to dark for the white bar. */
.home-v2 .navbar .menu-item-text,
.home-v2 .navbar .logo-name,
.home-v2 .navbar .logo-icon,
.home-v2 .navbar .dropdown-menu-arrow,
.home-v2 .navbar .hamburger-container img,
.home-v2 .navbar .nav-btn.filled-bg {
  transition: color 0.35s ease, background-color 0.35s ease, filter 0.35s ease, border-color 0.35s ease;
}
/* Logo: one white brand lockup for every state, so the mark's shape is identical
   throughout — only the colour flips. Over the hero (transparent nav) it stays
   white; on the solid white bar — and while the mobile drawer is open — it
   recolours to the dark brand ink. The original two-part mark is superseded. */
.home-v2 .navbar .logo-wrapper { width: auto; overflow: visible; }
.home-v2 .navbar .logo-wrapper .nm-logo-white {
  display: block;
  height: 3.6rem;
  width: auto;
  transition: filter 0.35s ease;
}
.home-v2 .navbar .logo-wrapper .div-block-30,
.home-v2 .navbar .logo-wrapper .logo-name { display: none; }

.home-v2 .navbar.nm-nav-solid .logo-wrapper .nm-logo-white { filter: brightness(0); }
.home-v2 .navbar.nm-nav-solid .menu-item-text { color: var(--very-dark); }
.home-v2 .navbar.nm-nav-solid .logo-name { filter: brightness(0); }
.home-v2 .navbar.nm-nav-solid .logo-icon { filter: invert(1); }
.home-v2 .navbar.nm-nav-solid .dropdown-menu-arrow { filter: brightness(0); }
.home-v2 .navbar.nm-nav-solid .hamburger-container img { filter: brightness(0); }
.home-v2 .navbar.nm-nav-solid .nav-btn.filled-bg {
  background-color: var(--very-dark);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .navbar,
  .home-v2 .navbar .menu-item-text,
  .home-v2 .navbar .logo-name,
  .home-v2 .navbar .logo-icon,
  .home-v2 .navbar .dropdown-menu-arrow,
  .home-v2 .navbar .hamburger-container img,
  .home-v2 .navbar .nav-btn.filled-bg { transition: none; }
}

/* Mobile/tablet (hamburger breakpoint): the desktop bar (.desk-nav) is hidden and
   the visible bar is .mobile-nav, which paints its own dark background — so the
   transparent treatment on .navbar can't show through. Mirror the desktop
   behaviour on .mobile-nav instead: transparent (white logo + hamburger over the
   hero, via the scrim on .navbar), then a solid white bar once .nm-nav-solid is
   set. Logo/text recolouring is driven only by .nm-nav-solid (shared rules above),
   so it flips in step with the bar exactly like desktop. */
@media (max-width: 991px) {
  .home-v2 .navbar .mobile-nav.pad-layout {
    background-color: transparent;
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
  }
  .home-v2 .navbar.nm-nav-solid .mobile-nav.pad-layout {
    background-color: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 30px rgba(0, 0, 0, 0.10);
  }
  /* Menu open (body.no-scroll): the drawer behind the bar is white, so the
     white lockup + close icon would be invisible. Recolour the lockup to the dark
     brand ink and force the close icon dark, at any scroll position. */
  .home-v2.no-scroll .navbar .mobile-nav .logo-wrapper .nm-logo-white { filter: brightness(0); }
  .home-v2.no-scroll .navbar .mobile-nav .hamburger-container img { filter: brightness(0); }

  /* Persistent "Book a demo" CTA in the collapsed bar, grouped just left of the
     hamburger. margin-left:auto absorbs the free space so the button + hamburger
     sit together at the right edge (logo stays left). Reuses .nav-btn.filled-bg,
     so it's a white pill over the hero and flips to a dark pill on the white bar. */
  .home-v2 .navbar .mobile-nav .nm-nav-mobile-cta {
    margin-left: auto;
    margin-right: 1.4rem;
    height: 3.8rem;
    padding: 0 1.6rem;
    font-size: 1.4rem;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  /* Hide the CTA while the drawer is open — the open menu has its own CTAs. */
  .home-v2.no-scroll .navbar .mobile-nav .nm-nav-mobile-cta { display: none; }
}
@media (max-width: 479px) {
  .home-v2 .navbar .mobile-nav .nm-nav-mobile-cta {
    margin-right: 1.1rem;
    height: 3.6rem;
    padding: 0 1.3rem;
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   8. DEVELOPER API — split: code window (left) + copy (right)
   ========================================================================== */
/* Full-bleed two-tone split (edge to edge on any screen width). */
.home-v2 .nm-devapi { padding: 0; }
.home-v2 .nm-devapi__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* Left half — full-bleed blue panel holding the code window */
.home-v2 .nm-devapi__visual {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 6vw, 8rem) clamp(2rem, 5vw, 7rem);
  background:
    radial-gradient(60% 70% at 32% 24%, rgba(67, 128, 249, 0.32), rgba(67, 128, 249, 0) 70%),
    linear-gradient(135deg, #c8d6ff 0%, #eef2ff 100%);
}
.home-v2 .nm-devapi__glow { display: none; }

/* Right half — full-bleed light panel holding the copy */
.home-v2 .nm-devapi__copy {
  display: flex;
  align-items: center;
  background: #f4f5f8;
  padding: clamp(4rem, 6vw, 8rem) clamp(2.4rem, 6vw, 9rem);
}
.home-v2 .nm-devapi__copy-inner { width: 100%; max-width: 52rem; }
.home-v2 .nm-devapi__window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 56rem;
  margin: 0;
  background: #14131d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.2rem;
  box-shadow: 0 30px 60px rgba(18, 17, 28, 0.28);
  overflow: visible;
}
.home-v2 .nm-devapi__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 1.4rem;
  background: #1c1b27;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-top-left-radius: 1.2rem;
  border-top-right-radius: 1.2rem;
}
.home-v2 .nm-devapi__dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #3a3a48; }
.home-v2 .nm-devapi__dot:nth-child(1) { background: #ff5f57; }
.home-v2 .nm-devapi__dot:nth-child(2) { background: #febc2e; }
.home-v2 .nm-devapi__dot:nth-child(3) { background: #28c840; }
.home-v2 .nm-devapi__file {
  margin-left: 0.6rem;
  font-family: "PT Mono", monospace;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.5);
}
.home-v2 .nm-devapi__code {
  margin: 0;
  padding: clamp(1.6rem, 2.2vw, 2.4rem);
  font-family: "PT Mono", ui-monospace, monospace;
  font-size: clamp(1.2rem, 1.15vw, 1.4rem);
  line-height: 1.7;
  color: #d7d8e2;
  overflow-x: auto;
  white-space: normal;
}
.home-v2 .nm-devapi__code .tok-key { color: #7aa2ff; }
.home-v2 .nm-devapi__code .tok-str { color: #7fe0b6; }
.home-v2 .nm-devapi__code .tok-com { color: #6b6b7d; font-style: italic; }
.home-v2 .nm-devapi__code .tok-fn  { color: #fbbf24; }
.home-v2 .nm-devapi__code .tok-cst { color: #c9a6ff; }

.home-v2 .nm-devapi__event {
  position: absolute;
  z-index: 3;
  right: clamp(-1.4rem, -0.6vw, -0.6rem);
  bottom: clamp(1.4rem, 2.5vw, 2.4rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 27rem;
  padding: 1.1rem 1.4rem;
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(18, 17, 28, 0.18);
}
.home-v2 .nm-devapi__event-ico {
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 0.9rem;
  background: var(--v2-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-v2 .nm-devapi__event-ico img { width: 2rem; height: 2rem; }
.home-v2 .nm-devapi__event-title { display: block; font-weight: 500; font-size: 1.4rem; color: var(--v2-ink); }
.home-v2 .nm-devapi__event-meta { display: block; font-size: 1.2rem; color: var(--v2-muted); }
.home-v2 .nm-devapi__event-pulse {
  flex: none;
  margin-left: auto;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5);
  animation: nm-devapi-pulse 2s infinite;
}
@keyframes nm-devapi-pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5); }
  70% { box-shadow: 0 0 0 0.8rem rgba(40, 200, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0); }
}

/* Right copy */
.home-v2 .nm-devapi__eyebrow {
  font-family: "PT Mono", monospace;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-blue);
  margin: 0 0 1.4rem;
}
.home-v2 .nm-devapi__title { margin: 0; text-align: left; }
.home-v2 .nm-devapi__lede {
  margin: 1.8rem 0 0;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--v2-muted);
  max-width: 46rem;
}
.home-v2 .nm-devapi__feats { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.home-v2 .nm-devapi__feats li { font-size: 1.5rem; line-height: 1.4; color: var(--v2-ink); }
.home-v2 .nm-devapi__feat-k {
  display: inline-block;
  margin-right: 0.8rem;
  padding: 0.3rem 1rem;
  font-family: "PT Mono", monospace;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--v2-blue);
  background: rgba(0, 59, 175, 0.07);
  border: 1px solid rgba(0, 59, 175, 0.16);
  border-radius: 999px;
}
.home-v2 .nm-devapi__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.8rem; }

@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-devapi__event-pulse { animation: none; }
}
@media (max-width: 991px) {
  .home-v2 .nm-devapi__inner { grid-template-columns: 1fr; gap: 0; }
  /* Grid items default to min-width:auto, so the code window's unbreakable
     content refuses to shrink below its intrinsic width and pushes the column
     ~21px past the viewport (the page's horizontal-scroll bug). Let them shrink. */
  .home-v2 .nm-devapi__visual,
  .home-v2 .nm-devapi__copy { min-width: 0; }
  .home-v2 .nm-devapi__window { max-width: 100%; }
  .home-v2 .nm-devapi__copy { order: -1; }
  .home-v2 .nm-devapi__copy-inner { max-width: 56rem; margin: 0 auto; }
}
@media (max-width: 575px) {
  .home-v2 .nm-devapi__event { position: static; max-width: none; margin: 1.2rem 1.2rem 0; }
}

/* ==========================================================================
   9. ENTERPRISE SHARP SURFACES (new homepage only)
   Cards, panels, media frames and section containers go to 0 radius for a
   more serious, enterprise feel (à la Recharge). Buttons, badges/chips,
   avatars, status dots and small icon tiles keep their rounding.
   The shared --border-radius-default token is set to 0 above (handles all
   token-based cards); below we flatten the classes that hardcode a literal
   radius and still appear on this page.
   ========================================================================== */
.home-v2 .control-box,
.home-v2 .control-yellow-box,
.home-v2 .fit-image,
.home-v2 .yellow-box-stores-home-page-tab,
.home-v2 .menu-box {
  border-radius: 0;
}

/* ---- "Don't worry" feature switcher: curved pills, per-feature color ----
   Each tab carries its own brand accent via --tab-accent (RGB triplet so we
   can mix opacities): Back in Stock = blue, Preorders = green, Wishlist =
   purple. The accent only shows on hover/active; idle pills stay neutral. */
.home-v2 .home-tab {
  --tab-accent: 0, 59, 175;
  border-radius: 999px;
  border: 1px solid var(--v2-line);
  background-color: #fff;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.home-v2 .home-tab.second { --tab-accent: 31, 154, 104; }   /* Preorders — green */
.home-v2 .home-tab.third  { --tab-accent: 124, 32, 196; }   /* Wishlist — purple */

.home-v2 .home-tab:hover {
  border-color: rgba(var(--tab-accent), 0.4);
  box-shadow: 0 0.4rem 1.2rem rgba(18, 17, 28, 0.06);
}
.home-v2 .home-tab.w--current,
.home-v2 .home-tab.first.w--current,
.home-v2 .home-tab.secend.w--current,
.home-v2 .home-tab.third.w--current {
  border-color: rgb(var(--tab-accent));
  background-color: rgba(var(--tab-accent), 0.06);
  box-shadow: 0 0.4rem 1.4rem rgba(var(--tab-accent), 0.16);
}
.home-v2 .home-tab.w--current div { color: rgb(var(--tab-accent)); font-weight: 500; }

/* Feature logos replace the plain tab text (sourced from the bento section).
   The logos already carry each feature's brand color, so we keep that color
   and only dial opacity for idle/hover/active — no grayscale (it reads as
   "disabled/broken", not "inactive"). */
.home-v2 .home-tab__logo {
  height: 3.2rem;
  width: auto;
  max-width: 100%;
  opacity: 0.6;
  transition: opacity 0.18s ease;
}
.home-v2 .home-tab:hover .home-tab__logo { opacity: 0.85; }
.home-v2 .home-tab.w--current .home-tab__logo { opacity: 1; }

/* ---- Case-study brand switcher: curved pills --------------------------- */
.home-v2 .home-page-tab-top-box {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}
.home-v2 .homepage-box-item {
  border-radius: 999px;
  border: 1px solid var(--v2-line);
  background-color: #fff;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.home-v2 .homepage-box-item:hover {
  border-color: rgba(0, 59, 175, 0.35);
  box-shadow: 0 0.4rem 1.2rem rgba(18, 17, 28, 0.06);
}
.home-v2 .homepage-box-item {
  position: relative;
}
.home-v2 .homepage-box-item.w--current {
  border-color: var(--v2-blue);
  background-color: rgba(0, 59, 175, 0.05);
  box-shadow: 0 0.4rem 1.4rem rgba(0, 59, 175, 0.12);
}

/* Auto-advance countdown: JS creates one timer element and moves it into the
   active pill, restarting the fill each cycle so the bar doubles as a "time
   until next tab" indicator. JS-created, so with JS off the tabs are simply
   click-only (no bar). */
.home-v2 .nm-tab-timer {
  position: absolute;
  left: 2.6rem;
  right: 2.6rem;
  bottom: 0.7rem;
  height: 0.3rem;
  border-radius: 999px;
  background-color: rgba(0, 59, 175, 0.16);
  overflow: hidden;
  pointer-events: none;
}
.home-v2 .nm-tab-timer__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--v2-blue);
  transform: scaleX(0);
  transform-origin: left center;
}
.home-v2 .nm-tab-timer__fill.is-running {
  animation: nm-tab-timer-fill var(--nm-tab-timer-dur, 6000ms) linear forwards;
}
@keyframes nm-tab-timer-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- Dev-API: "writing code → webhook arrives" animation -----------------
   Reveal is gated by .anim-ready (added by JS only when motion is allowed),
   so with JS off or reduced-motion the section renders fully visible. */
.home-v2 .nm-devapi__code .ln { display: block; white-space: pre; }
.home-v2 .nm-devapi__code .ln:empty { height: 1.1em; }
.home-v2 .nm-devapi__caret {
  display: none;
  width: 0.55ch;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.18em;
  background: #7aa2ff;
}
.home-v2 .nm-devapi.anim-ready .nm-devapi__caret {
  display: inline-block;
  animation: nm-caret 1s steps(1) infinite;
}
@keyframes nm-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.home-v2 .nm-devapi.anim-ready .nm-devapi__code .ln {
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.home-v2 .nm-devapi.anim-ready .nm-devapi__code .ln.is-in { opacity: 1; transform: none; }

.home-v2 .nm-devapi.anim-ready .nm-devapi__event {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.home-v2 .nm-devapi.anim-ready .nm-devapi__event.is-in { opacity: 1; transform: translateY(0) scale(1); }

/* Recharge-style inline doc link (replaces the filled button here) */
.home-v2 .nm-devapi__doclink {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.8rem;
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--v2-blue);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.5rem;
}
.home-v2 .nm-devapi__doclink svg { transition: transform 0.2s ease; }
.home-v2 .nm-devapi__doclink:hover svg { transform: translateX(4px); }

/* ==========================================================================
   10. PRODUCT BENTO — interactive four-feature showcase (home-v2 only)
   Minimal, airy, Gorgias-style. Soft rounded cards on a faint wash, generous
   whitespace, diffuse shadows, one focal mockup per card, brand logo lockups
   as headers. Mockups stay near-monochrome (ink + greys) with a whisper of
   green for success. Back in Stock plays as 3 centered steps (PDP → sign-up
   → notified), one at a time. Motion + entrance run only when JS adds
   .anim-ready / .is-in and sets [data-step]; default & reduced-motion render a
   sensible static frame.
   ========================================================================== */
/* --- Section heading: compact, sentence-case, with mono eyebrow --------- */
.home-v2 .nm-bento-intro { max-width: 62rem; margin-inline: auto; }
.home-v2 .nm-bento-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 0.4rem;
  font-family: "PT Mono", monospace;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v2-blue);
}
/* Hairline rules flanking the eyebrow give the block a deliberate, designed start. */
.home-v2 .nm-bento-eyebrow::before,
.home-v2 .nm-bento-eyebrow::after {
  content: "";
  width: clamp(1.6rem, 4vw, 3.2rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 59, 175, 0.45));
}
.home-v2 .nm-bento-eyebrow::after { transform: scaleX(-1); }

.home-v2 .big-heading-n.landing-control {
  max-width: 100%;
  margin: 0 auto;
  /* Size/leading/tracking inherited from the unified .big-heading-n scale. */
  font-weight: 500;
  text-transform: none;
  color: var(--v2-ink);
}
/* Key phrase: a richer single-direction gradient that reads as one confident
   word, not two mismatched blues. Falls back to solid blue without bg-clip. */
.home-v2 .nm-bento-grad {
  color: var(--v2-blue-bright);
  background: linear-gradient(100deg, var(--v2-blue) 8%, var(--v2-blue-bright) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-v2 .nm-bento-intro .text-blue-dark-gray {
  max-width: 42rem;
  margin: 0.4rem auto 0;
  font-size: clamp(1.6rem, 1.9vw, 1.95rem);
  line-height: 1.5;
  color: var(--v2-muted);
}
.home-v2 .nm-bento-intro .text-blue-dark-gray em {
  font-style: normal;
  font-weight: 500;
  color: var(--v2-ink);
}

.home-v2 .nm-bento {
  --b-ink: #1c1b22;
  --b-muted: #767a82;
  --b-faint: #f0f0f3;
  --b-line: #ececef;
  --b-accent: #003baf;
  --b-ok: #1f9a68;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 1.5vw, 1.8rem);
  margin-top: clamp(0.96rem, 1.44vw, 1.56rem);
}

/* --- Cell shell: soft, rounded, airy ------------------------------------ */
.home-v2 .nm-bento__cell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 42rem;
  padding: clamp(2.8rem, 3vw, 3.8rem);
  border-radius: 0;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 18px 40px -24px rgba(20, 20, 30, 0.18);
  transition: box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* A barely-there wash, brand-tinted per cell, from the lower-right. */
.home-v2 .nm-bento__cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 85% 115%, var(--cell-wash, rgba(20, 20, 30, 0.035)), transparent 62%);
}
.home-v2 .nm-bento__cell > * { position: relative; z-index: 1; }
.home-v2 .nm-bento__cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 30px 60px -28px rgba(20, 20, 30, 0.28);
}
.home-v2 .nm-bento__cell:focus-visible { outline: 2px solid var(--b-ink); outline-offset: 3px; }

/* Pinwheel placement (desktop) + per-cell wash tint. */
.home-v2 .nm-bento__cell--bis  { grid-column: 1 / 8;  --cell-wash: rgba(0, 59, 175, 0.06); }
.home-v2 .nm-bento__cell--pre  { grid-column: 8 / 13; --cell-wash: rgba(95, 208, 166, 0.10); }
.home-v2 .nm-bento__cell--low  { grid-column: 1 / 6;  --cell-wash: rgba(238, 68, 46, 0.06); }
.home-v2 .nm-bento__cell--wish { grid-column: 6 / 13; --cell-wash: rgba(155, 38, 240, 0.07); }

/* --- First bento only: random, blurred "glassy" brand glow ----------------
   The primary (first) bento — the one carrying the storefront PDP on .nm-shop —
   swaps the faint corner wash for an organic, frosted-glass glow. Each cell
   gets its OWN irregular arrangement of soft colour blobs (a little mesh
   gradient), then a heavy blur melts them into cloud-like patches — not a clean
   radial gradient. Blob positions differ per card, so no two read the same.
   Every cell keeps its service colour (blue BIS, green Preorder, purple
   Wishlist, coral Low Stock). The oversized negative inset + the cell's
   overflow:hidden keep the blurred edges clean. The duplicate bento (no
   .nm-shop) is left on the original faint corner wash. */
.home-v2 .nm-bento:has(.nm-shop) .nm-bento__cell::before {
  inset: -22%;
  filter: blur(34px);
  background-color: transparent;
  background-repeat: no-repeat;
}
.home-v2 .nm-bento:has(.nm-shop) .nm-bento__cell--bis::before {
  background-image:
    radial-gradient(38% 34% at 22% 30%, rgba(67, 128, 249, 0.18), transparent 60%),
    radial-gradient(46% 42% at 78% 18%, rgba(67, 128, 249, 0.11), transparent 62%),
    radial-gradient(55% 50% at 58% 88%, rgba(67, 128, 249, 0.21), transparent 64%),
    radial-gradient(34% 30% at 92% 72%, rgba(67, 128, 249, 0.13), transparent 60%);
}
.home-v2 .nm-bento:has(.nm-shop) .nm-bento__cell--pre::before {
  background-image:
    radial-gradient(50% 46% at 82% 24%, rgba(63, 199, 156, 0.21), transparent 62%),
    radial-gradient(40% 38% at 24% 58%, rgba(63, 199, 156, 0.13), transparent 60%),
    radial-gradient(46% 42% at 56% 96%, rgba(63, 199, 156, 0.18), transparent 64%),
    radial-gradient(30% 28% at 14% 16%, rgba(63, 199, 156, 0.11), transparent 58%);
}
.home-v2 .nm-bento:has(.nm-shop) .nm-bento__cell--wish::before {
  /* Glow kept in the top-right corner only — the bottom-left / left blobs are removed. */
  background-image:
    radial-gradient(58% 52% at 94% 6%, rgba(171, 86, 255, 0.20), transparent 64%),
    radial-gradient(40% 36% at 78% 24%, rgba(171, 86, 255, 0.13), transparent 60%);
}
.home-v2 .nm-bento:has(.nm-shop) .nm-bento__cell--low::before {
  background-image:
    radial-gradient(48% 44% at 72% 82%, rgba(255, 110, 92, 0.21), transparent 63%),
    radial-gradient(42% 38% at 24% 28%, rgba(255, 110, 92, 0.14), transparent 60%),
    radial-gradient(36% 32% at 92% 34%, rgba(255, 110, 92, 0.13), transparent 60%),
    radial-gradient(52% 48% at 42% 100%, rgba(255, 110, 92, 0.17), transparent 64%);
}

/* --- Animated duplicate (.nm-bento--drift): the blurred mesh drifts ---------
   On the third, duplicated bento only, the pre-blurred glow layer drifts on a
   very slow, calm loop — barely perceptible, just enough to feel alive. We
   animate ONLY the transform of the already-blurred ::before (no filter/layout
   animation), so the browser caches the blur as a texture and just nudges it —
   cheap and smooth. The oversized inset (-22%) hides the travel at the edges.
   Each card runs its own duration/phase/direction so they never move in sync.
   Gated on no-preference; under reduced motion the mesh sits perfectly still. */
@media (prefers-reduced-motion: no-preference) {
  .home-v2 .nm-bento--drift .nm-bento__cell::before {
    will-change: transform;
    animation: nm-bento-drift 22s ease-in-out infinite;
  }
  .home-v2 .nm-bento--drift .nm-bento__cell--bis::before  { animation-duration: 23s; animation-delay: -3s; }
  .home-v2 .nm-bento--drift .nm-bento__cell--pre::before  { animation-duration: 19s; animation-delay: -8s; animation-direction: reverse; }
  .home-v2 .nm-bento--drift .nm-bento__cell--wish::before { animation-duration: 26s; animation-delay: -5s; }
  .home-v2 .nm-bento--drift .nm-bento__cell--low::before  { animation-duration: 21s; animation-delay: -12s; animation-direction: reverse; }
}
@keyframes nm-bento-drift {
  0%   { transform: translate3d(0%, 0%, 0) scale(1.03); }
  25%  { transform: translate3d(3.4%, -2.6%, 0) scale(1.08); }
  50%  { transform: translate3d(-3%, 3%, 0) scale(1.05); }
  75%  { transform: translate3d(2.4%, 2.2%, 0) scale(1.085); }
  100% { transform: translate3d(0%, 0%, 0) scale(1.03); }
}

/* --- Header: benefit line on the left + brand logo lockup on the right --- */
.home-v2 .nm-bento__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
/* Real brand lockup (icon + wordmark), pinned to the card's top-right. */
.home-v2 .nm-bento__logo { flex: none; height: 3.4rem; width: auto; }
.home-v2 .nm-bento__title {
  margin: 0;
  font-family: var(--v2-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 2.2vw, 2.8rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--b-ink);
  text-wrap: balance;
  min-width: 0;
  max-width: 22ch;
}
.home-v2 .nm-bento__more {
  margin-top: auto;
  padding-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--b-accent);
}
.home-v2 .nm-bento__more svg { width: 1.5rem; height: 1.5rem; transition: transform 0.25s ease; }
.home-v2 .nm-bento__cell:hover .nm-bento__more svg { transform: translateX(4px); }

/* --- Stage: one focal mockup, centered ---------------------------------- */
.home-v2 .nm-bento__stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 17rem;
  margin: clamp(2.66rem, 3.15vw, 3.63rem) 0 0.6rem;
}

/* Shared mini-UI card: white, soft shadow, generous padding, rounded. */
.home-v2 .nm-bis__step,
.home-v2 .nm-pre__pdp,
.home-v2 .nm-wish__pdp,
.home-v2 .nm-low__pdp {
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.05);
  border-radius: 1.6rem;
  box-shadow: 0 14px 36px -18px rgba(20, 20, 30, 0.3);
}
.home-v2 .nm-bis__img,
.home-v2 .nm-pre__img,
.home-v2 .nm-wish__img,
.home-v2 .nm-low__img { background: var(--b-faint); border-radius: 1.1rem; display: block; }
.home-v2 .nm-bis__name, .home-v2 .nm-pre__name, .home-v2 .nm-wish__name, .home-v2 .nm-low__name {
  font-weight: 500; font-size: 1.5rem; color: var(--b-ink);
}
.home-v2 .nm-bis__price, .home-v2 .nm-pre__price, .home-v2 .nm-wish__price, .home-v2 .nm-low__price {
  font-size: 1.4rem; color: var(--b-muted);
}
.home-v2 .nm-bis__row, .home-v2 .nm-pre__row, .home-v2 .nm-wish__row, .home-v2 .nm-low__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}

/* ========== 1 · BACK IN STOCK — 3 centered steps ======================== */
.home-v2 .nm-bis { width: 100%; }
.home-v2 .nm-bis__step {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(28rem, 86%);
  padding: 1.8rem;
  transform: translate(-50%, calc(-50% + 10px));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.55s;
}
/* default static frame = step 1 (PDP). [data-step] takes over when JS runs. */
.home-v2 .nm-bis .nm-bis__pdp { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.home-v2 .nm-bis[data-step] .nm-bis__pdp { opacity: 0; visibility: hidden; transform: translate(-50%, calc(-50% - 10px)); }
.home-v2 .nm-bis[data-step="1"] .nm-bis__pdp,
.home-v2 .nm-bis[data-step="2"] .nm-bis__form,
.home-v2 .nm-bis[data-step="3"] .nm-bis__sms {
  opacity: 1; visibility: visible; transform: translate(-50%, -50%);
}

/* Step 1 — product page */
.home-v2 .nm-bis__img { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 1.4rem; }
.home-v2 .nm-bis__soldout {
  display: block; margin-top: 1.4rem; padding: 1rem; border-radius: 1rem;
  background: var(--b-faint); color: var(--b-muted); font-size: 1.35rem; font-weight: 500; text-align: center;
}
.home-v2 .nm-bis__notify {
  position: relative; display: block; margin-top: 0.8rem; padding: 1.1rem;
  border-radius: 1rem; background: var(--b-ink); color: #fff; font-size: 1.35rem; font-weight: 500; text-align: center;
}
.home-v2 .nm-bis__cursor {
  position: absolute; width: 2.1rem; height: 2.1rem; right: 1.6rem; bottom: -0.9rem;
  opacity: 0; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}
.home-v2 .nm-bis[data-step="1"] .nm-bis__cursor { opacity: 1; animation: nm-bis-tap 1.4s ease-in-out; }
@keyframes nm-bis-tap { 0%, 100% { transform: translate(0, 0); } 55% { transform: translate(-2px, -3px); } 70% { transform: translate(0, 0) scale(0.82); } }

/* Step 2 — sign-up form */
.home-v2 .nm-bis__form { display: flex; flex-direction: column; gap: 0.8rem; }
.home-v2 .nm-bis__form-h { font-weight: 500; font-size: 1.5rem; color: var(--b-ink); margin-bottom: 0.3rem; }
.home-v2 .nm-bis__input {
  padding: 1rem 1.1rem; border: 1px solid var(--b-line); border-radius: 1rem;
  font-size: 1.35rem; color: var(--b-ink); background: #fff;
}
.home-v2 .nm-bis__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.home-v2 .nm-bis__chip {
  padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--b-line);
  font-size: 1.2rem; font-weight: 500; color: var(--b-muted); background: #fff;
}
.home-v2 .nm-bis__chip.is-on { background: var(--b-ink); border-color: var(--b-ink); color: #fff; }
.home-v2 .nm-bis__submit {
  margin-top: 0.6rem; padding: 1.05rem; border-radius: 1rem; background: var(--b-ink);
  color: #fff; font-size: 1.35rem; font-weight: 500; text-align: center;
}

/* Step 3 — notified (SMS) */
.home-v2 .nm-bis__sms { display: flex; align-items: flex-start; gap: 1rem; }
.home-v2 .nm-bis__sms-dot { flex: none; width: 0.9rem; height: 0.9rem; margin-top: 0.5rem; border-radius: 50%; background: var(--b-ok); }
.home-v2 .nm-bis__sms-from { display: block; font-size: 1.2rem; color: var(--b-muted); margin-bottom: 0.3rem; }
.home-v2 .nm-bis__sms-text { display: block; font-size: 1.4rem; line-height: 1.45; color: var(--b-ink); }

/* ========== 1b - BACK IN STOCK - storefront scenes (Shop-style) ===========
   The first bento's Back-in-Stock card runs a story inside ONE constant-size
   frame (.nm-shop__frame never changes size => nothing shifts): sold-out PDP ->
   sign-up modal -> phone lock screen (SMS arrives after a beat) -> tap the
   notification -> "Order placed!". Corners: frames are rounded; ALL inner UI
   shares one MINIMAL radius (--shop-r); the product photo is intentionally
   sharp. A click is shown by pressing (de-scaling) the tapped control. Scoped
   to .nm-shop so the duplicated bento (.nm-bis) is untouched. ================ */
.home-v2 .nm-bento__cell--bis:has(.nm-shop) { min-height: 44rem; }
/* Compact chrome so the redesigned bento cards sit ~20% shorter. */
.home-v2 .nm-bento:has(.nm-shop) .nm-bento__cell { padding: clamp(1.8rem, 2vw, 2.4rem); }
.home-v2 .nm-bento:has(.nm-shop) .nm-bento__stage { margin: clamp(0.97rem, 1.33vw, 1.45rem) 0 0.5rem; }
.home-v2 .nm-bento:has(.nm-shop) .nm-bento__more { padding-top: 1.1rem; }
.home-v2 .nm-shop {
  --shop-r: 0.6rem;
  position: relative; width: 100%;
}
.home-v2 .nm-shop::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -14% -10%;
  background: radial-gradient(56% 50% at 50% 40%, rgba(67, 128, 249, 0.18), rgba(67, 128, 249, 0) 70%);
  filter: blur(28px);
}
.home-v2 .nm-shop__frame {
  position: relative; z-index: 1;
  width: min(27rem, 94%); height: 30rem;
}
.home-v2 .nm-shop__pdp,
.home-v2 .nm-shop__lock,
.home-v2 .nm-shop__done {
  position: absolute; inset: 0;
  transition: opacity 0.45s ease, visibility 0.45s;
}

/* --- Scene 1 - storefront PDP (rounded frame; sharp photo) --------------- */
.home-v2 .nm-shop__pdp {
  z-index: 1;
  padding: 1.7rem 1.7rem 1.9rem;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.06);
  border-radius: 1.8rem;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 22px 48px -22px rgba(20, 20, 30, 0.34);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.home-v2 .nm-shop[data-shop="lock"] .nm-shop__pdp,
.home-v2 .nm-shop[data-shop="lockn"] .nm-shop__pdp,
.home-v2 .nm-shop[data-shop="tapN"] .nm-shop__pdp,
.home-v2 .nm-shop[data-shop="done"] .nm-shop__pdp { opacity: 0; visibility: hidden; }
.home-v2 .nm-shop__brand {
  font-family: var(--v2-display); font-weight: 500; font-size: 1.05rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-ink);
  text-align: center; margin-bottom: 1.5rem;
}
.home-v2 .nm-shop__photo {
  display: block; overflow: hidden; border-radius: 0;
  background: var(--b-faint); aspect-ratio: 2.5 / 1;
}
.home-v2 .nm-shop__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.home-v2 .nm-shop__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.7rem; }
.home-v2 .nm-shop__name { font-weight: 500; font-size: 1.3rem; color: var(--b-ink); }
.home-v2 .nm-shop__price { font-size: 1.25rem; color: var(--b-ink); }
.home-v2 .nm-shop__soldout {
  display: block; margin-top: auto; padding: 0.85rem 1rem; border-radius: var(--shop-r);
  background: var(--b-faint); color: var(--b-muted); font-size: 1.1rem; font-weight: 500;
  text-align: center; cursor: not-allowed;
}
.home-v2 .nm-shop__notify {
  display: block; margin-top: 0.6rem; padding: 0.85rem 1rem; border-radius: var(--shop-r);
  background: var(--b-ink); color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center;
}
.home-v2 .nm-shop[data-shop="tapA"] .nm-shop__notify { animation: nm-shop-press 0.34s ease; }

/* --- Sign-up modal: centered dialog over the dimmed PDP ------------------ */
.home-v2 .nm-shop__scrim {
  position: absolute; inset: 0; z-index: 2; background: rgba(18, 17, 28, 0.45);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s;
}
.home-v2 .nm-shop__modal {
  position: absolute; z-index: 3; left: 1.4rem; right: 1.4rem; top: 50%;
  padding: 1.7rem; background: #fff; border-radius: 1.3rem;
  box-shadow: 0 24px 50px -16px rgba(20, 20, 30, 0.5);
  display: flex; flex-direction: column; gap: 0.95rem;
  opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 14px));
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s;
}
.home-v2 .nm-shop[data-shop="form"] .nm-shop__scrim,
.home-v2 .nm-shop[data-shop="tapB"] .nm-shop__scrim { opacity: 1; visibility: visible; }
.home-v2 .nm-shop[data-shop="form"] .nm-shop__modal,
.home-v2 .nm-shop[data-shop="tapB"] .nm-shop__modal { opacity: 1; visibility: visible; transform: translateY(-50%); }
.home-v2 .nm-shop__modal-h { font-weight: 500; font-size: 1.2rem; color: var(--b-ink); margin-bottom: 0.1rem; padding-right: 2rem; }
.home-v2 .nm-shop__modal-close {
  position: absolute; top: 1.3rem; right: 1.3rem; width: 1.7rem; height: 1.7rem;
  color: var(--b-muted); display: flex; align-items: center; justify-content: center;
}
.home-v2 .nm-shop__modal-close svg { width: 100%; height: 100%; }
.home-v2 .nm-shop__field {
  padding: 0.65rem 1rem; border: 1px solid var(--b-line); border-radius: var(--shop-r);
  font-size: 1.1rem; color: var(--b-ink); background: #fff;
}
.home-v2 .nm-shop__chips { display: flex; flex-wrap: nowrap; gap: 0.45rem; margin-top: 0.1rem; }
.home-v2 .nm-shop__chip {
  flex: 0 1 auto; padding: 0.38rem 0.8rem; border-radius: var(--shop-r);
  border: 1px solid var(--b-line); font-size: 0.95rem; font-weight: 500; color: var(--b-muted);
  background: #fff; white-space: nowrap; text-align: center;
}
.home-v2 .nm-shop__chip.is-on { background: var(--b-ink); border-color: var(--b-ink); color: #fff; }
.home-v2 .nm-shop__submit {
  margin-top: 0.5rem; padding: 0.8rem 1rem; border-radius: var(--shop-r);
  background: var(--v2-blue); color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center;
}
.home-v2 .nm-shop[data-shop="tapB"] .nm-shop__submit { animation: nm-shop-press 0.34s ease; }

/* --- Scene 2 - phone lock screen ----------------------------------------- */
.home-v2 .nm-shop__lock {
  z-index: 0; padding: 2.2rem 1.7rem;
  border-radius: 1.8rem;
  background: linear-gradient(165deg, #20222e 0%, #12111c 72%);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; visibility: hidden;
}
.home-v2 .nm-shop[data-shop="lock"] .nm-shop__lock,
.home-v2 .nm-shop[data-shop="lockn"] .nm-shop__lock,
.home-v2 .nm-shop[data-shop="tapN"] .nm-shop__lock { opacity: 1; visibility: visible; }
.home-v2 .nm-shop__lock-clock { text-align: center; color: #fff; margin-top: 2rem; }
.home-v2 .nm-shop__lock-time {
  display: block; font-family: var(--v2-display); font-weight: 300;
  font-size: 5rem; line-height: 1; letter-spacing: -0.01em;
}
.home-v2 .nm-shop__lock-date { display: block; margin-top: 0.6rem; font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); }
.home-v2 .nm-shop__notif {
  margin-top: auto; width: 100%; display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.2rem; border-radius: var(--shop-r);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px -16px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-v2 .nm-shop[data-shop="lockn"] .nm-shop__notif,
.home-v2 .nm-shop[data-shop="tapN"] .nm-shop__notif { opacity: 1; transform: translateY(0); }
.home-v2 .nm-shop[data-shop="tapN"] .nm-shop__notif { animation: nm-shop-press 0.34s ease; }
.home-v2 .nm-shop__notif-ico {
  flex: none; width: 3.4rem; height: 3.4rem; border-radius: var(--shop-r);
  background: var(--v2-blue); display: flex; align-items: center; justify-content: center;
}
.home-v2 .nm-shop__notif-ico img { width: 2rem; height: 2rem; }
.home-v2 .nm-shop__notif-body { min-width: 0; flex: 1; }
.home-v2 .nm-shop__notif-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.home-v2 .nm-shop__notif-app { font-weight: 600; font-size: 1.1rem; color: var(--b-ink); }
.home-v2 .nm-shop__notif-time { font-size: 1rem; color: var(--b-muted); }
.home-v2 .nm-shop__notif-text { display: block; margin-top: 0.3rem; font-size: 1.1rem; line-height: 1.45; color: var(--b-ink); }

/* --- Scene 3 - "Order placed!" confirmation ------------------------------ */
.home-v2 .nm-shop__done {
  z-index: 1;
  padding: 2.4rem 1.8rem;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.06);
  border-radius: 1.8rem;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 22px 48px -22px rgba(20, 20, 30, 0.34);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  opacity: 0; visibility: hidden;
}
.home-v2 .nm-shop[data-shop="done"] .nm-shop__done { opacity: 1; visibility: visible; }
.home-v2 .nm-shop__done-check {
  width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--b-ok);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;
}
.home-v2 .nm-shop__done-check svg { width: 2.3rem; height: 2.3rem; }
.home-v2 .nm-shop[data-shop="done"] .nm-shop__done-check { animation: nm-shop-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.home-v2 .nm-shop__done-h { font-family: var(--v2-display); font-weight: 500; font-size: 1.9rem; color: var(--b-ink); }
.home-v2 .nm-shop__done-sub { margin-top: 0.6rem; font-size: 1.1rem; color: var(--b-muted); }

/* --- Click = press (de-scale); confirmation pop; no cursor -------------- */
@keyframes nm-shop-press { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.95); } }
@keyframes nm-shop-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Reduced motion / JS off: hold the static sold-out PDP only. */
@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-shop__scrim,
  .home-v2 .nm-shop__modal,
  .home-v2 .nm-shop__lock,
  .home-v2 .nm-shop__done { display: none; }
}

/* ========== 2b · PREORDER — storefront scenes (Shop-style) ================
   The first bento's Preorder card runs a 3-scene story inside ONE constant-
   size frame (.nm-preshop__frame never changes size => nothing shifts): a PDP
   with a Pre-order button + delivery details -> a checkout showing the 50%
   deposit-today / 50% before-shipment split -> "Preorder confirmed · Arrives
   by Apr 18". Corners match .nm-shop: the frame is rounded; inner UI shares one
   MINIMAL radius (--pre-r); the product photo is intentionally sharp. A click
   presses (de-scales) the tapped control (reusing nm-shop-press / nm-shop-pop).
   The story plays only while the card is hovered/focused (driver in the bento
   IIFE) — no idle loop. New root (.nm-preshop) so the duplicated second bento's
   legacy .nm-pre is left untouched. ===================================== */
.home-v2 .nm-bento__cell--pre:has(.nm-preshop) { min-height: 44rem; }
.home-v2 .nm-preshop {
  --pre-r: 0.6rem;
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.home-v2 .nm-preshop::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -14% -10%;
  background: radial-gradient(56% 50% at 50% 42%, rgba(63, 199, 156, 0.20), rgba(63, 199, 156, 0) 70%);
  filter: blur(28px);
}
/* One fixed frame for all three scenes — a touch narrower than its cell so the
   card keeps real breathing room on either side. Scenes lay their content out
   on a single, even spacing rhythm and sit vertically centred — never stretched
   to the edges. */
.home-v2 .nm-preshop__frame {
  position: relative; z-index: 1;
  width: min(24rem, 88%); height: 27rem;
}
.home-v2 .nm-preshop__pdp,
.home-v2 .nm-preshop__checkout,
.home-v2 .nm-preshop__done {
  position: absolute; inset: 0;
  transition: opacity 0.45s ease, visibility 0.45s;
}

/* --- Scene 1 - PDP (rounded frame; sharp photo) ------------------------- */
.home-v2 .nm-preshop__pdp {
  z-index: 1;
  padding: 1.7rem;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.06);
  border-radius: 1.8rem;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 22px 48px -22px rgba(20, 20, 30, 0.34);
  display: flex; flex-direction: column; justify-content: center; gap: 1.15rem;
  overflow: hidden;
}
.home-v2 .nm-preshop[data-pshop="checkout"] .nm-preshop__pdp,
.home-v2 .nm-preshop[data-pshop="tapB"] .nm-preshop__pdp,
.home-v2 .nm-preshop[data-pshop="done"] .nm-preshop__pdp { opacity: 0; visibility: hidden; }
.home-v2 .nm-preshop__brand {
  font-family: var(--v2-display); font-weight: 500; font-size: 1.05rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-ink);
  text-align: center;
}
.home-v2 .nm-preshop__photo {
  display: block; overflow: hidden; border-radius: 0;
  background: var(--b-faint); aspect-ratio: 2.5 / 1;
}
.home-v2 .nm-preshop__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.home-v2 .nm-preshop__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.home-v2 .nm-preshop__name { font-weight: 500; font-size: 1.3rem; color: var(--b-ink); }
.home-v2 .nm-preshop__price { font-size: 1.25rem; color: var(--b-ink); }
/* Delivery details, given some eye-catch: a brand-green icon tile + a two-line
   promise, sitting on a soft tinted chip (echoes the BIS "Sold out" pill slot). */
.home-v2 .nm-preshop__ship {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 0.85rem; border-radius: var(--pre-r);
  background: rgba(31, 154, 104, 0.08);
}
.home-v2 .nm-preshop__ship-ico {
  flex: none; display: flex; align-items: center; justify-content: center; color: var(--b-ok);
}
.home-v2 .nm-preshop__ship-ico svg { width: 1.7rem; height: 1.7rem; }
.home-v2 .nm-preshop__ship-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; line-height: 1.2; }
.home-v2 .nm-preshop__ship-main { font-size: 1.05rem; font-weight: 500; color: var(--b-ink); }
.home-v2 .nm-preshop__ship-sub { font-size: 0.92rem; font-weight: 500; color: var(--b-ok); }
.home-v2 .nm-preshop__btn {
  display: block; padding: 0.85rem 1rem; border-radius: var(--pre-r);
  background: var(--b-ink); color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center;
}
.home-v2 .nm-preshop[data-pshop="tapA"] .nm-preshop__btn { animation: nm-shop-press 0.34s ease; }

/* --- Scene 2 - checkout: the 50% / 50% deposit split -------------------- */
.home-v2 .nm-preshop__checkout {
  z-index: 2;
  padding: 1.7rem;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.06);
  border-radius: 1.8rem;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 22px 48px -22px rgba(20, 20, 30, 0.34);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s;
}
.home-v2 .nm-preshop[data-pshop="checkout"] .nm-preshop__checkout,
.home-v2 .nm-preshop[data-pshop="tapB"] .nm-preshop__checkout { opacity: 1; visibility: visible; transform: translateY(0); }
.home-v2 .nm-preshop__co-h {
  font-family: var(--v2-display); font-weight: 500; font-size: 1.05rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-ink);
  text-align: center; margin-bottom: 1.2rem;
}
/* Invoice-style order summary: a quiet list of receipt rows — NOT bordered
   "option" cards. Line items, then the order total, then the payment schedule
   with the 50% deposit as the focal row (green, bolder, larger amount), and a
   single saved Mastercard chip below. */
.home-v2 .nm-preshop__inv { display: flex; flex-direction: column; gap: 0.55rem; }
.home-v2 .nm-preshop__inv-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: 1.05rem; color: var(--b-muted);
}
.home-v2 .nm-preshop__inv-val { color: var(--b-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-v2 .nm-preshop__inv-row:first-child { color: var(--b-ink); }
.home-v2 .nm-preshop__inv-row:first-child .nm-preshop__inv-label { font-weight: 500; }
.home-v2 .nm-preshop__inv-row--due {
  margin-top: 0.45rem; padding-top: 0.85rem; border-top: 1px solid var(--b-line);
  align-items: center; color: var(--b-ink); font-weight: 500;
}
.home-v2 .nm-preshop__inv-row--due .nm-preshop__inv-label { display: inline-flex; align-items: center; }
.home-v2 .nm-preshop__inv-row--due .nm-preshop__inv-val { color: var(--b-ok); font-weight: 600; font-size: 1.3rem; }
/* Minimal status pill: line-height:1 so the box hugs the text (otherwise the
   inherited line-height inflates its height), horizontal padding > vertical,
   modest radius — compact, never a chunky stadium. */
.home-v2 .nm-preshop__inv-tag {
  display: inline-flex; align-items: center;
  margin-left: 0.5rem; padding: 0.18rem 0.45rem; border-radius: 0.4rem;
  background: rgba(31, 154, 104, 0.12); color: var(--b-ok);
  font-size: 0.78rem; font-weight: 600; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase;
}
/* Saved payment method — a single chip (one item, so it can't read as a choice) */
.home-v2 .nm-preshop__card {
  display: flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem;
  padding: 0.7rem 0.85rem; border-radius: var(--pre-r); border: 1px solid var(--b-line);
}
.home-v2 .nm-preshop__card-mc { position: relative; flex: none; width: 2.6rem; height: 1.6rem; }
.home-v2 .nm-preshop__card-mc i { position: absolute; top: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.home-v2 .nm-preshop__card-mc i:first-child { left: 0; background: #eb001b; }
.home-v2 .nm-preshop__card-mc i:last-child { right: 0; background: #f79e1b; mix-blend-mode: multiply; }
.home-v2 .nm-preshop__card-txt { flex: 1; font-size: 1.05rem; font-weight: 500; color: var(--b-ink); letter-spacing: 0.02em; }
.home-v2 .nm-preshop__card-tag { flex: none; font-size: 0.9rem; color: var(--b-muted); }
.home-v2 .nm-preshop__pay {
  margin-top: 1.2rem; padding: 0.85rem 1rem; border-radius: var(--pre-r);
  background: var(--b-ink); color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center;
}
.home-v2 .nm-preshop[data-pshop="tapB"] .nm-preshop__pay { animation: nm-shop-press 0.34s ease; }

/* --- Scene 3 - "Preorder confirmed" ------------------------------------ */
.home-v2 .nm-preshop__done {
  z-index: 3;
  padding: 2.4rem 1.8rem;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.06);
  border-radius: 1.8rem;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 22px 48px -22px rgba(20, 20, 30, 0.34);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  opacity: 0; visibility: hidden;
}
.home-v2 .nm-preshop[data-pshop="done"] .nm-preshop__done { opacity: 1; visibility: visible; }
.home-v2 .nm-preshop__done-check {
  width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--b-ok);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;
}
.home-v2 .nm-preshop__done-check svg { width: 2.3rem; height: 2.3rem; }
.home-v2 .nm-preshop[data-pshop="done"] .nm-preshop__done-check { animation: nm-shop-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.home-v2 .nm-preshop__done-h { font-family: var(--v2-display); font-weight: 500; font-size: 1.9rem; color: var(--b-ink); }
.home-v2 .nm-preshop__done-sub { margin-top: 0.6rem; font-size: 1.15rem; color: var(--b-muted); }

/* Reduced motion / JS off: hold the static Pre-order PDP only. */
@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-preshop__checkout,
  .home-v2 .nm-preshop__done { display: none; }
}

/* ========== 2 · PREORDER ================================================ */
.home-v2 .nm-pre__pdp { position: relative; width: min(28rem, 96%); padding: 1.8rem; }
.home-v2 .nm-pre__img { width: 100%; aspect-ratio: 5 / 3; margin-bottom: 1.4rem; }
.home-v2 .nm-pre__row { margin-bottom: 1.2rem; }
.home-v2 .nm-pre__btn {
  display: block; padding: 1.05rem; border-radius: 1rem; background: var(--b-ink);
  color: #fff; font-size: 1.35rem; font-weight: 500; text-align: center;
}
.home-v2 .nm-pre__ships { display: block; margin-top: 0.9rem; font-size: 1.25rem; color: var(--b-muted); text-align: center; }
.home-v2 .nm-pre__ok {
  position: absolute; left: 1.8rem; right: 1.8rem; bottom: 1.8rem; padding: 1.05rem;
  border-radius: 1rem; background: rgba(31, 154, 104, 0.1); color: var(--b-ok);
  font-size: 1.3rem; font-weight: 500; text-align: center; opacity: 0;
}
/* The first bento's Preorder card is now the .nm-preshop storefront story
   (above). This legacy .nm-pre survives only in the duplicated second bento,
   which stays static (it never receives .anim-ready), so no ambient loop runs. */

/* ========== 3b · WISHLIST — storefront scenes (Shop-style) ================
   The Wishlist card runs a 3-scene story inside ONE constant-size frame
   (.nm-wishshop__frame never changes size => nothing shifts): a PDP with an
   "Add to cart" primary + a ghost "Add to wishlist" (its heart fills red on
   tap) -> a price-drop email "Your wishlisted item is on sale" with a "Buy it
   now" button -> "Order placed!". Corners match .nm-shop: the frame is rounded;
   inner UI shares one MINIMAL radius (--wish-r); the product photo is
   intentionally sharp. A click presses (de-scales) the tapped control (reusing
   nm-shop-press / nm-shop-pop). The story plays only while the card is hovered/
   focused (driver in the bento IIFE) — no idle loop. New root (.nm-wishshop). */
.home-v2 .nm-bento__cell--wish:has(.nm-wishshop) { min-height: 44rem; }
.home-v2 .nm-wishshop {
  --wish-r: 0.6rem;
  --wish-red: #e11d48;
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.home-v2 .nm-wishshop::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -14% -10%;
  background: radial-gradient(56% 50% at 50% 42%, rgba(155, 38, 240, 0.18), rgba(155, 38, 240, 0) 70%);
  filter: blur(28px);
}
.home-v2 .nm-wishshop__frame {
  position: relative; z-index: 1;
  width: min(27rem, 94%); height: 31rem;
}
.home-v2 .nm-wishshop__pdp,
.home-v2 .nm-wishshop__email,
.home-v2 .nm-wishshop__done {
  position: absolute; inset: 0;
  transition: opacity 0.45s ease, visibility 0.45s;
}

/* --- Scene 1 - PDP: Add to cart + ghost Add to wishlist ----------------- */
.home-v2 .nm-wishshop__pdp {
  z-index: 1;
  padding: 1.7rem;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.06);
  border-radius: 1.8rem;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 22px 48px -22px rgba(20, 20, 30, 0.34);
  display: flex; flex-direction: column; gap: 1.15rem;
  overflow: hidden;
}
.home-v2 .nm-wishshop[data-wshop="email"] .nm-wishshop__pdp,
.home-v2 .nm-wishshop[data-wshop="tapB"] .nm-wishshop__pdp,
.home-v2 .nm-wishshop[data-wshop="done"] .nm-wishshop__pdp { opacity: 0; visibility: hidden; }
/* Store wordmark at the top of the scene — same treatment as the other cards
   (.nm-shop__brand "Maison Stella" / .nm-preshop__brand "Lune Atelier"). */
.home-v2 .nm-wishshop__brand {
  font-family: var(--v2-display); font-weight: 500; font-size: 1.05rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-ink);
  text-align: center;
}
.home-v2 .nm-wishshop__photo {
  display: block; overflow: hidden; border-radius: 0;
  background: var(--b-faint); aspect-ratio: 2.5 / 1;
}
.home-v2 .nm-wishshop__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
.home-v2 .nm-wishshop__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.home-v2 .nm-wishshop__name { font-weight: 500; font-size: 1.3rem; color: var(--b-ink); }
.home-v2 .nm-wishshop__price { font-size: 1.25rem; color: var(--b-ink); }
/* One button size across the whole story (matches .nm-shop__notify). */
.home-v2 .nm-wishshop__cart,
.home-v2 .nm-wishshop__wish,
.home-v2 .nm-wishshop__buy {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1rem; border: 1px solid transparent; border-radius: var(--wish-r);
  font-size: 1.1rem; font-weight: 500; text-align: center;
}
/* Push the button group to the bottom so the brand logo sits at the very top. */
.home-v2 .nm-wishshop__cart { margin-top: auto; background: var(--b-ink); color: #fff; }
/* Ghost button: no fill, ink text + a visible border and a leading heart. */
.home-v2 .nm-wishshop__wish {
  margin-top: -0.35rem; background: #fff; color: var(--b-ink);
  border-color: var(--b-line);
}
.home-v2 .nm-wishshop__heart { flex: none; display: inline-flex; }
.home-v2 .nm-wishshop__heart svg { width: 1.35rem; height: 1.35rem; }
.home-v2 .nm-wishshop__heart svg path {
  fill: transparent; stroke: var(--b-ink); stroke-width: 1.7;
  transition: fill 0.4s ease, stroke 0.4s ease;
}
/* Tap "Add to wishlist": press the control; the heart fills red and stays
   saved through the rest of the story. */
.home-v2 .nm-wishshop[data-wshop="tapW"] .nm-wishshop__wish { animation: nm-shop-press 0.34s ease; }
.home-v2 .nm-wishshop[data-wshop="tapW"] .nm-wishshop__heart svg path,
.home-v2 .nm-wishshop[data-wshop="email"] .nm-wishshop__heart svg path,
.home-v2 .nm-wishshop[data-wshop="tapB"] .nm-wishshop__heart svg path,
.home-v2 .nm-wishshop[data-wshop="done"] .nm-wishshop__heart svg path {
  fill: var(--wish-red); stroke: var(--wish-red);
}
.home-v2 .nm-wishshop[data-wshop="tapW"] .nm-wishshop__heart { animation: nm-shop-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

/* --- Scene 2 - price-drop email ----------------------------------------- */
.home-v2 .nm-wishshop__email {
  z-index: 2;
  padding: 1.7rem;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.06);
  border-radius: 1.8rem;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 22px 48px -22px rgba(20, 20, 30, 0.34);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 1.15rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s;
}
.home-v2 .nm-wishshop[data-wshop="email"] .nm-wishshop__email,
.home-v2 .nm-wishshop[data-wshop="tapB"] .nm-wishshop__email,
.home-v2 .nm-wishshop[data-wshop="done"] .nm-wishshop__email { opacity: 1; visibility: visible; transform: translateY(0); }
/* Email-client header: From / To / Subject fields, label + value per row, on a
   tinted slip with a divider below — reads unmistakably as an opened email. */
.home-v2 .nm-wishshop__mail-head {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin: -0.2rem -0.2rem 0.2rem; padding: 0.85rem 0.95rem;
  background: var(--b-faint); border-radius: var(--wish-r);
}
.home-v2 .nm-wishshop__mail-field {
  display: flex; align-items: baseline; gap: 0.55rem;
  font-size: 1rem; line-height: 1.25;
}
.home-v2 .nm-wishshop__mail-k {
  flex: none; width: 4.8rem; color: var(--b-muted);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.home-v2 .nm-wishshop__mail-v {
  min-width: 0; color: var(--b-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-v2 .nm-wishshop__mail-subj { font-weight: 600; }
/* Extra breathing room between the alert header and the email title. */
.home-v2 .nm-wishshop__mail-h {
  margin-top: 0.7rem;
  font-family: var(--v2-display); font-weight: 500; font-size: 1.45rem;
  line-height: 1.2; color: var(--b-ink);
}
/* Product strip: a sharp thumbnail + name + was/now price and a sale pill. */
.home-v2 .nm-wishshop__mail-prod { display: flex; align-items: center; gap: 0.85rem; }
.home-v2 .nm-wishshop__mail-thumb {
  flex: none; width: 4.4rem; height: 4.4rem; overflow: hidden; border-radius: 0; background: var(--b-faint);
}
.home-v2 .nm-wishshop__mail-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
.home-v2 .nm-wishshop__mail-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.home-v2 .nm-wishshop__mail-name { font-size: 1.1rem; font-weight: 500; color: var(--b-ink); }
.home-v2 .nm-wishshop__mail-prices { display: flex; align-items: center; gap: 0.5rem; }
.home-v2 .nm-wishshop__was { font-size: 1.05rem; color: var(--b-muted); text-decoration: line-through; }
.home-v2 .nm-wishshop__now { font-size: 1.25rem; font-weight: 600; color: var(--wish-red); font-variant-numeric: tabular-nums; }
/* Minimal sale pill: line-height:1 so the box hugs the text. */
.home-v2 .nm-wishshop__sale {
  display: inline-flex; align-items: center;
  padding: 0.18rem 0.45rem; border-radius: 0.4rem;
  background: rgba(225, 29, 72, 0.1); color: var(--wish-red);
  font-size: 0.78rem; font-weight: 600; line-height: 1; letter-spacing: 0.04em;
}
/* Buy it now sits at the bottom of the email; on tap (data-wshop="done") it
   turns green and swaps its label to "Order placed!" in place — no extra scene. */
.home-v2 .nm-wishshop__buy {
  margin-top: auto; background: var(--b-ink); color: #fff;
  transition: background-color 0.35s ease;
}
.home-v2 .nm-wishshop[data-wshop="tapB"] .nm-wishshop__buy { animation: nm-shop-press 0.34s ease; }
.home-v2 .nm-wishshop__buy-default { display: inline-flex; align-items: center; }
.home-v2 .nm-wishshop__buy-placed { display: none; align-items: center; gap: 0.4rem; }
.home-v2 .nm-wishshop__buy-placed svg { width: 1.35rem; height: 1.35rem; }
.home-v2 .nm-wishshop[data-wshop="done"] .nm-wishshop__buy { background: var(--b-ok); }
.home-v2 .nm-wishshop[data-wshop="done"] .nm-wishshop__buy-default { display: none; }
.home-v2 .nm-wishshop[data-wshop="done"] .nm-wishshop__buy-placed { display: inline-flex; }
.home-v2 .nm-wishshop[data-wshop="done"] .nm-wishshop__buy-placed svg { animation: nm-shop-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

/* Reduced motion / JS off: hold the static PDP only (email hidden). */
@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-wishshop__email { display: none; }
}

/* ========== 4 · LOW STOCK — storefront scene (Shop-style, single scene) ====
   The Low Stock card holds ONE storefront PDP inside a fixed-size frame
   (.nm-lowshop__frame): Atari brand logo, product photo (sharp), name + price,
   an "Add to cart" primary, and an "Only 3 left in stock" scarcity line whose
   red dot blinks while the card is hovered/focused. Single scene => no scene
   swap; the dot blink is the only motion (gated to hover/focus behind
   no-preference, so reduced motion / JS off renders a static PDP). Corners match
   .nm-shop: rounded frame, one MINIMAL inner radius (--low-r), the product photo
   intentionally sharp. New root (.nm-lowshop). ========================= */
.home-v2 .nm-bento__cell--low:has(.nm-lowshop) { min-height: 44rem; }
.home-v2 .nm-lowshop {
  --low-r: 0.6rem;
  --low-red: #ee442e;
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.home-v2 .nm-lowshop::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -14% -10%;
  background: radial-gradient(56% 50% at 50% 42%, rgba(238, 68, 46, 0.16), rgba(238, 68, 46, 0) 70%);
  filter: blur(28px);
}
.home-v2 .nm-lowshop__frame {
  position: relative; z-index: 1;
  width: min(27rem, 94%); height: 30rem;
}
.home-v2 .nm-lowshop__pdp {
  position: absolute; inset: 0;
  padding: 1.7rem 1.7rem 1.9rem;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.06);
  border-radius: 1.8rem;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 22px 48px -22px rgba(20, 20, 30, 0.34);
  display: flex; flex-direction: column; gap: 1.15rem;
  overflow: hidden;
}
/* Brand pinned at the top (matches .nm-shop / .nm-preshop). atari.svg ships
   white (for the dark brand band); brightness(0) renders the mark as ink. */
.home-v2 .nm-lowshop__brand { display: block; height: 1.5rem; width: auto; margin: 0 auto 0.4rem; filter: brightness(0); }
.home-v2 .nm-lowshop__photo {
  display: block; overflow: hidden; border-radius: 0;
  background: var(--b-faint); aspect-ratio: 2.5 / 1;
}
.home-v2 .nm-lowshop__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.home-v2 .nm-lowshop__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.home-v2 .nm-lowshop__name { font-weight: 500; font-size: 1.3rem; color: var(--b-ink); }
.home-v2 .nm-lowshop__price { font-size: 1.25rem; color: var(--b-ink); }
/* Scarcity line: a blinking red dot + "Only N left". margin-top:auto floats the
   stock line + button to the bottom so the brand/photo sit at the top. */
.home-v2 .nm-lowshop__stock {
  display: flex; align-items: center; gap: 0.6rem; margin-top: auto;
  font-size: 1.1rem; font-weight: 500; line-height: 1; color: var(--low-red);
}
.home-v2 .nm-lowshop__dot {
  flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--low-red);
}
/* One button size across the bento (matches .nm-shop__notify / .nm-wishshop__cart). */
.home-v2 .nm-lowshop__cart {
  display: flex; align-items: center; justify-content: center;
  padding: 0.85rem 1rem; border-radius: var(--low-r);
  background: var(--b-ink); color: #fff;
  font-size: 1.1rem; font-weight: 500; text-align: center;
}
/* The red dot blinks only while the card is hovered/focused — no idle loop.
   Gated behind no-preference so reduced motion holds a steady dot. */
@media (prefers-reduced-motion: no-preference) {
  .home-v2 .nm-bento__cell--low:hover .nm-lowshop__dot,
  .home-v2 .nm-bento__cell--low:focus-within .nm-lowshop__dot { animation: nm-low-dot 1.8s ease-in-out infinite; }
}
@keyframes nm-low-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --- Staggered entrance (gated; default state stays fully visible) ------- */
.home-v2 .nm-bento.anim-ready .nm-bento__cell {
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.home-v2 .nm-bento.anim-ready.is-in .nm-bento__cell { opacity: 1; transform: none; }
.home-v2 .nm-bento.anim-ready.is-in .nm-bento__cell--pre  { transition-delay: 0.08s; }
.home-v2 .nm-bento.anim-ready.is-in .nm-bento__cell--low  { transition-delay: 0.16s; }
.home-v2 .nm-bento.anim-ready.is-in .nm-bento__cell--wish { transition-delay: 0.24s; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
  .home-v2 .nm-bento { grid-template-columns: 1fr; gap: 1.4rem; }
  .home-v2 .nm-bento__cell--bis,
  .home-v2 .nm-bento__cell--pre,
  .home-v2 .nm-bento__cell--wish,
  .home-v2 .nm-bento__cell--low { grid-column: 1 / -1; }
  .home-v2 .nm-bento__cell { min-height: 38rem; }
}
@media (max-width: 575px) {
  .home-v2 .nm-bento__cell { min-height: 36rem; padding: 2.4rem; border-radius: 0; }
}

/* --- Reduced motion: hold a sensible static frame ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-bento__cell { opacity: 1 !important; transform: none !important; }
  .home-v2 .nm-pre__ok { opacity: 0 !important; }
  .home-v2 .nm-pre__btn { opacity: 1 !important; }
  .home-v2 .nm-pre__ok,
  .home-v2 .nm-pre__btn,
  .home-v2 .nm-bis__cursor { animation: none !important; }
}

/* ==========================================================================
   8. "DON'T WORRY" — modern vertical stepper (right column)
   The original Webflow build revealed one step at a time behind an animated
   rail + floating dots. We replace that with a static, three-at-once stepper:
   numbered tile + bold title + grayed description per step, joined by a
   connector rail, all tinted in the active feature's color.

   Feature color is scoped off the left box's modifier class:
   Restock=.first (blue) · Preorders=.secend (green) · Wishlist=.third (purple).
   ========================================================================== */
.home-v2 .div-block-12 {
  --step-accent: 0, 59, 175;           /* default: Back in Stock blue */
}
.home-v2 .div-block-12:has(.stock-left-box-step.secend) { --step-accent: 31, 154, 104; }  /* green */
.home-v2 .div-block-12:has(.stock-left-box-step.third)  { --step-accent: 124, 32, 196; }  /* purple */

/* Left copy column — description colour. Width/padding set in the block below. */
.home-v2 .step-box-desc { color: var(--v2-muted); }

/* Floating card + copy balance. The card overhangs the box's right edge (the
   "floating" look) — 14rem past it, enough to read as floating over the edge
   without the wide empty gap the base 18rem left. Copy sits left with 5.2rem of
   padding and is narrowed so it ends before the card starts (no overlap), and
   the single-line titles still fit. */
.home-v2 .stock-left-box-step { padding-left: 5.2rem; }
.home-v2 .content-step { max-width: 24rem; }
.home-v2 .white-box-inner-step-box {
  inset: 0% -14rem 0% auto;
}

/* Show all three steps at once — override Webflow's interaction engine, which
   sets inline opacity/display/transform on the inactive steps. Inline styles
   without !important lose to these, so all three stay visible and laid out. */
.home-v2 .div-block-13 .text-step,
.home-v2 .div-block-13 .text-step.first,
.home-v2 .div-block-13 .text-step.second,
.home-v2 .div-block-13 .text-step.third {
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
  transform: none !important;
  margin-top: 0 !important;
}

/* Left copy + visual columns are now driven by js/nm-stepper.js (the single
   source of truth), not Webflow's retired interaction engine. The .content-step
   and .image-step elements are stacked absolutely; only the one matching the
   active right-rail step is shown, so all three columns stay in lockstep.
   !important beats any inline opacity Webflow may have left behind. */
.home-v2 .stock-left-box-step .content-step,
.home-v2 .stock-left-box-step .content-step.first,
.home-v2 .stock-left-box-step .content-step.second,
.home-v2 .stock-left-box-step .content-step.third,
.home-v2 .white-box-inner-step-box .image-step,
.home-v2 .white-box-inner-step-box .image-step.first,
.home-v2 .white-box-inner-step-box .image-step.second,
.home-v2 .white-box-inner-step-box .image-step.third {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.home-v2 .stock-left-box-step .content-step.nm-step-active,
.home-v2 .white-box-inner-step-box .image-step.nm-step-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

/* Right-rail steps are interactive (click / keyboard to jump). Give them an
   affordance without disturbing the timeline layout. */
.home-v2 .div-block-15 .text-step {
  border-radius: 0.8rem;
  outline: none;
}
.home-v2 .div-block-15 .text-step:hover .step-detail-right-title { color: var(--v2-ink); }
.home-v2 .div-block-15 .text-step:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--step-accent), 0.4);
}

/* Retire the old floating rail + circle machinery. */
.home-v2 .div-block-13 .div-block-16 { display: none; }

/* Right column becomes the stepper shell. */
.home-v2 .div-block-13 {
  grid-column-gap: 0;
  grid-row-gap: 0;
  height: auto;
  counter-reset: nm-step;
}
.home-v2 .div-block-13 .div-block-15 {
  grid-row-gap: 0;
  max-width: 40rem;
  height: auto;
}

/* Each step reserves a left gutter for the absolutely-positioned dot + rail,
   then stacks its title and description in the remaining space. */
.home-v2 .div-block-15 .text-step {
  counter-increment: nm-step;
  position: relative;
  display: block;
  padding-left: 4.2rem;     /* rail gutter — keeps text clear of dot/line */
  padding-bottom: 3.2rem;
}
.home-v2 .div-block-15 .text-step:last-child { padding-bottom: 0; }

/* All steps stay visible, but only the .nm-step-active one (set by
   js/nm-stepper.js, auto-advancing) shows in full feature color; the rest
   read as quiet/inactive. Everything transitions for a smooth handoff. */

/* Whole inactive row slightly de-emphasized. */
.home-v2 .div-block-15 .text-step {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.home-v2 .div-block-15 .text-step.nm-step-active { opacity: 1; }

/* Rail geometry, shared by the dot, track, and fill so they always line up.
   --nm-dot: dot diameter · --nm-rail-x: horizontal centre of the rail column ·
   --nm-title-c: vertical centre of the TITLE (the dot aligns here) ·
   --nm-rail-top / --nm-rail-bottom: the line runs from just below the dot all
   the way down to the NEXT step's dot, so the rail is one continuous line with
   no gap between steps (the 3.2rem bottom padding is spanned). */
.home-v2 .div-block-15 .text-step {
  --nm-dot: 1.4rem;
  --nm-rail-x: 1.9rem;       /* column-1 is ~3.8rem wide → centre at 1.9rem */
  --nm-title-c: 1.6rem;      /* title baseline-box centre from row top */
  --nm-rail-top: 2.9rem;     /* just under the dot + its ring */
  --nm-rail-bottom: calc(-1 * var(--nm-title-c)); /* reach the next dot's centre */
}

/* Dot marker — parallel FEATURES, not numbered steps, so a dot on the rail.
   Aligned to the TITLE's vertical centre (not the whole row). INACTIVE: grey. */
.home-v2 .div-block-15 .text-step::before {
  content: "";
  position: absolute;
  left: var(--nm-rail-x);
  top: var(--nm-title-c);
  width: var(--nm-dot);
  height: var(--nm-dot);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #cdd2db;
  box-shadow: 0 0 0 0.5rem #eef0f4;
  z-index: 2;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
/* ACTIVE dot — feature color, ringed + glow. */
.home-v2 .div-block-15 .text-step.nm-step-active::before {
  background: rgb(var(--step-accent));
  box-shadow:
    0 0 0 0.5rem rgba(var(--step-accent), 0.16),
    0 0.4rem 1.2rem rgba(var(--step-accent), 0.3);
  transform: translate(-50%, -50%) scale(1.12);
}

/* Connector rail — faint grey TRACK below the dot, spanning the description.
   The colored .nm-step-fill (injected by js/nm-stepper.js) sits on top and
   grows top→bottom as the dwell timer counts down to the next step. */
.home-v2 .div-block-15 .text-step::after {
  content: "";
  position: absolute;
  left: var(--nm-rail-x);
  top: var(--nm-rail-top);
  bottom: var(--nm-rail-bottom);
  width: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--v2-line);
  z-index: 0;
}

/* Progress fill — occupies the exact rail span (same top/bottom as the track)
   and grows top→bottom via scaleY, so the geometry is always exact regardless
   of row height. Solid feature accent so the progress reads clearly. */
.home-v2 .div-block-15 .text-step .nm-step-fill {
  position: absolute;
  left: var(--nm-rail-x);
  top: var(--nm-rail-top);
  bottom: var(--nm-rail-bottom);
  width: 3px;
  border-radius: 3px;
  background: rgb(var(--step-accent));
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
/* Only the active step's fill is visible; .is-running animates it to full over
   the dwell time (set as --nm-step-dwell on #tabs-container by the script). */
.home-v2 .div-block-15 .text-step.nm-step-active .nm-step-fill {
  opacity: 1;
}
.home-v2 .div-block-15 .text-step.nm-step-active .nm-step-fill.is-running {
  transform: translateX(-50%) scaleY(1);
  transition: transform var(--nm-step-dwell, 3200ms) linear;
}

/* Last step has no following step, so it can't reach a next dot. Instead run
   the rail from just below its dot to the bottom of the row (= end of the
   description, since :last-child has padding-bottom: 0), so its line matches
   the description height like the other steps rather than a fixed short stub. */
.home-v2 .div-block-15 .text-step:last-child::after,
.home-v2 .div-block-15 .text-step:last-child .nm-step-fill {
  bottom: 0;
  height: auto;
}

/* Title — full ink when active, dimmed when inactive. */
.home-v2 .div-block-15 .step-detail-right-title {
  margin: 0.4rem 0 0.6rem;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 400;
  color: #aeb3bd;
  transition: color 0.3s ease;
}
.home-v2 .div-block-15 .text-step.nm-step-active .step-detail-right-title {
  color: var(--v2-ink);
}

/* Description — quiet grey, fainter when inactive. */
.home-v2 .div-block-15 .text-block-5 {
  font-size: 1.6rem;
  line-height: 1.55;
  color: #c2c6cf;
  transition: color 0.3s ease;
}
.home-v2 .div-block-15 .text-step.nm-step-active .text-block-5 {
  color: var(--v2-muted);
}

/* ==========================================================================
   BRAND SPOTLIGHT  —  auto-scrolling customer gallery on a dark stage
   Sits between the product bento and the "35,000+ stores" testimonials.
   A continuous marquee of real customer product shots that calmly pauses on
   hover/focus and reveals each store's tenure, country and ★ rating.
   Benchmarked against the Recharge / Klaviyo brand carousels, but rebuilt on
   v2's own type scale, tokens and motion language. Seamless loop is achieved
   with two identical 7-card sets and a per-card trailing margin (NOT flex
   `gap`), so translateX(-50%) lands pixel-exact with no jump.
   ========================================================================== */
.home-v2 .nm-brands {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* This is a full-bleed DARK band dropped between two LIGHT sections. The page
     rhythm model (gap above = a section's own padding-top) only works when
     neighbours share a background: here padding-top would be the band's OWN
     dark colour, so it butts straight against the cream section above with no
     visible gap. The inter-section gap must therefore be a transparent
     `margin` (it shows the white page behind it); padding is reserved for the
     band's internal breathing room. See DESIGN-SYSTEM.md → Section Padding. */
  margin-top: var(--v2-rhythm);
  padding-top: clamp(6rem, 7vw, 9rem);
  padding-bottom: clamp(6rem, 7vw, 9rem);
  background: #0a0910;
  color: #fff;
}
/* A single soft blue stage-light behind the cards gives the dark band depth. */
.home-v2 .nm-brands::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(124rem, 92%);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(67, 128, 249, 0.20), transparent 64%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

/* --- Intro: editorial split header --------------------------------------
   Lead (eyebrow + title) sits left, the description sits right, the two facing
   each other and vertically centred on a shared axis. Collapses to a stacked,
   left-aligned block on tablet/mobile. */
.home-v2 .nm-brands__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(3rem, 6vw, 9rem);
  /* No max-width island: the intro shares the full-bleed .pad-layout frame
     (12rem side padding) used by every other section and the card stage below,
     so the title pins to the page's left edge at ALL widths. A centred cap here
     made the heading float to mid-canvas on wide screens while the cards stayed
     edge-to-edge — the title read small and the sub got crushed to a column. */
  text-align: left;
}
.home-v2 .nm-brands__lead { flex: 0 1 auto; }
.home-v2 .nm-brands__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
  font-family: "PT Mono", monospace;
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7ea2ff;
}
.home-v2 .nm-brands__eyebrow::before,
.home-v2 .nm-brands__eyebrow::after {
  content: "";
  width: clamp(1.6rem, 4vw, 3.4rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 162, 255, 0.55));
}
.home-v2 .nm-brands__eyebrow::after { transform: scaleX(-1); }
.home-v2 .big-heading-n.nm-brands__title {
  max-width: 100%;
  margin: 0;
  font-weight: 500;
  text-transform: none;
  text-wrap: nowrap;
  text-align: left;
  color: #fff;
}
.home-v2 .nm-brands__sub {
  flex: 0 1 42rem;
  max-width: 42rem;
  margin: 0;
  font-size: clamp(1.55rem, 1.8vw, 1.9rem);
  font-weight: 300;
  line-height: 1.5;
  text-align: right;
  color: #9aa0ad;
}

/* Stack the split header before the columns get cramped. */
@media (max-width: 991px) {
  .home-v2 .nm-brands__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
  }
  .home-v2 .nm-brands__sub { flex-basis: auto; max-width: 54rem; text-align: left; }
}

/* --- Stage / track ------------------------------------------------------ */
.home-v2 .nm-brands__stage {
  position: relative;
  width: 100%;
  margin-top: clamp(5rem, 7vw, 8rem);
  /* Cards dissolve into the dark at both edges. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.home-v2 .nm-brands__track {
  display: flex;
  width: max-content;
  padding-block: 4.5rem; /* headroom for the hover lift + its shadow */
  animation: nm-brands-scroll 56s linear infinite;
  will-change: transform;
}
.home-v2 .nm-brands__stage:hover .nm-brands__track,
.home-v2 .nm-brands__stage:focus-within .nm-brands__track {
  animation-play-state: paused;
}
@keyframes nm-brands-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* exactly one 7-card set */
}

/* --- Card --------------------------------------------------------------- */
.home-v2 .nm-brands__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(21rem, 21vw, 29rem);
  aspect-ratio: 3 / 4;
  margin-right: clamp(1.6rem, 2.2vw, 2.8rem); /* trailing margin == the loop gap */
  border-radius: 0; /* sharp corners */
  overflow: hidden;
  isolation: isolate;
  /* Match the band colour so the rotated/scaled photo never exposes a lighter
     rim at the anti-aliased edge — the card dissolves cleanly into the black. */
  background: #0a0910;
  /* translateZ(0) + backface-visibility bake the card into its own rounded
     compositing layer up front. Without this, Blink/WebKit drop the rounded
     overflow clip for the first frames while the child photo's transform
     animates — the corners flash square, then snap round. This keeps the
     clip stable so the radius is smooth from the very first frame. */
  transform: translateY(var(--ty, 0)) rotate(var(--rot, 0deg)) translateZ(0);
  transform-origin: 50% 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.45);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
  outline: none;
}
/* A hairline rim in the band colour, painted over the photo's outer edge, so the
   bright shots can't bleed past the rounded clip and glare against the black. */
.home-v2 .nm-brands__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px #0a0910;
  pointer-events: none;
}
.home-v2 .nm-brands__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06); /* hides the source shots' baked rounded corners */
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
}
.home-v2 .nm-brands__card:hover,
.home-v2 .nm-brands__card:focus-visible {
  transform: translateY(-1.8rem) rotate(0deg) scale(1.03) translateZ(0);
  box-shadow:
    0 3rem 6rem rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(126, 162, 255, 0.5),
    0 2rem 5rem rgba(67, 128, 249, 0.30);
  z-index: 4;
}
.home-v2 .nm-brands__card:hover .nm-brands__photo,
.home-v2 .nm-brands__card:focus-visible .nm-brands__photo { transform: scale(1.16); }

/* Category chip — frosted, top-left, always visible. */
.home-v2 .nm-brands__tag {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 2;
  padding: 0.5rem 1.05rem;
  font-family: "PT Mono", monospace;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  /* Dark frosted pill so the chip stays legible on light product cards
     (Stanley, Narwal) as well as dark photo cards. */
  background: rgba(12, 12, 20, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

/* Sound toggle — frosted circle, top-right. Hidden at rest; revealed on
   hover/focus so visitors can unmute the Roller Rabbit clip and listen while
   the marquee is paused. Mirrors the .nm-brands__tag chip's frosted styling. */
.home-v2 .nm-brands__sound {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(12, 12, 20, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-0.4rem) scale(0.9);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease, border-color 0.25s ease;
}
.home-v2 .nm-brands__card:hover .nm-brands__sound,
.home-v2 .nm-brands__card:focus-within .nm-brands__sound {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.home-v2 .nm-brands__sound:hover {
  background: rgba(67, 128, 249, 0.55);
  border-color: rgba(155, 192, 255, 0.7);
}
.home-v2 .nm-brands__sound:focus-visible { outline: 2px solid #9bc0ff; outline-offset: 2px; }
.home-v2 .nm-brands__sound svg { width: 1.9rem; height: 1.9rem; display: block; }
/* Icon swap — JS toggles .is-on when the audio clip is playing. */
.home-v2 .nm-brands__sound .nm-brands__sound-on { display: none; }
.home-v2 .nm-brands__sound.is-on .nm-brands__sound-off { display: none; }
.home-v2 .nm-brands__sound.is-on .nm-brands__sound-on { display: block; }
/* While unmuted, keep the control visible and accented even off-hover. */
.home-v2 .nm-brands__sound.is-on {
  opacity: 1;
  transform: none;
  background: rgba(67, 128, 249, 0.6);
  border-color: rgba(155, 192, 255, 0.75);
}

/* Bottom panel: brand name always; the story detail reveals on hover/focus. */
.home-v2 .nm-brands__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.8rem 1.8rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
/* Scrim on its own layer, taller than the text box and with eased (ease-out)
   alpha stops, so the top dissolves into the photo with no perceptible line.
   It extends above the panel so the fade stays gentle even when the panel is
   short (name only) at rest. */
.home-v2 .nm-brands__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% + 7rem);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(7, 7, 12, 0.96) 0%,
    rgba(7, 7, 12, 0.94) 11%,
    rgba(7, 7, 12, 0.88) 22%,
    rgba(7, 7, 12, 0.78) 33%,
    rgba(7, 7, 12, 0.65) 44%,
    rgba(7, 7, 12, 0.50) 55%,
    rgba(7, 7, 12, 0.34) 66%,
    rgba(7, 7, 12, 0.20) 77%,
    rgba(7, 7, 12, 0.10) 86%,
    rgba(7, 7, 12, 0.03) 94%,
    rgba(7, 7, 12, 0) 100%);
}
.home-v2 .nm-brands__name {
  font-family: var(--v2-display);
  font-size: clamp(1.7rem, 1.5vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
  color: #fff;
}
.home-v2 .nm-brands__detail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 0;
  opacity: 0;
  transform: translateY(0.6rem);
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, transform 0.5s ease;
}
.home-v2 .nm-brands__card:hover .nm-brands__detail,
.home-v2 .nm-brands__card:focus-visible .nm-brands__detail,
.home-v2 .nm-brands__card:focus-within .nm-brands__detail {
  max-height: 14rem;
  opacity: 1;
  transform: translateY(0);
}
.home-v2 .nm-brands__stars {
  color: var(--v2-gold);
  letter-spacing: 0.18em;
  font-size: 1.3rem;
  line-height: 1;
}
.home-v2 .nm-brands__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  font-size: 1.3rem;
  color: #c4c8d2;
}
.home-v2 .nm-brands__facts strong { color: #fff; font-weight: 600; }
.home-v2 .nm-brands__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
}
.home-v2 .nm-brands__story {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: #9bc0ff;
  text-decoration: none;
  transition: gap 0.3s ease, color 0.3s ease;
}
.home-v2 .nm-brands__story svg { width: 1.4rem; height: 1.4rem; }
.home-v2 .nm-brands__story:hover { color: #fff; gap: 0.85rem; }

/* Entrance — JS adds .is-in on scroll into view; without JS it stays visible. */
.home-v2 .nm-brands.is-in .nm-brands__intro {
  animation: nm-brands-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home-v2 .nm-brands.is-in .nm-brands__stage {
  animation: nm-brands-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
@keyframes nm-brands-rise {
  from { opacity: 0; transform: translateY(2.6rem); }
  to   { opacity: 1; transform: none; }
}

/* Touch / no-hover devices can't reveal on hover — show the detail by default. */
@media (hover: none) {
  .home-v2 .nm-brands__detail { max-height: 14rem; opacity: 1; transform: none; }
}

/* Reduced motion: kill the marquee, allow manual swipe, flatten the wave. */
@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-brands__stage {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .home-v2 .nm-brands__track { animation: none; }
  .home-v2 .nm-brands__card { transform: none; scroll-snap-align: center; }
  .home-v2 .nm-brands.is-in .nm-brands__intro,
  .home-v2 .nm-brands.is-in .nm-brands__stage { animation: none; }
}

@media (max-width: 767px) {
  .home-v2 .nm-brands__card { width: clamp(17rem, 62vw, 22rem); margin-right: 1.4rem; }
  .home-v2 .nm-brands__track { padding-block: 3.4rem; }
}

/* ==========================================================================
   11. PARTNERSHIPS — two-up cards (agency partners + app partners)
   ----------------------------------------------------------------------------
   Modeled on the Shopify "Get going, then get growing" two-card section: a
   centered head, then two clickable cards, each a soft stage panel holding a
   built mini-UI composition above a benefit headline + lede. Stages are sharp
   (page enterprise radius = 0); the floating mini-cards INSIDE keep their
   rounding, exactly like every other mockup on this page (bento, dev-API event).
   Left card = agency track (client portfolio + recurring commission);
   right card = app track (your app ↔ Notify Me!, distribution reach).
   ========================================================================== */
.home-v2 .nm-partners__head {
  max-width: 64rem;
  margin: 0 auto clamp(3.4rem, 5vw, 5rem);
  text-align: center;
}
.home-v2 .nm-partners__head .nm-integrations__badge { margin-bottom: 1.8rem; }
.home-v2 .nm-partners__title-lg { margin: 0; text-transform: none; }
.home-v2 .nm-partners__sub {
  margin-top: 1.3rem;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--v2-muted);
}

.home-v2 .nm-partners__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 2.4vw, 2.8rem);
}

/* --- Card = stage panel (visual) + text block below, fully clickable ------ */
.home-v2 .nm-partners__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.home-v2 .nm-partners__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(30rem, 33vw, 38rem);
  padding: clamp(2.4rem, 3vw, 3.4rem);
  background: #f1f3f7;
  border: 1px solid var(--v2-line);
  border-radius: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.25s ease;
}
/* Faint brand wash from a corner — same language as the bento cells. */
.home-v2 .nm-partners__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(118% 92% at 86% 112%, rgba(0, 59, 175, 0.07), transparent 62%);
}
.home-v2 .nm-partners__card:hover .nm-partners__stage {
  transform: translateY(-4px);
  border-color: rgba(0, 59, 175, 0.22);
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 28px 60px -30px rgba(20, 20, 30, 0.30);
}
.home-v2 .nm-partners__card:focus-visible { outline: none; }
.home-v2 .nm-partners__card:focus-visible .nm-partners__stage {
  outline: 2px solid var(--v2-ink);
  outline-offset: 3px;
}

/* --- Text block below the stage ------------------------------------------ */
.home-v2 .nm-partners__body { padding-top: clamp(2rem, 2.4vw, 2.6rem); }
.home-v2 .nm-partners__name {
  margin: 0;
  font-family: var(--v2-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 2.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
}
.home-v2 .nm-partners__copy {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: clamp(1.55rem, 1.5vw, 1.7rem);
  line-height: 1.55;
  color: var(--v2-muted);
}
.home-v2 .nm-partners__more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.6rem;
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--v2-blue);
}
.home-v2 .nm-partners__more svg { width: 1.5rem; height: 1.5rem; transition: transform 0.25s ease; }
.home-v2 .nm-partners__card:hover .nm-partners__more svg { transform: translateX(4px); }

/* --- Shared floating mini-card surface ----------------------------------- */
.home-v2 .nm-pmini {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.06);
  border-radius: 1.4rem;
  box-shadow: 0 14px 36px -20px rgba(20, 20, 30, 0.30);
}

/* Gentle idle float on the secondary (accent) cards. */
@media (prefers-reduced-motion: no-preference) {
  .home-v2 .nm-ppay  { animation: nm-pfloat 6s ease-in-out infinite; }
  .home-v2 .nm-preach { animation: nm-pfloat 6.6s ease-in-out infinite; }
}
@keyframes nm-pfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ===== Agency card — client portfolio + recurring payout ================= */
.home-v2 .nm-pport {
  width: min(30rem, 92%);
  margin: clamp(0.4rem, 1vw, 1.2rem) auto 0;
  padding: 1.6rem 1.6rem 1.4rem;
}
.home-v2 .nm-pport__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.home-v2 .nm-pport__label { font-weight: 500; font-size: 1.4rem; color: var(--v2-ink); }
.home-v2 .nm-pport__count {
  font-family: "PT Mono", monospace;
  font-size: 1.1rem;
  color: var(--v2-blue);
  background: rgba(0, 59, 175, 0.07);
  border: 1px solid rgba(0, 59, 175, 0.16);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
}
.home-v2 .nm-pclient { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 0; }
.home-v2 .nm-pnet__slot { border-bottom: 1px solid #eef0f4; }
.home-v2 .nm-pport > .nm-pclient:not(:last-child) { border-bottom: 1px solid #eef0f4; }
.home-v2 .nm-pclient__ava {
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-display);
  font-size: 1.25rem;
  color: #fff;
}
.home-v2 .nm-pclient__ava--a { background: linear-gradient(135deg, #4380f9, #003baf); }
.home-v2 .nm-pclient__ava--b { background: linear-gradient(135deg, #9b6bff, #4b2fd6); }
.home-v2 .nm-pclient__ava--c { background: linear-gradient(135deg, #34c08a, #0e7a4f); }
/* Agency logo tile: real favicon contained on a clean white chip. */
.home-v2 img.nm-pclient__ava {
  object-fit: contain;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid rgba(20, 20, 30, 0.08);
}
.home-v2 .nm-pclient__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.home-v2 .nm-pclient__name { font-size: 1.4rem; font-weight: 500; color: var(--v2-ink); line-height: 1.2; }
.home-v2 .nm-pclient__loc { font-size: 1.1rem; color: var(--v2-muted); line-height: 1.2; }
.home-v2 .nm-pclient__pill {
  flex: none; display: inline-flex; align-items: center;
  font-size: 1.05rem; font-weight: 600; line-height: 1;
  padding: 0.4rem 0.7rem; border-radius: 0.5rem;
}
/* Partner-tier badges — palette mirrors the /agencies directory tiers. */
.home-v2 .nm-pclient__pill--platinum { background: #e8f0fe; color: #1a5fd0; }
.home-v2 .nm-pclient__pill--premier  { background: #fdf1cf; color: #8a5a00; }
.home-v2 .nm-pclient__pill--plus     { background: #e0f5ea; color: #0f7a44; }
.home-v2 .nm-pclient__pill--select   { background: #ede9fe; color: #6d28d9; }
/* "Joined" flashes in front of the name only on a fresh swap-in. */
.home-v2 .nm-pclient__joined {
  display: none; margin-right: 0.5rem; vertical-align: middle;
  font-size: 0.9rem; font-weight: 600; line-height: 1;
  padding: 0.3rem 0.5rem; border-radius: 0.4rem;
  background: #e0f5ea; color: #0f7a44;
}
.home-v2 .nm-pclient.is-fresh .nm-pclient__joined { display: inline-block; }

/* --- Rotating "newest partner" slot (crossfade, no reflow) --------------- */
.home-v2 .nm-pnet__slot { position: relative; }
.home-v2 .nm-pnet__row { transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.home-v2 .nm-pnet__row--b { position: absolute; inset: 0; }
.home-v2 [data-net="a"] .nm-pnet__row--a,
.home-v2 [data-net="b"] .nm-pnet__row--b { opacity: 1; transform: none; }
.home-v2 [data-net="a"] .nm-pnet__row--b,
.home-v2 [data-net="b"] .nm-pnet__row--a { opacity: 0; transform: translateY(6px); }

/* --- "+$60" recurring-commission delta that rises as a partner joins ----- */
.home-v2 .nm-pdelta {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-family: var(--v2-display);
  font-weight: 500;
  font-size: 1.3rem;
  color: #0e7a4f;
  opacity: 0;
  pointer-events: none;
}
@keyframes nm-pdelta-rise {
  0%   { opacity: 0; transform: translateY(4px) scale(0.96); }
  18%  { opacity: 1; transform: translateY(-2px) scale(1); }
  70%  { opacity: 1; transform: translateY(-9px); }
  100% { opacity: 0; transform: translateY(-15px); }
}
@media (prefers-reduced-motion: no-preference) {
  .home-v2 .nm-pdelta.is-pop { animation: nm-pdelta-rise 1.5s cubic-bezier(0.22,1,0.36,1); }
}
/* Static, correct frame with JS off / reduced motion: top partner shown Live. */
@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-pnet__row { transition: none; }
  .home-v2 [data-net] .nm-pnet__row--a { opacity: 1 !important; transform: none !important; }
  .home-v2 [data-net] .nm-pnet__row--b { opacity: 0 !important; }
  .home-v2 .nm-pclient__joined { display: none !important; }
  .home-v2 .nm-pdelta { display: none !important; }
}

.home-v2 .nm-ppay {
  position: absolute;
  z-index: 2;
  right: clamp(1.2rem, 2vw, 2.4rem);
  bottom: clamp(1.2rem, 2vw, 2.4rem);
  width: min(20.5rem, 64%);
  padding: 1.3rem 1.5rem;
}
.home-v2 .nm-ppay__label { font-size: 1.2rem; color: var(--v2-muted); }
.home-v2 .nm-ppay__row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.4rem; }
.home-v2 .nm-ppay__val {
  font-family: var(--v2-display);
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
}
.home-v2 .nm-ppay__per { font-size: 1.25rem; color: var(--v2-muted); }
.home-v2 .nm-ppay__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: #0e7a4f;
}
.home-v2 .nm-ppay__trend svg { width: 1.2rem; height: 1.2rem; }

/* ===== App card — your app ↔ Notify Me!, distribution reach ============== */
.home-v2 .nm-pconn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
  padding-top: clamp(1rem, 3.5vw, 3.4rem);
}
.home-v2 .nm-ptile {
  width: clamp(8.4rem, 12vw, 10.4rem);
  padding: 1.6rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
}
.home-v2 .nm-ptile__ico {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-v2 .nm-ptile__ico--app { background: #eef1f6; border: 1px solid var(--v2-line); color: var(--v2-muted); }
.home-v2 .nm-ptile__ico--app svg { width: 2.4rem; height: 2.4rem; }
.home-v2 .nm-ptile__ico--nm {
  background: linear-gradient(140deg, var(--v2-blue-bright) 0%, var(--v2-blue) 70%);
  box-shadow: 0 12px 26px -10px rgba(0, 59, 175, 0.55);
}
.home-v2 .nm-ptile__ico--nm img { width: 2.7rem; height: 2.7rem; }
.home-v2 .nm-ptile__name { font-size: 1.3rem; font-weight: 500; color: var(--v2-ink); line-height: 1.1; }
.home-v2 .nm-ptile__sub { font-size: 1.1rem; color: var(--v2-muted); }

.home-v2 .nm-pwire {
  position: relative;
  flex: 0 0 auto;
  width: clamp(4rem, 9vw, 7.4rem);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0, 59, 175, 0.16), rgba(0, 59, 175, 0.4));
}
.home-v2 .nm-pwire__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.45rem;
  border-radius: 50%;
  background: var(--v2-blue-bright);
  box-shadow: 0 0 0 4px rgba(67, 128, 249, 0.16);
}
@media (prefers-reduced-motion: no-preference) {
  .home-v2 .nm-pwire__dot { animation: nm-pflow 2.6s ease-in-out infinite; }
}
@keyframes nm-pflow {
  0%   { left: 0;    opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.home-v2 .nm-preach {
  position: absolute;
  z-index: 2;
  left: clamp(2rem, 3vw, 3.4rem);
  right: clamp(2rem, 3vw, 3.4rem);
  bottom: clamp(1.8rem, 2.6vw, 2.8rem);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.5rem;
}
.home-v2 .nm-preach__avs { display: flex; flex: none; }
.home-v2 .nm-preach__av {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -0.8rem;
}
.home-v2 .nm-preach__av:first-child { margin-left: 0; }
.home-v2 .nm-preach__av--a { background: linear-gradient(135deg, #4380f9, #003baf); }
.home-v2 .nm-preach__av--b { background: linear-gradient(135deg, #9b6bff, #4b2fd6); }
.home-v2 .nm-preach__av--c { background: linear-gradient(135deg, #34c08a, #0e7a4f); }
.home-v2 .nm-preach__av--more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v2-ink);
  color: #fff;
  font-family: "PT Mono", monospace;
  font-size: 1rem;
}
.home-v2 .nm-preach__txt { line-height: 1.3; }
.home-v2 .nm-preach__txt strong { display: block; font-weight: 500; font-size: 1.45rem; color: var(--v2-ink); }
.home-v2 .nm-preach__txt span { font-size: 1.15rem; color: var(--v2-muted); }

/* --- Responsive: stack to one column on phones --------------------------- */
@media (max-width: 767px) {
  .home-v2 .nm-partners__grid { grid-template-columns: 1fr; gap: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .nm-pwire__dot { left: calc(50% - 0.45rem); opacity: 1; animation: none; }
}

/* ==========================================================================
   12. TYPE SYSTEM — apply the one ladder everywhere (v2-2 polish)
   --------------------------------------------------------------------------
   The token ladder is declared once at the top of this file. This block is
   the single point where the page-level reading typography (section titles,
   leads, eyebrows, card titles, big numbers, quotes) is mapped onto it, so
   the whole page reads as ONE consistent system instead of ~15 ad-hoc sizes.

   Scope note: the tiny text *inside* the product mock-ups (bento steps, the
   partner mini-cards) is intentionally left on its own product-UI scale — it
   mimics real store/app chrome and is self-consistent within each mockup, so
   folding it into the page ladder would make those fakes read wrong.

   Specificity here matches each original rule and, loading last, wins on ties.
   ========================================================================== */

/* ---- Leads & sub-paragraphs → one size + one rhythm --------------------- */
.home-v2 .nm-integrations__sub,
.home-v2 .nm-devapi__lede,
.home-v2 .nm-partners__sub,
.home-v2 .nm-partners__copy,
.home-v2 .nm-brands__sub,
.home-v2 .nm-final-cta__sub,
.home-v2 .nm-bento-intro .text-blue-dark-gray {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* ---- Eyebrows / kickers / mono labels → one size + one tracking --------- */
.home-v2 .nm-logo-strip__label,
.home-v2 .nm-integrations__badge,
.home-v2 .nm-proof__badge,
.home-v2 .nm-proof__kicker,
.home-v2 .nm-devapi__eyebrow,
.home-v2 .nm-bento-eyebrow,
.home-v2 .nm-brands__eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
}

/* ---- Headings & numerals → ladder rungs --------------------------------- */
/* Section titles (.big-heading-n) already ride --v2-h2 / --fs-h1. These are
   the per-component display sizes that previously each invented their own. */
.home-v2 .nm-final-cta h2 { font-size: var(--fs-h1); }              /* closing CTA */
.home-v2 .nm-proof__num { font-size: var(--fs-stat); }              /* big metric */
.home-v2 .nm-proof__quote-text { font-size: var(--fs-quote); }     /* dark pull-quote */
.home-v2 .store-yellow-box-content .title-28-pt { font-size: var(--fs-h2); } /* story brand */
.home-v2 .nm-partners__name { font-size: var(--fs-h2); }           /* partner card */
.home-v2 .nm-bento__title { font-size: var(--fs-h3); }             /* feature card */
.home-v2 .nm-brands__name { font-size: var(--fs-h4); }             /* spotlight card */
.home-v2 .div-block-15 .step-detail-right-title { font-size: var(--fs-h4); } /* stepper */

/* ---- Weight discipline: nothing on the reading surface exceeds 500 ------ */
.home-v2 .nm-brands__facts strong { font-weight: 500; }

/* ==========================================================================
   "Don't worry about your stock" stepper — mobile image placement
   Desktop: the mockup (.white-box-inner-step-box) overhangs the blue card's
   RIGHT edge by design. On mobile that overhang ran off-screen (clipped). Mirror
   the desktop feel instead: a SHORTER blue card with the step text at the top and
   the mockup dropped to the bottom, overhanging the card's BOTTOM edge so part of
   it sits outside the card. The tab wrapper clips overflow, so open it on the Y
   axis (clip X to avoid horizontal scroll, keep Y visible for the overhang).
   Scoped to .home-v2 so other pages using this shared section are untouched.
   ========================================================================== */
@media screen and (max-width: 767px) {
  .home-v2 .home-page-dont-worry-bottom-box-copy {
    overflow: hidden;
    overflow: clip visible;
  }
  /* Compact blue card — tall enough to leave clear space between the text/button
     block (pinned top) and the mockup (pinned to the bottom, overhanging). */
  .home-v2 .stock-left-box-step { height: auto; min-height: 58rem; padding-bottom: 0; }
  .home-v2 .stock-left-box-step.first { height: auto; min-height: 52rem; }
  /* Step text pinned near the top so the mockup has the lower half to itself. */
  .home-v2 .content-step { top: 4rem; bottom: auto; }
  /* Mockup: bottom-centred and overhanging the card's bottom edge (~40% outside),
     with a defined box so the absolutely-stacked step images share one frame. */
  .home-v2 .white-box-inner-step-box {
    top: auto;
    bottom: -22rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(32rem, 86%);
    height: 40rem;
    margin: 0;
  }
  .home-v2 .white-box-inner-step-box .image-step {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    padding-top: 0;
    margin: 0;
  }
  /* Room below the card so the overhang clears the next section. */
  .home-v2 .tab-inside-image-home-page-dont-worry { padding-bottom: 26rem; }
}

/* ==========================================================================
   Bento cards — don't clip the last card's drop shadow (responsive)
   When the bento stacks on mobile, the product-mockup card inside each cell has
   a soft drop shadow. The cell (needs overflow to contain its blurred corner
   glow) and the bento's section were both `overflow: hidden`, cropping that
   shadow flat at the bottom. Switch both to `clip visible`: still clip the X
   axis (contain the glow, no horizontal scroll) but leave Y visible so the
   shadow renders in full. Matches the .nm-intflow__row idiom above.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .home-v2 .nm-bento__cell {
    overflow: hidden;
    overflow: clip visible;
  }
  .home-v2 .section.pad-layout:has(.nm-bento) {
    overflow: hidden;
    overflow: clip visible;
  }
}