/* ==========================================================================
  dynattenik DeStatiX-A9 — Product Site Stylesheet

  Design language: instrument-grade, dark field.
  The page sits on graphite so the product photography becomes the light
  source in the composition — the way a bench instrument reads against a
  dark panel. Elevation is carried by surface lightness, not shadow. The
  registered brand red is the only accent; signal green means "live".
  Hairline borders, tight radii, monospace for every technical identifier.
  ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Neutrals — measured against --bg: WCAG ratios noted */
  --ink: #F0F3F6;      /* headings            15.4:1 */
  --body: #B6BFC9;     /* body copy            9.8:1 */
  --muted: #8B95A0;    /* secondary            6.0:1 */
  --faint: #7C858F;    /* tertiary             4.9:1 */

  /* Brand red — registered mark #D80000 for fills; brightened for text,
     because #D80000 on graphite only reaches ~3.4:1. */
  --brand: #D80000;        /* solid fills: buttons, marks, rules */
  --primary: #FF5555;      /* text / icons / hairlines — 5.8:1 */
  --primary-600: #EE1C26;  /* hover — brightens on a dark field */
  --primary-050: #2A1618;  /* tinted surface */
  --accent: #FF5555;       /* focus ring */

  /* Status — signal green, lifted for legibility on dark */
  --ok: #34D399;
  --ok-050: #12281F;

  /* Surfaces — lighter value = higher plane */
  --bg: #101418;         /* page */
  --bg-alt: #161A1F;     /* alternating band, table headers, chips */
  --surface: #1C2128;    /* cards */
  --surface-2: #232930;  /* hover / nested */
  --stage: #EFF1F3;      /* light plate beneath white-background product shots */
  --bg-deep: #0A0D10;    /* CTA band + footer — the deepest plane */
  --border: #262D35;
  --border-strong: #38414B;

  /* Radii — tight, instrument-panel geometry */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* Elevation — on a dark field shadow reads as depth, not grey haze */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --sh-md: 0 2px 8px rgba(0, 0, 0, .45);
  --sh-lg: 0 12px 28px -8px rgba(0, 0, 0, .60);
  --sh-xl: 0 24px 56px -18px rgba(0, 0, 0, .70);

  /* Type
     Inter carries no CJK glyphs, so Japanese text falls through to the system
     fonts listed after Arial. Hiragino covers macOS, Yu Gothic and Meiryo
     cover Windows. They are native, so the Japanese site adds no request and
     no Google Fonts dependency — which matters on a page governed by APPI. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Arial,
               'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
                  'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
               'Hiragino Sans', 'Yu Gothic', monospace;

  /* Layout */
  --container: 1200px;
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.022em;
}

/* Technical identifiers, part codes and data read as data, not prose. */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: .9em;
}

p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-600); }

ul { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 2b. Japanese typography ---------- */
/* Japanese packs more glyphs per line than Latin and the glyphs sit inside a
   square em box, so the Latin leading of 1.68 reads cramped. Headings go the
   other way: Japanese headings do not need the extra tracking that large
   Latin type does. */
:lang(ja) body { line-height: 1.9; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) h4 { line-height: 1.45; }
:lang(ja) .eyebrow,
:lang(ja) .compliance-group-title,
:lang(ja) .stat span,
:lang(ja) .dl-meta,
:lang(ja) figcaption { letter-spacing: .04em; }

/* Long Latin model numbers inside Japanese sentences must not be broken
   mid-token, but Japanese itself wraps anywhere. */
:lang(ja) .find-term,
:lang(ja) code { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 2c. Language switcher ---------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px;
  margin-right: 10px;
}
.lang-switch a {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--faint);
  text-decoration: none;
  padding: 4px 9px;
  border-radius: 3px;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.lang-switch a:hover { color: var(--ink); background: var(--bg-alt); }
.lang-switch a[aria-current="page"] {
  color: var(--bg-deep);
  background: var(--primary);
}
/* The switcher is the one control that must survive the mobile header, where
   the Buy button is hidden. */
@media (max-width: 860px) {
  .lang-switch { margin-right: 0; }
}

/* ---------- 3. Layout primitives ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: 88px 0; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding: 64px 0; }

.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: .4em; }
.section-head p { font-size: 1.075rem; color: var(--muted); margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
  background: none;
  border: 0;
  border-left: 2px solid var(--brand);
  padding: 1px 0 1px 11px;
  margin-bottom: 18px;
}

.eyebrow svg { width: 14px; height: 14px; }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: -.005em;
  padding: 13px 24px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), box-shadow .18s var(--ease);
  text-align: center;
  white-space: nowrap;
}

.btn svg { width: 17px; height: 17px; flex: none; }

/* Primary conversion — the registered brand red. Flat, no glow: on a page
   that is otherwise monochrome, one solid red button carries the eye. */
.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--sh-sm);
}
.btn--primary:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
  box-shadow: var(--sh-md);
}

/* Secondary — a light plane. On graphite this is the highest-contrast
   treatment available, so the "buy" actions stay the most prominent thing
   on screen while the red is reserved for the single primary action. */
.btn--secondary {
  background: #E7EBEF;
  border-color: #E7EBEF;
  color: #0D1116;
  box-shadow: var(--sh-sm);
}
.btn--secondary:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #0D1116;
  box-shadow: var(--sh-md);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--muted);
  color: var(--ink);
}

.btn--sm { padding: 9px 17px; font-size: .91rem; }
.btn--block { width: 100%; }
.btn:active { filter: brightness(.94); }

/* ---------- 5. Icons ---------- */
/* Lucide icons are outline artwork: they must be stroked, never filled.
   Without fill:none the line-based glyphs (e.g. the hamburger) have no
   area at all and render invisible. */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 20, 24, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s var(--ease);
}
/* A 2px brand rule across the top of the page, echoing the red bar that
   sits under the wordmark on the packaging. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brand);
}
.site-header.is-scrolled { box-shadow: var(--sh-md); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  transition: opacity .2s var(--ease);
}
.brand:hover { opacity: .8; }

/* Wordmark set as type rather than artwork — it stays crisp at any size and
   needs no bitmap. The red square is the packaging's red band, reduced to
   a mark. */
.brand-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: -.038em;
  line-height: 1;
  color: var(--ink);
}
.brand-mark::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--brand);
  align-self: flex-end;
  margin-bottom: .2em;
}

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; }
.main-nav a {
  font-weight: 500;
  font-size: .93rem;
  color: var(--body);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.main-nav a:hover { color: var(--ink); background: var(--bg-alt); }

.header-cta { display: flex; align-items: center; gap: 12px; flex: none; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 9px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 88px;
  background: var(--bg);
}
/* Engineering-drawing grid: a fine neutral rule fading across the viewport.
   Reads as a technical work surface rather than decoration. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .6;
  mask-image: radial-gradient(1200px 640px at 72% 12%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(1200px 640px at 72% 12%, #000 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(2.05rem, 4.2vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.028em;
  margin-bottom: 18px;
}
/* Brand + model designation, set as a part number rather than a tagline. */
.hero-copy h1 .brandline {
  display: block;
  font-family: var(--font-mono);
  font-size: .31em;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.15em;
}
.hero-lede { font-size: 1.13rem; color: var(--muted); max-width: 58ch; }

.hero-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 32px;
}
.hero-points li {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
}
.hero-points svg { width: 18px; height: 18px; color: var(--ok); flex: none; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.hero-trust span {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 500; color: var(--muted);
}
.hero-trust svg { width: 16px; height: 16px; color: var(--primary); flex: none; }

/* Hero visual */
.hero-visual { position: relative; }
.hero-figure {
  /* Light plate: the source shot has a white ground, so it is given a
     matching stage rather than floating as a white block on graphite. */
  position: relative;
  border-radius: var(--r-xl);
  background: var(--stage);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xl);
  padding: 22px;
  overflow: hidden;
}
.hero-figure img {
  width: 100%;
  border-radius: var(--r-lg);
  transition: transform .5s var(--ease);
}
.hero-figure:hover img { transform: scale(1.03); }

.figure-badge {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--r-sm);
}
.figure-badge svg { width: 13px; height: 13px; color: #fff; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
/* Specification read-out tiles — flat, hairline, monospace numerals. */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 15px 12px;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.stat span {
  font-size: .74rem;
  color: var(--muted);
  font-weight: 500;
  display: block;
  margin-top: 2px;
}

/* ---------- 8. Product / pack cards ---------- */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
  cursor: pointer;
}
.pack-card:hover {
  box-shadow: var(--sh-lg);
  border-color: var(--border-strong);
}
/* The recommended pack is marked by a red rule, not a soft glow. */
.pack-card.is-featured {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px var(--brand), var(--sh-md);
}

.pack-flag {
  position: absolute;
  top: -1px; left: 22px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .66rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  white-space: nowrap;
}

.pack-media {
  position: relative;
  border-radius: var(--r-md);
  background: var(--stage);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 18px;
}
.pack-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.pack-count {
  position: absolute;
  bottom: 8px; right: 8px;
  min-width: 36px; height: 26px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  /* Dark chip against the light photo stage. */
  background: var(--bg-deep);
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .04em;
}

.pack-card h3 {
  font-size: 1.22rem;
  margin-bottom: 6px;
}
.pack-includes {
  font-size: .92rem;
  color: var(--muted);
  margin-bottom: 14px;
  min-height: 3.4em;
}

.pack-list { list-style: none; margin: 0 0 20px; display: grid; gap: 8px; }
.pack-list li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .92rem;
  color: var(--body);
}
.pack-list svg { width: 16px; height: 16px; color: var(--ok); flex: none; margin-top: 4px; }

.pack-card .btn { margin-top: auto; }

/* Comparison strip */
.pack-compare {
  margin-top: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.table-scroll { overflow-x: auto; }
table.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  min-width: 640px;
}
table.compare thead th {
  background: var(--bg-deep);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 20px;
}
table.compare td {
  padding: 13px 20px;
  border-top: 1px solid var(--border);
  color: var(--body);
  font-variant-numeric: tabular-nums;
}
table.compare tbody tr:nth-child(even) { background: var(--bg-alt); }
table.compare tbody tr:hover { background: var(--bg-alt); }
table.compare td:first-child { font-weight: 600; color: var(--ink); }

/* ---------- 9. Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  cursor: default;
}
.feature-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--sh-md);
}
/* Uniform icon tile across the site: flat tint, hairline, one accent. */
.feature-icon {
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--primary-050);
  border: 1px solid #3A2126;
  color: var(--primary);
  margin-bottom: 16px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 1.16rem; margin-bottom: 8px; }
.feature-card p { font-size: .97rem; color: var(--muted); margin: 0; }

/* ---------- 10. LED grid ---------- */
.led-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.led-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color .18s var(--ease);
  cursor: default;
}
.led-chip:hover { border-color: var(--border-strong); }
/* Indicator lamp */
.led-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-050);
  flex: none;
}
.led-chip b {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .04em;
}
/* Informational note — neutral surface, a single brand hairline. */
.led-note {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-size: .92rem;
  color: var(--body);
}
.led-note svg { width: 17px; height: 17px; color: var(--brand); flex: none; margin-top: 3px; }

/* ---------- 11. Applications ---------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  text-align: center;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  cursor: default;
}
.app-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-md); }
.app-icon {
  width: 46px; height: 46px;
  margin: 0 auto 16px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--primary-050);
  border: 1px solid #3A2126;
  color: var(--primary);
}
.app-icon svg { width: 22px; height: 22px; }
.app-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.app-card p { font-size: .92rem; color: var(--muted); margin: 0; }

/* ---------- 12. Gallery ---------- */
.gallery-grid {
  display: grid;
  /* 6 gallery shots -> 3 columns fills exactly two rows */
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gallery-item {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--stage);
  box-shadow: var(--sh-sm);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
  cursor: pointer;
}
.gallery-item:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.gallery-item img {
  /* Source shots are near-square (ar ≈ 1.0). Use a square tile with
     `contain` so the whole product is visible — `cover` cropped up to
     26% of each image. The white padding blends with the imagery. */
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 14px;
  transition: transform .5s var(--ease);
}
.gallery-item:hover img { transform: scale(1.05); }

/* ---------- 13. Spec table ---------- */
.spec-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
/* Datasheet treatment: property names as monospace keys, values tabular. */
table.spec { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .95rem; }
table.spec th {
  width: 36%;
  text-align: left;
  padding: 13px 20px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
table.spec td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
table.spec tbody tr:last-child th,
table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec tbody tr:hover td,
table.spec tbody tr:hover th { background: var(--primary-050); }

/* The Tokushoho notation table reuses the datasheet treatment, but Japanese
   keys are not uppercased and read better in the sans face than the mono one.
   Values here are prose, not numbers, so tabular figures are switched off. */
table.spec--notation th {
  width: 28%;
  vertical-align: top;
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
table.spec--notation td { font-variant-numeric: normal; }
table.spec--notation tbody tr:hover td,
table.spec--notation tbody tr:hover th { background: none; }

/* ---------- 13b. Downloads ---------- */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.dl-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  cursor: pointer;
  color: inherit;
}
.dl-card:hover {
  border-color: var(--ink);
  box-shadow: var(--sh-md);
  color: inherit;
}
.dl-icon {
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--primary-050);
  border: 1px solid #3A2126;
  color: var(--primary);
}
.dl-icon svg { width: 22px; height: 22px; }
.dl-card h3 { font-size: 1rem; margin: 0 0 4px; letter-spacing: -.012em; }
.dl-card p { font-size: .87rem; color: var(--muted); margin: 0 0 8px; }
.dl-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--primary);
}
.dl-meta svg { width: 14px; height: 14px; }

/* ---------- 14. OS cards ---------- */
.os-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.os-card {
  display: flex; align-items: center; gap: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.os-card .feature-icon { margin: 0; width: 42px; height: 42px; }
.os-card .feature-icon svg { width: 20px; height: 20px; }
.os-card h3 { font-size: 1.05rem; margin: 0 0 2px; }
.os-card p { font-size: .9rem; color: var(--muted); margin: 0; }

/* ---------- 15. CTA band ---------- */
.cta-band {
  background: var(--bg-deep);
  color: #fff;
  padding: 68px 0;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--brand);
}
/* The same engineering grid as the hero, inverted and heavily faded. */
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(900px 420px at 78% 50%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(900px 420px at 78% 50%, #000 0%, transparent 72%);
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 34px;
  align-items: center;
}
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.45rem, 2.7vw, 2rem);
  letter-spacing: -.022em;
  margin-bottom: .35em;
}
.cta-band p { color: var(--muted); margin: 0; font-size: 1.02rem; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Outline button tuned for the dark band (beats the inline text colour). */
.cta-band .btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
}

/* ---------- 16. Footer ---------- */
.site-footer {
  background: var(--bg-deep);
  /* The CTA band above is the same plane — a hairline keeps them apart. */
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding: 56px 0 26px;
  font-size: .92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.footer-col h4 {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { color: var(--muted); transition: color .18s var(--ease); }
.footer-col a:hover { color: var(--ink); }
.footer-blurb { max-width: 38ch; margin: 16px 0 0; color: var(--faint); line-height: 1.65; }
.footer-bottom {
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  color: var(--faint);
}
.footer-bottom a { color: var(--faint); }
.footer-bottom a:hover { color: var(--ink); }

/* Legal links get their own row: the footer grid is already four columns,
   and a fifth would wrap. Every page carries the same four. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--ink); }
.footer-disclosure { margin-top: 18px; }

/* ---------- 17. Support page extras ---------- */
.page-hero {
  padding: 56px 0 40px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.page-hero h1 { font-size: clamp(1.85rem, 3.6vw, 2.55rem); letter-spacing: -.026em; margin-bottom: .35em; }
.page-hero p { color: var(--muted); max-width: 62ch; margin-inline: auto; }

.step-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-bottom: 14px;
}
.step-num {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--bg-deep);
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .92rem;
  flex: none;
}
.step-card h3 { font-size: 1.08rem; margin: 0 0 6px; }
.step-card p { font-size: .96rem; color: var(--muted); margin: 0; }

.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq details:hover { border-color: var(--border-strong); }
.faq summary {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  transition: background-color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--bg-alt); }
.faq summary svg {
  width: 18px; height: 18px;
  margin-left: auto;
  color: var(--muted);
  flex: none;
  transition: transform .25s var(--ease);
}
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .faq-body {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: .94rem;
  border-top: 1px solid var(--border);
  padding-top: 15px;
  margin-top: 0;
}
.faq-body p:last-child { margin-bottom: 0; }

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  text-align: center;
}
.contact-card .feature-icon { margin: 0 auto 16px; }
.contact-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.contact-card p { font-size: .93rem; color: var(--muted); margin: 0 0 4px; }

/* ---------- 17b. Amazon search strip ---------- */
.find {
  display: grid;
  grid-template-columns: 1fr 600px;
  gap: 44px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 34px 36px;
}
.find-copy h2 { font-size: clamp(1.35rem, 2.3vw, 1.7rem); margin-bottom: .45em; }
.find-copy p { font-size: .95rem; color: var(--muted); max-width: 54ch; margin: 0 0 16px; }
/* The exact search phrase, selectable in one click. */
.find-term {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .86rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  margin: 0 0 14px;
  user-select: all;
}
.find-copy .find-hint { font-size: .88rem; color: var(--body); margin: 0; }
.find-shot { margin: 0; }
.find-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.find-shot figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}

/* ---------- 18. Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 18. Legal & policy documents ---------- */
.doc { padding: 60px 0 92px; }
.doc-body { max-width: 78ch; margin-inline: auto; }

.doc-updated {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 34px;
}

/* These pages are long, so the reader gets a map up front. */
.doc-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 46px;
}
.doc-toc h2 {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
}
.doc-toc ol { margin: 0; padding-left: 18px; columns: 2; column-gap: 32px; }
.doc-toc li { margin-bottom: 6px; font-size: .92rem; }
.doc-toc a { color: var(--body); }
.doc-toc a:hover { color: var(--primary); }

.doc-body > h2 {
  font-size: 1.3rem;
  letter-spacing: -.018em;
  margin: 48px 0 .55em;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 28px);
}
.doc-body > h3 { font-size: 1.02rem; margin: 28px 0 .45em; }
.doc-body p { color: var(--body); margin: 0 0 15px; }
.doc-body ul { margin: 0 0 15px; padding-left: 20px; }
.doc-body li { color: var(--body); margin-bottom: 7px; }
.doc-body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Fields the owner must fill in before launch — visually impossible to miss. */
.doc-fill {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--primary);
  background: var(--primary-050);
  border-bottom: 1px dashed var(--primary);
  padding: 0 4px;
}

/* ---------- 18b. Regulatory marks ---------- */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* EMC carries four marks, substances two — separate groups keep each row
   complete instead of leaving an orphan card on the next line. */
.compliance-grid--four { grid-template-columns: repeat(4, 1fr); }
.compliance-grid--two  { grid-template-columns: repeat(2, 1fr); }

.compliance-block + .compliance-block { margin-top: 34px; }
.compliance-group-title {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}
.compliance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 26px;
}
.compliance-mark {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--ink);
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 4px 9px;
  margin-bottom: 14px;
}
.compliance-card h4 { font-size: 1rem; margin-bottom: .35em; }
.compliance-card p { font-size: .9rem; color: var(--muted); margin: 0 0 10px; }
.compliance-card p:last-child { margin-bottom: 0; }
.compliance-note {
  margin-top: 22px;
  font-size: .86rem;
  color: var(--faint);
  text-align: center;
}

/* ---------- 18c. Affiliate disclosure ---------- */
.fine-print {
  font-size: .82rem;
  color: var(--faint);
  margin: 0;
}
.fine-print a { color: var(--faint); text-decoration: underline; }
.fine-print a:hover { color: var(--ink); }

/* Sits between the buy buttons and the comparison table, so the disclosure is
   read before a link is clicked rather than only on a separate page. */
.disclosure {
  max-width: 70ch;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}
/* .find-copy p is more specific than .fine-print on its own. */
.find-copy .fine-print { font-size: .82rem; color: var(--faint); margin: 14px 0 0; }

/* ---------- 19. Responsive ---------- */
/* The Amazon card is the only layout wider than the standard 1200px frame,
   so it steps down before the shared breakpoints kick in. */
@media (max-width: 1300px) {
  .find { grid-template-columns: 1fr 520px; }
}

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: 640px; }
  .hero-figure { max-width: 560px; margin-inline: auto; }
  .pack-grid { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .os-grid, .contact-grid { grid-template-columns: 1fr; }
  .compliance-grid,
  .compliance-grid--four { grid-template-columns: repeat(2, 1fr); }
  .doc-toc ol { columns: 1; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  /* The nav leaves the flow here, so the toggle has to claim the free space. */
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { margin-left: auto; }
  .cta-inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .header-cta .btn { display: none; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .find { grid-template-columns: 1fr; gap: 28px; padding: 26px 22px; }
  .find-shot { max-width: 520px; margin-inline: auto; }
  .main-nav {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-lg);
    padding: 14px 24px 20px;
    margin: 0;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .main-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a { display: block; padding: 12px 14px; font-size: 1rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 40px; }
  .container { padding-inline: 20px; }
  .pack-grid, .app-grid, .feature-grid { grid-template-columns: 1fr; }
  .compliance-grid,
  .compliance-grid--four,
  .compliance-grid--two { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero { padding: 48px 0 60px; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-figure { padding: 16px; }
  .cta-band { padding: 52px 0; }
  .pack-card .btn, .hero-actions .btn { width: 100%; }
  .led-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 20. Reduced motion + print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .cta-band, .hero-actions { display: none; }
  body { font-size: 11pt; }
}