/* Layout concept: everything sits inside "the recording frame" — a thin dashed selection rectangle
   like Orbit's own area picker — and the hero is a live mock you can drag the face circle around. */
:root {
  --bg: #f3f4f7;          /* cool graphite-tinted paper */
  --surface: #ffffff;
  --ink: #15181f;
  --ink-2: #5b6271;
  --line: #d9dde6;
  --rec: #e5484d;         /* the record dot */
  --rec-ink: #ffffff;
  --frame: #15181f;       /* dashed selection frame */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-body: "Figtree", -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --radius: 14px;
  --max: 1080px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1218; --surface: #171b24; --ink: #eef0f5; --ink-2: #9aa3b4; --line: #2a3040;
    --rec: #ff5e63; --frame: #eef0f5; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1218; --surface: #171b24; --ink: #eef0f5; --ink-2: #9aa3b4; --line: #2a3040;
  --rec: #ff5e63; --frame: #eef0f5; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 var(--font-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; font-weight: 600; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.25; }
p { margin: 0; }
kbd {
  font: 500 .85em/1 var(--font-mono); padding: 4px 8px; border-radius: 7px;
  border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface); white-space: nowrap;
}
code { font: .88em var(--font-mono); background: var(--surface); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; }

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 19px var(--font-display); text-decoration: none; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rec) 22%, transparent); }
.nav nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 15px; }
.nav nav a { color: var(--ink-2); text-decoration: none; }
.nav nav a:hover { color: var(--ink); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-block: 48px 72px; }
.eyebrow { font: 500 13px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
h1 { font-size: clamp(40px, 5.6vw, 66px); line-height: .98; font-weight: 600; }
h1 em { font-style: normal; color: var(--rec); }
.lede { font-size: 19px; color: var(--ink-2); max-width: 32em; margin-top: 22px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.button {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600;
}
.button:focus-visible, summary:focus-visible, .demo-stage:focus-visible { outline: 2px solid var(--rec); outline-offset: 3px; }
.button.primary { background: var(--rec); border-color: var(--rec); color: var(--rec-ink); }
.button.primary .dot { background: var(--rec-ink); box-shadow: none; }
.fine { font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.fine a { color: inherit; }

/* Interactive demo: a mock recording you can drag the face circle over */
.demo { position: relative; }
.demo-stage {
  position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--radius);
  background: linear-gradient(135deg, #5c7cfa 0%, #7c3aed 100%);
  box-shadow: 0 30px 80px -30px rgba(20, 24, 31, .5); overflow: hidden; user-select: none; touch-action: none;
}
.demo-window {
  position: absolute; inset: 12% 10% 0 10%; background: var(--surface); border-radius: 10px 10px 0 0;
  box-shadow: 0 10px 40px rgba(0,0,0,.25); display: grid; grid-template-rows: 28px 1fr; overflow: hidden;
}
.demo-titlebar { background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding-left: 10px; }
.demo-titlebar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.demo-doc { padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.demo-doc b { display: block; height: 10px; border-radius: 5px; background: var(--line); }
.demo-doc .btn { width: 44%; height: 26px; border-radius: 7px; background: var(--rec); opacity: .9; margin-top: 6px; position: relative; }
.demo-doc .btn::after { content: "Ship it"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px var(--font-body); color: #fff; }
.demo-face {
  position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; left: 54%; top: 38%;
  border: 3px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor: grab;
  background: radial-gradient(circle at 50% 38%, #f6d7c3 0 28%, transparent 29%),
              radial-gradient(circle at 50% 95%, #f6d7c3 0 34%, transparent 35%),
              linear-gradient(160deg, #ffb86b, #ff7a59);
}
.demo-face:active { cursor: grabbing; }
.demo-face::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.85);
  opacity: 0; transition: opacity .2s;
}
.demo[data-state="stopped"] .demo-face::after { opacity: 1; }
.demo-pill {
  position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 9px; border-radius: 999px; background: rgba(20,24,31,.72); color: #fff;
  font: 500 12px var(--font-mono); letter-spacing: .02em; backdrop-filter: blur(8px);
}
.demo-pill .dot { width: 8px; height: 8px; box-shadow: none; }
.demo[data-state="recording"] .demo-pill .dot { animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.demo-controls { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.demo-controls button {
  font: 600 14px var(--font-body); padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.demo-controls button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.demo-hint { font-size: 14px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .demo[data-state="recording"] .demo-pill .dot { animation: none; } .demo-face::after { transition: none; } }

/* The recording frame wraps the main sections */
.frame {
  position: relative; border: 1.5px dashed var(--frame); border-radius: 6px; padding: clamp(24px, 4vw, 56px);
  margin-block: 8px 64px;
}
.frame::before, .frame::after, .frame > .h1, .frame > .h2 {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--frame);
}
.frame::before { left: -6px; top: -6px; } .frame::after { right: -6px; top: -6px; }
.frame > .h1 { left: -6px; bottom: -6px; } .frame > .h2 { right: -6px; bottom: -6px; }
.frame-label {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  font: 500 12px var(--font-mono); background: var(--ink); color: var(--bg); padding: 4px 10px; border-radius: 6px; white-space: nowrap;
}

/* Features */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.feature { display: grid; gap: 12px; min-width: 0; }
.feature .num { font: 500 13px var(--font-mono); color: var(--rec); letter-spacing: .06em; }
.feature p { color: var(--ink-2); max-width: 36em; }
.feature img { border-radius: 10px; border: 1px solid var(--line); margin-top: 6px; }
.section-head { display: grid; gap: 12px; max-width: 40em; margin-bottom: 36px; }
.section-head p { color: var(--ink-2); font-size: 18px; }

/* Capture bar screenshot band */
.bar-band { padding-block: 0 64px; display: grid; gap: 18px; }
.bar-band img { border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 24px 60px -30px rgba(20,24,31,.45); }
.bar-band .caption { font-size: 14px; color: var(--ink-2); }

/* Compare */
.compare { padding-block: 0 64px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font: 500 13px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
td:first-child { color: var(--ink-2); width: 34%; }
td.yes { color: var(--ink); font-weight: 600; }
.yes::before { content: "●"; color: var(--rec); margin-right: 8px; font-size: 11px; vertical-align: 2px; }

/* Install */
.install { padding-block: 0 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; }
.steps { display: grid; gap: 14px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.steps li::before {
  counter-increment: step; content: counter(step); width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font: 600 14px var(--font-mono); background: var(--ink); color: var(--bg);
}
.steps p { color: var(--ink-2); }
.steps strong { color: var(--ink); }

/* FAQ */
.faq { padding-block: 0 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; }
details { border-top: 1px solid var(--line); padding: 16px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::after { content: "+"; font: 400 20px var(--font-mono); color: var(--ink-2); }
details[open] summary::after { content: "–"; }
details p { color: var(--ink-2); margin-top: 8px; max-width: 40em; }

footer { padding-block: 24px 56px; color: var(--ink-2); font-size: 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Article (Loom page) */
.article { max-width: 680px; margin: 0 auto; padding-block: 32px 72px; display: grid; gap: 22px; }
.article h1 { font-size: clamp(34px, 4.6vw, 50px); line-height: 1.02; }
.article h2 { font-size: 26px; margin-top: 18px; }
.article p, .article li { color: var(--ink-2); }
.article strong { color: var(--ink); }
.article ul, .article ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.article .lede { margin-top: 0; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-block: 28px 48px; }
  .features, .install, .faq { grid-template-columns: 1fr; gap: 28px; }
  .nav { flex-direction: column; align-items: flex-start; }
}