/**
 * ── THE SALES PAGE, DRAWN ───────────────────────────────────────────────────────────────────────
 *
 * The port of the Claude Design document into a real stylesheet. Every value here came off an
 * inline `style=""` in that drawing; nothing has been reinterpreted, tidied or "improved" on the
 * way through. Where the design wrote `style-hover=""` there is a `:hover` rule, and where it wrote
 * a `{{ }}` binding into a style there is a class the runtime toggles.
 *
 * TWO THINGS TO KNOW BEFORE CHANGING ANYTHING HERE:
 *
 *   `cqw` MEANS THE PAGE. `.n-frame` is an inline-size container, so every `cqw` in the drawing
 *   still resolves against the page's own width the way it did in the design tool. The mock and the
 *   window are containers too, which is what lets one tree reflow into a phone without a media
 *   query — see `.n-mock` and `.n-morph`.
 *
 *   THE PHONE IS THE SAME DRAWING, NARROWER, ON PURPOSE. This is a marketing page and not a Clay
 *   site: there is no second layout here, because the design is one column of sticky scenes that
 *   already wraps. The only real branch is at 880px, where the bar swaps its links for a drawer and
 *   the two-column scenes stack — declared once, in `@media (max-width:879.98px)` at the bottom.
 *
 * Served from public/, linked by lib/home.js.
 */

/* ── the ground ────────────────────────────────────────────────────────────────────────────── */
.n-body { margin: 0; background: #0A0A0A; color: #FFFFFF; overflow-x: hidden;
  font-family: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; text-wrap: pretty; }
.n-body * { box-sizing: border-box; }
/* THE ACCENT IS FOR A LINK IN A SENTENCE, and for nothing that has a class of its own. Written as
   `.n-body a` it outweighed every component — the wordmark and the white button in the bar both
   came out orange — because a class-plus-type beats a bare class. `:where()` adds no specificity
   at all, so this is the floor and any component beats it without having to say so. */
.n-body :where(a) { color: #C87F5E; text-decoration: none; }
.n-body :where(a:hover) { color: #DFA283; }
.n-body input, .n-body button, .n-body select, .n-body textarea { font-family: inherit; }
.n-body button { cursor: pointer; }
.n-body ::selection { background: #C87F5E; color: #0A0A0A; }
.n-body ::placeholder { color: #7E7A75; }
.n-body img { max-width: 100%; }
/* `hidden` HAS TO WIN. Half the layers on this page are display:flex when they are open, and a
   class selector beats the [hidden] attribute's own display:none every time — so the sheets, the
   overlay and the login panel all shipped open. One rule, once, rather than a :not() on each. */
.n-body [hidden] { display: none !important; }

.n-frame { container-type: inline-size; position: relative; width: 100%; margin: 0 auto;
  background: #0A0A0A; min-height: 100vh; overflow-x: clip; }

/* the display face, used for every headline and every number that is meant to be read as a size */
.n-h1, .n-h2, .n-say, .n-big, .n-huge, .n-max, .n-logo, .n-foot-mk, .n-side-h, .n-step-t,
.n-tool-t, .n-inc-t, .n-mock-tag, .n-win-tag, .n-raw-v, .n-raw-rt b, .n-login-h, .n-sheet-h,
.n-res-i, .n-win-hrs, .n-mock-name span, .n-win-bar > b, .n-hud-v b {
  font-family: "Bricolage Grotesque", Figtree, sans-serif; }

.n-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.n-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 18px; background: #fff; color: #0A0A0A; }
.n-skip:focus { left: 12px; top: 12px; }

@keyframes n-pulse { 0% { transform: scale(.6); opacity: .5 } 70%, 100% { transform: scale(1.6); opacity: 0 } }

/* ── THE BAR ───────────────────────────────────────────────────────────────────────────────── */
.n-hdr { position: sticky; top: 0; z-index: 90; padding: clamp(9px, 1.6vh, 16px) clamp(12px, 3cqw, 32px);
  pointer-events: none; }
.n-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 1180px; margin: 0 auto;
  padding: 8px 10px 8px clamp(14px, 2.4cqw, 22px); border-radius: 999px; background: rgba(16, 15, 14, .97);
  position: relative; pointer-events: auto; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px rgba(0, 0, 0, .5);
  transition: border-radius 300ms cubic-bezier(.2, .8, .2, 1), padding 300ms cubic-bezier(.2, .8, .2, 1); }
.n-bar.on { border-radius: 26px; }

.n-logo { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: clamp(17px, 2.2cqw, 21px);
  letter-spacing: -.03em; color: #FFFFFF; white-space: nowrap; }
.n-logo:hover { color: #FFFFFF; }

.n-nav { display: flex; align-items: center; gap: 2px; font-size: 15px; white-space: nowrap; flex: none; }
.n-nav > a, .n-nav > button { padding: 9px 14px; border: 0; border-radius: 999px; background: transparent;
  color: #B5B0AA; font-size: 15px;
  transition: background 120ms cubic-bezier(.2, .8, .2, 1), color 120ms linear; }
.n-nav > a:hover, .n-nav > button:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.n-nav > a:active, .n-nav > button:active { background: rgba(255, 255, 255, .14); }

.n-burger { display: none; position: absolute; top: 8px; right: 10px; z-index: 2; flex: none;
  width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07); transition: background 160ms linear; }
.n-burger:hover { background: rgba(255, 255, 255, .16); }
.n-burger span { width: 16px; height: 1.6px; border-radius: 2px; background: #FFFFFF;
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1); }
.n-bar.on .n-burger { background: rgba(255, 255, 255, .18); }
.n-bar.on .n-burger span:first-child { transform: translateY(2.9px) rotate(45deg); }
.n-bar.on .n-burger span:last-child { transform: translateY(-2.9px) rotate(-45deg); }

.n-links { order: 2; flex: 0 0 0px; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 340ms cubic-bezier(.2, .8, .2, 1), opacity 240ms linear; }
.n-bar.on .n-links { flex: 1 1 100%; max-height: 280px; opacity: 1; }
.n-links > a, .n-links > button { display: block; width: 100%; padding: 14px 8px; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07); background: transparent; color: #F1EDE8;
  font-size: 18px; text-align: left; }
.n-links > :last-child { border-bottom: 0; }
.n-links > a:hover, .n-links > button:hover { color: #FFFFFF; }

.n-bar-cta { order: 3; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border-radius: 999px; background: #FFFFFF; color: #0A0A0A;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: height 300ms cubic-bezier(.2, .8, .2, 1), font-size 240ms linear, background 120ms linear; }
.n-bar-cta:hover { background: #EDE9E4; color: #0A0A0A; }
.n-bar-cta:active { background: #D9D4CE; transform: translateY(1px); }
.n-bar.on .n-bar-cta { flex: 1 1 100%; height: 52px; font-size: 16.5px; margin-right: 0; }

/* ── HERO ──────────────────────────────────────────────────────────────────────────────────── */
.n-hero { min-height: 92vh; display: flex; flex-direction: column; justify-content: center;
  padding: max(78px, 7vh) clamp(20px, 5cqw, 52px) clamp(120px, 14vh, 140px);
  max-width: 1180px; margin: 0 auto; }

.n-pulse { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 12px;
  border-radius: 999px; background: #111110; border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); align-self: flex-start;
  margin: 0 0 clamp(16px, 3vh, 28px); font-size: 13px; color: #D7D2CC; }
.n-pulse i { position: relative; width: 8px; height: 8px; flex: none; border-radius: 999px; background: #3FBF6A; }
.n-pulse i::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; background: #3FBF6A;
  opacity: .35; animation: n-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }
.n-pulse span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-pulse b { font-weight: inherit; font-variant-numeric: tabular-nums; }

/* ARRIVED OFF SOMEBODY'S "MADE WITH CLAY" BADGE — the same chip, in the same place, saying the one
   thing that beats a count: the site they were just on was made here. It is a LINK (their site is
   the proof, one tap away), so it takes a hover the count never needed, and it carries THEIR icon
   — favicon, or the first letter of their name — never ours. */
.n-ref { text-decoration: none; gap: 8px; padding: 0 15px 0 5px; height: 36px; max-width: 100%;
  transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.n-ref:hover { background: #1A1917; border-color: rgba(255, 255, 255, .17); transform: translateY(-1px); }
.n-ref-ic { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 999px; overflow: hidden; background: #2C2825;
  font-size: 12px; font-weight: 700; line-height: 1; color: #EFEAE4; }
.n-ref-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-ref b { font-weight: 650; color: #F6F3F0; }

.n-h1 { margin: 0; font-weight: 500; font-size: clamp(34px, 8.6cqw, 92px); line-height: .96;
  letter-spacing: -.048em; max-width: 15em; }
.n-h1-sm { font-size: clamp(30px, 8cqw, 84px); line-height: .97; max-width: 14em;
  margin: 0 0 clamp(18px, 3.6vh, 40px); }
.n-lede { margin: clamp(16px, 3vh, 30px) 0 clamp(22px, 3.6vh, 40px);
  font-size: clamp(16.5px, 2.1cqw, 24px); line-height: 1.38; color: #C4BFB9; max-width: 24em; }
.n-note { margin: 13px 0 0; font-size: 14.5px; color: #8A8580; max-width: 34em; }

/* ── THE SEARCH — the same box twice, and it is the generator ──────────────────────────────── */
.n-search { max-width: 640px; width: 100%; position: relative; }
.n-sbox { display: flex; align-items: center; gap: 12px; height: clamp(56px, 7.6vh, 68px);
  padding: 0 8px 0 18px; border-radius: 14px; background: #100F0E; border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -1px 0 rgba(0, 0, 0, .4); }
.n-sbox:focus-within { border-color: rgba(255, 255, 255, .26); }
.n-glass { width: 19px; height: 19px; flex: none; color: #8A8580; }
.n-sbox input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: none;
  color: #FFFFFF; font-size: clamp(16px, 2cqw, 19px); -webkit-appearance: none; appearance: none; }
.n-sbox input::-webkit-search-cancel-button { display: none; }
/* THE PLACEHOLDER IS A SENTENCE NOW, and a cut that lands mid-glyph reads as a broken box — the
   words it would eat are "Google Maps", which is the point of it. The shrinking half is in the
   phone block at the bottom, where every narrowing rule in this file lives. */
.n-sbox input { text-overflow: ellipsis; }
.n-sclear { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent;
  color: #8A8580; font-size: 20px; transition: background 110ms linear, color 110ms linear; }
.n-sclear:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; }
.n-sclear:active { background: rgba(255, 255, 255, .12); }

.n-spanel { margin-top: 10px; border-radius: 14px; background: #100F0E;
  border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -1px 0 rgba(0, 0, 0, .4); overflow: hidden; }
.n-res { display: flex; width: 100%; align-items: center; gap: 14px; padding: 14px 16px;
  background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); text-align: left;
  color: inherit; transition: background 110ms linear; }
.n-res:last-child { border-bottom: 0; }
.n-res:hover { background: rgba(255, 255, 255, .055); }
.n-res:active { background: rgba(255, 255, 255, .1); }
.n-res-i { flex: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .07);
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: #C4BFB9; }
.n-res-t { min-width: 0; flex: 1; }
.n-res-n { font-size: 16px; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-res-l { font-size: 13.5px; color: #8A8580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the answer to a phrase this one begins with, still on screen while the real one is fetched —
   dimmed, because it is nearly right rather than right */
.n-spanel.n-stale { opacity: .55; }
.n-sword { padding: 18px; font-size: 16px; line-height: 1.45; color: #B5B0AA; }
.n-sword b { display: block; color: #FFFFFF; font-weight: 400; }
.n-sword span { display: block; margin-top: 4px; font-size: 14px; color: #8A8580; }

.n-picked { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 16px; background: rgba(200, 127, 94, .09);
  border: 1px solid rgba(200, 127, 94, .3); }
.n-picked-tx { flex: 1; min-width: 170px; }
.n-picked-tx b { display: block; font-size: 16.5px; font-weight: 400; }
.n-picked-tx span { font-size: 13.5px; color: #B5B0AA; }
.n-picked-go { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border: 0;
  border-radius: 999px; background: #FFFFFF; color: #0A0A0A; font-size: 15px; font-weight: 500;
  transition: background 120ms cubic-bezier(.2, .8, .2, 1), transform 90ms ease; }
.n-picked-go:hover { background: #EDE9E4; }
.n-picked-go:active { background: #D9D4CE; transform: translateY(1px); }
.n-picked-go[disabled] { opacity: .6; }

/* ── A SCENE — one screen held still while the page scrolls past it ────────────────────────── */
.n-act { position: relative; }
.n-act-raw { height: 200vh; }
.n-act-trade { height: 200vh; }
.n-act-build { height: 640vh; }
.n-act-screens { height: 260vh; }
.n-act-domain { height: 220vh; }
.n-act-alive { height: 230vh; }
.n-act-pay { height: 260vh; background: #FFFFFF; color: #0A0A0A; }

.n-stick { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  justify-content: center; padding: max(84px, 10vh) clamp(20px, 5cqw, 52px) max(104px, 12vh);
  max-width: 1180px; margin: 0 auto; overflow: hidden; }
.n-act-raw .n-stick { justify-content: flex-start; }
.n-act-trade .n-stick { padding-left: 0; padding-right: 0; }
.n-pad { padding: 0 clamp(20px, 5cqw, 52px); }

.n-h2 { margin: 0 0 clamp(14px, 3.4vh, 40px); font-weight: 500;
  font-size: clamp(26px, min(6.6cqw, 8.4vh), 58px); line-height: 1.02; letter-spacing: -.04em; max-width: 17em; }
.n-sub { margin: clamp(8px, 1.6vh, 16px) 0 0; font-size: clamp(15px, min(1.9cqw, 2.6vh), 19px); color: #8A8580; }
.n-say { margin: clamp(14px, 3.4vh, 44px) 0 0; font-weight: 400;
  font-size: clamp(20px, min(3.2cqw, 5.4vh), 40px); line-height: 1.1; letter-spacing: -.025em; max-width: 19em; }
.n-eyebrow { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #6E6A65; margin: 0; }

/* ── THE RAW MATERIAL ──────────────────────────────────────────────────────────────────────── */
.n-raw { flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 168px), 1fr)); grid-auto-rows: minmax(0, 1fr);
  gap: clamp(8px, 1.2cqw, 14px); max-width: 940px; }
.n-rawc { min-height: 0; overflow: hidden; padding: clamp(12px, 2.2vh, 20px) clamp(13px, 2cqw, 20px);
  border-radius: 18px; background: linear-gradient(180deg, #141312 0%, #0F0E0D 100%);
  border: 1px solid rgba(255, 255, 255, .065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .45); }
.n-rawc-k { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #8A8580; }
.n-rawc-s { margin-top: 9px; font-size: 13.5px; color: #B5B0AA; }
.n-raw-ph { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.n-raw-ph img { aspect-ratio: 1; max-height: clamp(24px, 5.4vh, 58px); width: 100%; border-radius: 6px;
  background: #2E2A26; object-fit: cover; display: block; }
.n-raw-rt { margin-top: 10px; display: flex; align-items: baseline; gap: 7px; }
.n-raw-rt b { font-weight: 400; font-size: clamp(20px, 2.4cqw, 26px); }
.n-raw-rt i { color: #C87F5E; font-size: 15px; font-style: normal; }
.n-raw-rt span { font-size: 13.5px; color: #8A8580; }
.n-raw-v { margin-top: 10px; font-weight: 400; font-size: clamp(18px, 2.2cqw, 24px); letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; }

/* ── WHAT DO YOU DO ────────────────────────────────────────────────────────────────────────── */
.n-chips { margin-top: clamp(16px, 3vh, 34px); overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.n-chips::-webkit-scrollbar { display: none; }
.n-chips-in { display: flex; gap: 8px; padding: 2px clamp(20px, 5cqw, 52px) 14px; width: max-content; }
.n-chip { flex: none; height: 50px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: #E6E2DD;
  font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: background 130ms cubic-bezier(.2, .8, .2, 1), border-color 130ms linear, transform 90ms ease; }
.n-chip:hover { border-color: rgba(255, 255, 255, .46); background: rgba(255, 255, 255, .05); }
.n-chip:active { transform: translateY(1px) scale(.985); }
.n-chip.on { background: #FFFFFF; color: #0A0A0A; border-color: #FFFFFF; }

.n-tools { margin-top: clamp(8px, 1.6vh, 18px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(47%, 215px), 1fr)); gap: clamp(8px, 1.2cqw, 14px); }
.n-tool { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 9px;
  padding: clamp(15px, 2.4vh, 24px) clamp(16px, 2cqw, 24px); border-radius: 20px;
  background: linear-gradient(180deg, #151413 0%, #0E0D0C 100%); border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px rgba(0, 0, 0, .35);
  transition: border-color 140ms linear; }
.n-tool:hover { border-color: rgba(255, 255, 255, .16); }
.n-tool-t { font-weight: 500; font-size: clamp(18px, 2.2cqw, 23px); letter-spacing: -.025em; }
.n-tool-d { font-size: 14.5px; line-height: 1.5; color: #A9A49E; }
.n-gain { margin: clamp(12px, 2.6vh, 32px) 0 0; font-size: clamp(15px, min(1.9cqw, 3vh), 20px);
  color: #C4BFB9; max-width: 30em; }

/* ── A TWO-COLUMN SCENE: the words at the side, the thing in the middle ────────────────────── */
.n-split { flex-direction: row; align-items: stretch; gap: clamp(10px, 2.2vh, 30px); }
.n-side { flex: 0 0 clamp(230px, 31%, 350px); min-width: 0; display: flex; flex-direction: column;
  justify-content: center; }
.n-stage { position: relative; flex: 1; min-height: 0; min-width: 0; display: flex;
  align-items: center; justify-content: center; }

/* ── THE BUILD: six steps, one bar, one mock ───────────────────────────────────────────────── */
.n-steps { position: relative; flex: none; min-height: clamp(104px, 17vh, 168px); }
.n-step { position: absolute; inset: 0; opacity: 0; }
.n-step-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #7C7873; }
.n-step:last-child .n-step-k { color: #C87F5E; }
.n-step-t { margin-top: 7px; font-weight: 500; font-size: clamp(19px, min(3.1cqw, 4.2vh), 34px);
  letter-spacing: -.032em; line-height: 1.06; }
.n-prog { position: relative; flex: none; margin-top: clamp(6px, 1.4vh, 14px); height: 2px;
  border-radius: 2px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.n-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #C87F5E; }
.n-rail { display: flex; justify-content: space-between; margin-top: 7px; flex: none;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #5E5A55; }
.n-side-note { margin: clamp(12px, 2.4vh, 26px) 0 0; flex: none; font-size: clamp(13px, 1.8cqw, 16.5px);
  line-height: 1.4; color: #8A8580; }
.n-side-h { margin-top: 7px; font-weight: 500; font-size: clamp(22px, min(4.6cqw, 5vh), 40px);
  letter-spacing: -.035em; line-height: 1.04; max-width: 22em; }
.n-side-swap { flex: none; position: relative; min-height: clamp(64px, 11vh, 96px); margin-top: clamp(10px, 2vh, 22px); }
.n-side-swap p { position: absolute; inset: 0; margin: 0; font-size: clamp(13.5px, 1.8cqw, 17px); color: #8A8580; }
.n-side-swap span { display: inline-block; }

.n-facts { position: absolute; inset: 0; pointer-events: none; }
.n-facts-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(7px, 1.2vh, 11px); }
.n-fact { display: flex; align-items: baseline; gap: 9px; padding: 9px 15px; border-radius: 999px;
  background: #141312; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  white-space: nowrap; max-width: 100%; }
.n-fact span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6E6A65; flex: none; }
.n-fact b { font-weight: 400; font-size: 13.5px; color: #F1EDE8; overflow: hidden; text-overflow: ellipsis; }

/* THE MOCK — one website, repainted by the scroll. Every colour is a custom property the runtime
   interpolates between four looks; nothing here states one of them except as a starting value. */
.n-mock { container-type: inline-size; position: relative; transform-origin: 50% 50%; width: 100%;
  max-width: min(100%, 780px); height: auto; max-height: 100%; aspect-ratio: 4 / 3;
  --bg: #E4E1DC; --fg: #16130F; --muted: #7C7873; --bar: #B7B2AB; --barBg: #C6C1BA; --barFg: #16130F;
  --barR: 10px; --barOn: 1; --textOn: 0; --img: #CFCAC3; --imgR: 8px;
  --btnBg: #C6C1BA; --btnBd: #C6C1BA; --btnFg: #16130F; --btnR: 8px;
  background: var(--bg); border-radius: 22px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 26px 60px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; padding: clamp(9px, 2.4cqw, 20px); gap: clamp(7px, 1.8cqw, 16px); }
.n-mock-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: clamp(7px, 1.5cqw, 13px) clamp(10px, 2cqw, 18px); border-radius: var(--barR);
  background: var(--barBg); color: var(--barFg); }
.n-mock-name { position: relative; min-width: 0; height: clamp(11px, 2.2cqw, 18px); flex: 0 1 auto; }
.n-mock-name .n-skel { position: absolute; left: 0; top: 20%; height: 60%; width: clamp(70px, 26cqw, 150px);
  border-radius: 3px; background: var(--bar); opacity: var(--barOn); }
.n-mock-name span { position: absolute; inset: 0; display: flex; align-items: center; font-weight: 800;
  font-size: clamp(10px, 2.2cqw, 18px); letter-spacing: -.025em; opacity: var(--textOn);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* THE MOCK'S OWN NAV, and how much of it there is room for. It narrows with the mock, which is the
   point — by the time the window is a phone there is nothing left of it but the burger. What it
   may not do is cut a word in half at full width, which is what `20cqw - 40px` did: 116px for
   three words. Wide enough for all three at 780, and gone by 300. */
.n-mock-nav { position: relative; height: clamp(9px, 1.6cqw, 13px); flex: none;
  min-width: clamp(0px, calc(46cqw - 90px), 260px); overflow: hidden; }
.n-mock-nav .n-skel { position: absolute; right: 0; top: 20%; height: 60%; width: 100%; border-radius: 3px;
  background: var(--bar); opacity: var(--barOn); }
.n-mock-nav > span { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: flex-end; gap: clamp(6px, 1.6cqw, 18px); font-size: clamp(7.5px, 1.35cqw, 11.5px);
  letter-spacing: .09em; text-transform: uppercase; opacity: var(--textOn); white-space: nowrap; overflow: hidden; }
.n-mock-nav em { font-style: normal; overflow: hidden; }
.n-mock-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap;
  align-content: stretch; gap: clamp(8px, 2.2cqw, 20px); }
.n-mock-col { flex: 0 1 210px; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  gap: clamp(6px, 1.6cqw, 13px); }
.n-mock-head { position: relative; flex: 0 0 auto; min-height: clamp(26px, min(11cqw, 9vh), 104px); }
.n-mock-para { position: relative; flex: 0 1 auto; min-height: clamp(16px, min(7cqw, 5.6vh), 62px); overflow: hidden; }
.n-skels { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; opacity: var(--barOn); }
.n-mock-para .n-skels { gap: 5px; }
.n-skels i { display: block; height: 7px; border-radius: 3px; background: var(--bar); }
.n-mock-tag { position: absolute; inset: 0; overflow: hidden; font-weight: 500;
  font-size: clamp(14px, 3.9cqw, 32px); line-height: 1.02; letter-spacing: -.034em; color: var(--fg);
  opacity: var(--textOn); }
.n-mock-body-tx { position: absolute; inset: 0; overflow: hidden; font-size: clamp(8.5px, 1.7cqw, 13.5px);
  line-height: 1.42; color: var(--muted); opacity: var(--textOn); }
.n-mock-btns { margin-top: clamp(2px, .8cqw, 8px); display: flex; gap: clamp(5px, 1.2cqw, 9px); flex: none; }
.n-mock-b1, .n-mock-b2 { opacity: 0; flex: 1 1 auto; text-align: center; min-width: 0; display: flex;
  align-items: center; justify-content: center; height: clamp(22px, min(6cqw, 5vh), 46px);
  border-radius: var(--btnR); font-size: clamp(8.5px, 1.7cqw, 13px); white-space: nowrap; overflow: hidden; }
.n-mock-b1 { background: var(--btnBg); color: var(--btnFg); font-weight: 600; }
.n-mock-b2 { border: 1px solid var(--btnBd); color: var(--fg); }
.n-mock-pics { flex: 1 1 200px; min-width: 0; min-height: clamp(60px, min(26cqw, 19vh), 320px);
  overflow: hidden; display: grid; grid-template-rows: 1.7fr 1fr; gap: clamp(5px, 1.2cqw, 10px); }
.n-mock-hero { position: relative; min-height: 0; border-radius: var(--imgR); background: var(--img); overflow: hidden; }
.n-mock-hero img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; }
.n-mock-two { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(5px, 1.2cqw, 10px); }
.n-mock-two > div { min-height: 0; border-radius: var(--imgR); background: var(--img); overflow: hidden; }
.n-mock-two img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-mock-foot { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-top: clamp(5px, 1.2cqw, 10px); border-top: 1px solid rgba(128, 128, 128, .22);
  font-size: clamp(7.5px, 1.4cqw, 12px); color: var(--muted); white-space: nowrap; opacity: var(--textOn); }

/* A CHIP DOES NOT JUST TRAVEL — it grows into the thing it becomes. Position and size are the
   runtime's; everything that makes it a chip is here. */
.n-fly { position: absolute; display: flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 999px; background: #FFFFFF; color: #0A0A0A; font-size: 13px;
  font-weight: 600; white-space: nowrap; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); overflow: hidden;
  opacity: 0; }
.n-fly span { position: relative; }
.n-fly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.n-fly-img { left: 5%; top: 14%; }
.n-fly:nth-of-type(2) { left: 4%; top: 62%; }
.n-fly:nth-of-type(3) { right: 4%; top: 72%; }

/* ── EVERY SCREEN: one window that narrows until it is a phone ─────────────────────────────── */
.n-morph { container-type: inline-size; position: relative; height: 100%; max-height: 100%; width: 100%;
  max-width: 780px; --chrome: 34px; --bezel: 0px; --pad: clamp(10px, 2.8cqw, 26px);
  border-radius: 14px; padding: var(--bezel); background: rgba(22, 19, 15, 0);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.n-win { height: 100%; border-radius: 12px; overflow: hidden; background: #FBF9F6; color: #12100E;
  display: flex; flex-direction: column; }
.n-win-chrome { height: var(--chrome); flex: none; display: flex; align-items: center; gap: 7px;
  padding: 0 12px; background: #F1EDE7; border-bottom: 1px solid rgba(18, 16, 14, .08); overflow: hidden; }
.n-win-chrome > span { width: 8px; height: 8px; flex: none; border-radius: 999px; background: #D6D1C9; }
.n-win-chrome em { margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #FBF9F6;
  color: #7A736B; font-size: 11px; font-style: normal; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.n-win-bar { flex: none; margin: clamp(0px, calc(42px - 10cqw), 10px);
  padding: clamp(8px, 1.5cqw, 13px) clamp(12px, 2cqw, 20px);
  border-radius: clamp(0px, calc(130px - 32cqw), 999px); background: #12100E; color: #F6F1EB;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.n-win-bar > b { font-weight: 800; font-size: clamp(10px, 2.2cqw, 18px); letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-win-bar > span { display: flex; align-items: center; gap: clamp(6px, 1.6cqw, 20px); flex: none; }
.n-win-links { display: flex; align-items: center; gap: clamp(6px, 1.6cqw, 20px);
  width: clamp(0px, calc(74cqw - 330px), 420px); overflow: hidden; flex: none; justify-content: flex-end;
  font-size: clamp(8px, 1.4cqw, 11.5px); letter-spacing: .09em; text-transform: uppercase; color: #A79C90;
  white-space: nowrap; }
.n-win-links em { font-style: normal; flex: none; }
.n-win-burger { display: flex; flex-direction: column; gap: 3px;
  width: clamp(0px, calc(112px - 30cqw), 16px); overflow: hidden; flex: none; }
.n-win-burger i { height: 1.5px; background: #F6F1EB; border-radius: 2px; }
/* NOTHING ESCAPES THE WINDOW. The pictures carry a min-height floor so they never become a sliver,
   and on a narrow window that floor is taller than the row it is in — so the photographs grew out
   under the address line at the bottom of the frame. The window clips its own contents. */
.n-win-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  gap: clamp(7px, 1.8cqw, 16px); padding: var(--pad); }
/* …and the grid clips too. Clipping only the body was not enough: the address line is a SIBLING
   inside it, so a grid whose content is taller than its flex height still ran over the top of it.
   `min-height:0` lets the box shrink; `overflow:hidden` is what stops what is inside escaping. */
.n-win-grid { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap;
  align-content: stretch; gap: clamp(8px, 2.2cqw, 22px); }
.n-win-col { flex: 0 1 230px; min-width: 0; min-height: 0; overflow: hidden; display: flex;
  flex-direction: column; gap: clamp(5px, 1.4cqw, 13px); }
.n-win-tag { flex: none; font-weight: 500; font-size: clamp(14px, min(4.6cqw, 7vh), 38px); line-height: 1;
  letter-spacing: -.035em; }
.n-win-tx { flex: 0 1 auto; min-height: 0; overflow: hidden; font-size: clamp(8.5px, min(1.8cqw, 2.6vh), 14px);
  line-height: 1.42; color: #5F5A55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.n-win-btns { margin-top: clamp(2px, .6cqw, 6px); display: flex; gap: clamp(5px, 1.2cqw, 9px); flex: none; }
.n-win-b1, .n-win-b2 { flex: 1 1 auto; text-align: center;
  padding: clamp(7px, 1.5cqw, 12px) clamp(8px, 2.4cqw, 20px);
  border-radius: clamp(0px, calc(30px - 6cqw), 999px); font-size: clamp(8.5px, 1.7cqw, 13px);
  white-space: nowrap; overflow: hidden; }
.n-win-b1 { background: #12100E; color: #FBF9F6; font-weight: 600; }
.n-win-b2 { border: 1px solid rgba(18, 16, 14, .2); }
.n-win-q { flex: 0 1 auto; min-height: 0; overflow: hidden; margin-top: clamp(8px, 1.8cqw, 18px);
  padding-top: clamp(8px, 1.6cqw, 16px); border-top: 1px solid rgba(18, 16, 14, .1); display: flex;
  flex-direction: column; gap: clamp(4px, .9cqw, 8px); }
.n-win-quote { font-size: clamp(9px, 1.75cqw, 14px); line-height: 1.4; color: #3B3835;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.n-win-from { display: flex; align-items: center; gap: 6px; font-size: clamp(7.5px, 1.3cqw, 11px);
  letter-spacing: .08em; text-transform: uppercase; color: #8C857C; }
.n-win-from span { color: #12100E; }
.n-win-pics { flex: 1 1 190px; min-width: 0; min-height: clamp(80px, min(30cqw, 26vh), 240px);
  display: grid; grid-template-rows: 1.7fr 1fr; gap: clamp(5px, 1.2cqw, 10px); }
.n-win-hero { min-height: 0; background: #E7E1D9; overflow: hidden;
  border-radius: clamp(0px, calc(26px - 5cqw), 14px); }
.n-win-two { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(5px, 1.2cqw, 10px); }
.n-win-two > div { background: #EDE7DE; overflow: hidden; border-radius: clamp(0px, calc(26px - 5cqw), 14px); }
.n-win-pics img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the fourth tile turns into the hours card as the window narrows — two boxes, one place */
.n-win-flip { position: relative; min-height: 0; overflow: hidden; background: #E2DBD1; }
.n-win-flip-a { position: absolute; top: 0; bottom: 0; left: 0; width: clamp(0px, calc(100cqw - 380px), 100%);
  overflow: hidden; }
.n-win-flip-b { position: absolute; top: 0; bottom: 0; left: 0; width: clamp(0px, calc(380px - 100cqw), 100%);
  overflow: hidden; background: #12100E; color: #F6F1EB; padding: clamp(0px, calc(380px - 100cqw), 14px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.n-win-open { display: flex; align-items: center; gap: 5px; font-size: clamp(7px, 2.6cqw, 10.5px);
  letter-spacing: .12em; text-transform: uppercase; color: #A79C90; white-space: nowrap; }
.n-win-open i { width: 5px; height: 5px; border-radius: 999px; background: #3FBF6A; flex: none; }
.n-win-hrs { font-weight: 500; font-size: clamp(11px, 4.6cqw, 20px); letter-spacing: -.02em; line-height: 1.02; }
.n-win-rt { font-size: clamp(7.5px, 2.8cqw, 11.5px); color: #A79C90; white-space: nowrap; }
.n-win-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 14px; flex: none; padding-top: clamp(6px, 1.4cqw, 12px);
  border-top: 1px solid rgba(18, 16, 14, .1); font-size: clamp(7.5px, 1.4cqw, 11.5px); color: #7A736B; }
.n-win-foot span { white-space: nowrap; }

/* A SLOT WITH NO PHOTOGRAPH IN IT CLOSES. `photos()` stamps this on the host when we have run
   out — a trade we hold too few live pictures for gets none rather than the same one four times,
   and an <img> with no src draws a broken-image glyph, which is worse than the gap. */
.n-body .n-nophoto { display: none !important; }

/* ── YOUR OWN NAME ─────────────────────────────────────────────────────────────────────────── */
.n-act-domain .n-eyebrow { margin: 0 0 clamp(14px, 3vh, 34px); font-size: 12px; letter-spacing: .16em; color: #7C7873; }
.n-dom { width: 100%; max-width: 900px; }
.n-dom-bar { display: flex; align-items: center; gap: clamp(8px, 1.6cqw, 14px);
  padding: clamp(9px, 1.6vh, 15px) clamp(12px, 2cqw, 20px); border-radius: 14px; background: #151413;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px rgba(0, 0, 0, .45); }
.n-dots { display: flex; gap: 6px; flex: none; }
.n-dots i { width: 9px; height: 9px; border-radius: 999px; background: #2E2A26; }
.n-dom-url { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 1px; padding: 7px 14px;
  border-radius: 999px; background: #0C0B0B; border: 1px solid rgba(255, 255, 255, .07);
  font-size: clamp(14px, min(2.4cqw, 3vh), 22px); color: #F1EDE8; white-space: nowrap; overflow: hidden; }
.n-dom-s { color: #57534F; }
.n-dom-url [data-caret] { width: 2px; align-self: stretch; background: #C87F5E; margin-left: 2px; }

/* THE SITE UNDER THE ADDRESS. The bar on its own left a whole screen of black with a typewriter in
   the middle of it — "here you have a sceen that not much is hapening". It is its own container so
   the cqw sizes inside it read the window, not the page. */
.n-dom-page { container-type: inline-size; margin-top: clamp(8px, 1.6vh, 14px);
  border-radius: 14px; overflow: hidden; background: #FBF9F6; color: #12100E;
  display: flex; flex-direction: column; gap: clamp(6px, 1.4cqw, 12px);
  padding: clamp(9px, 1.8cqw, 18px); height: clamp(220px, 42vh, 400px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.n-dom-top { flex: none; display: flex; align-items: center; gap: clamp(8px, 2cqw, 20px);
  padding-bottom: clamp(6px, 1.2cqw, 11px); border-bottom: 1px solid rgba(18, 16, 14, .1); }
.n-dom-top b { font-weight: 800; letter-spacing: -.025em; font-size: clamp(12px, 2.1cqw, 18px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-dom-top em { font-style: normal; flex: none; font-size: clamp(9px, 1.4cqw, 12px); color: #6B645C; }
.n-dom-body { flex: 1; min-height: 0; overflow: hidden; display: flex; gap: clamp(8px, 1.8cqw, 18px); }
.n-dom-col { flex: 0 1 240px; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: clamp(4px, 1cqw, 9px); }
.n-dom-tag { flex: none; font-weight: 500; letter-spacing: -.03em; line-height: 1.04;
  font-size: clamp(15px, min(3.6cqw, 5vh), 30px); }
.n-dom-tx { flex: 0 1 auto; min-height: 0; overflow: hidden; color: #4A453F; line-height: 1.45;
  font-size: clamp(9px, min(1.5cqw, 2.2vh), 13px); }
.n-dom-btns { flex: none; margin-top: auto; display: flex; gap: clamp(5px, 1.1cqw, 9px); }
.n-dom-b1, .n-dom-b2 { flex: 1 1 auto; text-align: center; border-radius: 999px;
  padding: clamp(4px, .9cqw, 9px) clamp(6px, 1.4cqw, 14px); font-size: clamp(8px, 1.3cqw, 12px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-dom-b1 { background: #12100E; color: #FBF9F6; font-weight: 600; }
.n-dom-b2 { border: 1px solid rgba(18, 16, 14, .2); }
.n-dom-pics { flex: 1 1 200px; min-width: 0; min-height: 0; display: grid;
  grid-template-rows: 1.5fr 1fr; gap: clamp(5px, 1.1cqw, 10px); }
.n-dom-hero, .n-dom-two > div { min-height: 0; overflow: hidden; background: #E7E1D9;
  border-radius: clamp(4px, 1.2cqw, 12px); }
.n-dom-two { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(5px, 1.1cqw, 10px); }
.n-dom-pics img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-dom-foot { flex: none; display: flex; align-items: baseline; gap: 4px clamp(8px, 1.6cqw, 16px);
  padding-top: clamp(5px, 1.1cqw, 10px); border-top: 1px solid rgba(18, 16, 14, .1);
  font-size: clamp(8px, 1.3cqw, 11.5px); color: #7A736B; }
.n-dom-foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-dom-badge { margin-left: auto; flex: none; padding: 3px 9px; border-radius: 999px;
  background: rgba(200, 127, 94, .16); color: #8A5638; font-weight: 600; }

.n-dom-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(10px, 2vh, 20px); }
.n-dom-pills span { padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px; color: #A9A49E; }
.n-dom-pills span.on { background: rgba(200, 127, 94, .14); border-color: rgba(200, 127, 94, .4); color: #E7B394; }

/* ── IT STAYS ALIVE ────────────────────────────────────────────────────────────────────────── */
.n-log { flex: 0 1 auto; min-height: 0; overflow: hidden; max-width: 560px; width: 100%;
  display: grid; grid-template-columns: auto 1fr; column-gap: clamp(14px, 2.6cqw, 22px); }
.n-log-t { padding: clamp(10px, 1.9vh, 16px) 0; text-align: right; font-size: 13px; color: #6E6A65;
  font-variant-numeric: tabular-nums; }
.n-log-r { position: relative; padding: clamp(10px, 1.9vh, 16px) 0 clamp(10px, 1.9vh, 16px) clamp(18px, 2.6cqw, 26px);
  border-left: 1px solid rgba(255, 255, 255, .1); font-size: clamp(15px, 2cqw, 19px); color: #F1EDE8; }
.n-log-r i { position: absolute; left: -3.5px; top: calc(clamp(10px, 1.9vh, 16px) + 7px);
  width: 7px; height: 7px; border-radius: 999px; background: #C87F5E; }
.n-log-r.ok i { background: #3FBF6A; }

/* ── THE PRICE ─────────────────────────────────────────────────────────────────────────────── */
.n-act-pay .n-eyebrow { margin: 0 0 clamp(10px, 2.2vh, 26px); font-size: 12.5px; letter-spacing: .14em; color: #6B6660; }
.n-pay-build { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  padding-bottom: clamp(8px, 1.6vh, 16px); border-bottom: 1px solid rgba(10, 10, 10, .14); }
.n-big { position: relative; font-weight: 500; font-size: clamp(26px, min(6cqw, 8.6vh), 74px);
  line-height: .9; letter-spacing: -.035em; }
.n-big i, .n-huge i { position: absolute; left: -4%; top: 50%; height: clamp(3px, .5cqw, 6px);
  background: #C87F5E; width: 0; }
.n-pay-note { font-size: clamp(13.5px, min(1.7cqw, 2.6vh), 18px); color: #6B6660; max-width: 24em; }
.n-pay-rows { flex: 0 1 auto; min-height: 0; overflow: hidden; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  column-gap: clamp(18px, 3.4cqw, 48px); max-width: 920px; margin-top: clamp(6px, 1.4vh, 14px); }
.n-pay-row { display: flex; justify-content: space-between; gap: 16px; padding: clamp(5px, 1.3vh, 13px) 0;
  border-bottom: 1px solid rgba(10, 10, 10, .12); font-size: clamp(13.5px, min(1.7cqw, 2.9vh), 19px);
  opacity: 0; }
.n-pay-row b { font-weight: 400; }
.n-pay-row em { font-style: normal; font-variant-numeric: tabular-nums; color: #6B6660; }
.n-pay-total { margin-top: clamp(10px, 2.4vh, 28px); display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(10px, 2cqw, 22px); }
.n-huge { position: relative; font-weight: 500; font-size: clamp(26px, min(7.6cqw, 11vh), 110px);
  line-height: .9; letter-spacing: -.04em; }
.n-huge i { left: -3%; top: 52%; height: clamp(3px, .6cqw, 7px); }
.n-pay-clay { margin-top: clamp(10px, 2.4vh, 32px); }
.n-max { font-weight: 500; font-size: clamp(28px, min(8.6cqw, 12.5vh), 124px); line-height: .88;
  letter-spacing: -.045em; }
.n-pay-sub { margin-top: 10px; font-size: clamp(14px, min(2cqw, 3.2vh), 22px); color: #3B3835; max-width: 26em; }

/* ── WHAT IS INCLUDED ──────────────────────────────────────────────────────────────────────── */
.n-inc { padding: clamp(56px, 11vh, 130px) clamp(20px, 5cqw, 52px) clamp(40px, 8vh, 90px);
  max-width: 1180px; margin: 0 auto; }
.n-inc-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; }
.n-inc-top .n-h2 { margin: 0; font-size: clamp(27px, min(5.4cqw, 7vh), 58px); line-height: 1;
  letter-spacing: -.042em; max-width: 18em; }
.n-inc-sub { font-size: 14.5px; color: #8A8580; }
.n-inc-h { margin-top: clamp(20px, 3.4vh, 38px); display: flex; align-items: center; gap: 14px; }
.n-inc-h span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #7C7873; white-space: nowrap; }
.n-inc-h i { flex: 1; height: 1px; background: rgba(255, 255, 255, .09); }
.n-inc-l { margin-top: clamp(10px, 1.6vh, 16px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 246px), 1fr)); gap: clamp(8px, 1.2cqw, 12px); }
.n-inc-c { display: flex; flex-direction: column; gap: 7px;
  padding: clamp(15px, 2.4vh, 22px) clamp(16px, 2cqw, 22px); border-radius: 18px;
  background: linear-gradient(180deg, #141312 0%, #0F0E0D 100%); border: 1px solid rgba(255, 255, 255, .065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045); }
.n-inc-n { font-size: 11px; letter-spacing: .12em; color: #5E5A55; font-variant-numeric: tabular-nums; }
.n-inc-t { font-weight: 500; font-size: clamp(17px, 2cqw, 21px); letter-spacing: -.025em; }
.n-inc-d { font-size: 14px; line-height: 1.45; color: #A9A49E; }

/* ── THE CLOSE ─────────────────────────────────────────────────────────────────────────────── */
.n-closing { padding: clamp(64px, 14vh, 170px) clamp(18px, 5cqw, 52px); max-width: 1180px; margin: 0 auto; }
.n-closing .n-note { font-size: clamp(14.5px, 1.8cqw, 18px); margin-top: 15px; }

/* ── FOOTER ────────────────────────────────────────────────────────────────────────────────── */
.n-foot { border-top: 1px solid rgba(255, 255, 255, .1);
  padding: clamp(44px, 8vh, 86px) clamp(18px, 5cqw, 52px) 36px; }
.n-foot-in { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(22px, 3.2cqw, 44px); }
.n-foot-me { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.n-foot-mk { font-weight: 800; font-size: 19px; letter-spacing: -.03em; }
.n-foot-tag { font-size: 13.5px; line-height: 1.5; color: #8A8580; max-width: 22em; }
.n-lang select { margin-top: 4px; height: 40px; padding: 0 12px; border-radius: 10px; background: #100F0E;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  color: #E6E2DD; font-size: 14px; max-width: 210px; width: 100%; }
.n-fcols { flex: 2 1 520px; min-width: 0; display: flex; gap: clamp(18px, 2.6cqw, 40px); overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.n-fcols::-webkit-scrollbar { display: none; }
.n-fcol { flex: 0 0 auto; min-width: 148px; scroll-snap-align: start; display: flex; flex-direction: column;
  gap: 9px; padding: clamp(16px, 2.2cqw, 22px); border-radius: 20px; background: rgba(16, 15, 14, .97);
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.n-fcol-h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #6B6660; margin-bottom: 2px; }
/* A ROW IS A LINK OR A CONTROL — "Log in" and "Support" open sheets, so they are buttons, and a
   row that behaves differently may not LOOK different. One rule, both elements. */
.n-fcol a,
.n-fcol button { color: #B5B0AA; font-size: 14.5px; transition: color 110ms linear;
  background: none; border: 0; padding: 0; text-align: left; font: inherit; cursor: pointer; }
.n-fcol a:hover,
.n-fcol button:hover { color: #FFFFFF; }
.n-foot-end { max-width: 1180px; margin: clamp(32px, 5vh, 60px) auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; font-size: 13px; color: #6B6660; }
.n-foot-end a { color: #8A8580; transition: color 110ms linear; }
.n-foot-end a:hover { color: #FFFFFF; }

/* ── THE COSTS, IN FLIGHT ──────────────────────────────────────────────────────────────────── */
.n-costs { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.n-cost { position: absolute; padding: 9px 14px; border-radius: 999px; background: #171615;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
  font-size: 12.5px; color: #E6E2DD; white-space: nowrap; opacity: 0; }

/* ── THE COUNTER ALONG THE BOTTOM ──────────────────────────────────────────────────────────── */
.n-hudwrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex;
  justify-content: center; pointer-events: none; }
.n-hud { container-type: inline-size; width: 100%; max-width: 100%; display: flex; align-items: flex-end;
  justify-content: space-between; gap: clamp(10px, 2cqw, 20px);
  padding: 12px clamp(12px, 3cqw, 26px) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 8, 8, .72) 0%, #080807 42%);
  border-top: 1px solid rgba(255, 255, 255, .08); opacity: 0; }
.n-hud-box { display: flex; align-items: stretch; min-width: 0; border-radius: 14px; background: #100F0E;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .5); overflow: hidden; }
.n-hud-was, .n-hud-now { display: flex; flex-direction: column; gap: 2px; padding: 8px clamp(11px, 2cqw, 16px);
  min-width: 0; overflow: hidden; }
.n-hud-was { position: relative; flex: 0 1 auto; transform-origin: 50% 50%; }
.n-hud-now { background: #FFFFFF; flex: none; padding: 8px clamp(12px, 2cqw, 18px); }
.n-hud-sep { width: 1px; background: rgba(255, 255, 255, .08); }
.n-hud-k { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #57534F; white-space: nowrap; }
.n-hud-now .n-hud-k { color: #6B6660; }
.n-hud-v { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.n-hud-was .n-hud-v b { font-weight: 500; font-size: clamp(15px, 2.6cqw, 19px); letter-spacing: -.03em; color: #8A8580; }
.n-hud-was .n-hud-v em { font-style: normal; font-size: 11.5px; color: #615D58;
  max-width: clamp(0px, calc(100cqw - 430px), 120px); overflow: hidden; }
.n-hud-now .n-hud-v b { font-weight: 600; font-size: clamp(17px, 3cqw, 22px); letter-spacing: -.035em;
  color: #0A0A0A; line-height: 1; }
.n-hud-now .n-hud-v em { font-style: normal; font-size: 10.5px; color: #6B6660;
  max-width: clamp(0px, calc(100cqw - 420px), 280px); overflow: hidden; white-space: nowrap; }
.n-hud-was [data-strike] { position: absolute; left: clamp(11px, 2cqw, 16px); top: 64%; height: 1.5px;
  background: #C87F5E; width: 0; }
.n-hud-cta { flex: none; display: inline-flex; align-items: center; height: 46px; max-width: 48%;
  padding: 0 18px; border-radius: 999px; background: #C87F5E; color: #0A0A0A; font-size: 14.5px;
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 120ms cubic-bezier(.2, .8, .2, 1), transform 90ms ease; }
.n-hud-cta:hover { background: #D89474; color: #0A0A0A; }
.n-hud-cta:active { background: #B36B4B; transform: translateY(1px); }

/* ── LOG IN ────────────────────────────────────────────────────────────────────────────────── */
.n-veil { position: fixed; inset: 0; z-index: 96; background: rgba(4, 4, 4, .62);
  transition: opacity 260ms linear; }
.n-login { position: fixed; z-index: 97; top: 12px; right: 12px; bottom: 12px; width: min(440px, 92vw);
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1), opacity 240ms linear; }
.n-login-in { height: 100%; display: flex; flex-direction: column; padding: clamp(22px, 4cqw, 34px);
  border-radius: 26px; background: linear-gradient(180deg, #171615 0%, #0C0B0B 100%);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.n-login-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.n-login-h { font-weight: 600; font-size: clamp(24px, 3cqw, 32px); letter-spacing: -.035em; line-height: 1.02; }
.n-login-sub { margin-top: 6px; font-size: 14.5px; color: #8B8680; }
.n-x { flex: none; width: 38px; height: 38px; border: 0; border-radius: 13px; background: rgba(255, 255, 255, .07);
  color: #FFFFFF; font-size: 19px; transition: background 120ms linear; }
.n-x:hover { background: rgba(255, 255, 255, .15); }
.n-field { margin-top: clamp(18px, 3vh, 28px); display: flex; flex-direction: column; gap: 10px; }
.n-field span { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #6E6A65; }
.n-field input { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12);
  background: #0A0A0A; color: #F4F1ED; font-size: 16px; outline: none; }
.n-field input:focus { border-color: #C87F5E; }
.n-btn { margin-top: 14px; height: 54px; border: 0; border-radius: 999px; background: #FFFFFF;
  color: #0A0A0A; font-size: 16.5px; font-weight: 600; transition: background 120ms linear, transform 90ms ease; }
.n-btn:hover { background: #EDE9E4; }
.n-btn:active { background: #D9D4CE; transform: translateY(1px); }
.n-btn[disabled] { opacity: .6; }
.n-quiet { margin-top: 14px; height: 40px; border: 0; border-radius: 999px; background: transparent;
  color: #8B8680; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px;
  transition: color 120ms linear; }
.n-quiet:hover { color: #F4F1ED; }
.n-login-note { margin-top: 12px; font-size: 13.5px; color: #6E6A65; }
.n-login-note.bad { color: #E7B394; }
.n-login-foot { margin-top: auto; padding-top: clamp(18px, 3vh, 26px); display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap; font-size: 14.5px; color: #8B8680; }

/* ── SUPPORT ───────────────────────────────────────────────────────────────────────────────── */
.n-sheet { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(4, 4, 4, .66); }
.n-sheet-in { width: 100%; max-width: 520px; margin: 0 12px 12px; padding: clamp(20px, 4cqw, 28px);
  border-radius: 22px; background: linear-gradient(180deg, #151413 0%, #0D0C0C 100%);
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.n-sheet-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.n-sheet-h { font-weight: 500; font-size: clamp(20px, 2.6cqw, 26px); letter-spacing: -.03em; }
.n-sheet-top .n-x { width: 34px; height: 34px; border-radius: 10px; background: transparent; color: #8A8580; }
.n-sheet-top .n-x:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.n-sheet-body { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.n-sheet-body input, .n-sheet-body textarea { padding: 13px 15px; border-radius: 12px; background: #0C0B0B;
  border: 1px solid rgba(255, 255, 255, .12); color: #FFFFFF; font-size: 15.5px; line-height: 1.45;
  outline: none; resize: none; }
.n-sheet-body input { height: 48px; padding: 0 15px; }
.n-sheet-body input:focus, .n-sheet-body textarea:focus { border-color: #C87F5E; }
.n-sheet-body .n-btn { height: 48px; font-size: 15.5px; margin-top: 0; }
.n-sheet-done { margin-top: 14px; font-size: 15.5px; line-height: 1.5; color: #A9A49E; }

/* ── WAITING FOR THE SITE ───────────────────────────────────────────────────────────────────
   The one state the design did not draw, because in the design nothing was ever generated. It is
   the search box with its own progress in it rather than a new screen: what somebody is waiting
   for is the thing they just pressed, so the waiting happens where they pressed it. */
.n-wait { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(200, 127, 94, .09);
  border: 1px solid rgba(200, 127, 94, .3); }
.n-wait-t { font-size: 15.5px; color: #F1EDE8; }
.n-wait-bar { margin-top: 10px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1);
  overflow: hidden; }
.n-wait-bar i { display: block; height: 100%; width: 6%; background: #C87F5E;
  transition: width 600ms cubic-bezier(.2, .8, .2, 1); }
.n-wait-e { margin-top: 8px; font-size: 13.5px; color: #B5B0AA; }

/* ── THE NARROW BRANCH ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 879.98px) {
  /* THE HINT SHRINKS ON A PHONE AND WHAT SOMEBODY TYPES DOES NOT. Measured at 360, 390 and 1280:
     five of the eight languages were cut off, two of them at 390. The input's own 16px floor is
     not negotiable — under it iOS zooms the page on focus — but a ::placeholder size is not what
     that rule measures. The clamp is self-limiting, so a wide tablet inside this same block gets
     the full 16px and only a genuinely narrow screen steps down. */
  .n-sbox input::placeholder { font-size: clamp(13.5px, 3.7vw, 16px); }

  .n-nav { display: none; }
  .n-burger { display: flex; }
  .n-bar { padding-right: 10px; }
  .n-bar-cta { margin-right: 50px; }
  .n-bar.on .n-bar-cta { margin-right: 0; }
  /* the two-column scenes become one column: the words first, the thing under them */
  .n-split { flex-direction: column; }
  .n-side { flex: 0 0 auto; }
  .n-mock { aspect-ratio: 10 / 16; }
  .n-hud-was .n-hud-v em { display: none; }
  .n-login { top: 0; left: 0; right: 0; bottom: auto; width: auto; max-height: 92vh; }
  .n-login-in { border-radius: 0 0 28px 28px; }
  .n-inc-top { display: block; }
  .n-inc-sub { margin-top: 10px; }
}

/* the page is a story told by scrolling, and somebody who has asked not to be moved gets the end
   of every scene rather than the middle of one — the runtime reads this too, and stops the loop */
@media (prefers-reduced-motion: reduce) {
  .n-body * { animation: none !important; transition: none !important; }
}