/* NomadX visual identity: black, white, and the website's cyan accent. */
:root {
  --ink: #f3f7f8;
  --muted: #a3b6bf;
  --line: #29404a;
  --blue: #39b8dc;
  --navy: #000;
  --bg: #050b0e;
  --aqua: #39b8dc;
  --panel: #0c171c;
  --field: #071014;
  font-family: Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

::selection { background: #39b8dc; color: #000; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus, select:focus, textarea:focus { outline-color: var(--aqua); }
input, select, textarea { background: var(--field); border-color: #40555e; border-radius: 4px; }
input, .money, .metrics strong, .recommended-price strong, .roi-metrics strong { font-variant-numeric: tabular-nums; }
input::placeholder, textarea::placeholder { color: #92a8b2; opacity: 1; }
input:disabled { opacity: .55; }

.topbar { height: 98px; background: #000; border-bottom: 1px solid var(--line); }
.brand { gap: 24px; letter-spacing: 0; }
.brand-logo { display: block; width: 244px; height: auto; }
.brand-product { padding-left: 24px; border-left: 1px solid #425259; font-size: 1.1rem; font-weight: 400; }
.brand small { color: var(--muted); font-size: .58rem; letter-spacing: 1.7px; margin-top: 7px; }
.source-tag { color: var(--muted); }
.source-tag span { border-color: var(--line); border-radius: 2px; color: var(--ink); }
main { padding-top: 44px; }
h1 { font-weight: 400; font-size: clamp(2rem, 3.1vw, 3rem); letter-spacing: -1.3px; line-height: 1.12; margin-bottom: 15px; }
h2, h3, .panel-title h2 { font-weight: 500; }
.page-heading { margin-bottom: 32px; }
.eyebrow, .mini-label, .local-label, .source-tag, .brand small, th {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-weight: 400;
}
.eyebrow { color: var(--aqua); letter-spacing: 2px; margin-bottom: 15px !important; }
.text-link, .text-button { color: var(--aqua); }
.text-link:hover, .text-button:hover { color: #a3e8fb; }

.scenario-panel, .ask-panel, .roi-panel, .view-toolbar,
.concentration-results, .table-wrap, .metrics { background: var(--panel); border-radius: 5px; }
.scenario-panel { scrollbar-color: #3d5864 var(--panel); scrollbar-width: thin; }
.scenario-panel label, legend, .view-toggle, .roi-inputs label { font-weight: 500; }
.services small, .model-footnote .mini-label { color: var(--muted); }
.assumptions summary { color: var(--ink); }
.view-toolbar { background: #080f12; }
.view-toggle input {
  appearance: none;
  width: 34px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid #6a828c;
  border-radius: 20px;
  background: #30434b;
  position: relative;
  cursor: pointer;
}
.view-toggle input::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: white;
}
.view-toggle input:checked { background: var(--aqua); border-color: var(--aqua); }
.view-toggle input:checked::before { transform: translateX(14px); background: #000; }
.primary, .ask-submit { background: var(--aqua); color: #001218; border-radius: 4px; }
.primary:hover, .ask-submit:hover { background: #7cddf7; }
.secondary { background: var(--field); border-color: #48626e; border-radius: 4px; }
.secondary:hover { border-color: var(--aqua); }
.ask-icon { background: #12323e; color: var(--aqua); border-radius: 4px; }
.local-label { color: var(--muted); border-radius: 2px; }
.prompt-input textarea { background: var(--field); border-color: #40555e; }
.prompt-input textarea::placeholder { color: #92a8b2; }
.examples button { background: transparent; color: #bed0d8; border-radius: 3px; }
.examples button:hover { background: #12323e; border-color: var(--aqua); color: white; }
.answer .interpretation { background: #142a34; color: #c2d7e0; border-radius: 3px; }
.error { background: #341d1b; border-color: #ad6756; color: #ffd0c0; }
.scenario-chip { color: #bfdae5; background: #142a34; border-radius: 3px; }
.concentration-results { border-left: 2px solid var(--aqua); }

.recommendation { background: #06232d; border: 1px solid #28748a; border-top: 3px solid var(--aqua); border-radius: 5px 5px 0 0; }
.recommendation h3 { font-weight: 400; }
.recommendation p, .recommended-price span { color: #b4ccd6; }
.recommended-price strong { color: #6bd4f1; font-weight: 400; }
.metrics { border-radius: 0 0 5px 5px; }
.metrics strong { font-weight: 500; }
th, .detail-table tfoot td { background: #101f26; }
th { color: #b1c6cf; }
td { border-top-color: var(--line); }
.provider-row.recommended { background: #0b2934; }
.provider-row.indicative { color: #a3b6bf; }
.provider-badge { color: #6bd4f1; }
.provider-badge.indicative { color: #ebc17a; }
.bar-track { background: #253d48; }
.bar { background: #56889a; }
.recommended .bar { background: var(--aqua); }
.notes-panel { background: #101f26; color: #b9cbd3; border-radius: 5px; }
.source-section td:last-child { color: #a3b6bf; }
.source-ref { color: #6bd4f1; }
.roi-panel .eyebrow { color: var(--aqua); }
.roi-metrics > div { background: #14252e; border-radius: 4px; }
.roi-metrics strong { font-weight: 500; }
.roi-metrics .roi-net { background: #10333b; border: 1px solid #2c6b79; }
.roi-net strong { color: #7ee1d8; }
.roi-net strong.negative { color: #ffbda3; }
footer { color: var(--muted); }
.footer-divider { color: #516c78; }

@media (max-width: 760px) {
  .topbar { height: 84px; }
  .brand { gap: 15px; }
  .brand-logo { width: 180px; }
  .brand-product { padding-left: 15px; font-size: .95rem; }
  .brand small { font-size: .5rem; letter-spacing: 1px; }
  .source-tag { display: none; }
  main { padding-top: 30px; }
}
@media (max-width: 360px) {
  .brand-logo { width: 150px; }
  .brand { gap: 10px; }
  .brand-product { padding-left: 10px; }
}