/* ==========================================================================
   NSR prototype - base layer
   Tokens (NSR's working identity), reset, inset frame, type scale, buttons, links, rules.
   Colours and the three faces are NSR's existing tokens; the frame, the display scale and the motion are the
   visual foundation carried over from the Overtone study.
   ========================================================================== */
:root {
  /* NSR palette (live global.css tokens, unchanged) */
  --carbon: #090a0b;
  --obsidian: #171a1b;
  --graphite: #414746;
  --muted: #5c6260;
  --nickel: #b8bcba;
  --fog: #dde0dd;
  --salt: #f3f1ec;
  --infrared: #ff3b68;
  --infrared-100: #ffd9e1;
  --infrared-300: #ff8ba4;
  --deep-rose: #a80e3f;

  /* themeable surfaces: the page starts dark and flips to paper for the factual sections */
  --page-bg: var(--salt);          /* the thin outer frame */
  --panel: var(--carbon);          /* the inset rounded panel */
  --fg: var(--salt);               /* headings and primary text */
  --fg-soft: var(--fog);           /* ledes and body */
  --meta: var(--nickel);           /* mono metadata, price lines */
  --accent: var(--infrared);       /* accent for large type and hairlines */
  --accent-text: var(--infrared-300); /* accent for small text */
  --focus: var(--infrared-300);
  --hair: rgba(243, 241, 236, 0.2);
  --hair-strong: rgba(243, 241, 236, 0.46);
  --card: var(--obsidian);
  --menu-ink: var(--carbon);
  /* the menu sheet is the frame colour showing through where the panel drops, so its ink follows the frame */
  --sheet-ink: var(--carbon);
  --sheet-soft: #2b2f2e;
  --sheet-hair: rgba(9, 10, 11, 0.28);
  --sheet-accent: var(--deep-rose);
  --sheet-focus: var(--deep-rose);
  --sheet-btn-bg: var(--carbon);
  --sheet-btn-ink: var(--salt);
  --sheet-btn-hover: var(--deep-rose);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1125 -.0375'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* layout (24 columns of the viewport width, as in the foundation) */
  --col: 4.1666vw;
  --pad-x: calc(var(--col) * 2);
  --frame: 10px;
  /* owner rule (2026-10-14): no sharp corners anywhere, soft edges or pills only. Four sizes cover everything:
     the panel and the wrapper that clips to it, a full-width sheet, a photograph or card, a small label. Buttons and bars are pills (999px). */
  --radius: 32px;
  --r-sheet: 36px;
  --r-card: 26px;
  --r-chip: 14px;
  --r-pill: 999px;

  /* type: round 14, Unbounded (display) + Manrope (text). Both are variable fonts, SIL OFL 1.1, self-hosted. */
  --f-display: "Unbounded", "Unbounded Fallback", "Arial Black", Arial, sans-serif;
  --f-body: "Manrope", "Manrope Fallback", Arial, sans-serif;
  --f-index: "Manrope", "Manrope Fallback", Arial, sans-serif;
  /* Unbounded Bold (700) sets the section headings; Unbounded Black (900) sets the hero, the page titles and the big statements (the poster, the closing line, the FAQ word, the marquee).
     Manrope Regular (400) is body text; Manrope SemiBold (600) is navigation, buttons, labels and supporting text. */
  --disp-wght: 700;
  --hero-wght: 900;
  --w-label: 600;
  --disp-wdth: 100%;
  --disp-opsz: auto; /* unused: Unbounded has only a weight axis */
  --ls-hero: -0.025em;
  --ls-display: -0.02em;
  --ls-h3: -0.012em;
  --ls-h4: -0.004em;
  --ws-display: 0.07em; /* Unbounded's word space is narrow at tight tracking */

  /* motion */
  --e-out: cubic-bezier(0.19, 1, 0.22, 1);
  --e-soft: cubic-bezier(0.23, 1, 0.32, 1);
  --e-io: cubic-bezier(0.86, 0, 0.07, 1);
  --e-ui: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body[data-theme="light"] {
  --sheet-ink: var(--salt);
  --sheet-soft: var(--nickel);
  --sheet-hair: rgba(243, 241, 236, 0.3);
  --sheet-accent: var(--infrared-300);
  --sheet-focus: var(--infrared-300);
  --sheet-btn-bg: var(--infrared);
  --sheet-btn-ink: var(--carbon);
  --sheet-btn-hover: var(--infrared-300);
  --page-bg: var(--carbon);
  --panel: var(--salt);
  --fg: var(--carbon);
  --fg-soft: #2b2f2e;
  --meta: var(--muted);
  --accent: var(--deep-rose);
  --accent-text: var(--deep-rose);
  --focus: var(--deep-rose);
  --hair: rgba(9, 10, 11, 0.2);
  --hair-strong: rgba(9, 10, 11, 0.46);
  --card: var(--fog);
  --menu-ink: var(--carbon);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1125 -.0375'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* a third zone: the decision section sits on Infrared, with Carbon type (the identity's own button pairing, 5.7:1), as one loud moment in the page */
body[data-theme="signal"] {
  --sheet-ink: var(--salt);
  --sheet-soft: var(--nickel);
  --sheet-hair: rgba(243, 241, 236, 0.3);
  --sheet-accent: var(--infrared-300);
  --sheet-focus: var(--infrared-300);
  --sheet-btn-bg: var(--infrared);
  --sheet-btn-ink: var(--carbon);
  --sheet-btn-hover: var(--infrared-300);
  --page-bg: var(--carbon);
  --panel: var(--infrared);
  --fg: var(--carbon);
  --fg-soft: var(--carbon);
  --meta: #2b0b14;
  --accent: var(--carbon);
  --accent-text: var(--carbon);
  --focus: var(--carbon);
  --hair: rgba(9, 10, 11, 0.3);
  --hair-strong: rgba(9, 10, 11, 0.55);
  --card: #e22d58;
  --menu-ink: var(--carbon);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1125 -.0375'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- the page content carries its own colours ----------------------------------------------------------------------
   Everything inside .content takes its colours from here: the dark page by default, a sheet of paper in .zone-paper, an Infrared poster in
   .zone-signal. A zone brings its colours with it as it scrolls in, so no theme flip ever has to restyle the page (the old global flip made every
   element transition its colour at once and dropped frames). body[data-theme] above now drives only the chrome that floats over the page:
   the frame, the logo, the menu button, the header scrim, the floating button and the menu sheet. */
.content {
  color: var(--fg); /* inherited by headings and anything without a colour of its own: the zone's, not the page's */
  --fg: var(--salt);
  --fg-soft: var(--fog);
  --meta: var(--nickel);
  --accent: var(--infrared);
  --accent-text: var(--infrared-300);
  --focus: var(--infrared-300);
  --hair: rgba(243, 241, 236, 0.2);
  --hair-strong: rgba(243, 241, 236, 0.46);
  --card: var(--obsidian);
  --panel: var(--carbon);
  --zone-bg: var(--carbon);
  --ph-bg: var(--obsidian);
  --btn-bg: var(--infrared);
  --btn-ink: var(--carbon);
  --btn-hover: var(--infrared-300);
  --btn-active: var(--deep-rose);
  --btn-active-ink: var(--salt);
  --ghost-line: rgba(243, 241, 236, 0.42);
  --ghost-ink: var(--salt);
  --ghost-hover: var(--salt);
}
.zone-paper {
  color: var(--fg); /* inherited by headings and anything without a colour of its own: the zone's, not the page's */
  --fg: var(--carbon);
  --fg-soft: #2b2f2e;
  --meta: var(--muted);
  --accent: var(--deep-rose);
  --accent-text: var(--deep-rose);
  --focus: var(--deep-rose);
  --hair: rgba(9, 10, 11, 0.2);
  --hair-strong: rgba(9, 10, 11, 0.46);
  --card: var(--fog);
  --panel: var(--salt);
  --zone-bg: var(--salt);
  --ph-bg: var(--fog);
  --btn-bg: var(--carbon);
  --btn-ink: var(--salt);
  --btn-hover: #2b2f2e;
  --btn-active: var(--deep-rose);
  --btn-active-ink: var(--salt);
  --ghost-line: rgba(9, 10, 11, 0.42);
  --ghost-ink: var(--carbon);
  --ghost-hover: var(--carbon);
}
.zone-signal {
  color: var(--fg); /* inherited by headings and anything without a colour of its own: the zone's, not the page's */
  --fg: var(--carbon);
  --fg-soft: var(--carbon);
  --meta: #2b0b14;
  --accent: var(--carbon);
  --accent-text: var(--carbon);
  --focus: var(--carbon);
  --hair: rgba(9, 10, 11, 0.3);
  --hair-strong: rgba(9, 10, 11, 0.55);
  --card: #e22d58;
  --panel: var(--infrared);
  --zone-bg: var(--infrared);
  --ph-bg: #c9254d;
  --btn-bg: var(--carbon);
  --btn-ink: var(--salt);
  --btn-hover: #2b2f2e;
  --btn-active: var(--deep-rose);
  --btn-active-ink: var(--salt);
  --ghost-line: rgba(9, 10, 11, 0.42);
  --ghost-ink: var(--carbon);
  --ghost-hover: var(--carbon);
}
/* every section after the hero is opaque, so the panel behind it can change colour without ever being seen (the hero stays clear for the WebGL layer) */
#doors, #pillars, #approach, #founders, #faq, #closing, #footer, .zone { background-color: var(--zone-bg); }
.zone-paper { position: relative; }

*,
*::before,
*::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-bg); /* propagates to the canvas so the fixed panel can sit above it */
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  position: relative;
  transition: background-color 0.4s var(--e-soft); /* the thin frame around the panel: one flat colour, cheap to change */
}
body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }
img, svg, canvas { display: block; max-width: 100%; }
figure { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
summary { cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--disp-wght); }

::selection { background: var(--infrared); color: var(--carbon); }
.zone-signal ::selection { background: var(--carbon); color: var(--infrared); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:where(a, button, summary, [tabindex]) { border-radius: 8px; } /* an outline follows the element's corners, so a focused link gets a soft ring rather than a square one */

.skip { position: fixed; left: 24px; top: -80px; z-index: 2000; background: var(--salt); color: var(--carbon); padding: 12px 20px; border-radius: var(--r-pill); font-weight: 600; transition: top 0.2s var(--e-ui); }
.skip:focus { top: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- the inset frame ------------------------------------------------ */
#panel {
  position: fixed;
  inset: var(--frame);
  z-index: -1;
  pointer-events: none;
}
#panel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#panel path { fill: var(--panel); } /* changes instantly: every section after the hero is opaque, so the panel is only seen behind the hero and under the menu */

#smooth-wrapper {
  position: fixed;
  inset: var(--frame);
  z-index: 5;
  overflow: hidden;
  border-radius: var(--radius);
}
.content { position: relative; width: 100%; }
html.native #smooth-wrapper { position: relative; inset: auto; overflow: visible; border-radius: 0; z-index: 5; }
html.native #panel { position: fixed; }

/* ---------- display type ----------------------------------------------------
   Round 14: Unbounded, sentence case. Bold (700) for headings, Black (900) for the hero and the big statements. It is a wide, geometric face (about 1.6x the width of the serif it replaces,
   so every display size below was brought down to hold the same lines), set with tight tracking (-0.025em hero, -0.02em display, -0.012em h3, -0.004em h4; word space +0.07em) and leading of 1.0 to 1.14. */
.disp {
  font-family: var(--f-display);
  font-weight: var(--disp-wght);
  font-stretch: var(--disp-wdth);

  letter-spacing: var(--ls-display);
  word-spacing: var(--ws-display);
  line-height: 0.96;
  text-wrap: balance;
}
.f-h1 { font-size: var(--hero-fs); font-weight: var(--hero-wght); line-height: 1; letter-spacing: var(--ls-hero); }
.f-h2 { font-size: clamp(28px, 3.7vw, 64px); line-height: 1.08; }
.f-h3 { font-size: clamp(20px, 2vw, 34px); line-height: 1.14; letter-spacing: var(--ls-h3); }
.f-h4 { font-size: clamp(16px, 1.35vw, 22px); line-height: 1.22; letter-spacing: var(--ls-h4); }
.f-lede { font-size: clamp(18px, 1.4vw, 24px); line-height: 1.5; color: var(--fg-soft); }
.f-body { font-size: 17px; line-height: 1.6; color: var(--fg-soft); }
/* mono is for short labels only (the identity: "an accent role, not a second body font"; the live site sets it at 10 to 12px, uppercase, tracked) */
.f-meta { font-family: var(--f-index); font-weight: var(--w-label); font-size: 12px; line-height: 1.5; color: var(--meta); letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }
.idx { font-family: var(--f-index); font-weight: var(--w-label); font-size: 12px; line-height: 1; color: var(--meta); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.inner-pad { padding-left: var(--pad-x); padding-right: var(--pad-x); }
/* the big statements are Unbounded Black like the hero (the poster, the closing line, the FAQ word, the page titles, the marquee) */
.decide h2, .closing-h, .faq h2, .doc-title, .marquee-track { font-weight: var(--hero-wght); }

/* ---------- buttons: square, sentence case, as the identity and the copy deck specify ------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s var(--e-ui), color 0.18s var(--e-ui), border-color 0.18s var(--e-ui), transform 0.16s var(--e-out);
}
/* the button answers the press itself, not the release: it gives under the finger at once and comes back on a quick ease-out */
.btn:active { transform: scale(0.97); transition-duration: 0.18s, 0.18s, 0.18s, 0.08s; }
/* the buttons on the page take their pair from the zone they sit in (--btn-*); the floating button and the menu set their own in chrome.css */
.btn-primary { background: var(--btn-bg, var(--infrared)); color: var(--btn-ink, var(--carbon)); }
.btn-primary:hover { background: var(--btn-hover, var(--infrared-300)); }
.btn-primary:active { background: var(--btn-active, var(--deep-rose)); color: var(--btn-active-ink, var(--salt)); }
.btn-ghost { border-color: var(--ghost-line, rgba(243, 241, 236, 0.42)); color: var(--ghost-ink, var(--salt)); }
.btn-ghost:hover { border-color: var(--ghost-hover, var(--salt)); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- links ----------------------------------------------------------- */
/* underline that wipes in from the left and out to the right (transform only) */
.text-link { position: relative; display: inline-block; font-weight: 600; padding-bottom: 3px; }
.text-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: 100% 50%;
  transition: transform 0.32s var(--e-out);
}
.text-link:focus-visible::before { transform: scaleX(0); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) { .text-link:hover::before { transform: scaleX(0); transform-origin: 0 50%; } } /* a tap on a touch screen must not leave the underline wiped away */

/* ---------- rules ------------------------------------------------------------ */
.rule { width: 100%; height: 1px; background: var(--hair-strong); transform-origin: 0 50%; }
.rule-soft { background: var(--hair); }

/* ---------- prototype annotation (never part of the page copy) ----------------- */
.proto-flag {
  position: fixed;
  left: 20px;
  bottom: 18px;
  z-index: 60;
  margin: 0;
  padding: 5px 8px;
  background: var(--carbon);
  border: 1px solid var(--graphite);
  border-radius: var(--r-pill);
  color: var(--nickel);
  font-family: var(--f-index);
  font-weight: var(--w-label);
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
}


/* ---------- no JavaScript: the page is a plain dark document that scrolls and reads ---------------------------- */
html.no-js body { background: var(--carbon); }
html.no-js #loader, html.no-js #panel, html.no-js #veil, html.no-js #topscrim, html.no-js #gl, html.no-js #cta { display: none; }
html.no-js #smooth-wrapper { position: relative; inset: auto; overflow: visible; border-radius: 0; }
html.no-js .content { margin-left: 0; width: 100%; }
html.no-js #menu-btn { display: none; }
html.no-js #logo { position: absolute; }

/* ---------- small-screen tuning ------------------------------------------------ */
@media (max-width: 768px) {
  /* full-bleed: the panel fills the screen, no frame, no rounded corners */
  :root { --pad-x: calc(var(--col) * 1.5); --frame: 0px; --radius: 0px; --r-sheet: 28px; --r-card: 22px; --col: 4.1666vw; }
  .f-h2 { font-size: clamp(34px, 10vw, 52px); line-height: 1; }
  .f-h3 { font-size: clamp(28px, 7.6vw, 40px); }
  .f-h4 { font-size: clamp(24px, 6.4vw, 32px); }
  .f-lede { font-size: 17px; }
  .btn { min-height: 48px; padding: 0 20px; }
  .proto-flag { left: 10px; bottom: 10px; }
}
@media (max-width: 1100px), (max-height: 820px) { .proto-flag { display: none; } }
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .text-link::before { transition: none; }
}