/* nearme.com.au marketing pages (landing v2; round 4, 10 Nov 2026; round 7, 11 Nov). Night (dark) first, Mist (light) second; both
   from the logo's blue family. Every text pair here measures 4.5:1 or better (the brand blue is never used as text
   on Mist). No green anywhere; no italics in headings. Fonts self-hosted under the SIL Open Font License. */
@font-face { font-family: "Inter"; src: url("/landing-v2/fonts/Inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/landing-v2/fonts/InstrumentSerif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/landing-v2/fonts/JetBrainsMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --bg: #0A1420; --panel: #10233A; --raised: #1A3150; --ink: #E6ECF2; --muted: #9AABBD; --line: rgba(230,236,242,.10);
  --brand: #2C9BF5; --primary: #2C9BF5; --primary-ink: #06101B; --link: #8ED8FA; --sand: #D9B98C; --root-ink: #C9A77A;
  --hero-ink: #F2F6FA; --hero-sub: rgba(242,246,250,.86);
  --hero-wash: linear-gradient(180deg, rgba(10,20,32,.55) 0%, rgba(10,20,32,.12) 30%, rgba(10,20,32,.2) 60%, rgba(10,20,32,.72) 84%, var(--bg) 100%);
  --art-wash: linear-gradient(180deg, rgba(10,20,32,.15), rgba(10,20,32,.55));
  --app-bg: #0B1522; --app-bar: #0E1A2A; --app-bubble: #152538; --app-ink: #E6ECF2; --app-dim: #7E93AA; --app-line: rgba(255,255,255,.07);
  --mono-filter: invert(1); --photo-night: block; --photo-mist: none; --em-dark: block; --em-light: none;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #F2F6F9; --panel: #FFFFFF; --raised: #DDE8F0; --ink: #0F2131; --muted: #4A5C6B; --line: rgba(15,33,49,.12);
  --primary: #1B6FB8; --primary-ink: #FFFFFF; --link: #1B6FB8; --sand: #8E6A3E; --root-ink: #8E6A3E;
  --hero-ink: #0C2236; --hero-sub: rgba(12,34,54,.82);
  --hero-wash: linear-gradient(180deg, rgba(242,246,249,.55) 0%, rgba(242,246,249,.08) 45%, rgba(242,246,249,.12) 75%, var(--bg) 100%);
  --art-wash: linear-gradient(180deg, rgba(242,246,249,.1), rgba(242,246,249,.5));
  --mono-filter: none; --photo-night: none; --photo-mist: block; --em-dark: none; --em-light: block;
  color-scheme: light; } }
:root[data-theme="light"] {
  --bg: #F2F6F9; --panel: #FFFFFF; --raised: #DDE8F0; --ink: #0F2131; --muted: #4A5C6B; --line: rgba(15,33,49,.12);
  --primary: #1B6FB8; --primary-ink: #FFFFFF; --link: #1B6FB8; --sand: #8E6A3E; --root-ink: #8E6A3E;
  --hero-ink: #0C2236; --hero-sub: rgba(12,34,54,.82);
  --hero-wash: linear-gradient(180deg, rgba(242,246,249,.55) 0%, rgba(242,246,249,.08) 45%, rgba(242,246,249,.12) 75%, var(--bg) 100%);
  --art-wash: linear-gradient(180deg, rgba(242,246,249,.1), rgba(242,246,249,.5));
  --mono-filter: none; --photo-night: none; --photo-mist: block; --em-dark: none; --em-light: block;
  color-scheme: light; }
/* The sans alternative for the headlines, for Wesly to judge by eye: <html data-type="sans"> */
:root[data-type="sans"] { --display: var(--sans); }
:root[data-type="sans"] h1, :root[data-type="sans"] .h2, :root[data-type="sans"] .nm-journey__step h3, :root[data-type="sans"] .nm-acc__btn { font-weight: 600 !important; letter-spacing: -.035em !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.015em; font-weight: 400; }
h3 { font: 600 17px/1.35 var(--sans); letter-spacing: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.col { max-width: 760px; }
.eyebrow { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--link); margin-bottom: 12px; }
.eyebrow--mono { font: 500 12px/1 var(--mono); letter-spacing: .12em; }
.muted { color: var(--muted); }
.tag { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--link); display: block; margin-bottom: 8px; }
.h2 { font: 400 clamp(32px, 4.4vw, 48px)/1.08 var(--display); letter-spacing: -.01em; }
.h2--sm { font-size: clamp(28px, 3.2vw, 38px); }
.lead { font-size: 18px; color: var(--muted); margin-top: 16px; max-width: 62ch; }
main { position: relative; z-index: 1; }
.nm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nm-band { padding-block: 96px 32px; position: relative; }
@media (max-width: 760px) { .nm-band { padding-block: 72px 24px; } }
.nm-soon { font: 600 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px; font-style: normal; margin-left: 7px; vertical-align: 2px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--sans); padding: 15px 20px; border-radius: 12px; white-space: nowrap; background: var(--primary); color: var(--primary-ink); text-decoration: none; border: 0; cursor: pointer; min-height: 44px; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn--ghost { background: color-mix(in srgb, var(--bg) 35%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); backdrop-filter: blur(6px); }
.nm-hero .btn--ghost { color: var(--hero-ink); border-color: color-mix(in srgb, var(--hero-ink) 32%, transparent); }
.btn--sm { padding: 10px 14px; font-size: 14px; border-radius: 10px; min-height: 40px; }
.btn--wide { width: 100%; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* reveals: text is visible by default; the from-state is only added by script, and put back when a block leaves */
.rv { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.rv.pre { opacity: .8; transform: translateY(28px); filter: blur(6px); } /* .8, not lower: text in the from-state must still pass 4.5:1 */
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }

/* the roots: one fixed layer ABOVE the sections (Wesly, 10 Nov), drawn in text characters by site.js from the
   tree's root node down to the point where they converge; faint enough that words under them stay readable */

/* header: logo, the menu, log in, one primary action; a sheet on phones */
.nm-logo { display: inline-flex; align-items: center; }
.nm-logo img { height: 26px; width: auto; }
.nm-logo .nm-logo__light { display: none; } .nm-logo .nm-logo__dark { display: block; }
:root[data-theme="light"] .nm-logo__light { display: block; } :root[data-theme="light"] .nm-logo__dark { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nm-logo__light { display: block; } :root:not([data-theme="dark"]) .nm-logo__dark { display: none; } }
.nm-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 18px; position: relative; z-index: 5; width: 100%; }
.nm-nav__links { flex: 1; display: flex; justify-content: center; }
.nm-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nm-menu__item { position: relative; }
.nm-menu__btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 9px 12px; border-radius: 10px; font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer; text-decoration: none; transition: background .25s, color .25s; }
.nm-nav--photo .nm-menu__btn { color: var(--hero-ink); }
.nm-menu__btn:hover, .nm-menu__item.open > .nm-menu__btn, .nm-menu__item:focus-within > .nm-menu__btn { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.nm-nav--photo .nm-menu__btn:hover, .nm-nav--photo .nm-menu__item.open > .nm-menu__btn, .nm-nav--photo .nm-menu__item:focus-within > .nm-menu__btn { background: color-mix(in srgb, var(--hero-ink) 14%, transparent); }
.nm-menu__btn svg { opacity: .7; transition: transform .25s; }
.nm-menu__item--has:hover > .nm-menu__btn svg, .nm-menu__item.open > .nm-menu__btn svg { transform: rotate(180deg); }
.nm-menu__panel { position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, 6px); min-width: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; z-index: 6; color: var(--ink); }
.nm-menu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nm-menu__item--has:hover > .nm-menu__panel, .nm-menu__item.open > .nm-menu__panel, .nm-menu__item:focus-within > .nm-menu__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nm-menu__panel ul { list-style: none; margin: 0; padding: 0; display: grid; }
.nm-menu__panel a { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); transition: background .2s; }
.nm-menu__panel a:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.nm-menu__panel b { font: 600 14px/1.3 var(--sans); display: flex; align-items: center; }
.nm-menu__panel span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.nm-menu__group h3 { margin: 6px 12px 4px; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.nm-menu__e { font-style: normal; margin-right: 8px; font-size: 14px; }
/* the Explore panel: the directory's kinds in columns */
.nm-menu__panel--wide { min-width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 10px; }
.nm-menu__panel--wide .nm-menu__group:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
.nm-menu__panel--wide .nm-menu__group:last-child h3 { display: none; }
.nm-menu__panel--wide .nm-menu__group:last-child a { display: flex; align-items: center; justify-content: space-between; } .nm-menu__panel--wide .nm-menu__group:last-child a::after { content: "\2192"; color: var(--link); }
.nm-nav__tools { display: flex; gap: 6px; align-items: center; }
.nm-nav__login { font: 500 14px/1 var(--sans); color: var(--ink); text-decoration: none; padding: 9px 10px; border-radius: 10px; }
.nm-nav--photo .nm-nav__login { color: var(--hero-ink); }
.nm-nav__login:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.nm-theme { width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: color-mix(in srgb, var(--bg) 35%, transparent); color: var(--ink); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.nm-nav--photo .nm-theme { color: var(--hero-ink); border-color: color-mix(in srgb, var(--hero-ink) 32%, transparent); }
.nm-theme__sun { display: none; } .nm-theme__moon { display: block; }
:root[data-theme="light"] .nm-theme__sun { display: block; } :root[data-theme="light"] .nm-theme__moon { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nm-theme__sun { display: block; } :root:not([data-theme="dark"]) .nm-theme__moon { display: none; } }
.nm-burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: color-mix(in srgb, var(--bg) 35%, transparent); color: var(--ink); flex-direction: column; gap: 5px; align-items: center; justify-content: center; cursor: pointer; }
.nm-nav--photo .nm-burger { color: var(--hero-ink); border-color: color-mix(in srgb, var(--hero-ink) 32%, transparent); }
.nm-burger i { width: 18px; height: 2px; background: currentColor; display: block; border-radius: 2px; }
@media (max-width: 1040px) { .nm-nav__links, .nm-nav__login { display: none; } .nm-burger { display: flex; } }
@media (max-width: 400px) { .nm-nav__tools .btn--sm { display: none; } }
.nm-sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--ink); overflow: auto; padding: 0 18px 32px; opacity: 0; transition: opacity .25s; }
.nm-sheet.in { opacity: 1; }
.nm-sheet[hidden] { display: none; }
.nm-sheet__top { display: flex; justify-content: space-between; align-items: center; padding-block: 18px; }
.nm-sheet__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.nm-sheet__body { display: grid; gap: 20px; }
.nm-sheet__group h2 { font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--link); margin: 0 0 6px; }
.nm-sheet__group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.nm-sheet__group a { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.nm-sheet__group a span { display: none; }
.nm-sheet__group b { font: 600 16px/1.3 var(--sans); display: flex; align-items: center; } .nm-sheet__group span { font-size: 13px; color: var(--muted); }
.nm-sheet__one { display: block; font: 600 16px/1.3 var(--sans); color: var(--ink); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
.nm-sheet__cta { display: grid; gap: 10px; margin-top: 8px; }

/* hero: words left, a phone right with the chat running inside it */
.nm-hero { position: relative; min-height: min(860px, 100vh); overflow: hidden; color: var(--hero-ink); isolation: isolate; display: grid; grid-template-rows: auto 1fr; z-index: 1; }
.nm-hero--short { min-height: min(620px, 78vh); }
.nm-photo { position: absolute; inset: -6% 0 0; z-index: -3; transform: translate3d(0, var(--py, 0px), 0) scale(1.06); will-change: transform; }
.nm-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; background-size: cover; background-position: center; }
.nm-photo__img--night { display: var(--photo-night); }
.nm-photo__img--mist { display: var(--photo-mist); object-position: center 40%; }
.nm-hero__wash { position: absolute; inset: 0; z-index: -2; background: var(--hero-wash); }
.nm-stars { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.nm-hero__grid { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; padding-top: 20px; padding-bottom: 100px; width: 100%; }
.nm-hero__grid--one { grid-template-columns: minmax(0, 1fr); padding-bottom: 80px; }
.nm-hero__body { display: grid; gap: 20px; justify-items: start; }
.nm-hero h1 { font: 400 clamp(40px, 5vw, 70px)/1.02 var(--display); letter-spacing: -.02em; max-width: 14ch; }
.nm-hero--short h1 { font-size: clamp(36px, 5vw, 64px); max-width: 18ch; }
.nm-hero__sub { font-size: clamp(16.5px, 1.5vw, 19px); color: var(--hero-sub); max-width: 46ch; }
.nm-hero__fine { font: 500 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hero-sub); }
.nm-display { position: relative; min-width: 0; display: grid; justify-items: center; gap: 14px; }
.nm-handset { width: 340px; max-width: 100%; }   /* the hero phone: NearMe OS 2's whole iPhone (hero-chat.css), Apple's shape from this width */
.nm-handset .os-phone { filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); }   /* follows the phone's outline, side buttons included */
.nm-display__cap { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hero-sub); }
@media (max-width: 980px) { .nm-hero__grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 80px; } .nm-hero h1 { max-width: 12ch; } .nm-handset { width: min(300px, 80vw); } }

/* the voice note: a play dot, moving bars while it plays, and the transcript reading itself out underneath */
.nm-vn { display: grid; gap: 6px; }
.nm-vn__row { display: flex; align-items: center; gap: 8px; }
.nm-vn__play { width: 20px; height: 20px; border-radius: 50%; background: currentColor; position: relative; flex: none; opacity: .9; }
.nm-vn__play::after { content: ""; position: absolute; left: 7px; top: 5px; border-left: 7px solid var(--app-bg, #0B1522); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.nm-vn__bars { display: inline-flex; gap: 2px; align-items: center; height: 18px; flex: 1; }
.nm-vn__bars b { width: 2.5px; height: 4px; background: currentColor; border-radius: 1px; display: block; opacity: .85; }
.nm-vn__bars b:nth-child(3n) { height: 12px; } .nm-vn__bars b:nth-child(3n+1) { height: 7px; } .nm-vn__bars b:nth-child(4n) { height: 15px; } .nm-vn__bars b:nth-child(7n) { height: 9px; }
.playing .nm-vn__bars b { animation: vbar .9s ease-in-out infinite alternate; }
.playing .nm-vn__bars b:nth-child(2n) { animation-duration: .7s; animation-delay: .15s; } .playing .nm-vn__bars b:nth-child(3n) { animation-delay: .3s; } .playing .nm-vn__bars b:nth-child(5n) { animation-duration: 1.1s; }
@keyframes vbar { from { transform: scaleY(.35); } to { transform: scaleY(1.25); } }
.nm-vn__secs { font: 500 11.5px/1 var(--mono); opacity: .8; }
.nm-vn__text { font-size: 12.5px; line-height: 1.45; }
.nm-cap span { color: color-mix(in srgb, currentColor 60%, transparent); transition: color .22s; } /* 60%, not lower: an unread word still passes 4.5:1 on the bubble */
.nm-cap span.lit { color: currentColor; }

/* anything with data-step inside a data-play / data-anim / data-ai box arrives one item at a time; without JavaScript it's all there */
.js [data-play] [data-step], .js [data-anim] [data-step], .js [data-ai] [data-step] { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
[data-play].on [data-step], [data-anim].on [data-step], [data-ai].on [data-step] { opacity: 1; transform: none; }
.on [data-step="1"] { transition-delay: .9s } .on [data-step="2"] { transition-delay: 1.9s } .on [data-step="3"] { transition-delay: 2.8s } .on [data-step="4"] { transition-delay: 3.7s } .on [data-step="5"] { transition-delay: 4.6s }
.nm-pcards.on [data-step] { transition-delay: 0s; }
.nm-receipt.on [data-step="1"] { transition-delay: .1s } .nm-receipt.on [data-step="2"] { transition-delay: .2s } .nm-receipt.on [data-step="3"] { transition-delay: .3s } .nm-receipt.on [data-step="4"] { transition-delay: .4s } .nm-receipt.on [data-step="5"] { transition-delay: .5s }

/* chat bubbles (shared) */
.nm-chat { display: grid; gap: 8px; }
.nm-chat__b { padding: 10px 12px; border-radius: 14px; background: var(--raised); color: var(--ink); font-size: 14px; line-height: 1.45; max-width: 88%; justify-self: start; }
.nm-chat__b--me { background: var(--primary); color: var(--primary-ink); justify-self: end; }
.nm-chat__b--staff { border: 1px solid color-mix(in srgb, var(--sand) 60%, transparent); }
.nm-chat__b--staff b { display: block; font-size: 12px; color: var(--sand); margin-bottom: 2px; }
.nm-chat--inline { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-top: 22px; }

/* Earned Media's mark: white on Night, colour on Mist */
.nm-em { display: none; width: 100%; height: auto; }
.nm-em--dark { display: var(--em-dark); } .nm-em--light { display: var(--em-light); }
.nm-emlink { display: block; width: 150px; }
.nm-emlink--sm { width: 130px; margin-top: 14px; opacity: .9; }
.nm-foot__em { display: grid; gap: 6px; margin-top: 16px; width: 140px; text-decoration: none; }
.nm-foot__em span { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* proof: three cards */
.nm-proof__head { display: flex; justify-content: space-between; align-items: end; gap: 20px 40px; flex-wrap: wrap; }
.nm-trust__facts { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 8px 22px; flex-wrap: wrap; font: 500 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nm-trust__facts li::before { content: "✓ "; color: var(--link); }
.nm-pcards { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nm-pcard { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 18px; align-content: start; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; }
.nm-pcard:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: 0 24px 50px rgba(0,0,0,.28); }
/* the customer's own mark, linked to its site */
.nm-pcard__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); border-radius: 14px; padding: 4px; margin: -4px; transition: background .25s; }
.nm-pcard__brand:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.nm-pcard__brand img { height: 56px; width: auto; border-radius: 12px; background: #fff; padding: 4px; flex: none; }
.nm-pcard__brand span { display: grid; gap: 1px; min-width: 0; } .nm-pcard__brand b { font: 600 15px/1.3 var(--sans); } .nm-pcard__brand em { font: 500 12px/1.4 var(--mono); color: var(--link); font-style: normal; }
.nm-pcard__brand i { margin-left: auto; font-style: normal; color: var(--muted); font-size: 18px; transition: transform .25s, color .25s; } .nm-pcard__brand:hover i { transform: translate(2px, -2px); color: var(--link); }
.nm-pcard blockquote { margin: 0; } .nm-pcard blockquote p { font: 400 21px/1.35 var(--display); }
.nm-pcard footer { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 2px; font-size: 13.5px; color: var(--muted); }
.nm-pcard footer b { color: var(--ink); font-weight: 600; }
/* the builder, set apart: a thin strip, not a card */
.nm-builtby { margin-top: 18px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px 22px; align-items: center; padding: 16px 22px; border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 16px; }
.nm-builtby__k { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nm-builtby .nm-emlink { width: 140px; }
.nm-builtby p { font-size: 14px; color: var(--muted); line-height: 1.5; }
.nm-builtby > a { font: 500 12.5px/1 var(--mono); color: var(--link); text-decoration: none; white-space: nowrap; } .nm-builtby > a i { font-style: normal; }
@media (max-width: 900px) { .nm-pcards { grid-template-columns: 1fr; } .nm-builtby { grid-template-columns: auto 1fr; } .nm-builtby p { grid-column: 1 / -1; } }

/* how it works (round 7): three steps on the left, the scene on the right, about one screen tall. It plays by itself
   (Nick, 11 Nov: "just play it"; no scroll lock): the step being played is lit, and a thin bar under it fills while
   its scene runs. On a phone the steps are three tabs above the scene and the words of the one playing sit under it. */
.nm-journey { position: relative; margin-top: 30px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--muted) 24%, transparent) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--panel); }
.nm-journey__steps { list-style: none; margin: 0; padding: 20px; display: grid; gap: 6px; align-content: center; border-right: 1px solid var(--line); }
.nm-journey__btn { display: grid; gap: 6px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 16px; padding: 16px 18px 20px; color: var(--ink); cursor: pointer; position: relative; overflow: hidden; font: inherit; transition: background .3s, border-color .3s; }
.nm-journey__btn:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.nm-journey__btn.on { background: color-mix(in srgb, var(--bg) 60%, transparent); border-color: var(--line); }
.nm-journey__btn .k { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.nm-journey__btn.on .k { color: var(--link); }
.nm-journey__tab { display: none; }
.nm-journey__h { font: 400 clamp(22px, 2.2vw, 28px)/1.1 var(--display); letter-spacing: -.01em; }
.nm-journey__p { color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 40ch; }
.nm-journey__bar { position: absolute; left: 18px; right: 18px; bottom: 9px; height: 2px; border-radius: 2px; background: var(--line); opacity: 0; transition: opacity .3s; }
.nm-journey__bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--link); transform-origin: left; transform: scaleX(var(--sp, 0)); }
.nm-journey__btn.on .nm-journey__bar { opacity: 1; }
.nm-journey__scene { position: relative; min-width: 0; min-height: clamp(480px, 66vh, 600px); }   /* stretches to the box: no gap under the scene (Wesly, 11 Nov) */
.nm-journey__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nm-journey__notes { display: none; }
@media (max-width: 820px) {
  .nm-journey { grid-template-columns: 1fr; }
  .nm-journey__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .nm-journey__btn { padding: 10px 6px 15px; text-align: center; border-radius: 12px; justify-items: center; }
  .nm-journey__full, .nm-journey__h, .nm-journey__p { display: none; }
  .nm-journey__tab { display: inline; }
  .nm-journey__btn .k { font-size: 11px; letter-spacing: .05em; }
  .nm-journey__bar { left: 10px; right: 10px; bottom: 6px; }
  .nm-journey__scene { min-height: min(132vw, 540px); }
  .nm-journey__notes { display: grid; list-style: none; margin: 0; padding: 14px 16px 8px; border-top: 1px solid var(--line); }
  .nm-journey__notes li { display: grid; gap: 4px; }
  .js .nm-journey__notes li { grid-area: 1 / 1; opacity: 0; transition: opacity .35s; }
  .js .nm-journey__notes li.on { opacity: 1; }
  .nm-journey__notes b { font: 400 22px/1.15 var(--display); font-weight: 400; }
  .nm-journey__notes span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
}

/* what you get: a week on one rail, Monday to Sunday, each day's one thing hanging off it */
.nm-week { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 7%, transparent) 55%, transparent); }
.nm-week__head { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; }
.nm-week__head .lead { max-width: 34ch; padding-bottom: 6px; }
.nm-week__rail { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 10px; position: relative; }
.nm-week__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 33px; height: 2px; background: linear-gradient(90deg, transparent, var(--line) 6%, var(--line) 94%, transparent); }
.nm-week__day { display: grid; justify-items: center; position: relative; }
.nm-week__d { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); height: 26px; }
.nm-week__day i { width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--link); position: relative; z-index: 1; }
.nm-week__day--off i { border-color: var(--muted); border-style: dashed; }
.nm-week__card { margin-top: 24px; width: 100%; padding: 14px 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; position: relative; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s; }
.nm-week__card::before { content: ""; position: absolute; left: 50%; top: -24px; width: 1.5px; height: 24px; background: var(--line); }
.nm-week__day:nth-child(even) .nm-week__card { margin-top: 56px; } .nm-week__day:nth-child(even) .nm-week__card::before { top: -56px; height: 56px; }
.nm-week__card b { font: 400 20px/1.15 var(--display); } .nm-week__card p { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.nm-week__day:hover .nm-week__card { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.nm-week__day--off .nm-week__card { border-style: dashed; background: transparent; }
.nm-week__rail.on [data-step="1"] { transition-delay: .12s } .nm-week__rail.on [data-step="2"] { transition-delay: .24s } .nm-week__rail.on [data-step="3"] { transition-delay: .36s } .nm-week__rail.on [data-step="4"] { transition-delay: .48s } .nm-week__rail.on [data-step="5"] { transition-delay: .6s }
@media (max-width: 900px) { .nm-week__rail { grid-template-columns: 1fr; gap: 14px; } .nm-week__rail::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, transparent, var(--line) 4%, var(--line) 96%, transparent); } .nm-week__day { grid-template-columns: 14px 44px minmax(0, 1fr); justify-items: start; align-items: start; gap: 0 12px; } .nm-week__day i { grid-column: 1; margin-top: 3px; } .nm-week__d { grid-column: 2; margin-top: 3px; } .nm-week__card { grid-column: 3; margin-top: 0 !important; } .nm-week__card::before { display: none; } }

/* cards (how-it-works page) */
.nm-cards { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.nm-cards--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.nm-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start; min-width: 0; position: relative; overflow: hidden; }
.nm-card p { color: var(--muted); font-size: 14.5px; }
.nm-todo { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; color: var(--ink); margin-top: 6px; }
.nm-todo__tick { width: 22px; height: 22px; border-radius: 50%; background: var(--link); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.nm-push { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink); margin-top: 6px; transition: transform .6s cubic-bezier(.2,.7,.2,1) .7s, opacity .6s .7s; }
.js .nm-push { transform: translateY(-14px); opacity: 0; }
.nm-push span { color: var(--muted); }
.on .nm-push { transform: none; opacity: 1; }

/* what NearMe builds: a list that opens softly; the real pages beside it in a box of their own */
.nm-builds__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.nm-acc { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.nm-acc__item { border-bottom: 1px solid var(--line); }
.nm-acc__item h3 { margin: 0; font: inherit; }
.nm-acc__btn { display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 16px 8px; border-radius: 12px; font: 400 clamp(21px, 2.1vw, 27px)/1.15 var(--display); letter-spacing: -.01em; color: var(--muted); cursor: pointer; transition: color .4s ease, background .4s ease, padding-left .4s ease; }
.nm-acc__num { font: 500 12px/1 var(--mono); color: var(--link); letter-spacing: .08em; }
.nm-acc__chev { width: 18px; height: 18px; opacity: .45; transition: transform .4s ease, opacity .4s ease; }
.nm-acc__btn:hover { color: var(--ink); background: color-mix(in srgb, var(--brand) 8%, transparent); padding-left: 14px; }
.nm-acc__item.on .nm-acc__btn { color: var(--ink); }
.nm-acc__item.on .nm-acc__chev { transform: rotate(90deg); opacity: 1; }
.nm-acc__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
.nm-acc__body > div { overflow: hidden; min-height: 0; }
.js .nm-acc__body { grid-template-rows: 0fr; } .js .nm-acc__item.on .nm-acc__body { grid-template-rows: 1fr; }
.nm-acc__body p { color: var(--muted); padding: 0 8px; max-width: 46ch; opacity: 0; transition: opacity .45s ease .1s; }
.nm-acc__body ul { list-style: none; margin: 12px 0 0; padding: 0 8px 18px; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink); opacity: 0; transition: opacity .45s ease .2s; }
.nm-acc__item.on .nm-acc__body p, .nm-acc__item.on .nm-acc__body ul { opacity: 1; }
.nm-acc__body li { padding-left: 18px; position: relative; } .nm-acc__body li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.nm-builds__art { position: relative; min-height: 600px; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); isolation: isolate; }
.nm-topo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nm-fcard { position: absolute; inset: 10% 7%; }
.nm-fcard__face { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scale(.985); margin: 0; opacity: 0; transition: opacity .55s ease, transform .55s ease; pointer-events: none; }
.nm-fcard__face.on { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
.nm-fcard__face img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); }
.nm-fcard__face figcaption { margin-top: 12px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.nm-fcard__app { background: color-mix(in srgb, var(--bg) 94%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: 16px; padding: 22px 24px; display: grid; gap: 12px; box-shadow: 0 30px 70px rgba(0,0,0,.45); font-family: var(--mono); max-width: 420px; margin: 0 auto; }
.nm-fcard__k { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.nm-fcard__app p { font: 400 13.5px/1.5 var(--sans); color: var(--muted); }
.nm-fcard__btns { display: flex; gap: 6px; margin-top: 6px; font: 600 12.5px/1 var(--sans); }
.nm-fcard__btns span { padding: 9px 12px; border-radius: 999px; color: var(--muted); border: 1px solid var(--line); } .nm-fcard__btns .yes { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.nm-fcard__diff { display: grid; gap: 6px; font: 500 13px/1.4 var(--mono); }
.nm-fcard__diff .was { color: var(--muted); text-decoration: line-through; } .nm-fcard__diff .now { color: var(--ink); }
@media (max-width: 900px) { .nm-builds__grid { grid-template-columns: 1fr; gap: 24px; } .nm-builds__art { min-height: 400px; } .nm-fcard { inset: 8% 5%; } }

/* two-column sections */
.nm-two__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.nm-two__txt .lead { margin-top: 14px; }
.nm-two__art { position: relative; min-height: 380px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.nm-two__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nm-two__cap { position: absolute; left: 14px; bottom: 12px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); z-index: 1; }
.nm-hand { display: grid; align-content: center; padding: 18px; min-height: 320px; }
.nm-hand .nm-chat--inline { margin: 0; background: transparent; border: 0; padding: 0; }
.nm-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; color: var(--muted); }
.nm-list li { padding-left: 20px; position: relative; }
.nm-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.nm-list b { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) { .nm-two__grid { grid-template-columns: 1fr; gap: 24px; } .nm-two__art { min-height: 300px; } }
.nm-ai { position: absolute; left: 5%; top: 7%; width: min(280px, 62%); background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(8px); display: grid; gap: 6px; font-size: 13px; transition: opacity .6s .6s, transform .6s .6s; z-index: 1; }
.js .nm-ai { opacity: 0; transform: translateY(10px); }
.nm-ai.on { opacity: 1; transform: none; }
.nm-ai__q { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nm-ai__r { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.nm-ai__r b { font-weight: 600; } .nm-ai__r--you b { color: var(--link); }
.nm-ai__r span { color: var(--muted); font: 500 11.5px/1.4 var(--mono); }

/* where you stand: the suburb from above runs the full width behind, fading into the page; the scores float on it */
.nm-stand { position: relative; isolation: isolate; min-height: 560px; display: grid; align-items: center; overflow: hidden; }
.nm-stand__map { position: absolute; inset: 0; z-index: -1; opacity: .8; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.nm-stand__map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nm-stand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 42%, transparent 62%, transparent 100%); }
.nm-stand__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.nm-stand__cards { display: grid; gap: 14px; justify-items: end; }
.nm-score, .nm-ai--stand { position: static; width: min(380px, 100%); background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; backdrop-filter: blur(8px); display: grid; gap: 8px; font-size: 13.5px; }
.nm-score__k { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nm-score ol { list-style: none; margin: 0; padding: 0; counter-reset: r; display: grid; }
.nm-score li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); counter-increment: r; }
.nm-score li::before { content: counter(r); font: 500 11px/1 var(--mono); color: var(--muted); width: 14px; }
.nm-score li b { font-weight: 600; } .nm-score li span { margin-left: auto; color: var(--muted); font: 500 11.5px/1.4 var(--mono); }
.nm-score li.you b { color: var(--link); } .nm-score li.you { background: color-mix(in srgb, var(--brand) 12%, transparent); margin: 0 -8px; padding: 7px 8px; border-radius: 8px; border-top-color: transparent; }
.nm-stand__cap { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 820px) { .nm-stand { min-height: 0; } .nm-stand::before { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 55%, transparent)); } .nm-stand__grid { grid-template-columns: 1fr; gap: 20px; } .nm-stand__cards { justify-items: stretch; } .nm-score, .nm-ai--stand { width: 100%; } }

/* a real team: three roles side by side, one hairline between each; the chat and the builder underneath */
.nm-team { background: linear-gradient(180deg, color-mix(in srgb, var(--sand) 7%, transparent), transparent 70%); border-top: 1px solid var(--line); }
.nm-team__head { display: grid; gap: 10px; }
.nm-team__row { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, var(--sand) 50%, transparent); border-bottom: 1px solid var(--line); }
.nm-role { padding: 26px 24px 28px; display: grid; gap: 10px; align-content: start; border-left: 1px solid var(--line); position: relative; transition: background .35s; }
.nm-role:first-child { border-left: 0; }
.nm-role::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--sand); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.nm-role:hover { background: color-mix(in srgb, var(--sand) 8%, transparent); } .nm-role:hover::before { transform: scaleX(1); }
.nm-role__n { font: 400 30px/1 var(--display); color: var(--sand); }
.nm-role h3 { font: 400 24px/1.15 var(--display); } .nm-role p { color: var(--muted); font-size: 14.5px; }
.nm-team__foot { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; }
.nm-team__foot .nm-chat--inline { margin: 0; }
.nm-team__by { display: grid; gap: 4px; }
@media (max-width: 820px) { .nm-team__row { grid-template-columns: 1fr; } .nm-role { border-left: 0; border-top: 1px solid var(--line); } .nm-role:first-child { border-top: 0; } .nm-team__foot { grid-template-columns: 1fr; } }

/* in your pocket: one phone in the middle, what lands on it called out around it. SWAP POINT: a real render of
   nearme-os at phone size goes in .nm-phone__scr */
.nm-pocket__head { text-align: center; justify-items: center; margin: 0 auto; }
.nm-pocket__head .lead { max-width: 48ch; }
.nm-pocket__stage { position: relative; margin-top: 36px; min-height: 640px; display: grid; place-items: center; background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%); }
.nm-callout { position: absolute; width: min(260px, 26%); display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 85%, transparent); border: 1px solid var(--line); backdrop-filter: blur(6px); font-size: 13.5px; }
.nm-callout b { font: 600 14.5px/1.3 var(--sans); } .nm-callout span { color: var(--muted); line-height: 1.45; }
.nm-callout::after { content: ""; position: absolute; top: 50%; width: 60px; height: 1.5px; }
.nm-callout::before { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--link); box-shadow: 0 0 10px var(--link); }
.nm-callout--l1, .nm-callout--l2 { left: 6%; text-align: right; } .nm-callout--l1::after, .nm-callout--l2::after { left: 100%; background: linear-gradient(90deg, var(--link), transparent); } .nm-callout--l1::before, .nm-callout--l2::before { left: calc(100% + 56px); }
.nm-callout--r1, .nm-callout--r2 { right: 6%; } .nm-callout--r1::after, .nm-callout--r2::after { right: 100%; background: linear-gradient(270deg, var(--link), transparent); } .nm-callout--r1::before, .nm-callout--r2::before { right: calc(100% + 56px); }
.nm-callout--l1 { top: 16%; } .nm-callout--r1 { top: 34%; } .nm-callout--l2 { top: 54%; } .nm-callout--r2 { top: 70%; }
.nm-pocket__cap { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.nm-phone { width: 230px; border-radius: 34px; background: #0A1320; border: 1px solid rgba(142,216,250,.22); padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.45); position: relative; flex: none; }
.nm-phone--solo { width: 262px; }
.nm-phone::before { content: ""; position: absolute; left: 50%; top: 16px; width: 74px; height: 18px; margin-left: -37px; border-radius: 999px; background: #060B13; z-index: 2; }
.nm-phone__scr { border-radius: 26px; background: var(--app-bg); padding: 44px 11px 14px; display: grid; gap: 8px; min-height: 470px; align-content: start; color: var(--app-ink); overflow: hidden; }
.nm-phone__top { display: flex; justify-content: space-between; font: 600 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--app-dim); padding-bottom: 8px; border-bottom: 1px solid var(--app-line); }
.nm-phone__on { color: #8ED8FA; }
.nm-phone__m { font: 500 11.5px/1.4 var(--sans); background: #10233A; border: 1px solid rgba(255,255,255,.18); padding: 8px 10px; border-radius: 12px; max-width: 92%; }   /* the app's own bubbles (NearMe OS 2, 11 Nov) */
.nm-phone__m--me { background: #1D598E; border-color: rgba(53,159,245,.73); color: #E6ECF2; justify-self: end; }
.nm-phone__m--me:has(.nm-vn) { width: 92%; }
.nm-phone__m .nm-vn__text { font-size: 11px; }
.nm-phone__stat { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: var(--app-bubble); }
.nm-phone__stat b { font: 400 40px/1 var(--display); } .nm-phone__stat span { font: 400 11.5px/1.35 var(--sans); color: var(--app-dim); }
.nm-phone__todo { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; background: var(--app-bar); border: 1px solid var(--app-line); font: 500 11.5px/1.35 var(--sans); }
.nm-phone__push { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--app-bar); border: 1px solid var(--app-line); font: 500 11.5px/1.35 var(--sans); }
.nm-phone__push span { color: var(--app-dim); }
.nm-phone__cap { display: block; text-align: center; margin-top: 10px; font: 500 10.5px/1.4 var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 860px) { .nm-pocket__stage { min-height: 0; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 0 40px; align-items: start; } .nm-pocket__stage .nm-phone { grid-column: 1 / -1; justify-self: center; margin-bottom: 10px; } .nm-callout { position: static; width: 100%; text-align: left; } .nm-callout::before, .nm-callout::after { display: none; } .nm-pocket__cap { bottom: 10px; } }
@media (max-width: 480px) { .nm-pocket__stage { grid-template-columns: 1fr; } }

/* the tree (round 7): leaves at the top (the tools, drifting a little); every tool's line meets in one circle on the
   trunk, with an arrow from outside saying what happens there; the three outputs hang off the roots. The lines are an
   SVG under the characters; the circle and the arrow are a second SVG on top of them */
.nm-tools { background: radial-gradient(70% 50% at 50% 55%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%); }
.nm-tree { position: relative; margin-top: 30px; }
.nm-tree__wrap { position: relative; max-width: 1000px; margin: 0 auto; padding: 24px 10px 0; }
.nm-tree__canvas { display: block; width: 100%; height: auto; cursor: crosshair; position: relative; z-index: 1; }
.nm-tree__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; transition: opacity .6s; z-index: 0; }   /* under the characters: the leaves cover the lines */
.nm-tree__over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; transition: opacity .6s; z-index: 3; }   /* the circle and the arrow, on the characters */
.nm-hub__note { position: absolute; z-index: 3; display: grid; gap: 2px; width: max-content; max-width: 210px; font-size: 13px; line-height: 1.35; color: var(--muted); pointer-events: none; transition: opacity .6s .3s; }
.nm-hub__note b { font: 600 14.5px/1.2 var(--sans); color: var(--ink); }
.js .nm-hub__note { opacity: 0; } .js .nm-tree.on .nm-hub__note { opacity: 1; }
.nm-node { position: absolute; z-index: 2; transform: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px)); display: flex; gap: 8px; align-items: center; padding: 7px 11px 7px 7px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 86%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); backdrop-filter: blur(4px); transition: opacity .5s ease; white-space: nowrap; }
.js .nm-node { opacity: 0; }
.nm-node.on { opacity: 1; }
.nm-node:hover { transform: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px)) scale(1.06); }
.nm-node b { font: 600 12.5px/1.2 var(--sans); }
.nm-node__ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); flex: none; }
.nm-node__ic svg { width: 16px; height: 16px; display: block; color: var(--c); }
.nm-node__ic img { width: 16px; height: 16px; display: block; }
.nm-node__ic img.mono { filter: var(--mono-filter); }
.nm-outs { position: relative; z-index: 1; list-style: none; margin: 26px auto 0; padding: 0 0 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 900px; }
.nm-outs li { display: grid; gap: 3px; text-align: center; padding: 14px 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.nm-outs li b { font: 600 15px/1.3 var(--sans); } .nm-outs li span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.js .nm-outs li { opacity: 0; transform: translateY(8px); transition: opacity .55s ease, transform .55s ease; }
.js .nm-tree.on .nm-outs li { opacity: 1; transform: none; }
.js .nm-tree.on .nm-outs li:nth-child(1) { transition-delay: .5s; } .js .nm-tree.on .nm-outs li:nth-child(2) { transition-delay: .65s; } .js .nm-tree.on .nm-outs li:nth-child(3) { transition-delay: .8s; }
.nm-values { margin-top: 56px; }
@media (max-width: 760px) { .nm-node b { display: none; } .nm-node { padding: 5px; } .nm-outs { gap: 8px; margin-top: 18px; } .nm-outs li { padding: 10px 6px; } .nm-outs li b { font-size: 12.5px; } .nm-outs li span { font-size: 11.5px; } .nm-hub__note { font-size: 11px; padding: 4px 8px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); } .nm-hub__note b { font-size: 12.5px; } .nm-values { margin-top: 36px; } }

/* "What NearMe builds" (how-it-works): the four things, drawn in HTML for a made-up business; inside the face being
   shown, the parts arrive one after another */
.nm-mock { background: var(--bg); border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.35); max-width: 460px; margin: 0 auto; }
.nm-mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.nm-mock__bar i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); flex: none; }
.nm-mock__bar span { margin-left: 8px; flex: 1; min-width: 0; font: 500 11.5px/1 var(--mono); color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-mock__body { padding: 18px 20px 20px; display: grid; gap: 10px; }
.nm-mock__k { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.nm-mock__h { font: 400 27px/1.1 var(--display); }
.nm-mock__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nm-mock__tiles span { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; display: block; background: #2C3A48; }
.nm-mock__tiles img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nm-mock__tiles--one { grid-template-columns: 1fr; }
.nm-mock__tiles--one span { aspect-ratio: 16 / 7; border-radius: 0; }
.nm-mock__jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nm-mock__jobs li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 11px; border-radius: 10px; background: var(--panel); font-size: 13.5px; }
.nm-mock__jobs b { font-weight: 600; } .nm-mock__jobs span { font: 500 11.5px/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.nm-mock__txt { color: var(--muted); font-size: 14px; line-height: 1.55; }
.nm-mock__from { display: flex; align-items: center; gap: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
.nm-mock__from i { width: 7px; height: 7px; border-radius: 50%; background: var(--link); flex: none; }
.nm-mock__q { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.nm-mock__q b { font-weight: 600; font-size: 14.5px; } .nm-mock__q span { color: var(--muted); font-size: 13.5px; }
.js .nm-fcard__face .nm-mock__body > *, .js .nm-fcard__face .nm-mock__tiles span { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.js .nm-fcard__face.on .nm-mock__body > *, .js .nm-fcard__face.on .nm-mock__tiles span { opacity: 1; transform: none; }
.nm-fcard__face.on .nm-mock__body > :nth-child(2), .nm-fcard__face.on .nm-mock__tiles span:nth-child(2) { transition-delay: .12s; }
.nm-fcard__face.on .nm-mock__body > :nth-child(3), .nm-fcard__face.on .nm-mock__tiles span:nth-child(3) { transition-delay: .24s; }
.nm-fcard__face.on .nm-mock__body > :nth-child(4) { transition-delay: .36s; } .nm-fcard__face.on .nm-mock__body > :nth-child(5) { transition-delay: .48s; }

/* price: one receipt in the middle, the invoice you never get: everything on it, the total at the bottom */
.nm-price { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--muted) 22%, transparent) 1px, transparent 1.2px) 0 0 / 18px 18px; }
.nm-price__wrap { display: grid; justify-items: center; }
.nm-price__head { text-align: center; justify-items: center; }
.nm-receipt { position: relative; width: min(600px, 100%); margin-top: 32px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: 18px; padding: 26px 30px 30px; display: grid; gap: 16px; justify-items: start; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.nm-receipt__top { width: 100%; display: flex; justify-content: space-between; font: 600 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nm-receipt__free { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--link); }
.nm-receipt__amt { font: 400 60px/1 var(--display); letter-spacing: -.02em; }
.nm-receipt__amt span { font: 500 15px/1.4 var(--sans); color: var(--muted); }
.nm-receipt__lines { list-style: none; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); width: 100%; display: grid; gap: 9px; position: relative; }
.nm-receipt__lines::before, .nm-receipt__lines::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); }
.nm-receipt__lines::before { left: -42px; clip-path: inset(0 0 0 50%); } .nm-receipt__lines::after { right: -42px; clip-path: inset(0 50% 0 0); }
.nm-receipt__lines li { display: grid; grid-template-columns: auto minmax(20px, 1fr) auto; align-items: baseline; gap: 10px; font-size: 14.5px; }
.nm-receipt__lines b { font-weight: 600; } .nm-receipt__lines i { border-bottom: 1px dotted color-mix(in srgb, var(--muted) 55%, transparent); transform: translateY(-4px); }
.nm-receipt__lines span { font: 500 12px/1.4 var(--mono); color: var(--muted); text-align: right; max-width: 26ch; }
.nm-receipt__total { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); }
.nm-receipt__total div { display: grid; gap: 4px; } .nm-receipt__total span { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .nm-receipt__total b { font: 400 26px/1 var(--display); }
.nm-plan__fine { font-size: 13px; color: var(--muted); }
@media (max-width: 600px) { .nm-receipt { padding: 22px 18px 24px; } .nm-receipt__lines::before { left: -30px; } .nm-receipt__lines::after { right: -30px; } .nm-receipt__lines span { max-width: 16ch; } .nm-receipt__total { grid-template-columns: 1fr 1fr; } .nm-receipt__amt { font-size: 48px; } }

.nm-steps3 { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.nm-steps3 li { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.nm-steps3 p { color: var(--muted); font-size: 14.5px; }
.nm-steps3__n { font: 400 34px/1 var(--display); color: var(--link); }

/* where it all comes together: "Reach out" flips the words into the form */
.nm-contact { padding-top: 90px; border-top: 1px solid var(--line); overflow: hidden; }
.nm-contact__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: stretch; }
.nm-contact__left { display: grid; align-content: center; }
.nm-contact__pane { display: grid; gap: 16px; align-content: center; }
.js .nm-contact__pane { grid-area: 1 / 1; transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.js .nm-contact__pane--form { opacity: 0; transform: translateX(28px); visibility: hidden; pointer-events: none; }
.js .nm-contact__left.form .nm-contact__pane--form { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.js .nm-contact__left.form .nm-contact__pane--intro { opacity: 0; transform: translateX(-28px); visibility: hidden; pointer-events: none; }
.nm-solved { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.nm-solved li { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; padding: 7px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--link) 40%, transparent); color: var(--ink); }
.nm-solved li::before { content: "✓ "; color: var(--link); }
.nm-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--link); font: 600 13.5px/1 var(--sans); cursor: pointer; padding: 6px 0; justify-self: start; }
.nm-contact__fine { font-size: 13px; }
/* the sky: no frame; its edges dissolve into the page through a mask */
.nm-contact__art { position: relative; min-height: 480px; isolation: isolate; display: grid; place-items: center; padding: 24px; }
.nm-sky { position: absolute; inset: -6% -8%; z-index: -1; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 40%, transparent 100%); }
.nm-sky__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.nm-sky__img--night { display: var(--photo-night); } .nm-sky__img--mist { display: var(--photo-mist); object-position: center 45%; }
.nm-contact__card { position: relative; z-index: 1; width: min(380px, 100%); background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: 16px; padding: 20px 22px; backdrop-filter: blur(8px); box-shadow: 0 30px 70px rgba(0,0,0,.45); display: grid; gap: 12px; }
.nm-contact__card ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: s; }
.nm-contact__card li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; counter-increment: s; }
.nm-contact__card li::before { content: counter(s, decimal-leading-zero); font: 500 11px/1 var(--mono); color: var(--link); padding-top: 4px; }
.nm-contact__card li b, .nm-contact__card li span { grid-column: 2; }
.nm-contact__card b { display: block; font: 600 14.5px/1.3 var(--sans); } .nm-contact__card span { font-size: 13px; color: var(--muted); }
@media (max-width: 820px) { .nm-contact { padding-top: 90px; } .nm-contact__grid { grid-template-columns: 1fr; } .nm-contact__art { min-height: 380px; } }

/* the enquiry form (shared) */
.nm-enquiry { display: grid; }
.nm-form { display: grid; gap: 10px; margin-top: 8px; }
.nm-f { display: grid; gap: 4px; }
.nm-f label { font: 600 11.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.nm-f input, .nm-f textarea { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); background: var(--panel); color: var(--ink); font: 500 16px/1.3 var(--sans); padding: 12px 14px; }
.nm-f textarea { min-height: 64px; resize: vertical; }
.nm-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nm-form__hint { font-size: 12.5px; color: var(--muted); margin-top: -4px; }
.nm-hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.nm-form__priv { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.nm-form__err { font-size: 14px; color: var(--sand); font-weight: 600; }
.nm-done { display: grid; gap: 12px; text-align: center; padding: 30px 0; justify-items: center; }
.nm-done[hidden] { display: none; }
.nm-done__tick { width: 56px; height: 56px; border-radius: 50%; background: var(--link); display: grid; place-items: center; color: var(--bg); font: 700 28px/1 var(--sans); }
.nm-done__h { font: 400 28px/1.1 var(--display); }

/* questions: each answer unfolds, the plus turns, the words fade in a beat later */
.nm-faqs { border-top: 1px solid var(--line); }
.nm-faq { margin-top: 28px; max-width: 760px; }
.nm-faq--two { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
.nm-faq__item { border-top: 1px solid var(--line); }
.nm-faq__item h3 { margin: 0; font: inherit; }
.nm-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; text-align: left; background: none; border: 0; padding: 16px 4px; font: 600 16px/1.4 var(--sans); color: var(--ink); cursor: pointer; transition: color .3s; }
.nm-faq__q:hover { color: var(--link); }
.nm-faq__q i { position: relative; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid var(--line); transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s, border-color .3s; }
.nm-faq__q i::before, .nm-faq__q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--link); transform: translate(-50%, -50%); }
.nm-faq__q i::after { transform: translate(-50%, -50%) rotate(90deg); }
.nm-faq__item.open .nm-faq__q i { transform: rotate(45deg); background: color-mix(in srgb, var(--brand) 18%, transparent); border-color: var(--brand); }
.nm-faq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.nm-faq__a > div { overflow: hidden; min-height: 0; }
.nm-faq__a p { color: var(--muted); padding: 0 4px 18px; max-width: 64ch; transition: opacity .4s ease, transform .4s ease; }
.js .nm-faq__a { grid-template-rows: 0fr; } .js .nm-faq__a p { opacity: 0; transform: translateY(-6px); }
.js .nm-faq__item.open .nm-faq__a { grid-template-rows: 1fr; } .js .nm-faq__item.open .nm-faq__a p { opacity: 1; transform: none; transition-delay: .12s; }
.nm-faq--two .nm-faq__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .nm-faq--two { grid-template-columns: 1fr; } .nm-faq--two .nm-faq__item:nth-last-child(-n+2) { border-bottom: 0; } .nm-faq--two .nm-faq__item:last-child { border-bottom: 1px solid var(--line); } }

/* footer */
.nm-foot { position: relative; z-index: 1; border-top: 1px solid var(--line); padding-block: 44px 28px; background: var(--bg); }
.nm-foot__cols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 24px; }
.nm-foot__brand p { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 34ch; }
.nm-foot__h { font: 600 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.nm-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.nm-foot ul a { color: var(--ink); text-decoration: none; }
.nm-foot ul a:hover { text-decoration: underline; }
.nm-foot__legal { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) { .nm-foot__cols { grid-template-columns: 1fr 1fr; } .nm-foot__brand { grid-column: span 2; } }

/* ── round 7d: How it works and pricing get layouts of their own (Wesly, 11 Nov: none borrowed from the home page) ── */
/* the closing art as a wave: a tall photo, its edges dissolving like the sky did */
/* the wave: a photo with slightly rounded corners and a border, no fade (Wesly, 11 Nov: the round vignette made it a
   circle; after trying a softer fade he settled on "a border around the images") */
.nm-sky--wave { inset: 0; border-radius: 22px; overflow: hidden; -webkit-mask-image: none; mask-image: none;
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: 0 10px 28px rgba(10,20,32,.14); }
.nm-sky--wave .nm-sky__img { object-position: center 45%; }
/* the fitted closing section (guide pages): the photo is as tall as the words beside it, never taller, and the enquiry
   form, hidden until "Rather talk first?", no longer sets the section's height (it is out of the flow until it opens) */
.nm-contact--fit .nm-contact__art { min-height: 0; padding: 40px; }
.js .nm-contact--fit .nm-contact__left { position: relative; }
.js .nm-contact--fit .nm-contact__pane--form { position: absolute; left: 0; right: 0; top: 0; }
.js .nm-contact--fit .nm-contact__left.form .nm-contact__pane--form { position: relative; }
.js .nm-contact--fit .nm-contact__left.form .nm-contact__pane--intro { position: absolute; left: 0; right: 0; top: 0; }
@media (max-width: 820px) { .nm-contact--fit .nm-contact__art { min-height: 0; padding: 34px 22px; } }

/* How it works: a hero led by the three steps, an index of them on the right */
.nm-hiw-hero, .nm-pr-hero { align-self: center; width: 100%; }
/* the water photos are busier than the mountains: the words get a shade of their own */
.nm-hero--how .nm-hero__wash, .nm-hero--pricing .nm-hero__wash { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 45%, transparent) 45%, transparent 68%), var(--hero-wash); }
.nm-hiw-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: end; padding-block: 64px 72px; }
.nm-hiw-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nm-hiw-index a { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; text-decoration: none; color: var(--hero-ink); background: color-mix(in srgb, var(--bg) 74%, transparent); border: 1px solid color-mix(in srgb, var(--hero-ink) 18%, transparent); backdrop-filter: blur(8px); transition: transform .3s, border-color .3s; }   /* solid enough to read on the stronger light photo */
.nm-hiw-index a:hover { transform: translateX(-4px); border-color: color-mix(in srgb, var(--brand) 60%, transparent); }
.nm-hiw-index span { font: 700 34px/1 var(--sans); color: var(--link); letter-spacing: -.02em; }
.nm-hiw-index b { font: 600 18px/1.2 var(--sans); }
@media (max-width: 900px) { .nm-hiw-hero { grid-template-columns: 1fr; gap: 28px; padding-block: 40px 56px; } .nm-hiw-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nm-hiw-index a { grid-template-columns: 1fr; gap: 4px; padding: 12px; } .nm-hiw-index span { font-size: 24px; } .nm-hiw-index b { font-size: 14px; } }

/* the steps as chapters on a spine: a line down the middle, the numbers on it, the chapters either side in turn */
.nm-spine__list { list-style: none; margin: 40px 0 0; padding: 0; position: relative; display: grid; gap: 28px; }
.nm-spine__list::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, var(--line) 6%, var(--line) 94%, transparent); }
.nm-spine__ch { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: center; position: relative; }
.nm-spine__ch + .nm-spine__ch { margin-top: -150px; }   /* the chapters interlock across the spine, no empty half-rows */
.nm-spine__n { grid-column: 2; grid-row: 1; justify-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 700 22px/1 var(--sans); color: var(--link); background: var(--bg); border: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); position: relative; z-index: 1; }
.nm-spine__card { grid-column: 1; grid-row: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 18px 18px 22px; display: grid; gap: 8px; }
.nm-spine__ch--r .nm-spine__card { grid-column: 3; }
.nm-spine__k { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--link); margin-top: 6px; }
.nm-spine__card h3 { font: 600 22px/1.25 var(--sans); }
.nm-spine__card > p:last-child { color: var(--muted); font-size: 15px; line-height: 1.55; }
.nm-spine__art { border-radius: 14px; overflow: hidden; background: #0A1420; padding: 16px; min-height: 180px; display: grid; align-content: center; }
.nm-spine__cap { margin-top: 18px; text-align: center; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 820px) { .nm-spine__ch + .nm-spine__ch { margin-top: 0; } .nm-spine__list::before { left: 27px; } .nm-spine__ch { grid-template-columns: 56px minmax(0, 1fr); align-items: start; } .nm-spine__n { grid-column: 1; width: 52px; height: 52px; font-size: 18px; } .nm-spine__card, .nm-spine__ch--r .nm-spine__card { grid-column: 2; } }
/* the three little pictures: the app's own colours (they show the app), whatever the page's theme */
.nm-mini { color: #E6ECF2; font: 500 13px/1.45 var(--sans); }
.nm-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nm-mini__me { margin-left: auto; width: 92%; background: #1D598E; border: 1px solid rgba(53,159,245,.73); border-radius: 14px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; }
.nm-mini__me p { grid-column: 1 / -1; font-size: 13.5px; }
.nm-mini__me b { font: 500 11px/1 var(--sans); opacity: .85; }
.nm-mini__wave { display: flex; gap: 3px; align-items: center; height: 18px; }
.nm-mini__wave i { width: 3px; border-radius: 2px; background: #E6ECF2; height: 40%; opacity: .85; }
.nm-mini__wave i:nth-child(3n) { height: 85%; } .nm-mini__wave i:nth-child(4n+1) { height: 60%; } .nm-mini__wave i:nth-child(5n+2) { height: 100%; }
.nm-mini__pics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nm-mini__pics img { aspect-ratio: 4 / 3; border-radius: 8px; height: auto; }
.nm-mini--preview { background: #10233A; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px; display: grid; gap: 8px; }
.nm-mini__k { font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8ED8FA; }
.nm-mini__hero { display: block; height: 84px; border-radius: 9px; overflow: hidden; }
.nm-mini__t { font: 700 15px/1.2 var(--sans); }
.nm-mini__lines { display: grid; gap: 5px; } .nm-mini__lines i { height: 6px; border-radius: 3px; background: rgba(230,236,242,.18); } .nm-mini__lines i:nth-child(2) { width: 82%; } .nm-mini__lines i:nth-child(3) { width: 60%; }
.nm-mini__btns { display: flex; gap: 8px; } .nm-mini__btns span { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font: 600 12px/1 var(--sans); } .nm-mini__btns .yes { background: #2C9BF5; color: #06101B; border-color: transparent; }
.nm-mini--search { background: #FFFFFF; color: #14202E; border-radius: 14px; padding: 12px; display: grid; gap: 10px; }
.nm-mini__q { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(20,32,46,.16); font: 500 13px/1 var(--sans); }
.nm-mini__q svg { width: 15px; height: 15px; color: #56636F; }
.nm-mini__res { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; }
.nm-mini__res em { font: 500 11px/1.3 var(--sans); font-style: normal; color: #56636F; } .nm-mini__res b { font: 600 14.5px/1.3 var(--sans); color: #1A4FA0; } .nm-mini__res span { font-size: 12px; color: #56636F; }
.nm-mini__res--you { background: #EEF5FE; border: 1px solid rgba(30,111,208,.35); }
.nm-mini__res:not(.nm-mini__res--you) { opacity: .7; }

/* what to say: one big voice note, the words as a quote; four small things under it */
.nm-say__wrap { display: grid; justify-items: center; text-align: center; }
.nm-say__note { margin: 30px 0 0; width: min(820px, 100%); padding: 30px 34px 26px; border-radius: 26px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand) var(--tint, 22%), transparent), transparent 60%), var(--panel); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); display: grid; gap: 18px; justify-items: center; }
.nm-say__wave { display: flex; gap: 4px; align-items: center; height: 44px; }
.nm-say__wave i { width: 4px; height: var(--hh, 50%); border-radius: 3px; background: var(--link); opacity: .8; transform-origin: center; }
.js .nm-say__note.on .nm-say__wave i { animation: nm-talk 1.1s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes nm-talk { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.nm-say__note blockquote { margin: 0; font: 600 clamp(20px, 2.4vw, 28px)/1.35 var(--sans); letter-spacing: -.01em; max-width: 34ch; text-wrap: balance; }
.nm-say__note figcaption { font: 500 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nm-say__chips { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(980px, 100%); text-align: left; }
.nm-say__chips li { padding: 14px 16px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); display: grid; gap: 4px; }
.nm-say__chips b { font: 600 15px/1.3 var(--sans); } .nm-say__chips span { color: var(--muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 900px) { .nm-say__chips { grid-template-columns: 1fr 1fr; } .nm-say__note { padding: 22px 18px; } }

/* the background work as a bento: two big tiles, four small */
.nm-bento__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 14px; }
.nm-bento__tile { border-radius: 22px; padding: 22px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; position: relative; overflow: hidden; }
.nm-bento__tile--0 { grid-column: span 2; grid-row: span 2; background: radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--brand) calc(var(--tint, 22%) + 6%), transparent), transparent 60%), var(--panel); }
.nm-bento__tile--1 { grid-column: span 2; } .nm-bento__tile--4, .nm-bento__tile--5 { grid-column: span 2; }
.nm-bento__tile--0 h3 { font: 600 clamp(22px, 2.4vw, 30px)/1.2 var(--sans); } .nm-bento__tile--0 { align-content: end; padding-top: 104px; } .nm-bento__tile--0 .nm-bento__ic { position: absolute; left: 22px; top: 22px; } .nm-bento__tile--0 p { font-size: 16px; max-width: 34ch; }
.nm-bento__tile h3 { font: 600 18px/1.3 var(--sans); } .nm-bento__tile p { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.nm-bento__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--link); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.nm-bento__tile--0 .nm-bento__ic { width: 56px; height: 56px; border-radius: 16px; }
.nm-bento__ic svg { width: 22px; height: 22px; } .nm-bento__tile--0 .nm-bento__ic svg { width: 28px; height: 28px; }
@media (max-width: 900px) { .nm-bento__grid { grid-template-columns: 1fr 1fr; } .nm-bento__tile--0, .nm-bento__tile--1, .nm-bento__tile--4, .nm-bento__tile--5 { grid-column: span 2; grid-row: auto; } }
@media (max-width: 520px) { .nm-bento__grid { grid-template-columns: 1fr; } .nm-bento__tile { grid-column: auto !important; } }

/* the yes-first rule as a before-and-after: what you asked, the line before, the line after, the two buttons */
.nm-ba__head { margin: 0 auto; text-align: center; justify-items: center; }
.nm-ba__head .lead { margin-left: auto; margin-right: auto; }
.nm-ba__card { margin: 30px auto 0; width: min(760px, 100%); padding: 24px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 18px; }
.nm-ba__ask { font: 600 19px/1.4 var(--sans); display: grid; gap: 4px; }
.nm-ba__ask span, .nm-ba__cols span { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nm-ba__cols { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; }
.nm-ba__was, .nm-ba__now { border-radius: 16px; padding: 16px; display: grid; gap: 8px; }
.nm-ba__was { background: color-mix(in srgb, var(--muted) 10%, transparent); } .nm-ba__was p { text-decoration: line-through; color: var(--muted); font-size: 17px; }
.nm-ba__now { background: color-mix(in srgb, var(--brand) 14%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); } .nm-ba__now p { font: 600 17px/1.4 var(--sans); }
.nm-ba__to { align-self: center; justify-self: center; width: 28px; height: 2px; background: var(--link); position: relative; } .nm-ba__to::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--link); border-right: 2px solid var(--link); transform: rotate(45deg); }
.nm-ba__btns { display: flex; gap: 10px; } .nm-ba__btns span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); font: 600 14px/1 var(--sans); color: var(--muted); } .nm-ba__btns .yes { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.nm-ba__rules { list-style: none; margin: 22px auto 0; padding: 0; width: min(980px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.nm-ba__rules li { padding: 14px 16px; border-top: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); }
.nm-ba__rules b { color: var(--ink); }
@media (max-width: 820px) { .nm-ba__cols { grid-template-columns: 1fr; gap: 10px; } .nm-ba__to { transform: rotate(90deg); margin: 4px auto; } .nm-ba__rules { grid-template-columns: 1fr; } }

/* getting started as a stepper: three dots on one line */
.nm-stepper__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.nm-stepper__list::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: linear-gradient(90deg, var(--link), color-mix(in srgb, var(--link) 20%, transparent)); }
.nm-stepper__list li { position: relative; display: grid; gap: 8px; align-content: start; }
.nm-stepper__dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 700 18px/1 var(--sans); background: var(--bg); color: var(--link); border: 2px solid var(--link); position: relative; z-index: 1; margin-bottom: 6px; }
.nm-stepper__list h3 { font: 600 20px/1.3 var(--sans); } .nm-stepper__list p { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 32ch; }
@media (max-width: 820px) { .nm-stepper__list { grid-template-columns: 1fr; } .nm-stepper__list::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: linear-gradient(180deg, var(--link), color-mix(in srgb, var(--link) 20%, transparent)); } .nm-stepper__list li { grid-template-columns: 46px 1fr; column-gap: 16px; } .nm-stepper__dot { grid-row: span 2; } }

/* pricing: the price in the hero, on its own card */
.nm-pr-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; padding-block: 56px 72px; }
.nm-pricecard { justify-self: end; width: min(400px, 100%); padding: 24px; border-radius: 24px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); backdrop-filter: blur(12px); display: grid; gap: 10px; }
.nm-pricecard__k { font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nm-pricecard__free { justify-self: start; padding: 6px 10px; border-radius: 999px; font: 700 12px/1 var(--sans); letter-spacing: .04em; color: var(--primary-ink); background: var(--primary); }
.nm-pricecard__amt { font: 700 64px/1 var(--sans); letter-spacing: -.03em; display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.nm-pricecard__amt span { font: 500 15px/1.3 var(--sans); color: var(--muted); letter-spacing: 0; }
.nm-pricecard__day { color: var(--muted); font-size: 14px; }
.nm-pricecard ul { list-style: none; margin: 6px 0 8px; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 14.5px; }
.nm-pricecard li { display: flex; gap: 8px; align-items: center; } .nm-pricecard li svg, .nm-incl__group li svg { width: 18px; height: 18px; color: var(--link); flex: none; }
@media (max-width: 900px) { .nm-pr-hero { grid-template-columns: 1fr; gap: 24px; padding-block: 36px 56px; } .nm-pricecard { justify-self: stretch; width: 100%; } .nm-pricecard__amt { font-size: 52px; } }
/* the plan as a grouped checklist */
.nm-incl__head { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; }
.nm-incl__head .lead { max-width: 40ch; padding-bottom: 6px; }
.nm-incl__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.nm-incl__group { padding: 22px 26px 24px 0; border-bottom: 1px solid var(--line); }
.nm-incl__group:nth-child(even) { padding: 22px 0 24px 26px; border-left: 1px solid var(--line); }
.nm-incl__group h3 { font: 600 20px/1.3 var(--sans); display: flex; gap: 10px; align-items: baseline; }
.nm-incl__group h3 span { font: 600 12px/1 var(--mono); color: var(--link); letter-spacing: .08em; }
.nm-incl__group ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.nm-incl__group li { display: flex; gap: 10px; align-items: flex-start; } .nm-incl__group li svg { margin-top: 2px; }
.nm-incl__group li span { display: grid; gap: 1px; } .nm-incl__group li b { font-weight: 600; font-size: 15.5px; } .nm-incl__group li em { font-style: normal; color: var(--muted); font-size: 14px; }
@media (max-width: 820px) { .nm-incl__grid { grid-template-columns: 1fr; } .nm-incl__group, .nm-incl__group:nth-child(even) { padding: 20px 0; border-left: 0; } }
/* who does what as a relay: three hands, an arrow between each */
.nm-relay__flow { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.nm-relay__flow li { position: relative; padding: 22px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.nm-relay__flow li:not(:last-child)::after { content: ""; position: absolute; right: -36px; top: 50%; width: 28px; height: 2px; background: var(--link); }
.nm-relay__flow li:not(:last-child)::before { content: ""; position: absolute; right: -36px; top: calc(50% - 4px); width: 8px; height: 8px; border-top: 2px solid var(--link); border-right: 2px solid var(--link); transform: rotate(45deg); }
.nm-relay__who { justify-self: start; padding: 6px 12px; border-radius: 999px; font: 600 12px/1 var(--sans); letter-spacing: .04em; color: var(--link); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.nm-relay__flow h3 { font: 600 26px/1.15 var(--sans); } .nm-relay__flow p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.nm-relay__foot { margin-top: 26px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; color: var(--muted); font-size: 14.5px; } .nm-relay__foot p { max-width: 70ch; }
@media (max-width: 820px) { .nm-relay__flow { grid-template-columns: 1fr; gap: 40px; } .nm-relay__flow li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -32px; width: 2px; height: 24px; } .nm-relay__flow li:not(:last-child)::before { right: auto; left: calc(50% - 4px); top: auto; bottom: -32px; transform: rotate(135deg); } }
/* the plan questions, every answer open */
.nm-qa__list { margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.nm-qa__item { padding: 18px 0; border-top: 1px solid var(--line); }
.nm-qa__item dt { font: 600 17px/1.35 var(--sans); } .nm-qa__item dd { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
@media (max-width: 760px) { .nm-qa__list { grid-template-columns: 1fr; } }
/* pricing closes on a band, not a photo */
.nm-closer { border-top: 1px solid var(--line); background: radial-gradient(60% 120% at 50% 100%, color-mix(in srgb, var(--brand) var(--tint, 20%), transparent), transparent 70%); padding-block: 96px 96px; }
.nm-closer__wrap { display: grid; justify-items: center; text-align: center; gap: 4px; }
.nm-closer__wrap .lead { margin-left: auto; margin-right: auto; }
.nm-closer__wrap .ctas { margin-top: 24px; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv.pre { opacity: 1; transform: none; filter: none; }
  .nm-push { transform: none; opacity: 1; } [data-play] [data-step], [data-anim] [data-step], [data-ai] [data-step] { opacity: 1; transform: none; } .nm-ai { opacity: 1; transform: none; } .nm-node { opacity: 1; } .nm-lab { opacity: 1; }
  .nm-cap span { color: currentColor; } .nm-fcard__face { position: relative; opacity: 1; transform: none; } .nm-fcard__face:not(.on) { display: none; }
  .js .nm-outs li, .js .nm-hub__note { opacity: 1; transform: none; } .js .nm-journey__notes li.on { opacity: 1; }
  .js .nm-fcard__face .nm-mock__body > *, .js .nm-fcard__face .nm-mock__tiles span { opacity: 1; transform: none; }
}