/* ═══════════════════════════════════════════════
   Sewinfla Technical Site — Design System v3
   Dark-first, zero-JS, world-class engineering aesthetic
   ═══════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════
   1. CUSTOM PROPERTIES
   ═══════════════════════════════════════════════ */
:root {
  /* ── Colors ── */
  --bg-deep: #0a0e16;
  --bg-card: #111827;
  --bg-hover: #1a2333;
  --bg-inset: #070a10;
  
  --text-primary: #f0f0f5;
  --text-secondary: #a0a5b8;
  --text-tertiary: #606578;
  
  --accent: #2563eb;
  --accent-glow: #60a5fa;
  --accent-dark: #1d4ed8;
  
  --brand-gradient: linear-gradient(135deg, #1e3a6e, #2563eb, #60a5fa);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(37,99,235,0.06));
  
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  
  --border-subtle: rgba(37,99,235,0.06);
  --border-default: rgba(37,99,235,0.10);
  --border-emphasis: rgba(37,99,235,0.18);

  /* ── Compatibility aliases ──
     Referenced by learn/booth/ventilation-design.html, learn/booth/booth-qa.html,
     learn/booth/size-by-size-guide.html and custom.html.
     Without these, var() resolves to nothing and the declaration is dropped silently
     (table borders, section backgrounds, radii and vertical rhythm collapse to 0). */
  --border-color: var(--border-default);
  --bg-secondary: var(--bg-card);
  --bg-page: var(--bg-deep);
  --accent-green: var(--success);
  --radius-card: var(--radius-md);
  --space-10: 40px;
  
  /* ── Typography ── */
  --font-heading: 'Oswald', 'Helvetica Neue', 'Arial Narrow', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  
  /* ── Spacing (4px baseline) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  
  /* ── Layout ── */
  --max-width: 1200px;
  --nav-height: 88px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  
  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* ═══════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  background: var(--bg-deep);
  min-height: 100vh;
}

/* ── Typography Scale ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  text-wrap: balance;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-title {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

p {
  max-width: 65ch;
  margin-bottom: 1.2em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--accent-dark);
}

/* ── Link underline animation ── */
.text-link {
  background-image: var(--brand-gradient);
  background-size: 0% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size var(--duration-normal) var(--ease-out);
}

.text-link:hover {
  background-size: 100% 1px;
}

/* ── Mono / Spec text ── */
.spec, .mono, code, .data-point {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 500;
}

.caption {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.small {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

/* ═══════════════════════════════════════════════
   3. LAYOUT
   ═══════════════════════════════════════════════ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-24) 0;
}

.section-sm {
  padding: var(--space-16) 0;
}

/* ═══ Section Background Variants ═══ */
.section--dark {
  background: var(--bg-deep);
}

.section--white {
  background: #ffffff;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #9ca3af;
  color: #374151;
}

.section--tinted {
  background: #eef2ff;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #9ca3af;
  color: #374151;
}

/* Ensure headings are dark in light sections */
.section--white h1, .section--white h2, .section--white h3, .section--white h4,
.section--tinted h1, .section--tinted h2, .section--tinted h3, .section--tinted h4 {
  color: #111827;
}

.section--white p, .section--white li,
.section--tinted p, .section--tinted li {
  color: #374151;
}

.section--white a,
.section--tinted a { color: var(--accent); }
.section--white a:hover,
.section--tinted a:hover { color: var(--accent-dark); }

.section--white .btn,
.section--tinted .btn,
.section--white .btn:hover,
.section--tinted .btn:hover { color: #fff; }

/* Cards in light sections — switch to white bg */
.section--white .card,
.section--tinted .card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.section--white .card:hover,
.section--tinted .card:hover {
  box-shadow: 0 8px 30px rgba(37,99,235,0.08), 0 0 1px rgba(37,99,235,0.2);
}

.section--white .card--inset,
.section--tinted .card--inset {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.section--white .spec-item,
.section--tinted .spec-item {
  background: #f9fafb;
  border-color: #e5e7eb;
}

/* Product & Article cards in light sections */
.section--white .product-card,
.section--tinted .product-card,
.section--white .article-card,
.section--tinted .article-card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.section--white .product-card__tag,
.section--tinted .product-card__tag {
  background: #f3f4f6;
  color: #4b5563;
}

/* Case cards in light sections */
.section--white .case-card,
.section--tinted .case-card {
  background: #ffffff;
  border-color: #e5e7eb;
}

.section--white .tip-box,
.section--tinted .tip-box,
.section--white .summary-box,
.section--tinted .summary-box {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.section--white .comp-table__header,
.section--tinted .comp-table__header {
  background: #f3f4f6;
}

/* ═══ Dark section with white cards (Tech Highlights) ═══ */
#tech .card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

#tech .card:hover {
  box-shadow: 0 8px 30px rgba(37,99,235,0.08), 0 0 1px rgba(37,99,235,0.2);
}

#tech .card--inset,
#tech .spec-item {
  background: #f9fafb;
  border-color: #e5e7eb;
}

#tech .card h3,
#tech .card h2 {
  color: #111827;
}

#tech .card p {
  color: #374151;
}

#tech .spec-item__value {
  color: #111827;
}

#tech .spec-item__label {
  color: var(--accent);
}

#tech .section-title {
  color: var(--text-primary);
}

#tech .section-subtitle {
  color: var(--text-secondary);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-3);
}

.section-title {
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: var(--space-12);
  max-width: 48ch;
}

/* ── Bento Grid ── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.bento-card--1x1 { grid-column: span 1; }
.bento-card--2x1 { grid-column: span 2; }
.bento-card--2x2 { grid-column: span 2; grid-row: span 2; }
.bento-card--4x1 { grid-column: span 4; }

@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-card--1x1,
  .bento-card--2x1,
  .bento-card--2x2,
  .bento-card--4x1 {
    grid-column: span 1;
    grid-row: auto;
  }
  .section { padding: var(--space-16) 0; }
}

/* ── Card ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(37,99,235,0.15), 0 0 1px rgba(37,99,235,0.25);
  border-color: transparent;
  border-image: var(--brand-gradient) 1;
}

.card--inset {
  background: var(--bg-inset);
}

.card--flat {
  background: transparent;
  border: 1px solid var(--border-subtle);
}

/* ═══════════════════════════════════════════════
   4. NAVIGATION (Glass)
   ═══════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 93px;
  display: flex;
  align-items: flex-start;
  padding-top: 5px;
  background: rgba(17,24,39,0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-inner {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img {
  height: 82px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: var(--space-8);
  list-style: none;
}

.nav-links a {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--duration-fast) var(--ease-out);
  padding: var(--space-2) 0;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--accent-glow);
}

/* ═══ SHOP beacon: cosmic ring on OTHER pages → attracts clicks → gone on shop page ═══ */
.nav-links a[href$="shop.html"]:not(.active) {
  color: #fff;
  background: rgba(10, 20, 50, 0.7);
  border-radius: 20px;
  font-size: 12px;
  padding: 5px 14px;
  margin: 0 -4px;
  position: relative;
  z-index: 1;
  box-shadow:
    inset 0 0 14px rgba(37,99,235,0.15),
    0 0 6px rgba(37,99,235,0.35),
    0 0 14px rgba(96,165,250,0.18),
    0 0 24px rgba(34,211,238,0.08);
  animation: cosmic-breathe 2.8s ease-in-out infinite;
  transition: color 0.2s, background 0.2s;
}

/* Thin holographic ring — big hue swing, no rotation */
.nav-links a[href$="shop.html"]:not(.active)::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    #2563eb,
    #8b5cf6,
    #22d3ee,
    #60a5fa,
    #2563eb
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: cosmic-hue 4s ease-in-out infinite;
  z-index: -1;
  opacity: 0.8;
  transition: opacity 0.4s ease;
}

/* Hover: ring fades → clean link to click */
.nav-links a[href$="shop.html"]:not(.active):hover::before {
  opacity: 0.15;
}

.nav-links a[href$="shop.html"]:not(.active):hover {
  box-shadow:
    inset 0 0 16px rgba(37,99,235,0.25),
    0 0 8px rgba(37,99,235,0.50),
    0 0 18px rgba(96,165,250,0.30);
  animation: none;
}

/* SHOP on shop page: clean — user is already here */
.nav-links a[href$="shop.html"].active {
  color: var(--accent-glow);
  background: transparent;
  padding: var(--space-2) 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

@keyframes cosmic-breathe {
  0%, 100% {
    box-shadow:
      inset 0 0 14px rgba(37,99,235,0.15),
      0 0 6px rgba(37,99,235,0.35),
      0 0 14px rgba(96,165,250,0.18),
      0 0 24px rgba(34,211,238,0.08);
  }
  50% {
    box-shadow:
      inset 0 0 24px rgba(37,99,235,0.30),
      0 0 12px rgba(37,99,235,0.60),
      0 0 24px rgba(96,165,250,0.35),
      0 0 36px rgba(34,211,238,0.18);
  }
}

@keyframes cosmic-hue {
  0%, 100% { filter: hue-rotate(0deg); }
  33% { filter: hue-rotate(120deg); }
  66% { filter: hue-rotate(-60deg); }
}

/* Mobile nav */
/* Nav collapses earlier than the rest of the layout: measured 2026-09-27, the eight
   desktop nav links need 836 px of width, so between 769 px and ~890 px they pushed
   every page sideways (67 px at 769, 16 px at 820) — the whole document scrolled
   horizontally because the menu, not the content, was too wide. The nav-heavy blocks
   below are therefore keyed to 900 px while content rules stay at 768 px. */
@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(17,24,39,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    padding: var(--space-4) var(--space-6);
    gap: var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
  }
  .nav-toggle-check:checked ~ .nav-links {
    display: flex;
  }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    z-index: 101;
  }
  .nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 2px;
    transition: all 0.2s ease;
  }
  .nav-toggle-check:checked ~ .nav-toggle .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle-check:checked ~ .nav-toggle .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle-check:checked ~ .nav-toggle .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}
.nav-toggle-check { display: none; }
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
}

/* ═══════════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.btn:hover {
  transform: scale(1.02);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn--primary:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 24px rgba(37,99,235,0.4);
}

.btn--primary:active,
.btn--primary.active {
  background: var(--accent);
  color: #fff;
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--border-emphasis);
  color: var(--text-secondary);
}

.btn--outline:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 24px rgba(37,99,235,0.3);
}

.btn--outline:active,
.btn--outline.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.btn--ghost:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.btn--accent {  background: #475569;  color: #fff;  border-color: transparent;}.btn--accent:hover {  background: var(--accent);  color: #fff;  box-shadow: 0 0 20px rgba(37,99,235,0.35);
  border-color: var(--accent);}
.btn--large {
  padding: var(--space-4) var(--space-8);
  font-size: 16px;
}

.btn-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════
   6. SPEC TABLE
   ═══════════════════════════════════════════════ */
.spec-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.spec-item {
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.spec-item__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-1);
}

.spec-item__value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Number Banner ── */
.number-banner {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  flex-wrap: wrap;
  padding: var(--space-12) 0;
}

.number-banner__item {
  text-align: center;
}

.number-banner__value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.number-banner__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════
   7. HERO
   ═══════════════════════════════════════════════ */
.hero {
  padding: var(--space-24) 0;
  text-align: center;
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: 
    linear-gradient(rgba(10,14,22,0.45), rgba(10,14,22,0.70)),
    url('/assets/images/booth/hero-bg.webp') center/cover no-repeat;
}

@media (max-width: 768px) {
  .hero {
    min-height: 70vh;
    background: 
      linear-gradient(rgba(10,14,22,0.45), rgba(10,14,22,0.70)),
      url('/assets/images/booth/hero-bg.webp') center/cover no-repeat;
  }
}

/* dark overlay ensures text readability */
.hero::before {
  display: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero .hero-title {
  margin-bottom: var(--space-4);
}

.hero .hero-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0 auto var(--space-8);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════
   8. PRODUCT CARD
   ═══════════════════════════════════════════════ */
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  border-image: var(--brand-gradient) 1;
}

.product-card__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-deep);
}

.product-card__body {
  padding: var(--space-4);
}

.product-card__name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.product-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.product-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-hover);
  padding: 2px 8px;
  border-radius: 4px;
}

.product-card__price {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-3);
}

.product-card__actions {
  display: flex;
  gap: var(--space-2);
}

/* ── Product Grid ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* ═══════════════════════════════════════════════
   9. ARTICLE CARD
   ═══════════════════════════════════════════════ */
.article-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out);
}

.article-card:hover {
  transform: translateY(-4px);
}

.article-card__image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.article-card__body {
  padding: var(--space-4);
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.article-card__category {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-glow);
}

.article-card__time {
  font-size: 13px;
  color: var(--text-tertiary);
}

.article-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .article-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   10. ARTICLE PAGE
   ═══════════════════════════════════════════════ */
.article-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
}

.article-header {
  margin-bottom: var(--space-12);
}

.article-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.article-header__category {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.article-header__time {
  font-size: 13px;
  color: var(--text-tertiary);
}

.article-body h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.article-body h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.article-body p {
  margin-bottom: 1.2em;
}

.tip-box {
  background: var(--bg-card);
  border-left: 3px solid var(--accent);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.tip-box__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-glow);
  margin-bottom: var(--space-2);
}

.summary-box {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-8) 0;
}

.summary-box h4 {
  font-size: 14px;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

.summary-box ul {
  list-style: none;
}

.summary-box li {
  position: relative;
  padding-left: var(--space-4);
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: var(--space-2);
}

.summary-box li::before {
  content: '•';
  color: var(--accent);
  position: absolute;
  left: 0;
  font-weight: 700;
}

.product-cta {
  background: var(--bg-card);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.product-cta__image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   11. CASE CARD
   ═══════════════════════════════════════════════ */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .case-grid { grid-template-columns: 1fr; }
}

.case-card {
  display: block;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.case-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════
   12. LOGO WALL
   ═══════════════════════════════════════════════ */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8) var(--space-6);
  padding: var(--space-12) 0 var(--space-6);
  max-width: 1000px;
  margin: 0 auto;
}

/* Uniform 170px box for every logo: gives the wall an even rhythm, caps the wide
   outliers (ADSR 550x61, Wheeler CAT 268x67) and keeps object-fit from distorting.
   Fixed width + centered rows means a short final row reads as balanced rather
   than as an empty grid cell (14 logos = 5/5/4, 4/4/4/2 or 3/3/3/3/2 by width). */
.logo-wall img {
  flex: 0 0 170px;
  /* flex items default to min-width:auto, which for <img> is the intrinsic width —
     without this, a 9:1 logo (ADSR 550x61) refuses to shrink and breaks the rows */
  min-width: 0;
  height: 44px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.78;
  transition: opacity 0.2s, filter 0.2s;
}

.logo-wall img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.logo-wall__note {
  margin: var(--space-8) auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: #64748b;
}

@media (max-width: 640px) {
  /* two per row so the 14 logos fill 7 even rows on phones */
  .logo-wall img {
    flex: 0 0 calc(50% - 16px);
    height: 34px;
  }
}

/* ═══════════════════════════════════════════════
   13. TABLE
   ═══════════════════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: left;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.data-table tr:hover td {
  background: var(--bg-hover);
}

/* ═══════════════════════════════════════════════
   14. FORM
   ═══════════════════════════════════════════════ */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: transparent;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* ═══════════════════════════════════════════════
   15. FILTER TABS
   ═══════════════════════════════════════════════ */
.filter-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.filter-tab {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  cursor: pointer;
  background: transparent;
  transition: all var(--duration-fast) var(--ease-out);
}

.filter-tab:hover,
.filter-tab.active {
  color: var(--text-primary);
  border-color: transparent;
  background: rgba(37,99,235,0.1);
}

/* ═══════════════════════════════════════════════
   16. COMPARISON TABLE
   ═══════════════════════════════════════════════ */
.comp-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.comp-table__header {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  padding: var(--space-4);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
  text-align: center;
}

.comp-table__header--highlight {
  background: var(--brand-gradient-subtle);
  border: 1px solid var(--accent);
}

.comp-table__row {
  display: contents;
}

.comp-table__cell {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

.comp-table__cell:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .comp-table {
    grid-template-columns: 1fr;
  }
  .comp-table__header,
  .comp-table__cell {
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════
   17. CSS-ONLY ANIMATIONS
   ═══════════════════════════════════════════════ */

/* Scroll-driven fade-in */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fade-in-up 0.6s var(--ease-out) both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

/* Stagger children */
.stagger > * {
  animation: fade-in-up 0.6s var(--ease-out) both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 100ms; }
.stagger > *:nth-child(3) { animation-delay: 200ms; }
.stagger > *:nth-child(4) { animation-delay: 300ms; }
.stagger > *:nth-child(5) { animation-delay: 400ms; }
.stagger > *:nth-child(6) { animation-delay: 500ms; }

/* ── Card hover glow ── */
.card-glow {
  position: relative;
  overflow: hidden;
}

.card-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.card-glow:hover::after {
  border-color: transparent;
  border-image: var(--brand-gradient) 1;
}

/* ═══════════════════════════════════════════════
   18. FOOTER
   ═══════════════════════════════════════════════ */
.footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-16) 0 var(--space-8);
  margin-top: var(--space-24);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--text-tertiary);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transition: background var(--duration-fast) var(--ease-out);
}

.footer-social a:hover {
  background: rgba(255,255,255,0.18);
}

.footer-social a svg {
  width: 16px;
  height: 16px;
  fill: var(--text-primary);
  opacity: 0.75;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.footer-social a:hover svg {
  opacity: 1;
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════
   19. UTILITY
   ═══════════════════════════════════════════════ */
.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.text-brand {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-line {
  height: 1px;
  border: none;
  background: var(--brand-gradient);
  margin: var(--space-8) 0;
}
.brand-border {
  border: 1px solid;
  border-image: var(--brand-gradient) 1;
}
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-mono { font-family: var(--font-mono); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }

/* ── Learn category sticky nav (global) ── */
.learn-cat-nav{position:sticky;top:93px;z-index:90;background:rgba(10,14,22,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-default);padding:10px 0;display:flex;justify-content:center;gap:12px;}
.learn-cat-nav__pill{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:100px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;text-decoration:none;color:var(--text-tertiary);background:transparent;border:1px solid var(--border-default);transition:all var(--duration-fast) var(--ease-out);}
.learn-cat-nav__pill:hover{color:var(--text-primary);border-color:var(--border-emphasis);background:rgba(37,99,235,0.06);}
.learn-cat-nav__pill.active{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 0 16px rgba(37,99,235,0.3);pointer-events:none;}
@media (max-width:768px){.learn-cat-nav{top:64px;padding:8px 0;gap:8px;}.learn-cat-nav__pill{padding:6px 14px;font-size:11px;}}

/* ── Mobile: wide tables scroll inside their own box instead of scrolling the page ──
   Measured 2026-09-26 at a 480 px viewport: the page itself scrolled sideways by 115 px
   on the portability guide, 66 px on the size-by-size guide, 9 px on the carbon-filter
   guide and 3 px on trust.html — each one caused by a plain <table> wider than the
   screen. display:block preserves the internal table layout and makes the table box the
   horizontal scroll container, so the document stays exactly as wide as the viewport. */
@media (max-width: 768px) {
  main table, .container table, .article-wrap table, table.compare-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Mobile: table type scale ──
   Measured 2026-09-27 at 480 px: after the scroll-container rule above the page no longer
   scrolls sideways, but five tables were still wider than the box and therefore only
   reachable by swiping. Dropping the mobile table type scale to 12.5 px with 5×7 px cells
   brings four of those five back inside the width with no hidden columns (portability guide
   133 px → 0, carbon-filter 32/33 px → 0, motorcycle 26 px → 0, CFM calculator 66 px → 0).
   The 5-column size comparison table keeps its swipe box — five columns do not fit a phone.
   Desktop is untouched: the whole block is inside the 768 px query. */
@media (max-width: 768px) {
  main table, .container table, .article-wrap table, table.data-table, table.compare-table {
    font-size: 12.5px;
  }
  main table th, .container table th, .article-wrap table th, table.data-table th {
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  main table th, main table td,
  .container table th, .container table td,
  .article-wrap table th, .article-wrap table td {
    padding: 5px 7px;
  }
}

/* Mobile-only swipe hint for the one table that still needs sideways scrolling (5 columns). */
.table-swipe-hint { display: none; }
@media (max-width: 768px) {
  .table-swipe-hint {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    text-align: right;
    margin: var(--space-3) 0 0;
  }
}

/* ── Key-facts capsule (GEO answer block) ──────────────────────────────
   The panel is light (#f0f9ff) on every page, dark theme included, so its
   text colour must be set explicitly: without this the body's light grey
   text renders on a near-white panel (~1.9:1 contrast, unreadable). */
aside.geo-factsheet { color: #0f172a; }
aside.geo-factsheet p,
aside.geo-factsheet li,
aside.geo-factsheet ul,
aside.geo-factsheet ol,
aside.geo-factsheet td { color: #0f172a; }
aside.geo-factsheet strong { color: #1e40af; }
aside.geo-factsheet a { color: #1d4ed8; }

/* ── Page FAQ: renders the page's FAQPage JSON-LD as visible content ──
   Single-source rule: the markup is generated from the JSON-LD, so the
   questions/answers a crawler reads and the ones a visitor reads are identical. */
.page-faq .container { margin-inline: auto; }
.page-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.page-faq__item {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 22px 24px 24px;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.page-faq__item:hover {
  border-color: var(--border-emphasis);
  transform: translateY(-1px);
}
.page-faq__q {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.page-faq__a {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}
@media (max-width: 820px) {
  .page-faq__grid { grid-template-columns: 1fr; }
  .page-faq__item { padding: 20px 20px 22px; }
  .page-faq__a { font-size: 14.5px; line-height: 1.75; }
}

/* ── Price-hub link line (levers A: commercial path) ── */
.price-hub {
  margin: var(--space-6) 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 78ch;
}
.price-hub a {
  color: var(--accent-glow);
  font-weight: 600;
  border-bottom: 1px solid rgba(96,165,250,0.45);
}
.price-hub a:hover {
  color: #fff;
  border-bottom-color: #fff;
}