/* The website: the landing page, its supporting pages and the legal pages.
 * Reads the tokens from tokens.css and defines none of its own.
 */

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--text-strong);
  line-height: 1.15;
  letter-spacing: -.028em;
  margin: 0;
}

p { margin: 0; }

a { color: var(--text); text-decoration-color: var(--muted-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--action); }

ul, ol { margin: 0; padding: 0; list-style: none; }

.mono {
  font-family: var(--mono);
  font-feature-settings: 'tnum' 1;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 24px;
}

.shell--narrow { max-width: 780px; }

.shell--split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 48px;
  align-items: start;
}

/* ---------- topbar ---------- */

.topbar {
  border-bottom: 1px solid var(--border-soft);
  padding-block: 18px;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar__actions { display: flex; align-items: center; gap: 20px; }

.topbar__link { font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration-color: transparent; }
.topbar__link:hover { text-decoration-color: var(--action); }

/* The lockup: the banked attitude indicator, then the word. The mark is
   `favicon.svg` without its tile and with the ring in ink rather than white —
   same geometry, two colourways, kept in step by hand. The type stays one
   colour and one weight: the mark is what makes the name recognisable. */

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

.hero-section { padding-block: 76px 0; }

.hero {
  max-width: 840px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.callout {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__title {
  font-size: clamp(38px, 6.2vw, 60px);
  letter-spacing: -.042em;
}

.hero__lede {
  max-width: 680px;
  color: var(--muted);
  font-size: 18.5px;
}

/* The one dark sentence in the paragraph. It is the hook, and it opens the
   lede rather than standing over the h1 as an eyebrow — the h1 carries what
   the product is, in the words people search for. */
.hero__lede strong { color: var(--text-strong); font-weight: 600; }

.hero__lede .mono { font-size: 17px; color: var(--text); }

/* ---------- the call to action ---------- */

.cta { width: 100%; max-width: 560px; margin-top: 8px; }

.cta__form { display: flex; gap: 10px; }

.cta__form input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  padding: 14px 16px;
}

.cta__form input::placeholder { color: var(--muted); }
.cta__form input:focus { border-color: var(--muted); }

.cta__note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- the product mock: the fleet table ---------- */
/* The summary line reports what the rows below it actually contain. Eight
   rows, three reboot chips, one out-of-support row, and the security counts
   add up to 23. Change a row and the summary changes with it — a page arguing
   that you cannot trust a number you have not seen cannot fake its own. */

.panel {
  margin: 64px 0 0;
  box-shadow: var(--shadow);
}


.panel__mark {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.045em;
  color: var(--text-strong);
}

.panel__crumb {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
}



.fleet { display: flex; flex-direction: column; }

.srv {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .95fr) 116px 104px;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--border-soft);
}

.srv:last-child { border-bottom: 0; }

/* The column titles. Not headings — this is content inside a product mock,
   and promoting it to an h3 would put the demo data in the page outline. */
.srv--head {
  padding-block: 9px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The whole argument of the mock, and the only row that gets a colour of its
   own: a machine on a release that stopped receiving updates. */
.srv--alert { background: var(--tint-alert-row); }
.srv--alert .srv__host { color: var(--alert); }

.srv__host {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.srv__rel {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.srv__pending { font-family: var(--mono); font-size: 11.5px; color: var(--text); }
.srv__pending em { font-style: normal; color: var(--warn); }
.srv__pending.is-clear { color: var(--muted); }

.srv__when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}


.ghost { color: var(--muted); border-bottom: 1px dotted var(--border); }

.srv__flag { display: flex; flex-wrap: wrap; gap: 5px; }

.srv__none { font-size: 11.5px; color: var(--muted); }

/* The column titles are one uniform row whatever layout class a cell carries:
   `Release` needs `.srv__rel` so it disappears with the column it names, and
   `Last upgrade` needs `.srv__when` to stay right-aligned over its numbers. */
.srv--head span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- bands ---------- */

.band { padding-block: 88px; border-top: 1px solid var(--border-soft); }
.band--alt { background: var(--surface-2); }

.band h2 { font-size: clamp(27px, 3.4vw, 36px); }

.band__sub { margin-top: 12px; color: var(--muted); max-width: 640px; }
.band__note { margin-top: 32px; color: var(--muted); font-size: 15.5px; max-width: 700px; }
.band p + p { margin-top: 14px; }

.hero-section + .band { margin-top: 88px; }

/* ---------- steps ---------- */

.steps {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.step__no { color: var(--action); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.step h3 { margin: 12px 0 10px; font-size: 19px; }
.step p { color: var(--muted); font-size: 15.5px; }

/* ---------- tiles ---------- */

.grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.tile--flat { background: transparent; border-color: var(--border); }
.band--alt .tile--flat { border-color: var(--border); }
.tile h3 { font-size: 17px; margin-bottom: 10px; }
.tile p { color: var(--muted); font-size: 15px; }
.tile .mono { font-size: 13px; color: var(--text); }

/* ---------- the watched list (support windows, alert triggers) ---------- */

.watched {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  border-left: 1px solid var(--border);
  padding-left: 24px;
}

.watched strong { display: block; color: var(--text); font-weight: 600; }
.watched span { font-size: 12px; color: var(--muted); }

.shell--split p { color: var(--muted); }

/* ---------- faq ---------- */

.qa { padding-block: 26px; border-bottom: 1px solid var(--border); }
.qa:first-of-type { border-top: 1px solid var(--border); margin-top: 36px; }
.qa h3 { font-size: 18px; margin-bottom: 10px; }
.qa p { color: var(--muted); font-size: 16px; }
.qa .mono { font-size: 15px; color: var(--text); }

/* ---------- closer ---------- */

.closer-section {
  padding-block: 96px;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 70%);
}

.closer {
  max-width: 740px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.closer h2 { font-size: clamp(27px, 3.6vw, 38px); }
.closer__sub { color: var(--muted); }

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

.foot {
  border-top: 1px solid var(--border);
  padding-block: 28px;
  font-size: 14px;
  color: var(--muted);
}

.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.foot a { color: var(--muted); }
.foot__line { margin-right: auto; }

/* ---------- legal pages ---------- */
/* `.doc` is its own thing, not a borrowed page class: these are columns of
   prose with no product mock, no table and no call to action anywhere on
   them. */

.doc { padding-block: 64px 88px; }
.doc .head { max-width: 720px; }
.doc h2 { font-size: clamp(28px, 4vw, 38px); }
.doc .head__sub { margin-top: 14px; color: var(--muted); }

.doc__body {
  max-width: 720px;
  margin-top: 40px;
  color: var(--muted);
  font-size: 16px;
}

.doc__body h3 {
  font-size: 18px;
  margin: 36px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.doc__body h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc__body p + p { margin-top: 14px; }
.doc__body strong, .doc__body em { color: var(--text); }
.doc__body .mono { color: var(--text); font-size: 15px; }

/* ---------- guide pages ---------- */
/* `.guide` is a page type of its own: an article that answers one search
   question completely, with commands to copy, and ends at the page's one
   call to action (the `.closer-section`, which is that same CTA, not a
   look-alike). Not `.doc` — legal prose carries no CTA — and not `.band`,
   whose sections are selling, not explaining. See
   `docs/adr/0023-supporting-pages-answer-one-search-question.md`. */

.guide { padding-block: 64px 72px; }
.guide__head, .guide__body { max-width: 760px; }

.guide__crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.guide__crumb a { color: var(--muted); }

.guide h1 { font-size: clamp(32px, 4.6vw, 46px); }
.guide__lede { margin-top: 18px; font-size: 19px; color: var(--muted); }
.guide__lede strong { color: var(--text-strong); font-weight: 600; }

.guide__body { margin-top: 44px; }
.guide__body > * + * { margin-top: 16px; }

.guide__body h2 {
  font-size: clamp(23px, 2.8vw, 28px);
  margin-top: 52px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.guide__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.guide__body h3 { font-size: 18px; margin-top: 28px; }
.guide__body strong { color: var(--text-strong); font-weight: 600; }

.guide__body code {
  font-family: var(--mono);
  font-size: .86em;
  color: var(--text-strong);
}

.guide__list { padding-left: 22px; list-style: disc; }
.guide__list li + li { margin-top: 8px; }

.cmd {
  margin-inline: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-strong);
}

.cmd code { font-size: inherit; }

/* The point in the article where the product enters. A rule and a heading's
   weight, never `--action`: the article has one CTA and it is at the end. */
.guide__aside {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.guide__aside h2:first-child { font-size: 20px; }
.guide__aside p { color: var(--muted); }
.guide__aside > * + * { margin-top: 12px; }

.versus-wrap { overflow-x: auto; }

.versus {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.versus th, .versus td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.versus thead th { font-size: 13px; color: var(--muted); font-weight: 600; }
.versus tbody th { color: var(--text-strong); font-weight: 600; width: 26%; }
.versus td { color: var(--text); }

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

@media (max-width: 1000px) {
  /* The release column is the first thing the table loses: the hostname, what
     is pending and the flag are what the row is for. */
  .srv { grid-template-columns: 7px minmax(0, 1fr) minmax(0, 1fr) 116px 100px; }
  .srv__rel { display: none; }
}

@media (max-width: 900px) {
  .steps, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell--split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .watched { border-left: 0; padding-left: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero-section { padding-block: 52px 0; }
  .band { padding-block: 64px; }
  .hero-section + .band { margin-top: 64px; }
  .steps, .grid, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .cta__form { flex-direction: column; }
  .btn--lg { width: 100%; }
  .panel { margin-top: 44px; }

  /* The table becomes a stack of rows: hostname on one line, then what is
     pending and the flag under it. The column titles stop meaning anything
     once the columns are gone, so they go. */
  .srv { grid-template-columns: 7px minmax(0, 1fr); gap: 4px 12px; padding-inline: 16px; }
  .srv--head { display: none; }
  .srv__rel { display: block; grid-column: 2; }
  .srv__pending, .srv__flag, .srv__when { grid-column: 2; }
  /* An em dash under a column title that is no longer on screen means
     nothing. The chips still say what they say. */
  .srv__none { display: none; }
  .srv__when { text-align: left; }
  .panel__status { padding: 16px; gap: 12px 24px; }
  .panel__head, .panel__foot { padding-inline: 16px; }
  .panel__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 379px) {
  /* The wordmark, "Sign in" and "Get started" need 362px. Below that the
     top bar's "Get started" goes: it only leads to the page's own form,
     which on the home page is already in view. */
  .topbar .btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}