/* RemoteDesktop LP
   Restrained, fast, no external fonts or scripts. Works light and dark. */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --bg-card: #ffffff;
  --fg: #16191d;
  --fg-muted: #5c6470;
  --line: #e3e6ea;
  --accent: #1f5fd0;
  --accent-soft: #eaf1fd;
  --warn: #b45309;
  --ok: #157347;
  --radius: 10px;
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101215;
    --bg-soft: #161a1f;
    --bg-card: #181c21;
    --fg: #e8eaed;
    --fg-muted: #9aa3ad;
    --line: #262c33;
    --accent: #5b9bff;
    --accent-soft: #17233a;
    --warn: #e0a53f;
    --ok: #4ec27e;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", system-ui, -apple-system, sans-serif;
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

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

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  height: 58px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; color: var(--fg); text-decoration: none; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.site-header nav { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }
.site-header nav a { color: var(--fg-muted); text-decoration: none; }
.site-header nav a:hover { color: var(--fg); }

@media (max-width: 720px) { .site-header nav { display: none; } }

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

.hero { padding: 72px 0 56px; }
.hero h1 {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.3; letter-spacing: -0.01em;
  margin: 0 0 18px; font-weight: 700;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { font-size: clamp(16px, 2vw, 19px); color: var(--fg-muted); margin: 0 0 28px; max-width: 62ch; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button {
  display: inline-block; padding: 12px 22px; border-radius: 8px;
  font-weight: 600; text-decoration: none; font-size: 15px;
  border: 1px solid transparent; cursor: pointer;
}
.button.primary { background: var(--accent); color: #fff; }
.button.primary:hover { filter: brightness(1.08); }
.button.secondary { border-color: var(--line); color: var(--fg); background: var(--bg-card); }
.button.secondary:hover { border-color: var(--accent); color: var(--accent); }
.cta-note { font-size: 13px; color: var(--fg-muted); }

/* Three promises directly under the headline. Lighter than .card on purpose - the hero
   should still read as one block, not as a grid of boxes. */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 34px; }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }
.pillar { border-top: 2px solid var(--accent); padding-top: 12px; }
.pillar b { display: block; font-size: 15px; font-weight: 650; margin-bottom: 2px; }
.pillar span { color: var(--fg-muted); font-size: 14px; }

.shot {
  margin-top: 44px; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-soft);
}
.shot img { width: 100%; }
.shot figcaption { font-size: 13px; color: var(--fg-muted); padding: 10px 14px; border-top: 1px solid var(--line); }

/* Two photographs set against each other.

   Side by side with equal weight, they read as two unrelated pictures and the reader has to
   work out for themselves which one is the point. So the sides are marked: the one being sold
   carries the accent colour and a tick, the other is stated plainly and left grey, and a VS
   sits on the seam so the eye knows at a glance that this is one claim, not two photographs. */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; position: relative; }
.side { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); }
.side img { width: 100%; display: block; }
.side.win { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.side-tag { display: block; font-size: 13px; font-weight: 650; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.side.win .side-tag { background: var(--accent); color: #fff; border-bottom-color: var(--accent); }
.side.win .side-tag::before { content: "✓ "; }
.side.lose .side-tag { color: var(--fg-muted); }
.side.lose .side-tag::before { content: "✕ "; color: var(--warn); }
.side-body { padding: 13px 15px 15px; }
.side-body p { margin: 0; font-size: 13.5px; color: var(--fg-muted); }
.verdict { font-size: 15px !important; color: var(--fg) !important; margin-bottom: 6px !important; }
.side.win .verdict strong { color: var(--accent); }

/* On the seam, and out of the way of both pictures. */
.vs {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; letter-spacing: .02em;
  background: var(--fg); color: var(--bg-card);
  border: 3px solid var(--bg); z-index: 2;
}
.versus-note { font-size: 13px; color: var(--fg-muted); margin-top: 14px; }

@media (max-width: 760px) {
  .versus { grid-template-columns: 1fr; gap: 34px; }
  .vs { top: 50%; }
}

/* A tall photograph beside the two reasons it illustrates. The picture is portrait and the
   argument is short, so side by side keeps both on one screen; full width would make the
   photo tower over the text it exists to support. */
.stretch-block { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 24px; align-items: start; margin-top: 8px; }
.stretch-block .shot { margin: 0; }
.stretch-why p { margin: 0 0 14px; }
.stretch-why p:last-child { margin-bottom: 0; }
.stretch-why b { font-weight: 650; }
@media (max-width: 820px) {
  .stretch-block { grid-template-columns: 1fr; }
  .stretch-block .shot { max-width: 420px; margin: 0 auto; }
}

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

section { padding: 60px 0; border-top: 1px solid var(--line); }
section > .wrap > h2 {
  font-size: clamp(21px, 3vw, 28px); margin: 0 0 10px; font-weight: 700; letter-spacing: -0.01em;
}
.kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 8px; }
.section-lead { color: var(--fg-muted); margin: 0 0 32px; max-width: 68ch; }
/* Marks the parts of a story that need a licence. A reader on the free version must never
   be promised something they will not find when they get there. */
.pro-mark { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
            color: var(--accent); border: 1px solid var(--accent); border-radius: 4px;
            padding: 0 6px; margin-left: 6px; vertical-align: 1px; white-space: nowrap; }

/* The quiet half of a section lead: what the free version does get, said without
   interrupting the sentence that sells the paid one. */
.lead-note { display: inline-block; margin-top: 10px; font-size: 13.5px; opacity: .85; }

/* The licence tiers. Shown as one table rather than three more cards so the three prices sit
   next to each other and can actually be compared - which is the whole point of having tiers. */
.tiers th { white-space: nowrap; }
.tiers b { font-size: 16px; }
.tiers small { color: var(--fg-muted); }
.button.small { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.soon { font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; }

/* Second-level heading inside a section, for sections that tell a story in two parts. */
.subhead { font-size: 19px; font-weight: 650; margin: 44px 0 10px; }
.subhead + p { color: var(--fg-muted); margin: 0 0 24px; max-width: 68ch; }

.grid { display: grid; gap: 18px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid.c3, .grid.c2 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 650; }
.card p { margin: 0; color: var(--fg-muted); font-size: 14.5px; }
.card .tag { display: inline-block; font-size: 12px; color: var(--warn); font-weight: 650; margin-bottom: 6px; }

/* ---------- spotlight ---------- */

/* One feature given a whole section, because it is the one nothing else does. Drawn rather
   than screenshotted: a photograph of four windows shrinks to mud, and the point being made
   is the arrangement, not the pixels. */
.spotlight { background: var(--bg-soft); }
.spotlight .diagram {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-card); padding: 26px 22px; margin: 0 0 26px;
}
/* The drawing carries labels, and at phone width they shrink to mud. Given its own scroll
   box with a floor on the width so it stays readable; the page itself never scrolls
   sideways, which is the rule that actually matters. */
.spotlight .diagram .scroll { overflow-x: auto; }
/* On a phone the drawing is wider than the screen and only half of it shows, which reads as
   a broken picture rather than a scrollable one. Say so, but only where it is true. */
.spotlight .diagram .swipe { display: none; font-size: 12.5px; color: var(--fg-muted); margin: 0 0 8px; }
@media (max-width: 760px) { .spotlight .diagram .swipe { display: block; } }
.spotlight .diagram svg { width: 100%; min-width: 640px; height: auto; display: block; }
.spotlight figcaption { font-size: 13.5px; color: var(--fg-muted); margin-top: 14px; }
.spot-line { stroke: var(--line); }
.spot-screen { fill: var(--bg-soft); stroke: var(--fg-muted); }
/* Drawn as actual displays rather than boxes: the point is "your screens look like their
   screens", and that only lands if the picture looks like screens. */
.spot-bezel { fill: none; stroke: var(--fg-muted); }
.spot-glass { fill: var(--bg-soft); stroke: var(--line); }
.spot-stand { fill: none; stroke: var(--fg-muted); }
.spot-live { fill: var(--accent-soft); stroke: var(--accent); }
.spot-label { fill: var(--fg-muted); font-size: 12px; font-family: inherit; }
.spot-title { fill: var(--fg); font-size: 13px; font-weight: 650; font-family: inherit; }
.spot-arrow { stroke: var(--accent); fill: none; }

.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .contrast { grid-template-columns: 1fr; } }
.contrast > div { border-radius: var(--radius); padding: 20px 22px; border: 1px solid var(--line); background: var(--bg-card); }
.contrast h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 650; }
.contrast p { margin: 0; font-size: 14.5px; color: var(--fg-muted); }
.contrast .bad h3::before { content: "✕ "; color: var(--warn); }
.contrast .good { border-color: var(--accent); }
.contrast .good h3::before { content: "✓ "; color: var(--ok); }

/* ---------- numbers ---------- */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr; } }
.stat { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.stat b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.stat span { color: var(--fg-muted); font-size: 14px; }

/* ---------- pricing ---------- */

/* Auto-fit rather than a fixed count: the plan list grows a tier when the pricing does, and a
   hard-coded three would have to be found and changed at the same time - which is exactly the
   kind of thing that gets missed and leaves one card on a row of its own. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.plan .price { overflow-wrap: anywhere; }

.plan {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column;
}
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.plan .price { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 2px; }
.plan .price small { font-size: 13px; font-weight: 500; color: var(--fg-muted); }
.plan ul { list-style: none; padding: 0; margin: 16px 0 20px; font-size: 14px; color: var(--fg-muted); }
.plan li { padding: 4px 0 4px 20px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.plan li.no::before { content: "—"; color: var(--fg-muted); }
.plan .button { margin-top: auto; text-align: center; }

/* ---------- table ---------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 520px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
th { background: var(--bg-soft); font-weight: 650; }
tr:last-child td { border-bottom: 0; }

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

details {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 10px; background: var(--bg-card);
}
details[open] { border-color: var(--accent); }
summary { cursor: pointer; font-weight: 600; font-size: 15px; }
details p { color: var(--fg-muted); margin: 10px 0 2px; font-size: 14.5px; }

/* ---------- notice ---------- */

.notice {
  border-left: 3px solid var(--warn); background: var(--bg-soft);
  padding: 14px 18px; border-radius: 0 8px 8px 0; font-size: 14.5px; color: var(--fg-muted);
}

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

.site-footer { border-top: 1px solid var(--line); padding: 40px 0 60px; font-size: 13.5px; color: var(--fg-muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.site-footer a { color: var(--fg-muted); }
.site-footer a:hover { color: var(--accent); }

/* ---------- legal pages ---------- */

.legal { max-width: 780px; margin: 0 auto; padding: 48px 20px 80px; }
.legal h1 { font-size: 26px; margin: 0 0 6px; }
.legal h2 { font-size: 17px; margin: 32px 0 8px; }
.legal p, .legal li { color: var(--fg-muted); font-size: 15px; }
.legal dl { margin: 0; }
.legal dt { font-weight: 650; margin-top: 18px; color: var(--fg); font-size: 15px; }
.legal dd { margin: 4px 0 0; color: var(--fg-muted); font-size: 15px; }
.updated { margin-top: 40px; font-size: 13px; color: var(--fg-muted); }