/* Localsville — 2026 positioning layer.
   Loaded AFTER /assets/site.css on every page. site.css keeps the shell,
   the legal/help typography and the app-faithful tokens; this file adds the
   bright marketing system (classes prefixed n-) and re-colours the shared
   header, footer and buttons.
   CSP reminder: no inline styles, no external requests. Everything visual
   lives here or in /assets/images. */

/* ---------- Tokens ------------------------------------------------------- */
:root {
  --sun-100: #FFF1CC;
  --sun-300: #FFD766;
  --sun-500: #FFB81C;
  --coral-100: #FFE4DB;
  --coral-400: #FF6B47;
  --coral-600: #D63A12;   /* action colour: white text passes AA */
  --coral-700: #B42E0C;
  --lagoon-100: #D5F5F1;
  --lagoon-500: #00A79D;
  --lagoon-700: #00655F;  /* text on light */
  --night-900: #1C1230;
  --night-800: #2A1C45;
  --night-700: #3B2A5C;
  --cream: #FFF8EE;
  --n-ink: #22162F;
  --n-ink-2: #55496A;
  --n-shadow: 0 18px 50px rgba(28, 18, 48, 0.18);
  --n-shadow-sm: 0 6px 20px rgba(28, 18, 48, 0.12);
  --n-max: 1200px;
}

/* ---------- Shared shell re-colour --------------------------------------- */
body { background: var(--cream); }
/* Opaque cream: the header mark is a plate whose cream backing (#FFF8EE) is baked into the PNG,
   so the bar behind it must be exactly that cream. At 94% alpha the bar composited whatever
   scrolled under it (hero art, the night-900 footer) down to ~#F1EAE3 while the plate stayed
   #FFF8EE, showing the plate as a lighter rectangle. There is no backdrop-filter here, so the
   translucency bought nothing. */
.lv-header { background: #FFF8EE; border-bottom-color: rgba(28, 18, 48, 0.08); }
.lv-header .inner { max-width: var(--n-max); }
/* The header mark is a self-contained plate: the shipped wordmark on an opaque cream (#FFF8EE, the header cream)
   backing that is part of the image, so a browser that force-darkens the header bar cannot hide
   the plum "Locals". 6px of plate on each side; the negative margin keeps the wordmark at the
   same size (26px) and position. */
.lv-wordmark img.lv-plate { height: 38px; margin: -6px; max-width: none; }
.lv-nav a { color: var(--n-ink); font-weight: 600; }
.lv-nav a:hover { color: var(--coral-600); }
.lv-nav a[aria-current="page"] { color: var(--coral-700); }
.lv-nav .nav-cta,
.lv-nav .nav-cta[aria-current="page"] {
  background: var(--coral-600); color: #fff; border-radius: var(--r-full);
  padding: 10px 20px; box-shadow: 0 4px 14px rgba(214, 58, 18, 0.32);
}
.lv-nav .nav-cta:hover { background: var(--coral-700); color: #fff; }
.menu-sheet a[aria-current="page"] { color: var(--coral-700); background: var(--coral-100); }

.btn { border-radius: var(--r-full); font-size: 16px; font-weight: 700; padding: 0 28px; }
.btn--primary { background: var(--coral-600); box-shadow: 0 8px 22px rgba(214, 58, 18, 0.34); }
.btn--primary:hover { background: var(--coral-700); }
.btn--secondary { background: #fff; color: var(--n-ink); min-height: 54px; box-shadow: inset 0 0 0 2px var(--n-ink); }
.btn--secondary:hover { background: var(--sun-100); color: var(--n-ink); }
.btn--light { background: #fff; color: var(--n-ink); }
.btn--light:hover { background: var(--sun-100); color: var(--n-ink); }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Official store badges. Apple's and Google's own artwork, used unmodified and never recreated in
   CSS or type. The old pill (background, padding, radius) is dropped because each badge supplies
   its own shape. Sizing: Apple's SVG IS the badge and carries no clear space, while Google's PNG
   bakes in the quarter-of-badge-height clear space their guidelines require on all four sides
   (646x250 canvas around a 564x168 body). Setting Google's image to 1.5x Apple's height therefore
   renders both badge BODIES at the same 44px, which also clears Apple's 1/10-height clear space
   via the 12px flex gap. */
.store-badge, .n-close .store-badge { min-height: 0; padding: 0; background: none; border-radius: 0; }
a.store-badge:hover, a.store-badge:focus,
.n-close a.store-badge:hover, .n-close a.store-badge:focus { background: none; }
.store-badges { align-items: center; }
.store-badge img { display: block; width: auto; }
.store-badge[data-store="apple"] img { height: 44px; }
.store-badge[data-store="play"] img { height: 66px; }
/* site.css stretches badges to fill the row under 480px; official artwork must not be stretched. */
@media (max-width: 480px) { .store-badges { width: auto; } .store-badge { flex: 0 0 auto; } }

.lv-footer { background: var(--night-900); border-top: 0; }
.lv-footer .inner { max-width: var(--n-max); }
.lv-footer .brand-col img { background: #fff; padding: 8px 12px; border-radius: var(--r-md); height: 40px; }
/* Footer mark: the REVERSED wordmark (white "Locals", coral "ville"), which reads directly on the
   night-900 footer and needs no protective plate behind it. Height and margins are derived from the
   plate it replaced so the visible mark keeps the same 156.5x21.4px size and the same position:
   the plate's own ink inset (5.51px top-left at its rendered scale) is folded into these margins,
   and the bottom margin still holds the original chip's 40px box so nothing below moves. */
.lv-footer .brand-col img.lv-plate { background: none; padding: 0; border-radius: 0; height: 23.954px; max-width: none; margin: 8.098px 0 19.949px 11.968px; }
.lv-footer .brand-col p { color: #D9D0E8; font-size: 15px; }
.lv-footer .brand-col .n-foot-spear { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 8px; }
.lv-footer h2 { color: var(--sun-300); }
.lv-footer nav a { color: #EDE7F6; }
.lv-footer nav a:hover { color: var(--sun-300); }
.lv-footer .legal-line { border-top-color: rgba(255, 255, 255, 0.14); color: #C9BEDD; }
.lv-footer a:focus-visible { outline-color: var(--sun-300); }

/* ---------- Layout primitives -------------------------------------------- */
.n-wrap { max-width: var(--n-max); margin: 0 auto; padding: 0 24px; }
.n-sec { padding: 96px 0; scroll-margin-top: 72px; position: relative; }
.n-sec--tight { padding: 64px 0; }
.n-sec--white { background: #fff; }
.n-sec--sun { background: linear-gradient(160deg, var(--sun-100) 0%, #FFE3C2 100%); }
.n-sec--lagoon { background: linear-gradient(160deg, var(--lagoon-100) 0%, #E9F9F0 100%); }
.n-sec--coral { background: linear-gradient(160deg, var(--coral-100) 0%, #FFF0DC 100%); }
.n-sec--night { background: var(--night-900); color: #fff; }
.n-sec--night h2, .n-sec--night h3, .n-sec--night p, .n-sec--night li { color: #fff; }
.n-sec--night .n-lede { color: #D9D0E8; }
.n-sec--night a:focus-visible { outline-color: var(--sun-300); }

/* V2: a plain label with a rule, not a pill. */
.n-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--n-ink); margin: 0 0 20px;
}
.n-kicker::before { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--n-ink); }
.n-kicker--sun::before { background: var(--sun-500); }
.n-kicker--coral { color: var(--coral-700); }
.n-kicker--coral::before { background: var(--coral-600); }
.n-kicker--lagoon { color: var(--lagoon-700); }
.n-kicker--lagoon::before { background: var(--lagoon-700); }
.n-sec--night .n-kicker, .n-close .n-kicker { color: var(--sun-300); }
.n-sec--night .n-kicker::before { background: var(--sun-300); }
.n-head--center .n-kicker::after { content: ""; width: 34px; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.9; }
.n-head--center .n-kicker--sun::after, .n-head--center .n-kicker:not([class*="--"])::after { background: var(--n-ink); }

.n-h1, .n-h2 { font-family: var(--font-display); font-weight: 900; color: var(--n-ink); letter-spacing: -0.02em; margin: 0 0 18px; }
.n-h1 { font-size: clamp(42px, 6vw, 76px); line-height: 1; }
.n-h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; }
.n-h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--n-ink); margin: 0 0 8px; }
.n-lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--n-ink-2); max-width: 36em; margin: 0 0 20px; }
.n-head { max-width: 780px; margin-bottom: 44px; }
.n-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.n-head--center .n-lede { margin-left: auto; margin-right: auto; }
.n-mark { background: linear-gradient(transparent 80%, var(--sun-500) 80%); padding: 0 0.04em; }
.n-mark--coral { background: none; color: var(--coral-600); padding: 0; }
.n-sec--night .n-mark--coral { color: var(--sun-300); }
.n-sec--night .n-h2, .n-sec--night .n-h3 { color: #fff; }
.n-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.n-actions--center { justify-content: center; }
.n-fine { font-size: 15px; color: var(--n-ink-2); margin: 16px 0 0; }
.n-sec--night .n-fine { color: #C9BEDD; }
.n-link { font-weight: 700; color: var(--coral-700); text-decoration: underline; text-underline-offset: 3px; }
.n-sec--night .n-link { color: var(--sun-300); }

/* ---------- Photo + phone frames ----------------------------------------- */
.n-photo { display: block; overflow: hidden; border-radius: 18px; box-shadow: var(--n-shadow); background: var(--sun-100); }
.n-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.n-photo--tall { aspect-ratio: 4 / 5; }
.n-photo--wide { aspect-ratio: 4 / 3; }
.n-photo--band { aspect-ratio: 16 / 9; }
.n-photo--square { aspect-ratio: 1 / 1; }

/* The screen, not the frame, carries the screenshot's 660:1358 shape: the frame
   is border-box, so a ratio on it left a taller screen and object-fit: cover
   cut 9 to 28 source px off each side. The corner radius scales with the
   phone (44px at 300px wide) so small phones do not round off the top bar. */
.n-phone {
  display: block; width: 300px; max-width: 100%;
  border: 10px solid var(--night-900); border-radius: 14.5% / 7.2%;
  overflow: hidden; background: #FBF7F3; box-shadow: var(--n-shadow);
}
.n-phone img { display: block; width: 100%; height: auto; aspect-ratio: 660 / 1358; object-fit: cover; object-position: top; }
.n-phone--sm { width: 250px; border-width: 8px; }

.n-sticker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.2;
  padding: 10px 16px; border-radius: 12px;
  background: #fff; color: var(--n-ink); box-shadow: var(--n-shadow-sm);
}
.n-sticker--sun { background: var(--sun-500); }
.n-sticker--coral { background: var(--coral-600); color: #fff; }
.n-sticker--lagoon { background: var(--lagoon-700); color: #fff; }
.n-sticker--night { background: var(--night-900); color: #fff; }
.n-sticker svg { width: 20px; height: 20px; flex: none; }

/* ---------- A. Hero ------------------------------------------------------- */
.n-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(255, 184, 28, 0.55), transparent 62%),
    radial-gradient(760px 520px at 6% 96%, rgba(255, 107, 71, 0.30), transparent 60%),
    radial-gradient(620px 420px at 60% 100%, rgba(0, 167, 157, 0.20), transparent 60%),
    var(--cream);
  padding: 64px 0 88px;
}
.n-hero .n-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; }
.n-hero .n-h1 span { display: block; white-space: nowrap; }
.n-hero .n-h1 .n-h1-c { color: var(--coral-600); }
.n-hero-sub { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.3; color: var(--n-ink); margin: 0 0 14px; max-width: 24em; }
.n-hero-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; max-width: 620px; }
.n-path {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px;
  text-decoration: none; transition: transform 140ms ease, box-shadow 140ms ease;
}
.n-path:hover, .n-path:focus { text-decoration: none; transform: translateY(-2px); }
.n-path--go { background: var(--coral-600); color: #fff; box-shadow: 0 12px 28px rgba(214, 58, 18, 0.36); }
.n-path--go:hover { background: var(--coral-700); color: #fff; }
.n-path--find { background: #fff; color: var(--n-ink); box-shadow: inset 0 0 0 2px var(--n-ink), var(--n-shadow-sm); }
.n-path--find:hover { background: var(--sun-100); color: var(--n-ink); }
.n-path-k { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; }
.n-path-t { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1.15; }

.n-collage { position: relative; min-height: 560px; }
.n-collage .n-photo { position: absolute; }
.n-collage .n-c1 { width: 56%; left: 0; top: 0; transform: rotate(-2.5deg); }
.n-collage .n-c2 { width: 44%; right: 0; top: 2%; transform: rotate(2.5deg); }
.n-collage .n-c3 { width: 42%; left: 10%; bottom: 0; transform: rotate(1.5deg); z-index: 1; }
.n-collage .n-phone { position: absolute; right: -3%; bottom: 0; width: 37%; transform: rotate(-1.5deg); }
.n-collage .n-sticker { position: absolute; z-index: 3; }
.n-collage .n-s1 { left: -6px; top: 47%; transform: rotate(-3deg); }
.n-collage .n-s2 { right: 28%; top: -14px; transform: rotate(3deg); }
.n-collage .n-s3 { left: 30%; bottom: -14px; transform: rotate(-2deg); }

/* ---------- Ticker of things people do ----------------------------------- */
.n-ticker { background: var(--night-900); overflow: hidden; padding: 18px 0; }
.n-ticker ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; width: max-content; }
.n-ticker li {
  font-family: var(--font-display); font-weight: 800; font-size: 17px; white-space: nowrap;
  color: #fff; padding: 7px 16px; border-radius: var(--r-full); background: transparent;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}
.n-ticker li:nth-child(3n+1) { background: var(--coral-600); box-shadow: none; }
.n-ticker li:nth-child(6n+3) { background: var(--sun-500); color: var(--n-ink); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .n-ticker ul { animation: n-slide 60s linear infinite; }
  .n-ticker:hover ul { animation-play-state: paused; }
}
@keyframes n-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- B. Loss ------------------------------------------------------- */
.n-loss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.n-loss-card { background: var(--night-800); border-radius: 18px; padding: 30px 28px; border: 1px solid rgba(255, 255, 255, 0.10); }
.n-loss-card .n-num { font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: 0.1em; color: var(--sun-300); display: block; margin-bottom: 14px; }
.n-loss-card p { margin: 0; color: #D9D0E8; font-size: 16.5px; }
.n-loss-out { margin-top: 44px; padding: 34px 36px; border-radius: 18px; background: linear-gradient(120deg, var(--coral-600), #C2410C); display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.n-loss-out p { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; color: #fff; max-width: 20em; }

/* ---------- C. Flow ------------------------------------------------------- */
.n-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: flow; list-style: none; margin: 0; padding: 0; }
.n-flow li { position: relative; background: #fff; border-radius: 18px; padding: 30px 26px 28px; box-shadow: var(--n-shadow-sm); counter-increment: flow; }
.n-flow li::before {
  content: counter(flow); display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 18px;
  font-family: var(--font-display); font-weight: 900; font-size: 24px;
  background: var(--sun-500); color: var(--n-ink);
}
.n-flow li:nth-child(2)::before { background: var(--coral-600); color: #fff; }
.n-flow li:nth-child(3)::before { background: var(--lagoon-700); color: #fff; }
.n-flow li:nth-child(4)::before { background: var(--night-900); color: #fff; }
.n-flow p { margin: 0; color: var(--n-ink-2); font-size: 16px; }

/* ---------- Splits -------------------------------------------------------- */
.n-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.n-split--flip > :first-child { order: 2; }
.n-visual { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 18px; min-height: 420px; }
.n-visual .n-photo { flex: 1 1 0; min-width: 0; }
.n-visual .n-phone { flex: none; }
.n-visual--stack { display: block; min-height: 0; padding: 0 0 60px; }
.n-visual--stack .n-photo { width: 84%; }
.n-visual--stack .n-phone { position: absolute; right: 0; bottom: 0; width: 42%; }
.n-visual .n-sticker { position: absolute; z-index: 3; }
.n-visual .n-v1 { left: -8px; top: 18px; transform: rotate(-4deg); }
.n-visual .n-v2 { right: -6px; top: 40%; transform: rotate(4deg); }
.n-duo { display: flex; justify-content: center; gap: 22px; align-items: flex-start; }
.n-duo .n-phone:nth-child(2) { margin-top: 56px; }

.n-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; list-style: none; margin: 28px 0 0; padding: 0; }
.n-feats li { background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: var(--n-shadow-sm); }
.n-feats--1 { grid-template-columns: 1fr; }
.n-feats strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--n-ink); margin-bottom: 4px; }
.n-feats span { display: block; font-size: 15.5px; line-height: 1.5; color: var(--n-ink-2); }
.n-sec--white .n-feats li { background: var(--cream); box-shadow: none; }

.n-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.n-checks li { position: relative; padding-left: 38px; font-size: 17px; color: var(--n-ink); }
.n-checks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--lagoon-700);
}
.n-checks li::after {
  content: ""; position: absolute; left: 9px; top: 7px; width: 6px; height: 12px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.n-sec--night .n-checks li { color: #fff; }
.n-sec--night .n-checks li::before { background: var(--sun-500); }
.n-sec--night .n-checks li::after { border-color: var(--night-900); }

/* ---------- Search examples ----------------------------------------------- */
.n-asks { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.n-asks li { font-weight: 700; font-size: 15.5px; padding: 10px 16px; border-radius: var(--r-full); background: #fff; color: var(--n-ink); box-shadow: var(--n-shadow-sm); }
.n-asks li::before { content: "\201C"; }
.n-asks li::after { content: "\201D"; }

/* ---------- H. Human chain ------------------------------------------------ */
.n-chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.n-chain li { position: relative; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--n-shadow-sm); display: flex; flex-direction: column; }
.n-chain .n-chain-img { aspect-ratio: 4 / 3; overflow: hidden; }
.n-chain img { display: block; width: 100%; height: 100%; object-fit: cover; }
.n-chain .n-chain-body { padding: 20px 22px 24px; }
.n-chain .n-role { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.n-tag { font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-full); }
.n-tag--sell { background: var(--coral-100); color: var(--coral-700); }
.n-tag--buy { background: var(--lagoon-100); color: var(--lagoon-700); }
.n-chain p { margin: 0; font-size: 16px; color: var(--n-ink-2); }
.n-chain-note { margin: 32px auto 0; text-align: center; font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 2.6vw, 32px); color: var(--n-ink); max-width: 22em; line-height: 1.2; }

/* ---------- I. Places ----------------------------------------------------- */
.n-places { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
.n-place { position: relative; border-radius: 18px; overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; box-shadow: var(--n-shadow-sm); background: var(--night-800); }
.n-place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n-place::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 18, 48, 0) 35%, rgba(28, 18, 48, 0.86) 100%); }
.n-place div { position: relative; z-index: 2; padding: 24px; }
.n-place h3 { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: #fff; margin: 0 0 4px; }
.n-place p { margin: 0; color: #F1ECF8; font-size: 15.5px; }

/* ---------- J. Trust ------------------------------------------------------ */
.n-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.n-trust li { background: #fff; border-radius: 18px; padding: 28px 26px; box-shadow: var(--n-shadow-sm); }
.n-trust .n-ico { display: inline-flex; width: 52px; height: 52px; border-radius: 16px; align-items: center; justify-content: center; background: var(--lagoon-100); color: var(--lagoon-700); margin-bottom: 16px; }
.n-trust li:nth-child(2n) .n-ico { background: var(--sun-100); color: #8A5A00; }
.n-trust li:nth-child(3n) .n-ico { background: var(--coral-100); color: var(--coral-700); }
.n-trust svg { width: 26px; height: 26px; }
.n-trust p { margin: 0; color: var(--n-ink-2); font-size: 16px; }
.n-trust-not { margin-top: 26px; padding: 24px 28px; border-radius: 22px; background: #fff; border: 2px dashed rgba(28, 18, 48, 0.2); }
.n-trust-not p { margin: 0; color: var(--n-ink); font-size: 16px; }

/* ---------- K. First 1,000 ------------------------------------------------ */
.n-k {
  position: relative; overflow: hidden; border-radius: 22px; padding: 64px 56px;
  background: linear-gradient(125deg, #FFB81C 0%, #FF8A1F 45%, #F2541B 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
  box-shadow: var(--n-shadow);
}
p.n-k-num { max-width: none; font-family: var(--font-display); font-weight: 900; font-size: clamp(84px, 11.5vw, 160px); line-height: 0.9; letter-spacing: -0.04em; color: var(--night-900); margin: 0; }
p.n-k-num small { display: block; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: 0; line-height: 1.1; margin-top: 12px; }
.n-k h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; color: var(--night-900); margin: 0 0 16px; }
.n-k div p { color: var(--night-900); font-size: 18px; margin: 0 0 12px; max-width: 32em; }
.n-k div .n-k-policy { font-weight: 800; font-size: 20px; line-height: 1.4; background: rgba(255, 255, 255, 0.92); border-radius: 20px; padding: 18px 22px; }
.n-k .btn--primary { background: var(--night-900); box-shadow: 0 8px 22px rgba(28, 18, 48, 0.35); }
.n-k .btn--primary:hover { background: var(--night-700); }

/* ---------- Explain (FAQ) ------------------------------------------------- */
.n-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; align-items: start; }
.n-faq details { background: #fff; border-radius: 20px; box-shadow: var(--n-shadow-sm); }
.n-sec--white .n-faq details { background: var(--cream); box-shadow: none; }
.n-faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 56px 20px 24px; border-radius: 20px;
  font-family: var(--font-display); font-weight: 800; font-size: 18.5px; line-height: 1.3; color: var(--n-ink);
}
.n-faq summary::-webkit-details-marker { display: none; }
.n-faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--sun-500); color: var(--n-ink);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; line-height: 1;
}
.n-faq details[open] summary::after { content: "\2212"; background: var(--coral-600); color: #fff; }
.n-faq .n-faq-a { padding: 0 24px 22px; }
.n-faq .n-faq-a p { margin: 0 0 10px; color: var(--n-ink-2); font-size: 16px; }
.n-faq .n-faq-a p:last-child { margin-bottom: 0; }

/* ---------- Closing ------------------------------------------------------- */
.n-close { position: relative; overflow: hidden; background: var(--night-900); padding: 110px 0; text-align: center; }
.n-close > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.n-close::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 420px at 50% 50%, rgba(28, 18, 48, 0.35), rgba(28, 18, 48, 0.86)); }
.n-close .n-wrap { position: relative; z-index: 2; }
.n-close .n-h2 { color: #fff; font-size: clamp(36px, 5.6vw, 72px); max-width: 14em; margin-left: auto; margin-right: auto; }
.n-close .n-lede { color: #F1ECF8; margin-left: auto; margin-right: auto; }
.n-close .store-badges { justify-content: center; margin-top: 30px; }
/* .n-close badge pill colours removed: the dark band uses Apple's white badge artwork. */
.n-close a:focus-visible { outline-color: var(--sun-300); }
.n-close .n-fine { color: #E4DCF1; }
.n-close .n-link { color: var(--sun-300); }

/* ---------- Interior page hero ------------------------------------------- */
.n-phero {
  position: relative; overflow: hidden; padding: 64px 0 80px;
  background:
    radial-gradient(760px 460px at 92% 0%, rgba(255, 184, 28, 0.5), transparent 62%),
    radial-gradient(620px 420px at 0% 100%, rgba(0, 167, 157, 0.18), transparent 60%),
    var(--cream);
}
.n-phero--coral { background: radial-gradient(760px 460px at 92% 0%, rgba(255, 107, 71, 0.34), transparent 62%), radial-gradient(620px 420px at 0% 100%, rgba(255, 184, 28, 0.34), transparent 60%), var(--cream); }
.n-phero .n-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.n-phero .n-h1 { font-size: clamp(40px, 5.8vw, 72px); }
.n-phero--solo .n-wrap { grid-template-columns: 1fr; max-width: 900px; text-align: center; }
.n-phero--solo .n-lede { margin-left: auto; margin-right: auto; }
.n-phero--solo .n-actions, .n-phero--solo .store-badges { justify-content: center; }

/* ---------- Cards grid (generic) ------------------------------------------ */
.n-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.n-cards--2 { grid-template-columns: repeat(2, 1fr); }
.n-cards > li, .n-card { background: #fff; border-radius: 18px; padding: 28px 26px; box-shadow: var(--n-shadow-sm); }
.n-cards p { margin: 0; color: var(--n-ink-2); font-size: 16px; }
.n-cards p + p { margin-top: 10px; }
.n-card--photo { padding: 0; overflow: hidden; }
.n-card--photo .n-card-img { aspect-ratio: 4 / 3; overflow: hidden; }
.n-card--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.n-card--photo .n-card-body { padding: 22px 24px 26px; }
.n-sec--night .n-cards > li { background: var(--night-800); box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.10); }
.n-sec--night .n-cards p { color: #D9D0E8; }
.n-sec--night .n-cards .n-h3 { color: #fff; }

.n-prose p { font-size: 18px; line-height: 1.65; color: var(--n-ink-2); margin: 0 0 16px; max-width: 40em; }
.n-prose p strong { color: var(--n-ink); }

.n-fee { width: 100%; border-collapse: collapse; margin: 18px 0 0; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--n-shadow-sm); }
.n-fee th, .n-fee td { text-align: left; padding: 14px 18px; font-size: 16px; border-bottom: 1px solid rgba(28, 18, 48, 0.08); }
.n-fee th { background: var(--night-900); color: #fff; font-weight: 700; }
.n-fee tr:last-child td { border-bottom: 0; }


/* ---------- Old way vs Localsville ---------------------------------------- */
.n-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.n-vs-col { border-radius: 18px; padding: 34px 32px; }
.n-vs-col h3 { font-family: var(--font-display); font-weight: 900; font-size: 26px; margin: 0 0 18px; }
.n-vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.n-vs-col li { position: relative; padding-left: 38px; font-size: 17px; line-height: 1.45; }
.n-vs-col li::before { content: ""; position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; }
.n-vs-old { background: #EFE9F5; }
.n-vs-old h3, .n-vs-old li { color: var(--n-ink-2); }
.n-vs-old li::before { background: #CFC5DD; }
.n-vs-old li::after { content: ""; position: absolute; left: 7px; top: 13px; width: 12px; height: 3px; border-radius: 2px; background: #fff; }
.n-vs-new { background: var(--night-900); box-shadow: var(--n-shadow); }
.n-vs-new h3, .n-vs-new li { color: #fff; }
.n-vs-new li::before { background: var(--sun-500); }
.n-vs-new li::after { content: ""; position: absolute; left: 9px; top: 6px; width: 6px; height: 12px; border: solid var(--night-900); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* ---------- Start strip ---------------------------------------------------- */
.n-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; counter-reset: st; }
.n-start li { counter-increment: st; background: #fff; border-radius: 18px; padding: 26px 26px 28px; box-shadow: var(--n-shadow-sm); border-top: 8px solid var(--sun-500); }
.n-start li:nth-child(2) { border-top-color: var(--coral-600); }
.n-start li:nth-child(3) { border-top-color: var(--lagoon-700); }
.n-start li::before { content: "0" counter(st); display: block; font-family: var(--font-display); font-weight: 900; font-size: 34px; color: var(--n-ink); margin-bottom: 6px; }
.n-start p { margin: 0; color: var(--n-ink-2); font-size: 16px; }

/* ---------- Mobile action dock --------------------------------------------- */
.n-dock { display: none; }
@media (max-width: 760px) {
  /* Sticky in the page flow (between <main> and the footer), not fixed: the bar
     occupies its own height, so the end of every page scrolls fully clear of it
     whatever height the bar wraps to. site.css makes every .btn full width at
     <=480px; undo that here or the button pushes off the screen edge. */
  .n-dock {
    display: flex; gap: 10px; align-items: center; justify-content: space-between;
    position: sticky; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(28, 18, 48, 0.96);
  }
  .n-dock span { flex: 1 1 auto; min-width: 0; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.2; }
  .n-dock .btn { width: auto; min-height: 44px; padding: 0 20px; font-size: 15px; flex: none; white-space: nowrap; }
  .n-vs, .n-start { grid-template-columns: 1fr; }
  .n-vs-col { padding: 28px 24px; }
}
/* With /assets/js/dock.js the bar waits until the hero CTA is scrolled past.
   visibility + transform keep its space, so revealing it shifts nothing, and a
   hidden bar is neither focusable nor announced. No script: always visible. */
.n-dock-js .n-dock { transition: transform 180ms ease, visibility 180ms; }
.n-dock-js .n-dock:not(.is-on) { visibility: hidden; transform: translateY(100%); }
@media (max-width: 340px) {
  .n-dock span { display: none; }
  .n-dock .btn { flex: 1 1 auto; }
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1020px) {
  .n-hero .n-wrap, .n-phero .n-wrap { grid-template-columns: 1fr; gap: 44px; }
  .n-collage { min-height: 0; aspect-ratio: 1 / 1; max-width: 620px; width: 100%; margin: 0 auto; }
  .n-split { grid-template-columns: 1fr; gap: 44px; }
  .n-split--flip > :first-child { order: 0; }
  .n-flow { grid-template-columns: 1fr 1fr; }
  .n-chain { grid-template-columns: 1fr 1fr; }
  .n-trust, .n-cards { grid-template-columns: 1fr 1fr; }
  .n-loss-grid { grid-template-columns: 1fr; }
  .n-places { grid-template-columns: 1fr 1fr; }
  .n-places .n-place:first-child { grid-column: 1 / -1; }
  .n-k { grid-template-columns: 1fr; padding: 48px 36px; }
}
@media (max-width: 760px) {
  .n-sec { padding: 64px 0; }
  .n-sec--tight { padding: 48px 0; }
  .n-wrap { padding: 0 20px; }
  .n-hero { padding: 40px 0 64px; }
  .n-collage .n-phone { right: 0; }
  .n-phero { padding: 40px 0 56px; }
  .n-faq { grid-template-columns: 1fr; }
  .n-head { margin-bottom: 32px; }
  .n-close { padding: 80px 0; }
}
@media (max-width: 620px) {
  .n-hero-paths { grid-template-columns: 1fr; }
  .n-flow, .n-chain, .n-trust, .n-cards, .n-cards--2, .n-feats, .n-places { grid-template-columns: 1fr; }
  .n-places .n-place { min-height: 260px; }
  .n-collage .n-sticker { font-size: 13.5px; padding: 9px 13px; }
  .n-collage .n-s1 { left: 0; }
  .n-collage .n-s2 { right: 0; }
  .n-visual { min-height: 0; }
  .n-visual .n-v1 { left: 0; }
  .n-visual .n-v2 { right: 0; }
  .n-visual .n-sticker { font-size: 14px; padding: 9px 13px; }
  .n-duo { gap: 12px; }
  .n-duo .n-phone { width: 48%; border-width: 6px; }
  .n-duo .n-phone:nth-child(2) { margin-top: 36px; }
  .n-k { padding: 36px 24px; border-radius: 28px; }
  .n-k div .n-k-policy { font-size: 18px; }
  .n-loss-out { padding: 28px 24px; }
  .n-actions .btn { width: 100%; }
  .n-phone { border-width: 8px; }
  .n-fee th, .n-fee td { padding: 12px 12px; font-size: 15px; }
}

/* ---------- Phone: long card stacks become swipe rows ---------------------- */
@media (max-width: 620px) {
  .n-flow, .n-chain, .n-trust, .n-places, .n-loss-grid, .n-start, .n-cards {
    display: flex; grid-template-columns: none; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-left: -20px; margin-right: -20px; padding: 6px 20px 18px; scroll-padding-left: 20px;
  }
  .n-flow > *, .n-chain > *, .n-trust > *, .n-places > *, .n-loss-grid > *, .n-start > *, .n-cards > * {
    flex: 0 0 80%; scroll-snap-align: start;
  }
  .n-places .n-place:first-child { grid-column: auto; }
  .n-feats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .n-feats li { padding: 14px 14px; border-radius: 14px; }
  .n-feats strong { font-size: 16px; }
  .n-feats span { font-size: 14px; line-height: 1.4; }
  .n-feats--1 { grid-template-columns: 1fr; }
}

/* ---------- /join: the provider invitation --------------------------------
   Scoped to body.n-join, so no other page changes. Links, focus rings and the
   five-step guide use the Delicious palette; nothing here falls back to the
   legacy blue tokens site.css still defines (--link, --focus-ring and the
   literal focus outline). */
body.n-join { --link: var(--coral-700); --focus-ring: 0 0 0 3px rgba(214, 58, 18, 0.28); }
body.n-join a:focus-visible,
body.n-join button:focus-visible,
body.n-join summary:focus-visible { outline-color: var(--coral-700); }
body.n-join .n-sec--lagoon .n-head .n-h2 { max-width: 18em; margin-left: auto; margin-right: auto; }

.join-invite { margin: 0 0 24px; max-width: 36em; }
.join-invite p { font-size: 17px; line-height: 1.55; color: var(--n-ink); margin: 0 0 12px; }
.join-invite .join-note { font-size: 15px; color: var(--n-ink-2); }

.join-featured {
  background: #fff; border-radius: 24px; padding: 32px 30px;
  box-shadow: var(--n-shadow); border-top: 6px solid var(--lagoon-500);
}
.join-featured .n-h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin: 0 0 14px; }
.join-featured p { font-size: 17px; line-height: 1.55; color: var(--n-ink-2); margin: 0 0 14px; }
.join-featured .join-featured-strong { font-weight: 800; color: var(--n-ink); }
.join-featured .join-featured-fine { font-size: 15px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(28, 18, 48, 0.1); }

/* Five steps, not four; on a phone they stack, so the guide reads top to bottom. */
body.n-join .n-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.n-join .n-flow li { padding: 26px 22px 24px; }
body.n-join .n-flow li:nth-child(5)::before { background: var(--coral-700); color: #fff; }
body.n-join .n-flow .n-h3 { font-size: 20px; }
@media (max-width: 1020px) {
  body.n-join .n-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body.n-join .n-flow {
    display: grid; grid-template-columns: 1fr; gap: 14px;
    overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
  }
  body.n-join .n-flow > * { flex: none; }
  .join-featured { padding: 26px 22px; }
}

/* ---------- Home: Featured First (provider recruitment) -------------------
   A premium invitation, not a banner: one card with a warm gradient edge, the
   story on a cream-to-white field that warms toward the seam, and the offer on
   a coral -> apricot -> golden panel with restrained light. Text on the panel is
   deep plum (AA on every stop); the CTA is deep plum, so it never reads as the
   hero's orange button. Scoped to .n-ff; no legacy blue focus tokens. */
.n-ff {
  --ff-coral: #FF8A5C; --ff-apricot: #FFB27A; --ff-gold: #FFD27A;
  padding: 72px 0; background: linear-gradient(180deg, var(--cream) 0%, #FFF1E2 100%);
}
.n-ff-card {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  border: 2px solid transparent; border-radius: 34px; overflow: hidden;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, rgba(255, 138, 92, 0.55), rgba(255, 210, 122, 0.85)) border-box;
  box-shadow: 0 28px 60px rgba(180, 46, 12, 0.14), 0 6px 18px rgba(28, 18, 48, 0.08);
}
.n-ff-copy {
  padding: 52px 48px;
  background: radial-gradient(520px 360px at 100% 50%, rgba(255, 178, 122, 0.22), transparent 70%), linear-gradient(180deg, var(--cream) 0%, #fff 100%);
}
.n-ff-copy .n-h2 { font-size: clamp(32px, 4vw, 50px); margin-bottom: 20px; }
.n-ff-lead { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.35; color: var(--n-ink); margin: 0 0 12px; max-width: 30em; }
.n-ff-body { font-size: 18px; line-height: 1.55; color: var(--n-ink-2); margin: 0; max-width: 32em; }
.n-ff-offer {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 48px 44px;
  background:
    radial-gradient(380px 260px at 18% 8%, rgba(255, 255, 255, 0.42), transparent 70%),
    linear-gradient(150deg, var(--ff-coral) 0%, var(--ff-apricot) 52%, var(--ff-gold) 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 -40px 60px -40px rgba(180, 46, 12, 0.18);
  color: var(--night-900);
}
.n-ff-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.35; color: var(--night-900); margin: 0; }
.n-ff-cta.btn--light { align-self: flex-start; min-height: 56px; background: var(--night-900); color: #fff; box-shadow: 0 12px 26px rgba(28, 18, 48, 0.32); }
.n-ff-cta.btn--light:hover { background: var(--night-700); color: #fff; }
.n-ff-trust { font-size: 15px; font-weight: 700; color: var(--night-800); margin: 0; }
.n-ff a:focus-visible { outline: 3px solid var(--night-900); outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
@media (max-width: 1020px) {
  .n-ff-card { grid-template-columns: 1fr; }
  .n-ff-copy { background: radial-gradient(520px 260px at 50% 100%, rgba(255, 178, 122, 0.22), transparent 70%), linear-gradient(180deg, var(--cream) 0%, #fff 100%); }
  .n-ff-offer { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -40px 60px -40px rgba(180, 46, 12, 0.18); }
}
@media (max-width: 620px) {
  .n-ff { padding: 48px 0; }
  .n-ff-card { border-radius: 26px; }
  .n-ff-copy { padding: 32px 22px 28px; }
  .n-ff-offer { padding: 30px 22px 32px; }
  .n-ff-cta.btn--light { align-self: stretch; text-align: center; }
}

/* ---------- /join: Already on Localsville (published People) --------------
   Cards mirror each person's live /people/all card: photo, community, name,
   lead offering and public price. The offering title is published in full and
   clamped to two lines by CSS only. White cards on a warm field; on phones each
   card turns into a compact row. No motion. */
.jp { background: linear-gradient(180deg, #FFF1E2 0%, var(--cream) 100%); }
.jp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.jp-item { display: flex; }
.jp-card {
  display: flex; flex-direction: column; width: 100%; background: #fff; color: var(--n-ink);
  border-radius: 24px; overflow: hidden; border: 1px solid rgba(28, 18, 48, 0.06);
  box-shadow: var(--n-shadow-sm);
}
.jp-card:hover { box-shadow: var(--n-shadow); text-decoration: none; }
body.n-join .jp-card:focus-visible { outline: 3px solid var(--coral-700); outline-offset: 3px; border-radius: 24px; }
.jp-photo { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--coral-100); }
.jp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jp-price {
  position: absolute; right: 12px; bottom: 12px; font: 900 18px/1 var(--font-display);
  background: var(--coral-600); color: #fff; padding: 8px 12px; border-radius: 12px;
  box-shadow: 0 6px 16px rgba(28, 18, 48, 0.25);
}
.jp-price--quote { background: #fff; color: var(--n-ink); }
.jp-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 18px 20px; }
.jp-where { font: 800 12px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-700); }
.jp-name { font: 900 22px/1.15 var(--font-display); color: var(--n-ink); margin: 0; }
.jp-offer {
  margin-top: auto; padding: 10px 12px 0; border-bottom: 10px solid var(--cream); border-radius: 12px;
  background: var(--cream); font: 800 15px/1.3 var(--font-ui); color: var(--n-ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
/* No bottom padding on a clamped box: overflow clips at the padding edge, so padding
   would show a sliver of the third line. The cream border gives the same spacing. */
.jp-go { font: 800 14px/1 var(--font-ui); color: var(--coral-700); }
.jp-go::after { content: " \2192"; }
@media (max-width: 1020px) {
  .jp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .jp-grid { grid-template-columns: 1fr; gap: 12px; }
  .jp-card { flex-direction: row; border-radius: 20px; }
  .jp-photo { flex: 0 0 112px; aspect-ratio: auto; }
  .jp-price { right: 8px; bottom: 8px; font-size: 14px; padding: 6px 8px; border-radius: 10px; }
  .jp-body { gap: 5px; padding: 14px 14px 16px; }
  .jp-name { font-size: 19px; }
  .jp-offer { font-size: 14px; padding: 8px 10px 0; border-bottom-width: 8px; }
}