/* Clip Engine's site, in the app's look: gunmetal panels with cut corners, an amber accent, an angular display face
   and monospace readouts, dressed like printed technical matter (numbered sections, ruled lines with ticks, crop-mark
   brackets, barcodes, a dotted grid). Flat and opaque, no blur. */

:root {
  --bg: #0b0c0e;
  --rail: #08090a;
  --surface: #131418;
  --surface-2: #191a1f;
  --inset: #0d0e11;
  --line: #25272d;
  --line-strong: #363942;
  --bracket: #565a64;
  --text: #eeece6;
  --muted: #a7a59d;
  --dim: #706f69;
  --accent: #ffc21a;
  --accent-hover: #ffd04d;
  --accent-soft: rgba(255, 194, 26, 0.12);
  --on-accent: #0b0c0e;
  --record: #ff3d52;
  --ok: #34d17d;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --cut: 14px;
  --page: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
  background-size: 24px 24px;
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

code, kbd {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--inset); border: 1px solid var(--line-strong); padding: 1px 6px;
}
kbd { border-bottom-width: 3px; }

/* ------------------------------------------------------------------ Header */

.nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--rail);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--page); margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; background: var(--accent);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  display: grid; place-items: center;
}
.brand-mark::after {
  content: ""; width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid var(--on-accent); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.brand-name { font: 700 14px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.brand-sep { font: 12px var(--mono); color: var(--dim); }
.brand-version { font: 500 12px var(--mono); color: var(--dim); }

.nav nav { display: flex; align-items: center; gap: 22px; }
.nav nav a:not(.btn) {
  text-decoration: none; color: var(--muted);
  font: 700 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.nav nav a:not(.btn) span { color: var(--dim); margin-right: 6px; }
.nav nav a:not(.btn):hover { color: var(--text); }
.menu-toggle { display: none; }

/* ------------------------------------------------------------------ Buttons */

.btn {
  --c: 8px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border: 0; cursor: pointer;
  font: 700 15px var(--display); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  color: var(--on-accent); background: var(--accent);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color 0.14s ease, transform 0.14s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.ghost {
  color: var(--text); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn.ghost:hover { background: #26282f; }
.btn.small { padding: 8px 14px; font-size: 13px; --c: 6px; }

/* ------------------------------------------------------------------ Layout */

main { max-width: var(--page); margin: 0 auto; padding: 0 16px; }
.section { padding: 96px 0 8px; }

/* The mark over each section: 02 FEATURES, then a ruler with ticks, then a barcode */
.mark {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  font: 700 12px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
}
.mark b { color: var(--accent); letter-spacing: 0.04em; }
.mark::after {
  content: ""; flex: 1; height: 7px; min-width: 40px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 40px) bottom / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat;
}
.barcode {
  flex: none; width: 64px; height: 12px;
  background: repeating-linear-gradient(90deg,
    var(--dim) 0 1px, transparent 1px 3px, var(--dim) 3px 5px, transparent 5px 6px,
    var(--dim) 6px 7px, transparent 7px 10px, var(--dim) 10px 13px, transparent 13px 14px);
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; }
h1 { font-size: clamp(40px, 5.6vw, 64px); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; }
h1 em { font-style: normal; color: var(--accent); }
h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; margin-bottom: 14px; }
h3 { font-size: 18px; margin-bottom: 6px; }
.lead { font-size: 18px; color: var(--muted); max-width: 680px; margin: 0; }
.fine { font: 500 12px var(--mono); color: var(--dim); letter-spacing: 0.02em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-strong); background: var(--surface); padding: 5px 10px;
}
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--record); box-shadow: 0 0 0 3px rgba(255, 61, 82, 0.18); }

/* A panel with its top-left and bottom-right corners cut, and crop-mark brackets on the other two */
.plate {
  position: relative;
  background: var(--line);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  padding: 1px;
}
.plate > .plate-in {
  height: 100%;
  background: var(--surface);
  clip-path: polygon(calc(var(--cut) - 0.5px) 0, 100% 0, 100% calc(100% - var(--cut) + 0.5px), calc(100% - var(--cut) + 0.5px) 100%, 0 100%, 0 calc(var(--cut) - 0.5px));
  padding: 26px;
}
.plate::before, .plate::after {
  content: ""; position: absolute; width: 10px; height: 10px; z-index: 1; pointer-events: none;
}
.plate::before { top: 0; right: 0; border-top: 1px solid var(--bracket); border-right: 1px solid var(--bracket); }
.plate::after { bottom: 0; left: 0; border-bottom: 1px solid var(--bracket); border-left: 1px solid var(--bracket); }
.plate.lead-plate { background: var(--line-strong); }
.plate.lead-plate > .plate-in { background: linear-gradient(135deg, var(--accent) 0 calc(var(--cut) + 6px), var(--surface) 0); }

.stripes {
  height: 9px; width: 160px;
  background: repeating-linear-gradient(-45deg, rgba(255, 194, 26, 0.3) 0 5px, transparent 5px 10px);
}

/* ------------------------------------------------------------------ Hero */

.hero { padding: 48px 0 0; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1 { margin: 22px 0 22px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 14px; }
.hero .fine a, .download .fine a { color: var(--muted); text-underline-offset: 3px; }
.hero .fine a:hover, .download .fine a:hover { color: var(--text); }
.hero .after-cta { margin-top: 4px; }
.hero .live b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* The facts to know before downloading, under the hero: a ruled strip, like a spec line in a manual */
.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 36px 0 0;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
}
.facts > div { padding: 16px 20px 18px; border-left: 1px solid var(--line); }
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts dt { font: 700 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.facts dd b { display: block; font: 700 17px var(--display); color: var(--text); margin-bottom: 2px; }
[data-downloads-box][hidden], .specs [hidden] { display: none; }

/* A screenshot in a frame, with a caption like a figure in a manual */
.figure { margin: 0; }
.figure .frame { padding: 0; }
.figure .frame > .plate-in { padding: 0; background: var(--rail); }
.figure figcaption {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 10px;
  font: 700 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim);
}
.figure figcaption span:first-child { color: var(--muted); }
.hero-shot { position: relative; }
.hero-shot .stripes { position: absolute; right: 0; top: -18px; }

/* ------------------------------------------------------------------ Features */

.grid { display: grid; gap: 18px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.feature .plate-in { display: flex; flex-direction: column; gap: 8px; }
.feature .idx { font: 700 11px var(--mono); letter-spacing: 0.16em; color: var(--accent); }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }
.feature:hover { background: var(--line-strong); }
.feature:hover::before, .feature:hover::after { border-color: var(--accent); }

.shots { margin-top: 36px; }

/* ------------------------------------------------------------------ Squads */

.split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; }
.list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.list li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; color: var(--muted); }
.list li b { color: var(--text); display: block; font-family: var(--display); font-size: 16px; }
.list li::before {
  content: attr(data-n); display: grid; place-items: center; height: 34px;
  font: 700 12px var(--mono); color: var(--accent); background: var(--accent-soft); border-bottom: 2px solid var(--accent);
}

/* ------------------------------------------------------------------ Games */

.games { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.games span {
  font: 700 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 11px; background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--accent);
}
.games span.any { border-left-color: var(--dim); color: var(--muted); }

/* ------------------------------------------------------------------ Compare */

/* The scrolling happens inside the panel's face, so its cut corners clip the panel and not the columns scrolled into view */
.table-wrap .plate-in { position: relative; padding: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
th { font: 700 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
td:first-child { color: var(--muted); }
.us { color: var(--text); font-weight: 600; background: var(--accent-soft); }
th.us { color: var(--accent); }

/* The full comparison: a column per app, grouped rows, and the feature names pinned while it scrolls sideways */
.compare-hint { display: none; margin: 14px 0 0; }
.compare-wrap { margin-top: 28px; }
.compare-wrap > .plate-in:focus-visible { outline-offset: -2px; }
table.compare { min-width: 1080px; table-layout: fixed; }
.compare th, .compare td { padding: 13px 14px; font-size: 14px; line-height: 1.45; vertical-align: top; }
.compare thead th { vertical-align: bottom; color: var(--text); letter-spacing: 0.1em; }
.compare thead th small { display: block; margin-top: 3px; font-size: 10px; letter-spacing: 0.08em; color: var(--dim); }
.compare thead th.us { color: var(--accent); }
.compare th:first-child { width: 180px; }
.compare thead th.us { width: 175px; }
.compare tbody th[scope="row"] { font: 500 14px var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.compare th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.compare td { color: var(--muted); }
.compare td.us { color: var(--text); }
.compare td.no { color: var(--dim); }
.compare tr.group th {
  position: static; box-shadow: none; padding: 22px 14px 8px; background: transparent;
  font: 700 11px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--line-strong);
}
.compare tr.group th span { position: sticky; left: 14px; }
.compare tbody tr:not(.group):hover th, .compare tbody tr:not(.group):hover td { background-color: var(--surface-2); }
.compare tbody tr:not(.group):hover td.us { background-color: rgba(255, 194, 26, 0.16); }
.cmp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.compare-notes { margin-top: 18px; }
.compare-notes h3 { font-size: 18px; margin-bottom: 10px; }
.compare-notes ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); font-size: 15px; }
.compare-notes li::marker { color: var(--accent); }
.compare-notes + .fine a { color: var(--muted); }
/* The home page's short version, and the way through to the full page */
table.compare-short { min-width: 940px; }
.compare-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.compare-more .fine { margin: 0; }
/* compare.html: the page's own header, without the hero's screenshot */
.compare-hero { padding-bottom: 8px; }
.compare-hero h1 { margin: 22px 0 18px; }
.compare-hero .lead { max-width: 760px; }
@media (max-width: 900px) {
  .compare-hint { display: block; }
  .compare th:first-child { width: 150px; }
}

/* ------------------------------------------------------------------ Download */

.download .plate-in { padding: 36px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; color: var(--muted); counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero); display: grid; place-items: center; height: 40px;
  font: 700 13px var(--mono); color: var(--on-accent); background: var(--accent);
}
.steps li b { display: block; color: var(--text); font-family: var(--display); font-size: 16px; }

.link-box { display: grid; gap: 10px; }
.link-row { display: flex; gap: 0; }
.link-row input {
  flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-right: 0;
  background: var(--inset); color: var(--text); font: 500 12px var(--mono);
}
.link-row .btn { --c: 0px; }
.copy-state { font: 700 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ok); min-height: 16px; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 6px 0 0; font: 500 12px var(--mono); color: var(--muted); }
.specs dt { color: var(--dim); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 11px; }
.specs dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Support, FAQ */

.plans .grid { margin: 26px 0 14px; align-items: stretch; }
.tier > .plate-in { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.tier h3 { margin: 0; font: 700 13px var(--mono); letter-spacing: 0.24em; text-transform: uppercase; }
.tier .price { margin: 0; font: 800 34px var(--display, inherit); }
.tier .price span { font: 500 13px var(--mono); color: var(--dim); margin-left: 4px; }
.tier ul { margin: 6px 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; flex: 1; }
.tier li { padding-left: 16px; position: relative; color: var(--muted); }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--accent); }
.tier .btn { align-self: flex-start; }
.donate { margin: 0 0 14px; }
.donate .price { font-size: 26px; }
.donate-lead { margin: 0; color: var(--muted); max-width: 70ch; }
.donate ul { flex: none; margin: 0; }
.donate-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.donate-amounts .btn { align-self: auto; }
.donate-amounts .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.donate .fine { margin: 0; }
/* The reminder to use your own email at checkout, over the plans and again in a box before going to Polar */
.checkout-notice {
  display: flex; gap: 14px; align-items: flex-start; margin: 22px 0 0; padding: 14px 18px; max-width: 820px;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
}
.checkout-notice svg { width: 22px; height: 22px; flex: none; fill: var(--accent); margin-top: 1px; }
.checkout-notice p { margin: 0; color: var(--muted); }
.checkout-notice strong { color: var(--text); }
.checkout-dialog { padding: 0; border: 0; background: transparent; color: var(--text); max-width: min(520px, calc(100vw - 32px)); }
.checkout-dialog::backdrop { background: rgba(5, 6, 8, 0.72); }
.checkout-dialog .plate { margin: 0; }
.checkout-dialog .plate-in { display: grid; gap: 12px; }
.checkout-dialog h3 { margin: 0; font-size: 20px; }
.checkout-dialog p { margin: 0; color: var(--muted); }
.checkout-dialog p strong { color: var(--text); }
.age-check { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 15px; cursor: pointer; }
.age-check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.tier .linkish { display: inline-block; margin-top: 8px; color: var(--muted); text-decoration: underline; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.credits h3 { margin: 26px 0 10px; font-size: 16px; }
.credit-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.credit-list li { padding: 4px 10px; border: 1px solid var(--line-strong); font-size: 13px; }
.credit-list li.ultra { background: var(--accent); color: #0b0c0e; border-color: transparent; font-weight: 600; }
.credit-list li.role span { margin-left: 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

details { border-bottom: 1px solid var(--line); padding: 18px 2px; }
summary { cursor: pointer; font: 600 17px var(--display); list-style: none; display: flex; gap: 14px; align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; font: 700 14px var(--mono); color: var(--accent); width: 14px; flex: none; }
details[open] summary::before { content: "−"; }
details p { color: var(--muted); margin: 10px 0 0 28px; }

/* ------------------------------------------------------------------ Footer */

.footer { border-top: 1px solid var(--line); margin-top: 96px; background: var(--rail); }
.footer-inner {
  max-width: var(--page); margin: 0 auto; padding: 28px 16px 40px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center;
  font: 500 12px var(--mono); color: var(--dim);
}
.footer p { margin: 0; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer a { text-decoration: none; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.footer a:hover { color: var(--text); }

/* ------------------------------------------------------------------ Documents (privacy, terms) */

.doc { max-width: 780px; margin: 0 auto; padding: 72px 16px 24px; }
.doc h1 { font-size: clamp(36px, 5vw, 52px); margin: 0 0 18px; }
.doc h2 { font-size: 22px; margin: 40px 0 8px; }
.doc h2::before { content: "// "; font-family: var(--mono); color: var(--accent); font-size: 16px; }
.doc p, .doc li { color: var(--muted); }
.note {
  border-left: 2px solid var(--accent); background: var(--accent-soft); padding: 12px 16px;
  color: #ffd98a !important; font: 500 13px var(--mono);
}

/* ------------------------------------------------------------------ Small screens */

@media (max-width: 900px) {
  .hero-grid, .split, .download .plate-in { grid-template-columns: 1fr; }
  .grid.three, .grid.two { grid-template-columns: 1fr; }
  .nav-inner { position: relative; padding: 10px 16px; }
  .menu-toggle {
    display: grid; place-items: center; order: 3; width: 44px; height: 44px; margin-right: -6px;
    background: transparent; border: 0; color: var(--text); cursor: pointer;
  }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
    display: block; width: 20px; height: 2px; background: currentColor; transition: transform 0.14s ease, opacity 0.14s ease;
  }
  .menu-toggle span { position: relative; }
  .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
  .menu-toggle span::before { top: -6px; }
  .menu-toggle span::after { top: 6px; }
  .nav.open .menu-toggle span { background: transparent; }
  .nav.open .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
  .nav.open .menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
  .nav nav { margin-left: auto; }
  .nav nav a:not(.btn) { display: none; }
  .nav.open nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--rail); border-bottom: 1px solid var(--line); padding: 4px 16px 16px;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav.open nav a:not(.btn) { display: block; padding: 14px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
  .nav.open nav .btn { justify-content: center; margin-top: 14px; padding: 13px 22px; }
  .brand-sep, .brand-version { display: none; }
  .hero { padding-top: 44px; }
  .section { padding-top: 64px; }
  .download .plate-in { padding: 24px; }
  .facts { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
  .facts > div { padding: 14px 16px 16px; }
  .facts > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  /* On phones the download comes right after the headline, and the longer pitch after it */
  .hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-copy .lead { order: 1; margin-top: 22px; font-size: 17px; }
  .hero-copy .cta { margin-top: 4px; }
  .facts { grid-template-columns: 1fr; }
  .facts > div { border-left: 0; padding-left: 0; }
  .facts > div + div { border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------------ Motion */

/* All of it hangs off html.motion, which site.js sets: on unless the visitor's system asks for reduced motion, and
   the Motion button in the bar turns it on or off. It stays quiet: sections ease in once as they scroll into view,
   panels lift a couple of pixels under the pointer, and that's it. Nothing follows the pointer and nothing loops but
   the live dot. Only transforms and opacity animate, so it all runs on the compositor. */

:root { --ease: cubic-bezier(0.22, 0.61, 0.36, 1); }

.motion-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong); color: var(--muted);
  font: 700 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.motion-toggle[hidden] { display: none !important; }
.motion-toggle i { width: 18px; height: 8px; border: 1px solid currentColor; position: relative; }
.motion-toggle i::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 6px; height: 4px; background: currentColor;
  transition: transform 0.18s var(--ease);
}
.motion-toggle:hover { color: var(--text); }
.motion-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.motion-toggle[aria-pressed="true"] i::after { transform: translateX(10px); }

/* Panels lift a little under the pointer and their crop marks pick up the accent */
html.motion .plate::before, html.motion .plate::after { transition: border-color 0.2s ease; }
html.motion .plate:hover::before, html.motion .plate:hover::after { border-color: var(--accent); }
html.motion .feature, html.motion .tier, html.motion .figure .frame { transition: transform 0.28s var(--ease), background-color 0.2s ease; }
html.motion .feature:hover, html.motion .tier:hover, html.motion .figure .frame:hover { transform: translateY(-2px); }

/* The live dot breathes slowly, as it does in the app */
html.motion .eyebrow i { animation: live 2.4s ease-in-out infinite alternate; }
@keyframes live { to { opacity: 0.45; } }

/* Sections ease in as they scroll into view: the ruler runs out, and panels rise a few pixels one after another */
html.motion .mark.reveal::after { transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease); }
html.motion .mark.reveal.seen::after { transform: none; }
html.motion .reveal:not(.mark) {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease) var(--d, 0ms), transform 0.6s var(--ease) var(--d, 0ms);
}
html.motion .reveal.seen:not(.mark) { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ After the download starts */

/* A small panel in the corner with the next steps and the way to the docs. It doesn't block the page. */
.next-steps {
  position: fixed; right: 20px; bottom: 20px; z-index: 20; width: min(380px, calc(100vw - 32px));
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5));
}
.next-steps[hidden] { display: none; }
.next-steps .plate { background: var(--line-strong); }
.next-steps .plate-in { padding: 20px 22px 22px; display: grid; gap: 10px; background: var(--surface-2); }
.next-steps h3 { margin: 0; font-size: 19px; }
.next-state {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ok);
}
.next-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.next-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
.next-list li::marker { font: 700 12px var(--mono); color: var(--accent); }
.next-list code { font-size: 0.82em; }
.next-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.next-close {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; cursor: pointer;
  background: transparent; border: 0; color: var(--dim); font: 400 22px/1 var(--body);
}
.next-close:hover { color: var(--text); }
html.motion .next-steps { transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); }
html.motion .next-steps.entering { opacity: 0; transform: translateY(12px); }
@media (max-width: 520px) {
  .next-steps { right: 16px; bottom: 16px; }
}

.brand-name { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 901px) {
  .motion-toggle span { display: none; }
}
@media (max-width: 900px) {
  .motion-toggle { display: none; }
  .nav.open .motion-toggle { display: flex; justify-content: center; margin-top: 14px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }