/* 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); }
.lv-header { background: rgba(255, 248, 238, 0.94); border-bottom-color: rgba(28, 18, 48, 0.08); }
.lv-header .inner { max-width: var(--n-max); }
.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; }

.store-badge { background: var(--night-900); border-radius: var(--r-lg); }
a.store-badge:hover, a.store-badge:focus { background: var(--night-700); }

.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; }
.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; }

.n-phone {
  display: block; width: 300px; max-width: 100%;
  border: 10px solid var(--night-900); border-radius: 44px;
  overflow: hidden; background: #FBF7F3; box-shadow: var(--n-shadow);
  aspect-ratio: 660 / 1358;
}
.n-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.n-phone--sm { width: 250px; border-width: 8px; border-radius: 38px; }

.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 .store-badge { background: #fff; color: var(--night-900); }
.n-close a.store-badge:hover, .n-close a.store-badge:focus { background: var(--sun-300); color: var(--night-900); }
.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; border-radius: 28px; }
  .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; border-radius: 36px; }
  .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; }
}