/* ns-extras.css: styles for ns-extras.js (announcement bar, offer pop-up, mobile sticky bar, Help). Hand-written, copied to public/new-home/shared/ by
   scripts/new-home/mirror.mjs. Colours come from the site's own tokens (chrome.css --wc-*, and the page's --bg/--panel/--text/--line/--ember where a page
   has them), so light and dark follow html[data-theme]. See EXTRAS.md in src/app/new-home. */
:root {
  --nsx-bg: var(--bg, var(--wc-bg, #08080A));
  --nsx-panel: var(--panel, var(--wc-bg, #101013));
  --nsx-text: var(--text, var(--wc-text, #EDEDEF));
  --nsx-muted: var(--muted, var(--wc-muted, #8A8A93));
  --nsx-line: var(--line, var(--wc-line, rgba(255,255,255,.09)));
  --nsx-line2: var(--line2, var(--wc-line2, rgba(255,255,255,.16)));
  --nsx-ember: var(--ember, var(--wc-ember, #FF5A1F));
  --nsx-ink: #FF5A1F;           /* ember as TEXT: lighter on dark, darker on light, so it passes AA both ways */
  --nsx-hi: var(--wc-hi, rgba(255,255,255,.07));
  --nsx-scrim: rgba(5,5,7,.64);
  --nsx-shadow: 0 30px 80px -30px rgba(0,0,0,.85);
  --nsx-bar-h: 40px;
}
html[data-theme="light"] { --nsx-ink: #BD390D; --nsx-scrim: rgba(30,22,12,.42); --nsx-shadow: 0 30px 80px -34px rgba(40,28,14,.45); }

/* ---------- announcement bar (above the fixed header; scrolls away with the page) ---------- */
.nsx-bar { display: none; }
html.nsx-on .nsx-bar { display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; height: var(--nsx-bar-h); padding: 0 48px 0 16px;
  background: color-mix(in srgb, var(--nsx-ember) 12%, var(--nsx-bg)); border-bottom: 1px solid var(--nsx-line);
  font: 500 13px/1.2 "Geist NS", Geist, system-ui, sans-serif; color: var(--nsx-text); }
html.halloween.nsx-on .nsx-bar { background: linear-gradient(90deg, color-mix(in srgb, #9670E6 16%, var(--nsx-bg)), color-mix(in srgb, var(--nsx-ember) 16%, var(--nsx-bg))); }
.nsx-bar-text { margin: 0; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.nsx-bar-text strong { font-weight: 650; }
.nsx-hw { display: none; } .nsx-std { display: inline; }
html.halloween .nsx-hw { display: inline; } html.halloween .nsx-std { display: none; }
.nsx-hw .nsx-pumpkin { display: inline-block; width: 22px; height: auto; margin-right: 8px; vertical-align: middle; }
.nsx-bar-link { color: var(--nsx-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.nsx-bar-link:hover { text-decoration-thickness: 2px; }
.nsx-bar .nsx-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.nsx-bar a:focus-visible, .nsx-bar button:focus-visible { outline: 2px solid var(--nsx-ink); outline-offset: 2px; }
@media (max-width: 639px) { .nsx-long { display: none; } html.nsx-on .nsx-bar { font-size: 12px; line-height: 1.2; padding-left: 12px; }
  .nsx-bar-text { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } }
@media (max-width: 359px) { .nsx-hw strong { display: none; } }
/* the header is position:fixed, so the bar must be cleared by moving it down by the bar's remaining height (ns-extras.js keeps --nsx-off current on scroll) */
html.nsx-on .wch { margin-top: var(--nsx-off, var(--nsx-bar-h)); }

/* ---------- shared bits ---------- */
.nsx-x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--nsx-muted); background: none; border: 0; cursor: pointer; transition: color .2s, background .2s; }
.nsx-x:hover { color: var(--nsx-text); background: var(--nsx-hi); }
.nsx-x:focus-visible { outline: 2px solid var(--nsx-ink); outline-offset: 2px; }
.nsx-eyebrow { font: 600 11px/1.3 "Geist NS", Geist, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--nsx-ink); }
.nsx-pop { font-family: "Geist NS", Geist, system-ui, sans-serif; color: var(--nsx-text); }
.nsx-pop .w-btn { display: flex; width: 100%; }
.nsx-pop .nsx-g { display: inline-grid; place-items: center; position: relative; z-index: 2; }
.nsx-foot { margin-top: 12px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--nsx-muted); }
.nsx-soft { display: block; margin-top: 14px; text-align: center; font-size: 13px; font-weight: 500; color: var(--nsx-ink); border-radius: 6px; }
.nsx-soft:hover { color: var(--nsx-text); }
.nsx-soft:focus-visible { outline: 2px solid var(--nsx-ink); outline-offset: 3px; }
.nsx-or { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--nsx-muted); }
.nsx-or span { height: 1px; flex: 1; background: var(--nsx-line); }

/* ---------- the pop-up: modal on a fine pointer ---------- */
.nsx-pop.nsx-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .22s ease; }
.nsx-pop.nsx-in { opacity: 1; }
.nsx-scrim { position: absolute; inset: 0; background: var(--nsx-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nsx-modal .nsx-panel { position: relative; width: min(32rem, 92vw); max-height: 90vh; overflow-y: auto; background: var(--nsx-panel); border: 1px solid var(--nsx-line2); border-radius: 20px;
  box-shadow: var(--nsx-shadow); transform: translateY(14px) scale(.985); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.nsx-modal.nsx-in .nsx-panel { transform: none; }
.nsx-modal .nsx-x { position: absolute; right: 10px; top: 10px; z-index: 3; background: color-mix(in srgb, var(--nsx-panel) 78%, transparent); }
.nsx-art { position: relative; height: 96px; overflow: hidden; border-radius: 19px 19px 0 0;
  background: radial-gradient(70% 120% at 50% 100%, color-mix(in srgb, var(--nsx-ember) 34%, transparent), transparent 70%); }
.nsx-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--nsx-ember) 1.2px, transparent 1.8px) 0 0 / 10px 10px; opacity: .5;
  -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent), linear-gradient(0deg, #000, transparent 95%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent), linear-gradient(0deg, #000, transparent 95%); mask-composite: intersect; }
html.halloween .nsx-art { height: 148px; background: radial-gradient(70% 120% at 50% 100%, color-mix(in srgb, #9670E6 38%, transparent), transparent 70%), radial-gradient(60% 90% at 50% 110%, color-mix(in srgb, var(--nsx-ember) 30%, transparent), transparent 70%); }
html.halloween .nsx-art::before { background-image: radial-gradient(circle at center, #B092EC 1.2px, transparent 1.8px); }
.nsx-art img { position: absolute; left: 50%; bottom: 0; height: 140px; width: auto; transform: translateX(-50%); pointer-events: none; }
.nsx-modal .nsx-body { position: relative; padding: 14px 32px 28px; }
.nsx-modal h2 { margin: 10px 0 10px; font: 650 28px/1.15 "Geist NS", Geist, system-ui, sans-serif; letter-spacing: -.02em; }
.nsx-modal .nsx-body > p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--nsx-muted); }
.nsx-points { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 7px; font-size: 13.5px; }
.nsx-points li { position: relative; padding-left: 20px; }
.nsx-points li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--nsx-ember); box-shadow: 0 0 8px color-mix(in srgb, var(--nsx-ember) 60%, transparent); }

/* ---------- the pop-up: bottom sheet on touch and small screens (non-modal: no scrim, no focus grab) ---------- */
.nsx-pop.nsx-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; padding: 0 0 env(safe-area-inset-bottom); transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.nsx-pop.nsx-sheet.nsx-in { transform: none; }
.nsx-sheet .nsx-panel { position: relative; pointer-events: auto; max-width: 28rem; margin: 0 auto; background: var(--nsx-panel); border: 1px solid var(--nsx-line2); border-bottom: 0; border-radius: 18px 18px 0 0;
  padding: 16px 18px 14px; box-shadow: 0 -16px 50px -20px rgba(0,0,0,.6); }
@media (min-width: 640px) { .nsx-pop.nsx-sheet { padding: 0 12px calc(12px + env(safe-area-inset-bottom)); } .nsx-sheet .nsx-panel { border-bottom: 1px solid var(--nsx-line2); border-radius: 16px; } }
.nsx-sheet .nsx-x { position: absolute; right: 6px; top: 6px; }
.nsx-sheet .nsx-head { display: flex; align-items: center; gap: 12px; padding-right: 34px; margin-bottom: 8px; }
.nsx-sheet .nsx-head img { width: 56px; height: 56px; flex: none; }
.nsx-sheet .nsx-eyebrow { font-size: 10px; margin-bottom: 4px; }
.nsx-sheet .nsx-title { font: 650 18px/1.2 "Geist NS", Geist, system-ui, sans-serif; letter-spacing: -.01em; }
.nsx-sheet .nsx-short { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--nsx-muted); }
.nsx-sheet .w-btn + .w-btn { margin-top: 8px; }
.nsx-sheet .w-btn { --bh: 46px; }
.nsx-sheet .nsx-foot { margin-top: 10px; font-size: 11px; }
.nsx-sheet .nsx-soft { margin-top: 8px; font-size: 12px; }

/* ---------- the mobile sticky bar (below 1024px, like the old one) ---------- */
.nsx-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--nsx-bg) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--nsx-line);
  transform: translateY(72px); opacity: 0; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s; font-family: "Geist NS", Geist, system-ui, sans-serif; }
.nsx-sticky[hidden] { display: none; }
.nsx-sticky.nsx-in { transform: none; opacity: 1; }
.nsx-sticky-in { display: flex; align-items: center; gap: 12px; max-width: 28rem; margin: 0 auto; }
.nsx-sticky-copy { min-width: 0; flex: 1; }
.nsx-sticky-title { font: 600 14px/1.2 "Geist NS", Geist, system-ui, sans-serif; color: var(--nsx-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.nsx-sticky-note { font-size: 12px; color: var(--nsx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsx-sticky-g { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--nsx-line2); background: var(--nsx-hi); }
.nsx-sticky-g:focus-visible { outline: 2px solid var(--nsx-ink); outline-offset: 2px; }
.nsx-sticky .w-btn { flex: none; --bh: 44px; padding: 0 14px; font-size: 13.5px; }
.nsx-sticky-in { gap: 10px; }
@media (min-width: 1024px) { .nsx-sticky { display: none !important; } }
html.nsx-pop-sheet .nsx-sticky { display: none !important; } /* the sheet takes the one bottom slot (the old bottom-slot rule) */

/* ---------- Help ---------- */
.nsx-help { position: fixed; right: 16px; bottom: 16px; z-index: 1300; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 999px;
  background: var(--nsx-panel); border: 1px solid var(--nsx-line2); color: var(--nsx-text); font: 600 13.5px/1 "Geist NS", Geist, system-ui, sans-serif; text-decoration: none; box-shadow: 0 10px 30px -14px rgba(0,0,0,.6);
  transition: border-color .2s, transform .3s cubic-bezier(.2,.8,.2,1), bottom .25s; }
.nsx-help:hover { border-color: var(--nsx-ember); }
.nsx-help svg { color: var(--nsx-ink); flex: none; }
.nsx-help:focus-visible { outline: 2px solid var(--nsx-ink); outline-offset: 3px; }
@media (max-width: 1023.98px) { html.nsx-sticky-up .nsx-help { bottom: 92px; } html.nsx-pop-sheet .nsx-help { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nsx-pop, .nsx-pop .nsx-panel, .nsx-sticky, .nsx-help { transition: none !important; }
}

/* React pages sit inside the app's root layout, which adds the app's cookie banner (role=dialog, aria-label "Cookie consent"). While it is open, the sticky sign-up bar and,
   on a phone where the banner is full width, the Help pill would cover its buttons: step aside. The mirrored static pages have no banner, so this never matches there. */
html:has([role="dialog"][aria-label="Cookie consent"]) .nsx-sticky { display: none !important; }
@media (max-width: 639px) { html:has([role="dialog"][aria-label="Cookie consent"]) .nsx-help { display: none !important; } }

/* ========== pop-up v2 (2026-10-20, owner: "no more Warmi, make the popup good"): artwork drawn from dots, pill eyebrow, big two-line title, chips ========== */
.nsx-modal .nsx-panel { width: min(34rem, 92vw); border-radius: 24px; background: var(--nsx-panel); overflow: hidden auto; }
.nsx-art { height: 196px; display: grid; place-items: end center; padding-bottom: 6px; border-radius: 0; isolation: isolate;
  background: radial-gradient(80% 90% at 50% 105%, color-mix(in srgb, var(--nsx-ember) 40%, transparent), transparent 68%), linear-gradient(180deg, color-mix(in srgb, var(--nsx-ember) 7%, var(--nsx-bg)), var(--nsx-panel)); }
html.halloween .nsx-art { height: 212px; background: radial-gradient(70% 90% at 50% 108%, color-mix(in srgb, var(--nsx-ember) 44%, transparent), transparent 66%), radial-gradient(90% 80% at 12% -10%, color-mix(in srgb, #9670E6 38%, transparent), transparent 62%),
  radial-gradient(70% 70% at 92% 0%, color-mix(in srgb, #9670E6 24%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, #9670E6 10%, var(--nsx-bg)), var(--nsx-panel)); }
.nsx-art::before { z-index: -1; opacity: .42; }
.nsx-dots { display: block; position: relative; z-index: 1; overflow: visible; }
.nsx-art .nsx-pumpkin { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--nsx-ember) 55%, transparent)); }
.nsx-art .nsx-ramp { margin-bottom: 26px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--nsx-ember) 40%, transparent)); }
.nsx-dots circle { animation: nsxTw 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .31s); transform-box: fill-box; transform-origin: center; }
@keyframes nsxTw { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .62; transform: scale(.86); } }
.nsx-modal .nsx-body { padding: 20px 36px 30px; }
.nsx-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid color-mix(in srgb, var(--nsx-ember) 42%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--nsx-ember) 10%, transparent); font-size: 10.5px; letter-spacing: .12em; }
.nsx-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--nsx-ember); box-shadow: 0 0 10px var(--nsx-ember); flex: none; }
.nsx-modal h2 { margin: 16px 0 12px; font: 700 36px/1.06 "Geist NS", Geist, system-ui, sans-serif; letter-spacing: -.035em; }
.nsx-modal h2 span, .nsx-modal h2 em { display: block; }
.nsx-modal h2 em, .nsx-sheet .nsx-title em { font-style: normal; color: var(--nsx-ink); }
.nsx-modal .nsx-body > p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--nsx-muted); }
.nsx-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.nsx-points li { padding: 6px 12px 6px 26px; border: 1px solid var(--nsx-line2); border-radius: 999px; background: var(--nsx-hi); font-size: 12.5px; line-height: 1.3; }
.nsx-points li::before { left: 11px; top: 50%; margin-top: -3px; }
.nsx-modal .nsx-foot { margin-top: 14px; }
.nsx-modal .nsx-x { right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--nsx-panel) 62%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* the bottom sheet (touch and small screens) */
.nsx-sheet .nsx-panel { border-radius: 22px 22px 0 0; padding: 18px 18px 14px; }
.nsx-sheet .nsx-head { gap: 14px; }
.nsx-mini { flex: none; display: grid; place-items: center; min-width: 64px; }
.nsx-mini .nsx-pumpkin { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--nsx-ember) 50%, transparent)); }
.nsx-sheet .nsx-title { font-size: 19px; line-height: 1.15; }
.nsx-sheet .nsx-title span, .nsx-sheet .nsx-title em { display: block; }
.nsx-sheet .nsx-eyebrow { padding: 4px 9px 4px 8px; font-size: 9.5px; margin-bottom: 7px; }
@media (max-width: 420px) { .nsx-modal .nsx-body { padding: 16px 22px 24px; } .nsx-modal h2 { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .nsx-dots circle { animation: none !important; } }
/* tighter, so the whole card fits a 900px-high window without scrolling */
.nsx-art { height: 150px; } html.halloween .nsx-art { height: 168px; }
.nsx-modal .nsx-body { padding: 16px 32px 22px; }
.nsx-modal h2 { margin: 12px 0 8px; font-size: 32px; }
.nsx-modal .nsx-body > p { margin-bottom: 14px; font-size: 15px; line-height: 1.5; }
.nsx-points { margin-bottom: 16px; gap: 6px; } .nsx-points li { padding: 5px 11px 5px 25px; font-size: 12px; }
.nsx-modal .nsx-foot { margin-top: 10px; } .nsx-modal .nsx-soft { margin-top: 10px; }

/* The React pages (src/app/ns) keep the page tokens on `.ns`, but the bar, the pop-up and the sticky bar live outside it (the pop-up is appended to <body>), so
   var(--bg) and friends do not reach them there and they fell back to the DARK values in light mode. The app writes data-theme="dark" for dark and no attribute for light. */
html:not([data-theme="dark"]):not([data-theme="light"]):has(.ns) { --nsx-bg: #FAFAF8; --nsx-panel: #FFFFFF; --nsx-text: #111113; --nsx-muted: #6E6E76; --nsx-line: #E8E6E1; --nsx-line2: #DAD8D2;
  --nsx-hi: rgba(17,17,19,.05); --nsx-ink: #BD390D; --nsx-scrim: rgba(30,22,12,.42); --nsx-shadow: 0 30px 80px -34px rgba(40,28,14,.45); }