/* Raemote site — one stylesheet, no JavaScript, no webfonts.
   Palette is lifted from the app icon: mark gradients #00C0E8 → #197295,
   mid #007EAE, surface #F1F1F1, and the interactive blue #3478f6 that the
   `raemote connect` web UI uses. Light and dark both ship here; the page
   declares `color-scheme: light dark` so form controls and scrollbars match. */

:root {
  color-scheme: light dark;

  --cyan: #00c0e8;
  --teal: #197295;
  --mid: #007eae;
  --accent: #3478f6;
  --accent-ink: #0b2f6b;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f2f5;
  --ink: #171a1f;
  --ink-soft: #4d5560;
  --ink-faint: #6d7683;
  --line: rgba(20, 25, 35, 0.12);
  --line-strong: rgba(20, 25, 35, 0.22);
  --code-bg: #f1f2f5;
  --shadow: 0 1px 2px rgba(16, 22, 32, 0.06), 0 8px 24px rgba(16, 22, 32, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --wrap: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116;
    --surface: #161b22;
    --surface-2: #1c232c;
    --ink: #e8ecf1;
    --ink-soft: #b3bcc7;
    --ink-faint: #8b95a1;
    --line: rgba(255, 255, 255, 0.14);
    --line-strong: rgba(255, 255, 255, 0.26);
    --code-bg: #10151c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    "Helvetica Neue", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

code, kbd, pre, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); font-weight: 680; margin-top: 0; }
h3 { font-size: 1.06rem; font-weight: 650; }
p { margin: 0 0 1rem; }

/* ---------- layout ---------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; }
section { padding: 56px 0; }
section + section { border-top: 1px solid var(--line); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 10px;
}
@media (prefers-color-scheme: dark) {
  .eyebrow { color: var(--cyan); }
}

.lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--ink-faint); font-size: 0.94rem; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- header ---------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand img { width: 26px; height: 26px; display: block; }

nav.links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.95rem;
}
nav.links a { color: var(--ink-soft); text-decoration: none; }
nav.links a:hover { color: var(--ink); text-decoration: underline; }

.lang {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.82rem;
}
.lang a {
  padding: 3px 10px;
  color: var(--ink-faint);
  text-decoration: none;
}
.lang a[aria-current="true"] {
  background: var(--accent);
  color: #fff;
}

@media (max-width: 620px) {
  nav.links .wide { display: none; }
  .bar { gap: 10px; }
}

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

.hero {
  padding: clamp(48px, 7vw, 92px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
  background:
    radial-gradient(60rem 26rem at 50% -12rem, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 70%),
    radial-gradient(46rem 22rem at 82% -14rem, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}

.hero .mark {
  width: 84px;
  height: 84px;
  display: block;
  margin: 0 auto 22px;
  filter: drop-shadow(0 6px 18px rgba(0, 122, 174, 0.28));
}

.hero h1 { max-width: 18ch; margin-inline: auto; }
.hero .lede { margin: 0 auto 26px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn.primary {
  background: linear-gradient(180deg, #2f8ff5, var(--accent));
  border-color: transparent;
  color: #fff;
}
.btn.primary:hover { filter: brightness(1.06); color: #fff; }
.btn img { display: block; height: 62px; width: auto; }
/* The TestFlight badge is a finished graphic — don't frame it. */
.btn.badge { border: 0; box-shadow: none; background: none; padding: 0; border-radius: 0; }
.btn.badge:hover { border-color: transparent; }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.pill {
  font-size: 0.86rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}

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

.steps {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: step;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; }
}

.steps > li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.steps > li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--cyan), var(--teal));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- feature grid ---------- */

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3 { margin-bottom: 6px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }
.card .tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.card ul { margin: 10px 0 0; padding-left: 1.15em; color: var(--ink-soft); font-size: 0.94rem; }
.card ul li { margin: 4px 0; }
.card ul li::marker { color: var(--ink-faint); }

/* "words we'll use once" */
.terms {
  display: grid;
  gap: 10px 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0;
}
.terms dt { font-weight: 650; }
.terms dd {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
@media (prefers-color-scheme: dark) {
  .card .tag { color: var(--cyan); }
}

/* ---------- code ---------- */

pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 14px;
}
pre code { background: none; padding: 0; font-size: inherit; }
p > code, li > code, td > code {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.88em;
}

.copy {
  position: relative;
}
.copy .copybtn {
  position: absolute;
  top: 8px;
  right: 8px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
}
.copy .copybtn:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- diagrams & figures ---------- */

figure { margin: 0; }
figure img { display: block; width: 100%; }
figcaption {
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin-top: 10px;
  text-align: center;
}

/* ---------- details ---------- */

details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0 16px;
}
details + details { margin-top: 10px; }
details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 12px 0;
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸ "; color: var(--accent); }
details[open] summary::before { content: "▾ "; }
details > :last-child { margin-bottom: 16px; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.94rem;
  min-width: 420px;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
th { font-weight: 650; color: var(--ink-soft); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- notices ---------- */

.note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 0.96rem;
}
.note.warn { border-left-color: #e5484d; }
.note.good { border-left-color: var(--teal); }
.note > :last-child { margin-bottom: 0; }
.note strong { font-weight: 650; }

/* ---------- honest list ---------- */

/* A hanging indent, not a grid: with `display: grid` an inline <a> or <code>
   inside the item becomes its own grid item and wraps into the marker
   column (a link renders one word per line). Absolute positioning keeps
   every inline element flowing as normal text. */
.notlist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.notlist li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
}
.notlist li + li { margin-top: 10px; }
.notlist li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0;
  color: #e5484d;
  font-weight: 700;
}
/* "not yet" — softer than the red ✕ of "never" */
.notlist-todo li::before { content: "○"; color: var(--ink-faint); }
.yeslist li::before { content: "✓"; color: var(--teal); }
@media (prefers-color-scheme: dark) {
  .yeslist li::before { color: var(--cyan); }
}

/* ---------- get-started specifics ---------- */

.step-block {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px;
  margin: 0 0 18px;
}
.step-block > h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.3rem;
}
.step-block > h2 .n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--cyan), var(--teal));
  color: #fff;
  font-size: 0.9rem;
  align-self: center;
}
.toc {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 28px;
}
.toc h2 { font-size: 1rem; margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin: 3px 0; }

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

footer.site {
  border-top: 1px solid var(--line);
  padding: 40px 0 52px;
  color: var(--ink-soft);
  font-size: 0.94rem;
}
footer .cols {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 26px;
}
footer h3 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin: 5px 0; }
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .base {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

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

@media print {
  header.site, .actions, .lang { display: none; }
  body { background: #fff; }
}