@import url("./brand-tokens.css");
:root {
  color-scheme: dark;
  --ink: #1e1e1e;
  --paper: #ffffff;
  --muted: #8a8f96;
  --line: #3b3d3e;
  --accent: #00d4c8;
  --recovery-accent: #d7ff5f;
  --teal: #2e8b84;
  --focus: #00d4c8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--paper);
  background-color: var(--ink);
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  padding: 0.75rem 1rem;
  color: var(--ink);
  background: var(--paper);
  font-weight: 700;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  display: flex;
  min-height: 6rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 3rem;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.wordmark img {
  width: 10.875rem;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav a {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a:hover {
  color: var(--paper);
}

.donation-menu {
  position: relative;
}

.facebook-menu {
  position: relative;
}

.facebook-menu summary {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.facebook-menu summary::-webkit-details-marker {
  display: none;
}

.facebook-menu-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 1rem);
  right: 0;
  width: 12rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  background: var(--ink);
}

.facebook-menu-options a {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem;
  color: var(--paper);
  font-size: 0.72rem;
}

.facebook-menu-options img {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.35rem;
  object-fit: contain;
}

.donation-menu summary {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.donation-menu summary::-webkit-details-marker {
  display: none;
}

.donation-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.75rem);
  right: 0;
  display: grid;
  width: 20rem;
  grid-template-columns: auto repeat(3, 3.3rem);
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.donation-options strong,
.donation-options a {
  display: flex;
  min-height: 2.4rem;
  align-items: center;
  padding: 0 0.65rem;
  background: var(--ink);
  font-size: 0.68rem;
}

.donation-options strong {
  grid-column: 1;
  color: var(--muted);
}

.donation-options a {
  justify-content: center;
  color: var(--paper);
}

.donation-options a:hover,
.donation-options a:focus-visible {
  color: var(--ink);
  background: var(--accent);
  outline: 0;
}

.hero {
  position: relative;
  display: grid;
  min-height: calc(100svh - 8rem);
  grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.75fr);
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-index {
  grid-column: 1 / -1;
  padding: 2rem 3rem 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.hero-copy {
  z-index: 1;
  align-self: center;
  padding: 5rem 3rem 7rem;
}

.eyebrow,
.section-number,
.product-owner {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

h1 {
  max-width: 14ch;
  margin: 1.5rem 0 2rem;
  font-size: 5.75rem;
  line-height: 0.94;
  letter-spacing: 0;
}

h1 em {
  color: var(--accent);
  font-weight: 400;
}

.lead {
  max-width: 32rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.15rem;
}

.hero-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-left: 1px solid var(--line);
  user-select: none;
}

.hero-mark img {
  width: min(76%, 24rem);
  height: auto;
  opacity: 0.12;
}

.scroll-cue {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 13rem;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll-cue:hover {
  color: var(--paper);
}

.media-section {
  padding: 5rem 3rem;
  border-bottom: 1px solid var(--line);
}

.media-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.media-intro h2 {
  max-width: 12ch;
  margin: 0;
  font-size: 3.5rem;
  line-height: 1;
  text-align: right;
}

.media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.65fr);
  gap: 1px;
  max-width: 90rem;
  margin: 0 auto;
  padding: 1px;
  background: var(--line);
}

.video-embed {
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.x-follow {
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2rem;
  padding: 2rem;
  background: var(--ink);
}

.x-follow span {
  max-width: 18rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.x-follow a {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  text-underline-offset: 0.25em;
}

.section {
  display: grid;
  grid-template-columns: minmax(13rem, 0.55fr) minmax(0, 1.45fr);
  min-height: 36rem;
  border-bottom: 1px solid var(--line);
}

.section-number {
  padding: 3rem;
  border-right: 1px solid var(--line);
}

.section-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 10%;
}

.section h2 {
  max-width: 13ch;
  margin-bottom: 2rem;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0;
}

.section-body > p {
  max-width: 40rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.15rem;
}

.product {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--ink);
}

.product .section-number {
  color: var(--ink);
  border-color: rgba(11, 12, 12, 0.45);
}

.product-list {
  display: grid;
}

.product-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3rem;
  padding: 4rem 10%;
}

.product-body + .product-body {
  border-top: 1px solid rgba(11, 12, 12, 0.45);
}

.product-body-recovery {
  background: var(--recovery-accent);
}

.product-body-development {
  background: var(--brand-surface-raised, #0d192b);
  color: var(--paper);
}

.product-body-development + .product-body-development {
  border-top-color: var(--line);
}

.product-body-development .product-owner,
.product-body-development p:last-child {
  color: var(--muted);
}

.product-body-development h2 {
  color: var(--paper);
}

.product-body-private {
  background: var(--brand-surface, #09111f);
}

.product-status {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  padding: 0 1.25rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.product-owner {
  color: var(--ink);
}

.product h2 {
  max-width: none;
  margin: 1.25rem 0 1rem;
  font-size: 5rem;
}

.product-body p:last-child {
  margin-bottom: 0;
  font-size: 1.1rem;
}

.product-link {
  display: flex;
  min-width: 15rem;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 1.5rem;
  border: 1px solid var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.product-link:hover {
  color: var(--paper);
  background: var(--ink);
}

.product a:focus-visible {
  outline-color: var(--ink);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.social-links a {
  color: var(--muted);
  font-size: 0.9rem;
  text-underline-offset: 0.25em;
}

.social-links a:hover {
  color: var(--paper);
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 2rem;
  align-items: center;
  min-height: 9rem;
  padding: 2rem 3rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer p {
  margin: 0;
}

.visitor-counter strong {
  margin-left: 0.35rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.site-footer > img {
  width: 9.375rem;
  height: auto;
}

.facebook-pages {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.facebook-label {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.7rem;
}

.facebook-pages a {
  display: flex;
  min-height: 2.65rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  border: 1px solid var(--line);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}

.facebook-pages a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.facebook-pages img {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.35rem;  object-fit: contain;
}

@media (max-width: 960px) {
  h1 {
    font-size: 4.5rem;
  }

  .hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(12rem, 0.5fr);
  }

  .hero-mark {
    font-size: 10rem;
  }

  .section {
    grid-template-columns: 11rem minmax(0, 1fr);
  }

  .section h2 {
    font-size: 3.25rem;
  }

  .product h2 {
    font-size: 4rem;
  }

  .product-body {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 680px) {
  .site-header {
    min-height: 5rem;
    padding: 0 1.25rem;
  }

  .wordmark img {
    width: 8.5rem;
  }

  .site-nav {
    gap: 1rem;
  }

  .site-nav a {
    font-size: 0.68rem;
  }

  .donation-options {
    position: fixed;
    top: 4.75rem;
    right: 1.25rem;
    width: min(20rem, calc(100vw - 2.5rem));
  }

  .site-nav > a:first-child {
    display: none;
  }

  .facebook-menu summary {
    font-size: 0.64rem;
  }

  .facebook-menu-options {
    right: -4rem;
  }

  .hero {
    min-height: calc(100svh - 6.5rem);
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .hero-index {
    padding: 1.5rem 1.25rem 0;
  }

  .hero-copy {
    align-self: start;
    padding: 5rem 1.25rem 7rem;
  }

  h1 {
    max-width: 10ch;
    font-size: 3.65rem;
    line-height: 0.96;
  }

  .lead {
    max-width: 24rem;
    font-size: 1rem;
  }

  .hero-mark {
    position: absolute;
    right: -2rem;
    bottom: -1.5rem;
    width: 13rem;
    height: 11rem;
    border-left: 0;
    opacity: 0.7;
  }

  .hero-mark img {
    width: 100%;
  }

  .scroll-cue {
    width: 11rem;
    min-height: 4rem;
    padding: 0 1.25rem;
  }

  .media-section {
    padding: 4rem 1.25rem;
  }

  .media-intro {
    display: grid;
    gap: 1rem;
  }

  .media-intro h2 {
    font-size: 2.8rem;
    text-align: left;
  }

  .media-grid {
    grid-template-columns: 1fr;
  }

  .x-follow {
    min-height: 12rem;
  }

  .section {
    min-height: 32rem;
    grid-template-columns: 1fr;
  }

  .section-number {
    padding: 1.5rem 1.25rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .section-body,
  .product-body {
    padding: 4rem 1.25rem;
  }

  .section h2 {
    font-size: 2.8rem;
  }

  .product h2 {
    font-size: 3.25rem;
  }

  .product-link {
    width: 100%;
    min-width: 0;
  }

  .social-links {
    display: grid;
  }

  .site-footer {
    grid-template-columns: 1fr auto;
    padding: 2rem 1.25rem;
  }

  .site-footer p:first-of-type {
    display: none;
  }

  .visitor-counter {
    grid-column: 1 / -1;
  }

  .facebook-pages a {
    flex: 1 1 8rem;
  }
}

/* Shared layout for company, legal, and editorial pages */
.content-header {
  padding: 3rem 3rem 2rem;
  border-bottom: 1px solid var(--line);
}

.breadcrumb {
  display: inline-flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--paper);
}

.content-header h1 {
  max-width: 26ch;
  margin: 0 0 1rem;
  font-size: 3rem;
  line-height: 1.05;
}

.content-header .lead {
  max-width: 46rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.15rem;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-body {
  max-width: 42rem;
  padding: 3rem;
  margin: 0 auto;
}

.content-body.wide {
  max-width: 60rem;
}

.content-body h2 {
  max-width: none;
  margin: 2.5rem 0 1rem;
  font-size: 1.7rem;
  line-height: 1.2;
}

.content-body h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.2rem;
}

.content-body p,
.content-body li {
  color: #cfd3d6;
  font-size: 1.02rem;
  line-height: 1.65;
}

.content-body ul,
.content-body ol {
  padding-left: 1.25rem;
}

.content-body a {
  color: var(--accent);
}

.content-body pre {
  padding: 1rem 1.25rem;
  overflow-x: auto;
  background: #141414;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}

.content-body code {
  padding: 0.1rem 0.35rem;
  background: #141414;
  border-radius: 0.3rem;
  font-size: 0.9em;
}

.content-body pre code {
  padding: 0;
  background: none;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.callout {
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  background: rgba(0, 212, 200, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 0.35rem;
}

.callout p {
  margin: 0;
  color: var(--paper);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.5rem;
}

.insight-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  background: #141414;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  text-decoration: none;
}

.insight-card:hover {
  border-color: var(--accent);
}

.insight-card h3 {
  margin: 0;
  color: var(--paper);
  font-size: 1.15rem;
}

.insight-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.insight-card .article-meta {
  margin-top: auto;
}

.author-box,.reference-box,.related-reading{margin:2rem 0;padding:1.25rem 1.5rem;border:1px solid var(--brand-line,#d7d7d7);background:var(--brand-surface,#f7f7f7)}
.author-box h2,.reference-box h2,.related-reading h2{margin-top:0;font-size:1.15rem}
.author-box p:last-child,.reference-box p:last-child{margin-bottom:0}
.reference-box ul,.related-reading ul{margin-bottom:0}

/* Signal Terminal homepage direction */
body:has(> .site-header) { background:#05080d; color:#edf4ff; font-family:Inter,"Segoe UI",sans-serif; }
body:has(> .site-header) .site-header { min-height:5.2rem; padding:0 2.2rem; border-color:#1d2a3b; background:#05080df2; }
body:has(> .site-header) .site-nav { gap:1.35rem; }
body:has(> .site-header) .site-nav a { color:#a9bad0; font-size:.68rem; letter-spacing:.12em; }
body:has(> .site-header) .site-nav a:hover { color:#27a7ff; }
body:has(> .site-header) .hero { min-height:31rem; margin:1.2rem 1.2rem 0; grid-template-columns:1.8fr 1fr; grid-template-rows:auto 1fr; border:1px solid #1d2a3b; background:#07101a; }
body:has(> .site-header) .hero-index { padding:1.35rem 1.5rem 0; color:#2da8ff; font-family:monospace; font-size:.68rem; }
body:has(> .site-header) .hero-copy { padding:2rem 2rem 3rem; }
body:has(> .site-header) .hero-copy h1 { max-width:9ch; margin:.9rem 0 1rem; font-family:Inter,"Segoe UI",sans-serif; font-size:clamp(3.5rem,6.2vw,6.7rem); font-weight:800; line-height:.9; letter-spacing:-.07em; }
body:has(> .site-header) .hero-copy h1 em { color:#168fff; font-style:normal; }
body:has(> .site-header) .hero-copy .lead { max-width:31rem; color:#a9bad0; font-size:1rem; }
body:has(> .site-header) .hero:after { content:"BUILD\A TOOLS\A SHARE\A STAY INDEPENDENT"; white-space:pre; position:absolute; top:2rem; right:2rem; color:#8ca0b7; font: .62rem/1.6 monospace; letter-spacing:.15em; }
body:has(> .site-header) .hero-mark { display:block; position:absolute; right:0; top:0; bottom:0; width:48%; opacity:.7; background:linear-gradient(90deg,#07101a 0%,transparent 40%),url('/nomadrex-dev-hero.png') center/cover; }
body:has(> .site-header) .hero-mark img { display:none; }
body:has(> .site-header) .hero-actions a { border:1px solid #208fff; padding:.85rem 1.1rem; font-size:.72rem; text-transform:none; }
body:has(> .site-header) .hero-primary { background:#168fff; color:#03101e; box-shadow:none; }
body:has(> .site-header) .hero-secondary { border-color:#52677f!important; color:#dbe9f8; }
body:has(> .site-header) .media-section,body:has(> .site-header) .company,body:has(> .site-header) .product,body:has(> .site-header) .contact { margin:1.2rem; padding:1.35rem; border:1px solid #1d2a3b; background:#07101a; }
body:has(> .site-header) .media-section { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
body:has(> .site-header) .media-intro h2,body:has(> .site-header) .company h2,body:has(> .site-header) .contact h2 { font-family:Inter,"Segoe UI",sans-serif; font-weight:750; letter-spacing:-.04em; }
body:has(> .site-header) .section-number,body:has(> .site-header) .eyebrow,body:has(> .site-header) .product-owner { color:#26aaff; font-family:monospace; font-size:.63rem; }
body:has(> .site-header) .media-grid { border-color:#1d2a3b; }
body:has(> .site-header) .service-grid { gap:.55rem; }
body:has(> .site-header) .service-grid article,body:has(> .site-header) .product-body { min-height:9rem; border:1px solid #1d2a3b; background:#09131f; }
body:has(> .site-header) .service-grid article:hover { border-color:#168fff; background:#0b1928; }
body:has(> .site-header) .product-list { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
body:has(> .site-header) .product-body h2 { font-family:Inter,"Segoe UI",sans-serif; font-size:1.35rem; font-weight:750; }
body:has(> .site-header) .product-body-recovery { background:#0a1728; }
body:has(> .site-header) .contact { display:grid; grid-template-columns:1fr 1fr; }
body:has(> .site-header) .contact:after { content:"FOUNDER NOTE\A\A Daniel Harper\A Founder and Lead App Developer\A\A NomadRex exists to build useful software, share what we learn, and create a calmer corner of the internet."; white-space:pre-wrap; display:block; padding:1.2rem; border:1px solid #1d2a3b; color:#c5d3e2; font: .82rem/1.6 monospace; background:#09131f; }
body:has(> .site-header) .site-footer { margin:1.2rem; padding:1.2rem; border-color:#1d2a3b; background:#05080d; }
@media (max-width:800px){body:has(> .site-header) .hero{grid-template-columns:1fr}.hero-mark{opacity:.25;width:100%}body:has(> .site-header) .media-section,body:has(> .site-header) .contact{display:block}body:has(> .site-header) .product-list{grid-template-columns:1fr}body:has(> .site-header) .site-header{padding:1rem}.site-nav{flex-wrap:wrap;justify-content:flex-end}}

.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 0;
  margin: 0 0 3rem;
  list-style: none;
}

.page-links a {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.page-links a:hover {
  color: var(--paper);
}

.not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100vh - 6rem);
  padding: 3rem;
}

.not-found .hero-index {
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer .page-links {
  grid-column: 1 / -1;
  padding-top: 1.25rem;
  margin: 0;
  border-top: 1px solid var(--line);
}

/* Inner pages have no Facebook/Donate fallback menus, so their nav links must stay visible at every width */
@media (max-width: 680px) {
  .content-nav > a:first-child {
    display: inline;
  }
}

@media (max-width: 420px) {
  .content-nav {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .content-nav > a {
    display: inline;
  }
}

.not-found h1 {
  margin: 1rem 0;
  font-size: 3.5rem;
}

@media (max-width: 680px) {
  .content-header,
  .content-body {
    padding: 2rem 1.25rem;
  }
}

@media (max-width: 420px) {
  .site-header {
    gap: 0.5rem;
    padding-inline: 0.75rem;
  }

  .wordmark img {
    width: 6rem;
  }

  .site-nav {
    gap: 0.5rem;
  }

  .site-nav > a {
    display: none;
  }

  h1 {
    font-size: 3.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* NomadRex.dev 2026 product-studio refresh */
:root{
  --ink:var(--brand-midnight);
  --paper:var(--brand-ice);
  --muted:#9eafc1;
  --line:rgba(55,215,255,.20);
  --accent:var(--brand-accent-bright);
  --focus:var(--brand-accent-bright);
  --teal:var(--brand-accent);
}
body{
  background:
    radial-gradient(circle at 80% 8%,rgba(20,121,255,.17),transparent 31%),
    radial-gradient(circle at 12% 42%,rgba(55,215,255,.06),transparent 24%),
    var(--ink);
  font-family:var(--brand-font-body);
}
.site-header{
  position:sticky;
  z-index:40;
  top:0;
  min-height:5rem;
  border-bottom-color:var(--line);
  background:rgba(5,9,20,.88);
  backdrop-filter:blur(16px);
}
.wordmark img{filter:drop-shadow(0 0 14px rgba(55,215,255,.18))}
.site-nav a:hover{color:var(--accent)}
.hero{min-height:calc(100svh - 5rem);background:linear-gradient(125deg,rgba(20,121,255,.035),transparent 56%)}
.hero-copy{max-width:920px}
h1,h2{font-family:var(--brand-font-display);font-weight:800;letter-spacing:-.045em}
h1{text-transform:uppercase;font-size:clamp(3.65rem,7.2vw,7rem)}
h1 em{color:var(--accent);font-style:normal;text-shadow:0 0 36px rgba(55,215,255,.16)}
.hero-mark{overflow:hidden;background:radial-gradient(circle,rgba(20,121,255,.16),transparent 62%)}
.hero-mark img{opacity:.22;filter:drop-shadow(0 0 38px rgba(55,215,255,.32))}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem}
.hero-primary,.hero-secondary{display:inline-flex;min-height:3.25rem;align-items:center;justify-content:center;gap:1.2rem;padding:0 1.35rem;border:1px solid var(--accent);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.hero-primary{color:var(--brand-midnight);background:var(--accent);box-shadow:0 0 30px rgba(55,215,255,.18)}
.hero-primary:hover{background:var(--brand-ice)}
.hero-secondary{color:var(--paper);background:rgba(5,9,20,.48)}
.hero-secondary:hover{background:rgba(55,215,255,.08)}
.company{background:linear-gradient(145deg,rgba(13,25,43,.58),transparent)}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:3.2rem;padding:1px;background:var(--line)}
.service-grid article{display:flex;min-height:10rem;flex-direction:column;gap:.75rem;padding:1.5rem;background:var(--brand-surface)}
.service-grid strong{color:var(--paper);font-size:1rem}
.service-grid span{color:var(--muted);font-size:.88rem;line-height:1.65}
.product{background:var(--brand-accent)}
.product-body-recovery{background:var(--brand-accent-bright)}
.media-grid{box-shadow:0 28px 80px rgba(0,0,0,.32)}
@media(max-width:680px){
  .hero-actions{align-items:stretch;flex-direction:column}
  .hero-primary,.hero-secondary{width:100%}
  .service-grid{grid-template-columns:1fr}
}