/* orbky.com: one stylesheet. Tokens come from design/tokens.json (npm run tokens renames this file by its hash). */

/* tokens:begin — generated from design/tokens.json by scripts/tokens.mjs; don't edit */
:root { color-scheme: light dark; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 160ms; --t-base: 240ms; --t-slow: 380ms; --bg: #f5f6f7; --surface-1: #ffffff; --surface-2: #eef0f2; --surface-3: #e3e6e9; --ink: #0e1114; --ink-2: rgba(14,17,20,0.74); --ink-3: rgba(14,17,20,0.56); --ink-4: rgba(14,17,20,0.30); --line: rgba(14,17,20,0.08); --line-strong: rgba(14,17,20,0.15); --fill: rgba(14,17,20,0.05); --press: rgba(14,17,20,0.06); --accent: #097083; --accent-ink: #ffffff; --accent-soft: rgba(9,112,131,0.10); --pos: #18865a; --neg: #c9412a; --warn: #8f5d00; }
@media (prefers-color-scheme: dark) { :root { --bg: #0b0c0e; --surface-1: #131518; --surface-2: #1a1d21; --surface-3: #23272c; --ink: #eef1f4; --ink-2: rgba(238,241,244,0.72); --ink-3: rgba(238,241,244,0.52); --ink-4: rgba(238,241,244,0.28); --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.14); --fill: rgba(255,255,255,0.06); --press: rgba(255,255,255,0.10); --accent: #8fe6f2; --accent-ink: #062a31; --accent-soft: rgba(143,230,242,0.14); --pos: #7ee2a8; --neg: #ff8f7a; --warn: #ffd27a; } }
/* tokens:end */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --r-pill: 999px;
  --hit: 44px;
  --text: 720px;
  --wide: 980px;
  --surface: var(--surface-1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(32px, 7vw, 48px); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 24px; font-weight: 650; margin-top: var(--s-12); }
h3 { font-size: 18px; font-weight: 600; margin-top: var(--s-6); }
p, ul, ol { margin: var(--s-3) 0 0; }
ul, ol { padding-inline-start: 1.25em; }
li + li { margin-top: var(--s-1); }
strong { font-weight: 600; }

.skip {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; min-height: var(--hit);
  padding: 0 var(--s-4); border-radius: var(--r-pill); z-index: 10;
}
.skip:focus { top: var(--s-2); }

/* ---------- Header ---------- */
.bar {
  max-width: var(--text); margin: 0 auto;
  padding: var(--s-2) var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--hit); padding-inline-end: var(--s-2);
  color: var(--ink); text-decoration: none;
  font: 700 21px/1 var(--font-display); letter-spacing: -.02em;
}
.brand svg { width: 24px; height: 24px; color: var(--accent); flex: none; }
.nav { display: flex; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.nav li + li { margin: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--hit);
  padding: 0 var(--s-3); border-radius: var(--r-pill);
  color: var(--ink-2); text-decoration: none; font-size: 16px;
}
.nav a:hover { background: var(--fill); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--fill); }

/* ---------- Layout ---------- */
.home .bar, .home .foot-in { max-width: var(--wide); }
main { display: block; }
.wrap { max-width: var(--text); margin: 0 auto; padding: var(--s-8) var(--s-4) var(--s-12); }
.wrap-wide { max-width: var(--wide); }
.lead { font-size: 20px; line-height: 1.5; color: var(--ink-2); margin-top: var(--s-4); max-width: 38em; }
.muted { color: var(--ink-3); }
.small { font-size: 15px; }
.meta { color: var(--ink-3); font-size: 15px; margin-top: var(--s-2); }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--hit); padding: 10px var(--s-5);
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink);
  font: 600 16px/1.2 var(--font); text-decoration: none; text-align: center;
}
a.btn:hover { background: var(--fill); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
a.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--fill); border-color: var(--line); color: var(--ink-3); cursor: not-allowed;
}
.btn-block { width: 100%; padding-inline: var(--s-3); }

/* ---------- Home ---------- */
.hero { padding-top: var(--s-6); }
.feature {
  display: grid; gap: var(--s-6); align-items: center;
  padding: var(--s-10) 0; border-top: 1px solid var(--line);
}
.hero { padding-bottom: var(--s-10); }
.feature h2 { margin-top: 0; }
.feature ul { color: var(--ink-2); }
.shot {
  margin: 0 auto; width: 100%; max-width: 300px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--surface);
}
@media (min-width: 760px) {
  .feature { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-12); }
  .feature-flip { grid-template-columns: 300px minmax(0, 1fr); }
  .feature-flip .shot { order: -1; }
}

/* ---------- Grouped list (iOS style) ---------- */
.group {
  margin: var(--s-4) 0 0; padding: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.group > li { margin: 0; padding: var(--s-3) var(--s-4); }
.group > li + li { border-top: 1px solid var(--line); }
.group strong { display: block; }
.group span { display: block; color: var(--ink-2); font-size: 15px; }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: var(--s-4); margin-top: var(--s-8); }
@media (min-width: 680px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6);
}
.plan h2 { margin: 0; font-size: 22px; }
.price { margin-top: var(--s-3); font: 700 34px/1.1 var(--font-display); letter-spacing: -.02em; }
.price small { font: 500 16px/1 var(--font); color: var(--ink-3); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-6); flex: 1; }
.plan li { padding-inline-start: 26px; position: relative; }
.plan li + li { margin-top: var(--s-2); }
.plan li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: .55em;
  width: 12px; height: 7px; border: solid var(--accent); border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.plan .meta { margin: 0 0 var(--s-3); }

/* ---------- Tables ---------- */
.table-wrap {
  margin-top: var(--s-4); overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table-wrap table { min-width: 560px; }
caption { text-align: start; padding: var(--s-3) var(--s-4) 0; color: var(--ink-3); font-size: 14px; }
th, td { text-align: start; vertical-align: top; padding: var(--s-3) var(--s-4); }
thead th { font-weight: 600; color: var(--ink-3); font-size: 14px; border-bottom: 1px solid var(--line-strong); }
tbody tr + tr th, tbody tr + tr td { border-top: 1px solid var(--line); }
tbody th { font-weight: 600; width: 32%; }
td ul { margin: 0; }

/* ---------- Legal text ---------- */
.prose h2 { font-size: 22px; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.toc { margin-top: var(--s-6); }
.toc a { display: inline-block; padding: 2px 0; }
.placeholder { background: var(--accent-soft); color: var(--ink); border-radius: 4px; padding: 0 3px; }

/* ---------- FAQ ---------- */
.faq dt { font-weight: 600; margin-top: var(--s-6); }
.faq dd { margin: var(--s-2) 0 0; color: var(--ink-2); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); }
.foot-in { max-width: var(--text); margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-10); color: var(--ink-3); font-size: 15px; }
.notice { margin: 0 0 var(--s-3); }
.notice a { color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.foot-links li { margin: 0; }
.foot-links a {
  display: inline-flex; align-items: center; min-height: var(--hit);
  padding: 0 var(--s-2); color: var(--ink-2); text-decoration: none; border-radius: 6px;
}
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-links .copy { padding-inline-end: var(--s-2); }

@media (max-width: 420px) {
  body { font-size: 16px; }
  .nav a { padding: 0 var(--s-2); font-size: 15px; }
  .lead { font-size: 18px; }
  .plan { padding: var(--s-5); }
}

@media print {
  .bar nav, .notice, .skip { display: none; }
  body { background: #fff; color: #000; }
}

/* Tables stack into labelled rows on phones; the scroll wrapper stays as a fallback. */
@media (max-width: 599px) {
  .table-wrap table { min-width: 0; }
  .table-wrap thead { display: none; }
  .table-wrap tr, .table-wrap th, .table-wrap td { display: block; width: auto; }
  .table-wrap tbody tr + tr { border-top: 1px solid var(--line); }
  .table-wrap tbody tr + tr th, .table-wrap tbody tr + tr td { border-top: 0; }
  .table-wrap tbody th { padding-bottom: 0; width: auto; }
  .table-wrap td { padding-top: var(--s-2); padding-bottom: 0; }
  .table-wrap td:last-child { padding-bottom: var(--s-3); }
  .table-wrap td[data-label]::before {
    content: attr(data-label); display: block;
    color: var(--ink-3); font-size: 13px; font-weight: 600;
  }
}