---
updatedAt: 2026-09-16T15:11:20.000Z
agentTools:
  projectIndex: https://docs.sixfab.com/llms.txt
---

# Device Comparison

Compare the ALPON X4 and X5 AI edge computers in terms of performance, AI acceleration, and I/O capabilities. This guide helps you choose the right device for your edge AI application.

<HTMLBlock>{`
<style>
/* === FONTS ============================================================== */
@font-face { font-family:'Gilroy'; src:url('https://sixfab.com/wp-content/fonts/Gilroy-Regular.woff2')   format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('https://sixfab.com/wp-content/fonts/Gilroy-Medium.woff2')    format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('https://sixfab.com/wp-content/fonts/Gilroy-SemiBold.woff2')  format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('https://sixfab.com/wp-content/fonts/Gilroy-Bold.woff2')      format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('https://sixfab.com/wp-content/fonts/Gilroy-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@2.304/fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@2.304/fonts/webfonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }

/* === DESIGN TOKENS (Tier 1-5, scoped to wrapper) ======================== */
.sf-doc {
  /* === TIER 1 — CORE BRAND ============================================== */
  --primary:       #034860;   /* Sixfab Teal — primary brand anchor */
  --secondary:     #00E0B8;   /* Signal Mint — primary accent */
  --tertiary:      #1B2D45;   /* Ink Navy — dark surface anchor */
  --neutral:       #E8F5F0;   /* Mist — soft brand-tinted surface */

  /* === TIER 2 — NEUTRAL & INTERFACE ===================================== */
  --white:         #FFFFFF;
  --light:         #F6F8F9;
  --line:          #DDE6EC;
  --slate-light:   #94A8B5;
  --slate:         #52667A;
  --deep-ink:      #10202E;

  /* === TIER 3 — AI / PRODUCT ACCENT ===================================== */
  --ai-iris:       #6B47F0;
  --ai-mist:       #F0EDFF;
  --alpon-purple:  #4F008E;   /* ALPON Gradient start */
  --alpon-cyan:    #00A6C8;   /* ALPON Gradient end */
  --alpon-cyan-deep: #007A8F; /* cyan surface for white text (WCAG AA 5.0:1) */

  /* === TIER 5 — SEMANTIC ================================================ */
  --success:       #00B894;
  --warning:       #F59E0B;
  --danger:        #DC2626;
  --info:          #429CBF;

  --success-text:  #047857;
  --warning-text:  #92400E;
  --danger-text:   #B91C1C;
  --info-text:     #0E4A66;

  --success-bg:    #E0F5EE;
  --warning-bg:    #FDF1DC;
  --danger-bg:     #FBE5E5;
  --info-bg:       #DCEFF7;

  /* === ON-COLORS ======================================================== */
  --on-primary:    #FFFFFF;
  --on-secondary:  #1B2D45;
  --on-neutral:    #10202E;

  /* === SPACING ========================================================== */
  --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 32px; --2xl: 48px; --3xl: 64px;

  /* === ROUNDED ========================================================== */
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  8px;
  --r-xl:  12px;
  --r-2xl: 16px;
  --r-full: 9999px;

  /* === GRADIENTS (named, fixed) ========================================= */
  --grad-edge-cloud:  linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --grad-alpon:       linear-gradient(135deg, var(--alpon-purple) 0%, var(--alpon-cyan) 100%);

  /* === SHADOWS ========================================================== */
  --shadow-sm:    0 1px 2px rgba(10, 23, 33, 0.04);
  --shadow-md:    0 4px 12px rgba(10, 23, 33, 0.06);
  --shadow-lg:    0 8px 24px rgba(10, 23, 33, 0.08);

  /* === FONTS ============================================================ */
  --font-sans: 'Gilroy', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* === Wrapper geometry ================================================= */
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--deep-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: none;
  padding: 0 0 var(--3xl);
}
.sf-doc * { box-sizing: border-box; }

/* === BASE TYPOGRAPHY (canonical from §4) ================================ */
.sf-doc h1 {
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--deep-ink);
  margin: 0 0 16px;
}
.sf-doc h2 {
  font-family: var(--font-sans);
  font-size: 1.75rem;             /* sf-h2--compact equivalent for dense reference */
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--primary);
  margin: 56px 0 16px;
  padding-bottom: 0;
  border-bottom: 0;
  scroll-margin-top: 24px;
}
.sf-doc h2:first-of-type { margin-top: 32px; }
.sf-doc h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--deep-ink);
  margin: 28px 0 10px;
}
.sf-doc h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 20px 0 8px;
  color: var(--deep-ink);
}
.sf-doc p {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--deep-ink);
  margin: 0 0 14px;
}
.sf-doc strong { font-weight: 700; color: var(--deep-ink); }
.sf-doc ul, .sf-doc ol { padding-left: 22px; margin: 10px 0 16px; }
.sf-doc ul li, .sf-doc ol li {
  font-size: 0.9375rem;
  color: var(--deep-ink);
  line-height: 1.6;
  margin-bottom: 6px;
}
.sf-doc ul li::marker { color: var(--primary); }
.sf-doc ol li::marker { color: var(--primary); font-weight: 700; }

.sf-doc a {
  color: var(--primary);
  text-decoration: none !important;
  transition: opacity .15s, color .15s;
  border-bottom: 0 !important;
}
.sf-doc a:hover, .sf-doc a:focus {
  text-decoration: none !important;
  opacity: 0.78;
}
.sf-doc a:visited { color: var(--primary); }

.sf-doc code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 400;
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  color: var(--primary);
}

.sf-doc hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

/* === LEAD PARAGRAPH ===================================================== */
.sf-doc .sf-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--deep-ink);
  margin: 0 0 20px;
  font-weight: 400;
}

/* === EYEBROW (Gilroy uppercase, AI Hat Quickstart pattern) ============== */
.sf-doc .sf-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  margin-bottom: 14px;
}

/* === ICON BASE ========================================================== */
.sf-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* ════════════════════════════════════════════════════════════════════════
   HERO - sf-hero (AI Hat Quickstart pattern, canonical Tier 1)
   Single-column compact variant: --light background, --deep-ink type,
   Sixfab Teal eyebrow with pulsing mint dot, padded card with rounded
   corners. AEO immediately below carries the ALPON gradient signal.
   ════════════════════════════════════════════════════════════════════════ */
.sf-doc .sf-hero {
  padding: var(--xl);
  margin: 0 0 var(--2xl);
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.sf-doc .sf-hero__copy { min-width: 0; }
.sf-doc .sf-hero__title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--deep-ink);
  margin: 0 0 14px;
}
.sf-doc .sf-hero__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--deep-ink);
  margin: 0 0 18px;
}
.sf-doc .sf-hero__lead code { background: var(--white); }
.sf-doc .sf-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
}

/* Eyebrow inside hero gets a pulsing mint dot — live-state cue. */
.sf-doc .sf-hero .sf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sf-doc .sf-hero .sf-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--secondary);
  box-shadow: 0 0 0 3px rgba(0, 224, 184, 0.22);
  animation: sf-hero-eyebrow-pulse 2.4s ease-in-out infinite;
}
@keyframes sf-hero-eyebrow-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.7); }
}

/* ════════════════════════════════════════════════════════════════════════
   META BAR - AI Hat Quickstart pattern
   Sans-serif inline meta line with badge + separators.
   ════════════════════════════════════════════════════════════════════════ */
.sf-doc .sf-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate);
  margin: 0 0 var(--xl);
}
.sf-doc .sf-meta__badge {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--light);
  color: var(--primary);
  border: 1px solid var(--line);
}
.sf-doc .sf-meta__sep {
  color: var(--line);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

/* === PILL / BADGE (§6.2) ================================================ */
.sf-doc .sf-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--light);
  color: var(--deep-ink);
  border: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4;
}
/* Product-keyed pill variants — solid brand color of the product they label.
   ALPON X5 AI uses ALPON Purple (gradient start). ALPON X4 uses ALPON Cyan
   (gradient end). Together they preview the ALPON Gradient. */
.sf-doc .sf-pill--alpon-x5 {
  background: var(--alpon-purple);
  color: #FFFFFF !important;
  border-color: var(--alpon-purple);
}
.sf-doc .sf-pill--alpon-x4 {
  background: var(--alpon-cyan-deep);
  color: #FFFFFF !important;
  border-color: var(--alpon-cyan-deep);
}
.sf-doc .sf-pill--brand {
  background: var(--primary);
  color: var(--on-primary) !important;
  border-color: var(--primary);
}
.sf-doc .sf-pill--success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-bg); }
.sf-doc .sf-pill--info    { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-bg); }

/* ════════════════════════════════════════════════════════════════════════
   AEO ANSWER BLOCK - sf-aeo / sf-aeo--ai (AI Hat Quickstart pattern, Tier 3)
   Pattern: question is the heading (large display type, sans-serif).
   Readable display type, larger than the answer paragraph. AI Iris (Tier 3)
   anchors the page on the NPU layer.
   ════════════════════════════════════════════════════════════════════════ */
.sf-doc .sf-aeo {
  position: relative;
  background: var(--light);
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-md);
  padding: var(--lg) var(--xl);
  margin: 0 0 var(--xl);
}
.sf-doc .sf-aeo--ai {
  background: var(--ai-mist);
  border-color: rgba(107, 71, 240, 0.20);
  border-left-color: var(--ai-iris);
}
.sf-doc .sf-aeo__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--primary);
  margin: 0 0 var(--sm);
}
.sf-doc .sf-aeo--ai .sf-aeo__label { color: var(--ai-iris); }
.sf-doc .sf-aeo__text {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--deep-ink);
  margin: 0;
}
.sf-doc .sf-aeo__text strong { color: var(--primary); font-weight: 700; }
.sf-doc .sf-aeo--ai .sf-aeo__text strong { color: var(--ai-iris); }

/* === TOC (§6.15) ======================================================== */
.sf-doc .sf-toc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin: 0 0 40px;
}
.sf-doc .sf-toc__label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-right: 8px;
}
.sf-doc .sf-toc__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--white);
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--deep-ink) !important;
  text-decoration: none !important;
  transition: all .15s;
  white-space: nowrap;
}
.sf-doc .sf-toc__item:hover {
  background: var(--primary);
  color: var(--on-primary) !important;
  box-shadow: inset 0 0 0 1px var(--primary);
  opacity: 1;
}
.sf-doc .sf-toc__num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--slate);
}
.sf-doc .sf-toc__item:hover .sf-toc__num { color: var(--secondary); }

/* === VERSUS HEADER (ALPON dual product visualization) =================== */
/* Comparison-specific composition — uses ALPON Gradient (Tier 3, ALPON
   product surface, sub-brand). Two product cards split the ALPON Gradient
   between alpon-purple (X5 AI side) and alpon-cyan (X4 side). */
.sf-doc .sf-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--white);
  margin: 16px 0 32px;
  box-shadow: var(--shadow-md);
}
.sf-doc .sf-versus__panel {
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  color: #FFFFFF !important;
}
.sf-doc .sf-versus__panel * { color: inherit; }
.sf-doc .sf-versus__panel--purple {
  background: var(--alpon-purple);
}
.sf-doc .sf-versus__panel--cyan {
  background: var(--alpon-cyan-deep);
  /* Both panels carry white text; the deep cyan keeps ≥4.5:1 for the
     small stat text (brand cyan #00A6C8 only reaches 2.9:1). */
}
.sf-doc .sf-versus__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95) !important;
}
.sf-doc .sf-versus__name {
  font-family: var(--font-sans);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #FFFFFF !important;
  margin: 0;
}
.sf-doc .sf-versus__sub {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 4px 0 0;
  font-weight: 500;
}

.sf-doc .sf-versus__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sf-doc .sf-versus__panel--cyan .sf-versus__stats {
  background: rgba(0,0,0,0.14);
  border-color: rgba(255,255,255,0.22);
}
.sf-doc .sf-versus__stat {
  padding: 10px 6px;
  text-align: center;
  position: relative;
}
.sf-doc .sf-versus__stat + .sf-versus__stat::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: rgba(255,255,255,0.2);
}
.sf-doc .sf-versus__panel--cyan .sf-versus__stat + .sf-versus__stat::before {
  background: rgba(255,255,255,0.22);
}
.sf-doc .sf-versus__stat-val {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 800;
  color: #FFFFFF !important;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.sf-doc .sf-versus__stat-val--mute {
  color: rgba(255, 255, 255, 0.80) !important;
  font-weight: 700;
}
.sf-doc .sf-versus__stat-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-top: 4px;
}

.sf-doc .sf-versus__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  text-decoration: none !important;
  align-self: flex-start;
  transition: opacity .15s;
}
.sf-doc .sf-versus__panel--purple .sf-versus__cta {
  background: #FFFFFF;
  color: var(--alpon-purple) !important;
}
.sf-doc .sf-versus__panel--cyan .sf-versus__cta {
  background: #FFFFFF;
  color: #10202E !important;
}
.sf-doc .sf-versus__cta:hover { opacity: 0.9; }
.sf-doc .sf-versus__cta svg { transition: transform .15s; }
.sf-doc .sf-versus__cta:hover svg { transform: translateX(2px); }

.sf-doc .sf-versus__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  background: var(--white);
  position: relative;
}
.sf-doc .sf-versus__vs-badge {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === DECISION CARDS (Pick X if…) ======================================== */
.sf-doc .sf-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 28px;
}
.sf-doc .sf-card {
  background: var(--white);
  color: var(--deep-ink);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--lg);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sf-doc .sf-card:hover {
  border-color: var(--slate-light);
  transform: translateY(-1px);
}
.sf-doc .sf-card--highlighted {
  background: var(--neutral);
  color: var(--on-neutral);
  border: 2px solid var(--secondary);
}

.sf-doc .sf-pick__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.sf-doc .sf-pick__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}
.sf-doc .sf-pick__product {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--primary);
}
.sf-doc .sf-pick__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sf-doc .sf-pick__list li {
  font-size: 0.875rem;
  color: var(--deep-ink);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
  margin-bottom: 0 !important;
  font-weight: 500;
}
.sf-doc .sf-pick__list li:first-child { padding-top: 0; }
.sf-doc .sf-pick__list li:last-child  { border-bottom: 0; padding-bottom: 0; }
.sf-doc .sf-pick__list li::before, .sf-doc .sf-pick__list li::marker {
  content: none !important;
  display: none !important;
}
.sf-doc .sf-pick__list strong { color: var(--primary); font-weight: 700; }

/* === CALLOUT (§6.3) ===================================================== */
.sf-doc .sf-callout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin: 24px 0;
  border-left: 4px solid;
}
.sf-doc .sf-callout__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}
.sf-doc .sf-callout__content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--deep-ink);
}
.sf-doc .sf-callout__content p { margin: 0; font-size: 0.9375rem; color: inherit; }
.sf-doc .sf-callout--info     { background: var(--info-bg);    border-left-color: var(--info); }
.sf-doc .sf-callout--info     .sf-callout__header { color: var(--info-text); }
.sf-doc .sf-callout--success  { background: var(--success-bg); border-left-color: var(--success); }
.sf-doc .sf-callout--success  .sf-callout__header { color: var(--success-text); }
.sf-doc .sf-callout--warning  { background: var(--warning-bg); border-left-color: var(--warning); }
.sf-doc .sf-callout--warning  .sf-callout__header { color: var(--warning-text); }

/* === SPEC TABLE (§6.10 sf-table--compare) =============================== */
.sf-doc .sf-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 16px 0 14px;
  padding: 10px 14px;
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.sf-doc .sf-jump__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-right: 6px;
}
.sf-doc .sf-jump a {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--deep-ink) !important;
  background: var(--white);
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 4px 11px;
  border-radius: var(--r-sm);
  transition: all .15s;
  text-decoration: none !important;
}
.sf-doc .sf-jump a:hover {
  background: var(--primary);
  color: var(--on-primary) !important;
  box-shadow: inset 0 0 0 1px var(--primary);
  opacity: 1;
}

.sf-doc .sf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0 0 12px;
  font-size: 0.75rem;
  color: var(--slate);
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
}
.sf-doc .sf-legend__bar {
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--warning-bg);
  border-left: 3px solid var(--warning);
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

.sf-doc .sf-table-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  margin: 0 0 16px;
}
.sf-doc .sf-table {
  /* ReadMe's markdown stylesheet sets table { display:block; overflow:auto },
     which makes the table shrink-wrap its columns and leaves a gap on the
     right. Force real table layout so it fills .sf-table-wrap. */
  display: table !important;
  width: 100% !important;
  max-width: none !important;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  margin: 0 !important;
  table-layout: fixed !important;
}
.sf-doc .sf-table thead { display: table-header-group !important; }
.sf-doc .sf-table tbody { display: table-row-group !important; }
.sf-doc .sf-table tr { display: table-row !important; }
.sf-doc .sf-table th, .sf-doc .sf-table td { display: table-cell !important; }
.sf-doc .sf-table th {
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--light);
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: bottom;
}
.sf-doc .sf-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--deep-ink);
  vertical-align: top;
  line-height: 1.55;
}
.sf-doc .sf-table tr:last-child td { border-bottom: 0; }

/* Comparison variant header cell */
.sf-doc .sf-table--compare th:first-child { width: 30%; }
.sf-doc .sf-table--compare .sf-thead-product {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.sf-doc .sf-table--compare .sf-thead-product__name {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--deep-ink);
  letter-spacing: -0.01em;
}
.sf-doc .sf-table--compare .sf-thead-product__sub {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sf-doc .sf-table--compare .sf-thead-product__sub--purple { color: var(--alpon-purple); }
.sf-doc .sf-table--compare .sf-thead-product__sub--cyan   { color: var(--alpon-cyan-deep); }

/* Key-value: first column emphasized */
.sf-doc .sf-table--compare td:first-child {
  font-weight: 600;
  color: var(--primary);
  background: var(--light);
  font-size: 0.8125rem;
}

/* In-cell values */
.sf-doc .sf-table .sf-val {
  display: block;
  color: var(--deep-ink);
  font-weight: 700;
  font-size: 0.875rem;
}
.sf-doc .sf-table .sf-sub {
  display: block;
  color: var(--slate);
  font-size: 0.75rem;
  margin-top: 3px;
  line-height: 1.5;
  font-weight: 500;
}
.sf-doc .sf-table .yes  { color: var(--success-text); font-weight: 700; }
.sf-doc .sf-table .no   { color: var(--slate); font-weight: 600; }
.sf-doc .sf-table .na   { color: var(--slate); font-style: italic; font-weight: 500; }

/* Section row — category divider inside table */
.sf-doc .sf-table .sf-section-row td {
  background: var(--light) !important;
  color: var(--primary) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--line) !important;
}

/* Diff row — sf-warning soft tint */
.sf-doc .sf-table .sf-diff-row td {
  background: var(--warning-bg);
}
.sf-doc .sf-table .sf-diff-row td:first-child {
  background: var(--warning-bg) !important;
  border-left: 3px solid var(--warning);
  padding-left: 13px;
  color: var(--warning-text);
}

.sf-doc .sf-spec-note {
  font-size: 0.8125rem;
  color: var(--slate);
  margin: 0 0 32px;
  font-style: italic;
}

/* === USE CASES (device lanes: one column per product) ==================== */
.sf-doc .sf-uc-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 16px 0 28px;
}
.sf-doc .sf-uc-lane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sf-doc .sf-uc-lane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  color: #FFFFFF;
}
.sf-doc .sf-uc-lane--purple .sf-uc-lane__head { background: var(--alpon-purple); }
.sf-doc .sf-uc-lane--cyan   .sf-uc-lane__head { background: var(--alpon-cyan-deep); }
.sf-doc .sf-uc-lane__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 2px;
}
.sf-doc .sf-uc-lane__name {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #FFFFFF !important;
}
.sf-doc .sf-uc-lane__tag {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF !important;
  white-space: nowrap;
}
.sf-doc .sf-uc-lane__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sf-doc .sf-uc {
  padding: 18px 18px 16px;
  flex: 1;
}
.sf-doc .sf-uc + .sf-uc { border-top: 1px solid var(--line-soft); }
.sf-doc .sf-uc__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sf-doc .sf-uc__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-doc .sf-uc-lane--purple .sf-uc__icon { background: rgba(79, 0, 142, 0.08); color: var(--alpon-purple); }
.sf-doc .sf-uc-lane--cyan   .sf-uc__icon { background: rgba(0, 122, 143, 0.10); color: var(--alpon-cyan-deep); }
.sf-doc .sf-uc__title {
  font-family: var(--font-sans);
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--deep-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.sf-doc .sf-uc__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sf-doc .sf-uc__list li {
  font-size: 0.8125rem;
  color: var(--deep-ink);
  padding: 4px 0 4px 14px;
  position: relative;
  line-height: 1.5;
  margin-bottom: 0 !important;
  font-weight: 500;
}
.sf-doc .sf-uc__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 5px; height: 5px;
  border-radius: var(--r-full);
}
.sf-doc .sf-uc-lane--purple .sf-uc__list li::before { background: var(--alpon-purple); }
.sf-doc .sf-uc-lane--cyan   .sf-uc__list li::before { background: var(--alpon-cyan-deep); }
.sf-doc .sf-uc__list li::marker { content: none !important; }

/* === SHARED FEATURES (mist surface, success-dot list) =================== */
.sf-doc .sf-shared {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px 24px 24px;
  background: var(--neutral);
  margin: 16px 0 28px;
  position: relative;
}
.sf-doc .sf-shared__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(3, 72, 96, 0.12);
}
.sf-doc .sf-shared__icon-wrap {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.sf-doc .sf-shared__title {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--deep-ink);
  letter-spacing: -0.01em;
}
.sf-doc .sf-shared__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--slate);
  font-weight: 500;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.sf-doc .sf-shared__list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 18px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sf-doc .sf-shared__list li {
  font-size: 0.8125rem;
  color: var(--deep-ink);
  padding: 4px 0 4px 18px;
  position: relative;
  margin-bottom: 0 !important;
  font-weight: 500;
  line-height: 1.5;
}
.sf-doc .sf-shared__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--success);
}
.sf-doc .sf-shared__list li::marker { content: none !important; }

/* === FAQ (§6.16 sf-faq) ================================================= */
.sf-doc .sf-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 24px;
}
.sf-doc .sf-faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
.sf-doc .sf-faq__q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--light);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--deep-ink);
  position: relative;
  transition: background .15s;
}
.sf-doc .sf-faq__q::-webkit-details-marker { display: none; }
.sf-doc .sf-faq__q::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 1.75px solid var(--slate);
  border-bottom: 1.75px solid var(--slate);
  transform: rotate(45deg);
  transition: transform .2s;
  margin-left: auto;
  margin-top: -3px;
  flex-shrink: 0;
}
.sf-doc .sf-faq__item[open] .sf-faq__q::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.sf-doc .sf-faq__item[open] .sf-faq__q { background: var(--white); border-bottom: 1px solid var(--line); }
.sf-doc .sf-faq__badge {
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sf-doc .sf-faq__qtext { flex: 1; }
.sf-doc .sf-faq__a {
  padding: 16px 18px 18px;
  font-size: 0.9375rem;
  color: var(--deep-ink);
  line-height: 1.6;
}
.sf-doc .sf-faq__a p { margin: 0 0 8px; font-size: 0.9375rem; }
.sf-doc .sf-faq__a p:last-child { margin-bottom: 0; }

/* === RELATED GUIDES (§6.18) ============================================= */
.sf-doc .sf-related { margin: 56px 0 0; }
.sf-doc .sf-related h2 { margin-top: 0; }
.sf-doc .sf-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.sf-doc .sf-related__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none !important;
  padding: var(--lg);
  /* Border drawn via inset box-shadow so it survives ReadMe's
     anchor border-bottom reset (sf-doc a { border-bottom:0 !important; }). */
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  transition: box-shadow .15s, transform .15s;
}
.sf-doc .sf-related__card:hover {
  box-shadow: inset 0 0 0 1px var(--primary), 0 4px 14px rgba(3, 72, 96, 0.08);
  transform: translateY(-2px);
}
.sf-doc .sf-related__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.sf-doc .sf-related__icon svg { width: 18px; height: 18px; }
.sf-doc .sf-related__title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--deep-ink);
  letter-spacing: -0.005em;
}
.sf-doc .sf-related__desc {
  font-size: 0.8125rem;
  color: var(--slate);
  line-height: 1.55;
  font-weight: 500;
}

/* === DARK MODE (§3.5, §9) =============================================== */
[data-color-mode="dark"] .sf-doc {
  --primary:       #034860;
  --secondary:     #00E0B8;
  --tertiary:      #1B2D45;
  --neutral:       #E8F5F0;

  --white:         #1B2D45;        /* page surface = tertiary */
  --light:         #14222F;
  --line:          #2A3A4D;
  --slate-light:   #94A8B5;
  --slate:         #B5C3CE;
  --deep-ink:      #E8F5F0;

  --success-bg:    #052E1B;
  --warning-bg:    #2A1F05;
  --danger-bg:     #2A0E0E;
  --info-bg:       #0A2E3F;
  --success-text:  #34D399;
  --warning-text:  #FBBF24;
  --danger-text:   #F87171;
  --info-text:     #5CD3EE;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.55);
}
[data-color-mode="dark"] .sf-doc h2 { color: var(--secondary); }
[data-color-mode="dark"] .sf-doc a  { color: var(--secondary); }
[data-color-mode="dark"] .sf-doc a:visited { color: var(--secondary); }
[data-color-mode="dark"] .sf-doc code { background: rgba(255,255,255,0.06); color: var(--secondary); }
[data-color-mode="dark"] .sf-doc .sf-eyebrow { color: var(--secondary); }
[data-color-mode="dark"] .sf-doc .sf-aeo { background: rgba(0, 224, 184, 0.04); }
[data-color-mode="dark"] .sf-doc .sf-aeo__text strong { color: var(--secondary); }
[data-color-mode="dark"] .sf-doc .sf-aeo--ai { background: rgba(107, 71, 240, 0.10); }
[data-color-mode="dark"] .sf-doc .sf-aeo--ai .sf-aeo__label,
[data-color-mode="dark"] .sf-doc .sf-aeo--ai .sf-aeo__text strong { color: #B59CFF; }
[data-color-mode="dark"] .sf-doc .sf-pick__product { color: var(--secondary); }
[data-color-mode="dark"] .sf-doc .sf-pick__list strong { color: var(--secondary); }
[data-color-mode="dark"] .sf-doc .sf-shared { background: rgba(0, 224, 184, 0.06); }
[data-color-mode="dark"] .sf-doc .sf-shared__icon-wrap { color: var(--secondary); }
[data-color-mode="dark"] .sf-doc .sf-versus__vs { background: var(--tertiary); }
[data-color-mode="dark"] .sf-doc .sf-versus { background: var(--tertiary); }
[data-color-mode="dark"] .sf-doc .sf-table--compare td:first-child { color: var(--secondary); background: var(--light); }
[data-color-mode="dark"] .sf-doc .sf-table .sf-section-row td { color: var(--secondary) !important; background: var(--light) !important; }
[data-color-mode="dark"] .sf-doc .sf-table--compare .sf-thead-product__sub--purple { color: #B59CFF; }
[data-color-mode="dark"] .sf-doc .sf-table--compare .sf-thead-product__sub--cyan   { color: #5CD3EE; }
[data-color-mode="dark"] .sf-doc .sf-uc-lane--purple .sf-uc__icon { background: rgba(107, 71, 240, 0.18); color: #B59CFF; }
[data-color-mode="dark"] .sf-doc .sf-uc-lane--cyan   .sf-uc__icon { background: rgba(92, 211, 238, 0.14); color: #5CD3EE; }
[data-color-mode="dark"] .sf-doc .sf-uc-lane--purple .sf-uc__list li::before { background: #B59CFF; }
[data-color-mode="dark"] .sf-doc .sf-uc-lane--cyan   .sf-uc__list li::before { background: #5CD3EE; }

/* Hero / meta / TOC dark-mode surfaces — AI Hat Quickstart pattern */
[data-color-mode="dark"] .sf-doc .sf-hero {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}
[data-color-mode="dark"] .sf-doc .sf-hero__title { color: var(--deep-ink); }
[data-color-mode="dark"] .sf-doc .sf-hero__lead  { color: var(--deep-ink); }
[data-color-mode="dark"] .sf-doc .sf-meta__badge { background: var(--light); color: var(--secondary); }
[data-color-mode="dark"] .sf-doc .sf-toc { background: rgba(255, 255, 255, 0.04); }
[data-color-mode="dark"] .sf-doc .sf-toc__item {
  background: rgba(255, 255, 255, 0.04);
  color: var(--deep-ink) !important;
  box-shadow: inset 0 0 0 1px var(--line);
}
[data-color-mode="dark"] .sf-doc .sf-toc__num { color: var(--slate); }
[data-color-mode="dark"] .sf-doc .sf-toc__item:hover {
  background: var(--primary);
  color: var(--white) !important;
  box-shadow: inset 0 0 0 1px var(--primary);
}
[data-color-mode="dark"] .sf-doc .sf-toc__item:hover .sf-toc__num { color: var(--secondary); }

/* Dark hierarchy per DESIGN.md §3.5:
   page (--tertiary) → section (--primary) → card (rgba white 6%)
   → highlighted card (--primary solid + 2px --secondary border) */
[data-color-mode="dark"] .sf-doc .sf-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}
[data-color-mode="dark"] .sf-doc .sf-card--highlighted {
  background: var(--primary);                /* Sixfab Teal solid */
  border: 2px solid var(--secondary);
  color: var(--neutral);                     /* Mist text */
}
[data-color-mode="dark"] .sf-doc .sf-card--highlighted .sf-pick__label {
  color: rgba(232, 245, 240, 0.7);           /* dimmed Mist for label */
}
[data-color-mode="dark"] .sf-doc .sf-card--highlighted .sf-pick__product {
  color: var(--secondary);                   /* Signal Mint accent */
}
[data-color-mode="dark"] .sf-doc .sf-card--highlighted .sf-pick__head {
  border-bottom-color: rgba(232, 245, 240, 0.2);
}
[data-color-mode="dark"] .sf-doc .sf-card--highlighted .sf-pick__list li {
  color: var(--neutral);
  border-bottom-color: rgba(232, 245, 240, 0.15);
}
[data-color-mode="dark"] .sf-doc .sf-card--highlighted .sf-pick__list strong {
  color: var(--secondary);
}

@media (prefers-color-scheme: dark) {
  html:not([data-color-mode="light"]) .sf-doc {
    --primary:       #034860;
    --secondary:     #00E0B8;
    --tertiary:      #1B2D45;
    --neutral:       #E8F5F0;
    --white:         #1B2D45;
    --light:         #14222F;
    --line:          #2A3A4D;
    --slate-light:   #94A8B5;
    --slate:         #B5C3CE;
    --deep-ink:      #E8F5F0;
    --success-bg:    #052E1B;
    --warning-bg:    #2A1F05;
    --danger-bg:     #2A0E0E;
    --info-bg:       #0A2E3F;
    --success-text:  #34D399;
    --warning-text:  #FBBF24;
    --danger-text:   #F87171;
    --info-text:     #5CD3EE;
  }
  html:not([data-color-mode="light"]) .sf-doc h2 { color: var(--secondary); }
  html:not([data-color-mode="light"]) .sf-doc a  { color: var(--secondary); }
  html:not([data-color-mode="light"]) .sf-doc a:visited { color: var(--secondary); }
  html:not([data-color-mode="light"]) .sf-doc code { background: rgba(255,255,255,0.06); color: var(--secondary); }
  html:not([data-color-mode="light"]) .sf-doc .sf-eyebrow { color: var(--secondary); }
  html:not([data-color-mode="light"]) .sf-doc .sf-aeo { background: rgba(0, 224, 184, 0.04); }
  html:not([data-color-mode="light"]) .sf-doc .sf-aeo__text strong { color: var(--secondary); }
  html:not([data-color-mode="light"]) .sf-doc .sf-aeo--ai { background: rgba(107, 71, 240, 0.10); }
  html:not([data-color-mode="light"]) .sf-doc .sf-aeo--ai .sf-aeo__label,
  html:not([data-color-mode="light"]) .sf-doc .sf-aeo--ai .sf-aeo__text strong { color: #B59CFF; }
  html:not([data-color-mode="light"]) .sf-doc .sf-pick__product { color: var(--secondary); }
  html:not([data-color-mode="light"]) .sf-doc .sf-pick__list strong { color: var(--secondary); }
  html:not([data-color-mode="light"]) .sf-doc .sf-shared { background: rgba(0, 224, 184, 0.06); }
  html:not([data-color-mode="light"]) .sf-doc .sf-shared__icon-wrap { color: var(--secondary); }
  html:not([data-color-mode="light"]) .sf-doc .sf-versus__vs { background: var(--tertiary); }
  html:not([data-color-mode="light"]) .sf-doc .sf-versus { background: var(--tertiary); }
  html:not([data-color-mode="light"]) .sf-doc .sf-table--compare td:first-child { color: var(--secondary); background: var(--light); }
  html:not([data-color-mode="light"]) .sf-doc .sf-table .sf-section-row td { color: var(--secondary) !important; background: var(--light) !important; }
  html:not([data-color-mode="light"]) .sf-doc .sf-table--compare .sf-thead-product__sub--purple { color: #B59CFF; }
  html:not([data-color-mode="light"]) .sf-doc .sf-table--compare .sf-thead-product__sub--cyan   { color: #5CD3EE; }
  html:not([data-color-mode="light"]) .sf-doc .sf-uc-lane--purple .sf-uc__icon { background: rgba(107, 71, 240, 0.18); color: #B59CFF; }
  html:not([data-color-mode="light"]) .sf-doc .sf-uc-lane--cyan   .sf-uc__icon { background: rgba(92, 211, 238, 0.14); color: #5CD3EE; }
  html:not([data-color-mode="light"]) .sf-doc .sf-uc-lane--purple .sf-uc__list li::before { background: #B59CFF; }
  html:not([data-color-mode="light"]) .sf-doc .sf-uc-lane--cyan   .sf-uc__list li::before { background: #5CD3EE; }

  html:not([data-color-mode="light"]) .sf-doc .sf-hero {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line);
  }
  html:not([data-color-mode="light"]) .sf-doc .sf-hero__title { color: var(--deep-ink); }
  html:not([data-color-mode="light"]) .sf-doc .sf-hero__lead  { color: var(--deep-ink); }
  html:not([data-color-mode="light"]) .sf-doc .sf-meta__badge { background: var(--light); color: var(--secondary); }
  html:not([data-color-mode="light"]) .sf-doc .sf-toc { background: rgba(255, 255, 255, 0.04); }
  html:not([data-color-mode="light"]) .sf-doc .sf-toc__item {
    background: rgba(255, 255, 255, 0.04);
    color: var(--deep-ink) !important;
    box-shadow: inset 0 0 0 1px var(--line);
  }
  html:not([data-color-mode="light"]) .sf-doc .sf-toc__num { color: var(--slate); }
  html:not([data-color-mode="light"]) .sf-doc .sf-toc__item:hover {
    background: var(--primary);
    color: var(--white) !important;
    box-shadow: inset 0 0 0 1px var(--primary);
  }
  html:not([data-color-mode="light"]) .sf-doc .sf-toc__item:hover .sf-toc__num { color: var(--secondary); }

  html:not([data-color-mode="light"]) .sf-doc .sf-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line);
  }
  html:not([data-color-mode="light"]) .sf-doc .sf-card--highlighted {
    background: var(--primary);
    border: 2px solid var(--secondary);
    color: var(--neutral);
  }
  html:not([data-color-mode="light"]) .sf-doc .sf-card--highlighted .sf-pick__label {
    color: rgba(232, 245, 240, 0.7);
  }
  html:not([data-color-mode="light"]) .sf-doc .sf-card--highlighted .sf-pick__product {
    color: var(--secondary);
  }
  html:not([data-color-mode="light"]) .sf-doc .sf-card--highlighted .sf-pick__head {
    border-bottom-color: rgba(232, 245, 240, 0.2);
  }
  html:not([data-color-mode="light"]) .sf-doc .sf-card--highlighted .sf-pick__list li {
    color: var(--neutral);
    border-bottom-color: rgba(232, 245, 240, 0.15);
  }
  html:not([data-color-mode="light"]) .sf-doc .sf-card--highlighted .sf-pick__list strong {
    color: var(--secondary);
  }
}

/* === RESPONSIVE ========================================================= */
@media (max-width: 820px) {
  .sf-doc h1 { font-size: 2.25rem; }
  .sf-doc h2 { font-size: 1.5rem; }

  .sf-doc .sf-hero { padding: var(--lg); }
  .sf-doc .sf-hero__title { font-size: 2.25rem; }

  .sf-doc .sf-versus { grid-template-columns: 1fr; }
  .sf-doc .sf-versus__vs {
    width: auto; height: 44px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .sf-doc .sf-pick     { grid-template-columns: 1fr; }
  .sf-doc .sf-uc-lanes { grid-template-columns: 1fr; }
  .sf-doc .sf-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-doc .sf-shared__list { grid-template-columns: repeat(2, 1fr); }

  .sf-doc .sf-table { font-size: 0.8125rem; }
  .sf-doc .sf-table th, .sf-doc .sf-table td { padding: 10px 12px; }
  .sf-doc .sf-table--compare th:first-child { width: 38%; }
}
@media (max-width: 480px) {
  .sf-doc .sf-hero { padding: var(--md); }
  .sf-doc .sf-hero__title { font-size: 1.875rem; }
  .sf-doc .sf-hero__lead { font-size: 1rem; }
  .sf-doc .sf-toc { gap: 4px; padding: 10px 12px; }
  .sf-doc .sf-toc__item { padding: 5px 9px; font-size: 0.75rem; }

  .sf-doc .sf-versus__stats { grid-template-columns: 1fr; }
  .sf-doc .sf-versus__stat + .sf-versus__stat::before {
    width: 80%; left: 10%; top: 0; bottom: auto; height: 1px;
  }
  .sf-doc .sf-shared__list { grid-template-columns: 1fr; }
  .sf-doc .sf-related__grid { grid-template-columns: 1fr; }
}
</style>

<div class="sf-doc">

  
  <header class="sf-hero">
    <div class="sf-hero__copy">
      <span class="sf-eyebrow">Compare ALPON devices</span>
      <p class="sf-hero__title">ALPON X5 AI vs ALPON X4: Device Comparison</p>
      <p class="sf-hero__lead">
        Two industrial edge computers, one shared platform. The <strong>ALPON X5 AI</strong> adds a 25 TOPS
        DEEPX DX-M1 NPU and a faster Cortex-A76 processor for on-device AI inference. The <strong>ALPON X4</strong>
        keeps the proven Cortex-A72 stack for IoT gateway, telemetry, and remote-monitoring workloads.
      </p>
      <div class="sf-hero__chips">
        <span class="sf-pill sf-pill--alpon-x5">ALPON X5 AI</span>
        <span class="sf-pill sf-pill--alpon-x4">ALPON X4</span>
        <span class="sf-pill">Edge AI Computer</span>
        <span class="sf-pill">Edge IoT Computer</span>
      </div>
    </div>
  </header>

  
  <div class="sf-meta">
    <span class="sf-meta__badge">ALPON</span>
    <span class="sf-meta__sep">·</span>
    <span>Device Comparison</span>
    <span class="sf-meta__sep">·</span>
    <span>Intelligented by DEEPX</span>
    <span class="sf-meta__sep">·</span>
    <span>Built on Raspberry Pi</span>
  </div>

  
  <div class="sf-aeo sf-aeo--ai">
    <span class="sf-aeo__label">Which ALPON should I choose?</span>
    <p class="sf-aeo__text">
      Choose the <strong>ALPON X5 AI</strong> if your workload involves computer vision, model inference,
      or any AI workload — it has a 25 TOPS DEEPX DX-M1 NPU, a Raspberry Pi CM5 (Cortex-A76 @ 2.4 GHz),
      NVMe SSD support, and 2× Gigabit Ethernet. Choose the <strong>ALPON X4</strong> for general-purpose
      IoT gateway, telemetry, and remote-monitoring workloads where an AI accelerator is not required.
      Both devices share the same ALPON Cloud platform, the same 9–30 V DC input, and the same fanless
      aluminum enclosure. Intelligented by DEEPX. Built on Raspberry Pi.
    </p>
  </div>

  
  <nav class="sf-toc" aria-label="In this guide">
    <span class="sf-toc__label">In this guide</span>
    <a class="sf-toc__item" href="#at-a-glance"><span class="sf-toc__num">01</span>At a glance</a>
    <a class="sf-toc__item" href="#decision"><span class="sf-toc__num">02</span>Quick decision</a>
    <a class="sf-toc__item" href="#specs"><span class="sf-toc__num">03</span>Full specs</a>
    <a class="sf-toc__item" href="#use-cases"><span class="sf-toc__num">04</span>Use cases</a>
    <a class="sf-toc__item" href="#shared"><span class="sf-toc__num">05</span>What's shared</a>
    <a class="sf-toc__item" href="#faq"><span class="sf-toc__num">06</span>FAQ</a>
  </nav>

  
  <h2 id="at-a-glance">At a glance</h2>
  <p>The headline differences in three numbers per device.</p>

  <div class="sf-versus">

    
    <div class="sf-versus__panel sf-versus__panel--purple">
      <span class="sf-versus__eyebrow">Edge AI Computer</span>
      <div>
        <h3 class="sf-versus__name">ALPON X5 AI</h3>
        <p class="sf-versus__sub">Raspberry Pi CM5 · DEEPX DX-M1 NPU</p>
      </div>
      <div class="sf-versus__stats">
        <div class="sf-versus__stat">
          <span class="sf-versus__stat-val">25 TOPS</span>
          <span class="sf-versus__stat-label">AI Performance</span>
        </div>
        <div class="sf-versus__stat">
          <span class="sf-versus__stat-val">2.4 GHz</span>
          <span class="sf-versus__stat-label">Cortex-A76</span>
        </div>
        <div class="sf-versus__stat">
          <span class="sf-versus__stat-val">2× 1 GbE</span>
          <span class="sf-versus__stat-label">Ethernet</span>
        </div>
      </div>
      <a class="sf-versus__cta" href="/docs/alpon-x5-ai-edge-computer-overview" target="_blank" rel="noopener">
        ALPON X5 AI docs
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M5 12h14"/><path d="M13 6l6 6l-6 6"/>
        </svg>
      </a>
    </div>

    
    <div class="sf-versus__vs">
      <span class="sf-versus__vs-badge">VS</span>
    </div>

    
    <div class="sf-versus__panel sf-versus__panel--cyan">
      <span class="sf-versus__eyebrow">Edge IoT Computer</span>
      <div>
        <h3 class="sf-versus__name">ALPON X4</h3>
        <p class="sf-versus__sub">Raspberry Pi CM4 · gateway-focused</p>
      </div>
      <div class="sf-versus__stats">
        <div class="sf-versus__stat">
          <span class="sf-versus__stat-val sf-versus__stat-val--mute">No NPU</span>
          <span class="sf-versus__stat-label">AI Performance</span>
        </div>
        <div class="sf-versus__stat">
          <span class="sf-versus__stat-val">1.5 GHz</span>
          <span class="sf-versus__stat-label">Cortex-A72</span>
        </div>
        <div class="sf-versus__stat">
          <span class="sf-versus__stat-val">1× GbE</span>
          <span class="sf-versus__stat-label">+ 100 Mbps</span>
        </div>
      </div>
      <a class="sf-versus__cta" href="/docs/alpon-x4-edge-computer-overview" target="_blank" rel="noopener">
        ALPON X4 docs
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M5 12h14"/><path d="M13 6l6 6l-6 6"/>
        </svg>
      </a>
    </div>

  </div>

  
  <h2 id="decision">Quick decision guide</h2>
  <p>If you can answer "yes" to any of the following, the choice is clear.</p>

  <div class="sf-pick">
    
    <div class="sf-card sf-card--highlighted">
      <div class="sf-pick__head">
        <h3 class="sf-pick__label">Pick</h3>
        <span class="sf-pick__product">ALPON X5 AI</span>
      </div>
      <ul class="sf-pick__list">
        <li>Run computer vision, object detection, or segmentation on-device</li>
        <li>Deploy quantized AI models (INT8) at <strong>25 TOPS</strong></li>
        <li>Process multiple camera streams in real time</li>
        <li>Use <strong>Raspberry Pi CM5</strong> (Cortex-A76) and NVMe SSD</li>
        <li>Drive a 4K display at 60 Hz</li>
      </ul>
    </div>

    <div class="sf-card">
      <div class="sf-pick__head">
        <h3 class="sf-pick__label">Pick</h3>
        <span class="sf-pick__product">ALPON X4</span>
      </div>
      <ul class="sf-pick__list">
        <li>Build an industrial IoT gateway or telemetry collector</li>
        <li>Aggregate sensor data and forward it to the cloud</li>
        <li>Deploy long-running services without GPU/NPU workloads</li>
        <li>Optimize for cost where AI inference is not required</li>
        <li>Use proven <strong>Raspberry Pi CM4</strong> hardware</li>
      </ul>
    </div>
  </div>

  
  <div class="sf-callout sf-callout--info">
    <div class="sf-callout__header">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
      <span>Drop-in replacement?</span>
    </div>
    <div class="sf-callout__content">
      <p>The ALPON X5 AI is <strong>not a drop-in replacement</strong> for the ALPON X4. The two devices share the same ALPON Cloud platform, but they differ in dimensions (X5 AI is 12&nbsp;mm taller), processor architecture, and I/O layout. Validate your antenna, mounting, and power assumptions before swapping.</p>
    </div>
  </div>

  
  <h2 id="specs">Full specification comparison</h2>
  <p>Every spec from the official datasheets, side by side. Highlighted rows are where the two devices differ.</p>

  <nav class="sf-jump" aria-label="Jump to spec category">
    <span class="sf-jump__label">Jump to</span>
    <a href="#spec-ai">AI</a>
    <a href="#spec-system">System</a>
    <a href="#spec-conn">Connectivity</a>
    <a href="#spec-io">I/O</a>
    <a href="#spec-power">Power</a>
    <a href="#spec-mech">Mechanical</a>
    <a href="#spec-sec">Security</a>
    <a href="#spec-sw">Software</a>
  </nav>

  <div class="sf-legend">
    <span><span class="sf-legend__bar"></span>Key difference — unhighlighted rows are identical across both devices.</span>
  </div>

  <div class="sf-table-wrap">
    <table class="sf-table sf-table--compare">
      <thead>
        <tr>
          <th>Specification</th>
          <th>
            <div class="sf-thead-product">
              <span class="sf-thead-product__name">ALPON X5 AI</span>
              <span class="sf-thead-product__sub sf-thead-product__sub--purple">Edge AI Computer</span>
            </div>
          </th>
          <th>
            <div class="sf-thead-product">
              <span class="sf-thead-product__name">ALPON X4</span>
              <span class="sf-thead-product__sub sf-thead-product__sub--cyan">Edge IoT Computer</span>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>

        <tr class="sf-section-row" id="spec-ai"><td colspan="3">AI Acceleration</td></tr>
        <tr class="sf-diff-row">
          <td>AI Accelerator</td>
          <td><span class="sf-val">DEEPX DX-M1</span><span class="sf-sub">M.2 2280, on-board</span></td>
          <td><span class="no">None</span></td>
        </tr>
        <tr class="sf-diff-row">
          <td>AI Performance</td>
          <td><span class="sf-val">25 TOPS</span><span class="sf-sub">INT8 inference</span></td>
          <td class="na">Not applicable</td>
        </tr>
        <tr class="sf-diff-row">
          <td>NPU Memory</td>
          <td><span class="sf-val">4 GB on-chip</span><span class="sf-sub">Dedicated, does not share system RAM</span></td>
          <td class="na">Not applicable</td>
        </tr>
        <tr class="sf-diff-row">
          <td>NPU Power</td>
          <td><span class="sf-val">2&ndash;5 W</span><span class="sf-sub">Min/max under AI workloads</span></td>
          <td class="na">Not applicable</td>
        </tr>

        <tr class="sf-section-row" id="spec-system"><td colspan="3">System</td></tr>
        <tr class="sf-diff-row">
          <td>Compute Module</td>
          <td><span class="sf-val">Raspberry Pi CM5</span></td>
          <td><span class="sf-val">Raspberry Pi CM4</span></td>
        </tr>
        <tr class="sf-diff-row">
          <td>Processor</td>
          <td><span class="sf-val">Broadcom BCM2712</span><span class="sf-sub">Quad-core Cortex-A76 @ 2.4 GHz (Armv8)</span></td>
          <td><span class="sf-val">Broadcom BCM2711</span><span class="sf-sub">Quad-core Cortex-A72 @ 1.5 GHz (Armv8)</span></td>
        </tr>
        <tr class="sf-diff-row">
          <td>Memory</td>
          <td><span class="sf-val">8 GB or 16 GB</span><span class="sf-sub">LPDDR4-4267 with ECC</span></td>
          <td><span class="sf-val">8 GB</span><span class="sf-sub">LPDDR4 (optional 2 GB / 4 GB)</span></td>
        </tr>
        <tr class="sf-diff-row">
          <td>Storage</td>
          <td><span class="sf-val">eMMC + NVMe SSD</span><span class="sf-sub">CM5 eMMC (optional) plus NVMe</span></td>
          <td><span class="sf-val">32 GB eMMC</span><span class="sf-sub">Optional 8 GB / 16 GB</span></td>
        </tr>
        <tr>
          <td>Real-Time Clock</td>
          <td>CR1220 coin cell</td>
          <td>CR1220 coin cell</td>
        </tr>

        <tr class="sf-section-row" id="spec-conn"><td colspan="3">Connectivity</td></tr>
        <tr>
          <td>Cellular</td>
          <td>4G / LTE Cat&nbsp;4 (Global)</td>
          <td>4G / LTE Cat&nbsp;4 (Global)</td>
        </tr>
        <tr>
          <td>eSIM (eUICC)</td>
          <td><span class="yes">Remote profile mgmt</span></td>
          <td><span class="yes">Remote profile mgmt</span></td>
        </tr>
        <tr>
          <td>Wi-Fi</td>
          <td>2.4 / 5 GHz, 802.11 b/g/n/ac</td>
          <td>2.4 / 5 GHz, 802.11 b/g/n/ac</td>
        </tr>
        <tr>
          <td>Bluetooth 5.0 / BLE</td>
          <td><span class="yes">Yes</span></td>
          <td><span class="yes">Yes</span></td>
        </tr>
        <tr class="sf-diff-row">
          <td>Ethernet</td>
          <td><span class="sf-val">2× Gigabit Ethernet</span><span class="sf-sub">RJ45</span></td>
          <td><span class="sf-val">1× Gigabit Ethernet + 1× 100 Mbps</span><span class="sf-sub">RJ45</span></td>
        </tr>
        <tr>
          <td>GNSS / GPS</td>
          <td>GPS/GNSS + cellular geolocation</td>
          <td>GPS/GNSS + cellular geolocation</td>
        </tr>
        <tr>
          <td>LTE Data Rate</td>
          <td>150 Mbps DL / 50 Mbps UL (theoretical)</td>
          <td>150 Mbps DL / 50 Mbps UL (theoretical)</td>
        </tr>

        <tr class="sf-section-row" id="spec-io"><td colspan="3">Input / Output</td></tr>
        <tr class="sf-diff-row">
          <td>USB</td>
          <td><span class="sf-val">2× USB 3.0 + 1× USB-C OTG</span></td>
          <td><span class="sf-val">2× USB 2.0 + 1× USB-C PD</span></td>
        </tr>
        <tr class="sf-diff-row">
          <td>Display</td>
          <td><span class="sf-val">HDMI 2.0, up to 4K @ 60 Hz</span></td>
          <td><span class="sf-val">HDMI 2.0, up to 4K @ 30 Hz</span></td>
        </tr>
        <tr class="sf-diff-row">
          <td>Camera Interface</td>
          <td><span class="sf-val">1× 4-lane MIPI</span><span class="sf-sub">DSI/CSI over mini HDMI</span></td>
          <td><span class="no">None</span></td>
        </tr>
        <tr class="sf-diff-row">
          <td>GPIO</td>
          <td><span class="sf-val">RJ45 breakout</span><span class="sf-sub">I2C, UART, SPI, 5V, GND</span></td>
          <td><span class="sf-val">6× RPi GPIO pins</span><span class="sf-sub">5V output, 1A max</span></td>
        </tr>
        <tr>
          <td>User Buttons</td>
          <td>2× programmable</td>
          <td>2× programmable</td>
        </tr>
        <tr class="sf-diff-row">
          <td>LED Indicators</td>
          <td><span class="sf-val">4 LEDs</span><span class="sf-sub">1× user RGB, 1× power, 2× status</span></td>
          <td><span class="sf-val">4 LEDs</span><span class="sf-sub">1× RGB, 1× cellular, 1× connection, 1× power</span></td>
        </tr>
        <tr>
          <td>DIP Switches</td>
          <td>Boot/Burn, Watchdog</td>
          <td>Boot/Burn, Watchdog</td>
        </tr>

        <tr class="sf-section-row" id="spec-power"><td colspan="3">Power</td></tr>
        <tr>
          <td>Input Voltage</td>
          <td>9&ndash;30 V DC, 27 W</td>
          <td>9&ndash;30 V DC, 27 W</td>
        </tr>
        <tr>
          <td>Power Options</td>
          <td>USB-C PD · Screw terminal · PoE+ (optional)</td>
          <td>USB-C PD · Screw terminal · PoE+ (optional)</td>
        </tr>
        <tr class="sf-diff-row">
          <td>USB Output</td>
          <td><span class="sf-val">5 V DC, 1.8 A total</span><span class="sf-sub">USB 3.0</span></td>
          <td><span class="sf-val">5 V DC, 1 A total</span><span class="sf-sub">USB 2.0</span></td>
        </tr>

        <tr class="sf-section-row" id="spec-mech"><td colspan="3">Mechanical &amp; Environmental</td></tr>
        <tr class="sf-diff-row">
          <td>Dimensions</td>
          <td><span class="sf-val">100 × 100 × 45 mm</span><span class="sf-sub">3.93 × 3.93 × 1.77 in</span></td>
          <td><span class="sf-val">111 × 100 × 33 mm</span><span class="sf-sub">4.37 × 3.93 × 1.30 in</span></td>
        </tr>
        <tr>
          <td>Weight</td>
          <td>~457 g (1 lb)</td>
          <td>~457 g (1 lb)</td>
        </tr>
        <tr>
          <td>Enclosure</td>
          <td>Aluminum, fanless, passively cooled</td>
          <td>Aluminum, fanless, passively cooled</td>
        </tr>
        <tr>
          <td>Protection Class</td>
          <td>IP40</td>
          <td>IP40</td>
        </tr>
        <tr>
          <td>Operating Temperature</td>
          <td>&minus;20 °C to +60 °C</td>
          <td>&minus;20 °C to +60 °C</td>
        </tr>
        <tr>
          <td>Storage Temperature</td>
          <td>&minus;40 °C to +85 °C</td>
          <td>&minus;40 °C to +85 °C</td>
        </tr>
        <tr>
          <td>Mounting</td>
          <td>Desk, DIN rail, wall (optional)</td>
          <td>Desk, DIN rail, wall (optional)</td>
        </tr>

        <tr class="sf-section-row" id="spec-sec"><td colspan="3">Security</td></tr>
        <tr>
          <td>TPM 2.0</td>
          <td>Infineon SLB 9670VQ2.0</td>
          <td>Infineon SLB 9670VQ2.0</td>
        </tr>
        <tr>
          <td>Hardware Watchdog</td>
          <td><span class="yes">Yes</span></td>
          <td><span class="yes">Yes</span></td>
        </tr>

        <tr class="sf-section-row" id="spec-sw"><td colspan="3">Software &amp; Platform</td></tr>
        <tr class="sf-diff-row">
          <td>Operating System</td>
          <td><span class="sf-val">ALPON X5 AI OS</span><span class="sf-sub">Raspberry Pi compatible, with DEEPX runtime</span></td>
          <td><span class="sf-val">ALPON X4 OS</span><span class="sf-sub">Raspberry Pi compatible</span></td>
        </tr>
        <tr>
          <td>ALPON Cloud</td>
          <td><span class="yes">Full support</span></td>
          <td><span class="yes">Full support</span></td>
        </tr>
        <tr>
          <td>Fleet Management</td>
          <td><span class="yes">Yes</span></td>
          <td><span class="yes">Yes</span></td>
        </tr>
        <tr>
          <td>OTA Updates</td>
          <td><span class="yes">Yes</span></td>
          <td><span class="yes">Yes</span></td>
        </tr>
        <tr>
          <td>Container Deployment</td>
          <td><span class="yes">Docker (ARM64)</span></td>
          <td><span class="yes">Docker (ARM64)</span></td>
        </tr>
        <tr>
          <td>Multi-Network Failover</td>
          <td><span class="yes">Ethernet &rarr; Wi-Fi &rarr; LTE</span></td>
          <td><span class="yes">Ethernet &rarr; Wi-Fi &rarr; LTE</span></td>
        </tr>

      </tbody>
    </table>
  </div>

  <p class="sf-spec-note">
    Specifications are taken from the official ALPON X5 AI and ALPON X4 datasheets. Some variants may ship with different memory, storage, or PoE options. See the <a href="/docs/alpon-x5-ai-edge-computer-specifications" target="_blank" rel="noopener">ALPON X5 AI Specifications</a> or <a href="/docs/alpon-x4-edge-computer-specifications" target="_blank" rel="noopener">ALPON X4 Specifications</a> pages for variant detail.
  </p>

  
  <h2 id="use-cases">Typical use cases</h2>
  <p>Workloads where each device fits naturally.</p>

  <div class="sf-uc-lanes">

    <section class="sf-uc-lane sf-uc-lane--purple" aria-labelledby="uc-x5">
      <header class="sf-uc-lane__head">
        <div>
          <span class="sf-uc-lane__eyebrow">Edge AI Computer</span>
          <span class="sf-uc-lane__name" id="uc-x5">ALPON X5 AI</span>
        </div>
        <span class="sf-uc-lane__tag">25 TOPS on-device inference</span>
      </header>
      <div class="sf-uc-lane__body">

        <article class="sf-uc">
          <div class="sf-uc__head">
            <span class="sf-uc__icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
            </span>
            <h3 class="sf-uc__title">Computer vision &amp; AI</h3>
          </div>
          <ul class="sf-uc__list">
            <li>Real-time object detection (YOLO family)</li>
            <li>People counting and traffic analytics</li>
            <li>Defect detection on production lines</li>
            <li>License plate recognition (ALPR)</li>
            <li>Smart camera and CCTV analytics</li>
          </ul>
        </article>

        <article class="sf-uc">
          <div class="sf-uc__head">
            <span class="sf-uc__icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M6 5h12a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2z"/>
                <path d="M9 17v3"/><path d="M15 17v3"/>
                <circle cx="9" cy="11" r="1"/><circle cx="15" cy="11" r="1"/>
              </svg>
            </span>
            <h3 class="sf-uc__title">Robotics &amp; autonomy</h3>
          </div>
          <ul class="sf-uc__list">
            <li>Autonomous mobile robots (AMRs)</li>
            <li>Vision-based navigation</li>
            <li>Edge inference for ROS / ROS&nbsp;2</li>
            <li>Multi-stream sensor fusion</li>
          </ul>
        </article>

      </div>
    </section>

    <section class="sf-uc-lane sf-uc-lane--cyan" aria-labelledby="uc-x4">
      <header class="sf-uc-lane__head">
        <div>
          <span class="sf-uc-lane__eyebrow">Edge IoT Computer</span>
          <span class="sf-uc-lane__name" id="uc-x4">ALPON X4</span>
        </div>
        <span class="sf-uc-lane__tag">Connectivity &amp; telemetry</span>
      </header>
      <div class="sf-uc-lane__body">

        <article class="sf-uc">
          <div class="sf-uc__head">
            <span class="sf-uc__icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M3 17a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2"/>
                <path d="M15 17a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2"/>
                <path d="M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2"/>
                <path d="M6 15v-1a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v1"/>
                <path d="M12 9l0 3"/>
              </svg>
            </span>
            <h3 class="sf-uc__title">Industrial IoT gateway</h3>
          </div>
          <ul class="sf-uc__list">
            <li>Modbus and OPC-UA data aggregation</li>
            <li>Telemetry forwarding to cloud platforms</li>
            <li>Remote machine monitoring</li>
            <li>Asset tracking with cellular failover</li>
          </ul>
        </article>

        <article class="sf-uc">
          <div class="sf-uc__head">
            <span class="sf-uc__icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M3 18a9 9 0 0 1 18 0"/>
                <path d="M6 18a6 6 0 0 1 12 0"/>
                <path d="M9 18a3 3 0 0 1 6 0"/>
                <circle cx="12" cy="18" r="0.5" fill="currentColor"/>
              </svg>
            </span>
            <h3 class="sf-uc__title">Connected infrastructure</h3>
          </div>
          <ul class="sf-uc__list">
            <li>Smart-city sensor backhaul</li>
            <li>Vending and kiosk telemetry</li>
            <li>Energy and utility metering</li>
            <li>Mobile and vehicle gateway</li>
          </ul>
        </article>

      </div>
    </section>

  </div>

  
  <h2 id="shared">What both devices share</h2>
  <p>Once you onboard a device, the platform experience is identical. Learn it once, use it for either fleet.</p>

  <div class="sf-shared">
    <div class="sf-shared__head">
      <span class="sf-shared__icon-wrap">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M12 4l-8 4l8 4l8 -4l-8 -4"/>
          <path d="M4 12l8 4l8 -4"/>
          <path d="M4 16l8 4l8 -4"/>
        </svg>
      </span>
      <div>
        <h3 class="sf-shared__title">Shared platform &amp; hardware</h3>
        <span class="sf-shared__sub">Common across ALPON X4 and ALPON X5 AI</span>
      </div>
    </div>
    <ul class="sf-shared__list">
      <li>ALPON Cloud fleet management</li>
      <li>OTA updates and rollback</li>
      <li>Container-based deployment</li>
      <li>Multi-network failover</li>
      <li>eSIM (eUICC) profile mgmt</li>
      <li>TPM 2.0 hardware root of trust</li>
      <li>Hardware watchdog</li>
      <li>Fanless aluminum enclosure</li>
      <li>&minus;20 °C to +60 °C operating range</li>
      <li>9&ndash;30 V DC, USB-C PD, optional PoE+</li>
      <li>DIN rail and wall mounting</li>
      <li>2× user-programmable buttons</li>
    </ul>
  </div>

  
  <h2 id="faq">Frequently asked</h2>
  <p>Common questions when choosing between the ALPON X5 AI and the ALPON X4.</p>

  <section class="sf-faq">
    <details class="sf-faq__item">
      <summary class="sf-faq__q">
        <span class="sf-faq__badge">Q</span>
        <span class="sf-faq__qtext">Does the ALPON X5 AI consume more power than the ALPON X4?</span>
      </summary>
      <div class="sf-faq__a">
        <p>Yes, under AI workloads. The DEEPX NPU adds 2&ndash;5 W on top of the system baseline. Both devices accept the same 9&ndash;30 V DC input and the same 27 W USB-C PD power supply, so power-supply sizing usually does not change.</p>
      </div>
    </details>

    <details class="sf-faq__item">
      <summary class="sf-faq__q">
        <span class="sf-faq__badge">Q</span>
        <span class="sf-faq__qtext">Can I migrate a workload from ALPON X4 to ALPON X5 AI without code changes?</span>
      </summary>
      <div class="sf-faq__a">
        <p>If your workload is a containerized ARM64 service that does not depend on X4-specific GPIO pinouts, it will run unchanged on the ALPON X5 AI. AI inference code and DEEPX runtime calls are ALPON X5 AI only.</p>
      </div>
    </details>

    <details class="sf-faq__item">
      <summary class="sf-faq__q">
        <span class="sf-faq__badge">Q</span>
        <span class="sf-faq__qtext">Are the antennas and accessories interchangeable?</span>
      </summary>
      <div class="sf-faq__a">
        <p>The cellular, Wi-Fi, and GNSS antennas use the same connectors on both devices and are interchangeable. Mounting kits and the IP67 outdoor antenna are also shared.</p>
      </div>
    </details>

    <details class="sf-faq__item">
      <summary class="sf-faq__q">
        <span class="sf-faq__badge">Q</span>
        <span class="sf-faq__qtext">Can I replace an ALPON X4 with an ALPON X5 AI in the same enclosure cutout?</span>
      </summary>
      <div class="sf-faq__a">
        <p>Not directly. The ALPON X5 AI is 12&nbsp;mm taller (45&nbsp;mm vs 33&nbsp;mm) due to the DEEPX module and PCIe switch. The footprint (100 × 100 mm) is similar but not identical to the ALPON X4 (111 × 100 mm). Re-validate any custom enclosure or panel cutout.</p>
      </div>
    </details>

    <details class="sf-faq__item">
      <summary class="sf-faq__q">
        <span class="sf-faq__badge">Q</span>
        <span class="sf-faq__qtext">Does the ALPON X4 still receive software and security updates?</span>
      </summary>
      <div class="sf-faq__a">
        <p>Yes. The ALPON X4 remains an actively supported product. It shares the same ALPON Cloud platform, OTA pipeline, and security update cadence as the ALPON X5 AI. AI-specific OS components such as the DEEPX runtime are exclusive to the ALPON X5 AI image.</p>
      </div>
    </details>

    <details class="sf-faq__item">
      <summary class="sf-faq__q">
        <span class="sf-faq__badge">Q</span>
        <span class="sf-faq__qtext">Which device is recommended for new projects without AI workloads?</span>
      </summary>
      <div class="sf-faq__a">
        <p>For new IoT-only projects without AI workloads today and no AI roadmap in 12–24 months, the ALPON X4 is the cost-effective choice. If there is any chance the project will add vision, inference, or model deployment later, the ALPON X5 AI is cheaper to design in than to retrofit.</p>
      </div>
    </details>
  </section>

  
  <div class="sf-callout sf-callout--success">
    <div class="sf-callout__header">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
      <span>Still unsure?</span>
    </div>
    <div class="sf-callout__content">
      <p>If your workload involves any kind of vision, inference, or model deployment, choose the <strong>ALPON X5 AI</strong>. Future-proofing your fleet for AI is cheaper than retrofitting later. For pure data-collection and gateway roles, the <strong>ALPON X4</strong> remains the cost-effective option.</p>
    </div>
  </div>

  
  <section class="sf-related">
    <h2>Related guides</h2>
    <div class="sf-related__grid">
      <a href="/docs/alpon-x5-ai-edge-computer-overview" class="sf-related__card" target="_blank" rel="noopener">
        <div class="sf-related__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
        </div>
        <span class="sf-related__title">ALPON X5 AI Overview</span>
        <span class="sf-related__desc">Hardware, software, and platform features for the edge AI computer.</span>
      </a>
      <a href="/docs/alpon-x4-edge-computer-overview" class="sf-related__card" target="_blank" rel="noopener">
        <div class="sf-related__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
        </div>
        <span class="sf-related__title">ALPON X4 Overview</span>
        <span class="sf-related__desc">Hardware, software, and platform features for the edge IoT computer.</span>
      </a>
      <a href="/docs/alpon-x5-ai-edge-computer-specifications" class="sf-related__card" target="_blank" rel="noopener">
        <div class="sf-related__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z"/><path d="M4 9h16M4 14h16M9 4v16"/></svg>
        </div>
        <span class="sf-related__title">ALPON X5 AI Specifications</span>
        <span class="sf-related__desc">Full datasheet values for compute, I/O, cellular, and compliance.</span>
      </a>
      <a href="/docs/alpon-x4-edge-computer-specifications" class="sf-related__card" target="_blank" rel="noopener">
        <div class="sf-related__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z"/><path d="M4 9h16M4 14h16M9 4v16"/></svg>
        </div>
        <span class="sf-related__title">ALPON X4 Specifications</span>
        <span class="sf-related__desc">Full datasheet values for compute, I/O, cellular, and compliance.</span>
      </a>
      <a href="/docs/alpon-cloud" class="sf-related__card" target="_blank" rel="noopener">
        <div class="sf-related__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>
        </div>
        <span class="sf-related__title">ALPON Cloud</span>
        <span class="sf-related__desc">The shared fleet management platform for both devices.</span>
      </a>
      <a href="/docs/introduction-alpon" class="sf-related__card" target="_blank" rel="noopener">
        <div class="sf-related__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
        </div>
        <span class="sf-related__title">Introduction to ALPON</span>
        <span class="sf-related__desc">The ALPON product family at a glance.</span>
      </a>
    </div>
  </section>

</div>


`}</HTMLBlock>

<br />