/* ============================================================
   Evermac site styles. Dark only. Plain CSS, no build step.
   Animates transform and opacity only.
   The visual language is the machine itself, drawn orthographically:
   overhead view for the fleet, front elevation for the product, rear
   elevation for the KVM. Hairline edges, one light from the top left.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  --bg: #0a0a0b;
  --bg-elev: #111113;
  --surface: #16161a;
  --surface-2: #1c1c21;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --card-highlight: rgba(255, 255, 255, 0.06);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

  --text: #fafafa;
  --text-2: #a1a1aa;
  --text-3: #8a8a95;   /* 5.2:1 on --surface, where it is actually used */

  --accent: #3fcf8e;
  --accent-ink: #06130c;
  --accent-soft: rgba(63, 207, 142, 0.12);
  --glow: rgba(63, 207, 142, 0.16);
  --brand: #3fcf8e;

  /* Drawing surfaces. The light is top left: top face lightest, front face mid, edges hairline.
     Values are separated on purpose: page < shelf < front face < top face. */
  --hw-top: #30303a;
  --hw-face: #1e1e24;
  --hw-front: #121216;
  --hw-shelf: #0e0e11;
  --hw-edge: rgba(255, 255, 255, 0.18);
  --hw-light: rgba(255, 255, 255, 0.12);
  --hw-port: rgba(255, 255, 255, 0.3);

  /* Type scale */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-display: clamp(2rem, 0.8rem + 2.6vw, 3rem);   /* 32px at 360, 48px on desktop; the three written headline lines hold beside the drawing */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3: 1.125rem;
  --fs-lede: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-fine: 0.8125rem;
  --fs-xs: 0.75rem;
  --fs-2xs: 0.6875rem;
  --fs-num: 2.5rem;
  --measure: 66ch;

  /* Geometry. The unit is a rounded square; its corner ratio sets the card radius. */
  --radius: 12px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --gutter: 16px;
  --container: 1200px;
  --container-wide: 1280px;
  --nav-h: 64px;

  /* Section rhythm */
  --s-lg: 128px;
  --s-md: 104px;
  --s-sm: 72px;

  /* Motion */
  --reveal-y: 14px;
  --reveal-ms: 360ms;
  --reveal-step: 70ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }   /* anchor offset is scroll-margin-top on [id]; do not also pad here */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: var(--accent-ink); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.1; }
h1 { font-size: var(--fs-display); letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
figure { margin: 0; }
strong { font-weight: 600; color: var(--text); }
code { font-family: var(--mono); font-size: 0.9em; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1360px) {
  .wide { margin-left: calc((var(--container) - var(--container-wide)) / 2); margin-right: calc((var(--container) - var(--container-wide)) / 2); }
}

.skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.skip:focus { top: 12px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.btn:focus-visible, .notify input:focus-visible { border-radius: var(--radius); }
.stock-filter input:focus { outline: none; }
.stock-filter input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Reveal (fade-and-rise, fires once; below the fold only) ---------- */
.js .reveal { opacity: 0; transform: translateY(var(--reveal-y)); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--reveal-ms) var(--ease-out), transform var(--reveal-ms) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--reveal-step)); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; user-select: none; box-shadow: inset 0 1px 0 var(--card-highlight); transition: transform 150ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, opacity 150ms ease; }
.btn:hover { transform: translateY(-1px); border-color: var(--text-3); background: var(--surface-2); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }
.btn:disabled { cursor: default; opacity: 0.6; transform: none; }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: none; }
.btn-accent:hover { background: var(--accent); border-color: transparent; opacity: 0.92; }
.btn-accent:active { opacity: 0.84; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 40px; padding: 0 14px; font-size: var(--fs-small); }
.btn-block { width: 100%; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: transparent; transition: background-color 200ms ease; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); opacity: 0; transition: opacity 200ms ease; }
.nav.is-scrolled { background: rgba(10, 10, 11, 0.78); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.nav.is-scrolled::after { opacity: 1; }
.nav-inner { display: flex; align-items: center; height: var(--nav-h); gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; letter-spacing: -0.02em; font-size: 1.0625rem; }
.brand-mark { width: 20px; height: 20px; border-radius: var(--radius-sm); background: var(--brand); position: relative; flex: none; }
.brand-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 2px; background: var(--accent-ink); opacity: 0.85; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 0.9375rem; font-weight: 500; transition: color 150ms ease, background-color 150ms ease; }
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; }
@media (max-width: 599px) {
  .nav-inner { gap: 12px; }
  .menu-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; margin-left: auto; border-radius: var(--radius); border: 1px solid var(--border-strong); background: transparent; font-size: var(--fs-small); font-weight: 500; cursor: pointer; }
  .nav-actions { margin-left: 0; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: var(--nav-h); flex-direction: column; gap: 0; padding: 8px var(--gutter) 12px; background: var(--bg-elev); border-bottom: 1px solid var(--border); }
  .nav-links.is-open { display: flex; }
  .nav-links a { min-height: 48px; font-size: 1rem; }
  .btn-sm { height: 44px; }
}

/* ---------- Sections and rhythm ---------- */
.section { padding: var(--s-md) 0; }
.section-sm { padding: var(--s-sm) 0; }
.band-elev { background: var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: var(--measure); margin-bottom: 44px; }
.section-head .eyebrow { margin-bottom: 14px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.01em; color: var(--text-2); font-family: var(--mono); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* The hero eyebrow is a location badge, not a floating label */
.eyebrow-hero { font-family: var(--font); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--text); padding: 8px 14px 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.03); }
.eyebrow-hero::before { width: 8px; height: 8px; }
.fine { font-size: var(--fs-fine); color: var(--text-3); line-height: 1.5; }
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
@media (max-width: 720px) { :root { --s-lg: 88px; --s-md: 80px; --s-sm: 56px; } .section-head { margin-bottom: 32px; } }

/* ---------- Card surface ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 0 1px 0 var(--card-highlight), var(--card-shadow); }
.card-hover { transition: transform 150ms var(--ease-out), border-color 150ms ease; }
.card-hover:hover { transform: translateY(-2px); border-color: var(--border-strong); }

/* ---------- The drawings ---------- */
/* overhead view unit */
.u-shelf { fill: var(--hw-shelf); stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.u-shadow { fill: url(#g-shadow); }
.u-body { fill: var(--u-fill, url(#g-top)); stroke: var(--hw-edge); stroke-width: 1; }
.u-bevel { fill: none; stroke: rgba(255, 255, 255, 0.045); stroke-width: 1; }
.u-lip { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; stroke-linecap: round; }
.u-light { fill: none; stroke: var(--hw-light); stroke-width: 1; stroke-linecap: round; }
.u-back { fill: none; stroke: rgba(0, 0, 0, 0.5); stroke-width: 1.2; stroke-linecap: round; }
.u-front { fill: var(--u-front-fill, url(#g-front)); stroke: var(--hw-edge); stroke-width: 1; }
.u-port { fill: #040405; stroke: rgba(255, 255, 255, 0.38); stroke-width: 1; }
.u-base { fill: #040405; stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.u-led { fill: var(--u-led, rgba(255, 255, 255, 0.55)); }
/* depth: back rows sit quieter */
.u-row-back { opacity: 0.45; }
.u-row-mid { opacity: 0.8; }
.u-row-front { opacity: 1; }
/* yours: lit top, lit indicator, and the row opacity does not apply to it */
.u-yours { --u-fill: url(#g-top-lit); --u-front-fill: url(#g-front-lit); --u-led: var(--accent); }
.u-row-yours { opacity: 1; }
.u-ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.u-led-on { fill: var(--accent); }
.u-leader { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.u-tag { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.u-tag-k { fill: var(--text-3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; }
.u-tag-v { fill: var(--text); font-family: var(--mono); font-size: 10.5px; }
/* front elevation */
.e-body { fill: url(#g-elev); stroke: var(--hw-edge); stroke-width: 1; }
.e-top { fill: none; stroke: var(--hw-light); stroke-width: 1; stroke-linecap: round; }
.e-port { fill: var(--bg); stroke: var(--hw-port); stroke-width: 1; }
.e-led { fill: rgba(255, 255, 255, 0.35); }
.e-base { fill: #050506; stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
/* rear elevation with the KVM */
.p-body { fill: var(--hw-face); stroke: var(--hw-edge); stroke-width: 1; }
.p-hi { stroke: var(--hw-light); stroke-width: 1; fill: none; }
.p-port { fill: var(--bg); stroke: var(--hw-port); stroke-width: 1; }
.p-live { stroke: var(--accent); }
.p-cable { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; opacity: 0.8; }
.p-led { fill: var(--accent); }
.p-label { fill: var(--text-2); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; min-height: min(calc(100vh - var(--nav-h)), 880px); display: flex; }
/* one static wash, and the rack floor: a dot at every unit pitch, fading at the edges */
.hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none; left: 50%; top: -380px; width: 1400px; height: 900px; transform: translateX(-50%); background: radial-gradient(ellipse at center, var(--glow) 0%, transparent 60%); }
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
  background-size: 28px 28px; background-position: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}
.hero-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; padding-top: 40px; padding-bottom: 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; margin: auto 0; }
.shelf { border-radius: var(--radius); overflow: hidden; }
.hero-copy h1 { margin: 22px 0 22px; }
.hero-copy .lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.hero-cta { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cta .btn { height: 48px; padding: 0 24px; font-size: 1rem; }

.shelf { width: 100%; }
.overhead { width: 100%; height: auto; }
/* the hero moment: everything is visible from the first frame. The ring settles from slightly large and the
   indicator pulses once. Neither carries meaning, so a viewer who arrives mid-motion has missed nothing. */
.js .overhead-yours .u-ring { animation: ring-settle 700ms var(--ease-out) 200ms; transform-box: fill-box; transform-origin: center; }
.js .overhead-yours .u-led-on { animation: led-pulse 900ms ease-out 400ms; }
@keyframes ring-settle { from { transform: scale(1.05); } to { transform: none; } }
@keyframes led-pulse { 0% { opacity: 1; } 40% { opacity: 0.3; } 100% { opacity: 1; } }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.stats li { display: grid; grid-template-rows: auto 1fr; gap: 4px; align-content: start; }
.stat-v { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; min-height: 2.4em; }   /* two title lines reserved so the four body texts start on one line */
.stat-k { font-size: var(--fs-small); color: var(--text-2); line-height: 1.55; }
.stat-k a { color: var(--accent); }
.stat-k a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero-wrap { padding-top: 48px; padding-bottom: 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy h1 { max-width: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; }
}
@media (max-width: 480px) { .hero-cta .btn { flex: 1 1 100%; } .stats { grid-template-columns: 1fr; gap: 18px; } .stat-v { min-height: 0; } }

/* ---------- Our Guarantee: the datasheet ---------- */
.sheet { border-top: 1px solid var(--border); }
.row { display: grid; grid-template-columns: 56px minmax(0, 260px) minmax(0, 1fr) 170px; gap: 12px 32px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--border); }
.row-n { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3); padding-top: 4px; font-variant-numeric: tabular-nums; }
.row-t { font-size: 1.0625rem; }
.row-d { color: var(--text-2); font-size: var(--fs-small); line-height: 1.6; max-width: 58ch; }
.row-v { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-2); padding-top: 4px; text-align: right; white-space: nowrap; }
.row-d p + p { margin-top: 0.9em; }
.row-d a { color: var(--accent); }
.row-d a:hover { text-decoration: underline; text-underline-offset: 3px; }
.row-fig { grid-template-columns: 56px minmax(0, 200px) minmax(0, 1fr) minmax(0, 460px); padding: 40px 0; }
.row-fig .row-t { font-size: 1.25rem; letter-spacing: -0.015em; }
.row-art { justify-self: end; width: 100%; max-width: 460px; height: auto; }
.kvm-art { max-width: 460px; }
/* Row scenes: rendered objects on one plate, one camera and one light (top left, front) for all six.
   Face colors are computed per face; text and UI surfaces take the page palette. */
.a-plate { fill: var(--hw-shelf); stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.a-card, .a-plate-tag { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.a-card-hi { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.a-panel { fill: rgba(24, 24, 29, 0.95); stroke: rgba(255, 255, 255, 0.15); stroke-width: 1; }
.a-hair { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.a-k { fill: var(--text-3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; }
.a-v { fill: var(--text); font-family: var(--mono); font-size: 10.5px; }
.a-2 { fill: var(--text-2); font-family: var(--mono); font-size: 10px; }
.a-3 { fill: var(--text-3); font-family: var(--mono); font-size: 10px; }
.a-acc { fill: var(--accent); font-family: var(--mono); font-size: 10px; }
.a-vs { fill: var(--text); font-family: var(--mono); font-size: 9.5px; }
.a-field { fill: var(--bg-elev); stroke: var(--border-strong); stroke-width: 1; }
.a-btn { fill: var(--accent-ink); font-family: var(--font); font-size: 11px; font-weight: 600; }
.a-field-div { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.a-mark { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.a-amt { fill: var(--text); font-family: var(--font); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.a-fine { fill: var(--text-3); font-family: var(--font); font-size: 9px; }
.a-co-left { fill: #101014; }
.a-co-right { fill: var(--surface); }
.a-lbl { fill: var(--text); font-family: var(--mono); font-size: 10.5px; paint-order: stroke; stroke: var(--hw-shelf); stroke-width: 4px; stroke-linejoin: round; }
.a-net { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.a-net-acc { fill: none; stroke: rgba(63, 207, 142, 0.28); stroke-width: 1; }
.a-net-node { fill: rgba(255, 255, 255, 0.32); }
.a-trace { fill: none; stroke: rgba(63, 207, 142, 0.26); stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: round; }
.a-via { fill: rgba(63, 207, 142, 0.5); }
.a-hole { fill: #08080b; stroke: rgba(255, 255, 255, 0.22); stroke-width: 0.7; }
.a-port { fill: #08080b; stroke: rgba(255, 255, 255, 0.34); stroke-width: 0.8; }
.a-land { fill: rgba(255, 255, 255, 0.04); }
.a-coast { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.a-coast-2 { stroke-width: 1; stroke: rgba(255, 255, 255, 0.4); }
.a-grat { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.a-map-k { fill: var(--text-3); font-family: var(--mono); font-size: 9.5px; }
.a-node-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.a-scale { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.a-credit { fill: var(--text-3); font-family: var(--mono); font-size: 8px; opacity: 0.8; }
@media (max-width: 960px) {
  .row, .row-fig { grid-template-columns: 44px minmax(0, 1fr); }
  .row-d { grid-column: 2; }
  .row-v { grid-column: 2; text-align: left; padding-top: 0; }
  .row-art { grid-column: 2; justify-self: start; margin-top: 8px; }
}

/* ---------- Sign in ---------- */
.auth { padding: 64px 0 var(--s-lg); }
.auth-card { max-width: 420px; margin: 0 auto; padding: 32px; }
.auth-card .eyebrow { margin-bottom: 12px; }
.auth-card h1 { font-size: 1.75rem; letter-spacing: -0.02em; margin: 0 0 24px; }
.auth-form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--fs-small); color: var(--text-2); }
.field input { height: 44px; width: 100%; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); font: inherit; font-size: 0.9375rem; transition: border-color 150ms ease; }
.field input:hover { border-color: var(--text-3); }
.field input:focus { border-color: var(--accent); }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-card .back { margin: 16px 0 0; }
.doc .auth-form .auth-error { display: none; margin-top: 4px; font-size: var(--fs-small); color: #ff7b7b; line-height: 1.5; }
.doc .auth-form.has-error .auth-error { display: block; }

/* ---------- Contact dialog ---------- */
.contact { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); }
.contact::backdrop { background: rgba(0, 0, 0, 0.6); }
.contact-form { display: grid; gap: 16px; padding: 28px; }
.contact-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.contact-head h2 { font-size: 1.5rem; }
.contact-close { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; font-size: 14px; }
.contact-close:hover { color: var(--text); background: var(--surface-2); }
.contact .field textarea { width: 100%; min-height: 160px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); font: inherit; font-size: 0.9375rem; line-height: 1.5; resize: vertical; }
.contact .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.contact .opt { color: var(--text-3); font-weight: 400; }
.contact-actions { display: flex; justify-content: flex-end; }
.contact-error { display: none; font-size: var(--fs-small); color: #ff7b7b; }
.contact.has-error .contact-error { display: block; }
.contact-done { display: none; font-size: var(--fs-body); color: var(--text); line-height: 1.6; }
.contact.is-done .field, .contact.is-done .contact-actions, .contact.is-done .contact-error { display: none; }
.contact.is-done .contact-done { display: block; }
.auth-form .btn { margin-top: 8px; }
@media (max-width: 720px) { .auth { padding: 40px 0 var(--s-md); } .auth-card { padding: 24px; } }

/* ---------- Specs & Pricing ---------- */
.machines-bar { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 20px; }
.availability { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-2); }
.stock-filter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-small); color: var(--text-2); cursor: pointer; user-select: none; }
.stock-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stock-filter .switch { position: relative; width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border-strong); transition: background-color 150ms ease, border-color 150ms ease; }
.stock-filter .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: transform 150ms var(--ease-out), background-color 150ms ease; }
.stock-filter input:checked + .switch { background: var(--accent); border-color: var(--accent); }
.stock-filter input:checked + .switch::after { transform: translateX(14px); background: var(--accent-ink); }
.stock-filter:hover { color: var(--text); }

.machines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }   /* equal height; the CTA blocks share a fixed height so nothing stretches into a void */
.machines.is-filtered { grid-template-columns: repeat(auto-fit, minmax(260px, 400px)); justify-content: center; }
@media (max-width: 960px) { .machines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: the cards scroll sideways with snap points, one card per snap, the next card peeking in from the right.
   The scroller bleeds to the viewport edges so the peek sits at the edge; the scrollbar is hidden but the region
   stays scrollable, focusable and in document order. */
@media (max-width: 560px) {
  .machines, .machines.is-filtered {
    display: flex; grid-template-columns: none; gap: 12px; justify-content: flex-start;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 8px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .machines::-webkit-scrollbar { display: none; }
  .machines .machine { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; }
  .machines:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
  .machines-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
}
@media (min-width: 561px) { .machines-dots { display: none; } }
.machines-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.machines-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); opacity: 0.5; transition: transform 150ms var(--ease-out), opacity 150ms ease; }
.machines-dots button[aria-current="true"]::before { background: var(--accent); opacity: 1; transform: scale(1.25); }

.machine { display: flex; flex-direction: column; padding: 22px; }
/* the object, front elevation, one scale on every card: the boxes are cropped to the object, so the
   Studio's drawing is taller because the Studio is taller */
.elev { width: 100%; height: auto; margin: 0 0 14px; padding: 0 8px; }
.machine-head { margin-bottom: 8px; }
.machine-chip { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.2; }
.machine-mem { color: var(--text-2); font-weight: 500; }
.machine-form { font-size: var(--fs-fine); color: var(--text-3); margin-top: 3px; }
.machine-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 16px; }
.machine-price .amt { font-size: var(--fs-num); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.machine-price .per { color: var(--text-3); font-size: var(--fs-small); }
.machine-specs { display: grid; grid-template-rows: repeat(7, 34px); margin: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: var(--fs-small); }
.machine-specs div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.machine-specs div + div { border-top: 1px solid var(--border); }
.machine-specs dt { color: var(--text-3); }
.machine-specs dd { margin: 0; color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.machine-line { margin-top: 14px; color: var(--text-2); font-size: var(--fs-small); line-height: 1.5; min-height: 3.9em; }   /* three lines reserved so shorter descriptions do not shift the row below */
.machine-cta { margin-top: auto; padding-top: 20px; }
.machine-cta .badge { margin-bottom: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--text-2); white-space: nowrap; }
.badge-in { color: var(--accent); border-color: rgba(63, 207, 142, 0.35); background: var(--accent-soft); }
.badge-in::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* Coming soon: a bone fill with dark text (about 15:1), distinct from the green Available badge and not a disabled grey */
.badge-soon { color: #15130f; background: #ece7d9; border-color: transparent; }

/* Availability states: nothing dims. The button and badge swap; both blocks share one height so every card matches. */
.machine[data-stock="in"] .machine-cta-out, .machine[data-stock="out"] .machine-cta-in { display: none; }
.machine-cta-in, .machine-cta-out { min-height: 132px; }
.machine-cta-in .fine { margin-top: 10px; }

.notify { display: grid; gap: 8px; }
.notify-status { font-size: var(--fs-small); color: var(--text); line-height: 1.5; }
.notify label { font-size: var(--fs-fine); color: var(--text-2); }
.notify-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.notify-row .btn { padding: 0 14px; }
.notify input[type="email"] { height: 44px; width: 100%; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); font: inherit; font-size: var(--fs-small); transition: border-color 150ms ease; }
.notify input[type="email"]::placeholder { color: var(--text-3); }
.notify input[type="email"]:hover { border-color: var(--text-3); }
.notify input[type="email"]:focus { border-color: var(--accent); }
.notify.has-error input[type="email"] { border-color: #e5484d; }
.notify-error { display: none; font-size: var(--fs-fine); color: #f0a8a8; }
.notify.has-error .notify-error { display: block; }
.notify-done { display: none; font-size: var(--fs-small); color: var(--text); line-height: 1.5; }
.notify.is-done .notify-fields { display: none; }
.notify.is-done .notify-done { display: block; }
.machines-empty { margin-top: 20px; color: var(--text-2); font-size: var(--fs-small); text-align: center; }

/* ---------- Bulk band ---------- */
.bulk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; padding: 40px 44px; overflow: hidden; }
.bulk-copy .eyebrow { margin-bottom: 14px; }
.bulk h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin-bottom: 10px; }
.bulk p { color: var(--text-2); line-height: 1.6; margin-bottom: 24px; }
.overhead-fleet { justify-self: end; max-width: 520px; }
@media (max-width: 860px) { .bulk { grid-template-columns: 1fr; padding: 28px 22px; } .overhead-fleet { justify-self: start; } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.faq-head { position: sticky; top: calc(var(--nav-h) + 24px); }
.faq-head .eyebrow { margin-bottom: 14px; }
.faq { border-top: 1px solid var(--border); }
.faq li { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 20px; padding: 18px 40px 18px 0; min-height: 44px; font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.01em; position: relative; border-radius: var(--radius-sm); transition: color 150ms ease; }
.faq summary .row-n { flex: none; width: 36px; padding-top: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; background: var(--text-3); transition: transform 150ms var(--ease-out); }
.faq summary::before { width: 12px; height: 1.5px; transform: translateY(-50%); }
.faq summary::after { width: 1.5px; height: 12px; right: 13.25px; transform: translateY(-50%); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(90deg); }
.faq summary:hover { color: var(--accent); }
.faq .a { padding: 0 40px 20px 56px; color: var(--text-2); max-width: var(--measure); line-height: 1.6; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } .faq-head { position: static; } .faq .a { padding-left: 0; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 44px 0 52px; color: var(--text-3); font-size: var(--fs-fine); line-height: 1.6; }
.footer-row { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.footer-links { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--text-2); transition: color 150ms ease; }
.footer-links a:hover { color: var(--text); }
.footer p { max-width: 72ch; }
.footer p + p { margin-top: 8px; }

/* ---------- Document pages (privacy), centered ---------- */
.doc { position: relative; padding: 80px 0 var(--s-lg); overflow: hidden; }
.doc::before { content: ""; position: absolute; z-index: 0; pointer-events: none; left: 50%; top: -420px; width: 1400px; height: 860px; transform: translateX(-50%); background: radial-gradient(ellipse at center, var(--glow) 0%, transparent 60%); }
.doc > .container { position: relative; z-index: 1; }
.doc-inner { max-width: 760px; margin: 0 auto; }
.doc .back { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 6px; min-height: 44px; color: var(--text-2); font-size: 0.9375rem; margin-bottom: 28px; transition: color 150ms ease; }
.doc .back:hover { color: var(--text); }
.doc .back::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.doc .eyebrow, .doc .draft { display: flex; width: max-content; max-width: 100%; }
.doc h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -0.03em; line-height: 1.08; margin: 14px 0 16px; }
.doc .lede { font-size: var(--fs-lede); color: var(--text-2); line-height: 1.6; }
.doc h2 { font-size: 1.5rem; margin: 48px 0 14px; }
.doc h3 { font-size: 1.25rem; margin: 28px 0 8px; }
.doc p, .doc li { color: var(--text-2); font-size: 1.0625rem; line-height: 1.65; max-width: var(--measure); }
.doc p + p { margin-top: 18px; }
.doc ul, .doc ol { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 20px; list-style: disc; }
.doc ol { list-style: decimal; }
.doc .meta { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-3); display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 20px 0 28px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: var(--fs-small); }
.doc th, .doc td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.doc th { color: var(--text-3); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.02em; }
.doc td { color: var(--text-2); }
.doc td:first-child { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.draft { align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--text-2); font-family: var(--mono); font-size: var(--fs-xs); }
.doc-actions { margin-top: 44px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) { .doc { padding: 48px 0 var(--s-md); } }

/* ---------- Mobile: roughly half the motion, static hero ---------- */
@media (max-width: 720px) {
  :root { --reveal-y: 8px; --reveal-ms: 220ms; --reveal-step: 40ms; }
  .js .overhead-yours .u-ring, .js .overhead-yours .u-led-on { animation: none; }
  .notify-row { grid-template-columns: 1fr; }   /* narrow two-column cards: the button goes under the field */
}
/* On phones the shelf is under 330px wide and the callout's type would be about 5px: the ring and the lit
   indicator still mark the machine, the label and leader are dropped, and the accessible name carries the text. */
@media (max-width: 600px) {
  .overhead-yours .u-label, .overhead-yours .u-leader { display: none; }
  .shelf { aspect-ratio: 640 / 462; }   /* the box clips the empty callout band below the front row */
}

/* ---------- High contrast / forced colors ---------- */
@media (forced-colors: active) {
  .card, .btn, .badge, .notify input, .field input { border: 1px solid CanvasText; }
  .u-body, .e-body, .p-body { fill: Canvas; stroke: CanvasText; }
  .u-ring, .u-led-on, .p-led, .p-live { stroke: Highlight; fill: Highlight; }
}

/* ---------- Print: everything present, nothing hidden behind a reveal ---------- */
@media print {
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .nav, .skip, .menu-btn { display: none; }
}

/* ---------- Reduced motion: nothing moves, everything is present ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}