/* css/site.css: shared shell for every Cloakr marketing page (tokens, type, header, footer, buttons, legal,
   company and brand layouts). Landing-only widgets live in css/home.css. */

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Darker Grotesque';
  src: url('/fonts/darker-grotesque-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #161616;
  --deep: #111111;
  --raised: #1c1c1c;
  --ink: #0d0d14;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.13);
  --text: #eeeeee;
  --muted: #888888;
  --dim: #555555;
  --faint: #444444;
  --violet: #7c5cff;
  --violet-2: #9b7fff;
  --violet-soft: rgba(124, 92, 255, 0.1);
  --mint: #22d3a0;
  --amber: #f59e0b;
  --danger: #f06b6b;
  --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Darker Grotesque', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gutter: 32px;
  --bar-h: 44px;
  --head-h: 66px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
@media (min-width: 1280px) {
  :root { --gutter: 80px; }
}
@media (max-width: 480px) {
  :root { --gutter: 22px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(124, 92, 255, 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--violet); color: #fff; padding: 8px 14px; border-radius: 3px; font-size: 13px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); }
.tone { color: var(--muted); font-weight: 500; }
.hl { color: var(--text); }

/* Section scaffolding */
.sec { border-bottom: 1px solid var(--line); scroll-margin-top: 7rem; position: relative; }
.sec--deep { background: var(--deep); }
.sec__pad { padding-block: 80px; }
@media (min-width: 1024px) { .sec__pad { padding-block: 112px; } }

.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-2);
  margin-bottom: 1.25rem;
}
.label--dim { color: var(--faint); }
.h2 {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--text);
}
.h2 .tone { font-weight: 500; }
.lead { font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 520px; }
.small { font-size: 13px; line-height: 1.65; color: var(--faint); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 11px 20px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: opacity 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; flex: none; transition: transform 0.2s var(--ease); }
.btn:hover svg.arrow { transform: translateX(2px); }
.btn--primary { background: var(--violet); color: #fff; }
.btn--primary:hover { background: #8a6dff; }
.btn--line { border-color: var(--line); color: var(--muted); }
.btn--line:hover { border-color: var(--line-2); color: var(--text); }
.btn--solid-line { border-color: var(--line-2); color: var(--text); }
.btn--solid-line:hover { background: rgba(255, 255, 255, 0.04); }
.btn--sm { font-size: 14px; padding: 8px 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Asset chips (ETH, USDG) */
.asset { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.asset img { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.asset--sm img { width: 11px; height: 11px; }
.asset--lg img { width: 18px; height: 18px; }

/* Announcement bar */
.annc {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  background: var(--deep);
  border-bottom: 1px solid var(--line);
}
.annc__link { display: flex; align-items: center; gap: 12px; max-width: min(100%, 720px); color: var(--muted); }
.annc__link:hover { color: var(--text); }
.annc__coins { display: flex; flex: none; }
.annc__coins .coin { position: relative; width: 24px; height: 24px; border: 2px solid var(--deep); background-color: var(--deep); background-origin: border-box; }
.annc__coins .coin:first-child { z-index: 2; }
.annc__coins .coin + .coin { margin-left: -9px; z-index: 1; }
.annc__text { font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: #b5b5b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.annc__link:hover .annc__text { color: var(--text); }
.annc__link svg { width: 12px; height: 12px; flex: none; color: var(--faint); }
.annc__mark { width: 22px; height: 22px; flex: none; }
.annc__text b { font-weight: 700; color: var(--violet-2); letter-spacing: 0.02em; }

/* Header */
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--bar-h);
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
.site-header.is-scrolled, .site-header.is-open {
  background: rgba(22, 22, 22, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.site-header__in { display: flex; align-items: center; gap: 16px; padding-block: 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; color: var(--text); }
.brand img { width: 30px; height: 30px; }
.brand__word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-top: -4px;
}
.site-nav { display: none; flex: 1; justify-content: center; gap: 4px 18px; min-width: 0; }
.site-nav a { font-size: 14px; color: var(--muted); white-space: nowrap; transition: color 0.2s; }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--text); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.coin-btn {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 3px;
  transition: color 0.2s, background-color 0.2s;
  white-space: nowrap;
}
.coin-btn svg { width: 14px; height: 14px; flex: none; }
.coin-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.menu-btn {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--text);
}
.menu-btn svg { width: 16px; height: 16px; }
.menu-btn .i-close { display: none; }
.site-header.is-open .menu-btn .i-open { display: none; }
.site-header.is-open .menu-btn .i-close { display: block; }
@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .menu-btn { display: none; }
}
@media (min-width: 1024px) {
  .site-header .coin-btn { display: inline-flex; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .site-nav { gap: 4px 14px; }
  .coin-btn { padding: 8px 6px; }
}

.mnav { border-top: 1px solid var(--line); padding: 8px var(--gutter) 20px; }
.mnav[hidden] { display: none; }
.mnav a, .mnav button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 16px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.mnav a svg, .mnav button svg { width: 14px; height: 14px; color: var(--faint); }
.mnav__coin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.mnav__coin button {
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  font-size: 14px;
  padding: 11px 12px;
}
.mnav__coin button svg { color: var(--muted); }
@media (min-width: 1024px) { .mnav { display: none !important; } }
.site-header.is-open { background: rgba(17, 17, 17, 0.97); }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 3px;
  background: #1f1f23;
  border: 1px solid var(--line-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
}
.toast::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--violet-2); box-shadow: 0 0 10px var(--violet); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Footer */
.site-footer { background: var(--deep); border-top: 1px solid var(--line); }
.site-footer .wrap { padding-block: 56px; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.foot-brand { grid-column: 1 / -1; }
.foot-brand p { font-size: 13px; line-height: 1.55; color: var(--faint); margin-top: 18px; max-width: 300px; }
.foot-coin { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.foot-coin button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 7px 11px;
  transition: color 0.2s, border-color 0.2s;
}
.foot-coin button svg { width: 13px; height: 13px; }
.foot-coin button:hover { color: var(--text); border-color: var(--line-2); }
.foot-h {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-2);
  margin-bottom: 14px;
}
.foot-h--dim { color: var(--faint); margin-bottom: 6px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.foot-col a { font-size: 13px; color: var(--muted); transition: color 0.2s; }
.foot-col a:hover { color: var(--text); }
.foot-verify { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.foot-verify p:not(.foot-h) { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--faint); margin-top: 6px; }
.foot-bottom {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 24px; }
  .foot-brand { grid-column: auto; }
}

/* Reveal on scroll (only hidden when scripts run; shell.js adds .is-in) */
@media (scripting: enabled) {
  [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Page hero (company, brand, legal, 404) */
.page-hero { padding-top: clamp(170px, calc(60px + 16vh), 230px); padding-bottom: 96px; border-bottom: 1px solid var(--line); }
.page-hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.045em;
  max-width: 880px;
}
.page-hero h1 .tone { font-weight: 500; }
.page-hero .lead { font-size: 17px; max-width: 660px; margin-top: 36px; line-height: 1.6; }
.page-hero .meta { margin-top: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); line-height: 1.7; }
.page-hero .btn-row { margin-top: 36px; }

/* Callout band (mission, early software notice) */
.band { background: var(--deep); border-bottom: 1px solid var(--line); }
.band__in { display: flex; gap: 20px; padding-block: 48px; align-items: flex-start; }
.band__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(124, 92, 255, 0.35);
  background: var(--violet-soft);
  color: var(--violet-2);
  border-radius: 3px;
}
.band__icon svg { width: 18px; height: 18px; }
.band__icon--amber { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.08); color: var(--amber); }
.band__body .label { margin-bottom: 8px; margin-top: 4px; }
.band__body .label--amber { color: var(--amber); }
.band__body p:not(.label) { font-size: 14px; line-height: 1.65; color: #a8a8a8; max-width: 640px; }
.band__body strong { color: var(--text); font-weight: 500; }

/* Split: sticky left column, content right */
.split { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); gap: 64px; }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split__aside { position: sticky; top: 140px; align-self: start; }
}

/* Numbered list rows (legal sections, company "what we ship") */
.nrow { display: grid; grid-template-columns: 36px 1fr; gap: 0 0; padding-block: 34px; border-bottom: 1px solid var(--line); }
.nrow:first-child { padding-top: 6px; }
.nrow:last-child { border-bottom: 0; }
.nrow__n { font-family: var(--mono); font-size: 11px; color: var(--violet-2); padding-top: 7px; }
.nrow h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; }
.nrow p, .nrow li { font-size: 14px; line-height: 1.65; color: #9a9a9a; }
.nrow p { margin-top: 14px; }
.nrow p strong, .nrow li strong { color: var(--text); font-weight: 500; }
.nrow ul { margin-top: 14px; display: grid; gap: 8px; }
.nrow li { position: relative; padding-left: 22px; }
.nrow li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--faint); }
.nrow a { color: var(--violet-2); }
.nrow a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Company */
.problem-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.problem-stats b { display: block; font-size: clamp(2rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.problem-stats span { display: block; font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.problem-stats small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }
.prose p { font-size: 15px; line-height: 1.75; color: #9a9a9a; }
.prose p + p { margin-top: 20px; }
@media (min-width: 1024px) { .vline { border-left: 1px solid var(--line); padding-left: 32px; } }

.principles { display: grid; gap: 0; margin-top: 64px; }
.principle { padding: 28px 0; border-top: 1px solid var(--line); }
.principle__n { font-family: var(--mono); font-size: 11px; color: var(--violet-2); }
.principle h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; margin-top: 22px; }
.principle p { font-size: 14px; line-height: 1.65; color: var(--muted); margin-top: 14px; max-width: 340px; }
@media (min-width: 900px) {
  .principles { grid-template-columns: repeat(3, 1fr); }
  .principle { border-top: 0; padding: 0 32px; border-left: 1px solid var(--line); }
  .principle:first-child { padding-left: 0; border-left: 0; }
}

.facts { display: grid; gap: 10px; margin-top: 28px; }
.facts li { display: flex; gap: 12px; font-size: 14px; color: #a8a8a8; line-height: 1.55; }
.facts li svg { width: 16px; height: 16px; flex: none; color: var(--mint); margin-top: 2px; }

.contact { display: grid; gap: 32px; align-items: center; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 1024px) {
  .contact { grid-template-columns: 1fr auto; }
  .contact__actions { justify-content: flex-end; max-width: 380px; }
}

/* Team band with drawn backdrop (no photos) */
.teamband { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.teamband__bg { position: absolute; inset: 0; pointer-events: none; }
.teamband__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 70% at 72% 55%, rgba(124, 92, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 30% 50% at 88% 30%, rgba(34, 211, 160, 0.08), transparent 70%);
}
.teamband__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);
  opacity: 0.6;
}
.teamband__mark { position: absolute; right: 9%; top: 50%; width: 260px; transform: translateY(-50%); opacity: 0.11; filter: saturate(0.8); }
.teamband .wrap { position: relative; padding-block: 150px; }
@media (max-width: 767px) {
  .teamband .wrap { padding-block: 96px; }
  .teamband__mark { width: 160px; right: -30px; }
}

/* Brand page */
.dl-grid { display: grid; gap: 16px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .dl-grid { grid-template-columns: repeat(3, 1fr); } }
.dl {
  display: block;
  padding: 24px 20px;
  border: 1px solid var(--line);
  background: var(--deep);
  border-radius: 3px;
  transition: border-color 0.2s;
}
.dl:hover { border-color: rgba(124, 92, 255, 0.45); }
.dl h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.dl h3 svg { width: 16px; height: 16px; color: var(--violet-2); }
.dl p { font-size: 13px; color: var(--muted); margin-top: 10px; }
.dl span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--violet-2); margin-top: 16px; }
.dl span svg { width: 12px; height: 12px; }

.sec-head { display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.sec-head__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(124, 92, 255, 0.35);
  background: var(--violet-soft);
  color: var(--violet-2);
  border-radius: 3px;
}
.sec-head__icon svg { width: 18px; height: 18px; }
.sec-head .label { margin-top: 6px; margin-bottom: 14px; }
.sec-head .lead { margin-top: 18px; max-width: 620px; }
@media (max-width: 640px) {
  .sec-head { grid-template-columns: 1fr; }
}

.logo-grid { display: grid; gap: 24px; margin-top: 48px; }
@media (min-width: 900px) { .logo-grid { grid-template-columns: 1fr 1fr; } }
.logo-card {
  position: relative;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 36px 32px;
  border: 1px solid var(--line);
  background: var(--deep);
  border-radius: 3px;
}
.logo-card--light { background: #eeeaff; border-color: #eeeaff; }
.logo-card__cap { position: absolute; top: 22px; left: 32px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.logo-card--light .logo-card__cap { color: #3018a8; }
.logo-card--center .logo-card__cap { left: 0; right: 0; text-align: center; }
.logo-card img.lockup { height: 60px; width: auto; }
.logo-card img.tile { width: 96px; height: 96px; }
.logo-card img.round { width: 96px; height: 96px; border-radius: 50%; }
.logo-card__dl { position: absolute; right: 18px; bottom: 16px; display: flex; gap: 12px; font-size: 12px; }
.logo-card__dl a { color: var(--violet-2); }
.logo-card--light .logo-card__dl a { color: #3018a8; }
.logo-card__dl a:hover { text-decoration: underline; text-underline-offset: 3px; }

.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
@media (min-width: 900px) { .swatches { grid-template-columns: repeat(4, 1fr); } }
.swatch {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--raised);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.swatch:hover { border-color: var(--line-2); transform: translateY(-2px); }
.swatch__chip { display: block; flex: none; height: 112px; border-bottom: 1px solid var(--line); }
.swatch__body { display: block; padding: 16px; }
.swatch__hex { display: block; font-family: var(--mono); font-size: 13px; color: var(--text); letter-spacing: 0.02em; }
.swatch__name { display: block; font-size: 14px; font-weight: 500; margin-top: 8px; }
.swatch__use { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }

.type-grid { display: grid; gap: 24px; margin-top: 48px; }
@media (min-width: 900px) { .type-grid { grid-template-columns: repeat(3, 1fr); } }
.type-card { padding: 32px; border: 1px solid var(--line); background: var(--raised); border-radius: 3px; }
.type-card .label { margin-bottom: 20px; }
.type-card__sample { font-size: 30px; line-height: 1.15; letter-spacing: -0.035em; font-weight: 600; }
.type-card__sample--display { font-family: var(--display); font-weight: 800; font-size: 48px; letter-spacing: -0.01em; line-height: 1; }
.type-card__sample--mono { font-family: var(--mono); font-size: 20px; letter-spacing: 0; font-weight: 500; }
.type-card__note { font-size: 13px; line-height: 1.65; color: var(--muted); margin-top: 18px; }

.glows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 48px; }
@media (min-width: 900px) { .glows { grid-template-columns: repeat(6, 1fr); } }
.glow { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 3px; background: #161616; }
.glow--v { background: radial-gradient(circle at 30% 25%, rgba(124, 92, 255, 0.45), transparent 60%), #161616; }
.glow--m { background: radial-gradient(circle at 70% 78%, rgba(34, 211, 160, 0.28), transparent 58%), #161616; }
.glow--d { background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), transparent 45%, transparent 55%, rgba(124, 92, 255, 0.24)), #161616; }
.glow--g { background-color: #161616; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 20px 20px; }
.glow--r { background: radial-gradient(circle at 50% 50%, rgba(155, 127, 255, 0.35), transparent 30%), radial-gradient(circle at 50% 50%, transparent 44%, rgba(124, 92, 255, 0.25) 45%, transparent 47%), #161616; }
.glow--s { background: linear-gradient(180deg, transparent, rgba(124, 92, 255, 0.5) 50%, transparent) center / 2px 60% no-repeat, linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.4) 50%, transparent) 30% 30% / 2px 40% no-repeat, #161616; }

.dodont { display: grid; gap: 40px; margin-top: 48px; }
@media (min-width: 900px) { .dodont { grid-template-columns: 1fr 1fr; } }
.dodont h3 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.dodont .do h3 { color: var(--mint); }
.dodont .dont h3 { color: var(--danger); }
.dodont ul { display: grid; gap: 16px; margin-top: 20px; }
.dodont li { display: flex; gap: 12px; font-size: 14px; line-height: 1.55; color: #a8a8a8; }
.dodont li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.dodont .do li svg { color: var(--mint); }
.dodont .dont li svg { color: var(--danger); }
.refs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); }
.refs .label { margin: 0; color: var(--faint); }
.refs a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.refs a:first-of-type { color: var(--violet-2); }
.refs a svg { width: 13px; height: 13px; }
.refs a:hover { color: var(--text); }

/* 404 */
.nf { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.nf .wrap { position: relative; padding-top: 140px; padding-bottom: 80px; }
.nf__code { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--violet-2); }
.nf h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.04; margin-top: 20px; }
.nf h1 .tone { font-weight: 500; }
.nf p { color: var(--muted); margin-top: 22px; max-width: 460px; }
.nf .btn-row { margin-top: 36px; }
.nf__mark { position: absolute; right: -60px; bottom: -40px; width: 420px; opacity: 0.06; pointer-events: none; }

/* Phones: fewer words, one primary action */
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  .page-hero { padding-bottom: 72px; }
  .page-hero .lead { font-size: 15px; margin-top: 26px; }
  .sec__pad { padding-block: 72px; }
}
@media (min-width: 641px) {
  .only-sm { display: none !important; }
}

/* ETH and USDG logos, inlined once so every asset mention shows its logo even offline */
.coin { display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%; background: center / contain no-repeat; vertical-align: -2px; }
.coin--eth { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E %3Cpath fill='%23627EEA' d='M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16Z'/%3E %3Cpath fill='%23ffffff' fill-opacity='.55' d='M16.498 4v8.87l7.497 3.35L16.498 4Z'/%3E %3Cpath fill='%23ffffff' d='M16.498 4 9 16.22l7.498-3.35V4Z'/%3E %3Cpath fill='%23ffffff' fill-opacity='.55' d='M16.498 21.968v6.027L24 17.616l-7.502 4.352Z'/%3E %3Cpath fill='%23ffffff' d='M16.498 27.995v-6.028L9 17.616l7.498 10.379Z'/%3E %3Cpath fill='%23ffffff' fill-opacity='.2' d='m16.498 20.573 7.497-4.353-7.497-3.348v7.701Z'/%3E %3Cpath fill='%23ffffff' fill-opacity='.55' d='m9 16.22 7.498 4.353v-7.701L9 16.22Z'/%3E %3C/svg%3E"); }
.coin--usdg { background-image: url("data:image/png;base64,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"); }
.asset .coin { width: 14px; height: 14px; }
.asset--sm .coin { width: 11px; height: 11px; }
.asset--lg .coin { width: 18px; height: 18px; }