/* dockyd.com marketing site. Same tokens as the Dockyd app (Design 1, signed off 2026-10-12):
   greys do the work, steel blue for links and buttons only, yellow only on the Dockyd mark and bin labels.
   No gradients, no shadows, no tinted backgrounds. Plain CSS, no framework. */

@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/roboto-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/roboto-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f7f9;
  --band: #f7f8fa;
  --ink: #16212b;
  --muted: #5b6874;
  --line: #d6dce3;
  --primary: #1d5c88;
  --primary-hover: #174b70;
  --primary-ink: #ffffff;
  --hivis: #f3b908;
  --hivis-ink: #1a1500;
  --ok: #1b7a45;
  --warn: #a96300;
  --bad: #b3261e;
  --font-sans: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, Consolas, monospace;
  --wrap: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e141a; --surface: #151d25; --surface-2: #1b252f; --band: #121920; --ink: #e4eaf0; --muted: #94a3b1; --line: #2a3743;
    --primary: #5ea9de; --primary-hover: #7dbbe6; --primary-ink: #08131c; --hivis: #f5c52e; --hivis-ink: #1a1500;
    --ok: #4cc184; --warn: #e6a640; --bad: #f06c62;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font-sans); }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; line-height: 1.25; }
h1 { font-size: 40px; letter-spacing: -.01em; }
h2 { font-size: 28px; }
h3 { font-size: 18px; }
p { margin: 0; }
ul { margin: 0; padding-left: 20px; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: .9em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.site-head { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 700 22px/1 var(--font-sans); letter-spacing: .03em; text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 26px; height: 26px; border-radius: 4px; background: var(--hivis); display: grid; place-items: center; flex: none; }
.brand-mark span { width: 14px; height: 9px; border: 2.5px solid var(--hivis-ink); border-top: 0; margin-top: 2px; }
.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { font-weight: 500; }
.menu-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--primary); background: var(--primary); color: var(--primary-ink); font: 500 15px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-ink); }
.btn.ghost { background: transparent; color: var(--primary); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--primary); color: var(--primary); background: transparent; }
.site-nav .btn { color: var(--primary-ink); font-size: 14px; min-height: 36px; padding: 6px 14px; }
.site-nav .btn.ghost { color: var(--primary); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Sections ---------- */
.hero { padding: 72px 0 56px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.hero .lead { font-size: 19px; color: var(--muted); margin: 18px 0 28px; max-width: 36em; }
.eyebrow { font: 500 12px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.section { padding: 64px 0; border-top: 1px solid var(--line); }
.section.band { background: var(--band); }
.section-head { max-width: 44em; margin-bottom: 36px; }
.section-head p { color: var(--muted); margin-top: 12px; font-size: 17px; }
.page-head { padding: 56px 0 40px; }
.page-head p { color: var(--muted); font-size: 18px; margin-top: 14px; max-width: 40em; }

.grid { display: grid; gap: 28px 32px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.item h3 { margin-bottom: 6px; }
.item p { color: var(--muted); }

/* The flow of a day: numbered steps in one line on wide screens */
.flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.flow li { padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.flow li:nth-child(4n) { border-right: 0; }
.flow li:nth-last-child(-n+4) { border-bottom: 0; }
.flow .n { font: 500 13px/1 var(--font-mono); color: var(--muted); }
.flow h3 { margin: 10px 0 6px; font-size: 17px; }
.flow h3 a { color: var(--ink); text-decoration: none; }
.flow h3 a:hover { color: var(--primary); text-decoration: underline; }
.flow p { color: var(--muted); font-size: 15px; }

/* Detail pages: a short index on the left, the sections on the right */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding-bottom: 72px; }
.toc { position: sticky; top: 24px; align-self: start; font-size: 14px; }
.toc p { font: 500 12px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 3px 0 3px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); border-left-color: var(--primary); }
.topic { padding: 32px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.topic:first-child { border-top: 0; padding-top: 0; }
.topic h2 { font-size: 24px; margin-bottom: 12px; }
.topic > p { color: var(--muted); max-width: 42em; }
.topic > p + p { margin-top: 10px; }
.topic ul { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; max-width: 42em; }
.topic .tag { margin-left: 8px; vertical-align: middle; }

/* Small status tag, a dot beside plain text as in the app */
.tag { display: inline-flex; align-items: center; gap: 6px; font: 400 13px/1 var(--font-sans); color: var(--muted); white-space: nowrap; }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.tag.ok::before { background: var(--ok); }
.tag.warn::before { background: var(--warn); }
.tag.next::before { background: var(--primary); }

/* Plain tables */
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-weight: 500; color: var(--muted); font-size: 13px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); margin-top: 18px; }
.table-scroll table tr:last-child td { border-bottom: 0; }

/* Bin code, as on the app's labels */
.bin { display: inline-block; padding: 1px 6px; border-radius: 3px; background: var(--hivis); color: var(--hivis-ink); font: 500 13px/1.5 var(--font-mono); }

/* ---------- Product pictures drawn in HTML (no screenshots of real data) ---------- */
.shots { position: relative; padding-bottom: 150px; }
.screen { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; font-size: 13px; }
.screen-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.screen-bar .brand { font-size: 14px; gap: 6px; }
.screen-bar .brand-mark { width: 16px; height: 16px; border-radius: 3px; }
.screen-bar .brand-mark span { width: 8px; height: 5px; border-width: 1.5px; margin-top: 1px; }
.screen-bar .muted { margin-left: auto; font-size: 12px; }
.screen table { font-size: 13px; }
.screen th, .screen td { padding: 7px 12px; }
.screen td.n, .screen th.n { text-align: right; font-variant-numeric: tabular-nums; }
.screen .tag { font-size: 12px; }

.gun { position: absolute; right: 24px; bottom: 0; width: 190px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; font-size: 12px; }
.gun-top { display: flex; justify-content: space-between; padding: 6px 10px; background: #16212b; color: #e4eaf0; font-size: 11px; }
.gun-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.gun-body .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.gun-body .big { font: 500 16px/1.2 var(--font-mono); }
.gun-scan { border: 2px solid var(--primary); border-radius: 4px; padding: 6px 8px; color: var(--muted); font-size: 12px; }
.gun-keys { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.gun-keys span { padding: 6px 0; text-align: center; font-size: 10px; color: var(--muted); border-right: 1px solid var(--line); }
.gun-keys span:last-child { border-right: 0; }
.gun-keys b { font: 500 10px/1 var(--font-mono); color: var(--ink); margin-right: 3px; }

/* ---------- Call to action, sign in ---------- */
.cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta p { color: var(--muted); margin-top: 8px; }
.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 28px; }
.signin { max-width: 480px; margin: 0 auto; }
.signin label { display: block; font-weight: 500; margin: 18px 0 8px; }
.address { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); overflow: hidden; }
.address:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.address input { flex: 1; min-width: 0; border: 0; padding: 10px 12px; font: 16px var(--font-sans); background: transparent; color: var(--ink); outline: none; }
.address span { padding: 10px 12px; color: var(--muted); background: var(--surface-2); border-left: 1px solid var(--line); }
.signin .error { color: var(--bad); font-size: 14px; margin-top: 8px; min-height: 1.4em; }
.signin .btn { width: 100%; margin-top: 12px; }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 12px; line-height: 1.6; }
.legal h1 { font-size: 34px; margin-top: 48px; }
.legal h2 { font-size: 20px; margin-top: 20px; }
.legal ul { display: flex; flex-direction: column; gap: 6px; }
.legal table { font-size: 14px; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 32px 0 40px; font-size: 14px; color: var(--muted); }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.site-foot h3 { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.site-foot ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.site-foot .brand { font-size: 18px; margin-bottom: 12px; }
.site-foot .brand-mark { width: 20px; height: 20px; }
.site-foot .brand-mark span { width: 10px; height: 6px; border-width: 2px; }
.site-foot .legal-line { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
  .flow li:nth-child(2n) { border-right: 0 !important; }
  .flow li:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .toc { position: static; margin-bottom: 16px; }
  .toc ol { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; border-left: 0; }
  .toc a { padding: 0; border: 0; margin: 0; text-decoration: underline; }
  .site-foot .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-foot .about { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .hero { padding: 40px 0 40px; }
  .hero .lead { font-size: 17px; }
  .section { padding: 48px 0; }
  .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .flow li:last-child { border-bottom: 0 !important; }
  .site-head .wrap { flex-wrap: wrap; gap: 0; }
  .js .menu-toggle { display: inline-flex; margin-left: auto; align-items: center; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink); font: 500 14px var(--font-sans); cursor: pointer; }
  .site-nav { width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 8px 0 12px; }
  .js .site-nav { display: none; }
  .js .site-head.open .site-nav { display: flex; }
  .site-nav a { padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; }
  .site-nav .btn { margin-top: 10px; border-top: 1px solid var(--primary); }
  .site-nav .btn.ghost { border-top: 1px solid var(--line); }
  .gun { width: 160px; }
  .site-foot .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-scroll table { min-width: 520px; }
}
.small { font-size: 13px; }
.site-foot a.brand { color: var(--ink); text-decoration: none; }