/* HMI Forge — visual system for index.html and privacy.html. */

/* ── Self-hosted faces (SIL Open Font License; see fonts/README.md) ── */
/* Chakra Petch 600 — latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/chakra-petch-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chakra Petch 700 — latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/chakra-petch-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chakra Petch 600 — latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 700 — latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/chakra-petch-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans variable 100–700 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans variable 100–700 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Surfaces — warm paper stock */
  --paper: #faf7f3;
  --paper-2: #f2ece4;
  --paper-3: #efe7dc;
  --ink: #191512;
  --ink-2: #332b24;

  /* Text */
  --fg: #191512;
  --fg-muted: #4d453c;
  --fg-subtle: #6e6459;
  --fg-label: #6b6155;
  --on-ink: #faf7f3;
  --on-ink-muted: #cdc4b8;
  --on-ink-subtle: #9c9186;

  /* Ember */
  --ember: #f5872a;
  --ember-hi: #ffb457;
  --ember-num: #c2620a;
  --ember-deep: #8a5a1c;
  --on-ember: #4a2906;

  /* Rules */
  --rule: #e2dad0;
  --rule-soft: #ece4d9;
  --rule-ink: #332b24;
  --rule-band: #ddd2c4;

  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pad-x: clamp(20px, 4.4vw, 60px);
  --maxw: 1440px;
  --nav-h: 84px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; }
img, video, svg { max-width: 100%; }

:where(a, button):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: clamp(64px, 8vw, 104px) 0 0; }
/* Sections rely on the next one's top padding for their own bottom gap, so
   whatever ends up last needs its own before the footer. */
main > .section:last-child { padding-bottom: clamp(72px, 8vw, 112px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--on-ink); padding: 12px 20px; font-weight: 600;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── Type primitives ── */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ember-deep);
  display: flex; align-items: center; gap: 11px;
}
.eyebrow .tick { width: 8px; height: 8px; background: var(--ember); flex: none; }
.eyebrow-sm {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-label);
}
.eyebrow-sm.ember { color: var(--ember-deep); }
/* The pairing carries the spacing, so the heading doesn't have to. */
.eyebrow-sm + .h2, .eyebrow-sm + .h2-sm { margin-top: 16px; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.375rem); line-height: 1.03; letter-spacing: -0.02em; text-wrap: balance; }
.h2 { font-size: clamp(2rem, 3.6vw, 3.125rem); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.h2-sm { font-size: clamp(1.75rem, 2.9vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.219rem); line-height: 1.62; color: var(--fg-muted); text-wrap: pretty; }
.prose { font-size: 1.063rem; line-height: 1.66; color: var(--fg-muted); text-wrap: pretty; }
.prose-lg { font-size: 1.094rem; }
code, .term {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--paper-3); padding: 2px 7px; color: var(--fg);
}
.rule-mark { width: 88px; height: 5px; background: var(--ember); margin: 32px 0 28px; }

/* Links inside body copy. Ember is 2.4:1 on paper and can't carry a link on its
   own, so these are underlined and take ember only on hover. */
.price-aside a, .faq-item a {
  color: var(--fg); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color 140ms ease;
}
.price-aside a:hover, .faq-item a:hover { color: var(--ember-deep); }

/* ── Buttons (hard-edged, no radius — this system is square) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 15.5px;
  padding: 18px 30px; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn-dark { background: var(--ink); color: var(--on-ink); }
.btn-dark:hover { background: #2b241d; }
.btn-dark .arrow { color: var(--ember); }
.btn-ember { background: var(--ember); color: var(--ink); }
.btn-ember:hover { background: var(--ember-hi); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--on-ink); }
.btn-underline {
  padding: 18px 26px; border-bottom: 2px solid var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 15.5px;
  display: inline-flex; align-items: center;
  transition: background-color 140ms ease;
}
.btn-underline:hover { background: var(--paper-2); }
.btn-nav {
  background: var(--ember); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.03em;
  padding: 11px 22px; display: inline-flex; align-items: center;
  transition: background-color 140ms ease;
}
.btn-nav:hover { background: var(--ember-hi); }

/* ── Nav ── */
.nav-bar { background: var(--ink); position: sticky; top: 0; z-index: 100; }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: var(--nav-h);
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand .mark { width: 37px; height: 35px; flex: none; }
.brand .name {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: 0.04em; color: var(--on-ink); white-space: nowrap;
}
.nav-right { display: flex; align-items: center; gap: 34px; }
.nav-links { display: flex; gap: 28px; font-size: 14.5px; font-weight: 450; }
.nav-links a { color: var(--on-ink-muted); transition: color 140ms ease; }
.nav-links a:hover { color: var(--on-ink); }
/* Pricing is the one link worth keeping once the list collapses, so it has a
   second copy that only exists at those widths. Hidden here so it isn't a
   duplicate of the list entry. */
.nav-price {
  display: none;
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.03em;
  color: var(--on-ink); padding: 11px 0; border-bottom: 2px solid var(--ember);
  transition: color 140ms ease;
}
.nav-price:hover { color: var(--ember); }
@media (max-width: 860px) { :root { --nav-h: 64px; } }
/* Six links plus the demo button crowd the bar before the 860px mark, so they
   drop a step earlier than the shorter bar does. */
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-price { display: inline-flex; align-items: center; }
  .nav-right { gap: 22px; }
}
/* Brand, Pricing and the button don't all fit a phone at full size: the wordmark
   goes first (the mark still links home), then the button tightens. */
@media (max-width: 560px) {
  .nav-right { gap: 16px; }
  .btn-nav { padding: 10px 15px; }
}
@media (max-width: 440px) {
  .brand .name { display: none; }
}

/* ── Hero ── */
.hero { display: grid; grid-template-columns: 1fr 1.2fr; border-bottom: 1px solid var(--rule); }
.hero-copy { padding: clamp(56px, 6.5vw, 100px) clamp(20px, 3.4vw, 48px) clamp(56px, 6.5vw, 100px) var(--pad-x); }
.hero h1 { margin: 26px 0 0; }
.hero .lead { max-width: 520px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.stats { display: flex; margin-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--rule); }
.stat { flex: 1; padding: 20px 20px 0; }
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat + .stat { border-left: 1px solid var(--rule); }
.stat .n { font-family: var(--display); font-weight: 700; font-size: 26px; }
.stat .k { font-size: 13px; color: var(--fg-subtle); margin-top: 4px; }

/* Tablet stage */
.stage {
  background: var(--paper-2); position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 36px) clamp(36px, 4vw, 56px);
}
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.035;
  background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 64px 64px;
}
.rig { position: relative; padding-left: 102px; max-width: 100%; }

/* Cradle spine on the right of the case */
.cradle {
  position: absolute; right: -28px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 250px; z-index: 4; border-radius: 4px 6px 6px 4px;
  background: linear-gradient(90deg, #15181b, #252a2e 40%, #1b1e21);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), -6px 0 14px rgba(0,0,0,0.3);
}
.cradle-clip {
  position: absolute; right: -21px; width: 9px; height: 22px;
  background: #0a0b0d; border-radius: 2px; z-index: 5;
}
.cradle-clip.top { top: calc(50% - 78px); }
.cradle-clip.bottom { top: calc(50% + 56px); }

/* E-stop assembly */
.estop { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 3; }
.estop-body {
  position: relative; width: 112px; height: 120px; padding-left: 9px;
  display: flex; align-items: center; border-radius: 58px 12px 12px 58px;
  background: linear-gradient(148deg, #5b6067 0%, #3f444a 46%, #272b30 100%);
  box-shadow: 0 14px 28px rgba(20,17,14,0.36), inset 0 1px 0 rgba(255,255,255,0.16), inset -6px 0 10px rgba(0,0,0,0.25);
}
.estop-collar {
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(155deg, #f0d229, #c9a20f);
  box-shadow: inset 0 -2px 5px rgba(0,0,0,0.32);
}
.estop-button {
  position: absolute; left: 2px; top: 2px; width: 82px; height: 82px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 36% 30%, #cf4034 0%, #b02418 55%, #7e150e 100%);
  box-shadow: inset 0 -4px 9px rgba(0,0,0,0.42), 0 3px 7px rgba(0,0,0,0.28);
}

/* Rugged case */
.case {
  position: relative; padding: 20px; border-radius: 20px;
  background: linear-gradient(158deg, #33383e 0%, #22262b 42%, #15181b 100%);
  box-shadow: 0 30px 60px rgba(25,21,18,0.34), inset 0 1px 0 rgba(255,255,255,0.1);
}
.case-inner {
  background: #0d0f11; padding: 15px; border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.sensor-row { display: flex; align-items: center; justify-content: center; gap: 9px; height: 9px; margin-bottom: 9px; }
.sensor-row span { width: 5px; height: 5px; border-radius: 50%; background: #22262a; }
.screen {
  position: relative; width: 520px; max-width: 100%; aspect-ratio: 520 / 343;
  background: #000; border-radius: 3px; overflow: hidden;
}
.screen video, .screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-row { display: flex; align-items: center; justify-content: center; gap: 74px; height: 24px; margin-top: 11px; }
.nav-row span { height: 7px; border-radius: 2px; background: #22262a; }
.nav-row span:nth-child(1), .nav-row span:nth-child(3) { width: 22px; }
.nav-row span:nth-child(2) { width: 30px; }

.demo-toggle {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(13,15,17,0.72); color: #faf7f3; border: 1px solid rgba(255,255,255,0.28);
  cursor: pointer; transition: background-color 140ms ease;
}
.demo-toggle:hover { background: rgba(13,15,17,0.92); }
.demo-toggle svg { width: 15px; height: 15px; fill: currentColor; }
.demo-toggle .ic-play { display: none; }
.demo-toggle[data-state="paused"] .ic-pause { display: none; }
.demo-toggle[data-state="paused"] .ic-play { display: block; }

.caption {
  display: flex; align-items: center; gap: 9px; margin-top: 30px;
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-subtle); letter-spacing: 0.04em;
}
.caption .dash { width: 18px; height: 1px; background: #c0b3a4; flex: none; }

@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-right: var(--pad-x); }
}
@media (max-width: 560px) {
  .rig { padding-left: 0; }
  .estop, .cradle, .cradle-clip { display: none; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .stat { padding: 18px 16px; border-top: 1px solid var(--rule); }
  .stat:first-child { padding-left: 0; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ── Steps (how it works) ── */
.step {
  display: flex; gap: 36px; align-items: flex-start;
  padding: 34px 0; border-top: 1px solid var(--rule);
}
.steps > .step:first-child { border-top: 2px solid var(--ink); }
.steps > .step:last-child { border-bottom: 1px solid var(--rule); }
.step .num {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 0.85; color: var(--ember-num); width: 120px; flex: none;
}
.step .name { font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 1.9vw, 1.688rem); width: 340px; flex: none; }
.step p { max-width: 660px; }
@media (max-width: 900px) {
  .step { flex-wrap: wrap; gap: 16px 24px; }
  .step .num { width: 64px; font-size: 2.25rem; }
  .step .name { width: auto; flex: 1 1 240px; }
  .step p { flex: 1 1 100%; }
}

/* ── Band (tinted full-bleed section) ── */
.band {
  background: var(--paper-2);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin-top: clamp(64px, 8vw, 100px); padding: clamp(56px, 6.5vw, 80px) 0;
}
main > .band:last-child { border-bottom: 0; }
.band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.4vw, 64px); align-items: start; }
ul { list-style: none; margin: 0; padding: 0; }

/* ── Split (copy + media) ── */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
.split-even { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.2vw, 60px); align-items: start; }
/* Grid items default to min-width:auto, a content-based floor that makes a track
   overflow rather than shrink. Nothing in these layouts wants that. */
.split > *, .split-even > *, .band-grid > * { min-width: 0; }
@media (max-width: 960px) { .split, .split-even, .band-grid { grid-template-columns: 1fr; } }

/* Quad card grid — hairline gaps done with background bleed */
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--rule); }
.quad > div { background: var(--paper); padding: 22px; }
.quad h3 { font-size: 1.063rem; margin-bottom: 7px; }
.quad p { font-size: 0.875rem; line-height: 1.55; color: var(--fg-subtle); }
@media (max-width: 520px) { .quad { grid-template-columns: 1fr; } }

.media-frame {
  background: var(--paper-2); border: 1px solid var(--rule); padding: 20px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
}
.media-frame > img { display: block; width: 100%; height: auto; }

.rig-portrait {
  /* Capped well below the hero case so the rotated device reads as the narrower
     orientation. The internals are no longer an exact fit at a fixed size — the
     screen shrinks to whatever the case can give it (see .screen-portrait). */
  position: relative; width: 100%; max-width: 420px; margin: 0 auto;
  padding-top: 77px; padding-bottom: 23px;
}
.estop-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; }
.estop-top-body {
  position: relative; width: 97px; height: 91px; padding-top: 7px; box-sizing: border-box;
  display: flex; align-items: flex-start; justify-content: center;
  border-radius: 47px 47px 10px 10px;
  background: linear-gradient(200deg, #5b6067 0%, #3f444a 46%, #272b30 100%);
  box-shadow: 0 -11px 23px rgba(20,17,14,0.36), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 5px 8px rgba(0,0,0,0.25);
}
.estop-top .estop-collar { width: 74px; height: 74px; }
.estop-top .estop-button { width: 66px; height: 66px; left: 4px; top: 4px; }
.estop-top .estop-button svg { width: 53px; height: 53px; }

.cradle-bottom {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 202px; height: 36px; z-index: 4; border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg, #15181b, #252a2e 40%, #1b1e21);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 -8px 20px rgba(0,0,0,0.3);
}
.cradle-clip-bottom {
  position: absolute; bottom: 6px; width: 18px; height: 7px;
  background: #0a0b0d; border-radius: 2px; z-index: 5;
}
.cradle-clip-bottom.a { left: calc(50% - 63px); }
.cradle-clip-bottom.b { left: calc(50% + 45px); }

.screen-portrait { width: 420px; max-width: 100%; min-width: 0; aspect-ratio: 892 / 1230; }

.rig-portrait .case-inner { display: flex; flex-direction: row; align-items: center; justify-content: center; }
.nav-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 70px; width: 7px; margin-right: 11px; flex: none; }
.nav-col span { width: 7px; border-radius: 2px; background: #22262a; display: block; }
.nav-col span:nth-child(1), .nav-col span:nth-child(3) { height: 22px; }
.nav-col span:nth-child(2) { height: 30px; }
.sensor-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; margin-left: 9px; flex: none; }
.sensor-col span { width: 5px; height: 5px; border-radius: 50%; background: #22262a; display: block; }
@media (max-width: 560px) {
  .estop-top, .cradle-bottom, .cradle-clip-bottom { display: none; }
  .rig-portrait { padding-top: 0; padding-bottom: 0; }
  /* Full-bleed like .stage and the ink bands: negative margins cancel .wrap's
     gutter so the tint reaches both edges, then the padding puts it back so the
     tablet still lines up with the copy above it. Side borders would cut across
     the bleed, so they go. */
  .media-frame {
    margin-left: calc(var(--pad-x) * -1);
    margin-right: calc(var(--pad-x) * -1);
    border-left: 0; border-right: 0;
    padding: 30px var(--pad-x) 26px;
  }
  /* The bezel is fixed pixels, so on a phone it eats a third of the device.
     Thinner chrome gives the screenshot the room instead. */
  .rig-portrait .case { padding: 11px; border-radius: 14px; }
  .rig-portrait .case-inner { padding: 8px; }
  .nav-col { gap: 40px; margin-right: 7px; }
  .sensor-col { margin-left: 6px; }
}

/* ── Dark section ── */
.dark {
  background: var(--ink); color: var(--on-ink);
  margin-top: clamp(64px, 8vw, 100px); padding: clamp(56px, 6vw, 76px) 0 clamp(64px, 6.5vw, 84px);
}
.dark-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 38px; }
.dark-head .eyebrow { color: var(--ember); }
.dark-head .hint { font-family: var(--mono); font-size: 12px; color: var(--on-ink-subtle); letter-spacing: 0.08em; }
@media (max-width: 720px) { .dark-head .hint { display: none; } }

.control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--ink-2); }
.control-grid > div { background: var(--ink); padding: 28px 24px 32px; }
.control-grid h3 { font-size: 1.313rem; margin-bottom: 12px; }
.control-grid p { font-size: 0.875rem; line-height: 1.6; color: #b3a89b; }
.control-grid .featured { background: var(--ember); color: var(--ink); }
.control-grid .featured p { color: var(--on-ember); }
@media (max-width: 1100px) { .control-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .control-grid { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { }
.tbl { width: 100%; border-collapse: collapse; text-align: left; }
.tbl th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-label); font-weight: 400; padding: 0 12px 12px 0; border-bottom: 2px solid var(--ink);
}
.tbl td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); font-size: 0.938rem; vertical-align: baseline; }
.tbl td:first-child { font-family: var(--mono); font-size: 0.844rem; font-weight: 500; width: 110px; }
.tbl td:nth-child(2) { color: var(--fg-muted); }
.tbl td:last-child { font-size: 0.844rem; color: var(--fg-subtle); width: 150px; padding-right: 0; }
@media (max-width: 420px) { }

/* ── In the box ── */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--rule); margin-bottom: 2px; }
.trio > div { background: var(--paper-2); padding: 32px 30px 34px; border-top: 3px solid var(--ember); }
.trio h3 { font-size: 1.438rem; line-height: 1.2; margin-bottom: 12px; }
.trio p { font-size: 0.938rem; line-height: 1.6; color: var(--fg-muted); }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
}
.cta-actions { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.cta-actions .btn { width: 100%; justify-content: center; padding: 19px 32px; font-size: 16px; }
@media (max-width: 860px) { .cta-actions { max-width: none; } }

/* ── Footer ── */
footer { background: var(--ink); color: var(--on-ink); padding: 42px 0 50px; }
.foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.foot-brand { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.03em; }
.foot-brand span { color: var(--on-ink-subtle); font-weight: 500; font-family: var(--mono); font-size: 12px; letter-spacing: normal; }
.foot-meta { font-family: var(--mono); font-size: 12px; color: var(--on-ink-subtle); margin-top: 9px; }
.foot-meta a:hover { color: var(--on-ink); }
.disclaimer { font-size: 11.5px; color: #8b8177; max-width: 400px; text-align: right; line-height: 1.55; }
.foot-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.foot-meta a:hover, .foot-link:hover { color: var(--on-ink); }
@media (max-width: 720px) {
  .foot { flex-direction: column; align-items: flex-start; }
  .disclaimer { text-align: left; }
}

/* ── Motion (progressive enhancement; only when JS runs and motion is allowed) ── */
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js-anim .reveal { opacity: 0; }
.js-anim .reveal.in { animation: rise-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Signature block under the headline. The mark keeps its own colours — a brand
   mark, not a palette element. */
.byline {
  display: flex; align-items: center; gap: 18px;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule-band);
}
.org-mark { width: 54px; height: auto; flex: none; }
.byline-org { font-family: var(--display); font-weight: 700; font-size: 1.031rem; letter-spacing: 0.01em; }
.byline-role { font-size: 0.844rem; color: var(--fg-subtle); margin-top: 2px; }

/* ── 404 ── */
.notfound { padding: clamp(72px, 10vw, 140px) var(--pad-x) clamp(80px, 11vw, 160px); max-width: 820px; }
.notfound h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.05; margin-top: 22px; }
.notfound .lead { max-width: 60ch; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.dark-lead {
  max-width: 74ch; margin-bottom: 34px;
  font-size: 1.094rem; line-height: 1.62; color: var(--on-ink-muted);
}
.dark-foot { margin-top: 26px; font-size: 0.969rem; line-height: 1.6; color: var(--on-ink-subtle); }
.dark-foot a { color: var(--ember); }
.dark-foot a:hover { color: var(--ember-hi); }

/* Tinted callout inside a paper section. */
.inset { background: var(--paper-2); border: 1px solid var(--rule); padding: 26px 28px; }
.inset > .eyebrow-sm { color: var(--ember-deep); margin-bottom: 16px; }

/* Click-to-play video, full-bleed above its section: the poster is ours, the
   iframe only arrives on press. */
.video { margin: 0 0 clamp(44px, 5.4vw, 76px); }
.video-frame {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  max-height: min(78vh, 860px);
  padding: 0; border: 0; background: var(--ink);
  cursor: pointer; color: var(--on-ink);
}
.video-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.video-play {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ember); transition: background-color 140ms ease;
}
.video-play svg { width: 29px; height: 29px; fill: var(--ink); margin-left: 3px; }
.video-frame:hover .video-play, .video-frame:focus-visible .video-play { background: var(--ember-hi); }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* part_present → RI[1] */
.tag-map { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tag-map code { font-size: 1rem; padding: 12px 16px; }
.tag-name { background: var(--ink); color: var(--on-ink); }
.tag-addr { background: var(--paper-3); color: var(--fg); }
.tag-arrow { font-family: var(--mono); color: var(--ember-deep); }

.link-arrow {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  color: var(--ember-deep); border-bottom: 2px solid var(--ember);
  display: inline-block; padding-bottom: 2px;
}
.link-arrow:hover { color: var(--ink); }

/* Display-weight pull line inside body copy. */
.pull {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.3;
  color: var(--fg); margin-bottom: 20px;
}

/* Worst case / best case. */
.cases { padding: 22px 24px; background: var(--paper); border-left: 3px solid var(--ember); }
.cases p { font-size: 1.031rem; line-height: 1.64; color: var(--fg-muted); }
.cases p + p { margin-top: 10px; }
.cases strong { color: var(--fg); font-weight: 600; }

/* ── Pricing (shares the demo band, so its hairlines are the in-band rule) ── */
.pricing { margin-bottom: clamp(48px, 6vw, 76px); }
.price-grid {
  display: grid; grid-template-columns: 1fr 1fr 1.15fr;
  margin-top: 22px;
  border-top: 1px solid var(--rule-band); border-bottom: 1px solid var(--rule-band);
}
.price-grid > * { min-width: 0; }
.price-cell { padding: 30px 0 34px; }
.price-cell + .price-cell {
  border-left: 1px solid var(--rule-band);
  padding-left: clamp(24px, 3.4vw, 44px);
}
.price-cell:not(:last-child) { padding-right: clamp(24px, 3.4vw, 44px); }
.price-num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 5.4vw, 4.5rem); line-height: 0.92; letter-spacing: -0.02em;
}
.price-name { font-size: clamp(1.125rem, 1.5vw, 1.313rem); margin: 18px 0 8px; }
.price-note { font-size: 0.969rem; line-height: 1.6; color: var(--fg-muted); max-width: 34ch; }

.price-terms ul { margin-top: 18px; }
.price-terms li {
  padding: 12px 0; font-size: 0.969rem; line-height: 1.6; color: var(--fg-muted);
  border-bottom: 1px solid var(--rule-band);
}
.price-terms li:last-child { border-bottom: 0; padding-bottom: 0; }

.price-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap; padding-top: 24px;
}
.price-trial {
  font-family: var(--display); font-weight: 700; font-size: 1.063rem; line-height: 1.4;
  padding-left: 16px; border-left: 3px solid var(--ember);
}
.price-aside { font-size: 0.938rem; color: var(--fg-subtle); }

@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; border-bottom: 0; }
  .price-cell { padding: 26px 0 28px; }
  .price-cell + .price-cell {
    border-left: 0; border-top: 1px solid var(--rule-band); padding-left: 0;
  }
  .price-cell:not(:last-child) { padding-right: 0; }
  .price-foot { border-top: 1px solid var(--rule-band); }
}

/* ── FAQ ── */
.faq { display: grid; grid-template-columns: 1fr 1.9fr; gap: clamp(32px, 5vw, 78px); align-items: start; }
/* Sticky needs a grid item shorter than the track, hence align-items:start above.
   Offset clears the sticky site header. */
.faq-head { position: sticky; top: calc(var(--nav-h) + 36px); }
.faq-item { display: flex; gap: 20px; padding: 28px 0; border-top: 1px solid var(--rule); }
.faq-list > .faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-num {
  font-family: var(--mono); font-size: 12px; color: var(--ember-deep);
  flex: none; padding-top: 5px;
}
.faq-item h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 10px; }
.faq-item p { font-size: 1rem; line-height: 1.62; color: var(--fg-muted); max-width: 64ch; }
.faq-item p + p { margin-top: 14px; }
@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
  .faq-head { position: static; }
}

/* ── Newsletter ── */
.subscribe { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.sub-row { display: flex; gap: 10px; }
.sub-row input {
  flex: 1; min-width: 0; font: 400 1rem var(--body); color: var(--fg);
  background: var(--paper); border: 1.5px solid var(--ink);
  padding: 17px 18px;
}
.sub-row .sub-name { flex: 0 1 34%; }
.sub-row input::placeholder { color: var(--fg-subtle); }
.sub-row input:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.sub-row .btn { flex: none; padding: 17px 26px; font-size: 15px; }
.sub-note { font-family: var(--mono); font-size: 12px; color: var(--fg-subtle); margin-top: 12px; }
@media (max-width: 900px) {
  .subscribe { grid-template-columns: 1fr; }
  .sub-row { flex-direction: column; }
  .sub-row .sub-name { flex: none; }
}

/* ── Privacy notice page (body.page-doc) ── */

.page-doc h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.05; margin: 22px 0 0; }
.page-doc .lead { font-size: clamp(1.05rem, 1.35vw, 1.156rem); max-width: 68ch; }
.page-doc .rule-mark { margin: 28px 0 26px; }
.page-doc footer { margin-top: clamp(56px, 6vw, 84px); }

.doc-head { padding: clamp(52px, 6vw, 88px) 0 clamp(32px, 3.4vw, 48px); border-bottom: 1px solid var(--rule); }
.stamp { font-family: var(--mono); font-size: 11.5px; color: var(--fg-label); margin-top: 26px; letter-spacing: 0.04em; }

.doc { display: grid; grid-template-columns: 240px 1fr; gap: 0; }
.doc > * { padding: 30px 0 34px; border-bottom: 1px solid var(--rule); }
.doc > dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-label); padding-right: 30px;
}
.doc > dd { margin: 0; max-width: 72ch; }
.doc h2 { font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 12px; }
.doc p, .doc li { font-size: 1rem; line-height: 1.66; color: var(--fg-muted); }
.doc p + p { margin-top: 14px; }
.doc address {
  font-style: normal; font-size: 1rem; line-height: 1.66; color: var(--fg-muted);
  margin: 16px 0; padding-left: 16px; border-left: 1px solid var(--rule);
}
.doc ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
.doc ul + p { margin-top: 18px; }
.doc li { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); display: flex; gap: 12px; }
.doc li:last-child { border-bottom: 0; padding-bottom: 0; }
.doc li .dash { color: var(--ember-deep); font-family: var(--mono); flex: none; }
.doc strong { color: var(--fg); font-weight: 600; }
.doc a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) {
  .doc { grid-template-columns: 1fr; }
  .doc > dt { padding: 26px 0 0; border-bottom: 0; }
  .doc > dd { padding-top: 12px; }
}

/* Reopens the cookie choice from inside the prose. */
.btn-inline {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--fg); text-decoration: underline; text-underline-offset: 2px;
}