/* ══════════════════════════════════════════════════════════════════════════
   DATASHEET THEME (2026-09-03) — the site as an electronics datasheet.
   Paper, ink, copper traces, solder-mask green. Overrides the tokens set by
   iatrt-redesign.css for every templated page (this file loads last).
   ══════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --paper: #f2ede2;
  --paper-2: #e8e1d2;
  --paper-3: #d9d0bd;
  --ink: #12140f;
  --ink-rgb: 18, 20, 15;
  --ink-soft: #2b2e26;
  --muted: #6b6558;
  --copper: #b8651c;
  --copper-deep: #8c4a10;
  --mask: #0f3a2b;
  --mask-2: #0a2b20;
  --mask-3: #164a37;

  --font-head: "IBM Plex Sans Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Barlow", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "DM Mono", ui-monospace, monospace;

  --accent: var(--copper);
  --accent-dim: var(--copper-deep);
  --accent-rgb: 184, 101, 28;
  --white: #faf7f0;
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --bg: var(--paper);
  --panel: rgba(250, 247, 240, 0.98);
  --panel-alt: rgba(232, 225, 210, 0.95);
  --panel-strong: #faf7f0;
  --text-1: var(--ink);
  --text-2: var(--ink-soft);
  --text-3: var(--muted);
  --rule: #cfc6b3;
  --sp-rule: rgba(18, 20, 15, 0.22);
  --sp-rule-soft: rgba(18, 20, 15, 0.1);
  --sp-radius: 6px;
  --radius: 6px;
  --shadow: 0 1px 0 rgba(18, 20, 15, 0.06), 0 12px 30px rgba(18, 20, 15, 0.08);
  --line: rgba(18, 20, 15, 0.2);
}

/* PCB trace tile, drawn behind the hero and the green band */
:root {
  --pcb-tile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%23b8651c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'><path d='M20 40h70l30 30v60'/><path d='M120 130v40l-30 30H40'/><path d='M200 20v50l40 40h60'/><path d='M300 110v70l-40 40h-60'/><path d='M60 240h60l20 20v40'/><path d='M180 300v-40l30-30h70'/><path d='M20 160h40l20-20v-30'/><path d='M240 200v-40'/></g><g fill='%23f2ede2' stroke='%23b8651c' stroke-width='1.6' opacity='0.7'><circle cx='20' cy='40' r='4'/><circle cx='120' cy='130' r='4'/><circle cx='40' cy='200' r='4'/><circle cx='200' cy='20' r='4'/><circle cx='300' cy='110' r='4'/><circle cx='200' cy='220' r='4'/><circle cx='60' cy='240' r='4'/><circle cx='140' cy='300' r='4'/><circle cx='180' cy='300' r='4'/><circle cx='280' cy='230' r='4'/><circle cx='20' cy='160' r='4'/><circle cx='80' cy='110' r='4'/><circle cx='240' cy='200' r='4'/><circle cx='240' cy='160' r='4'/></g></svg>");
}

html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
}
body::before, body::after { display: none !important; }

a { color: var(--copper-deep); text-decoration-color: rgba(184, 101, 28, 0.45); }
a:hover { color: var(--copper); }
strong { color: var(--ink); }

/* ---- Datasheet strip + header ------------------------------------------ */
.ds-strip {
  background: var(--mask-2);
  color: rgba(250, 247, 240, 0.7);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ds-strip .container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  flex-wrap: wrap;
}
.ds-strip span + span::before { content: "·"; margin: 0 10px; color: var(--copper); }

.site-header {
  background: var(--mask);
  border-bottom: 1px solid rgba(250, 247, 240, 0.12);
  box-shadow: none;
  backdrop-filter: none;
}
.site-header .brand-logo { height: 42px; }
.brand-title { font-family: var(--font-head); letter-spacing: 0.08em; }
.brand-sub { color: rgba(250, 247, 240, 0.5); }
.primary-nav a {
  border-radius: 3px;
  border-color: rgba(250, 247, 240, 0.14);
  background: transparent;
  color: rgba(250, 247, 240, 0.82);
}
.primary-nav a:hover { background: rgba(250, 247, 240, 0.08); color: var(--white); }
.primary-nav .cta { background: var(--copper); border-color: var(--copper); box-shadow: none; }
.primary-nav .cta:hover { background: var(--copper-deep); border-color: var(--copper-deep); }
.site-header.nav-open .primary-nav { background: var(--mask-2); }
.lang-switcher-toggle { border-radius: 3px; }

/* ---- Buttons: squared, mono ------------------------------------------ */
.button, .login-submit { border-radius: 3px; font-family: var(--font-mono); font-weight: 500; }
.button.primary { background: var(--ink); color: var(--white); border-color: var(--ink); box-shadow: none; }
.button.primary:hover { background: var(--copper-deep); border-color: var(--copper-deep); }
.button.secondary { background: var(--white); border-color: var(--ink); color: var(--ink); }
.button.secondary:hover { background: var(--ink); color: var(--white); }
.button.ghost { border-color: var(--sp-rule); color: var(--ink); background: transparent; }
.button.ghost:hover { border-color: var(--ink); }

/* ---- Hero: paper sheet with registration marks ------------------------ */
.sp-hero { position: relative; padding-top: 28px; }
.sp-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--pcb-tile);
  background-size: 320px 320px;
  opacity: 0.28;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0.2));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0.2));
}
.sp-hero .container { position: relative; }
.sp-hero-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 4px;
  box-shadow: 6px 6px 0 rgba(18, 20, 15, 0.08);
}
.sp-hero-card::before, .sp-hero-card::after {
  content: "";
  position: absolute; width: 18px; height: 18px;
  border-color: var(--copper); border-style: solid;
  pointer-events: none;
}
.sp-hero-card::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; }
.sp-hero-card::after { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; }

.sp-hero h1 { letter-spacing: -0.01em; text-transform: none; line-height: 0.98; }
.sp-lead { font-weight: 500; }
.sp-kicker { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.16em; color: var(--copper-deep); }

/* Section numbering, datasheet style: "01 / WHAT WE BUILD" */
main.page { counter-reset: sec; }
.sp-section-head .sp-kicker::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero) "\00a0/\00a0";
  color: var(--ink);
}
.sp-title { text-transform: uppercase; letter-spacing: 0.02em; }

/* ---- Traces: every list rule is a copper trace starting at a solder pad */
.sp-menu-item, .sp-faq-item, .sp-step { position: relative; border-top-color: var(--copper); }
.sp-menu-item::before, .sp-faq-item::before {
  content: "";
  position: absolute; top: -6px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--copper);
}
.sp-menu-item { border-top-width: 1.5px; }
.sp-faq-item { border-top-width: 1.5px; }
.sp-faq-item:last-child { border-bottom-color: var(--copper); border-bottom-width: 1.5px; }
.sp-step { border-top: 2px solid var(--copper); }
.sp-step::before {
  content: "";
  position: absolute; top: -7px; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--copper);
}
.sp-step-num { color: var(--copper-deep); font-weight: 600; }
.sp-menu-item h3, .sp-step h3, .sp-faq-item h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: 0; }
.sp-menu-item h3 a::after { color: var(--copper); }

/* Price table: mono values, hairline rows */
.sp-price-list { border-top: 1.5px solid var(--copper); }
.sp-price-row { border-bottom: 1px solid var(--sp-rule); }
.sp-price-row dd { font-family: var(--font-mono); font-weight: 600; font-size: 20px; color: var(--copper-deep); }
.sp-price-note { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; }

/* Facts panel → spec table */
.sp-facts {
  background: var(--mask);
  border: 1px solid var(--mask-2);
  border-radius: 4px;
  box-shadow: 6px 6px 0 rgba(15, 58, 43, 0.18);
}
.sp-facts .sp-kicker { color: rgba(250, 247, 240, 0.6); }
.sp-facts .sp-kicker::before { content: none; }
.sp-facts-title { font-family: var(--font-head); font-size: 26px; text-transform: uppercase; letter-spacing: 0.02em; }
.sp-facts dl > div { border-top: 1px solid rgba(250, 247, 240, 0.16); }
.sp-facts dt { color: var(--copper); }
.sp-facts dd.sp-facts-phone { font-family: var(--font-mono); font-weight: 600; font-size: 24px; letter-spacing: 0.02em; }

/* Chips */
.sp-chips a { border-radius: 3px; border-color: var(--sp-rule); font-family: var(--font-mono); font-size: 13px; }
.sp-chips a:hover { border-color: var(--copper); color: var(--copper-deep); }

/* Related row */
.sp-related-row { border-top: 1.5px solid var(--copper); }
.sp-related-row a { font-family: var(--font-head); }

/* Green band */
.sp-band {
  position: relative;
  background: var(--mask);
  color: var(--white);
  border: 0;
}
.sp-band::before {
  content: ""; position: absolute; inset: 0;
  background: var(--pcb-tile); background-size: 320px 320px; opacity: 0.16; pointer-events: none;
}
.sp-band .container { position: relative; }
.sp-band .sp-title, .sp-band .sp-menu-item h3, .sp-band .sp-menu-item h3 a { color: var(--white); }
.sp-band .sp-section-head > p, .sp-band .sp-menu-item p { color: rgba(250, 247, 240, 0.74); }
.sp-band .sp-kicker { color: var(--copper); }
.sp-band .sp-kicker::before { color: rgba(250, 247, 240, 0.7); }
.sp-band .sp-menu-item { border-top-color: rgba(184, 101, 28, 0.9); }
.sp-band .sp-menu-item::before { background: var(--mask); }

/* Contact block */
.sp-contact .contact > .container { border-radius: 4px; }
.sp-contact .consultation-note { border-radius: 4px; }

/* Footer */
.site-footer { background: var(--mask-2); border-top: 1px solid rgba(250, 247, 240, 0.1); }
.footer-inner { font-family: var(--font-mono); letter-spacing: 0.1em; }
.footer-inner p { color: rgba(250, 247, 240, 0.55); }
.footer-inner a { color: rgba(250, 247, 240, 0.9); }

/* ---- Oscilloscope trace under the hero --------------------------------- */
.sp-trace { display: block; width: 100%; height: 72px; margin: 26px auto 0; overflow: visible; }
.sp-trace .grid { stroke: rgba(18, 20, 15, 0.14); stroke-width: 1; }
.sp-trace .sig {
  fill: none; stroke: var(--copper); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 3200; stroke-dashoffset: 3200;
  animation: sp-draw 2.6s cubic-bezier(.2,.6,.2,1) forwards;
}
.sp-trace .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; fill: var(--muted); text-transform: uppercase; }
@keyframes sp-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sp-trace .sig { animation: none; stroke-dashoffset: 0; } }

/* ---- Pinout chip (homepage hero graphic) ------------------------------- */
.sp-chip { width: 100%; max-width: 520px; margin: 0 auto; display: block; overflow: visible; }
.sp-chip .body { fill: var(--ink); }
.sp-chip .notch { fill: var(--white); }
.sp-chip .pin { stroke: var(--copper); stroke-width: 2; }
.sp-chip .pad { fill: var(--white); stroke: var(--copper); stroke-width: 1.6; }
.sp-chip .dot { fill: var(--copper); }
.sp-chip .lbl { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; fill: var(--ink); text-decoration: none; }
.sp-chip a { text-decoration: none; }
.sp-chip a:hover .lbl { fill: var(--copper-deep); text-decoration: underline; }
.sp-chip .name { font-family: var(--font-head); font-weight: 700; font-size: 44px; fill: var(--white); letter-spacing: 0.06em; }
.sp-chip .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; fill: rgba(250, 247, 240, 0.7); }
.sp-chip .side { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; fill: var(--muted); }
.sp-hero-graphic { align-self: center; }

/* Facts as a horizontal spec strip (home) */
.sp-spec-strip { margin-top: 18px; }
.sp-spec-strip .sp-facts { display: grid; grid-template-columns: auto 1fr; gap: 0 28px; align-items: center; padding: 18px 24px; box-shadow: none; }
.sp-spec-strip .sp-facts dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.sp-spec-strip .sp-facts dl > div { border-top: 0; border-left: 1px solid rgba(250, 247, 240, 0.16); padding: 2px 0 2px 16px; }
.sp-spec-strip .sp-facts dl > div:first-child { border-left: 0; padding-left: 0; }
.sp-spec-strip .sp-facts-title { margin: 4px 0 0; font-size: 22px; }
.sp-spec-strip .sp-facts .sp-kicker { margin: 0; }
.sp-spec-strip .sp-facts dd.sp-facts-phone { font-size: 21px; }
.sp-spec-strip .sp-facts dd { font-size: 15.5px; }

@media (max-width: 1080px) {
  .sp-spec-strip .sp-facts { grid-template-columns: 1fr; gap: 12px; }
  .sp-spec-strip .sp-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .sp-spec-strip .sp-facts dl > div { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .sp-hero-graphic { display: none; }
}
@media (max-width: 720px) {
  .sp-hero-card { box-shadow: 4px 4px 0 rgba(18, 20, 15, 0.08); }
  .sp-spec-strip .sp-facts dl { grid-template-columns: 1fr; }
  .ds-strip .container { justify-content: flex-start; padding-right: 120px; }
  .ds-strip span:nth-child(1), .ds-strip span:nth-child(2) { display: none; }
  .ds-strip span + span::before { content: none; }
  .sp-hero-main .sp-kicker { font-size: 11px; }
}

/* ---- Bigger chip in the hero ------------------------------------------- */
@media (min-width: 901px) {
  .sp-home-hero .sp-hero-card { grid-template-columns: minmax(0, 1fr) minmax(360px, 540px); }
}
.sp-chip { max-width: 560px; direction: ltr; unicode-bidi: isolate; }   /* pinout stays LTR on RTL pages */
.sp-chip .pin, .sp-chip .pad { transition: stroke .2s, fill .2s; }
.sp-chip a:hover .pin { stroke: var(--ink); stroke-width: 3; }
.sp-chip a:hover .pad { fill: var(--copper); }
/* pins "connect" one by one on load */
.sp-chip a { opacity: 0; animation: sp-pin-in .5s ease-out forwards; }
.sp-chip a:nth-of-type(1) { animation-delay: .10s } .sp-chip a:nth-of-type(2) { animation-delay: .18s }
.sp-chip a:nth-of-type(3) { animation-delay: .26s } .sp-chip a:nth-of-type(4) { animation-delay: .34s }
.sp-chip a:nth-of-type(5) { animation-delay: .42s } .sp-chip a:nth-of-type(6) { animation-delay: .50s }
.sp-chip a:nth-of-type(7) { animation-delay: .58s } .sp-chip a:nth-of-type(8) { animation-delay: .66s }
.sp-chip a:nth-of-type(9) { animation-delay: .74s } .sp-chip a:nth-of-type(10) { animation-delay: .82s }
.sp-chip a:nth-of-type(11) { animation-delay: .90s } .sp-chip a:nth-of-type(12) { animation-delay: .98s }
.sp-chip a:nth-of-type(13) { animation-delay: 1.06s } .sp-chip a:nth-of-type(14) { animation-delay: 1.14s }
.sp-chip a:nth-of-type(15) { animation-delay: 1.22s } .sp-chip a:nth-of-type(16) { animation-delay: 1.30s }
@keyframes sp-pin-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-chip a { animation: none; opacity: 1; } }

/* ---- The net: trunk down the margin, taps to every section -------------- */
main.page { position: relative; }
.pcb-net { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.pcb-net .ticks line { stroke: rgba(18, 20, 15, 0.28); stroke-width: 1; }
.pcb-net .trunk-bg { fill: none; stroke: rgba(18, 20, 15, 0.16); stroke-width: 2; }
.pcb-net .trunk { fill: none; stroke: var(--copper); stroke-width: 2.5; stroke-linecap: round; }
.pcb-net .pad { fill: var(--white); stroke: var(--copper); stroke-width: 1.8; }
.pcb-net .pad.start { fill: var(--copper); }
.pcb-net .tap line { stroke: rgba(18, 20, 15, 0.18); stroke-width: 1.5; transition: stroke .35s; }
.pcb-net .tap .junction { fill: var(--white); stroke: rgba(18, 20, 15, 0.35); stroke-width: 1.5; transition: fill .35s, stroke .35s; }
.pcb-net .tap .pad { stroke: rgba(18, 20, 15, 0.35); transition: fill .35s, stroke .35s; }
.pcb-net .tap .tp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; fill: rgba(18, 20, 15, 0.45); transition: fill .35s; }
.pcb-net .tap.on line { stroke: var(--copper); }
.pcb-net .tap.on .junction { fill: var(--copper); stroke: var(--copper); }
.pcb-net .tap.on .pad { fill: var(--copper); stroke: var(--copper); }
.pcb-net .tap.on .tp { fill: var(--copper-deep); }
.pcb-net .pulse { fill: var(--copper); opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 6px rgba(184, 101, 28, 0.9)); }

/* sections come alive when the signal reaches them */
.sp-section .sp-section-head .sp-kicker { transition: color .4s; }
.sp-section.is-live .sp-section-head .sp-kicker { color: var(--copper); }
.sp-section.is-live .sp-section-head .sp-kicker::before { color: var(--copper-deep); }

/* ---- Build-stage rail (sticky, left margin) ---------------------------- */
.sp-stage {
  position: fixed; right: 14px; bottom: 96px; z-index: 40;
  width: 148px; padding: 10px 11px 9px;
  background: var(--white); border: 1px solid var(--ink); border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(18, 20, 15, 0.08);
  font-family: var(--font-mono); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s;
}
.sp-stage.show { opacity: 1; transform: none; }
.sp-stage .k { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.sp-stage .k .stage-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-stage .k .count { flex: none; color: var(--copper-deep); letter-spacing: 0.06em; }
.sp-stage .n { font-family: var(--font-head); font-weight: 700; font-size: 13px; line-height: 1.08; text-transform: uppercase; color: var(--ink); margin: 0 0 6px; min-height: 30px; overflow-wrap: anywhere; hyphens: auto; }
.sp-stage .bar { height: 3px; background: rgba(18, 20, 15, 0.12); border-radius: 2px; overflow: hidden; margin: 6px 0 0; }
.sp-stage .bar i { display: block; height: 100%; width: 0; background: var(--copper); transition: width .25s linear; }
.sp-stage svg { display: block; width: 100%; height: 44px; overflow: visible; }
.sp-stage svg g.st { display: none; }
.sp-stage svg g.st.cur { display: block; }
.sp-stage svg .l { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-stage svg .c { fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-stage svg .d { stroke-dasharray: 4 4; }
.sp-stage svg .f { fill: var(--copper); }
.sp-stage svg .g { fill: var(--mask-3); }
.sp-stage svg .k2 { fill: var(--ink); }
.sp-stage svg .w { fill: var(--white); }
html[dir="rtl"] .sp-stage { right: auto; left: 14px; }
@media (max-width: 1419px) { .sp-stage { display: none; } }

/* ---- Finale: the assembled product ------------------------------------ */
.sp-assembly { padding: clamp(56px, 7vw, 100px) 0 0; }
.sp-assembly .sp-asm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 560px); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sp-asm { display: block; width: 100%; height: auto; overflow: visible; }
.sp-asm .base { fill: var(--mask); stroke: var(--ink); stroke-width: 1.5; }
.sp-asm .pcb { fill: #1c6a43; stroke: #0f3a2b; }
.sp-asm .trace { fill: none; stroke: var(--copper); stroke-width: 1.6; stroke-linecap: round; }
.sp-asm .spad { fill: var(--paper); stroke: var(--copper); stroke-width: 1.2; }
.sp-asm .chip { fill: var(--ink); }
.sp-asm .chipt { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: .08em; fill: var(--white); }
.sp-asm .lid { fill: var(--mask-3); stroke: var(--ink); stroke-width: 1.5; transform: translateY(-235px); opacity: .92; transition: transform 1.1s cubic-bezier(.3,.8,.3,1) .2s, opacity .4s .2s; }
.sp-asm .plate { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; fill: rgba(250, 247, 240, .85); opacity: 0; transition: opacity .6s 2.2s; }
.sp-asm .plate.big { font-family: var(--font-head); font-size: 26px; letter-spacing: .1em; fill: var(--white); }
.sp-asm .screw { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(2.4) rotate(0deg); }
.sp-asm .screw circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.sp-asm .screw line { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.sp-asm .led { fill: var(--copper); opacity: 0; }
.sp-asm .stamp { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; fill: var(--copper); opacity: 0; transition: opacity .5s 2.9s; }
.sp-assembly.is-done .sp-asm .lid { transform: none; opacity: 1; }
.sp-assembly.is-done .sp-asm .screw { animation: sp-screw .7s cubic-bezier(.2,.7,.2,1) forwards; }
.sp-assembly.is-done .sp-asm .screw:nth-of-type(1) { animation-delay: 1.1s }
.sp-assembly.is-done .sp-asm .screw:nth-of-type(2) { animation-delay: 1.35s }
.sp-assembly.is-done .sp-asm .screw:nth-of-type(3) { animation-delay: 1.6s }
.sp-assembly.is-done .sp-asm .screw:nth-of-type(4) { animation-delay: 1.85s }
.sp-assembly.is-done .sp-asm .plate, .sp-assembly.is-done .sp-asm .stamp { opacity: 1; }
.sp-assembly.is-done .sp-asm .led { animation: sp-led 1.6s ease-in-out 2.6s infinite; }
@keyframes sp-screw { 0% { opacity: 0; transform: scale(2.4) rotate(0deg); } 30% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(720deg); } }
@keyframes sp-led { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sp-asm .lid, .sp-asm .plate, .sp-asm .stamp { transition: none; opacity: 1; transform: none; }
  .sp-assembly .sp-asm .screw { animation: none; opacity: 1; transform: none; }
  .sp-assembly .sp-asm .led { animation: none; opacity: 1; }
}
@media (max-width: 900px) { .sp-assembly .sp-asm-grid { grid-template-columns: 1fr; } }

/* live scope: the waveform keeps rolling after it has drawn */
.sp-trace .sig { animation: sp-draw 2.6s cubic-bezier(.2,.6,.2,1) forwards, sp-roll 14s linear 2.6s infinite; }
@keyframes sp-roll { from { transform: translateX(0); } to { transform: translateX(-600px); } }
@media (prefers-reduced-motion: reduce) { .sp-trace .sig { animation: none; } }

/* datasheet footer line */
.footer-inner .sheet { width: 100%; text-align: center; color: rgba(250, 247, 240, 0.45); }

/* ---- Rolling serial line (replaces the fixed scope trace) --------------- */
.sp-trace { display: none; }
.sp-serial { position: relative; margin: 22px 0 0; direction: ltr; }
.sp-serial-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.sp-serial-clip {
  overflow: hidden; height: 84px;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.sp-serial-svg { display: block; height: 84px; animation: sp-serial-roll var(--sp-serial-t, 30s) linear infinite; will-change: transform; }
.sp-serial-svg .sig { fill: none; stroke: var(--copper); stroke-width: 2; stroke-linejoin: miter; stroke-linecap: square; }
.sp-serial-svg .fb { stroke: rgba(18, 20, 15, 0.14); stroke-width: 1; stroke-dasharray: 2 3; }
.sp-serial-svg .ch { font-family: var(--font-mono); font-size: 13px; font-weight: 600; fill: var(--ink); }
.sp-serial-svg .hx { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.06em; fill: rgba(18, 20, 15, 0.42); }
@keyframes sp-serial-roll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--sp-serial-w))); } }
@media (prefers-reduced-motion: reduce) { .sp-serial-svg { animation: none; } }
@media (max-width: 720px) { .sp-serial-clip { height: 70px; } .sp-serial-svg { height: 70px; } }