/*
 * site.css — the product page.
 *
 * Everything visual comes from tokens.css / components.css: the same 4pt grid,
 * the same palette, the same card and control shapes the app ships. This file
 * only adds the page's own layout and a display type size.
 *
 * Deliberately absent: gradients, glows, drop-shadow flourishes, 3D. The app's
 * language is restraint — one accent per view, hairlines instead of borders,
 * whitespace doing the separating. A marketing page that broke those rules
 * would be advertising a design it does not have.
 */

:root {
  /* One display size above the app's 26pt page title, same family and discipline. */
  --font-display: 700 clamp(40px, 5.2vw, 68px) var(--rx-font-ui);
  --font-section: 700 clamp(26px, 2.6vw, 34px) var(--rx-font-ui);
  --site-max: 1180px;
  --site-gutter: clamp(20px, 4vw, 48px);
  --site-section-gap: clamp(72px, 9vw, 132px);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: var(--font-body);
  color: var(--rx-ink);
  background: var(--rx-window);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

* { box-sizing: border-box; }

a { color: inherit; }

code.rx-code {
  font: var(--font-code);
  background: var(--rx-surface-sunken);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--rx-ink-secondary);
}

::selection { background: var(--rx-accent-fill); }

/* ---------------------------------------------------------------- nav */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 60px;
  padding: 0 var(--site-gutter);
  background: color-mix(in srgb, var(--rx-window) 82%, transparent);
  backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--rx-hairline);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}

.site-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-lg);
  background: var(--rx-accent-fill);
  color: var(--rx-accent);
}
.site-mark svg { width: 18px; height: 18px; }

.site-nav__name {
  font: 700 16px var(--rx-font-ui);
  letter-spacing: -0.01em;
}
.site-nav__tld { color: var(--rx-ink-tertiary); font-weight: 500; }

.site-nav__links {
  display: flex;
  gap: var(--space-5);
  margin-left: var(--space-4);
}
.site-nav__links a {
  font: var(--font-body);
  color: var(--rx-ink-secondary);
  text-decoration: none;
  transition: color var(--rx-quick);
}
.site-nav__links a:hover { color: var(--rx-ink); }

.site-nav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------------------------------------------------------------- hero */

.hero {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--site-gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero__eyebrow { display: block; margin-bottom: var(--space-4); }

.hero__title {
  font: var(--font-display);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 var(--space-4);
  color: var(--rx-ink);
}

.hero__lead {
  font: 400 16px/1.6 var(--rx-font-ui);
  color: var(--rx-ink-secondary);
  margin: 0 0 var(--space-5);
  max-width: 46ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.hero__shot { min-width: 0; }

.hero__caption {
  display: block;
  margin-top: var(--space-3);
  text-align: center;
}

/* ---------------------------------------------------- the app window */

/*
 * The product shot is the product. The frame, the sidebar rows and the cards
 * below are the app's own classes, so this cannot drift from the real UI.
 */
.app-window {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--rx-window);
  border: 0.5px solid var(--rx-hairline);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.dark .app-window { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3); }

.app-window__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--rx-window) 90%, var(--rx-surface));
  border-bottom: 0.5px solid var(--rx-hairline);
}
.app-window__title {
  margin-left: var(--space-2);
  font: var(--font-axis);
  color: var(--rx-ink-tertiary);
}

/*
 * The frame is as tall as its content, capped so the hero stays in view. The cap
 * fades the last few millimetres instead of cutting a card on its border — it
 * reads as "there is more below", which is true, not as a clipping bug.
 */
.app-window__body {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  max-height: 520px;
  background: var(--rx-window);
}

.app-window__sidebar {
  border-right: 0.5px solid var(--rx-hairline);
  padding: var(--space-2) var(--space-2);
  gap: 2px;
  background: transparent;
  -webkit-app-region: no-drag;
}
.app-window__sidebar .rx-sidebar__row { height: 30px; font-size: 13px; }
.app-window__sidebar .rx-sidebar__row > svg { width: 15px; height: 15px; }
.app-window__sidebar .rx-sidebar__section { padding: var(--space-2) var(--space-2) 2px; }

.app-window__content {
  overflow: hidden;
  padding: 0;
  /* Fade the bottom so the cap reads as a viewport, not a crop. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
}

/*
 * The embedded dashboard. The app's monitor grid is built for a full window; in a
 * 660px frame its two columns squeeze every card. Below, the grid becomes one
 * column and the type steps down — the same information, at the size this frame
 * can actually hold.
 */
.app-window__content .rx-page {
  padding: var(--space-3);
  gap: var(--space-3);
  max-width: none;
}
.app-window__content .rx-monitor {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.app-window__content .rx-monitor__column { gap: var(--space-3); min-width: 0; }

.app-window__content .rx-card {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  min-width: 0;
}

/* Metric scale: 24pt is right for a card at full width, too big at half. */
.app-window__content .rx-metric__value { font-size: 20px; }
.app-window__content .rx-metric__unit { font-size: 11px; }

/* Three sub-metrics in a half-width card cannot hold their labels; let them wrap. */
.app-window__content .rx-submetrics {
  margin-top: var(--space-2);
  gap: var(--space-2);
  flex-wrap: wrap;
}
.app-window__content .rx-submetrics > * {
  flex: 1 1 72px;
  min-width: 0;
}
.app-window__content .rx-submetrics > * + * {
  padding-left: var(--space-2);
  border-left: 1px solid var(--rx-hairline);
}
.app-window__content .rx-caps-label {
  font-size: 10px;
  letter-spacing: 0.3px;
}
.app-window__content .rx-label-metric__value .rx-metric__value { font-size: 13px; }
.app-window__content .rx-label-metric__value .rx-metric__unit { font-size: 10px; }

/* The "2 / 916 running" unit is the widest thing in the Load card. */
.app-window__content .rx-label-metric__value > span:last-child { white-space: normal; }

.app-window__content .rx-usage-row__list { gap: var(--space-2); }
.app-window__content .rx-usage-row__name { font-size: 10px; }
.app-window__content .rx-usage-row__value,
.app-window__content .rx-usage-row__detail { font-size: 10px; }

.app-window__content .rx-card--throughput { min-height: 118px; }
.app-window__content .rx-card--throughput .rx-card-head { padding: var(--space-3) var(--space-3) 0; }
.app-window__content .rx-card--throughput .rx-metric { padding: var(--space-1) var(--space-3) 0; }
.app-window__content .rx-card--throughput .rx-sparkline { height: 40px; }

.app-window__content .rx-core-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-window__content .rx-gpu-row { gap: 4px; }

/* Nothing inside the frame may push the frame wider than it is. */
.app-window__content,
.app-window__content * { min-width: 0; }
.app-window__content .rx-card-head { min-height: 20px; }
.app-window__content .rx-card-head .rx-caps-label { overflow: hidden; text-overflow: ellipsis; }
.app-window__content .rx-hint-text { font-size: 9px; }
.app-window__content .rx-legend-item { font-size: 10px; }
.app-window__content .rx-row-3 { gap: var(--space-2); }
.app-window__content .rx-facts { gap: var(--space-2) var(--space-4); }
.app-window__content .rx-fact__value { font-size: 11px; }
.app-window__content .rx-fact__value--mono { font-size: 10px; }

/* ---------------------------------------------------------------- facts */

.facts {
  max-width: var(--site-max);
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: 0 var(--site-gutter);
}
.facts .rx-facts {
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-top: 0.5px solid var(--rx-hairline);
  border-bottom: 0.5px solid var(--rx-hairline);
  gap: var(--space-4);
}
.facts .rx-fact__value { font: var(--font-body-strong); }

/* ---------------------------------------------------------------- sections */

.section {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--site-section-gap) var(--site-gutter) 0;
}

.section--sunken {
  max-width: none;
  margin-top: var(--site-section-gap);
  padding: var(--site-section-gap) 0;
  background: var(--rx-surface-sunken);
  border-top: 0.5px solid var(--rx-hairline);
  border-bottom: 0.5px solid var(--rx-hairline);
}
.section--sunken > * {
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
}

.section__head { max-width: 62ch; margin-bottom: var(--space-6); }
.section__head .rx-caps-label { display: block; margin-bottom: var(--space-3); }

.section__title {
  font: var(--font-section);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.section__lead {
  font: 400 15px/1.65 var(--rx-font-ui);
  color: var(--rx-ink-secondary);
  margin: 0;
}

/* ---------------------------------------------------------------- features */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.feature { display: flex; flex-direction: column; gap: var(--space-3); }
.feature__icon { width: 34px; height: 34px; border-radius: var(--radius-lg); }
.feature__icon svg { width: 17px; height: 17px; }

.feature__title {
  font: 600 15px var(--rx-font-ui);
  margin: 0;
  color: var(--rx-ink);
}

.feature__body {
  font: 400 13px/1.6 var(--rx-font-ui);
  color: var(--rx-ink-secondary);
  margin: 0;
}

/* ---------------------------------------------------------------- monitor */

/*
 * The section header is centred and narrow so it reads as a caption above the
 * pair of cards, rather than a left column with a void beside it.
 */
.monitor-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

#monitor .section__head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 62ch;
}
#monitor .section__head .rx-caps-label { margin-bottom: var(--space-3); }

/*
 * "One probe, every number" must not break after "every": a two-line heading
 * with one orphan word is the difference between set type and typed text.
 */
#monitor .section__title { white-space: nowrap; }

@media (max-width: 640px) {
  #monitor .section__title { white-space: normal; }
}

.monitor-detail__title {
  font: 600 15px var(--rx-font-ui);
  margin: 0 0 var(--space-2);
}

.monitor-detail__list > * + * { border-top: 1px solid var(--rx-hairline); }

.monitor-detail__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.monitor-detail__row .rx-help-text { line-height: 1.55; }

.monitor-detail__cards { display: flex; flex-direction: column; gap: var(--space-4); }

.monitor-note { display: flex; flex-direction: column; gap: var(--space-3); }
.monitor-note__body {
  font: 400 13px/1.6 var(--rx-font-ui);
  color: var(--rx-ink-secondary);
  margin: 0;
}

/* ---------------------------------------------------------------- install */

.install {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  /* Two cards side by side read as a pair only when they are the same height. */
  align-items: stretch;
}

.install__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  height: 100%;
}
.install__title { font: 600 17px var(--rx-font-ui); margin: 0; }
.install__body { margin: 0; line-height: 1.6; }
.install__card .rx-button { margin-top: auto; }

/*
 * The code block sits at the card's bottom edge, so it must reach that edge
 * itself: no margin, and the padding is what keeps the last line off the border.
 */
.install__code {
  margin: auto 0 0;
  width: 100%;
  padding: var(--space-3);
  font-size: 11.5px;
  line-height: 1.7;
  border-radius: var(--radius-md);
  background: var(--rx-terminal-bg);
  color: var(--rx-terminal-fg);
  overflow-x: auto;
}
.install__code code { font: inherit; }

.install__requirement {
  display: block;
  margin-top: var(--space-4);
  text-align: center;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: var(--site-section-gap);
  padding: var(--space-6) var(--site-gutter) var(--space-6);
  border-top: 0.5px solid var(--rx-hairline);
}

.site-footer__inner {
  max-width: var(--site-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.site-footer__brand { display: flex; flex-direction: column; gap: 2px; }

.site-footer__links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.site-footer__links a {
  font: var(--font-body);
  color: var(--rx-ink-secondary);
  text-decoration: none;
  transition: color var(--rx-quick);
}
.site-footer__links a:hover { color: var(--rx-ink); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__lead { max-width: none; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-detail { grid-template-columns: minmax(0, 1fr); }
  .monitor-detail__cards { flex-direction: row; }
}

@media (max-width: 820px) {
  .site-nav__links { display: none; }
  .app-window__body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .app-window__sidebar { display: none; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .install { grid-template-columns: minmax(0, 1fr); }
  .monitor-detail__cards { flex-direction: column; }
  .facts .rx-facts { justify-content: flex-start; }
  .site-footer__links { margin-left: 0; }
}

/* The monitor grid stacks below 1040px (monitor.css); inside the shot it should
   stay two columns for as long as the frame allows. */
.app-window__content .rx-monitor { grid-template-columns: 1fr 1fr; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rx-rise, .rx-toast { animation: none; }
}