/* remotedeck.net — one stylesheet for every page.
   The look borrows from the server room: brushed-steel panels, patch-panel ports, and the same protocol
   colours the app uses for its badges (SSH green, RDP blue …), so the site and the app read as one thing.
   Fonts are the ones Windows already has (Bahnschrift for headings, Segoe UI for text): nothing is
   downloaded from other sites, so visiting the site contacts no one but remotedeck.net. */

:root {
  --steel: #e6ebf0;        /* page background: light rack steel */
  --steel-2: #d4dbe3;      /* lines, borders */
  --panel: #27313c;        /* the dark patch-panel strip */
  --panel-2: #33404d;      /* port sockets on the panel */
  --ink: #1d2630;          /* text */
  --ink-2: #4d5b69;        /* secondary text */
  --link: #1f5fbf;
  --go: #2f9e4f;           /* download button: the app's "connected" green */
  /* protocol colours, identical to the app's badges */
  --ssh: #34a853; --sftp: #0096a0; --ftp: #f08c1e; --tel: #965ac8; --rdp: #286edc;
  --vnc: #dc468c; --web: #008c82; --cli: #465a82; --az: #0078d4;
  --radius: 6px;
  --measure: 68ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--steel);
  color: var(--ink);
  font: 17px/1.6 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #f2b200; outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 {
  font-family: Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif;
  font-stretch: semi-condensed;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 0; }
h3 { font-size: 1.25rem; }
p, li { max-width: var(--measure); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } body { font-size: 16px; } }

/* ---- top bar ---- */
.top { border-bottom: 1px solid var(--steel-2); background: #f3f6f8; }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 60px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font-family: Bahnschrift, "Segoe UI", sans-serif; font-weight: 600; font-size: 1.2rem; }
.brand svg { width: 28px; height: 28px; }
.top nav { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.top nav a { color: var(--ink-2); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* ---- buttons ---- */
.btn { display: inline-block; padding: 12px 22px; border-radius: var(--radius); font-weight: 600;
  text-decoration: none; border: 1px solid transparent; }
.btn-go { background: var(--go); color: #fff; }
.btn-go:hover { background: #278843; }
.btn-plain { color: var(--ink); border-color: var(--steel-2); background: #fff; }
.btn-plain:hover { border-color: var(--ink-2); }

/* ---- hero: the headline, then the patch panel of everything RemoteDeck connects to ---- */
.hero { padding: 72px 0 40px; }
.hero p.lead { font-size: 1.2rem; color: var(--ink-2); margin: 0 0 28px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .note { color: var(--ink-2); font-size: 0.95rem; margin-top: 12px; }

.panel {
  margin-top: 48px;
  background: linear-gradient(180deg, #2d3945 0%, var(--panel) 100%);
  border-radius: 10px;
  padding: 18px 22px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  color: #c9d3dd;
}
.panel .rail { display: flex; justify-content: space-between; font-size: 0.85rem; color: #8fa0b1; margin-bottom: 12px; }
.ports { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.port { background: var(--panel-2); border-radius: 6px; padding: 10px 10px 9px; display: grid; gap: 6px; justify-items: start;
  border: 1px solid #3e4c5a; }
.port .tag { color: #fff; font: 600 0.8rem/1 Bahnschrift, "Segoe UI", sans-serif; padding: 5px 8px; border-radius: 4px; }
.port .what { font-size: 0.82rem; line-height: 1.3; color: #b8c4cf; }
.port .socket { width: 100%; height: 22px; border-radius: 4px; background: #1b232b; position: relative;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.6); }
.port .socket::after { content: ""; position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: #3fd46a; box-shadow: 0 0 6px #3fd46a; animation: blink 3.2s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes blink { 0%, 86% { opacity: 1; } 87%, 92% { opacity: .25; } 93% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .port .socket::after { animation: none; } }

/* ---- sections ---- */
section { padding: 56px 0; }
section + section { border-top: 1px solid var(--steel-2); }
.shot { margin: 8px 0 0; }
.shot img { border-radius: 8px; border: 1px solid #b9c3cd; box-shadow: 0 20px 40px -24px rgba(29, 38, 48, .55); }
.shot figcaption { color: var(--ink-2); font-size: 0.95rem; margin-top: 10px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.facts li h3 { margin-bottom: 4px; }
.facts li p { margin: 0; color: var(--ink-2); }
/* A facts list across the full width: two columns of points (one on narrow screens). */
.facts-wide { grid-template-columns: 1fr 1fr; column-gap: 40px; }
@media (max-width: 860px) { .facts-wide { grid-template-columns: 1fr; } }

/* the connection table: protocol badge, what it is for, how RemoteDeck does it */
table.conn { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--steel-2); }
table.conn th, table.conn td { text-align: left; padding: 12px 14px; vertical-align: top; border-top: 1px solid var(--steel-2); }
table.conn thead th { border-top: 0; background: #f3f6f8; font-weight: 600; font-size: 0.95rem; }
table.conn td:first-child { white-space: nowrap; }
@media (max-width: 700px) {
  table.conn thead { display: none; }
  table.conn, table.conn tbody, table.conn tr, table.conn td { display: block; width: 100%; }
  table.conn tr { border-top: 1px solid var(--steel-2); padding: 8px 0; }
  table.conn td { border: 0; padding: 4px 14px; }
}
.badge { display: inline-block; color: #fff; font: 600 0.78rem/1 Bahnschrift, "Segoe UI", sans-serif; padding: 5px 8px; border-radius: 4px; min-width: 3.4em; text-align: center; }
.b-ssh { background: var(--ssh); } .b-sftp { background: var(--sftp); } .b-ftp { background: var(--ftp); }
.b-tel { background: var(--tel); } .b-rdp { background: var(--rdp); } .b-vnc { background: var(--vnc); }
.b-web { background: var(--web); } .b-cli { background: var(--cli); } .b-az { background: var(--az); }

/* ---- download box ---- */
.dl { background: #fff; border: 1px solid var(--steel-2); border-radius: 10px; padding: 26px; }
.dl .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.dl .meta { color: var(--ink-2); font-size: 0.95rem; }
.hash { font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.82rem; word-break: break-all; color: var(--ink-2); }

/* numbered steps (only where the content really is a sequence) */
ol.steps { padding-left: 1.3em; }
ol.steps li { margin-bottom: 10px; }

/* ---- long text pages (guide, security, legal) ---- */
.doc { padding: 48px 0 64px; }
.doc h2 { margin-top: 1.8em; }
.doc h3 { margin-top: 1.4em; }
.doc .toc { background: #fff; border: 1px solid var(--steel-2); border-radius: 8px; padding: 14px 20px; display: inline-block; }
.doc .toc ul { margin: 6px 0 0; padding-left: 1.1em; }
.doc code, .doc kbd { font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.9em; background: #dfe5eb; padding: 1px 5px; border-radius: 3px; }
.callout { border-left: 4px solid var(--rdp); background: #f3f6f8; padding: 12px 16px; border-radius: 0 6px 6px 0; max-width: var(--measure); }
.callout.warn { border-left-color: var(--ftp); }

/* ---- footer ---- */
footer { border-top: 1px solid var(--steel-2); padding: 28px 0 40px; color: var(--ink-2); font-size: 0.92rem; background: #edf1f4; }
footer .wrap { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--ink-2); }