:root {
  /* Document palette (per brand-system.md §1.2) */
  --ceiling: #e8e1cf;
  --ceiling-dark: #d5cbb6;
  --desk: #f3ede0;
  --desk-shadow: #d8cdb7;
  --wall: #95b49c;
  --wall-mid: #8dab95;
  --wall-base: #65826f;
  --page-ink: #2c3a2f;
  --page-ink-soft: #4a5c4e;
  --phosphor: #5df287;
  --amber: #e8b86b;

  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100vh;
  background: var(--desk);
  color: var(--page-ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 28px 80px;
}

/* --- header --- */
.header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 56px;
}
.mark {
  width: 40px; height: 40px;
  background: var(--page-ink);
  color: var(--desk);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wordmark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  font-variant: small-caps;
  color: var(--page-ink);
}
.nav-back {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--page-ink-soft);
  text-transform: uppercase;
  text-decoration: none;
}
.nav-back:hover { color: var(--page-ink); }

/* --- meta / labels --- */
.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--page-ink-soft);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* --- headlines --- */
h1.display {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
p.lead {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--page-ink);
  margin-bottom: 40px;
  max-width: 520px;
}

/* --- device picker grid --- */
.devices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ceiling-dark);
  border: 1px solid var(--ceiling-dark);
}
@media (max-width: 640px) {
  .devices { grid-template-columns: repeat(2, 1fr); }
}
.device {
  background: var(--desk);
  padding: 32px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--page-ink);
  transition: background .15s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}
.device:hover { background: var(--desk-shadow); }
.device-icon { width: 48px; height: 48px; }
.device-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* --- walkthrough steps --- */
.steps { margin-top: 8px; }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--ceiling-dark);
}
.step:last-child { border-bottom: 1px solid var(--ceiling-dark); }
.step-number {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 18px;
  color: var(--wall);
  letter-spacing: 0.02em;
}
.step-body h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--page-ink);
  margin-bottom: 10px;
}
.step-body p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--page-ink);
  margin-bottom: 14px;
}
.step-body img {
  max-width: 100%;
  border: 1px solid var(--ceiling-dark);
  display: block;
  margin-top: 6px;
}
.step-body code {
  background: var(--ceiling);
  border: 1px solid var(--ceiling-dark);
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--page-ink);
  user-select: all;
}
.step-body .copy-url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ceiling);
  border: 1px solid var(--ceiling-dark);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  user-select: all;
}

/* --- footer --- */
.footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--ceiling-dark);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--page-ink-soft);
  text-transform: uppercase;
  line-height: 1.6;
}
.footer a { color: var(--page-ink); text-decoration: none; border-bottom: 1px solid var(--ceiling-dark); }
.footer a:hover { border-bottom-color: var(--page-ink); }

/* --- end-of-page escalation --- */
.escalation {
  margin-top: 48px;
  padding: 28px;
  background: var(--ceiling);
  border: 1px solid var(--ceiling-dark);
}
.escalation h3 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-ink-soft);
  margin-bottom: 10px;
}
.escalation p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--page-ink);
}
.escalation a {
  color: var(--page-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wall);
}