/* ==========================================================================
   Loaded LAST on every page, so it re-skins the older page styles without
   rewriting them. Tokens and components come from the NOCATCH design system.
   ========================================================================== */
@font-face { font-family: "Bebas Neue"; src: url("/brand/bebas-neue-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/brand/courier-prime-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/brand/courier-prime-700.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }

/* NOCATCH — generated from tokens.json */
:root, [data-theme="dark"] {
  --black: #141514;
  --blush: #fffbfc;
  --paper: #fffbfc;
  --mint: #e6ffee;
  --white: #ffffff;
  --aqua-50: #e5fdf7;
  --aqua-100: #cdfaf0;
  --aqua-200: #9df1e0;
  --aqua-300: #7de2d2;
  --aqua-400: #5fceba;
  --aqua-500: #42b4a1;
  --aqua-600: #329787;
  --aqua-700: #425982;
  --aqua-800: #01574c;
  --aqua-900: #003f37;
  --aqua-950: #002620;
  --aqua: var(--aqua-300);
  --ground: #141514;
  --ground-alt: #141514;
  --ink: #fffbfc;
  --ink-muted: #fffbfccc;
  --ink-subtle: #fffbfca6;
  --ink-faint: #fffbfc59;
  --line: #fffbfc40;
  --line-strong: #fffbfc;
  --fill-ghost: #fffbfc0f;
  --accent: var(--aqua-300);
  --accent-fill: var(--aqua-300);
  --on-accent: var(--black);
  --action: var(--aqua-700);
  --action-hover: var(--aqua-800);
  --on-action: var(--white);
  --on-ink-accent: var(--aqua-700);
  --focus-ring: var(--aqua-300);
}
[data-theme="light"] {
  --aqua: var(--aqua-300);
  --ground: #ffffff;
  --ground-alt: #fffbfc;
  --ink: #141514;
  --ink-muted: #141514bf;
  --ink-subtle: #141514a6;
  --ink-faint: #14151466;
  --line: #1415141f;
  --line-strong: #141514;
  --fill-ghost: #1415140a;
  --accent: var(--aqua-700);
  --accent-fill: var(--aqua-300);
  --on-accent: var(--black);
  --action: var(--aqua-700);
  --action-hover: var(--aqua-800);
  --on-action: var(--white);
  --on-ink-accent: var(--aqua-300);
  --focus-ring: var(--aqua-700);
}
[data-theme="mint"] {
  --aqua: var(--aqua-300);
  --ground: #e6ffee;
  --ground-alt: #e6ffee;
  --ink: #141514;
  --ink-muted: #141514bf;
  --ink-subtle: #141514a6;
  --ink-faint: #14151466;
  --line: #1415141f;
  --line-strong: #141514;
  --fill-ghost: #1415140a;
  --accent: var(--aqua-700);
  --accent-fill: var(--aqua-300);
  --on-accent: var(--black);
  --action: var(--aqua-700);
  --action-hover: var(--aqua-800);
  --on-action: var(--white);
  --on-ink-accent: var(--aqua-300);
  --focus-ring: var(--aqua-700);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 9999px;
  --opacity-partner: 0.6;
  --opacity-grain: 0.42;
  --opacity-grain-field: 0.3;
  --font-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --font-text: "Courier Prime", "Courier New", ui-monospace, monospace;
  --night: #141514; --snow: #fffbfc; --tiffany: #7de2d2; --persian-green: #329787; --denim: #425982; --mint: #e6ffee;
}
.nc-t-display-hero { font-family: var(--font-display); font-size: 96px; line-height: 0.9; font-weight: 400; letter-spacing: 0.075em; }
.nc-t-display-xl { font-family: var(--font-display); font-size: 80px; line-height: 0.9; font-weight: 400; letter-spacing: 0.075em; }
.nc-t-display-lg { font-family: var(--font-display); font-size: 56px; line-height: 0.92; font-weight: 400; letter-spacing: 0.075em; }
.nc-t-display-md { font-family: var(--font-display); font-size: 40px; line-height: 0.9; font-weight: 400; letter-spacing: 0.075em; }
.nc-t-display-sm { font-family: var(--font-display); font-size: 30px; line-height: 0.95; font-weight: 400; letter-spacing: 0.075em; }
.nc-t-stat { font-family: var(--font-display); font-size: 134px; line-height: 1; font-weight: 400; letter-spacing: 0.075em; }
.nc-t-button { font-family: var(--font-display); font-size: 18px; line-height: 1; font-weight: 400; letter-spacing: 0.075em; }
.nc-t-label { font-family: var(--font-display); font-size: 16px; line-height: 1; font-weight: 400; letter-spacing: 0.075em; }
.nc-t-chapter-lg { font-family: var(--font-text); font-size: 72px; line-height: 1; font-weight: 400; letter-spacing: -0.02em; }
.nc-t-chapter { font-family: var(--font-text); font-size: 28px; line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; }
.nc-t-lead { font-family: var(--font-text); font-size: 20px; line-height: 30px; font-weight: 400; }
.nc-t-body { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 400; }
.nc-t-body-sm { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 400; }
.nc-t-caption { font-family: var(--font-text); font-size: 12px; line-height: 18px; font-weight: 400; }
.nc-t-tag { font-family: var(--font-text); font-size: 11px; line-height: 16px; font-weight: 400; letter-spacing: 0.08em; }


/* NOCATCH components. Values come from tokens.css; nothing is hard-coded here
   except structural sizes taken from the reference layout. */

*, *::before, *::after { box-sizing: border-box; }
.nc-section { background: var(--ground); color: var(--ink); }
.nc-pad { padding: var(--space-6); }

/* ── Display type ─────────────────────────────── */
.nc-display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.075em; text-transform: uppercase; line-height: 0.9; margin: 0; }
.nc-chapter { font-family: var(--font-text); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; margin: 0; }

/* ── Grain texture ────────────────────────────── */
.nc-grain { position: relative; isolation: isolate; }
.nc-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: var(--opacity-grain);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.75' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 -0.42'/%3E%3C/filter%3E%3Cpath d='M0 0h200v200H0z' filter='url(%23a)'/%3E%3C/svg%3E");
  background-size: 200px 200px; }
.nc-grain--field::after { opacity: var(--opacity-grain-field); }
[data-theme="dark"] .nc-grain::after, .nc-grain[data-theme="dark"]::after { filter: invert(1); }

/* ── Buttons and CTAs ─────────────────────────── */
.nc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 35px; padding: 0 var(--space-4);
  background: var(--action); color: var(--on-action); border: 0; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
  font-family: var(--font-display); font-size: 18px; line-height: 1; letter-spacing: 0.075em; text-transform: uppercase; transition: background-color .15s ease; }
.nc-btn:hover { background: var(--action-hover); }
.nc-btn:focus-visible, .nc-link:focus-visible, .nc-signup input:focus-visible, .nc-signup button:focus-visible, .nc-play:focus-visible, .nc-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nc-btn--lg { height: 52px; width: 100%; max-width: 384px; border-radius: var(--radius-md); font-size: 20px; }
.nc-btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.nc-btn--outline:hover { background: var(--fill-ghost); }

.nc-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease; }
.nc-link:hover { color: var(--accent); }
.nc-cta-text { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.075em; text-transform: uppercase; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nc-cta-text:hover { color: var(--accent); }

.nc-play { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--accent-fill); color: var(--on-accent); border: 0; display: inline-grid; place-items: center; cursor: pointer; }

/* ── Signup bar ───────────────────────────────── */
.nc-signup { display: flex; align-items: stretch; max-width: 560px; }
.nc-signup input { flex: 1; min-width: 0; height: 68px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--radius-none);
  background: transparent; color: var(--ink); font-family: var(--font-text); font-size: 16px; }
.nc-signup input::placeholder { color: var(--ink-muted); }
.nc-signup button { flex: 0 0 auto; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 0 var(--space-6);
  background: var(--accent-fill); color: var(--on-accent); border: 0; border-radius: var(--radius-none); cursor: pointer;
  font-family: var(--font-display); font-size: 18px; letter-spacing: 0.075em; text-transform: uppercase; }
.nc-signup button:hover { background: var(--aqua-200); }

/* ── Announcement bar ─────────────────────────── */
.nc-announce { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 var(--space-4); background: var(--action); color: var(--on-action);
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.075em; text-transform: uppercase; text-decoration: none; }
.nc-announce:hover { background: var(--action-hover); }

/* ── Navigation label ─────────────────────────── */
.nc-navlabel { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.075em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3); }
.nc-navlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.nc-navlist a { font-family: var(--font-display); font-size: 40px; line-height: 0.95; letter-spacing: 0.075em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.nc-navlist a:hover { color: var(--accent); }

/* ── Emphasis ─────────────────────────────────── */
.nc-unit { color: var(--ink-faint); }
.nc-quote { font-family: var(--font-text); font-size: 20px; line-height: 30px; margin: 0; color: var(--ink); max-width: 34ch; }
.nc-muted { color: var(--ink-muted); }

/* ── Stats ────────────────────────────────────── */
.nc-stat-number { font-family: var(--font-display); font-size: 134px; line-height: 1; letter-spacing: 0.075em; color: var(--ink-muted); margin: 0; }
.nc-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nc-tab { height: 34px; padding: 0 10px; border: 1px solid var(--line); background: var(--fill-ghost); color: var(--ink-muted); border-radius: var(--radius-none); cursor: pointer;
  font-family: var(--font-text); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.nc-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink-accent); }

/* ── Location pills ───────────────────────────── */
.nc-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nc-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border-radius: var(--radius-pill); background: var(--ink); color: var(--ground); font-size: 16px; line-height: 24px; text-decoration: none; }
.nc-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); border: 1.5px solid var(--action); flex: 0 0 auto; }
.nc-dot--on { background: var(--action); }

/* ── Partner band ─────────────────────────────── */
.nc-partners { background: var(--white); padding: var(--space-12) 0; overflow: hidden; }
.nc-marquee { display: flex; width: max-content; align-items: center; list-style: none; margin: 0; padding: 0; animation: nc-marquee 60s linear infinite; }
.nc-marquee li { flex: 0 0 auto; padding: 0 var(--space-10); display: flex; align-items: center; }
.nc-marquee img, .nc-marquee .nc-partner-ph { height: 46px; width: auto; opacity: var(--opacity-partner); }
@keyframes nc-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nc-marquee { animation: none; } }
.nc-partner-ph { display: inline-flex; align-items: center; padding: 0 var(--space-3); border: 1px dashed var(--black); color: var(--black); font-family: var(--font-text); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* ── Cards ────────────────────────────────────── */
.nc-photo { background: var(--aqua-900); color: var(--blush); display: flex; align-items: flex-end; padding: var(--space-4); font-family: var(--font-text); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-none); }
.nc-card { display: grid; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.nc-card .nc-photo { aspect-ratio: 4 / 5; position: relative; align-items: flex-start; }
.nc-card-title { position: absolute; left: var(--space-4); bottom: var(--space-4); font-family: var(--font-text); font-size: 48px; line-height: 1; letter-spacing: -0.035em; color: var(--blush); text-transform: none; }
.nc-card p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

.nc-case { display: grid; gap: var(--space-3); max-width: 420px; }
.nc-case .nc-photo { aspect-ratio: 3 / 2; }
.nc-tag { font-family: var(--font-text); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.nc-case h3 { font-family: var(--font-text); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.nc-case p { margin: 0; color: var(--ink-muted); }

.nc-tier { display: grid; gap: var(--space-2); border-top: 1px solid var(--line-strong); padding-top: var(--space-3); }
.nc-tier .nc-tier-price { font-family: var(--font-display); font-size: 30px; line-height: 0.95; letter-spacing: 0.075em; margin: 0; }
.nc-tier p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ── Footer ───────────────────────────────────── */
.nc-footer { background: var(--ground-alt); color: var(--ink); padding: var(--space-12) var(--space-7); display: grid; gap: var(--space-10); }
.nc-footer-small { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 14px; line-height: 20px; }
.nc-footer-small a { color: var(--ink-muted); text-decoration: none; }
.nc-footer-small a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.nc-legal { font-size: 12px; line-height: 18px; color: var(--ink-subtle); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* ── Logo tiles ───────────────────────────────── */
.nc-logo-tile { display: grid; place-items: center; gap: var(--space-3); padding: var(--space-6); background: var(--ground); color: var(--ink); }
.nc-logo-tile img { width: 72px; height: auto; display: block; }

/* ---- NOCATCH brand layer: maps the older page styles onto the design system ---- */

/* 1. Old variable names -> new palette (light section by default) */
:root {
  color-scheme: light;
  --mist: #ffffff; --shallows: #e6ffee; --sky: var(--aqua-300); --ocean: var(--aqua-700); --ocean-hover: var(--aqua-800);
  --ocean-text: var(--aqua-700); --ocean-num: var(--black); --deep: #141514; --drift: #141514bf; --sand: #fffbfc;
  --signal: var(--aqua-300); --white: #ffffff; --line: #1415141f; --ph: var(--aqua-900);
  --brand: var(--font-display); --logo: var(--font-display); --display: var(--font-display); --body: var(--font-text);
  --r: 0px; --radius: 0px;
}
[data-theme="light"] { background-color: transparent; color: var(--ink); }
/* Mint section: the soft green ground (black text 19.9:1, deep-aqua text 5.4:1). White cards sit on it. */
[data-theme="mint"] { --mist: #e6ffee; --shallows: #ffffff; --sand: #e6ffee; background-color: var(--mint) !important; color: var(--ink); }
body[data-theme="light"] { background-color: var(--white); }
[data-theme="dark"] {
  --mist: #141514; --shallows: #141514; --white: #141514; --deep: var(--blush); --drift: #fffbfccc; --line: #fffbfc40;
  --ocean-text: var(--aqua-300); --ocean-num: var(--blush); --sand: #141514; --ph: var(--aqua-900);
  background-color: var(--ground); color: var(--ink);
}
.nc-paper { --white: #fffbfc; background-color: var(--paper); }

/* 2. Base type */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--white); color: var(--black); font-family: var(--font-text); font-weight: 400; }
body::before { background: var(--black) !important; }
h1, h2, .h2, .nc-display {
  font-family: var(--font-display) !important; font-weight: 400 !important; text-transform: uppercase;
  letter-spacing: 0.075em !important; line-height: 1 !important; text-shadow: none !important;
}
h3, h4, summary { font-family: var(--font-text) !important; font-weight: 400 !important; letter-spacing: -0.01em; text-transform: none; }
h3 { line-height: 1.2; }
b, strong { font-weight: 500; }
::selection { background: var(--aqua-50); color: var(--black); }
[data-theme="dark"] ::selection { background: var(--aqua-300); color: var(--black); }
:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 2px !important; border-radius: 0 !important; }
em, i:not([class]) { font-style: normal; }

/* Highlighting: never colour single words (system rule) */
mark { background: none !important; color: inherit !important; padding: 0 !important; }

/* Inline links keep the text colour, 1px underline, accent on hover */
p a:not([class]), li a:not([class]), dd a:not([class]), td a:not([class]), .intro a, .note a, label a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
p a:not([class]):hover, li a:not([class]):hover, .intro a:hover, label a:hover { color: var(--accent); }

/* 3. Buttons: one deep-aqua action button, outline for the rest */
.btn, .pill, .nc-btn {
  font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 18px !important; line-height: 1 !important;
  letter-spacing: 0.075em !important; text-transform: uppercase; border-radius: var(--radius-sm) !important;
  min-height: 44px; padding: 0 var(--space-4) !important; box-shadow: none !important;
}
.btn-main, .pill:not(.pill--soft), .nc-btn { background: var(--action) !important; color: var(--on-action) !important; border: 0 !important; }
.btn-main:hover, .pill:not(.pill--soft):hover, .nc-btn:hover { background: var(--action-hover) !important; }
.btn-soft, .btn-ghost, .ghost, .pill--soft, .nc-btn--outline {
  font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 18px !important; letter-spacing: 0.075em !important;
  text-transform: uppercase; background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important; box-shadow: none !important; min-height: 44px;
}
.btn-soft:hover, .btn-ghost:hover, .ghost:hover, .pill--soft:hover { background: var(--fill-ghost) !important; }
.btn:active, .pill:active { transform: none !important; }
.pill[disabled] { background: var(--fill-ghost) !important; color: var(--ink-subtle) !important; }

/* 4. Shape: square corners, no shadows, no glows */
.ph, .card, .tier, .shots, .ph.mini, .it, figure, video, img:not(.nc-logo img), input, select, textarea, details, table, .box, .panel, .sheet, .modal { border-radius: 0 !important; }
input, select, textarea { border-color: var(--line-strong) !important; background: transparent; color: inherit; font-family: var(--font-text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--aqua-700); }

/* Photo scrims: flat black, never gradients */
.hero::after, .vband::after, .closing::after, .gameband::after, .teamband::after { background: rgba(0, 0, 0, 0.42) !important; }

/* 5. Grain on plain sections (background layer, so photos are untouched) */
.nc-grain-bg { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.75' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .26 0 0 0 -.12'/%3E%3C/filter%3E%3Cpath d='M0 0h200v200H0z' filter='url(%23a)'/%3E%3C/svg%3E") !important; background-size: 200px 200px !important; }
[data-theme="dark"].nc-grain-bg { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.75' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .22 0 0 0 -.1'/%3E%3C/filter%3E%3Cpath d='M0 0h200v200H0z' filter='url(%23a)'/%3E%3C/svg%3E") !important; }
.netbg { background: var(--ground) !important; }

/* Small uppercase tags (system `tag` style) */
.tag, .badge, .chip, .eyebrow, .pcap, .seg-flag, .kicker {
  font-family: var(--font-text) !important; font-size: 11px !important; line-height: 16px !important; letter-spacing: 0.08em !important;
  text-transform: uppercase; font-weight: 400 !important; border-radius: 0 !important; box-shadow: none !important;
}
.eyebrow { color: var(--accent) !important; }

/* ==========================================================================
   Header, announcement bar, menu
   ========================================================================== */
.nc-announce { position: relative; z-index: 51; }
.nc-announce:focus-visible { outline-offset: -3px !important; }
.nc-top {
  position: sticky; top: 0; z-index: 50; background: var(--ground); color: var(--ink);
  transition: background-color .35s ease, color .35s ease;
}
.nc-top-in { display: flex; align-items: center; gap: var(--space-6); height: 72px; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-7); }
.nc-logo { position: relative; display: block; width: 150px; height: 44px; flex: 0 0 auto; }
.nc-logo img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .35s ease; display: block; }
.nc-logo .lk { height: 32px; width: auto; }
.nc-logo .mk { height: 40px; width: auto; }
/* which ink shows: lockup at the top, mark after scrolling or on mobile; blush/aqua on black, black on light */
.nc-top[data-theme="dark"] .lk-blush, .nc-top[data-theme="light"] .lk-black, .nc-top[data-theme="mint"] .lk-black { opacity: 1; }
.nc-top.scrolled .lk { opacity: 0 !important; }
.nc-top.scrolled[data-theme="dark"] .mk-aqua, .nc-top.scrolled[data-theme="light"] .mk-black, .nc-top.scrolled[data-theme="mint"] .mk-black { opacity: 1; }
.nc-top nav { display: flex; gap: var(--space-6); margin-left: auto; }
.nc-top nav a { font-family: var(--font-display); font-size: 18px; letter-spacing: .075em; text-transform: uppercase; color: var(--ink); text-decoration: none; line-height: 1; padding: 6px 0; }
.nc-top nav a:hover, .nc-top nav a[aria-current="page"] { color: var(--accent); }
.nc-top .nc-btn { height: 40px; min-height: 40px; flex: 0 0 auto; }
.nc-top .menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; place-items: center; }
.nc-top .menu svg { width: 22px; height: 22px; }
.nc-top .menu .nc-ic-x { display: none; }
@media (prefers-reduced-motion: reduce) { .nc-logo img, .nc-top { transition: none; } }
@media (max-width: 1100px) {
  .nc-top-in { padding: 0 var(--space-5); gap: var(--space-3); height: 64px; }
  .nc-logo { width: 46px; }
  .nc-logo .lk { opacity: 0 !important; }
  .nc-top[data-theme="dark"] .mk-aqua, .nc-top[data-theme="light"] .mk-black, .nc-top[data-theme="mint"] .mk-black { opacity: 1; }
  .nc-top .menu { display: grid; }
  .nc-top nav {
    display: none; position: fixed; left: 0; right: 0; top: var(--nc-top-bottom, 100px); bottom: 0; flex-direction: column; gap: var(--space-2);
    margin: 0; padding: var(--space-6) var(--space-5) var(--space-10); background: var(--black); overflow-y: auto; z-index: 49;
  }
  .nc-top nav::before { content: "Menu"; font-family: var(--font-display); font-size: 16px; letter-spacing: .075em; text-transform: uppercase; color: var(--aqua-300); margin-bottom: var(--space-2); }
  .nc-top nav a { font-size: 44px; line-height: .95; color: var(--blush); padding: 4px 0; }
  .nc-top nav a[aria-current="page"], .nc-top nav a:hover { color: var(--aqua-300); }
  .nc-top.open nav { display: flex; }
  .nc-top.open .menu .nc-ic-bars { display: none; }
  .nc-top.open .menu .nc-ic-x { display: block; }
  html.nc-menu-open { overflow: hidden; }
}
@media (max-width: 400px) { .nc-top .nc-btn { padding: 0 10px !important; font-size: 16px !important; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.nc-footer { background: var(--paper) !important; padding: var(--space-20) clamp(16px, 4vw, 48px) var(--space-10); margin: 0 !important; border: 0 !important; color: var(--ink); display: block; }
.nc-foot-in { max-width: 1104px; margin: 0 auto; display: grid; gap: var(--space-12); }
.nc-foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-10); align-items: start; }
.nc-foot-top .nc-navlist a { font-size: 34px; }
.nc-foot-join { display: grid; gap: var(--space-3); }
.nc-foot-join h2 { font-size: 30px !important; margin: 0; }
.nc-foot-join p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.nc-foot-join .nc-signup { max-width: none; }
.nc-foot-join .nc-signup input { min-width: 0; height: 60px; }
.nc-foot-join .nc-signup button { height: 60px; gap: var(--space-6); }
.nc-foot-join .consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.nc-foot-join .consent input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; }
.nc-foot-join .msg { font-size: 14px; line-height: 20px; margin: 0; }
.nc-footer .social { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.nc-footer .social a { display: inline-grid; place-items: center; height: 44px; min-width: 44px; padding: 0 10px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; border-radius: 0; }
.nc-footer .social a:hover { border-color: var(--ink); }
.nc-footer .social svg { width: 22px; height: 22px; display: block; }
.nc-footer .social a.ks img { width: 96px; height: auto; display: block; filter: grayscale(1) brightness(0); }
.nc-footer .social a[hidden] { display: none; }
.nc-footer .nc-footer-small { align-items: center; }
.nc-footer .nc-legal { border-top: 1px solid var(--line); padding-top: var(--space-6); align-items: center; }
.nc-footer .nc-legal img { height: 28px; width: auto; display: block; }
@media (max-width: 900px) {
  .nc-foot-top { grid-template-columns: 1fr 1fr; }
  .nc-foot-join { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 520px) {
  .nc-foot-join .nc-signup { flex-direction: column; }
  .nc-foot-join .nc-signup input { border-right: 1px solid var(--line-strong); border-bottom: 0; }
  .nc-foot-join .nc-signup button { justify-content: space-between; }
}

/* Footer in the secondary face (calmer on phones) */
.nc-footer .nc-navlabel { font-family: var(--font-text); font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; }
.nc-foot-top .nc-navlist { gap: 6px; }
.nc-foot-top .nc-navlist a { font-family: var(--font-text) !important; font-size: 17px !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; }
.nc-foot-join h2 { font-family: var(--font-text) !important; font-size: 22px !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; text-transform: none !important; }
.nc-foot-join .nc-signup button { font-family: var(--font-text); font-size: 16px; letter-spacing: 0; text-transform: none; }
.nc-footer .social a.ks .ks-k { display: none; width: 22px; height: 22px; }
@media (max-width: 600px) {
  .nc-footer .social a.ks { width: 44px; padding: 0; }
  .nc-footer .social a.ks .ks-word { display: none; }
  .nc-footer .social a.ks .ks-k { display: block; }
}

/* Consent bar (Clarity) */
.nc-consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999; max-width: 560px; margin: 0 auto; background: var(--black); color: var(--blush);
  padding: 14px 16px; font: 14px/20px var(--font-text); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border: 1px solid #fffbfc40; }
.nc-consent span { flex: 1; min-width: 200px; }
.nc-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.nc-consent button { height: 40px; padding: 0 14px; font: 400 17px/1 var(--font-display); letter-spacing: .075em; text-transform: uppercase; cursor: pointer; border-radius: 4px; }
.nc-consent .no { background: transparent; color: var(--blush); border: 1px solid var(--blush); }
.nc-consent .ok { background: var(--aqua-700); color: #fff; border: 0; }
.nc-consent .ok:hover { background: var(--aqua-800); }

.nc-navlist a { text-decoration: none !important; }
.nc-footer-small a { text-decoration: none; }

/* Numbers and prices: Bebas (stat / display-sm) */
.stat b, .trial b, .price, .cd b, .cd .n, [id^="cd"] { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: 0.075em !important; }
.stats .stat b { font-size: clamp(56px, 6vw, 88px) !important; color: var(--ink) !important; line-height: .95 !important; }
.stats .stat span { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.stat a.src { text-decoration-color: currentColor !important; }
.trial { background: transparent !important; border: 1px solid var(--line-strong); color: var(--ink) !important; }
.trial b { font-size: clamp(72px, 8vw, 112px) !important; color: var(--ink) !important; }
.trial h3 { font-size: 22px !important; }
.trial p { color: var(--ink-muted) !important; }
.price { font-size: 30px !important; line-height: .95 !important; color: var(--ink) !important; }

/* Forms on black: outlined, never white boxes */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background: transparent !important; color: var(--blush) !important; border: 1px solid var(--blush) !important; }
[data-theme="dark"] input::placeholder { color: #fffbfca6; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 48px; }

/* Notify-me sheet and the cookie bar with email */
.nc-consent { position: fixed; }
.nc-consent .ncc-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px !important; padding: 0 !important; background: transparent; color: #fffbfc; border: 0; font-size: 22px !important; line-height: 1; cursor: pointer; }
.nc-consent .ncc-mail { padding-right: 28px; }
.nc-consent { display: grid !important; gap: 12px; max-width: 600px !important; padding: 16px !important; }
.nc-consent .ncc-mail { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #fffbfc33; }
.nc-consent .ncc-mail b { font: 400 22px/1 var(--font-display); letter-spacing: .075em; text-transform: uppercase; color: #7de2d2; }
.nc-consent .ncc-sub, .nc-consent .ncc-c, .nc-consent .ncc-m { font-size: 12px; }
.nc-consent .ncc-row { display: flex; gap: 8px; }
.nc-consent .ncc-row input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #fffbfc !important; background: transparent; color: #fffbfc; font: inherit; border-radius: 0; }
.nc-consent .ncc-c { display: flex; gap: 6px; align-items: center; }
.nc-consent .ncc-c input { -webkit-appearance: checkbox; appearance: auto; width: 14px; height: 14px; }
.nc-consent .ncc-cookie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; }
.nc-consent .ncc-cookie span { flex: 1; min-width: 200px; }
.nc-notify { position: fixed; inset: 0; z-index: 10000; background: rgba(20,21,20,.7); display: none; align-items: center; justify-content: center; padding: 16px; }
.nc-notify.on { display: flex; }
.nc-notify-box { position: relative; background: #fffbfc; color: #141514; max-width: 440px; width: 100%; padding: 28px 22px 20px; display: grid; gap: 12px; }
.nc-notify-box h2 { margin: 0; font: 400 32px/1 var(--font-display); letter-spacing: .075em; text-transform: uppercase; padding-right: 36px; }
.nc-notify-box p { margin: 0; font-size: 14px; }
.nc-notify-box .row { display: flex; gap: 8px; }
.nc-notify-box input[type=email] { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid #141514; font: inherit; border-radius: 0; background: #fff; }
.nc-notify-box button[type=submit] { height: 44px; padding: 0 16px; border: 0; background: #425982; color: #fff; font: 400 18px/1 var(--font-display); letter-spacing: .075em; text-transform: uppercase; cursor: pointer; border-radius: 4px; }
.nc-notify-box .c { font-size: 12px; display: flex; gap: 6px; align-items: flex-start; }
.nc-notify-box .c input { -webkit-appearance: checkbox; appearance: auto; width: 14px; height: 14px; margin-top: 2px; }
.nc-notify-box .x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; background: #e6ffee; font-size: 22px; cursor: pointer; }
.nc-notify-box .m { font-size: 13px; min-height: 1em; }

/* Rewards page: sticky jump bar sits under the header */
.chips { top: 72px !important; background: var(--white) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--line); }
@media (max-width: 1100px) { .chips { top: 64px !important; } }
.gift p { color: var(--ink-muted) !important; }

/* Link page and Inner Circle card: logo lockup, sub-lines in the text face */
.logo img.nc-lockup { height: 32px; width: auto; display: block; }
.sub { font-family: var(--font-text) !important; text-transform: none !important; letter-spacing: 0 !important; }

/* Founding lights wall: action + outline buttons on the dark wall */
.btn--light { background: var(--action) !important; color: var(--on-action) !important; border: 0 !important; }
.btn--light:hover { background: var(--action-hover) !important; }
.btn--ghost { background: transparent !important; color: var(--blush) !important; border: 1px solid var(--blush) !important; }

/* Old pages reuse the name --white for card grounds; keep action text truly white */
:root, [data-theme] { --on-action: #ffffff; }

/* Link page: the main button's sub-line stays readable on deep aqua */
.btn--primary .sub, .btn--primary .title { color: var(--on-action) !important; opacity: 1 !important; }
.btn--primary { background: var(--action) !important; color: var(--on-action) !important; }

/* Primary face (Bebas Neue): line spacing 1 wherever it runs over more than one line */
.nc-display, .nc-t-display-hero, .nc-t-display-xl, .nc-t-display-lg, .nc-t-display-md, .nc-t-display-sm, .price, .stat b, .trial b { line-height: 1 !important; }
.nc-navlist { gap: 12px; }
@media (max-width: 1100px) { .nc-top nav a { line-height: 1; padding: 4px 0; } }

/* Team photo: who's who on hover (laptops and desktops only; phones keep the flags) */
.teamband { background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)), url("/team.jpg") center 30% / cover !important; }
.teamband .wrap { position: relative; z-index: 2; pointer-events: none; }
.teamband .wrap a { pointer-events: auto; }
.spots { display: none; position: absolute; inset: 0; z-index: 1; }
.spots .spot { position: absolute; width: var(--d, 120px); height: var(--d, 120px); transform: translate(-50%, -50%); border-radius: var(--radius-pill); border: 1px solid transparent; transition: border-color .15s ease; }
.spots .spot:hover, .spots .spot:focus-visible { border-color: var(--blush); }
.tcard { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: var(--blush); color: var(--black); padding: 8px 12px; display: grid; gap: 2px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; text-align: left; }
.tcard b { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: .9; letter-spacing: .075em; text-transform: uppercase; }
.tcard span { font-family: var(--font-text); font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: #141514bf; }
.spots .spot:hover .tcard, .spots .spot:focus-visible .tcard { opacity: 1; }
.spots .spot.below .tcard { bottom: auto; top: calc(100% + 8px); }
.team-more { display: inline-block; margin-top: 14px; font-family: var(--font-display); font-size: 18px; letter-spacing: .075em; text-transform: uppercase; color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.team-more:hover { color: var(--accent); }
.team-hint { display: none; }
@media (hover: hover) and (min-width: 1101px) {
  .spots { display: block; }
  .teamband .from, .teamband .flags { display: none !important; }
  .team-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) { .tcard, .spots .spot { transition: none; } }

/* Ocean photos behind some dark sections, with a flat dark wash so the blush text reads */
.bg-reef, .bg-turtle, .bg-turtles { background-color: #141514 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.bg-reef { background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url("/assets/bg/reef-dark.webp") !important; }
.bg-turtle { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("/assets/bg/turtle-surface.webp") !important; background-position: center 40% !important; }
.bg-turtles { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("/assets/bg/turtles-two.webp") !important; }

/* Ocean map on phones: a wider map you can swipe, so the seas aren't hidden under the counters */
.map-hint { display: none; }
@media (max-width: 640px) {
  .bmap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bmap-in { width: 860px; max-width: none; }
  .bmap .pin-dot { width: 34px !important; height: 34px !important; font-size: 13px !important; }
  .bmap .legend { position: sticky !important; left: 0; top: auto !important; bottom: auto !important; margin: 0 !important; width: calc(100vw - 32px) !important; }
  .map-hint { display: block; font-size: 12px; line-height: 18px; color: var(--ink-subtle); margin: 0 0 8px; }
}

/* Reward cards: one short paragraph */
.card p.what { display: block; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* Home hero: the Kickstarter countdown card is white */
.hero .launch { --white: #ffffff; --deep: #141514; --drift: #141514bf; --shallows: #e6ffee; --line: #1415141f; --ocean-text: #425982;
  --ink: #141514; --ink-muted: #141514bf; --ink-subtle: #141514a6; --accent: #425982; --line-strong: #141514; --focus-ring: #425982;
  background: #ffffff !important; color: #141514 !important; }
.hero .launch .anchor { color: #141514; }
.hero .launch .kline span { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: 0.075em !important; text-transform: uppercase; line-height: 1; }

/* Nov 6: light blue (Tiffany #7de2d2) is the main colour, not black.
   Plain "dark" sections become Tiffany with Night text; ocean-photo sections keep their dark overlay. */
[data-theme="dark"]:not([class*="bg-"]):not(.hero):not(.vband):not(.gameband):not(.teamband):not(.wall):not(.nc-top):not(.nc-menu):not(.stats):not(.by-hero):not(.closing):not(.gband):not(.lawband):not(.hero-video):not(video) {
  --ink: #141514; --ink-muted: #141514bf; --ink-subtle: #141514a6; --ink-faint: #14151466;
  --mist: #7de2d2; --shallows: #e6ffee; --white: #7de2d2; --deep: #141514; --drift: #141514bf; --line: #14151433; --blush: #141514;
  background-color: #7de2d2 !important; color: #141514 !important;
}
[data-theme="dark"]:not([class*="bg-"]):not(.hero):not(.vband):not(.gameband):not(.teamband):not(.wall):not(.nc-top):not(.nc-menu):not(.stats):not(.by-hero):not(.closing):not(.gband):not(.lawband) ::selection { background: #141514; color: #7de2d2; }
[data-theme="dark"]:not([class*="bg-"]):not(.hero):not(.vband):not(.gameband):not(.teamband):not(.wall):not(.nc-top):not(.nc-menu):not(.stats):not(.by-hero):not(.closing):not(.gband):not(.lawband) input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"]:not([class*="bg-"]):not(.hero):not(.vband):not(.gameband):not(.teamband):not(.wall):not(.nc-top):not(.nc-menu):not(.stats):not(.by-hero):not(.closing):not(.gband):not(.lawband) select, [data-theme="dark"]:not([class*="bg-"]):not(.hero):not(.vband):not(.gameband):not(.teamband):not(.wall):not(.nc-top):not(.nc-menu):not(.stats):not(.by-hero):not(.closing):not(.gband):not(.lawband) textarea { color: #141514 !important; border-color: #141514 !important; }
[data-theme="dark"]:not([class*="bg-"]):not(.hero):not(.vband):not(.gameband):not(.teamband):not(.wall):not(.nc-top):not(.nc-menu):not(.stats):not(.by-hero):not(.closing):not(.gband):not(.lawband) input::placeholder { color: #141514a6; }

/* Header: always Night with the Snow lockup (the swap over light sections is off). */
.nc-top, .nc-top[data-theme] { --ink: #fffbfc; --line: #fffbfc40; --accent: #7de2d2; background-color: #141514 !important; color: #fffbfc !important; }
.nc-top .lk, .nc-top .mk { opacity: 0 !important; }
.nc-top .lk-blush { opacity: 1 !important; }
.nc-top.scrolled .lk-blush { opacity: 0 !important; }
.nc-top.scrolled .mk-aqua { opacity: 1 !important; }
@media (max-width: 1100px) { .nc-top .lk-blush { opacity: 0 !important; } .nc-top .mk-aqua { opacity: 1 !important; } }

/* Courier Prime is wide: tighten it a little (display text keeps its own 0.075em) */
body, p, li, dd, dt, td, th, label, input, textarea, select, summary, .what, .lede, .intro { letter-spacing: -0.035em; word-spacing: -0.12em; }
