/* ==========================================================================
   NimbleSign public marketing site.
   Source of truth: the "design_handoff_nimblesign_marketing" handoff (September 2026) —
   its README's Design tokens table, and the nine .dc.html pages the values were lifted from.
   The tokens were themselves taken from the app's site.css, so they match the product; they
   are restated here because this stylesheet stands alone: the marketing pages load neither
   Bootstrap nor site.css, and they never retint per tenant (this is NimbleSign's own brand).
   Class namespace: nsm-* (the four product-screenshot components live in
   marketing-screens.css as nsx-/nsd-/nsk-/nsc-). Never ns-* — that is the app's.
   See docs/marketing-site.md for the vocabulary and the rules the handoff imposes.
   ========================================================================== */

/* ---------- tokens ---------- */

:root {
  /* brand */
  --nsm-primary: #1687C7;
  --nsm-primary-dark: #1271A7;
  --nsm-navy: #0A4E77;
  --nsm-navy-2: #0D679D;
  --nsm-ink: #0F1B2D;
  --nsm-cyan: #35C6E8;
  --nsm-cyan-light: #8FDCF1;
  --nsm-maple: #E8262D;

  /* feature accents */
  --nsm-blue-tint: #E8F3FA;
  --nsm-violet: #7A4CB8;
  --nsm-violet-text: #6B3FA8;
  --nsm-violet-tint: #EFEAF9;
  --nsm-violet-border: #DCCDF2;
  --nsm-teal: #0F8B86;
  --nsm-teal-text: #0C736F;
  --nsm-teal-tint: #E6F6F5;
  --nsm-indigo: #4C5FC4;
  --nsm-indigo-light: #8E9BEA;
  --nsm-indigo-pale: #C3CBF5;
  --nsm-indigo-tint: #EDEFF9;

  /* status */
  --nsm-success: #148F5B;
  --nsm-success-text: #0C6E45;
  --nsm-success-tint: #E7F5EE;
  --nsm-success-border: #C6E7D5;
  --nsm-warning: #B7791F;
  --nsm-warning-text: #8A5A12;
  --nsm-warning-tint: #FBEEE0;
  --nsm-sent-dot: #1E9AD6;
  --nsm-sign-orange: #E8710A;
  --nsm-initials-green: #14A97C;

  /* neutrals */
  --nsm-page: #FFFFFF;
  --nsm-alt: #F6F8FB;
  --nsm-sunken: #F8FAFC;
  --nsm-canvas: #DCE3EC;
  --nsm-skeleton: #EEF2F7;
  --nsm-border: #E4EAF2;
  --nsm-border-strong: #D6DEE9;
  --nsm-border-light: #F1F5F9;
  --nsm-border-accent: #B8DCEF;
  --nsm-border-nav: #E9EEF4;
  --nsm-radio-border: #C0CAD6;
  --nsm-text: #0F1B2D;
  --nsm-text-2: #33465C;
  --nsm-text-muted: #5A6B80;
  --nsm-text-subtle: #8494A6;
  --nsm-text-placeholder: #A9B6C6;
  --nsm-on-dark: #C7D9E8;
  --nsm-on-dark-muted: #9FB0C4;
  --nsm-on-dark-subtle: #8FA3BC;
  --nsm-on-dark-foot: #8497AD;
  --nsm-on-dark-banner: #C7D5E3;
  --nsm-on-navy-meta: #9DC7E0;
  --nsm-on-navy-meta-2: #B8D3E6;
  --nsm-glass: rgba(255, 255, 255, .06);
  --nsm-glass-border: rgba(255, 255, 255, .14);
  --nsm-ghost-border: rgba(255, 255, 255, .28);

  /* elevation */
  --nsm-shadow-card: 0 1px 2px rgba(16, 40, 70, .04);
  --nsm-shadow-step: 0 1px 2px rgba(16, 40, 70, .05);
  --nsm-shadow-btn: 0 1px 2px rgba(22, 135, 199, .4);
  --nsm-shadow-raised: 0 18px 44px rgba(16, 40, 70, .13);
  --nsm-shadow-hero: 0 -2px 60px rgba(5, 20, 35, .35);
  --nsm-shadow-kiosk: 0 12px 34px rgba(53, 198, 232, .34);
  --nsm-shadow-doc: 0 8px 30px rgba(16, 40, 70, .08);
  --nsm-focus-ring: 0 0 0 3px rgba(22, 135, 199, .15);

  /* type + shape */
  --nsm-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nsm-r-control: 10px;
  --nsm-r-card: 12px;
  --nsm-r-card-lg: 14px;
  --nsm-r-panel: 16px;

  /* motion — hover/colour only; the handoff specifies nothing else */
  --nsm-dur: 140ms;
  --nsm-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- ground + reset (scoped to the site's root) ---------- */

.nsm {
  margin: 0;
  font-family: var(--nsm-font);
  color: var(--nsm-text);
  background: var(--nsm-page);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.nsm.nsm-flow { background: var(--nsm-alt); }
.nsm *, .nsm *::before, .nsm *::after { box-sizing: border-box; }
.nsm p { text-wrap: pretty; }
.nsm img { max-width: 100%; }
/* Link ink, for prose links and anything that does not say otherwise.
   :where() holds this at ZERO specificity, and that is the whole point. Written the obvious way as
   `.nsm a`, it is one class plus one type — which outranks every single-class rule below it. That
   made `.nsm-btn--primary`'s white label lose to this blue, so every filled button rendered its
   text in exactly the colour of its own fill and read as empty; it took the ghost buttons, the
   anchor pills and the on-dark arrow links with it. Any classed rule has to be able to win here. */
:where(.nsm) a { color: var(--nsm-primary); }
:where(.nsm) a:hover { color: var(--nsm-primary-dark); }
.nsm a { text-decoration: none; }
.nsm a, .nsm button {
  transition: color var(--nsm-dur) var(--nsm-ease),
              background-color var(--nsm-dur) var(--nsm-ease),
              border-color var(--nsm-dur) var(--nsm-ease),
              box-shadow var(--nsm-dur) var(--nsm-ease);
}
.nsm a:focus-visible, .nsm button:focus-visible,
.nsm input:focus-visible, .nsm select:focus-visible, .nsm textarea:focus-visible {
  outline: none;
  box-shadow: var(--nsm-focus-ring);
}
.nsm a:focus-visible { border-radius: 6px; }
.nsm main { display: block; }

/* Keyboard users get a way past the nav; invisible until focused. */
.nsm-skip {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--nsm-page); color: var(--nsm-primary);
  padding: 8px 12px; border-radius: var(--nsm-r-control);
  font-size: 14px; font-weight: 600; box-shadow: var(--nsm-shadow-raised);
  transition: top var(--nsm-dur) var(--nsm-ease);
}
.nsm-skip:focus { top: 8px; }

.nsm-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nsm *, .nsm *::before, .nsm *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- layout ---------- */

.nsm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.nsm-section { padding: 72px 0; }
.nsm-py-44 { padding: 44px 0; }
.nsm-py-56 { padding: 56px 0; }
.nsm-py-60 { padding: 60px 0; }
.nsm-py-64 { padding: 64px 0; }
.nsm-py-70 { padding: 70px 0; }
.nsm-py-76 { padding: 76px 0; }
.nsm-py-84 { padding: 84px 0; }
.nsm-pt-60 { padding: 60px 0 0; }
.nsm-pt-72 { padding: 72px 0 0; }
.nsm-bg-alt { background: var(--nsm-alt); }
.nsm-bg-navy { background: var(--nsm-navy); color: #fff; }
.nsm-bg-ink { background: var(--nsm-ink); color: #fff; }
.nsm-rule-b { border-bottom: 1px solid var(--nsm-border); }

.nsm-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nsm-grid > * { min-width: 0; }
/* The floors are tuned so four-across rows never orphan one card; keep them (handoff). */
.nsm-grid--150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.nsm-grid--180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.nsm-grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.nsm-grid--230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.nsm-grid--250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.nsm-grid--260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.nsm-grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.nsm-grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.nsm-grid--start { align-items: start; }
.nsm-grid--stretch { align-items: stretch; }
.nsm-gap-16 { gap: 16px; }
.nsm-gap-24 { gap: 24px; }
.nsm-gap-32 { gap: 32px; }
.nsm-gap-44 { gap: 44px; }
.nsm-gap-48 { gap: 48px; }

.nsm-stack { display: flex; flex-direction: column; gap: 20px; }
.nsm-stack--18 { gap: 18px; }
.nsm-stack--24 { gap: 24px; }

.nsm-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nsm-row--8 { gap: 8px; }
.nsm-row--10 { gap: 10px; }
.nsm-row--14 { gap: 14px; }

.nsm-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.nsm-cta--32 { gap: 32px; }
.nsm-cta-text { min-width: 0; max-width: 560px; }

.nsm-mw-520 { max-width: 520px; }
.nsm-mw-540 { max-width: 540px; }
.nsm-mw-560 { max-width: 560px; }
.nsm-mw-580 { max-width: 580px; }
.nsm-mw-600 { max-width: 600px; }
.nsm-mw-620 { max-width: 620px; }
.nsm-mw-640 { max-width: 640px; }
.nsm-mw-680 { max-width: 680px; }
.nsm-mw-700 { max-width: 700px; }
.nsm-mw-760 { max-width: 760px; }

.nsm-mb-0 { margin-bottom: 0; }
.nsm-mb-8 { margin-bottom: 8px; }
.nsm-mb-10 { margin-bottom: 10px; }
.nsm-mb-12 { margin-bottom: 12px; }
.nsm-mb-14 { margin-bottom: 14px; }
.nsm-mb-16 { margin-bottom: 16px; }
.nsm-mb-20 { margin-bottom: 20px; }
.nsm-mb-24 { margin-bottom: 24px; }
.nsm-mb-28 { margin-bottom: 28px; }
.nsm-mb-32 { margin-bottom: 32px; }
.nsm-mb-36 { margin-bottom: 36px; }
.nsm-mb-40 { margin-bottom: 40px; }
.nsm-mt-12 { margin-top: 12px; }
.nsm-mt-16 { margin-top: 16px; }
.nsm-mt-20 { margin-top: 20px; }
.nsm-mt-24 { margin-top: 24px; }
.nsm-mt-28 { margin-top: 28px; }
.nsm-mt-32 { margin-top: 32px; }
.nsm-mt-40 { margin-top: 40px; }
.nsm-pb-16 { padding-bottom: 16px; }

/* ---------- type ---------- */

.nsm-h1 {
  margin: 0 0 18px; font-size: 48px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em;
}
.nsm-h1--46 { font-size: 46px; }
.nsm-h1--hero { margin: 0; font-size: 58px; line-height: 1.05; }
.nsm-h1--flow { margin: 0; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; }
.nsm-h1--contact { margin: 0 0 16px; }

.nsm-h2 { margin: 0 0 12px; font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.nsm-h2--36 { font-size: 36px; }
.nsm-h2--32 { font-size: 32px; line-height: 1.2; }
.nsm-h2--30 { font-size: 30px; line-height: 1.2; }
.nsm-h2--feature { margin: 0; font-size: 40px; line-height: 1.1; letter-spacing: -.025em; }
.nsm-h2--card { margin: 0 0 10px; font-size: 21px; line-height: 1.3; letter-spacing: -.015em; }
.nsm-h2--step { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: normal; }
.nsm-h2--compare { margin: 0 0 10px; font-size: 20px; line-height: 1.3; letter-spacing: normal; }
.nsm-h2--18 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: normal; }
.nsm-h2--thanks { margin: 0 0 8px; font-size: 20px; line-height: 1.3; letter-spacing: normal; }

.nsm-h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; font-weight: 700; }
.nsm-h3--19 { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.nsm-h3--20 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.nsm-h3--16 { font-size: 16.5px; }
.nsm-h3--welcome { margin: 0 0 7px; font-size: 16.5px; }

.nsm-lead { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--nsm-text-muted); }
.nsm-lead--19 { font-size: 19px; line-height: 1.6; }
.nsm-lead--17 { font-size: 17px; }
.nsm-lead--16-5 { font-size: 16.5px; line-height: 1.6; }
.nsm-body { margin: 0; font-size: 16px; line-height: 1.65; color: var(--nsm-text-muted); }
.nsm-body--16-5 { font-size: 16.5px; }
.nsm-body--15 { font-size: 15px; line-height: 1.6; }
.nsm-body--14-5 { font-size: 14.5px; line-height: 1.6; }
.nsm-body--14 { font-size: 14px; line-height: 1.6; }
.nsm-body--13-5 { font-size: 13.5px; line-height: 1.6; }
.nsm-body--13 { font-size: 13px; line-height: 1.6; }
.nsm-on-dark { color: var(--nsm-on-dark); }
.nsm-on-dark-muted { color: var(--nsm-on-dark-muted); }
.nsm-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--nsm-text-subtle);
}
.nsm-eyebrow--800 { font-weight: 800; }
.nsm-eyebrow--primary { color: var(--nsm-primary); }
.nsm-eyebrow--primary-dark { color: var(--nsm-primary-dark); }
.nsm-eyebrow--dark { color: var(--nsm-on-dark-subtle); }
.nsm-eyebrow--cyan { color: var(--nsm-cyan-light); }
.nsm-meta { font-size: 12.5px; font-weight: 600; color: var(--nsm-text-subtle); }
.nsm-meta--13 { font-size: 13px; font-weight: 400; }

/* "What comes with every signature" (Your data): a mint check well beside a bold title. */
.nsm-proof-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.nsm-proof-title { font-size: 15.5px; font-weight: 700; }

/* Stats band (About). */
.nsm-stat-value { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--nsm-navy); }
.nsm-stat-label { font-size: 13.5px; color: var(--nsm-text-muted); margin-top: 4px; }

/* ---------- the maple leaf ----------
   Always an inline <img> inside a nowrap span glued to the last word, sized in em, so it can never
   orphan onto its own line when the heading wraps (handoff rule). Never a flex sibling. */
.nsm-nowrap { white-space: nowrap; }

.nsm-leaf { display: inline-block; vertical-align: -.06em; width: .8em; height: auto; margin-left: .3em; }
.nsm-leaf--s { vertical-align: -.08em; width: .82em; margin-left: .32em; }
.nsm-leaf--m { vertical-align: -.08em; width: .95em; margin-left: .32em; }
.nsm-leaf--l { vertical-align: -.08em; width: 1em; margin-left: .32em; }
.nsm-leaf--xl { vertical-align: -.08em; width: 1.05em; margin-left: .32em; }
/* The leaf as a block mark beside text (banners, cards). */
.nsm-leaf-icon { width: 13px; height: auto; flex: none; }
.nsm-leaf-icon--16 { width: 16px; }
.nsm-leaf-icon--17 { width: 17px; }
.nsm-leaf-icon--22 { width: 22px; }

/* ---------- buttons ---------- */

.nsm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 12px; padding: 14px 24px;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--nsm-dur) var(--nsm-ease),
              color var(--nsm-dur) var(--nsm-ease),
              border-color var(--nsm-dur) var(--nsm-ease),
              box-shadow var(--nsm-dur) var(--nsm-ease);
}
.nsm-btn svg { flex: none; }
.nsm-btn:active { transform: translateY(1px); }
.nsm-btn--primary { background: var(--nsm-primary); color: #fff; }
.nsm-btn--primary:hover { background: var(--nsm-primary-dark); color: #fff; }
.nsm-btn--navy { background: var(--nsm-navy); color: #fff; }
/* one step darker than --nsm-navy, derived rather than a new hex */
.nsm-btn--navy:hover { background: color-mix(in srgb, var(--nsm-navy) 86%, #000); color: #fff; }
.nsm-btn--outline { background: var(--nsm-page); border-color: var(--nsm-border-accent); color: var(--nsm-primary); }
.nsm-btn--outline:hover { background: var(--nsm-blue-tint); color: var(--nsm-primary-dark); }
.nsm-btn--ghost { background: transparent; border-color: var(--nsm-ghost-border); color: #fff; }
.nsm-btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); color: #fff; }
.nsm-btn--shadow { box-shadow: var(--nsm-shadow-btn); }
.nsm-btn--wide { padding: 14px 26px; }
.nsm-btn--lg { padding: 15px 26px; font-size: 15.5px; }
.nsm-btn--lg.nsm-btn--ghost { padding: 15px 24px; }
.nsm-btn--xl { padding: 15px 28px; font-size: 15.5px; }
.nsm-btn--xl.nsm-btn--ghost { padding: 15px 26px; }
.nsm-btn--sm { border-radius: var(--nsm-r-control); padding: 10px 16px; font-size: 14px; }
.nsm-btn--sm.nsm-btn--primary { padding: 10px 18px; }
.nsm-btn--block { display: flex; width: 100%; border-radius: var(--nsm-r-control); padding: 12px; font-size: 14.5px; }
.nsm-btn--form { width: 100%; border: 0; padding: 14px; font-size: 15px; }
.nsm-btn[disabled], .nsm-btn:disabled { opacity: .55; cursor: default; pointer-events: none; }

/* Arrow links. */
.nsm-more { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; }
.nsm-more svg { flex: none; }
.nsm-more--15 { font-size: 15px; }
.nsm-more--14-5 { font-size: 14.5px; }
.nsm-more--14 { font-size: 14px; }
.nsm-more--13-5 { font-size: 13.5px; gap: 7px; }
.nsm-more--light { color: var(--nsm-cyan-light); }
.nsm-more--light:hover { color: #fff; }
.nsm-more--inline { display: inline-flex; gap: 7px; }

/* ---------- surfaces ---------- */

.nsm-card { background: var(--nsm-page); border: 1px solid var(--nsm-border); border-radius: var(--nsm-r-card); padding: 24px; min-width: 0; }
.nsm-card--14 { border-radius: var(--nsm-r-card-lg); }
.nsm-card--p18 { padding: 18px 22px; }
.nsm-card--p20 { padding: 20px; }
.nsm-card--p22 { padding: 22px; }
.nsm-card--p26 { padding: 26px; }
.nsm-card--p28 { padding: 28px; }
.nsm-card--shadow { box-shadow: var(--nsm-shadow-card); }
.nsm-card--alt { background: var(--nsm-alt); }
.nsm-card--dashed { border: 1px dashed var(--nsm-border-accent); }
.nsm-card--dark { background: var(--nsm-ink); color: #fff; border: 0; }
.nsm-card--glass { background: var(--nsm-glass); border: 1px solid var(--nsm-glass-border); }
.nsm-card--glass-accent { border-color: var(--nsm-cyan); }
.nsm-card--top-primary { border-top: 3px solid var(--nsm-primary); }
.nsm-card--top-navy { border-top: 3px solid var(--nsm-navy); }
.nsm-card--top-teal { border-top: 3px solid var(--nsm-teal); }
.nsm-card--centre { display: flex; flex-direction: column; justify-content: center; }

/* The frame a product screenshot sits in. */
.nsm-frame { border: 1px solid var(--nsm-border); border-radius: var(--nsm-r-card-lg); overflow: hidden; box-shadow: var(--nsm-shadow-raised); background: var(--nsm-page); }
.nsm-frame--borderless { border: 0; }
.nsm-frame--hero { margin-top: 52px; border: 0; border-radius: 16px 16px 0 0; box-shadow: var(--nsm-shadow-hero); }

/* Icon wells. */
.nsm-well { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: var(--nsm-r-control); margin-bottom: 16px; }
.nsm-well--40 { width: 40px; height: 40px; }
.nsm-well--36 { width: 36px; height: 36px; margin-bottom: 14px; }
.nsm-well--42 { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px; }
.nsm-well--52 { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 20px; }
.nsm-well--26 { width: 26px; height: 26px; border-radius: 8px; margin-bottom: 0; }
.nsm-well--blue { background: var(--nsm-blue-tint); color: var(--nsm-primary); }
.nsm-well--green { background: var(--nsm-success-tint); color: var(--nsm-success); }
.nsm-well--teal { background: var(--nsm-teal-tint); color: var(--nsm-teal); }
.nsm-well--violet { background: var(--nsm-violet-tint); color: var(--nsm-violet); }
.nsm-well--indigo { background: var(--nsm-indigo-tint); color: var(--nsm-indigo); }

/* ---------- chips, badges, dots ---------- */

/* The dashed "still to decide" chip. #1271A7 on #F6F8FB is the 4.5:1 pairing — do not lighten. */
.nsm-todo {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  border: 1px dashed var(--nsm-border-accent); background: var(--nsm-alt); color: var(--nsm-primary-dark);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.nsm-chip {
  display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px;
  background: var(--nsm-page); border: 1px solid var(--nsm-border);
  font-size: 12.5px; font-weight: 700; color: var(--nsm-text-2);
}
.nsm-tag {
  display: inline-flex; padding: 5px 12px; border-radius: 999px;
  background: var(--nsm-alt); border: 1px solid var(--nsm-border);
  color: var(--nsm-text-2); font-size: 12.5px; font-weight: 600;
}
.nsm-tag--violet { background: var(--nsm-violet-tint); border-color: var(--nsm-violet-border); color: var(--nsm-violet-text); font-weight: 700; }
.nsm-badge {
  display: inline-flex; padding: 4px 10px; border-radius: 999px;
  background: var(--nsm-blue-tint); color: var(--nsm-primary-dark);
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.nsm-badge--xs { padding: 2px 8px; font-size: 10px; font-weight: 800; }
.nsm-pill-link {
  display: inline-flex; align-items: center; gap: 8px; background: var(--nsm-page);
  border: 1px solid var(--nsm-border); border-radius: 999px; padding: 8px 16px;
  font-size: 13.5px; font-weight: 600; color: var(--nsm-text-2);
}
.nsm-pill-link:hover { border-color: var(--nsm-primary); color: var(--nsm-text); }

/* Feature colour, carried on a local variable so one rule serves every feature. */
.nsm-fc-envelopes { --fc: var(--nsm-primary); --fc-text: var(--nsm-primary-dark); }
.nsm-fc-templates { --fc: var(--nsm-violet); --fc-text: var(--nsm-violet-text); }
.nsm-fc-walkin { --fc: var(--nsm-teal); --fc-text: var(--nsm-teal-text); }
.nsm-fc-inperson { --fc: var(--nsm-indigo); --fc-text: var(--nsm-indigo); }
.nsm-fc-inperson-dark { --fc: var(--nsm-indigo-light); --fc-text: var(--nsm-indigo-pale); }
.nsm-fc-connects { --fc: var(--nsm-indigo); --fc-text: var(--nsm-indigo); }
.nsm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fc, var(--nsm-primary)); }
.nsm-dot--10 { width: 10px; height: 10px; }
.nsm-feature-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nsm-catch { margin: 0 0 18px; font-size: 20px; line-height: 1.35; font-weight: 700; color: var(--fc-text, var(--nsm-primary-dark)); }

/* Benefit lists (feature side cards). */
.nsm-benefits { display: flex; flex-direction: column; gap: 16px; }
.nsm-benefits--14 { gap: 14px; }
.nsm-benefit-title { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.nsm-benefit-body { font-size: 14.5px; line-height: 1.55; color: var(--nsm-text-muted); }
.nsm-bg-ink .nsm-benefit-body { color: var(--nsm-on-dark-muted); }
/* How we work (About): the same shape at a slightly larger scale. */
.nsm-benefit-title--15-5 { font-size: 15.5px; margin-bottom: 4px; }
.nsm-benefit-body--1-6 { line-height: 1.6; }

/* ---------- nav ---------- */

.nsm-nav { position: relative; z-index: 20; }
.nsm-nav a { text-decoration: none; }
.nsm-nav-banner { background: var(--nsm-ink); color: var(--nsm-on-dark-banner); }
.nsm-nav-banner-inner {
  max-width: 1180px; margin: 0 auto; padding: 7px 24px;
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
}
.nsm-nav-bar { background: var(--nsm-page); border-bottom: 1px solid var(--nsm-border-nav); }
.nsm-nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 24px; min-height: 68px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.nsm-nav-logo { flex: none; line-height: 0; border-radius: 6px; }
.nsm-nav-logo img { height: 26px; width: auto; }
.nsm-nav-links { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; flex-wrap: wrap; }
.nsm-nav-links a { font-size: 14px; font-weight: 600; color: var(--nsm-text-2); padding: 4px 0; }
.nsm-nav-links a:hover { color: var(--nsm-text); }
.nsm-nav-links a[aria-current="page"] { color: var(--nsm-text); }
/* `flex: none` here is why this group drops to a row of its own once the bar stops fitting on one
   line. It is also why it overflowed on a phone — see the small-screen query at the bottom of this
   file, which overrides the basis at that width rather than loosening the shrink here, so nothing
   above that breakpoint changes at all. */
.nsm-nav-actions { flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* A quiet way back into the app for somebody who already has an account. Deliberately a text link
   rather than a third button: the two buttons beside it are the page's actual calls to action. */
.nsm-nav-signin { font-size: 14px; font-weight: 600; color: var(--nsm-text-2); padding: 4px 0; }
.nsm-nav-signin:hover { color: var(--nsm-text); }

/* The language pill is a real form posting to /culture/set, so each half is a button. */
.nsm-lang { display: flex; align-items: center; margin: 0; border: 1px solid var(--nsm-border); border-radius: 999px; padding: 2px; }
.nsm-lang-opt {
  border: 0; background: none; font-family: inherit; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--nsm-text-muted); cursor: pointer;
}
.nsm-lang-opt:hover { color: var(--nsm-text); background: var(--nsm-alt); }

/* The footer's language column. It carries .nsm-foot-links too, so its size, stacking and spacing
   are the same as Features / Your data / Company - this rule only marks which language you are
   already reading, the way the nav pill does. */
.nsm-foot-lang a[aria-current] { color: #fff; font-weight: 600; cursor: default; }
.nsm-lang-opt[aria-current] { background: var(--nsm-navy); color: #fff; cursor: default; }
.nsm-lang-opt[aria-current]:hover { background: var(--nsm-navy); color: #fff; }

/* ---------- footer ---------- */

.nsm-foot { background: var(--nsm-ink); color: var(--nsm-on-dark-muted); }
.nsm-foot a { text-decoration: none; color: var(--nsm-on-dark-muted); }
.nsm-foot a:hover { color: #fff; }
.nsm-foot-grid {
  max-width: 1180px; margin: 0 auto; padding: 52px 24px 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px;
}
.nsm-foot-grid > * { min-width: 0; }
.nsm-foot-logo { height: 26px; width: auto; margin-bottom: 14px; }
.nsm-foot-blurb { margin: 0; font-size: 13.5px; line-height: 1.55; max-width: 260px; }
.nsm-foot-hosted { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--nsm-on-dark-banner); }
.nsm-foot-heading { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nsm-on-dark-foot); margin-bottom: 14px; }
.nsm-foot-links { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.nsm-foot-bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
.nsm-foot-bottom-inner {
  max-width: 1180px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--nsm-on-dark-foot);
}
.nsm-foot-legal { display: flex; align-items: center; gap: 18px; }
/* Shown only while French is the chosen language, because these pages are not translated yet. */
.nsm-foot-note { margin: 0; flex-basis: 100%; font-size: 12px; color: var(--nsm-on-dark-foot); }

/* ---------- pricing ---------- */

.nsm-plan { display: flex; flex-direction: column; border: 1px solid var(--nsm-border); border-radius: var(--nsm-r-card-lg); padding: 28px; background: var(--nsm-page); min-width: 0; }
.nsm-plan--featured { border: 2px solid var(--nsm-primary); box-shadow: var(--nsm-shadow-raised); }
/* Reserved rows so the three headings line up even though only Team has a badge (handoff). */
.nsm-plan-badge-row { min-height: 26px; margin-bottom: 12px; }
.nsm-plan-name { margin: 0 0 8px; font-size: 21px; line-height: 1.3; font-weight: 800; }
.nsm-plan-desc { margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; color: var(--nsm-text-muted); min-height: 66px; }
/* Reserved for the same reason, and load-bearing now that the amount comes from the payment
   provider: a plan it cannot price renders an empty price row, and a plan sold monthly-only an
   empty note. Without these the card's button jumps up to meet Enterprise's "Let's talk", and the
   row of calls to action stops being a row. 40px is the 36px amount at its 1.1 line-height. */
.nsm-plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; min-height: 40px; }
.nsm-plan-amount { font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.nsm-plan-amount--navy { color: var(--nsm-navy); }
.nsm-plan-per { font-size: 14px; font-weight: 600; color: var(--nsm-text-subtle); }
.nsm-plan-note { font-size: 12px; color: var(--nsm-text-subtle); margin-bottom: 20px; min-height: 18px; }
.nsm-plan .nsm-btn--block { margin-bottom: 10px; }
.nsm-plan-cta-note { font-size: 12px; color: var(--nsm-text-subtle); text-align: center; margin-bottom: 20px; }
.nsm-feats { display: flex; flex-direction: column; gap: 12px; }
.nsm-feat { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--nsm-text-2); }
.nsm-feat svg { flex: none; margin-top: 1px; color: var(--nsm-primary); }
.nsm-placeholder-list { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--nsm-text-2); }
.nsm-placeholder-list--13 { gap: 6px; font-size: 13px; }

/* ---------- the sign-up flow (demonstration pages) ---------- */

.nsm-flow-wrap { max-width: 1020px; margin: 0 auto; padding: 44px 24px 72px; }
.nsm-flow-wrap--welcome { padding-top: 56px; }
.nsm-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nsm-title-row--12 { margin-bottom: 12px; }
.nsm-flow-intro { margin: 0 0 32px; font-size: 16px; line-height: 1.6; color: var(--nsm-text-muted); max-width: 520px; }
.nsm-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }

.nsm-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; list-style: none; padding: 0; }
.nsm-step { display: inline-flex; align-items: center; gap: 8px; background: var(--nsm-page); border: 1px solid var(--nsm-border); border-radius: 999px; padding: 6px 14px 6px 6px; }
.nsm-step--active { border-color: var(--nsm-primary); box-shadow: var(--nsm-shadow-step); }
.nsm-step-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--nsm-border-light); color: var(--nsm-text-subtle); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.nsm-step--active .nsm-step-num { background: var(--nsm-primary); color: #fff; }
.nsm-step--done .nsm-step-num { background: var(--nsm-success-tint); color: var(--nsm-success); }
.nsm-step-label { font-size: 13px; font-weight: 600; color: var(--nsm-text-subtle); }
.nsm-step--active .nsm-step-label { font-weight: 700; color: var(--nsm-text); }
.nsm-step--done .nsm-step-label { color: var(--nsm-text-muted); }

.nsm-flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.nsm-flow-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.nsm-flow-aside { min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
@media (max-width: 720px) { .nsm-flow-aside { position: static; } }

.nsm-step-card { background: var(--nsm-page); border: 1px solid var(--nsm-border); border-radius: var(--nsm-r-card-lg); padding: 26px; box-shadow: var(--nsm-shadow-card); }
.nsm-step-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.nsm-step-head--tight { margin-bottom: 4px; }
.nsm-step-kicker { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--nsm-primary); }
.nsm-step-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--nsm-text-muted); }

/* Monthly / Annual: two radios drawn as a segmented pill. Pure CSS state, nothing persisted. */
.nsm-seg { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--nsm-border); border-radius: 999px; padding: 3px; background: var(--nsm-sunken); margin-bottom: 18px; }
.nsm-seg-opt { padding: 6px 14px; border-radius: 999px; color: var(--nsm-text-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--nsm-dur) var(--nsm-ease), color var(--nsm-dur) var(--nsm-ease); }
.nsm-seg-opt:hover { color: var(--nsm-text); }
.nsm-seg input:checked + .nsm-seg-opt { background: var(--nsm-navy); color: #fff; }
.nsm-seg input:focus-visible + .nsm-seg-opt { box-shadow: var(--nsm-focus-ring); }

/* Plan radio cards. The selected card's 2px border is drawn as a 1px border plus an inset ring so
   nothing shifts when the choice changes. */
.nsm-options { display: flex; flex-direction: column; gap: 12px; }
.nsm-option { position: relative; display: flex; align-items: flex-start; gap: 13px; border: 1px solid var(--nsm-border); border-radius: var(--nsm-r-card); padding: 16px; background: var(--nsm-page); cursor: pointer; transition: border-color var(--nsm-dur) var(--nsm-ease), background-color var(--nsm-dur) var(--nsm-ease), box-shadow var(--nsm-dur) var(--nsm-ease); }
.nsm-option:hover { border-color: var(--nsm-border-accent); }
.nsm-option:has(input:checked) { border-color: var(--nsm-primary); box-shadow: inset 0 0 0 1px var(--nsm-primary); background: color-mix(in srgb, var(--nsm-primary) 5%, #fff); }
.nsm-option:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--nsm-primary), var(--nsm-focus-ring); }
.nsm-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--nsm-radio-border); background: var(--nsm-page); margin-top: 2px; transition: border var(--nsm-dur) var(--nsm-ease); }
.nsm-option:has(input:checked) .nsm-radio { border: 5px solid var(--nsm-primary); }
.nsm-option-body { flex: 1; min-width: 0; }
.nsm-option-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nsm-option-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 800; }
.nsm-option-price { font-size: 15.5px; font-weight: 800; }
.nsm-option-price small { font-size: 12.5px; font-weight: 600; color: var(--nsm-text-subtle); }
.nsm-option-desc { display: block; font-size: 13.5px; line-height: 1.5; color: var(--nsm-text-muted); margin-top: 3px; }
.nsm-foot-note { margin-top: 14px; font-size: 12.5px; color: var(--nsm-text-subtle); }

/* Fields. */
.nsm-lbl { display: block; font-size: 12.5px; font-weight: 700; color: var(--nsm-text-2); margin-bottom: 6px; }
.nsm-lbl--compact { font-size: 12px; font-weight: 600; }
.nsm-fld {
  display: block; width: 100%; font-family: inherit; font-size: 14px; color: var(--nsm-text);
  background: var(--nsm-page); border: 1px solid var(--nsm-border-strong); border-radius: var(--nsm-r-control);
  padding: 11px 13px; transition: border-color var(--nsm-dur) var(--nsm-ease), box-shadow var(--nsm-dur) var(--nsm-ease);
}
.nsm-fld--compact { font-size: 13.5px; font-weight: 500; padding: 10px 12px; }
.nsm-fld::placeholder { color: var(--nsm-text-placeholder); }
.nsm-fld:hover { border-color: var(--nsm-radio-border); }
.nsm-fld:focus { outline: none; border-color: var(--nsm-primary); box-shadow: var(--nsm-focus-ring); }
.nsm-fld:disabled { background: var(--nsm-alt); color: var(--nsm-text-subtle); cursor: default; }
textarea.nsm-fld { resize: vertical; min-height: 96px; }
.nsm-fields { display: flex; flex-direction: column; gap: 16px; }
.nsm-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.nsm-field-row--140 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.nsm-strength { display: flex; gap: 3px; margin-top: 7px; }
.nsm-strength span { height: 4px; flex: 1; border-radius: 2px; background: var(--nsm-border); }
.nsm-strength .is-filled { background: var(--nsm-success); }
/* The card fields under the provider slot: present to show the space, deliberately inert (handoff). */
.nsm-dimmed { opacity: .55; pointer-events: none; }
.nsm-flow-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nsm-flow-hint { font-size: 13px; color: var(--nsm-text-subtle); }

/* Aside cards. */
.nsm-aside-card { background: var(--nsm-page); border: 1px solid var(--nsm-border); border-radius: var(--nsm-r-card-lg); padding: 24px; box-shadow: var(--nsm-shadow-card); }
.nsm-aside-plan { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 17px; font-weight: 800; }
.nsm-aside-sub { font-size: 12.5px; color: var(--nsm-text-subtle); padding-bottom: 16px; border-bottom: 1px solid var(--nsm-border-light); }
.nsm-aside-list { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--nsm-text-2); padding-top: 16px; }
.nsm-aside-list > span { display: flex; align-items: flex-start; gap: 9px; }
.nsm-aside-list svg { flex: none; margin-top: 1px; color: var(--nsm-success); }
.nsm-aside-link { padding-top: 16px; }
.nsm-dark-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }

/* Where the payment provider's hosted fields will mount once the account exists (handoff). */
.nsm-provider-slot { border: 1px dashed var(--nsm-border-accent); background: var(--nsm-alt); border-radius: var(--nsm-r-card); padding: 26px; text-align: center; margin-bottom: 20px; }
.nsm-provider-title { font-size: 15.5px; font-weight: 800; margin-bottom: 6px; }
.nsm-provider-text { margin: 0 auto; max-width: 340px; font-size: 13.5px; line-height: 1.6; color: var(--nsm-text-muted); }

/* Review table. */
.nsm-review { display: flex; flex-direction: column; margin-bottom: 20px; }
.nsm-review-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--nsm-border-light); }
.nsm-review-key { font-size: 13.5px; color: var(--nsm-text-muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nsm-review-val { font-size: 13.5px; font-weight: 700; text-align: right; }
.nsm-review-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 0; }
.nsm-review-total-key { font-size: 15px; font-weight: 800; }
.nsm-review-total-val { font-size: 20px; font-weight: 800; }

/* Consent checkboxes: a real input behind the drawn box. */
.nsm-checks { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--nsm-border-light); }
.nsm-chk { position: relative; display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.55; color: var(--nsm-text-2); cursor: pointer; }
.nsm-chk-box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--nsm-radio-border); background: var(--nsm-page); margin-top: 1px; color: #fff; transition: background-color var(--nsm-dur) var(--nsm-ease), border-color var(--nsm-dur) var(--nsm-ease), box-shadow var(--nsm-dur) var(--nsm-ease); }
.nsm-chk-box svg { opacity: 0; transition: opacity var(--nsm-dur) var(--nsm-ease); }
.nsm-chk:hover .nsm-chk-box { border-color: var(--nsm-primary); }
.nsm-chk input:checked + .nsm-chk-box { background: var(--nsm-primary); border-color: var(--nsm-primary); }
.nsm-chk input:checked + .nsm-chk-box svg { opacity: 1; }
.nsm-chk input:focus-visible + .nsm-chk-box { box-shadow: var(--nsm-focus-ring); }

/* Welcome. */
.nsm-welcome-card { background: var(--nsm-page); border: 1px solid var(--nsm-border); border-radius: var(--nsm-r-panel); padding: 40px; box-shadow: var(--nsm-shadow-card); margin-bottom: 24px; }
.nsm-welcome-band { background: var(--nsm-ink); color: #fff; border-radius: var(--nsm-r-card-lg); padding: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nsm-welcome-band-body { flex: 1; min-width: 200px; }
.nsm-welcome-band-title { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }

/* ---------- contact ---------- */

.nsm-form-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--nsm-text-subtle); }
.nsm-success-card { background: var(--nsm-success-tint); border: 1px solid var(--nsm-success-border); border-radius: var(--nsm-r-card); padding: 28px; color: var(--nsm-success-text); }
.nsm-success-card .nsm-h2--thanks, .nsm-success-card .nsm-body--15 { color: var(--nsm-success-text); }
.nsm-numbered { display: flex; flex-direction: column; gap: 14px; }
.nsm-numbered-item { display: flex; gap: 12px; }
.nsm-num { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--nsm-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; }
.nsm-numbered-text { font-size: 14px; line-height: 1.55; color: var(--nsm-text-2); }
.nsm-field-error { margin: 6px 0 0; font-size: 12.5px; color: var(--nsm-maple); }

/* ---------- reveal on arrival ----------
   These pages are static, so the only motion on them is content arriving: each band fades in and
   its content rises a little behind the fade. Bands already on screen animate on load; the rest
   animate when they are scrolled to. wwwroot/js/marketing.js does the observing.

   Every rule here is gated on `.nsm-js`, which that script's head stub sets, and that gate is
   load-bearing: with no JavaScript — or a crawler that does not run it — nothing is ever hidden.
   A marketing page must never need script to be readable. Never write these selectors without it.

   A band fades but does not move, while its inner wrap moves: translating a full-width coloured
   section leaves a sliver of the page showing against its neighbour for the length of the animation. */
.nsm-js main > * { opacity: 0; transition: opacity 300ms var(--nsm-ease); }
.nsm-js main > .is-in { opacity: 1; }
.nsm-js main > * > .nsm-wrap,
.nsm-js main > .nsm-flow-wrap { transform: translateY(14px); transition: transform 300ms var(--nsm-ease); }
.nsm-js main > .is-in > .nsm-wrap,
.nsm-js main > .nsm-flow-wrap.is-in { transform: none; }

/* Cards in a band arrive one after another rather than all together. Delay only: the rise belongs
   to the wrap, so nothing here stacks a second transform on top of it. */
.nsm-js main > * .nsm-grid > * { opacity: 0; transition: opacity 260ms var(--nsm-ease); }
.nsm-js main > .is-in .nsm-grid > * { opacity: 1; }
.nsm-js main > .is-in .nsm-grid > :nth-child(2) { transition-delay: 70ms; }
.nsm-js main > .is-in .nsm-grid > :nth-child(3) { transition-delay: 140ms; }
.nsm-js main > .is-in .nsm-grid > :nth-child(4) { transition-delay: 200ms; }
.nsm-js main > .is-in .nsm-grid > :nth-child(n+5) { transition-delay: 250ms; }

/* Reduced motion gets the content, not the arrival. Neutralised in CSS rather than in the script
   so it holds even while the script is still in flight. */
@media (prefers-reduced-motion: reduce) {
  .nsm-js main > *,
  .nsm-js main > * .nsm-grid > * { opacity: 1; }
  .nsm-js main > * > .nsm-wrap,
  .nsm-js main > .nsm-flow-wrap { transform: none; }
}

/* ---------- small screens ----------
   The handoff's layouts reflow on auto-fit grids alone; these two clamps are the one addition,
   because a 58px headline on a 360px screen is three words per line. */
@media (max-width: 480px) {
  .nsm-h1 { font-size: 36px; }
  .nsm-h1--hero { font-size: 40px; }
  .nsm-h2--feature { font-size: 32px; }
  .nsm-h2, .nsm-h2--36 { font-size: 28px; }
  .nsm-plan-amount { font-size: 32px; }
  .nsm-welcome-card { padding: 28px; }
}

/* The nav, on a phone. Two things go wrong at this width and this is where both are fixed.

   The bug: `.nsm-nav-actions` is `flex: none`, so it sat frozen at its max-content width (372px)
   inside a 312px content box — running past the right edge, taking the page's horizontal scroll
   with it, and clipping "Book a demo", which is the site's primary call to action on every page.
   Its own `flex-wrap: wrap` could never save it, because a box that refuses to shrink is never
   narrow enough to need to wrap. `flex-basis: 100%` gives it exactly the line it is on, and its
   children then wrap inside it as they were always meant to.

   The tidying: below about 470px the section links start wrapping too, which leaves the logo
   floating against a two-line block and reads as a broken bar rather than a stacked one. Giving
   the links their own row as well turns it into three deliberate rows — logo, sections, actions —
   and the tighter gutter buys back the width to keep all four section links on one line.

   Both are scoped to this query rather than done by relaxing `flex: none` on the base rule. The
   base rule would have worked too, but this is the shared nav on every page of the site, and
   keeping the change inside a max-width query makes "nothing wider than 560px moved" something the
   diff shows rather than something a reviewer has to take on trust. Between here and about 870px
   the bar goes on wrapping exactly as it did before. */
@media (max-width: 560px) {
  .nsm-nav-inner { gap: 12px; padding: 12px 16px; }
  .nsm-nav-banner-inner { padding: 7px 16px; }
  .nsm-nav-links,
  .nsm-nav-actions { flex-basis: 100%; min-width: 0; }

  /* Let a nowrap phrase wrap here. Every .nsm-nowrap on this site is a phrase with the maple leaf
     immediately after it, and what holds the leaf there is the absence of whitespace in the markup,
     not this rule — so wrapping costs nothing, and it stops a French phrase, which runs longer than
     the English it was laid out against, from scrolling the whole page sideways. */
  .nsm-nowrap { white-space: normal; }
}

/* Touch: the small text links grow to a 44px target; desktop density is untouched. */
@media (pointer: coarse) {
  .nsm-nav-links a, .nsm-foot-links a, .nsm-foot-legal a, .nsm-more, .nsm-back,
  .nsm-lang-opt, .nsm-foot-lang a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}