/* ontiqo.com. Page chrome follows the system scheme. The product cards keep
   their own product's colours in both schemes, so each one looks like the thing
   it links to rather than like this page. */

:root {
  color-scheme: light dark;
  --bg: #fbfbfa;
  --text: #16161a;
  --muted: #6d6d75;
  --rule: #e4e4e0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131316;
    --text: #ececef;
    --muted: #92929c;
    --rule: #2a2a30;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 24px; }

/* Hero */
.hero { padding: 16vh 0 8vh; }
.eyebrow {
  margin: 0 0 18px; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1.12;
  font-weight: 640;
  letter-spacing: -.025em;
  max-width: 16ch;
}
.hero p { margin: 0; font-size: 18px; color: var(--muted); }

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 16px;
  padding-bottom: 7vh;
}

.card {
  --accent: #888;
  --card-bg: #1a1a1d;
  --card-ink: #eee;
  --card-muted: rgba(255, 255, 255, .62);
  --card-rule: rgba(255, 255, 255, .13);
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--card-ink);
  text-decoration: none;
  border: 1px solid var(--card-rule);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.card img { width: 30px; height: 30px; margin-bottom: 16px; border-radius: 6px; }

.card h2 {
  margin: 0 0 6px;
  font-size: 17px; font-weight: 640; letter-spacing: -.01em;
  color: var(--card-ink);
}
.card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--card-muted); }

.card .foot {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid var(--card-rule);
  font-size: 13px;
}
.card .host { color: var(--accent); font-weight: 600; }
.card .state { margin-left: auto; color: var(--card-muted); font-size: 12px; }

/* Each product's own palette, taken from that product. */
.leafviewer { --card-bg: #1e1c1a; --card-ink: #ece6dc; --accent: #7ecfa4;
              --card-muted: #a9a094; --card-rule: #34302a; }
.echofiles  { --card-bg: #131719; --card-ink: #eef2f4; --accent: #6fc0dd;
              --card-muted: #a3adb4; --card-rule: #263036; }
.ontiqo     { --card-bg: #141518; --card-ink: #ece9e3; --accent: #FFC72C;
              --card-muted: #9a978f; --card-rule: #2b2c30; }
.longtom    { --card-bg: #F3F7FA; --card-ink: #263238; --accent: #0A6DA0;
              --card-muted: #5b6b76; --card-rule: #d9e4ec; }
.guestbay   { --card-bg: linear-gradient(150deg, #16324f, #0b1a2b);
              --card-ink: #e8eef5; --accent: #3fb6a8;
              --card-muted: #9bb0c4; --card-rule: #23405c; }

/* Footer */
footer {
  border-top: 1px solid var(--rule);
  padding: 22px 0 9vh;
  color: var(--muted); font-size: 14px;
}
footer a { color: var(--muted); }
footer p { margin: 0 0 3px; }

/* The legal pages. */
.doc { max-width: 40rem; padding: 12vh 0 6vh; }
.doc h1 { font-size: 24px; margin-bottom: 22px; max-width: none; }
.doc h2 { margin: 30px 0 6px; font-size: 16px; font-weight: 640; }
.doc p, .doc li { font-size: 15.5px; color: var(--muted); }
.doc a { color: var(--text); }
.doc ul { padding-left: 20px; }
.back { display: inline-block; margin-bottom: 30px; color: var(--muted);
        text-decoration: none; font-size: 14px; }
.back:hover { text-decoration: underline; }
.doc footer { margin-top: 42px; padding-bottom: 0; }

@media (max-width: 560px) {
  .hero { padding: 10vh 0 6vh; }
}