/* ==========================================================================
   Uspex Cloud — design system
   Contract: DESIGN.md. Zero JavaScript, zero build step, single stylesheet.
   Sections:
     1. Tokens            5. Layout shell        9.  Landing / firmware
     2. Reset / base      6. Primitives          10. Landing / matrix
     3. Utilities         7. Forms               11. Landing / features..faq
     4. Blueprint         8. Landing / hero      12. Cabinet
                                                 13. Responsive + motion
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* colour */
  --bg: #0b131c;
  --bg-deep: #08101a;
  --bg-glow: #0f1d2b;
  --card: #14212e;
  --card-raise: #182736;
  --inset: #0e1822;
  --text: #e8eef4;
  --muted: #8fa5b8;
  --faint: #7e95aa;
  --accent: #4da3ff;
  --accent-strong: #1f6fb2;
  --accent-dim: rgba(77, 163, 255, .12);
  --border: #22364a;
  --border-soft: rgba(34, 54, 74, .7);
  --hair: rgba(77, 163, 255, .14);
  --ok: #7fe0a7;
  --warn: #f2d38c;
  --bad: #f2a09a;

  /* type */
  --font-ui: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --t-mark: 11px;
  --t-small: 12.5px;
  --t-body: 15px;
  --t-lead: 17px;
  --t-h3: 17px;
  --t-h2: clamp(22px, 3vw, 30px);
  --t-h1: clamp(26px, 3.4vw, 34px);
  --t-display: clamp(31px, 4.6vw, 50px);

  /* space — 4px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* elevation */
  --shadow-sm: 0 2px 10px rgba(3, 12, 22, .35);
  --shadow-md: 0 10px 30px rgba(3, 12, 22, .45);
  --shadow-lg: 0 18px 44px rgba(3, 12, 22, .55);
  --ring-accent: 0 0 0 1px rgba(77, 163, 255, .35);

  /* engineering blueprint grid */
  --blueprint:
    linear-gradient(to right, var(--hair) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, var(--hair) 1px, transparent 1px) 0 0 / 64px 64px;

  --wrap: 1180px;
}

/* ---------- 2. Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.uspex-ui {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 84% -12%, rgba(77, 163, 255, .08), transparent 62%),
    radial-gradient(900px 440px at -12% 28%, rgba(31, 111, 178, .07), transparent 56%),
    var(--bg);
  color: var(--text);
  font: var(--t-body)/1.6 var(--font-ui);
  font-variant-numeric: tabular-nums;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-h1); font-weight: 650; letter-spacing: -.02em; line-height: 1.16; }
h2 { font-size: var(--t-h2); font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
code { font-family: var(--font-mono); font-size: .94em; }
:target { scroll-margin-top: var(--s-9); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* ---------- 3. Utilities ---------- */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mark {
  font-family: var(--font-mono);
  font-size: var(--t-mark);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.uspex-label {
  font-family: var(--font-mono);
  font-size: var(--t-mark);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fb3cc;
}
.uspex-muted { color: var(--muted); }
.small { font-size: var(--t-small); }
.uspex-value { font-size: 20px; font-weight: 600; margin-top: var(--s-1); }
.uspex-value.big { font-size: 28px; }
.ok-txt { color: var(--ok); font-style: normal; }
.muted-txt { color: var(--faint); }
.hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--s-5) 0; }
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--accent-strong); color: #fff;
  padding: var(--s-2) var(--s-4); border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 4. Blueprint backdrop ---------- */
.blueprint { position: relative; isolation: isolate; }
.blueprint::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--blueprint);
  -webkit-mask-image: radial-gradient(120% 100% at 78% 0%, #000 12%, transparent 72%);
  mask-image: radial-gradient(120% 100% at 78% 0%, #000 12%, transparent 72%);
  pointer-events: none;
  border-radius: inherit;
}

/* ---------- 5. Layout shell ---------- */
.uspex-top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(9, 21, 32, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.top-row {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-4);
}
.uspex-brand a {
  color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.uspex-brand a:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; display: block; border-radius: var(--r-xs); }
.brand-tag {
  font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); border-left: 1px solid var(--border);
  padding-left: var(--s-3); margin-left: var(--s-1);
}
.top-actions { margin-left: auto; display: flex; gap: var(--s-3); align-items: center; }
.top-actions a:not(.uspex-btn) { color: #cfe3f2; }
.top-actions form.inline { display: inline; margin: 0; }

.site-nav {
  border-top: 1px solid var(--hair);
  background: rgba(9, 21, 32, .45);
}
.site-nav ul {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-4);
  display: flex; gap: var(--s-1); list-style: none;
  overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity;
}
.site-nav a {
  display: block; white-space: nowrap; scroll-snap-align: start;
  padding: var(--s-3) var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--accent); }

.uspex-wrap { max-width: var(--wrap); margin: 0 auto var(--s-8); padding: 0 var(--s-4); }
.uspex-wrap.wrap-narrow { max-width: 560px; }

.uspex-footer {
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, transparent, rgba(8, 16, 26, .7));
}
.foot-inner { max-width: var(--wrap); margin: 0 auto; padding: var(--s-7) var(--s-4) var(--s-5); }
.foot-cols {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-6) var(--s-5);
}
.foot-col h2 { font-size: var(--t-mark); }
.foot-col ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.foot-col a { display: inline-block; padding: 3px 0; color: var(--muted); font-size: 14px; }
.foot-col a:hover { color: var(--accent); text-decoration: none; }
.foot-about { color: var(--muted); font-size: 14px; margin-top: var(--s-3); max-width: 34em; }
.foot-fine {
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--border-soft);
  display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: space-between;
  color: var(--faint); font-size: var(--t-small);
}

/* ---------- 6. Primitives ---------- */
.uspex-card {
  background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: var(--s-5); margin: var(--s-4) 0; box-shadow: var(--shadow-md);
}
.uspex-card.raise { background: linear-gradient(180deg, var(--card-raise), var(--card)); }
.uspex-card.inset { background: var(--inset); box-shadow: none; }
.uspex-card.narrow { max-width: 560px; margin: var(--s-7) auto; }
.uspex-card > h2 { margin-bottom: var(--s-3); font-size: 19px; }
.uspex-grid { display: grid; gap: var(--s-4); }
.uspex-grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.uspex-grid.four { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Grid items must not inherit their min-content width as a floor: an unbreakable
   string (pool URL, wallet address) would otherwise widen the track and push the
   whole page into horizontal scroll instead of scrolling inside .uspex-table-wrap. */
.uspex-grid > *, .cmd-grid > *, .dev-cards > *, .fw-grid > *, .feat-grid > *,
.fleet-band > *, .steps > *, .metric-strip > *, .foot-cols > *, .auth-shell > * { min-width: 0; }
.uspex-table-wrap { max-width: 100%; }

.uspex-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 40px; padding: var(--s-2) var(--s-4);
  background: var(--accent-strong); border: 1px solid var(--accent-strong); color: #fff;
  border-radius: var(--r-sm); cursor: pointer; font: 500 14px/1 var(--font-ui);
  transition: background .18s ease, border-color .18s ease, transform .14s ease, box-shadow .18s ease;
}
.uspex-btn:hover {
  background: #2a80c9; border-color: #2a80c9; text-decoration: none;
  box-shadow: 0 6px 18px rgba(31, 111, 178, .35);
}
.uspex-btn:active { transform: scale(.98); }
.uspex-btn.secondary { background: transparent; border-color: #3a5568; color: #cfe3f2; }
.uspex-btn.secondary:hover { background: rgba(58, 85, 104, .28); border-color: #4a6b82; box-shadow: none; }
.uspex-btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.uspex-btn.ghost:hover { background: var(--accent-dim); box-shadow: none; }
.uspex-btn.danger { background: transparent; border-color: #b0483f; color: #f2b0ab; }
.uspex-btn.danger:hover { background: #b0483f; border-color: #b0483f; color: #fff; box-shadow: none; }
.uspex-btn.lg { min-height: 48px; padding: var(--s-3) var(--s-5); font-size: 15px; border-radius: var(--r-md); }
.uspex-btn.small-btn { min-height: 34px; padding: var(--s-1) var(--s-3); font-size: 13px; }
.uspex-btn.block { width: 100%; }

.badge {
  display: inline-block; padding: 2px var(--s-3); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .06em;
  vertical-align: middle; border: 1px solid transparent;
}
.badge.ok { background: rgba(20, 61, 36, .8); color: var(--ok); border-color: rgba(127, 224, 167, .25); }
.badge.warn { background: rgba(74, 58, 20, .8); color: var(--warn); border-color: rgba(242, 211, 140, .25); }
.badge.bad { background: rgba(69, 23, 18, .8); color: var(--bad); border-color: rgba(242, 160, 154, .25); }

.cap {
  display: inline-block; padding: 2px var(--s-2); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .06em;
  border: 1px solid transparent; white-space: nowrap;
}
.cap.on { background: var(--accent-dim); color: var(--accent); border-color: rgba(77, 163, 255, .35); }
.cap.local { color: var(--muted); border: 1px dashed #3a5568; }
.cap.off { color: var(--faint); }

.uspex-alert {
  background: rgba(74, 58, 20, .55); color: #f6e2b4; border: 1px solid rgba(242, 211, 140, .22);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); margin: var(--s-3) 0; font-size: 14px;
}
.uspex-alert.error { background: rgba(58, 21, 18, .7); color: #f2b0ab; border-color: rgba(242, 160, 154, .25); }
.uspex-alert a { color: inherit; text-decoration: underline; }

.uspex-table-wrap { overflow-x: auto; }
.uspex-table { width: 100%; border-collapse: collapse; margin: var(--s-2) 0; font-size: 14px; }
.uspex-table th {
  font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .12em;
  text-transform: uppercase; color: #8fb3cc; text-align: left;
  padding: var(--s-2) var(--s-3); white-space: nowrap;
}
.uspex-table td { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--border); }
.uspex-table td.mono { font-size: var(--t-small); }

.keybox {
  background: var(--inset); border: 1px dashed #3a5568; border-radius: var(--r-sm);
  padding: var(--s-4); margin: var(--s-4) 0; font-size: 16px; word-break: break-all;
}
.keybox code { font-size: 15px; letter-spacing: .02em; }

/* ---------- 7. Forms ---------- */
.uspex-input {
  background: var(--inset); border: 1px solid #3a5568; color: var(--text);
  border-radius: var(--r-sm); padding: var(--s-2) var(--s-3);
  font: 400 14px/1.4 var(--font-ui); min-height: 40px; width: 100%; max-width: 360px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.uspex-input:focus { border-color: var(--accent); box-shadow: var(--ring-accent); outline: none; }
.uspex-input::placeholder { color: var(--faint); }
select.uspex-input { font-family: var(--font-mono); font-size: 13px; }
.uspex-form { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-3) 0; align-items: flex-start; }
.uspex-form .uspex-btn { align-self: flex-start; margin-top: var(--s-1); }
.uspex-form.pools .uspex-input { max-width: 420px; }
.uspex-field { display: flex; flex-direction: column; gap: var(--s-1); margin: var(--s-3) 0; width: 100%; }
.uspex-field label { font-size: var(--t-small); color: #a9c3d6; }
.uspex-field .uspex-input { max-width: none; }
.uspex-inline { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin: var(--s-3) 0; }
.uspex-inline.spread { justify-content: space-between; }
form.inline { display: inline; margin: 0; }

/* segmented radio control — replaces JS-driven select for fan mode */
.segmented { position: relative; display: flex; gap: 0; border: 1px solid #3a5568; border-radius: var(--r-sm); overflow: hidden; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label {
  padding: var(--s-2) var(--s-4); min-height: 38px; display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted); cursor: pointer;
  border-right: 1px solid #3a5568; transition: background .18s ease, color .18s ease;
}
.segmented label:last-of-type { border-right: 0; }
.segmented label:hover { background: rgba(58, 85, 104, .25); color: var(--text); }
.segmented input:checked + label { background: var(--accent-dim); color: var(--accent); }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }

/* two-step confirmation for destructive actions (no JS confirm()) */
.danger-zone { border: 1px solid rgba(176, 72, 63, .4); border-radius: var(--r-sm); background: rgba(58, 21, 18, .25); }
.danger-zone > summary {
  padding: var(--s-3) var(--s-4); min-height: 44px; display: flex; align-items: center; gap: var(--s-2);
  color: #f2b0ab; font-size: 14px;
}
.danger-zone > summary::after { content: "показать"; font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-left: auto; }
.danger-zone[open] > summary::after { content: "скрыть"; }
.danger-zone > summary:hover { background: rgba(176, 72, 63, .12); }
.danger-zone .zone-body { padding: 0 var(--s-4) var(--s-4); }
.danger-zone .zone-body p { color: var(--muted); font-size: var(--t-small); margin-bottom: var(--s-3); }
.danger-zone .uspex-form { margin: 0; }

/* ---------- 8. Landing / hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-8);
  align-items: center; padding: var(--s-9) 0 var(--s-7);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(77, 163, 255, .35); border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3); margin-bottom: var(--s-4); background: var(--accent-dim);
}
.hero h1 {
  font-size: var(--t-display); line-height: 1.08; letter-spacing: -.025em;
  font-weight: 650; margin-bottom: var(--s-4);
}
.hero .lead { font-size: var(--t-lead); color: var(--muted); max-width: 33em; margin-bottom: var(--s-5); }
.hero-cta { margin: 0; }
.hero-sub { color: var(--faint); font-size: var(--t-small); margin-top: var(--s-4); }

.hero-stack { position: relative; padding-bottom: var(--s-5); }
.hero-stack .preview { margin-left: var(--s-8); }
/* Overlap only the back panel's bottom padding — never cut a row of its text in half. */
.hero-stack .demo-card { position: relative; z-index: 2; margin: calc(-1 * var(--s-4)) var(--s-7) 0 0; }

.metric-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
}
.metric { padding: var(--s-5) var(--s-4); border-left: 1px solid var(--border-soft); }
.metric:first-child { border-left: 0; padding-left: 0; }
.metric b {
  display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 500;
  letter-spacing: -.02em; color: var(--text);
}
.metric span { display: block; color: var(--muted); font-size: var(--t-small); margin-top: var(--s-1); }

/* device / telemetry card grammar — shared by landing and cabinet */
.demo-card {
  background: linear-gradient(180deg, var(--card-raise), var(--card));
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--s-5); box-shadow: var(--shadow-lg);
}
.demo-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.demo-name { font-weight: 600; }
.demo-big { font-family: var(--font-mono); font-size: 36px; font-weight: 500; letter-spacing: -.03em; }
.demo-big span { font-family: var(--font-ui); font-size: 14px; color: var(--muted); font-weight: 400; margin-left: var(--s-2); }
.demo-row {
  display: flex; gap: var(--s-3); flex-wrap: wrap; color: var(--muted);
  font-family: var(--font-mono); font-size: var(--t-small); margin: var(--s-1) 0 var(--s-4);
}
.demo-bars { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.demo-bar {
  display: grid; grid-template-columns: 26px 1fr 46px; gap: var(--s-3); align-items: center;
  font-family: var(--font-mono); font-size: var(--t-small); color: var(--muted);
}
/* Fill width is share of the device total, so a balanced 3-board miner sits near 33%.
   The rail makes that read as a measurement instead of a stubby bar. */
.bar-track { display: block; height: 8px; border-radius: var(--r-pill); background: rgba(77, 163, 255, .1); box-shadow: inset 0 0 0 1px rgba(77, 163, 255, .12); overflow: hidden; }
.demo-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-strong), var(--accent)); }
.demo-bar b { text-align: right; color: var(--text); font-weight: 500; }
.demo-foot {
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  font-size: var(--t-small); border-top: 1px solid var(--border); padding-top: var(--s-3);
}

/* ---------- 9. Landing / sections + firmware previews ---------- */
.land-sec { padding: var(--s-9) 0 0; }
.sec-index { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.sec-index-top { display: flex; align-items: baseline; gap: var(--s-3); border-bottom: 1px solid var(--border-soft); padding-bottom: var(--s-3); }
.sec-i { font-family: var(--font-mono); font-size: var(--t-mark); color: var(--accent); letter-spacing: .12em; }
.sec-index p { color: var(--muted); max-width: 62ch; }

.fw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-4); }
.fw-card {
  background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.fw-card:hover { transform: translateY(-3px); border-color: rgba(77, 163, 255, .4); box-shadow: var(--shadow-lg); }
.fw-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.fw-models { font-family: var(--font-mono); font-size: var(--t-small); color: var(--accent); }
.fw-card p { color: var(--muted); font-size: 14px; }
.fw-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.fw-specs li { display: grid; grid-template-columns: 8.5em 1fr; gap: var(--s-3); font-size: var(--t-small); }
.fw-specs dt, .fw-specs .k { font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.fw-specs .v { color: var(--text); font-family: var(--font-mono); }

.preview { display: grid; gap: var(--s-2); }
.preview-body {
  background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-3); box-shadow: var(--shadow-sm); overflow: hidden;
}
.preview-nav { display: flex; gap: var(--s-1); flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: var(--s-2); margin-bottom: var(--s-3); }
.preview-nav span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); padding: 2px var(--s-2); border-radius: var(--r-xs);
}
.preview-nav span.on { color: var(--accent); background: var(--accent-dim); }
.preview-rows { display: grid; gap: var(--s-1); }
.preview-row {
  display: grid; grid-template-columns: 2.4em 1fr auto; gap: var(--s-3); align-items: center;
  font-family: var(--font-mono); font-size: var(--t-small); color: var(--muted);
  padding: var(--s-1) 0;
}
.preview-row b { color: var(--text); font-weight: 500; }
.preview-row i { display: block; height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-strong), var(--accent)); }
.preview-foot {
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: var(--s-3); padding-top: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-small); color: var(--faint);
}
.preview-cap { font-size: var(--t-small); color: var(--faint); }

/* ---------- 10. Landing / support matrix ---------- */
.matrix { width: 100%; border-collapse: collapse; font-size: 14px; }
.matrix caption { text-align: left; }
.matrix thead th {
  font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); text-align: left; font-weight: 400;
  padding: 0 var(--s-3) var(--s-3); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.matrix tbody th {
  text-align: left; font-weight: 600; font-size: 15px; color: var(--text);
  padding: var(--s-3); white-space: nowrap;
}
.matrix tbody td { padding: var(--s-3); color: var(--muted); vertical-align: middle; }
.matrix tbody tr { border-bottom: 1px solid var(--border-soft); }
.matrix tbody tr:hover { background: rgba(77, 163, 255, .04); }
.matrix td .mono { font-size: var(--t-small); color: var(--text); }
.matrix-note { color: var(--faint); font-size: var(--t-small); margin-top: var(--s-4); }
.matrix-note strong { color: var(--muted); font-weight: 500; }

/* ---------- 11. Landing / features, steps, security, faq, cta ---------- */
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.feat {
  background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.feat:hover { transform: translateY(-3px); border-color: rgba(77, 163, 255, .45); box-shadow: var(--shadow-lg); }
.feat h3 { margin: var(--s-3) 0 var(--s-2); }
.feat p { color: var(--muted); }
.feat-ico {
  width: 26px; height: 26px; stroke: var(--accent); stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.feat-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-1); }
.feat-list li { font-family: var(--font-mono); font-size: var(--t-small); color: var(--faint); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.steps.flow { grid-template-columns: 1fr; }
.steps li {
  background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: var(--s-5);
}
.step-n {
  display: block; font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .14em;
  color: var(--accent); margin-bottom: var(--s-3);
}
.steps h3 { margin-bottom: var(--s-2); }
.steps p { color: var(--muted); font-size: 14px; }

.sec-band {
  background: linear-gradient(180deg, var(--bg-glow), var(--bg-deep));
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--s-7); margin-top: var(--s-2);
}
.sec-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.sec-list li { position: relative; padding-left: var(--s-7); color: var(--muted); font-size: 14px; }
.sec-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
  background: var(--accent-dim); border: 1px solid rgba(77, 163, 255, .4); border-radius: var(--r-xs);
}
.sec-list li::after {
  content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.sec-list li strong { color: var(--text); font-weight: 600; }

.faq { display: grid; gap: var(--s-2); }
.faq-item { border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--card); }
.faq-item > summary {
  display: flex; align-items: center; gap: var(--s-4); min-height: 52px;
  padding: var(--s-3) var(--s-5); font-weight: 600; font-size: 15px; color: var(--text);
}
.faq-item > summary::after {
  content: ""; margin-left: auto; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}
.faq-item[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.faq-item > summary:hover { background: rgba(77, 163, 255, .05); }
.faq-item .faq-a { padding: 0 var(--s-5) var(--s-5); color: var(--muted); font-size: 14px; max-width: 72ch; }
.faq-item .faq-a p + p { margin-top: var(--s-3); }

.cta-band {
  margin-top: var(--s-9); padding: var(--s-8) var(--s-7);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--card-raise), var(--bg-deep));
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap;
}
.cta-band p { color: var(--muted); margin-top: var(--s-2); max-width: 48ch; }

/* ---------- 12. Cabinet ---------- */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-4); flex-wrap: wrap; margin: var(--s-7) 0 var(--s-4);
}
.page-head h1 { font-size: var(--t-h1); }
.page-head h1 .badge { vertical-align: middle; margin-left: var(--s-2); }
.page-sub { color: var(--muted); margin-top: var(--s-2); font-size: 14px; }
.page-sub.mono { font-size: var(--t-small); color: var(--faint); }
.crumb { display: inline-block; padding: var(--s-1) 0; font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-1); }
.crumb:hover { text-decoration: none; color: #fff; }

.fleet-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); margin: var(--s-4) 0; }
.fleet-stat {
  background: linear-gradient(180deg, var(--card-raise), var(--card));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-md);
  transition: transform .22s ease, border-color .22s ease;
}
.fleet-stat:hover { transform: translateY(-2px); border-color: rgba(77, 163, 255, .4); }
.fleet-stat .big {
  font-family: var(--font-mono); font-size: 30px; font-weight: 500; letter-spacing: -.03em;
  margin: var(--s-2) 0 2px;
}
.fleet-stat .big span { font-family: var(--font-ui); font-size: 13px; color: var(--muted); font-weight: 400; margin-left: var(--s-1); }
.fleet-sub { color: var(--faint); font-size: var(--t-small); }

.spark-card { padding: var(--s-5); }
.spark-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.spark { display: block; width: 100%; height: 96px; margin-top: var(--s-2); }
.spark-fill { fill: rgba(77, 163, 255, .13); stroke: none; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-meta {
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  color: var(--faint); font-family: var(--font-mono); font-size: var(--t-small); margin-top: var(--s-2);
}

.dev-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s-4); margin: var(--s-4) 0; }
.dev-card {
  background: linear-gradient(180deg, var(--card-raise), var(--card));
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--s-5); box-shadow: var(--shadow-md);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.dev-card:hover { transform: translateY(-2px); border-color: rgba(77, 163, 255, .45); box-shadow: var(--shadow-lg); }
.dev-card .demo-name a { display: inline-block; padding: 2px 0; color: var(--text); font-size: var(--t-h3); font-weight: 600; }
.dev-card .demo-big { font-size: 30px; margin: var(--s-2) 0 var(--s-3); }
.dev-meta { font-family: var(--font-mono); font-size: var(--t-small); color: var(--faint); }
.dev-nodata { font-family: var(--font-mono); font-size: var(--t-small); color: var(--faint); margin: var(--s-4) 0; }
.dev-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.last-seen { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--t-small); color: var(--faint); }
.empty-state { text-align: center; padding: var(--s-8) var(--s-5); max-width: 640px; margin: var(--s-6) auto; }
.empty-state h2 { margin-bottom: var(--s-2); }
.empty-state p { color: var(--muted); margin-bottom: var(--s-4); }
.board-bars { margin: var(--s-3) 0 var(--s-2); }
.board-bars .bar-track { height: 10px; }
.board-note { display: grid; gap: var(--s-1); font-family: var(--font-mono); font-size: var(--t-small); color: var(--faint); }

.cmd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); }
.cmd {
  background: var(--inset); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  padding: var(--s-4);
}
.cmd .uspex-label { display: block; margin-bottom: var(--s-1); }
.cmd-hint { display: block; font-family: var(--font-mono); font-size: var(--t-small); color: var(--faint); margin-bottom: var(--s-2); }
.cmd .uspex-form { margin: 0; width: 100%; }
.cmd .uspex-input { max-width: 100%; }
.cmd.wide { grid-column: 1 / -1; }
.cmd-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-2); width: 100%; }
.watch-only { display: grid; gap: var(--s-2); }
.watch-only p { color: var(--muted); font-size: 14px; max-width: 72ch; }

/* fan pwm reveal: progressive enhancement. Without :has() the field stays visible. */
.fan-form:has(input[name="mode"][value="auto"]:checked) .fan-pwm { display: none; }

/* auth pages */
.auth-shell { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; padding: var(--s-8) 0 var(--s-6); }
.auth-aside { padding-top: var(--s-4); }
.auth-aside h2 { margin-bottom: var(--s-4); }
.auth-aside .sec-list { grid-template-columns: 1fr; }
.auth-card { margin: 0; }
.auth-card h1 { margin-bottom: var(--s-2); }
.auth-card .uspex-form { width: 100%; }
.auth-alt { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border-soft); display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); }
.auth-alt a:not(.uspex-btn) { display: inline-block; padding: 3px 0; }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1080px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-7) 0 var(--s-6); }
  .hero-stack { padding-bottom: 0; }
  .hero-stack .preview { display: none; }
  .hero-stack .demo-card { margin: 0; }
  .feat-grid { grid-template-columns: 1fr; }
  .auth-shell { grid-template-columns: 1fr; gap: var(--s-6); padding-top: var(--s-6); }
  .auth-aside { order: 2; padding-top: 0; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-soft); }
  .metric:first-child, .metric:nth-child(2) { border-top: 0; }
  .sec-band { padding: var(--s-5); }
  .cta-band { padding: var(--s-6) var(--s-5); }

  /* support matrix restacks into per-model cards (no horizontal scrolling) */
  .matrix thead { display: none; }
  .matrix tbody tr {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s-3); border: 1px solid var(--border-soft); border-radius: var(--r-md);
    padding: var(--s-4); margin-bottom: var(--s-3); background: var(--card);
  }
  .matrix tbody tr:hover { background: var(--card); }
  .matrix tbody th { grid-column: 1 / -1; padding: 0 0 var(--s-2); border-bottom: 1px solid var(--border-soft); }
  .matrix tbody td { padding: 0; }
  .matrix tbody td::before {
    content: attr(data-l); display: block;
    font-family: var(--font-mono); font-size: var(--t-mark); letter-spacing: .1em;
    text-transform: uppercase; color: var(--faint); margin-bottom: var(--s-1);
  }
}
@media (max-width: 760px) {
  .land-sec { padding-top: var(--s-8); }
  .uspex-grid.two, .uspex-grid.four { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .brand-tag { display: none; }
  .top-row { padding: var(--s-2) var(--s-4); }
  .hero { padding-top: var(--s-6); }
  .fw-specs li { grid-template-columns: 1fr; gap: 0; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .foot-cols { grid-template-columns: 1fr; gap: var(--s-5); }
  .uspex-card { padding: var(--s-4); }
  .dev-cards { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .metric-strip { grid-template-columns: 1fr; }
  .metric { border-top: 1px solid var(--border-soft); padding: var(--s-4) 0; }
  .metric:first-child { border-top: 0; }
  .metric:nth-child(2) { border-top: 1px solid var(--border-soft); }
  .demo-big { font-size: 30px; }
  .top-actions { gap: var(--s-2); }
  .uspex-btn { padding: var(--s-2) var(--s-3); }
}

/* ---------- Motion: one page-arrival cue, nothing decorative ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise .42s ease both; }
.hero-copy > *:nth-child(2) { animation-delay: .06s; }
.hero-copy > *:nth-child(3) { animation-delay: .12s; }
.hero-copy > *:nth-child(4) { animation-delay: .18s; }
.hero-copy > *:nth-child(5) { animation-delay: .24s; }
.hero-stack { animation: rise .5s ease .12s both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* language toggle: one pill button offering the other language */
.lang-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:13px;font-weight:bold;letter-spacing:.04em;color:#e8f1f9;text-decoration:none;transition:border-color .15s,background .15s;}
.lang-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;opacity:.85;}
.lang-toggle:hover{border-color:#4da3ff;background:rgba(77,163,255,.14);color:#fff;}
.lang-toggle:hover svg{opacity:1;}

/* Telegram channel button */
.tg-btn{background:#229ED9;border-color:#229ED9;color:#fff;}
.tg-btn:hover{background:#1d8cbc;border-color:#1d8cbc;color:#fff;}

/* footer license link */
.linklike{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.linklike:hover{color:#7db9ff;}

/* license agreement modal */
.license-modal{border:1px solid var(--border);border-radius:var(--r-lg,14px);background:var(--card);color:var(--text);max-width:640px;width:min(92vw,640px);padding:0;box-shadow:0 24px 64px rgba(0,0,0,.5);}
.license-modal::backdrop{background:rgba(8,16,26,.72);backdrop-filter:blur(2px);}
.license-body{padding:var(--s-6) var(--s-6) var(--s-5);max-height:78vh;overflow:auto;}
.license-body h2{font-size:var(--t-h2);margin:0 0 var(--s-4);}
.license-body p{font-size:var(--t-small);color:var(--muted);line-height:1.65;margin:0 0 var(--s-3);}
.license-body [lang="en"] p{color:var(--faint);}
.license-body .uspex-btn{margin-top:var(--s-4);}

/* trilingual keyword block for search engines */
.seo-keywords{max-width:980px;margin:var(--s-7) auto 0;padding:0 var(--s-5);}
.seo-keywords p{font-size:var(--t-mark);color:var(--faint);line-height:1.7;margin:0 0 var(--s-2);}

/* ============ download page (dl-) ============ */
.dl-hero h1{margin:0 0 var(--s-2);}
.dl-hero p{max-width:70ch;margin:0;}

/* loud mandatory warning block */
.dl-warn{
  margin:var(--s-4) 0 var(--s-5); padding:var(--s-4) var(--s-5);
  border:1px solid rgba(255,138,101,.55); border-left:4px solid #ff8a65;
  border-radius:var(--r-md);
  background:linear-gradient(180deg,#3c1a10,#2b130c);
  box-shadow:0 10px 34px rgba(255,110,64,.14);
}
.dl-warn p{margin:0 0 var(--s-3); color:#fff; font-weight:700; font-size:15px; line-height:1.6;}
.dl-warn p:last-child{margin-bottom:0;}
.dl-warn p strong{color:#ffd9c9; letter-spacing:.02em;}
.dl-warn p:first-child strong::before{content:"⚠ "; color:#ff8a65;}

/* device switcher */
.dl-radio{position:absolute;opacity:0;width:1px;height:1px;}
.dl-switch{display:inline-flex;flex-wrap:wrap;margin-bottom:var(--s-4);}
.dl-switch label{min-width:110px;justify-content:center;font-size:15px;padding:var(--s-2) var(--s-6);}

/* panels shown/hidden by pure CSS on radio state */
.dl-panel{display:none;}
#dev-z11:checked ~ #z11-panel,
#dev-z11e:checked ~ #z11e-panel,
#dev-z11j:checked ~ #z11j-panel,
#dev-z15:checked ~ #z15-panel,
#dev-z15e:checked ~ #z15e-panel{display:block;}
#dev-z11:checked ~ .dl-switch label[for="dev-z11"],
#dev-z11e:checked ~ .dl-switch label[for="dev-z11e"],
#dev-z11j:checked ~ .dl-switch label[for="dev-z11j"],
#dev-z15:checked ~ .dl-switch label[for="dev-z15"],
#dev-z15e:checked ~ .dl-switch label[for="dev-z15e"]{
  background:var(--accent-dim); color:var(--accent);
}
#dev-z11:focus-visible ~ .dl-switch label[for="dev-z11"],
#dev-z11e:focus-visible ~ .dl-switch label[for="dev-z11e"],
#dev-z11j:focus-visible ~ .dl-switch label[for="dev-z11j"],
#dev-z15:focus-visible ~ .dl-switch label[for="dev-z15"],
#dev-z15e:focus-visible ~ .dl-switch label[for="dev-z15e"]{outline:2px solid var(--accent);outline-offset:-2px;}

/* method cards */
.dl-methods{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
.dl-method{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--card-raise),var(--card));
  border:1px solid var(--border-soft); border-radius:var(--r-lg);
  padding:var(--s-4);
}
.dl-method h3{margin:var(--s-2) 0 var(--s-3);font-size:18px;}
.dl-method .uspex-table{margin-top:0;}
.dl-method .uspex-btn{margin-top:auto;}
.dl-method .uspex-btn.disabled{opacity:.55;pointer-events:none;background:var(--card);border-color:#3a5568;color:var(--muted);}
.dl-tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:var(--t-mark);
  letter-spacing:.08em; text-transform:uppercase;
  padding:3px 10px; border-radius:var(--r-pill); border:1px solid;
}
.dl-tag-sd{background:rgba(77,163,255,.10);border-color:rgba(77,163,255,.35);color:var(--accent);}
.dl-tag-web{background:rgba(66,196,133,.10);border-color:rgba(66,196,133,.35);color:#6fdcae;}
.dl-note{font-size:var(--t-small);color:var(--faint);line-height:1.6;margin:var(--s-2) 0 var(--s-3);}
.dl-md5{word-break:break-all;font-size:var(--t-mark);}

.dl-feats{columns:2;column-gap:var(--s-5);padding-left:1.2em;}
.dl-feats li{break-inside:avoid;margin:0 0 var(--s-2);}
.dl-howto{padding-left:1.4em;}
.dl-howto li{margin:0 0 var(--s-2);}

@media (max-width:860px){
  .dl-methods{grid-template-columns:1fr;}
  .dl-feats{columns:1;}
  .dl-warn{padding:var(--s-3);}
  .dl-warn p{font-size:14px;}
}
.dl-devname{margin:var(--s-3) 0 var(--s-2);font-size:20px;color:var(--ink);}

/* hero-promo (m1923): landing earnings banner */
.hero-promo{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1rem;margin-top:1.2rem;padding:1rem 1.4rem;border-radius:14px;background:linear-gradient(135deg,rgba(56,189,110,.16),rgba(45,160,220,.10) 55%,transparent);border:1px solid rgba(56,189,110,.35);}
.hero-promo strong{font-size:1.12rem;letter-spacing:.01em;}
.hero-promo-sub{color:var(--muted,#8ea3b5);font-size:.92rem;}
@media (max-width:640px){.hero-promo{flex-direction:column;gap:.35rem;padding:.9rem 1.1rem;}}

/* Z15e promo eyebrow (user m1964: green +10%; m1982: drop font-size override) */
.eyebrow-promo {
  letter-spacing: .02em; text-transform: none;
}
.plus10 { color: #38b96e; font-weight: 700; }

/* ==========================================================================
   14. Mobile hardening (touch + iOS Safari)
   Additive only: never undoes a desktop rule, applies under max-width only.
   ========================================================================== */
body.uspex-ui { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }

/* Grids that use fixed min() floors can overflow a 320px phone (viewport
   minus 2×16px padding leaves 288px). min(<floor>, 100%) keeps the track
   from ever exceeding the container. */
.fw-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.dev-cards { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.uspex-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.sec-list { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

@media (max-width: 760px) {
  /* iOS Safari zooms into any focused input with font-size < 16px */
  .uspex-input, select.uspex-input { font-size: 16px; min-height: 44px; }

  /* comfortable tap targets (44px thumb rule) */
  .uspex-btn { min-height: 44px; }
  .uspex-btn.small-btn { min-height: 38px; padding: var(--s-2) var(--s-3); }
  .uspex-btn.lg { min-height: 50px; }
  .lang-toggle { padding: 9px 14px; }
  .site-nav a { padding: 13px 14px; }
  .foot-col a { padding: 7px 0; }
  .dl-switch label { padding: var(--s-3) var(--s-4); }

  /* narrow phones: header row wraps instead of overflowing */
  .top-row { flex-wrap: wrap; row-gap: var(--s-1); }

  /* hero demo card: no side offsets on a single-column layout */
  .hero-stack .demo-card { margin: 0; }
}

@media (max-width: 480px) {
  /* hero CTAs stack full-width — one thumb tap each */
  .uspex-inline.hero-cta { gap: var(--s-2); }
  .hero-cta .uspex-btn { flex: 1 1 100%; }
}