/*
 * telemotely.com
 *
 * Every colour here is one of the icon's five (tools/icon.py) or is mixed from them, and
 * says which. The icon, the Android vector drawables and the Apple asset catalog are
 * generated from that one file; a site with a blue of its own would be a fourth copy that
 * nobody keeps in step.
 *
 * #2563EB (ACCENT) is kept off the navy on purpose. icon.py records that it washed out
 * against a dark tile, which is why the tiled icon uses #5B9CFF; the same holds here.
 */
/* Archivo, served from here rather than from Google, so a visit tells nobody else about
   the visitor. Variable in weight and width; SIL Open Font License, beside it. */
@font-face {
  font-family: "Archivo";
  src: url("archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 100% 125%;
  font-display: swap;
}

:root {
  /* The icon, verbatim. */
  --navy: #0D1B3E;          /* NAVY: the ground */
  --outline: #17356E;       /* OUTLINE: panels and cards */
  --tile: #5B9CFF;          /* TILED_ACCENT: anything that must read on the dark */
  --accent: #2563EB;        /* ACCENT: only on the light reading surface */
  --screen: #EEF3FF;        /* SCREEN: text, and the light reading surface */

  /* Derived, each from the icon. */
  --ground-deep: color-mix(in srgb, var(--navy) 78%, #000);     /* navy, darker: sections that recede */
  --panel: color-mix(in srgb, var(--outline) 55%, var(--navy)); /* between the two: raised surfaces */
  --line: color-mix(in srgb, var(--outline) 80%, var(--navy));  /* hairlines */
  --muted: color-mix(in srgb, var(--screen) 72%, var(--navy));  /* secondary text: 8:1 on navy */
  --faint: color-mix(in srgb, var(--screen) 52%, var(--navy));  /* captions */
  --tile-soft: color-mix(in srgb, var(--tile) 22%, var(--navy));/* the session band, a selected step */

  /* Gradients, each from the icon's colours. The page deepens from NAVY as it goes down;
     the one bright thing is a glow of TILED_ACCENT behind the opening, fading to nothing
     well before any text, so contrast is set by the navy underneath, not the glow. */
  --glow: radial-gradient(900px 520px at 78% -8%, color-mix(in srgb, var(--tile) 20%, transparent), transparent 70%),
          radial-gradient(700px 420px at 8% 12%, color-mix(in srgb, var(--outline) 55%, transparent), transparent 70%);
  --page-fall: linear-gradient(180deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 88%, #000) 100%);
  --band-fall: linear-gradient(180deg, var(--ground-deep) 0%, color-mix(in srgb, var(--outline) 22%, var(--ground-deep)) 100%);
  --panel-fall: linear-gradient(180deg, color-mix(in srgb, var(--outline) 45%, var(--ground-deep)) 0%, var(--ground-deep) 100%);

  /* The apps' own status colours (desktop ui/devices.rs), not the icon's. */
  --online: #2EA043;
  --busy: #D29922;
  /* The watching notice (desktop banner.rs): fill, edge and text. */
  --notice: #9E2A22;
  --notice-edge: #DC6052;
  --notice-text: #FFEEEA;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --measure: 66ch;
  --radius: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--navy);
  background-image: var(--page-fall);
  color: var(--screen);
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tile); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tile); outline-offset: 3px; border-radius: 4px; }
code, .mono { font-family: var(--mono); font-size: .92em; }

.page { padding-inline: 20px; }
.inner { max-width: 1120px; margin-inline: auto; }
.narrow { max-width: 720px; margin-inline: auto; }

/* ---- header and footer -------------------------------------------------- */
.site-head { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--navy) 92%, transparent); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; backdrop-filter: blur(8px); }
.site-head .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--screen); font: 700 19px/1 var(--display); font-stretch: 112%; letter-spacing: -.01em; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.site-nav { display: flex; gap: 6px 20px; flex-wrap: wrap; font-size: 14.5px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--screen); }
.site-foot { border-top: 1px solid var(--line); background: var(--ground-deep); color: var(--faint); font-size: 14px; }
.site-foot .inner { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; padding-block: 28px 40px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-foot a { color: var(--muted); text-decoration: none; }

/* ---- type ---------------------------------------------------------------- */
.eyebrow { font: 600 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tile); }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
h1 { font-weight: 800; font-stretch: 118%; font-size: clamp(34px, 5.6vw, 60px); line-height: 1.02; letter-spacing: -.02em; }
h1 em { font-style: normal; color: var(--tile); }
h2 { font-weight: 800; font-stretch: 112%; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.08; letter-spacing: -.015em; }
h3 { font-weight: 700; font-stretch: 108%; font-size: 19px; line-height: 1.25; }
.lead { font-size: clamp(17px, 1.9vw, 19px); color: var(--muted); max-width: var(--measure); margin: 0; }
p { max-width: var(--measure); }
.caption { font: 12.5px/1.45 var(--mono); color: var(--faint); }

/* ---- sections ------------------------------------------------------------ */
section.band { padding-block: clamp(56px, 8vw, 96px); }
section.band.deep { background: var(--ground-deep); background-image: var(--band-fall); border-block: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; margin-bottom: 36px; }

/* ---- buttons ------------------------------------------------------------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 9px; font: 600 15px/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--tile); background-image: linear-gradient(180deg, color-mix(in srgb, var(--tile) 82%, var(--screen)), var(--tile)); color: var(--navy); }
.btn-primary:hover { background-image: linear-gradient(180deg, color-mix(in srgb, var(--tile) 70%, var(--screen)), color-mix(in srgb, var(--tile) 88%, var(--screen))); }
.btn-ghost { border-color: var(--outline); color: var(--screen); background: transparent; }
.btn-ghost:hover { border-color: var(--tile); }
.btn[disabled] { opacity: .55; cursor: default; }

/* ---- hero ------------------------------------------------------------------ */
.hero { padding-block: clamp(48px, 8vw, 88px) clamp(40px, 6vw, 72px); background-image: var(--glow); }
.hero .inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .hero .inner { grid-template-columns: 1fr; } }
.hero-copy { display: grid; gap: 22px; }

/* The per-core bars: the telemetry itself as the opening image. */
.instrument { border: 1px solid var(--outline); border-radius: var(--radius); background: var(--ground-deep); background-image: var(--panel-fall); padding: 16px; display: grid; gap: 10px; }
.instrument-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 12px/1.3 var(--mono); color: var(--faint); }
.instrument-head b { color: var(--screen); font-weight: 500; }
.cores { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; height: 150px; align-items: end; }
.cores i { display: block; background: var(--tile); border-radius: 2px 2px 0 0; min-height: 3px; transition: height .9s ease, background-color .4s ease; }
.cores i.hot { background: var(--busy); }
.readings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 460px) { .readings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reading { background: var(--panel); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; }
.reading span { font: 11px/1.2 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.reading b { font: 500 16px/1.2 var(--mono); font-variant-numeric: tabular-nums; }

/* ---- the unattended story ----------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 22px; display: grid; gap: 8px; align-content: start; background: var(--navy); }
.step + .step { border-left: 1px solid var(--line); }
@media (max-width: 900px) { .step:nth-child(3) { border-left: 0; } .step:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .step + .step { border-left: 0; border-top: 1px solid var(--line); } }
.step .when { font: 12px/1 var(--mono); color: var(--tile); }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---- three differentiators ------------------------------------------------ */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
.pillar { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 2px solid var(--tile); }
.pillar p { margin: 0; color: var(--muted); }
.pillar ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 4px; font-size: 15px; }

/* ---- the setup, typed ---------------------------------------------------------- */
.setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 640px) { .setup { grid-template-columns: 1fr; } }
.win { border: 1px solid var(--outline); border-radius: 10px; background: var(--ground-deep); background-image: var(--panel-fall); padding: 16px 18px; display: grid; gap: 10px; min-width: 0; }
.win .t { font: 500 11.5px/1 var(--mono); color: var(--faint); letter-spacing: .07em; text-transform: uppercase; }
.digits { font: 500 clamp(17px, 2.2vw, 22px)/1.3 var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; min-height: 1.3em; overflow-wrap: anywhere; }
.digits.code { color: var(--tile); }
.status { font: 13px/1.3 var(--mono); color: var(--faint); min-height: 1.3em; }
.status.ok { color: var(--online); }
.notice { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 9px; background: var(--notice); border: 1px solid var(--notice-edge); color: var(--notice-text); font-size: 14.5px; }
.notice::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--notice-text); flex: none; }

/* ---- the day chart --------------------------------------------------------- */
.chartbox { position: relative; border: 1px solid var(--outline); border-radius: var(--radius); background: var(--ground-deep); padding: 16px 16px 10px; overflow-x: auto; }
.chartbox svg { display: block; width: 100%; min-width: 600px; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 12px/1.4 var(--mono); color: var(--faint); padding: 8px 2px 2px; }
.legend i { display: inline-block; width: 18px; height: 3px; vertical-align: 3px; margin-right: 6px; border-radius: 2px; }
.toast { position: absolute; right: 18px; top: 18px; max-width: 300px; background: var(--panel); border: 1px solid var(--tile); border-radius: 10px; padding: 11px 13px; font-size: 14px; line-height: 1.4; box-shadow: 0 12px 32px color-mix(in srgb, #000 45%, transparent); animation: land 8s ease-in-out infinite; }
.toast b { display: block; }
.toast small { color: var(--faint); font: 11px var(--mono); }
@keyframes land { 0%, 10% { transform: translateY(-8px); opacity: 0; } 16%, 100% { transform: none; opacity: 1; } }
.draw { stroke-dasharray: 2600; stroke-dashoffset: 0; animation: draw 8s ease-out infinite; }
@keyframes draw { 0% { stroke-dashoffset: 2600; } 45%, 100% { stroke-dashoffset: 0; } }
@media (max-width: 640px) { .toast { position: static; margin-bottom: 12px; max-width: none; animation: none; } }

/* ---- walkthrough ------------------------------------------------------------ */
.tour { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .tour { grid-template-columns: 1fr; } }
.tour-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: tour; }
.tour-steps button { width: 100%; text-align: left; display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.tour-steps button b { color: var(--screen); font-weight: 600; font-size: 15.5px; }
.tour-steps button span { font-size: 14px; }
.tour-steps button[aria-selected="true"] { background: var(--tile-soft); border-color: var(--outline); }
.tour-stage { display: grid; gap: 12px; }
.tour-frame { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--radius); border: 1px solid var(--outline); background: var(--ground-deep); overflow: hidden; }
.tour-frame figure { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; transition: opacity .5s ease; }
.tour-frame figure[hidden] { display: grid !important; opacity: 0; pointer-events: none; }
.tour-frame img { width: 100%; height: 100%; object-fit: contain; }
/* The last step's notification is its own layer: it drops in a beat after the step shows. */
.tour-frame .arrival { position: absolute; top: 3%; left: 50%; width: 55%; height: auto; transform: translate(-50%, -130%); opacity: 0; transition: transform .7s cubic-bezier(.2, .9, .3, 1.15) 1s, opacity .3s ease 1s; }
.tour-frame figure:not([hidden]) .arrival { transform: translate(-50%, 0); opacity: 1; }
.placeholder { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--faint); font: 13px/1.5 var(--mono); background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--outline) 35%, transparent) 14px 15px); }
.tour-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.tour-caption { margin: 0; color: var(--muted); }

/* ---- platforms ---------------------------------------------------------------- */
.platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .platforms { grid-template-columns: 1fr; } }
.platform { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 8px; align-content: start; background: var(--navy); }
.platform p { margin: 0; color: var(--muted); font-size: 14.5px; }
.chip { justify-self: start; font: 600 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; }
.chip.now { background: color-mix(in srgb, var(--online) 22%, var(--navy)); color: color-mix(in srgb, var(--online) 55%, var(--screen)); }
.chip.soon { background: var(--panel); color: var(--muted); }

/* ---- tables (pricing) ------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); background: var(--ground-deep); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.callout { border: 1px solid var(--outline); border-left: 3px solid var(--tile); border-radius: 10px; padding: 16px 18px; background: var(--ground-deep); }
.callout p { margin: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---- downloads ----------------------------------------------------------------- */
.downloads { display: grid; gap: 16px; }
.download { border: 1px solid var(--outline); border-radius: var(--radius); background: var(--ground-deep); background-image: var(--panel-fall); padding: 22px; display: grid; gap: 12px; }
.download-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.sum { font: 12.5px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; background: var(--navy); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.download p { margin: 0; color: var(--muted); }

/* ---- account pages (reset, confirm) ---------------------------------------- */
.account { min-height: calc(100vh - 140px); display: grid; place-items: start center; padding-block: clamp(40px, 8vw, 88px); background-image: var(--glow); }
.card { width: 100%; max-width: 440px; border: 1px solid var(--outline); border-radius: 14px; background: var(--ground-deep); background-image: var(--panel-fall); padding: clamp(22px, 5vw, 34px); display: grid; gap: 16px; }
.card h1 { font-size: clamp(26px, 5vw, 32px); font-stretch: 110%; }
.card p { margin: 0; color: var(--muted); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 14.5px; }
.field input { font: inherit; font-size: 16px; padding: 12px 13px; border-radius: 9px; border: 1px solid var(--outline); background: var(--navy); color: var(--screen); width: 100%; }
.field input:focus-visible { border-color: var(--tile); outline-offset: 1px; }
.hint { font-size: 13.5px; color: var(--faint); margin: 0; }
.message { border-radius: 9px; padding: 12px 14px; font-size: 15px; }
.message.bad { background: color-mix(in srgb, var(--notice) 45%, var(--navy)); border: 1px solid var(--notice-edge); color: var(--notice-text); }
.message.good { background: color-mix(in srgb, var(--online) 18%, var(--navy)); border: 1px solid color-mix(in srgb, var(--online) 60%, var(--navy)); }

/* ---- the reading surface: terms, privacy ------------------------------------ */
/* Light, because these are read in full, on a phone, sometimes outdoors. The icon's
   SCREEN is the paper and its NAVY the ink; ACCENT is the one place #2563EB is used,
   because here it sits on light. */
.paper { background: var(--screen); color: var(--navy); border-radius: 14px; padding: clamp(24px, 5vw, 48px); }
.paper h1 { font-size: clamp(30px, 5vw, 42px); }
.paper h2 { font-size: 22px; margin-top: 32px; }
.paper p, .paper li { color: color-mix(in srgb, var(--navy) 86%, var(--screen)); }
.paper a { color: var(--accent); }
/* Terms and privacy, on the site's own navy: a readable column, generous headings, plain lists. */
.doc { padding-block: clamp(40px, 7vw, 80px); display: grid; gap: 14px; }
.doc h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 4px; }
.doc h2 { font-size: 22px; margin-top: 26px; }
.doc p, .doc li { color: var(--muted); line-height: 1.7; }
.doc ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.doc .updated { color: var(--faint); font-size: 14px; }
.placeholder-text { background: #FFF1C2; color: #5A4300; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cores i, .tour-frame figure, .tour-frame .arrival { transition: none; }
  .toast, .draw { animation: none; }
}