/* =================================================================
   Nuravine — component stylesheet (v2)
   Same rules as the original styles.css, REGROUPED so each component
   owns a contiguous block containing its base AND its responsive
   (@media 1023 / 767 / 749) rules together. Desktop and mobile for a
   component never live apart, so they can't drift out of sync.
   html font-size is 62.5% so 1rem = 10px.
   Responsive tiers: 1023px (tablet: hamburger + smaller type, 2-col kept),
   767px (hero + text-image stack), 749px (cards/feature/specs reflow).
   ================================================================= */

/* ---------- Real Gotham (hosted on the store's own CDN) ---------- */
@font-face{font-family:'Gotham';src:url('/assets/fonts/Gotham-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('/assets/fonts/Gotham-Book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('/assets/fonts/Gotham-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('/assets/fonts/Gotham-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('/assets/fonts/Gotham-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --font: 'Gotham', sans-serif;
  --ink:#000;             /* --color-foreground 0,0,0 */
  --paper:#fff;           /* --color-background 255,255,255 */
  --blue:#052f9e;         /* brand blue — hero h1 / tech specs heading */
  --band-light:#e8edfd;   /* --color-background 232,237,253 */
  --band-green:#e8fdf0;   /* mint band 232,253,240 (Flux hardware) */
  --band-dark:#202831;    /* --color-background 32,40,49 */
  --radius:6px;           /* --buttons-radius */
  --wide:1200px;

  /* ---- Type scale ----------------------------------------------------
     One ramp every component snaps to, so a given role renders the same
     size everywhere. Fluid: clamp() floors at ~mobile and ceils at the
     desktop value (reached ~1024px wide), so NO per-component font-size
     media queries are needed. Pair each size token with its line-height.
       display  hero <h1>
       h2       every section title
       feature  prominent row/step/card headings (mrow, showcase, steps…)
       h3       compact card headings (feature-card, text-image card)
       lead     intro / subtitle / prominent body
       body     standard body copy
       small    footnotes / captions
     Weight is uniform: headings 500 (via h1,h2,h3), body 400 (via body). */
  --fs-display: clamp(2.8rem, 1.6rem + 3.1vw, 4.8rem);
  --fs-h2:      clamp(2.2rem, 1.6rem + 1.55vw, 3.2rem);
  --fs-feature: clamp(2.0rem, 1.4rem + 1.55vw, 3.0rem);
  --fs-h3:      clamp(1.7rem, 1.5rem + 0.46vw, 2.0rem);
  --fs-lead:    clamp(1.6rem, 1.35rem + 0.62vw, 2.0rem);
  --fs-body:    clamp(1.5rem, 1.4rem + 0.31vw, 1.7rem);
  --fs-small:   1.3rem;
  --lh-display: 1.05;
  --lh-heading: 1.1;
  --lh-snug:    1.2;
  --lh-lead:    1.4;
  --lh-body:    1.5;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%}
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:1.6rem;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:500;margin:0}

/* custom element tags default to inline — make them block so authored
   content lays out correctly even before the component JS upgrades them */
nv-nav,nv-hero,nv-text-image-band,nv-text-image-row,nv-media-text-banner,
nv-card-band,nv-card,nv-media-band,nv-media-row,nv-spec-table,
nv-cta-banner,nv-footer,
nv-hero-banner,nv-feature-card-grid,nv-feature-card,nv-process-steps,
nv-process-step,nv-cta-prompt,nv-feature-banner,nv-intro-banner,
nv-spotlight,nv-spotlight-banner,nv-stack,nv-showcase,nv-showcase-row,nv-prose{display:block}

/* ---------- ATOM: buttons (one uniform size site-wide) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.2rem 3.4rem;
  font-family:var(--font);font-size:1.4rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:#000;border:none;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;white-space:nowrap;
}
.btn--light{color:#000;background:#fff}

/* =================================================================
   COMPONENT: nav  (nv-nav)
   ================================================================= */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:.1rem solid rgba(0,0,0,.08);
}
.nav__inner{
  max-width:var(--wide);margin:0 auto;
  display:flex;align-items:center;gap:2.4rem;
  padding:1.1rem 2.4rem;
}
.nav__logo{display:flex;align-items:center}
.nav__logo img{width:14.5rem;height:auto}
.nav__menu{
  display:flex;align-items:center;gap:2.4rem;
  list-style:none;margin:0;padding:0;
  margin-left:auto;
}
.nav__menu a{font-size:1.5rem;font-weight:400;text-decoration:none}
.nav__menu a:hover{text-decoration:underline}
.nav__item{position:relative}
.nav__item--current > a{text-decoration:underline}
.nav__dropdown{
  position:absolute;top:100%;left:0;
  min-width:16rem;
  display:flex;flex-direction:column;gap:1.2rem;
  padding:1.6rem;margin-top:1rem;
  background:var(--paper);
  border:.1rem solid rgba(0,0,0,.08);border-radius:.4rem;
  box-shadow:0 1rem 2.4rem rgba(0,0,0,.08);
  opacity:0;visibility:hidden;transform:translateY(.6rem);
  transition:opacity .15s,transform .15s,visibility .15s;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav__icons{display:flex;align-items:center;gap:1.8rem}
.nav__icons a{display:inline-flex;color:var(--ink)}
.nav__icons svg{width:2.2rem;height:2.2rem}
.nav__toggle{
  display:none;
  background:none;border:none;cursor:pointer;padding:.6rem;margin-left:auto;
}
.nav__toggle span{display:block;width:2.4rem;height:.2rem;background:var(--ink);margin:.5rem 0}
/* tablet + down: nav -> hamburger */
@media screen and (max-width:1023px){
  .nav__toggle{display:block}
  .nav__menu,.nav__icons{
    display:none;width:100%;flex-direction:column;align-items:flex-start;gap:1.6rem;
    margin:0;padding:1.6rem 0 0;
  }
  .nav__inner{flex-wrap:wrap}
  .nav__inner.open .nav__menu,
  .nav__inner.open .nav__icons{display:flex}
  .nav__dropdown{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;padding:.8rem 0 0 1.6rem;margin-top:.4rem}
}

/* =================================================================
   COMPONENT: hero-device  (nv-hero)
   ================================================================= */
.hero{padding-bottom:7rem}
.hero__eyebrow{
  text-align:center;font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);
  padding:4.4rem 0;margin:0;
}
.hero__grid{
  display:flex;flex-direction:row-reverse;align-items:center;gap:2rem;
  max-width:100rem;margin:0 auto;padding:0 2.4rem;
}
.hero__media{width:calc(40% - 2rem)}
.hero__content{width:calc(60% - 2rem)}
/* wide variant: larger media for long/wide products (e.g. the Elixir module) */
.hero--wide .hero__media{width:calc(52% - 2rem)}
.hero--wide .hero__content{width:calc(48% - 2rem)}
.hero__content-inner{max-width:46rem}
.hero__title{
  color:var(--blue);font-size:var(--fs-display);font-weight:500;line-height:var(--lh-display);
  margin-bottom:3rem;
}
.hero__title--top{display:none}   /* mobile-only copy; shown <768px */
.hero__text{font-size:var(--fs-lead);line-height:var(--lh-lead);margin:0 0 4.8rem}
.hero__cta{display:flex;justify-content:center}
/* tablet: stays 2-col */
@media screen and (max-width:1023px){
  .hero__title{margin-bottom:2rem}
}
/* mobile: hero stacks; show the title above the image */
@media screen and (max-width:767px){
  .hero__eyebrow{padding:4rem 3rem 0}
  .hero__title--top{display:block;color:var(--blue);font-size:var(--fs-display);font-weight:500;
    text-align:center;line-height:var(--lh-display);margin:0;padding:1.5rem 1.5rem 0}
  .hero__grid{flex-direction:column;padding:0 1.5rem}
  .hero__media,.hero__content,
  .hero--wide .hero__media,.hero--wide .hero__content{width:100%}
  .hero__media{margin:3.2rem 0 1.6rem;max-width:40rem;margin-inline:auto}
  .hero__content-inner{max-width:none}
  .hero__content-inner .hero__title{display:none}   /* hide only the in-content copy on mobile */
  .hero__text{margin-top:1.5rem;padding:0 1.5rem 4.8rem;text-align:left}
  .hero__cta{justify-content:center}
}

/* =================================================================
   COMPONENT: text-image-band  (nv-text-image-band / nv-text-image-row)
   dark band + alternating cards
   ================================================================= */
.iwts{background:var(--band-dark);padding-bottom:6.4rem}
.iwts__header{text-align:center;max-width:135rem;margin:0 auto;padding:7rem 4rem}
.iwts__header-title{color:#fff;font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);margin:0}
.iwts__header-text{color:#fff;font-size:var(--fs-lead);line-height:var(--lh-lead);margin:1.2rem 0 0}
.iwts__list{max-width:135rem;margin:0 auto;padding:0 4rem}
.iwts__item{
  display:flex;overflow:hidden;border-radius:.5rem;background:#fff;
}
.iwts__item:not(:first-child){margin-top:2.6rem}
/* band assigns --reverse (even rows) and --odd (odd rows) by index,
   so alternation/striping work for any number of rows */
.iwts__item--reverse{flex-direction:row-reverse}
.iwts__media{width:50%}
.iwts__media img{width:100%;height:100%;object-fit:cover}
.iwts__content-wrapper{display:flex;align-items:center;width:50%}
.iwts__content{padding:7.2rem 5.4rem}
.iwts__content-heading{font-size:var(--fs-feature);font-weight:500;line-height:var(--lh-heading);margin:0}
.iwts__content-text{font-size:var(--fs-body);margin:1.6rem 0 0;line-height:var(--lh-body)}
.iwts__footnote{display:block;font-size:var(--fs-small);font-weight:400;margin-top:1.6rem}
.iwts__footer{display:flex;justify-content:center;padding-top:6.4rem}
.iwts__footer .btn{font-weight:400}
/* tablet: stays 2-col; recolor header, tighten cards, stripe odd rows */
@media screen and (max-width:1023px){
  .iwts__header{padding:4.8rem 3rem;background:#fff}
  .iwts__header-title{color:var(--blue)}
  .iwts__header-text{color:#000}
  .iwts__content{padding:3.2rem 2.2rem 4.8rem}
  .iwts__content-heading{margin-bottom:.6rem}
  .iwts__item--odd .iwts__content{background:#e8edfd}
}
/* mobile: full-bleed, square corners, no gaps between stacked cards */
@media screen and (max-width:767px){
  .iwts__list{padding:0}
  .iwts__item,.iwts__item--reverse{flex-direction:column;border-radius:0}
  .iwts__item:not(:first-child){margin-top:0}
  .iwts__media,.iwts__content-wrapper{width:100%}
  .iwts__content{text-align:center}
}

/* =================================================================
   COMPONENT: media-text-banner  (nv-media-text-banner) — white, one-off
   ================================================================= */
.modular{padding:3.2rem 1.5rem 5.2rem;text-align:center}
.modular__title{font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);margin:0 auto 2.8rem;max-width:90rem}
.modular__media{width:80%;margin:0 auto}
.modular--accent .modular__title{color:var(--blue)}
.modular--bg-light{background:var(--band-light)}
.modular--text-first .modular__media{margin-top:.8rem}
.modular--full .modular__media{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.modular__text{
  width:90%;max-width:128rem;margin:2.8rem auto 0;
  font-size:var(--fs-lead);font-weight:400;line-height:var(--lh-lead);
}
.modular__text strong{font-weight:900}
@media screen and (max-width:749px){
  .modular__media{width:100%}
  .modular__text{width:100%}
}

/* =================================================================
   COMPONENT: card-band  (nv-card-band / nv-card) — dark band
   ================================================================= */
.cards{background:var(--band-dark);padding:0 0 4rem}
.cards__title{
  color:#fff;text-align:center;font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);
  max-width:120rem;margin:0 auto;padding:5.2rem 3rem;
}
.cards__list{
  display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;
  max-width:1640px;margin:0 auto;padding:0 2.4rem;
}
.cards__card{display:flex;flex-direction:column;align-items:center;gap:3.2rem}
.cards__img{overflow:hidden;border-radius:.2rem;width:100%}
.cards__img img{width:100%;height:100%;object-fit:cover}
.cards__label{
  background:#fff;color:#000;border-radius:var(--radius);
  padding:1.4rem 4rem;font-size:1.5rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;
}
@media screen and (max-width:749px){
  /* full-width images, smaller title */
  .cards__list{grid-template-columns:1fr;gap:0;padding:0}
  .cards__title{padding:4rem 1.5rem}
  /* symmetric space below each button so it's vertically centered between images */
  .cards__card{padding-bottom:3.2rem}
}

/* =================================================================
   COMPONENT: media-band  (nv-media-band / nv-media-row)
   Image + text rows, alternating image side. Replaces the former
   feature-band (contained) and split-band (full). Dials:
     width = contained  (rounded cards, page gutters, contained image)
           | full        (edge-to-edge, square, cover image)
     bg    = white | light | dark   (background: the band surface, shown in gaps)
     fill  = light | white | dark   (foreground: the row content sits on; covers
             the WHOLE row so a transparent product render blends with the text)
   ================================================================= */
.mband__title{color:var(--ink);text-align:center;font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);max-width:90rem;margin:0 auto 3.2rem}
.mband__list{display:flex;flex-direction:column;margin:0 auto}
.mrow{display:grid;grid-template-columns:1fr 1fr}
.mrow__content{display:flex;flex-direction:column;justify-content:center}
.mrow__media{display:flex;align-items:center;justify-content:center}
.mrow__media img{display:block}
.mrow__heading{font-weight:500;margin:0}
.mrow__text{margin:0;line-height:var(--lh-body)}
.mrow__footnote{display:block;font-size:var(--fs-small);font-weight:400;margin-top:1.6rem}
/* two-colour scheme: bg = band surface (shown in gaps); fill = the row */
.mband--bg-white{background:#fff}
.mband--bg-light{background:var(--band-light)}
.mband--bg-dark{background:var(--band-dark)}
/* fill covers the whole row (both halves) so transparent renders blend */
.mband--fill-light .mrow{background:var(--band-light)}
.mband--fill-white .mrow{background:#fff}
.mband--fill-dark .mrow{background:var(--band-dark)}
.mband--fill-dark .mrow__heading,.mband--fill-dark .mrow__text{color:#fff}
/* content is first in the DOM => image right by default; reverse => image left */
.mrow--reverse .mrow__media{order:-1}

/* contained: rounded cards with page gutters (layout only) */
.mband--contained{padding:clamp(2rem,3.5vw,3.6rem) clamp(1.5rem,2.5vw,3rem)}
.mband--contained .mband__list{gap:clamp(2rem,3.5vw,3.6rem)}
.mband--contained .mrow{border-radius:.4rem;overflow:hidden}
.mband--contained .mrow__content{padding:clamp(3rem,5vw,7.2rem)}
.mband--contained .mrow__heading{font-size:var(--fs-feature);margin-bottom:2rem}
.mband--contained .mrow__text{font-size:var(--fs-body);line-height:var(--lh-body)}

/* full: edge-to-edge, square, white gaps + matching strip above first/below last */
.mband--full{padding:1.6rem 0}
.mband--full .mband__list{gap:1.6rem}
.mband--full .mrow__content{padding:clamp(3.2rem,5vw,7.2rem)}
.mband--full .mrow__heading{font-size:var(--fs-feature);margin-bottom:1.6rem}
.mband--full .mrow__text{font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body)}

/* image fit (independent of width): contain = padded & centered; cover = fills its half */
.mband--fit-contain .mrow{align-items:center}
.mband--fit-contain .mrow__media{padding:4.8rem 4rem}
.mband--fit-contain .mrow__media img{width:100%;max-width:64rem;height:auto}
.mband--fit-cover .mrow{align-items:stretch}
.mband--fit-cover .mrow__media{min-height:100%}
.mband--fit-cover .mrow__media img{width:100%;height:100%;object-fit:cover}

/* mobile: stack, image on top */
@media screen and (max-width:749px){
  .mrow,.mrow--reverse{grid-template-columns:1fr}
  .mrow__media{order:-1}
  .mband--fit-cover .mrow__media{min-height:0}
  /* contained -> lavender section, image padded, white text card below */
  .mband--contained{background:var(--band-light);padding:0 3.2rem}
  .mband--contained .mband__list{gap:0}
  .mband--contained .mrow{background:transparent;border-radius:0}
  .mband--contained .mrow__media{padding:3.6rem 0}
  .mband--contained .mrow__content{background:#fff;padding:3.2rem 1.5rem}
  .mband--contained .mrow__heading{width:100%;text-align:center;margin-bottom:1.6rem}
  /* contained + cover (e.g. Elixir): photo bleeds edge-to-edge, text sits on the
     lavender band (no white card); text-first rows drop the image below the text */
  .mband--contained.mband--fit-cover{padding:0}
  .mband--contained.mband--fit-cover .mrow__media{padding:0}
  .mband--contained.mband--fit-cover .mrow__media img{width:100%;height:auto;object-fit:cover}
  .mband--contained.mband--fit-cover .mrow__content{background:transparent;padding:3.6rem 3.2rem}
  .mrow--text-first .mrow__media{order:0}
  /* full -> rows butt together (no white strips between filled rows), centered text */
  .mband--full{padding:0}
  .mband--full .mband__list{gap:0}
  .mband--full .mrow__content{padding:3.2rem 1.5rem;text-align:center}
}

/* =================================================================
   COMPONENT: spec-table  (nv-spec-table) — light-blue band
   ================================================================= */
.specs{padding:0}
.specs--bg-light{background:var(--band-light)}
.specs--bg-white{background:var(--paper)}
.specs__box{background:transparent;border-radius:0;padding:clamp(5rem,6vw,7.5rem) clamp(2rem,4vw,6rem)}
.specs__title{text-align:center;color:var(--blue);font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);margin:0 0 4rem}
.specs__cols{
  max-width:120rem;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:2rem 6rem;
}
.specs__list{list-style:none;margin:0;padding:0}
.specs__list li{font-size:var(--fs-lead);font-weight:700;margin:0 0 3.6rem}
.specs__list li:last-child{margin-bottom:0}
.specs__list a{color:#000;font-weight:700;text-decoration:underline}
@media screen and (max-width:749px){
  /* single column (row gap keeps the two lists from colliding) */
  .specs__cols{grid-template-columns:1fr;gap:3.6rem}
}

/* =================================================================
   COMPONENT: stack  (nv-stack) — centered single-column heading + interleaved
   paragraphs and contained images, in document order (e.g. Flux Hardware).
   ================================================================= */
.stack{background:var(--paper)}
.stack__band{padding:clamp(3.2rem,5vw,5.6rem) 1.5rem}
.stack__band--light{background:var(--band-light)}
.stack__band--green{background:var(--band-green)}
.stack__band--white{background:var(--paper)}
.stack__col{max-width:93.6rem;margin:0 auto}
.stack__title{text-align:center;color:var(--ink);font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);margin:0 0 2.4rem}
.stack__text{color:var(--ink);font-size:var(--fs-lead);line-height:var(--lh-lead);margin:0;text-align:left}
.stack__media{padding:clamp(3.2rem,5vw,5.6rem) 1.5rem;background:var(--paper)}
.stack__media img{display:block;width:100%;max-width:80rem;height:auto;margin:0 auto}

/* =================================================================
   COMPONENT: showcase  (nv-showcase / -row) — alternating image+text rows where
   the image sits in a SQUARE tile coloured the opposite of the row. One dial,
   theme: usecases (white section / lavender tile / cover photo) or software
   (lavender section / white tile / contained screenshot).
   ================================================================= */
/* two-colour scheme: section = the surface in the margins/gaps; row fill = the
   band the row content sits on (the opposite colour). 50/50 flush halves. */
.show--usecases{background:var(--paper)}                 /* section white */
.show--software{background:var(--band-light)}            /* section lavender */
.show__header{max-width:120rem;margin:0 auto;padding:clamp(4rem,5vw,6.4rem) 2.4rem 0;text-align:center}
.show__title{color:var(--ink);font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);margin:0}
.show__intro{color:var(--ink);font-size:var(--fs-lead);font-weight:400;line-height:var(--lh-lead);margin:1.6rem auto 0;max-width:72rem}
.show__list{display:flex;flex-direction:column}
.show--usecases .show__list{gap:clamp(2.4rem,2.5vw,3.2rem);padding:clamp(2.4rem,2.5vw,3.2rem) 0}
.show--software .show__list{gap:clamp(4.8rem,6vw,9.6rem);padding:clamp(3.2rem,4vw,5.6rem) 0 clamp(4.8rem,6vw,9.6rem)}
.show__row{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  width:calc(100% - 7.2rem);max-width:156rem;margin:0 auto;
}
.show--usecases .show__row{background:var(--band-light)} /* row fill lavender */
.show--software .show__row{background:var(--paper)}      /* row fill white */
/* products: clean white-on-white (no card frame), contained product renders */
.show--products{background:var(--paper)}
.show--products .show__row{background:var(--paper)}
.show--products .show__list{gap:clamp(2.4rem,3vw,4.8rem);padding:clamp(2.4rem,3vw,4.8rem) 0}
.show--products .show__tile img{object-fit:contain}
/* the Aurora render is near-square and fills the tile edge-to-edge; pad it in so it
   reads ~30% smaller and balances against the wider Elixir/Flux renders */
.show--products .show__tile img[src$="/hero.png"]{padding:15%}
.show__row--reverse .show__media{order:-1}
.show__content{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.4rem,4vw,6rem)}
.show__heading{color:var(--ink);font-weight:500;line-height:1.1;margin:0 0 1.6rem}
.show--usecases .show__heading{font-size:var(--fs-feature)}
.show--software .show__heading{font-size:var(--fs-feature)}
.show__text{color:var(--ink);font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);margin:0}
.show__cta{margin-top:2.4rem}
/* square media tile filling its half; image covers (photo) or is contained (UI) */
.show__media{display:block}
.show__tile{position:relative;width:100%;aspect-ratio:1;overflow:hidden}
.show__tile img{width:100%;height:100%;display:block}
.show--usecases .show__tile img{object-fit:cover}
.show--software .show__tile img{object-fit:contain}
@media screen and (max-width:749px){
  /* breathing room below the section title before the first item (items still butt) */
  .show__header{padding-top:clamp(3rem,8vw,4rem);padding-bottom:clamp(2.4rem,6vw,3.6rem)}
  .show--usecases .show__list,.show--software .show__list,.show--products .show__list{gap:0;padding:0}
  .show--software .show__list{padding:0 0 clamp(2.4rem,5vw,3.6rem)}
  .show__row,.show__row--reverse{grid-template-columns:1fr;width:100%;max-width:none}
  .show--software .show__row{width:calc(100% - 3rem);margin-inline:auto}  /* lavender shows around the white block */
  .show__media{order:-1}
  .show__content{padding:3.2rem 1.5rem;text-align:center}
  .show__cta{display:flex;justify-content:center}
  /* software: keep the contained screenshot off the edges a touch */
  .show--software .show__tile{margin:0 auto}
}

/* =================================================================
   COMPONENT: hero-banner  (nv-hero-banner) — image-led full-bleed hero
   ================================================================= */
.hero-banner{position:relative;width:100%}
.hero-banner__media{width:100%}
.hero-banner__img{width:100%;height:auto;display:block;object-fit:cover}
.hero-banner__img--mobile{display:none}        /* desktop: show the wide image */
/* light image, no tint; title+subtitle near the top, button toward the bottom */
.hero-banner__overlay{position:absolute;inset:0;display:flex;justify-content:center}
.hero-banner__inner{
  max-width:var(--wide);width:100%;padding:7rem 2.4rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
}
.hero-banner__title{
  color:var(--ink);font-size:var(--fs-display);font-weight:500;line-height:var(--lh-display);margin:0;
}
.hero-banner__subtitle{
  color:var(--ink);font-size:var(--fs-lead);font-weight:500;line-height:var(--lh-lead);margin:1.6rem 0 0;
}
@media screen and (max-width:1023px){
  .hero-banner__inner{padding:5rem 2.4rem}
}
@media screen and (max-width:767px){
  /* art-direction: swap to the mobile (portrait) image when one is provided */
  .hero-banner__img--desktop{display:none}
  .hero-banner__img--mobile{display:block}
  /* single-image fallback: cover-fill a proper banner height so a wide image
     never collapses to a thin strip on phones */
  .hero-banner__img:not(.hero-banner__img--desktop):not(.hero-banner__img--mobile){
    height:62vh;min-height:42rem;object-fit:cover;
  }
}
@media screen and (max-width:749px){
  .hero-banner__inner{padding:3rem 1.5rem}
}

/* =================================================================
   COMPONENT: feature-banner  (nv-feature-banner) — dark header + wide image + body
   ================================================================= */
.feature-banner__head{background:var(--band-dark);text-align:center;padding:5.6rem 3.2rem}
.feature-banner__title{color:#9eb9ff;font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);margin:0}
.feature-banner__subtitle{color:#fff;font-size:var(--fs-lead);line-height:var(--lh-lead);margin:1.6rem auto 0;max-width:120rem}
.feature-banner__media img{width:100%;display:block}
.feature-banner__body{background:var(--paper);padding:4.8rem 3.2rem}
.feature-banner__text{max-width:73rem;margin:0 auto;text-align:center;font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body)}
@media screen and (max-width:1023px){
  .feature-banner__head{padding:4rem 2.4rem}
}

/* =================================================================
   COMPONENT: feature-card-grid  (nv-feature-card-grid / nv-feature-card) — light band
   ================================================================= */
.fcards{background:var(--band-light);padding:0 0 6.4rem}
.fcards__title{
  color:var(--ink);text-align:center;font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);
  max-width:120rem;margin:0 auto;padding:6.4rem 3rem 4.8rem;
}
.fcards__list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;
  max-width:128rem;margin:0 auto;padding:0 3.2rem;
}
.fcards__card{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  gap:1.6rem;padding:3.2rem;background:var(--paper);border-radius:.8rem;
}
.fcards__icon{width:5.6rem;height:5.6rem;display:flex;align-items:center;justify-content:center}
.fcards__icon img{width:100%;height:100%;object-fit:contain}
/* bg=white: chrome-less cards on a white section (e.g. testimonials) */
.fcards--bg-white{background:var(--paper)}
.fcards--bg-white .fcards__card{background:transparent;padding:0;border-radius:0}
/* media=photo: a large photo instead of a small icon */
.fcards--media-photo .fcards__icon{width:100%;height:auto;aspect-ratio:4/3;border-radius:.6rem;overflow:hidden}
.fcards--media-photo .fcards__icon img{width:100%;height:100%;object-fit:cover}
.fcards__heading{color:var(--ink);font-size:var(--fs-h3);font-weight:500;line-height:var(--lh-snug);margin:0}
.fcards__text{color:var(--ink);font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);margin:0}
/* desktop column count (tablet = 2-up, mobile = 1-up, below) */
@media screen and (min-width:1024px){
  .fcards--cols-2 .fcards__list{grid-template-columns:repeat(2,1fr);max-width:96rem}
  .fcards--cols-3 .fcards__list{grid-template-columns:repeat(3,1fr)}
  .fcards--cols-4 .fcards__list{grid-template-columns:repeat(4,1fr)}
}
@media screen and (max-width:1023px){
  .fcards__title{padding-top:4.8rem}
}
@media screen and (max-width:749px){
  .fcards__list{grid-template-columns:1fr;gap:1.6rem}
  .fcards__title{padding:4rem 1.5rem 2.4rem}
}

/* =================================================================
   COMPONENT: process-steps  (nv-process-steps / nv-process-step) — title, photo, 3 steps
   ================================================================= */
.steps{background:var(--paper);padding:4.8rem 2.4rem}
.steps__title{text-align:center;color:var(--ink);font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);margin:0 auto 3.2rem;max-width:90rem}
/* full-bleed: negative margins cancel the section's side padding */
.steps__photo{margin:0 -2.4rem 4.8rem}
.steps__photo img{width:100%;display:block;border-radius:0}
.steps__list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4rem;
  max-width:120rem;margin:0 auto;
}
.steps__step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.2rem}
.steps__icon{width:6rem;height:6rem;display:flex;align-items:center;justify-content:center}
.steps__icon img{width:100%;height:100%;object-fit:contain}
.steps__heading{font-size:var(--fs-feature);font-weight:500;line-height:var(--lh-heading);color:var(--blue);margin:0}
.steps__text{font-size:var(--fs-body);line-height:var(--lh-body);margin:0;max-width:34rem}
@media screen and (max-width:749px){
  .steps{padding:4.8rem 1.5rem}
  .steps__photo{margin:0 -1.5rem 3.2rem}
  .steps__list{grid-template-columns:1fr;gap:4.8rem}
  .steps__title{margin-bottom:3.2rem}
}

/* =================================================================
   COMPONENT: cta-prompt  (nv-cta-prompt) — centered text + button, no image
   ================================================================= */
/* sections butt against their neighbors (the background is part of the section) */
.cta-prompt{background:var(--band-light);padding:6.4rem 2.4rem}
.cta-prompt--flush{margin-top:0}   /* back-compat no-op; flush is now the default */
.cta-prompt__inner{max-width:72rem;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2.4rem}
.cta-prompt__title{font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);margin:0}
.cta-prompt__text{font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);margin:0}
.cta-prompt__cta{margin-top:.8rem}
@media screen and (max-width:749px){
  .cta-prompt{padding:4.8rem 1.5rem}
}
/* dark variant: dark band, light-blue title, white body (e.g. "Expert Support") */
.cta-prompt--dark{background:var(--band-dark)}
.cta-prompt--dark .cta-prompt__title{color:#9eb9ff}
.cta-prompt--dark .cta-prompt__text{color:#fff}

/* =================================================================
   COMPONENT: intro-banner  (nv-intro-banner) — dark band: light-blue title
   + subtitle, a white content card, and a button
   ================================================================= */
.intro-banner{background:var(--band-dark);padding:5.6rem 2.4rem}
.intro-banner__inner{max-width:96rem;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2.8rem}
.intro-banner__title{color:#9eb9ff;font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);margin:0}
.intro-banner__subtitle{color:#fff;font-size:var(--fs-lead);line-height:var(--lh-lead);margin:0}
.intro-banner__card{background:var(--paper);border-radius:.6rem;padding:4rem;width:100%;text-align:left}
.intro-banner__card-heading{color:var(--ink);font-size:var(--fs-feature);font-weight:500;line-height:var(--lh-heading);margin:0 0 2rem}
.intro-banner__text{color:var(--ink);font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);margin:0 0 1.6rem}
.intro-banner__text:last-child{margin-bottom:0}
.intro-banner__cta{margin-top:.4rem}
@media screen and (max-width:749px){
  .intro-banner{padding:4rem 1.5rem}
  .intro-banner__card{padding:2.4rem}
}

/* =================================================================
   COMPONENT: spotlight  (nv-spotlight / -card / -banner) — purpose-built.
   A 2-up: an overlay card (text over a photo) + a stack card (text above an
   image, on a tint); then a full-width banner (text overlaid on a photo).
   ================================================================= */
.spot{padding:clamp(2rem,3.5vw,3.6rem) clamp(1.5rem,2.5vw,3rem)}
.spot__row{
  display:grid;grid-template-columns:1.25fr 1fr;gap:2rem;align-items:stretch;
  max-width:128rem;margin:0 auto;
}
.spot__heading{color:var(--ink);font-size:var(--fs-feature);line-height:var(--lh-heading);margin:0 0 1.6rem}
.spot__text{color:var(--ink);font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);margin:0;max-width:40rem}
/* overlay card: photo background, text overlaid top-left */
.spot__card{border-radius:.8rem;overflow:hidden}
.spot__card--overlay{position:relative;min-height:clamp(40rem,42vw,54rem)}
.spot__card--overlay .spot__bg{position:absolute;inset:0}
.spot__bg img{width:100%;height:100%;object-fit:cover;display:block}
.spot__card--overlay .spot__overlay{position:relative;padding:clamp(2.4rem,3vw,4rem)}
/* stack card: tinted card, text on top, product image below */
.spot__card--stack{background:var(--band-light);padding:clamp(2.4rem,3vw,4rem);display:flex;flex-direction:column;gap:1.6rem}
.spot__card--stack .spot__media{margin:auto 0}
.spot__card--stack .spot__media img{width:100%;height:auto;display:block}
/* banner: full-width photo with text overlaid bottom-right */
.spot__banner{position:relative;overflow:hidden;border-radius:.8rem;min-height:clamp(36rem,40vw,52rem);max-width:128rem;margin:2rem auto 0;display:flex;align-items:flex-end;justify-content:flex-end}
.spot__banner .spot__bg{position:absolute;inset:0}
.spot__banner .spot__overlay{position:relative;padding:clamp(3rem,4vw,6rem)}
.spot__banner .spot__heading{font-size:var(--fs-h2)}
@media screen and (max-width:749px){
  /* full-bleed: edge-to-edge cards + banner, no gutters, gaps or rounded corners */
  .spot{padding:0}
  .spot__row{grid-template-columns:1fr;gap:0}
  .spot__card{border-radius:0}
  .spot__card--overlay{min-height:34rem}
  .spot__card--overlay .spot__overlay{text-align:center}
  .spot__card--stack{text-align:center}
  .spot__banner{border-radius:0;margin:0;min-height:34rem}
  .spot__banner .spot__text{max-width:24rem}
}

/* =================================================================
   COMPONENT: cta-banner  (nv-cta-banner) — CTA + full-bleed image
   ================================================================= */
.cta{text-align:center;padding:5.2rem 2.4rem}
.cta__title{font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-heading);margin:0 0 3.2rem}
.footer-banner{width:100%}
.footer-banner img{width:100%;height:auto}
.footer-banner .footer-banner__img--mobile{display:none}
@media screen and (max-width:767px){
  .footer-banner .footer-banner__img--desktop{display:none}
  .footer-banner .footer-banner__img--mobile{display:block}
  /* single-image fallback: cover-fill so a very wide banner isn't a sliver on phones */
  .footer-banner img:not(.footer-banner__img--desktop):not(.footer-banner__img--mobile){height:36vh;min-height:24rem;object-fit:cover}
}

/* =================================================================
   COMPONENT: prose  (nv-prose) — long-form text pages (policies, legal, contact).
   One readable centered column; type snaps to the shared scale.
   ================================================================= */
.prose{padding:clamp(4rem,6vw,7.2rem) 2.4rem}
.prose__inner{max-width:78rem;margin:0 auto}
.prose h1{font-size:var(--fs-display);line-height:var(--lh-display);margin:0 0 2.4rem}
.prose h2{font-size:var(--fs-h2);line-height:var(--lh-heading);margin:4.8rem 0 1.6rem}
.prose h3{font-size:var(--fs-h3);line-height:var(--lh-snug);margin:3.2rem 0 1.2rem}
.prose p{font-size:var(--fs-body);line-height:var(--lh-body);margin:0 0 1.6rem}
.prose ul,.prose ol{font-size:var(--fs-body);line-height:var(--lh-body);margin:0 0 1.6rem;padding-left:2.4rem}
.prose li{margin:0 0 .8rem}
.prose strong{font-weight:700}
.prose a{color:var(--blue);text-decoration:underline}
.prose__inner > :first-child{margin-top:0}
.prose__inner > :last-child{margin-bottom:0}

/* =================================================================
   COMPONENT: footer  (nv-footer)
   ================================================================= */
.site-footer{padding:3.2rem 2.4rem}
.site-footer__inner{
  max-width:var(--wide);margin:0 auto;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem 1.6rem;
  font-size:1.4rem;color:rgba(0,0,0,.7);
}
.site-footer__sep{color:rgba(0,0,0,.4)}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}