/* ===========================================================
     ECO-KOLD HOMEPAGE — Concept C v3 design system, responsive
     10 sections + sticky nav + global footer
     =========================================================== */

  :root {
    /* Surfaces */
    --midnight: #08111F;
    --navy: #0F1B2E;
    --navy-2: #142337;
    --navy-3: #1A2740;
    --canvas: #F4F7FB;
    --canvas-2: #EBF0F6;
    --canvas-3: #DCE4EE;
    --white: #FFFFFF;

    /* Color — TIGHT system after v3 cohesion pass */
    --kold: #3CB4E6;
    --kold-bright: #5DCBFF;
    --kold-glow: rgba(60, 180, 230, 0.32);
    --eco: #6BB344;
    --eco-bright: #8FE05C;
    --eco-glow: rgba(107, 179, 68, 0.28);
    /* Section 03 keeps a near-imperceptible warm canvas only — no other mint */
    --warm-canvas: #F0F4EE;

    /* Type colors on light */
    --ink: #0F1B2E;
    --ink-2: #2E3D52;
    --muted: #5C6A82;
    --muted-2: #8696B0;
    --hairline: #E1E8F0;
    --hairline-2: #D4DDE9;

    /* Type colors on dark — bumped for readability v3 */
    --on-dark: #EDF1F8;
    --on-dark-muted: #A8B5CC;
    --on-dark-dim: #7A8BA3;
    --hairline-on-dark: rgba(255, 255, 255, 0.10);
    --hairline-on-dark-2: rgba(255, 255, 255, 0.18);

    /* Layout */
    --gutter-d: 56px;
    --gutter-t: 32px;
    --gutter-m: 20px;
    --max: 1320px;
    --max-narrow: 1080px;
    --r: 12px;
    --r-sm: 8px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(15, 27, 46, 0.04);
    --shadow-md: 0 6px 24px rgba(15, 27, 46, 0.06), 0 1px 2px rgba(15, 27, 46, 0.04);
    --shadow-lg: 0 24px 48px rgba(15, 27, 46, 0.10), 0 4px 12px rgba(15, 27, 46, 0.05);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--white);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    line-height: 1.55;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img { max-width: 100%; display: block; }

  /* ---------- TYPE SYSTEM ---------- */
  .display { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
  .mono { font-family: 'JetBrains Mono', monospace; }

  /* ===== LOCKED COMPONENT — Chrome-gradient stat number =====
     Use for primary big numbers that need to LAND.
     On dark: white → kold-blue. On light: navy-deep → kold-blue.
     Always pair with mono eyebrow + mono descriptor underneath. */
  .stat-chrome {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(56px, 8vw, 128px);
    line-height: 0.92;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #FFFFFF 0%, #5DCBFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .stat-chrome.on-light {
    background: linear-gradient(180deg, #0F1B2E 0%, #3CB4E6 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .stat-chrome .unit {
    font-size: 0.5em;
    -webkit-text-fill-color: var(--kold);
    color: var(--kold);
  }
  .stat-chrome.on-light .unit {
    -webkit-text-fill-color: var(--kold);
  }

  .h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(40px, 6.5vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.025em;
  }
  .h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.022em;
  }
  .h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.018em;
  }

  .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kold);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--eco);
    box-shadow: 0 0 8px rgba(107, 179, 68, 0.6);
    flex-shrink: 0;
  }
  .eyebrow.on-dark { color: var(--kold-bright); }

  .lead {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    color: var(--muted);
    max-width: 56ch;
  }
  .lead.on-dark { color: var(--on-dark-muted); }

  /* ---------- LAYOUT ---------- */
  .container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter-d);
  }
  .container-narrow {
    max-width: var(--max-narrow);
    margin: 0 auto;
    padding: 0 var(--gutter-d);
  }

  section { position: relative; }
  section.dark {
    background: var(--midnight);
    color: var(--on-dark);
  }
  section.canvas {
    background: var(--canvas);
  }
  section.canvas-2 {
    background: var(--canvas-2);
  }

  .section-pad {
    padding: clamp(64px, 9vw, 130px) 0;
  }
  .section-pad-sm {
    padding: clamp(40px, 6vw, 80px) 0;
  }

  /* ---------- BUTTONS ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
    min-height: 48px;
  }
  .btn-primary {
    background: var(--kold);
    color: var(--white);
  }
  .btn-primary:hover {
    background: var(--kold-bright);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px var(--kold-glow);
  }
  .btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--hairline-2);
  }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-ghost.on-dark {
    color: var(--on-dark);
    border-color: var(--hairline-on-dark-2);
  }
  .btn-ghost.on-dark:hover { border-color: var(--kold-bright); color: var(--kold-bright); }
  .btn-arrow::after { content: '→'; transition: transform 0.2s; }
  .btn-arrow:hover::after { transform: translateX(3px); }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--kold);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap 0.2s;
  }
  .link-arrow::after { content: '→'; }
  .link-arrow:hover { gap: 12px; }

  /* ===========================================================
     NAV (sticky, glass on scroll)
     =========================================================== */
  .nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hairline);
    padding: 16px var(--gutter-d);
  }
  .nav-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
  }
  .logo-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--eco);
    box-shadow: 0 0 10px rgba(107, 179, 68, 0.6);
  }
  .logo .kold { color: var(--kold); }

  .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
  }
  .nav-links a {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--kold); }

  .nav-cta {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .lang {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.05em;
    font-weight: 500;
  }
  .lang .active { color: var(--ink); }

  .hamburger {
    display: none;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
  }
  .hamburger span {
    width: 18px; height: 2px;
    background: var(--ink);
    border-radius: 1px;
  }

  /* ===========================================================
     SECTION 1 — HERO (dark)
     =========================================================== */
  .hero {
    background: var(--midnight);
    color: var(--on-dark);
    overflow: hidden;
    position: relative;
    padding: clamp(56px, 8vw, 100px) 0 clamp(48px, 6vw, 80px);
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--hairline-on-dark) 1px, transparent 1px),
      linear-gradient(90deg, var(--hairline-on-dark) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, rgba(0,0,0,0.6) 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, rgba(0,0,0,0.6) 0%, transparent 75%);
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 50% 40% at 20% 0%, rgba(60, 180, 230, 0.10), transparent),
      radial-gradient(ellipse 60% 50% at 80% 100%, rgba(107, 179, 68, 0.05), transparent);
    pointer-events: none;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
  }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--navy-2);
    border: 1px solid var(--hairline-on-dark-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--on-dark-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .pill .live {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--eco);
    box-shadow: 0 0 8px var(--eco);
  }

  .hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(40px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
    color: var(--on-dark);
  }
  .hero h1 .blue { color: var(--kold-bright); }
  .hero-sub {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.55;
    color: var(--on-dark-muted);
    max-width: 56ch;
    margin-bottom: 36px;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 56px;
  }

  .hero-image {
    aspect-ratio: 4/5;
    border-radius: var(--r);
    overflow: visible;
    background: transparent;
    position: relative;
  }
  .hero-image-frame {
    width: 100%; height: 100%;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--hairline-on-dark);
    background: var(--navy-2);
  }
  .hero-image-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* Floating callout pills */
  .callout-pill {
    position: absolute;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    padding: 10px 18px 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.08);
    z-index: 3;
    color: var(--ink);
    min-width: 170px;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .callout-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .callout-pill .ico {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: white;
  }
  /* One icon family: solid eco-green tile OR solid kold-blue tile, white SVG stroke */
  .callout-pill .ico.eco { background: var(--eco); }
  .callout-pill .ico.kold { background: var(--kold); }
  .callout-pill .ico svg { width: 18px; height: 18px; }
  .callout-pill .txt { line-height: 1.2; }
  .callout-pill .txt .a {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .callout-pill .txt .b {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }
  .callout-pill.pos-1 { top: 12%; right: -36px; }
  .callout-pill.pos-2 { top: 50%; left: -36px; transform: translateY(-50%); }
  .callout-pill.pos-3 { bottom: 14%; right: -28px; }
  .callout-pill.pos-2:hover { transform: translateY(calc(-50% - 2px)); }

  .hero-data {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--hairline-on-dark);
    border-bottom: 1px solid var(--hairline-on-dark);
    margin-top: 32px;
    grid-column: 1 / -1;
  }
  .hero-data > div {
    padding: 24px 24px 24px 0;
    border-right: 1px solid var(--hairline-on-dark);
  }
  .hero-data > div:first-child { padding-left: 0; }
  .hero-data > div:last-child { border-right: none; padding-right: 0; }
  .hero-data .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--on-dark-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .hero-data .val {
    font-family: 'Inter', sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--on-dark);
  }
  .hero-data .val .unit {
    font-size: 14px;
    color: var(--kold-bright);
    margin-left: 2px;
    font-weight: 500;
  }
  .hero-data .delta {
    display: inline-block;
    margin-left: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--eco-bright);
    font-weight: 500;
    vertical-align: middle;
  }

  /* ===========================================================
     SECTION 2 — TRUST BAND (light, slim)
     =========================================================== */
  .trust {
    background: var(--white);
    border-bottom: 1px solid var(--hairline);
    padding: 28px 0;
  }
  .trust-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter-d);
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
  }
  .trust-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .trust-list {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    list-style: none;
  }
  .trust-list li {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    letter-spacing: -0.005em;
  }
  .trust-list li::before {
    content: '●';
    color: var(--eco);
    margin-right: 10px;
    font-size: 8px;
    vertical-align: middle;
  }

  /* ===========================================================
     SECTION 3 — ENGINEERED FOR GREATER SAVINGS
     (warm canvas, ring stat + 2x2 icon grid)
     v3: dropped mint accent + mint grid; using eco-green accent
     =========================================================== */
  .engineered {
    background: var(--warm-canvas);
  }
  .engineered .h2 .accent {
    color: var(--eco);
  }
  .engineered-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
    align-items: stretch;
    margin-top: 56px;
  }

  /* Featured ring stat (left column) */
  .ring-card {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-shadow: var(--shadow-sm);
  }
  .ring-stat {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .ring {
    --pct: 40;
    --ring-thickness: 8px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background:
      conic-gradient(var(--eco) 0% calc(var(--pct) * 1%), var(--canvas-3) calc(var(--pct) * 1%) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
  }
  .ring::before {
    content: '';
    position: absolute;
    inset: var(--ring-thickness);
    background: var(--white);
    border-radius: 50%;
  }
  .ring .ring-num {
    position: relative;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 32px;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .ring-stat .ring-info h3 {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 6px;
    color: var(--ink);
  }
  .ring-stat .ring-info p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
  }
  .ring-card-divider {
    height: 1px;
    background: var(--hairline);
  }
  .ring-card-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
  }

  /* 2x2 icon feature grid (right column) */
  .feature-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .feature-card {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.3s;
  }
  .feature-card:hover {
    border-color: var(--eco);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .feature-icon {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: var(--eco);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    flex-shrink: 0;
  }
  .feature-icon svg { width: 22px; height: 22px; }
  .feature-text h4 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .feature-text p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
  }

  .section-header {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 64px;
    align-items: end;
  }
  .section-header.center {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
  }
  .section-header h2 { margin-top: 16px; color: var(--ink); }
  section.dark .section-header h2 { color: var(--on-dark); }

  /* ===========================================================
     SECTION 4 — VERIFIED SAVINGS (proof stats)
     =========================================================== */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
  }
  .stat-card {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    padding: 36px;
    transition: all 0.3s;
  }
  .stat-card:hover {
    border-color: var(--kold);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  /* v3: now uses .stat-chrome.on-light system class */
  .stat-card .num {
    font-size: clamp(64px, 8vw, 104px);
    margin-bottom: 24px;
  }
  .stat-card .meta-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--canvas-3);
    overflow: hidden;
    margin-bottom: 20px;
  }
  .stat-card .meta-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--eco), var(--kold));
  }
  .stat-card .label {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 8px;
    font-weight: 500;
  }
  .stat-card .meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* ===========================================================
     SECTION 5 — FEATURED CASE STUDY (light)
     =========================================================== */
  .case-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-top: 56px;
  }
  .case-image {
    aspect-ratio: 5/4;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--canvas-2);
  }
  .case-image img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .case-content h3 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.1;
    color: var(--ink);
    margin: 16px 0 28px;
  }
  .case-quote {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    border-left: 2px solid var(--kold);
    padding-left: 20px;
    margin-bottom: 32px;
  }
  .case-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 20px 0;
    margin-bottom: 32px;
  }
  .case-stats > div { padding: 0 16px; border-right: 1px solid var(--hairline); }
  .case-stats > div:first-child { padding-left: 0; }
  .case-stats > div:last-child { border-right: none; padding-right: 0; }
  .case-stats .n {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--kold);
    letter-spacing: -0.02em;
  }
  .case-stats .l {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
  }
  .case-actions { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }

  /* ===========================================================
     SECTION 6 — PRODUCT LINE (dark)
     =========================================================== */
  .products-section { padding: clamp(64px, 9vw, 130px) 0; }
  .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 56px;
  }
  .product-card {
    background: var(--navy-2);
    border: 1px solid var(--hairline-on-dark);
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: var(--on-dark);
  }
  .product-card:hover {
    border-color: var(--kold);
    transform: translateY(-2px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.3);
  }
  .product-card:hover .product-img img { transform: scale(1.03); }

  .product-img {
    aspect-ratio: 1/1;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 50%, rgba(60, 180, 230, 0.10), transparent 65%),
      var(--navy-3);
  }
  .product-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }

  .product-body { padding: 24px; }
  .product-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--eco-bright);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .product-eyebrow::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--eco);
    box-shadow: 0 0 6px var(--eco);
  }
  .product-name {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--on-dark);
    letter-spacing: -0.015em;
    margin-bottom: 6px;
  }
  .product-app {
    font-size: 13px;
    color: var(--on-dark-muted);
    margin-bottom: 20px;
  }
  .product-spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--hairline-on-dark);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
  }
  .product-spec .l {
    color: var(--on-dark-dim);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .product-spec .v { color: var(--on-dark); font-weight: 500; }
  .product-spec .v .delta {
    color: var(--eco-bright);
    margin-left: 6px;
  }

  /* ===========================================================
     SECTION 7 — HOW IT WORKS (light)
     =========================================================== */
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 56px;
    position: relative;
  }
  .steps-grid::before {
    content: '';
    position: absolute;
    top: 36px; left: 16%; right: 16%;
    height: 1px;
    background: linear-gradient(90deg, var(--kold), var(--eco), var(--kold));
    z-index: 0;
  }
  .step {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    padding: 32px;
    position: relative;
    z-index: 1;
  }
  .step-num {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-dark);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    margin: -32px auto 24px;
    box-shadow: 0 0 0 6px var(--canvas);
    border: 1px solid var(--ink);
  }
  .step h3 {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
    color: var(--ink);
  }
  .step p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
  }
  .steps-cta {
    display: flex;
    justify-content: center;
    margin-top: 56px;
  }

  /* ===========================================================
     SECTION 8 — COMPARISON CHART (dark)
     =========================================================== */
  .compare-card {
    background: var(--navy);
    border: 1px solid var(--hairline-on-dark);
    border-radius: var(--r);
    padding: clamp(32px, 5vw, 64px);
    margin-top: 56px;
  }
  .compare-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid var(--hairline-on-dark);
  }
  .compare-row:first-of-type { padding-top: 0; }
  .compare-row:last-child { border-bottom: none; padding-bottom: 0; }
  .compare-callout .metric {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--on-dark-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  /* v3: legacy class — same recipe, kept for backward compat with markup */
  .compare-callout .pct {
    font-family: 'Inter', sans-serif;
    font-size: clamp(48px, 6vw, 88px);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #FFFFFF 0%, #5DCBFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .compare-callout .desc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--on-dark-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 8px;
  }

  .compare-bars { display: flex; flex-direction: column; gap: 16px; }
  .compare-bar-wrap { width: 100%; }
  .compare-bar-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
  }
  .compare-bar-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--on-dark-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .compare-bar-value {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .compare-bar-value.eco { color: var(--kold-bright); }
  .compare-bar-value.legacy { color: var(--on-dark-muted); }

  .compare-bar-track {
    height: 12px;
    background: var(--navy-3);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
  }
  .compare-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
  }
  .compare-bar-fill.eco {
    background: linear-gradient(90deg, var(--eco), var(--kold));
    box-shadow: 0 0 12px var(--kold-glow);
  }
  .compare-bar-fill.legacy {
    background: var(--on-dark-dim);
    opacity: 0.65;
  }
  .compare-bar-fill.tiny { width: 1.5%; }

  .compare-note {
    text-align: center;
    margin-top: 32px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--on-dark-dim);
    letter-spacing: 0.05em;
  }
  .compare-note a { color: var(--kold-bright); text-decoration: none; border-bottom: 1px solid var(--kold-bright); padding-bottom: 1px; }

  /* ===========================================================
     SECTION 9 — GLOBAL + DISTRIBUTORS (light)
     =========================================================== */
  .global-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-top: 56px;
    align-items: stretch;
  }
  .global-block, .distrib-block {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    padding: clamp(32px, 4vw, 56px);
  }
  /* v3: uses .stat-chrome.on-light system class */
  .global-block .countries-num {
    font-size: clamp(72px, 9vw, 128px);
    margin-bottom: 8px;
  }
  /* v3: label moved out of countries-num — see inline style on .label in markup */
  .global-block .countries-list {
    display: flex; flex-wrap: wrap; gap: 8px 0;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
  }
  .global-block .countries-list span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--ink-2);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0 12px;
    border-right: 1px solid var(--hairline-2);
  }
  .global-block .countries-list span:last-child { border-right: none; }
  .global-block .countries-list span:first-child { padding-left: 0; }

  .distrib-block { background: var(--navy); color: var(--on-dark); border-color: transparent; }
  .distrib-block h3 { color: var(--on-dark); margin: 12px 0 16px; }
  .distrib-block .lead { color: var(--on-dark-muted); margin-bottom: 24px; }
  .distrib-block .benefits { list-style: none; margin-bottom: 32px; }
  .distrib-block .benefits li {
    padding: 12px 0;
    border-top: 1px solid var(--hairline-on-dark);
    font-size: 14px;
    color: var(--on-dark);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .distrib-block .benefits li::before {
    content: '✓';
    color: var(--eco-bright);
    font-weight: 700;
    font-size: 14px;
  }

  /* ===========================================================
     SECTION 10 — PRE-FOOTER CTA + MISSION (dark)
     =========================================================== */
  .mission {
    background: var(--midnight);
    color: var(--on-dark);
    position: relative;
    overflow: hidden;
  }
  .mission::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kold), transparent);
    box-shadow: 0 0 20px var(--kold-glow);
  }
  .mission-cta-card {
    background: var(--navy);
    border: 1px solid var(--hairline-on-dark);
    border-radius: var(--r);
    padding: clamp(40px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 88px;
  }
  .mission-cta-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.15;
    color: var(--on-dark);
    margin-bottom: 12px;
  }
  .mission-cta-card p {
    color: var(--on-dark-muted);
    font-size: 16px;
    line-height: 1.55;
  }
  .mission-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mission-cta-actions .btn { width: 100%; }
  .mission-cta-actions small {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--on-dark-dim);
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
  }

  .mission-headline {
    font-family: 'Inter', sans-serif;
    font-size: clamp(40px, 6vw, 80px);
    line-height: 1.0;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
    max-width: 1080px;
  }
  .mission-headline .blue { color: var(--kold-bright); }
  .mission-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--eco-bright);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 32px 0 64px;
  }

  /* ===========================================================
     FOOTER — matches mega-menu + contact section vibe
     =========================================================== */
  footer.dark { position: relative; }
  footer.dark::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(91, 201, 176, 0.35) 20%,
      rgba(123, 191, 224, 0.45) 50%,
      rgba(91, 201, 176, 0.35) 80%,
      transparent 100%);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    padding-top: 56px;
    border-top: 1px solid var(--hairline-on-dark);
  }
  .footer-brand .logo {
    color: var(--on-dark);
    margin-bottom: 20px;
    display: inline-block;
  }
  .footer-brand .logo img {
    height: 40px;
    display: block;
  }
  .footer-brand p {
    color: var(--on-dark-dim);
    font-size: 14px;
    line-height: 1.65;
    max-width: 320px;
  }

  /* Column header — mirrors .mega .mc-meta (mono mini-cap, kold-bright on dark) */
  .footer-col h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--kold-bright);
    margin-bottom: 18px;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline-on-dark);
  }
  .footer-col ul { list-style: none; padding: 0; margin: 0; }
  .footer-col li {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.45;
  }
  .footer-col a {
    color: var(--on-dark-muted);
    text-decoration: none;
    transition: color 0.18s ease;
  }
  .footer-col a:hover,
  .footer-col a:focus-visible {
    color: var(--kold-bright);
    outline: none;
  }

  .footer-bottom {
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline-on-dark);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--on-dark-dim);
    letter-spacing: 0.12em;
  }

  /* ===========================================================
     RESPONSIVE — TABLET (≤1024px)
     =========================================================== */
  @media (max-width: 1024px) {
    :root { --gutter-d: var(--gutter-t); }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-image { aspect-ratio: 16/10; max-height: 400px; }
    .hero-data { grid-column: auto; grid-template-columns: repeat(2, 1fr); }
    .hero-data > div:nth-child(2) { border-right: none; padding-right: 0; }
    .hero-data > div:nth-child(3) { border-left: 0; padding-left: 0; padding-top: 24px; border-top: 1px solid var(--hairline-on-dark); border-right: 1px solid var(--hairline-on-dark); padding-right: 24px; }
    .hero-data > div:nth-child(4) { padding-top: 24px; border-top: 1px solid var(--hairline-on-dark); padding-left: 24px; }

    /* Hero pills — pull inside the photo frame on tablet */
    .callout-pill.pos-1 { right: 8px; top: 8%; }
    .callout-pill.pos-2 { left: 8px; top: 50%; }
    .callout-pill.pos-3 { right: 8px; bottom: 8%; }
    .callout-pill { min-width: auto; padding: 8px 14px 8px 10px; }
    .callout-pill .ico { width: 30px; height: 30px; }
    .callout-pill .ico svg { width: 14px; height: 14px; }
    .callout-pill .txt .a { font-size: 12px; }
    .callout-pill .txt .b { font-size: 10px; }

    /* Engineered grid stacks */
    .engineered-grid { grid-template-columns: 1fr; gap: 24px; }
    .ring-card { padding: 32px; }

    .stats-grid { grid-template-columns: 1fr; }
    .case-grid { grid-template-columns: 1fr; gap: 40px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: 1fr; gap: 24px; }
    .steps-grid::before { display: none; }

    .compare-row { grid-template-columns: 1fr; gap: 24px; }
    .global-grid { grid-template-columns: 1fr; gap: 24px; }
    .mission-cta-card { grid-template-columns: 1fr; gap: 32px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .footer-brand { grid-column: 1 / -1; margin-bottom: 16px; }

    .section-header { grid-template-columns: 1fr; gap: 24px; }
  }

  /* ===========================================================
     RESPONSIVE — MOBILE (≤640px)
     =========================================================== */
  @media (max-width: 640px) {
    :root { --gutter-d: var(--gutter-m); }
    .nav { padding: 12px var(--gutter-m); }
    .logo { font-size: 16px; }
    .nav-cta .btn { padding: 10px 14px; font-size: 13px; min-height: 40px; }
    .lang { display: none; }

    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
    .hero-meta { gap: 6px; }
    .pill { padding: 4px 10px; font-size: 10px; }

    .hero-data { grid-template-columns: 1fr 1fr; }
    .hero-data > div { padding: 20px 16px; }

    .stats-grid, .products-grid { grid-template-columns: 1fr !important; }
    .feature-grid-2x2 { grid-template-columns: 1fr; }

    /* Hero pills — even more compact on mobile */
    .callout-pill.pos-1 { right: 6px; top: 6%; }
    .callout-pill.pos-2 { left: 6px; top: 50%; }
    .callout-pill.pos-3 { right: 6px; bottom: 6%; }

    .ring-stat { flex-direction: column; align-items: flex-start; gap: 20px; text-align: left; }
    .ring { width: 110px; height: 110px; }
    .ring .ring-num { font-size: 26px; }
    .ring-card-actions { flex-direction: column; align-items: stretch; }
    .ring-card-actions .btn { width: 100%; }

    .case-stats { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
    .case-stats > div { border-right: none; border-bottom: 1px solid var(--hairline); padding: 0 0 16px; }
    .case-stats > div:last-child { border-bottom: none; padding-bottom: 0; }

    .case-actions { flex-direction: column; align-items: stretch; }
    .case-actions .btn { width: 100%; }

    .footer-grid { grid-template-columns: 1fr; }

    .hero-data .val { font-size: 22px; }
    .global-block .countries-num { font-size: 64px; }

    .mission-cta-actions .btn { padding: 14px 20px; }
  }

  /* Small flag for the section labels in this proof */
  .proof-label {
    position: absolute;
    top: 0; left: 0;
    background: var(--ink);
    color: var(--on-dark);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 0 0 6px 0;
    z-index: 5;
    opacity: 0.7;
  }
  section.dark .proof-label { background: var(--kold); color: var(--midnight); }


/* ===== v4 ADDITIONS — Documentary eyebrow + tighter editorial details ===== */

.eyebrow-doc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow-doc::before { content: '+'; font-weight: 600; opacity: 0.7; }
section.dark .eyebrow-doc { color: var(--kold-bright); }

.eyebrow-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
section.dark .eyebrow-meta { color: var(--on-dark-dim); }

/* logo image swap */
.logo img { height: 28px; width: auto; display: block; }
@media (max-width: 640px) { .logo img { height: 22px; } }

/* Hero photo — full-bleed cream-backdrop original (let the photo breathe) */
.hero-image-doc {
  aspect-ratio: 4/5;
  border-radius: var(--r);
  overflow: hidden;
  background: #B5C0CA;
  position: relative;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}
.hero-image-doc img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;
  transition: transform 0.6s ease;
}
.hero-image-doc:hover img { transform: scale(1.02); }
.hero-image-doc::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, transparent 65%, rgba(0,0,0,0.12) 100%);
  pointer-events: none;
}
/* Tiny credit chip in the corner — adds editorial credibility */
.hero-image-doc .photo-credit {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: rgba(255,255,255,0.78);
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Stat card v4 — documentary numbers with mono jobcard */
.stat-card-doc {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stat-card-doc .num {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(56px, 7vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.stat-card-doc .num .unit {
  font-size: 0.5em;
  color: var(--kold);
  font-weight: 500;
}
.stat-card-doc .desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.stat-card-doc .jobcard {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

/* Section caption (top-right meta on stats section) */
.section-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  font-weight: 500;
}
section.dark .section-caption { color: var(--on-dark-dim); }

/* Product sticker dot — colors match the physical sticker on each tank.
   This makes the badge a wayfinding signal: the same color you see on the
   product across the site (cards, detail pages, comparisons, downloads). */
.sticker-dot {
  position: absolute;
  top: 16px; left: 16px;
  height: 28px;
  padding: 0 12px;
  min-width: 28px;
  border-radius: 999px;
  color: var(--white);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.85),
    0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
/* Per-product sticker colors — sampled from the tank labels in /Eco Edited/ */
.sticker-dot.c-4040 { background: #E08858; }  /* coral · low-temp refrigeration  */
.sticker-dot.c-4141 { background: #E26AA1; }  /* pink  · AC, largest install base */
.sticker-dot.c-4242 { background: #5BC9B0; }  /* teal  · R-22 legacy             */
.sticker-dot.c-4343 { background: #7BBFE0; }  /* sky   · chillers, cold-chain    */

.product-img { position: relative; }

/* ===== PRODUCTS — DARK MOODY (the locked treatment).
   Dark navy section · dark navy cards · cream-backdrop image windows ·
   per-product sticker-matched badges. The cream "windows" pop against the
   moody navy, giving each card the feel of an editorial product portrait. */
.products-section.dark-moody {
  background: var(--midnight);
  color: var(--on-dark);
  position: relative;
}
.products-section.dark-moody::before {
  /* faint grid like the hero — keeps section anchored to the brand */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hairline-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-on-dark) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0,0,0,0.6) 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0,0,0,0.6) 0%, transparent 80%);
  pointer-events: none;
}
.products-section.dark-moody .container { position: relative; z-index: 1; }

.products-section.dark-moody .product-card {
  background: var(--navy-2);
  border: 1px solid var(--hairline-on-dark);
  color: var(--on-dark);
}
.products-section.dark-moody .product-card:hover {
  border-color: var(--kold);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(-3px);
}
.products-section.dark-moody .product-img {
  background:
    radial-gradient(ellipse at 50% 28%, #DEE5EA 0%, #B5C0CA 55%, #8B96A2 100%);
}
.products-section.dark-moody .product-img img {
  padding: 12% 16%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(15, 27, 46, 0.20));
  transition: transform 0.5s ease;
}
.products-section.dark-moody .product-card:hover .product-img img {
  transform: scale(1.04);
}
.products-section.dark-moody .product-name { color: var(--on-dark); }
.products-section.dark-moody .product-app { color: var(--on-dark-muted); }
.products-section.dark-moody .product-eyebrow { color: var(--eco-bright); }
.products-section.dark-moody .product-eyebrow::before {
  background: var(--eco-bright);
  box-shadow: 0 0 8px var(--eco-bright);
}
.products-section.dark-moody .product-spec { border-top-color: var(--hairline-on-dark); }
.products-section.dark-moody .product-spec .l { color: var(--on-dark-dim); }
.products-section.dark-moody .product-spec .v { color: var(--on-dark); font-weight: 500; }
.products-section.dark-moody .product-spec .v .delta { color: var(--eco-bright); font-weight: 600; }
.products-section.dark-moody .h2 { color: var(--on-dark); }
.products-section.dark-moody .lead.on-dark { color: var(--on-dark-muted); }
.products-section.dark-moody .eyebrow-doc { color: var(--kold-bright); }

/* ===== CASE STUDY IMAGE — more weight, editorial frame ===== */
.case-grid { grid-template-columns: 1.2fr 1fr; }
.case-image {
  aspect-ratio: 4/5;
  box-shadow: 0 24px 48px rgba(15, 27, 46, 0.12);
  background:
    radial-gradient(ellipse at 50% 30%, #DEE5EA 0%, #B5C0CA 55%, #8B96A2 100%);
}
.case-image img { object-fit: cover; }
.case-image-frame-meta {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: rgba(255,255,255,0.84);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.case-image { position: relative; }

/* ===== TRUST STRIP — slightly more editorial weight ===== */
.trust-list li {
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
}

/* Mobile tweak — products section stacks like everywhere else */
@media (max-width: 1024px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-image { aspect-ratio: 4/3; }
}

/* Footer slimmer for v4 */
.footer-min .footer-grid {
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}

/* Hero pill row — tighter; one line on desktop */
.hero-meta-doc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}
.hero-meta-doc .pill {
  background: transparent;
  border: 1px solid var(--hairline-on-dark-2);
  padding: 4px 12px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--on-dark-muted);
  white-space: nowrap;
}

/* Editorial proof strip — replaces the heavy 4-column data band.
   Sits under CTAs as a single mono line that supports, doesn't compete. */
.hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline-on-dark);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--on-dark);
}
.hero-strip span {
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.hero-strip em {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  color: var(--kold-bright);
}
.hero-strip s {
  text-decoration: none;
  color: var(--on-dark-dim);
  font-size: 11px;
}
@media (max-width: 640px) {
  .hero-strip { gap: 12px 24px; font-size: 11px; }
  .hero-strip s { display: none; }
}

/* Hero photo — nudge tanks more central */
.hero-image-doc img {
  object-position: center 45%;
}

/* ===========================================================
   PRODUCT DETAIL PAGES — reusable patterns
   Used by /products/hcr-4040/, /4141/, /4242/, /4343/
   =========================================================== */

/* Product hero photo — bigger, more dramatic than home-card sized */
.product-hero-photo {
  aspect-ratio: 4/5;
  border-radius: var(--r);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 28%, #DEE5EA 0%, #B5C0CA 55%, #8B96A2 100%);
  position: relative;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}
.product-hero-photo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8% 14%;
  filter: drop-shadow(0 24px 36px rgba(15, 27, 46, 0.22));
}
.product-hero-photo .photo-credit {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: rgba(255,255,255,0.78);
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* At-a-glance spec strip — narrow stat band right after hero */
.spec-strip {
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  padding: 32px 0;
}
.spec-strip-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.spec-strip-grid > div {
  padding: 0 20px;
  border-right: 1px solid var(--hairline);
}
.spec-strip-grid > div:first-child { padding-left: 0; }
.spec-strip-grid > div:last-child { border-right: none; padding-right: 0; }
.spec-strip-grid .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.spec-strip-grid .v {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.spec-strip-grid .v .unit {
  font-size: 0.6em;
  color: var(--muted);
  font-weight: 400;
  margin-left: 2px;
}
@media (max-width: 1024px) {
  .spec-strip-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 0; }
  .spec-strip-grid > div { padding: 12px 20px; }
  .spec-strip-grid > div:nth-child(3n) { border-right: none; padding-right: 0; }
  .spec-strip-grid > div:nth-child(3n+1) { padding-left: 0; }
}
@media (max-width: 640px) {
  .spec-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-strip-grid > div:nth-child(n) { border-right: 1px solid var(--hairline); padding: 12px 20px; }
  .spec-strip-grid > div:nth-child(2n) { border-right: none; padding-right: 0; }
  .spec-strip-grid > div:nth-child(2n+1) { padding-left: 0; }
}

/* "Where it fits" — 3-card grid */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.fit-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 32px;
  transition: all 0.3s;
}
.fit-card:hover {
  border-color: var(--kold);
  box-shadow: 0 20px 40px rgba(15,27,46,0.08);
  transform: translateY(-2px);
}
.fit-card .fit-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kold);
  margin-bottom: 16px;
  font-weight: 500;
}
.fit-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 10px;
}
.fit-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 1024px) { .fit-grid { grid-template-columns: 1fr; } }

/* Technical 2-column layout */
.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 56px;
}
.tech-block { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r); padding: 36px; }
.tech-block h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kold);
  margin-bottom: 18px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.tech-block h3::before { content: '+'; opacity: 0.7; }
.tech-block table { width: 100%; border-collapse: collapse; }
.tech-block table th,
.tech-block table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.tech-block table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tech-block table td { color: var(--ink); font-weight: 500; }
.tech-block table tr:last-child th,
.tech-block table tr:last-child td { border-bottom: none; }
@media (max-width: 1024px) { .tech-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Install steps */
.install-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.install-step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 32px;
}
.install-step .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--kold);
  margin-bottom: 14px;
}
.install-step h3 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 10px;
}
.install-step p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.install-cert {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.install-cert .icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--eco);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
}
.install-cert .copy {
  flex: 1; min-width: 240px;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.install-cert .copy strong { color: var(--ink); font-weight: 600; }
@media (max-width: 1024px) { .install-steps { grid-template-columns: 1fr; } }

/* Downloads grid */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.download-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 24px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s;
}
.download-card:hover {
  border-color: var(--kold);
  box-shadow: 0 16px 32px rgba(15,27,46,0.08);
  transform: translateY(-2px);
}
.download-card .pdf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
}
.download-card .pdf-chip .square {
  width: 10px; height: 10px; border-radius: 2px; background: var(--kold);
}
.download-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.25;
}
.download-card .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: auto;
}
.download-card .arrow { color: var(--kold); font-weight: 600; }
@media (max-width: 1024px) { .downloads-grid { grid-template-columns: 1fr; } }

/* Related products row (3-up variant of the home products grid) */
.related-products .products-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .related-products .products-grid { grid-template-columns: 1fr; } }

/* Accent line under a product hero — uses the per-product color */
.product-accent { height: 4px; border-radius: 2px; margin: 28px 0; }
.product-accent.c-4040 { background: #E08858; }
.product-accent.c-4141 { background: #E26AA1; }
.product-accent.c-4242 { background: #5BC9B0; }
.product-accent.c-4343 { background: #7BBFE0; }

/* Headline balance — modern browsers balance line lengths automatically */
.hero h1, .h2, h3 { text-wrap: balance; }

/* iPhone overflow fix: grid items default to min-width:auto, so a long word
   ("refrigeration") or the photo track refused to shrink below the viewport,
   blowing the hero column past the screen edge and clipping everything on the
   right. Let the grid children shrink, and let long headline words break. */
.hero-grid { min-width: 0; }
.hero-grid > * { min-width: 0; }
.hero h1 { overflow-wrap: break-word; }

/* Global guard: never allow horizontal scroll on small screens. `clip`
   (not `hidden`) contains any stray wide element without turning the
   document into a scroll container — so the sticky nav keeps working. */
html { overflow-x: clip; }

/* ===========================================================
   PER-PRODUCT TINGE — subtle color signaling on detail pages
   Each product page gets a wash of its sticker color, light touch.
   =========================================================== */

/* Top accent bar — sits just under the nav, 4px full-width.
   Subtle but instant signal of which product page you're on. */
.product-accent-bar { height: 4px; width: 100%; }
.product-accent-bar.c-4040 { background: #E08858; }
.product-accent-bar.c-4141 { background: #E26AA1; }
.product-accent-bar.c-4242 { background: #5BC9B0; }
.product-accent-bar.c-4343 { background: #7BBFE0; }

/* Hero h1 accent word — uses product color instead of kold-bright */
.hero h1 .tinge-4040 { color: #F5A77D; }   /* lighter coral, reads on navy */
.hero h1 .tinge-4141 { color: #F590BD; }   /* lighter pink */
.hero h1 .tinge-4242 { color: #7FE0C8; }   /* lighter teal */
.hero h1 .tinge-4343 { color: #9CD2EE; }   /* lighter sky */

/* Compare-callout chrome gradient per-product variant
   The big "99.95%" stat picks up the product color tinge */
.compare-callout.tinge-4040 .pct { background: linear-gradient(180deg, #FFFFFF 0%, #F5A77D 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.compare-callout.tinge-4141 .pct { background: linear-gradient(180deg, #FFFFFF 0%, #F590BD 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.compare-callout.tinge-4242 .pct { background: linear-gradient(180deg, #FFFFFF 0%, #7FE0C8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.compare-callout.tinge-4343 .pct { background: linear-gradient(180deg, #FFFFFF 0%, #9CD2EE 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Compare-bar fill — eco bar takes on the product tinge */
.compare-bar-fill.tinge-4040 { background: linear-gradient(90deg, #E08858, #F5A77D); box-shadow: 0 0 12px rgba(224, 136, 88, 0.35); }
.compare-bar-fill.tinge-4141 { background: linear-gradient(90deg, #E26AA1, #F590BD); box-shadow: 0 0 12px rgba(226, 106, 161, 0.35); }
.compare-bar-fill.tinge-4242 { background: linear-gradient(90deg, #5BC9B0, #7FE0C8); box-shadow: 0 0 12px rgba(91, 201, 176, 0.35); }
.compare-bar-fill.tinge-4343 { background: linear-gradient(90deg, #7BBFE0, #9CD2EE); box-shadow: 0 0 12px rgba(123, 191, 224, 0.35); }

/* compare-bar-value (the kold-bright text) per-product tinge */
.compare-bar-value.tinge-4040 { color: #F5A77D; }
.compare-bar-value.tinge-4141 { color: #F590BD; }
.compare-bar-value.tinge-4242 { color: #7FE0C8; }
.compare-bar-value.tinge-4343 { color: #9CD2EE; }

/* ===========================================================
   NAV v2 — Refined wordmark + mega-dropdown
   =========================================================== */

.nav {
  padding: 12px var(--gutter-d);
  background: rgba(255, 255, 255, 0.92);
}
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.nav .logo img { height: 38px; width: auto; display: block; }
@media (max-width: 640px) { .nav .logo img { height: 28px; } }

.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-self: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-cta { justify-self: end; display: flex; align-items: center; gap: 16px; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-links > li > a:hover,
.nav-links > li:focus-within > a,
.nav-links > li.is-active > a { background: var(--canvas-2); color: var(--ink); }
.nav-links .caret {
  font-size: 9px;
  opacity: 0.55;
  margin-left: 2px;
  transition: transform 0.2s;
}
.nav-links > li:hover .caret,
.nav-links > li:focus-within .caret { transform: rotate(180deg); opacity: 1; }

/* Mega-dropdown panel — anchor varies by menu item position
   to prevent viewport overflow on left/rightmost panels */
.mega {
  position: absolute;
  top: calc(100% + 8px);
  width: min(960px, calc(100vw - 32px));
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  box-shadow: 0 24px 56px rgba(15, 27, 46, 0.16), 0 4px 12px rgba(15, 27, 46, 0.08);
  padding: 28px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mega::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}

/* Default anchor: CENTER under the menu item */
.has-mega > .mega { left: 50%; transform: translate(-50%, -8px); }
.has-mega:hover > .mega,
.has-mega:focus-within > .mega { transform: translate(-50%, 0); }

/* Anchor-LEFT — for leftmost menu items (Products) so panel extends right */
.has-mega.anchor-left > .mega { left: 0; transform: translate(0, -8px); }
.has-mega.anchor-left:hover > .mega,
.has-mega.anchor-left:focus-within > .mega { transform: translate(0, 0); }

/* Anchor-RIGHT — for rightmost menu items (Knowledge Base) so panel extends left */
.has-mega.anchor-right > .mega { left: auto; right: 0; transform: translate(0, -8px); }
.has-mega.anchor-right:hover > .mega,
.has-mega.anchor-right:focus-within > .mega { transform: translate(0, 0); }

/* Show on hover/focus */
.has-mega:hover > .mega,
.has-mega:focus-within > .mega { opacity: 1; pointer-events: auto; }

/* ===========================================================
   MEGA DROPDOWNS — unified design language
   Same eyebrow color (kold), same hover treatment, same footer row.
   Products has photos; others don't. Otherwise visually consistent.
   =========================================================== */

/* PRODUCTS mega — photo cards. No hard border in rest state;
   selection happens via subtle hover background, matching Tech links. */
.mega-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega-products .mega-card {
  display: block;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  position: relative;
}
.mega-products .mega-card:hover {
  background: var(--canvas);
  border-color: var(--hairline);
  transform: translateY(-2px);
}
.mega-products .mc-img {
  aspect-ratio: 1/1;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 30%, #DEE5EA 0%, #B5C0CA 100%);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.mega-products .mc-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 14% 18%;
}
.mega-products .mc-sticker {
  position: absolute;
  top: 8px; left: 8px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--white);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 3px 8px rgba(0,0,0,0.18);
}
.mega-products .mc-sticker.c-4040 { background: #E08858; }
.mega-products .mc-sticker.c-4141 { background: #E26AA1; }
.mega-products .mc-sticker.c-4242 { background: #5BC9B0; }
.mega-products .mc-sticker.c-4343 { background: #7BBFE0; }

/* Unified eyebrow style — same color/size/weight across all dropdowns */
.mega .mc-meta,
.mega-products .mc-replaces {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kold);
  margin-bottom: 6px;
  font-weight: 600;
}

/* Unified title style */
.mega .mc-h,
.mega-products .mc-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.25;
}

/* Unified body style */
.mega .mc-d,
.mega-products .mc-app {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 0;
}

/* TECHNOLOGY / INDUSTRIES / KB mega — link list, same hover treatment as Products */
.mega-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mega-cols a.mc-link {
  display: block;
  text-decoration: none;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.mega-cols a.mc-link:hover {
  background: var(--canvas);
  border-color: var(--hairline);
  transform: translateY(-2px);
}

/* Unified footer row — present on EVERY dropdown for cohesion */
.mega-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.mega-footer .copy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.mega-footer a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kold);
  text-decoration: none;
  font-weight: 600;
}
.mega-footer a:hover { color: var(--kold-bright); }

/* Mobile — hide mega panels; show simple flat nav via hamburger (future) */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-links .caret { display: none; }
  .mega { display: none; }
  .hamburger { display: flex; }
}

/* ===========================================================
   TRUST BAND — categorized partner / regulatory logo strip
   sits between hero (dark) and proof section (light)
   =========================================================== */
.trust-band {
  background: linear-gradient(180deg, #F3F6F9 0%, #DEE5EA 100%);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 56px 0;
  position: relative;
}
.trust-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(91, 201, 176, 0.35) 25%,
    rgba(123, 191, 224, 0.45) 50%,
    rgba(91, 201, 176, 0.35) 75%,
    transparent 100%);
}
.trust-band-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter-d);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}

.trust-group { display: flex; flex-direction: column; gap: 20px; }
.trust-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
  text-align: center;
}

.trust-logos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
  justify-items: center;
}
.trust-logos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.trust-logos li::before { display: none; }
.trust-logos li img {
  height: 56px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(85%);
  opacity: 0.78;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.trust-logos li:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-1px);
}
.trust-cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  line-height: 1.4;
}

.trust-divider {
  width: 1px;
  height: 120px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--hairline-2) 30%,
    var(--hairline-2) 70%,
    transparent 100%);
}

/* Tablet — stack the two groups, hide the vertical divider */
@media (max-width: 1024px) {
  .trust-band-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .trust-divider {
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%, var(--hairline-2) 30%, var(--hairline-2) 70%, transparent 100%);
    justify-self: center;
  }
}

/* Mobile — single-column logo stack */
@media (max-width: 640px) {
  .trust-band { padding: 40px 0; }
  .trust-logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
  }
  .trust-logos li img { height: 44px; max-width: 130px; }
}

/* ===========================================================
   EDITORIAL PHOTO STRIP — wide photo break between sections
   =========================================================== */
.photo-strip {
  position: relative;
  width: 100%;
  height: clamp(280px, 38vw, 520px);
  overflow: hidden;
  background: var(--midnight);
}
.photo-strip img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.photo-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,17,31,0.4) 0%, transparent 30%, transparent 70%, rgba(8,17,31,0.6) 100%);
  pointer-events: none;
}
.photo-strip .photo-caption {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(8, 17, 31, 0.72);
  padding: 10px 20px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  white-space: nowrap;
}

/* ===========================================================
   PRODUCT HERO POLISH — v2
   - Bigger sticker dot used as the primary product identifier
   - Stronger hero-strip weight (was reading as footnote)
   - PDF indicator on Download buttons
   - At-a-glance spec strip with intermediate breakpoint
   =========================================================== */

/* Hero sticker dot — when used in .hero-meta, it's the primary identifier */
.hero-meta-doc .sticker-dot {
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 999px;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 6px 16px rgba(0, 0, 0, 0.30);
  margin-right: 4px;
}

/* Hero strip — bumped weight; reads as supporting facts, not footnote */
.hero-strip {
  font-size: 13px;
  gap: 32px;
  margin-top: 40px;
  padding-top: 24px;
}
.hero-strip em {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--kold-bright);
  font-weight: 600;
}
.hero-strip > span { font-weight: 500; }
.hero-strip s { font-size: 12px; opacity: 0.85; }

/* PDF marker — appended to download buttons to signal file action */
.pdf-marker {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 3px;
  color: var(--on-dark);
  line-height: 1;
}
.btn-primary .pdf-marker {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--white);
}

/* At-a-glance spec strip — better responsive flow */
.spec-strip-grid {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
}
@media (max-width: 1280px) {
  .spec-strip-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 0; }
  .spec-strip-grid > div { padding: 12px 20px; }
  .spec-strip-grid > div:nth-child(n)  { border-right: 1px solid var(--hairline); }
  .spec-strip-grid > div:nth-child(3n) { border-right: none; padding-right: 0; }
  .spec-strip-grid > div:nth-child(3n+1) { padding-left: 0; }
}
@media (max-width: 640px) {
  .spec-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-strip-grid > div:nth-child(3n) { border-right: 1px solid var(--hairline); }
  .spec-strip-grid > div:nth-child(2n) { border-right: none; padding-right: 0; }
  .spec-strip-grid > div:nth-child(2n+1) { padding-left: 0; }
}

/* ===========================================================
   LOGO — PNG image (placeholder pending dedicated brand pass)
   The wordmark experiment + 3-direction comparison lives at
   /logo-preview/ for reference if we revisit.
   =========================================================== */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
}
.logo img {
  display: block;
  height: 38px;
  width: auto;
}
.footer-brand .logo img { height: 40px; }
@media (max-width: 640px) {
  .nav .logo img { height: 28px; }
}

/* keep wordmark scaffolding in case /logo-preview/ is opened separately */
.logo-text { display: inline-flex; align-items: center; gap: 0.18em; }
.logo-sep {
  width: 0.22em; height: 0.22em;
  border-radius: 50%;
  background: var(--kold);
  flex-shrink: 0;
  display: inline-block;
  box-shadow: 0 0 8px rgba(60, 180, 230, 0.55);
  transform: translateY(-0.06em);
}

/* ===========================================================
   BLOG POST — editorial article layout
   Used by /knowledge-base/blog/<slug>/index.html
   =========================================================== */

.post-header {
  background: var(--canvas);
  padding: clamp(56px, 8vw, 100px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--hairline);
}
.post-header .container { max-width: 880px; }
.post-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kold);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-eyebrow::before { content: '+'; opacity: 0.7; }
.post-eyebrow .sep {
  width: 1px; height: 10px;
  background: var(--hairline-2);
  display: inline-block;
}
.post-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 24px;
  text-wrap: balance;
}
.post-lede {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}
.post-meta {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.post-meta .l { color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.12em; margin-right: 8px; }
.post-meta .v { color: var(--ink-2); }

.post-featured {
  max-width: 1080px;
  margin: -8px auto 0;
  padding: 0 var(--gutter-d);
}
.post-featured img {
  width: 100%;
  height: clamp(280px, 40vw, 520px);
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: 0 24px 56px rgba(15, 27, 46, 0.10);
}

/* Body */
.post-body {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) var(--gutter-d);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-2);
}
.post-body > * + * { margin-top: 1.2em; }
.post-body p { color: var(--ink-2); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body em { font-style: italic; }
.post-body u { text-decoration: none; border-bottom: 1px solid var(--hairline-2); padding-bottom: 1px; }
.post-body a {
  color: var(--kold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(60, 180, 230, 0.4);
  transition: text-decoration-color 0.2s;
}
.post-body a:hover { text-decoration-color: var(--kold); }

.post-body h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 1.8em;
  text-wrap: balance;
}
.post-body h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 1.6em;
  text-wrap: balance;
}
.post-body h4, .post-body h5, .post-body h6 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-top: 1.4em;
}
.post-body h5, .post-body h6 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kold);
  margin-top: 1.6em;
  margin-bottom: -0.4em;   /* tightens to following content */
}
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body li { margin-top: 0.5em; }
.post-body li::marker { color: var(--kold); }
.post-body blockquote {
  border-left: 3px solid var(--kold);
  padding: 6px 0 6px 20px;
  margin: 1.6em 0;
  font-style: italic;
  color: var(--ink-2);
  font-size: 19px;
}

/* Inline CTA card — mid-article or end */
.post-cta {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 28px 32px;
  margin: 2em 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.post-cta .copy {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.post-cta .copy small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 4px;
}

/* Related posts */
.related-posts {
  background: var(--canvas);
  padding: clamp(56px, 7vw, 88px) 0;
  border-top: 1px solid var(--hairline);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.related-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 24px;
  text-decoration: none;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.related-card:hover {
  border-color: var(--kold);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15,27,46,0.08);
}
.related-card .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
}
.related-card .title {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.3;
}
.related-card .read {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--kold);
  margin-top: auto;
  letter-spacing: 0.06em;
}
@media (max-width: 1024px) { .related-grid { grid-template-columns: 1fr; } }

/* ===========================================================
   BLOG ARCHIVE & KNOWLEDGE BASE HUB
   =========================================================== */

/* Archive layout — featured first post + 2-column grid of the rest */
.archive-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--hairline);
}
.archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 32px;
}
.archive-filters .chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--canvas-2);
  color: var(--ink-2);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.archive-filters .chip:hover,
.archive-filters .chip.is-active {
  background: var(--white);
  border-color: var(--kold);
  color: var(--kold);
}

.archive-section { padding: clamp(48px, 6vw, 80px) 0; }
.archive-featured-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
}
.archive-featured {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
}
.archive-featured:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(15,27,46,0.10); border-color: var(--kold); }
.archive-featured .photo {
  aspect-ratio: 16/9;
  background: var(--canvas-2);
  overflow: hidden;
}
.archive-featured .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.archive-featured:hover .photo img { transform: scale(1.03); }
.archive-featured .body { padding: 28px 32px; }
.archive-featured .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
  margin-bottom: 12px;
}
.archive-featured h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 12px;
  text-wrap: balance;
}
.archive-featured .excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.archive-list { display: grid; grid-template-columns: 1fr; gap: 4px; }
.archive-list .row {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 28px;
  align-items: center;
  text-decoration: none;
  transition: all 0.18s;
}
.archive-list .row:hover {
  border-color: var(--kold);
  background: var(--canvas);
  transform: translateY(-1px);
}
.archive-list .thumb {
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--canvas-2);
}
.archive-list .thumb img { width: 100%; height: 100%; object-fit: cover; }
.archive-list .row .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
  margin-bottom: 8px;
}
.archive-list .row h3 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
}
.archive-list .row .read {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .archive-featured-grid { grid-template-columns: 1fr; }
  .archive-list .row { grid-template-columns: 80px 1fr; }
  .archive-list .row .read { grid-column: 2; padding-top: 4px; }
}

/* ===========================================================
   KB HUB & SITEMAP — minimal landing layouts
   =========================================================== */
.kb-hero { padding: clamp(64px, 8vw, 120px) 0 clamp(40px, 5vw, 64px); }
.kb-hero h1 { max-width: 18ch; }
.kb-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
.kb-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 40px;
  text-decoration: none;
  transition: all 0.25s;
}
.kb-card:hover { border-color: var(--kold); transform: translateY(-3px); box-shadow: 0 24px 48px rgba(15,27,46,0.08); }
.kb-card .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
  margin-bottom: 16px;
}
.kb-card h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 12px;
}
.kb-card p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.kb-card .stat {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
}
@media (max-width: 1024px) { .kb-cards { grid-template-columns: 1fr; } }

/* Sitemap */
.sitemap-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-top: 56px;
}
.sitemap-col h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kold);
  margin-bottom: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sitemap-col h3::before { content: '+'; opacity: 0.7; }
.sitemap-col ul { list-style: none; padding: 0; }
.sitemap-col li {
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}
.sitemap-col li:first-child { border-top: none; }
.sitemap-col a { color: var(--ink); text-decoration: none; transition: color 0.15s; }
.sitemap-col a:hover { color: var(--kold); }
.sitemap-col li .url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-left: 8px;
}
@media (max-width: 1024px) { .sitemap-cols { grid-template-columns: 1fr; gap: 32px; } }

/* FAQ accordion */
.faq-list { margin-top: 56px; }
.faq-item {
  border-top: 1px solid var(--hairline);
}
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  padding: 24px 0;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  transition: color 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--kold); }
.faq-item summary::after {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  color: var(--kold);
  font-weight: 400;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--kold); }
.faq-answer {
  padding: 0 0 28px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 78ch;
}
.faq-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-right: 12px;
}

/* ===========================================================
   INSTALLATION PAGE
   =========================================================== */

/* Video hero — big, full-bleed within container */
.install-video {
  margin-top: 56px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--midnight);
  position: relative;
  aspect-ratio: 16/9;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}
.install-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.install-video .play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(8,17,31,0.3) 0%, rgba(8,17,31,0.6) 100%);
  cursor: pointer;
  transition: background 0.2s;
}
.install-video .play-overlay:hover { background: linear-gradient(180deg, rgba(8,17,31,0.15) 0%, rgba(8,17,31,0.45) 100%); }
.install-video .play-overlay.is-playing { display: none; }
.install-video .play-btn {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  transition: transform 0.2s;
}
.install-video .play-overlay:hover .play-btn { transform: scale(1.06); }
.install-video .play-btn::before {
  content: '';
  width: 0; height: 0;
  border-left: 22px solid var(--ink);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}
.install-video-caption {
  position: absolute;
  bottom: 24px; left: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(8, 17, 31, 0.72);
  padding: 8px 16px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}

/* Required tools — small chip grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.tool-chip {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.tool-chip .ico {
  width: 36px; height: 36px;
  background: var(--canvas-2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--kold);
  font-weight: 600;
}
@media (max-width: 1024px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tools-grid { grid-template-columns: 1fr; } }

/* Do-NOT-install warning panel */
.warn-panel {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 4px solid #E08858; /* coral — same as 4040 sticker for warning hue */
  border-radius: var(--r);
  padding: 36px 40px;
  margin-top: 32px;
}
.warn-panel h3 {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.warn-panel h3::before {
  content: '!';
  width: 24px; height: 24px;
  background: #E08858;
  color: var(--white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.warn-panel ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.warn-panel li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-left: 20px;
  position: relative;
}
.warn-panel li::before {
  content: '×';
  position: absolute;
  left: 0; top: 0;
  color: #E08858;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}
@media (max-width: 640px) { .warn-panel ul { grid-template-columns: 1fr; } }

/* Procedure steps — wide cards with photo + numbered text */
.proc-steps { margin-top: 56px; display: flex; flex-direction: column; gap: 32px; }
.proc-step {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
}
.proc-step:nth-child(even) { grid-template-columns: 1.1fr 1fr; }
.proc-step:nth-child(even) .proc-photo { order: 2; }
.proc-step:nth-child(even) .proc-body { order: 1; }

.proc-photo {
  aspect-ratio: 4/3;
  background: var(--canvas-2);
  position: relative;
  overflow: hidden;
}
.proc-photo img { width: 100%; height: 100%; object-fit: cover; }
.proc-photo .photo-tag {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: rgba(255,255,255,0.85);
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.proc-body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
/* IMPORTANT: defeat the global .step-num rule (homepage "how it works" 3-step
   uses .step-num as a 56×56 circle). We share the class name so override fully. */
.proc-step .step-num {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: block;
  margin: 0 0 14px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--kold);
  text-align: left;
}
.proc-step h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 16px;
}
.proc-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.proc-body li {
  padding-left: 22px;
  position: relative;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.proc-body li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kold);
  opacity: 0.6;
}
.proc-body .note {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--canvas);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: 0;
}
.proc-body .note strong { color: var(--kold); }

@media (max-width: 1024px) {
  .proc-step,
  .proc-step:nth-child(even) { grid-template-columns: 1fr; }
  .proc-step:nth-child(even) .proc-photo { order: -1; }
  .proc-step:nth-child(even) .proc-body { order: 0; }
  .proc-photo { aspect-ratio: 5/3; }
  .proc-body { padding: 32px; }
}

/* Charge math callout */
.charge-math {
  margin-top: 56px;
  background: var(--midnight);
  color: var(--on-dark);
  border-radius: var(--r);
  padding: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.charge-math .left h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--on-dark);
  margin-bottom: 14px;
}
.charge-math .left p {
  color: var(--on-dark-muted);
  font-size: 16px;
  line-height: 1.55;
}
.charge-math .right { display: flex; gap: 16px; align-items: stretch; }
.charge-math .tile {
  flex: 1;
  background: var(--navy);
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--r);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.charge-math .tile .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  font-weight: 500;
}
.charge-math .tile .v {
  font-family: 'Inter', sans-serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.95;
  background: linear-gradient(180deg, #FFFFFF 0%, #5DCBFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.charge-math .tile .d {
  font-size: 13px;
  color: var(--on-dark-muted);
  line-height: 1.4;
}
@media (max-width: 1024px) { .charge-math { grid-template-columns: 1fr; gap: 32px; } }

/* Per-product install PDF downloads — 4 sticker-colored cards */
.install-pdfs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.install-pdf-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 22px 24px;
  text-decoration: none;
  transition: all 0.2s;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 4px solid;
}
.install-pdf-card.c-4040 { border-top-color: #E08858; }
.install-pdf-card.c-4141 { border-top-color: #E26AA1; }
.install-pdf-card.c-4242 { border-top-color: #5BC9B0; }
.install-pdf-card.c-4343 { border-top-color: #7BBFE0; }
.install-pdf-card:hover {
  border-color: var(--kold);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15,27,46,0.08);
}
.install-pdf-card .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
}
.install-pdf-card .name {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.install-pdf-card .arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--kold);
  margin-top: auto;
}
@media (max-width: 1024px) { .install-pdfs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .install-pdfs { grid-template-columns: 1fr; } }

/* ===========================================================
   INSTALL PAGE — overflow safety pass
   Grid children default to min-width:auto which prevents shrinking
   below intrinsic content width. Forcing min-width:0 + overflow-wrap
   keeps long-form text inside its container.
   =========================================================== */

/* Only the BODY column gets min-width:0 (long-form text needs to shrink-fit).
   The PHOTO column must keep natural sizing so the image fills its grid cell. */
.proc-step { min-width: 0; }
.proc-body {
  min-width: 0;
  width: 100%;
  overflow: hidden;            /* hard stop on any text overflow */
}
.proc-photo {
  width: 100%;                 /* photo claims its full grid column */
  /* keep aspect-ratio behavior intact — no min-width:0 here */
}
.proc-body ul,
.proc-body li,
.proc-body h3,
.proc-body p,
.proc-body .note { overflow-wrap: anywhere; word-break: normal; max-width: 100%; }
.proc-body .note { box-sizing: border-box; width: 100%; }
.proc-body ul { padding-left: 0; }

/* Charge math — prevent the chrome-gradient value from spilling */
.charge-math { min-width: 0; }
.charge-math > * { min-width: 0; }
.charge-math .tile { min-width: 0; overflow: hidden; }
.charge-math .tile .v { overflow-wrap: anywhere; }
.charge-math .right { flex-wrap: wrap; }

/* Warn panel — keep bullets inside the 2-col grid */
.warn-panel { box-sizing: border-box; }
.warn-panel ul { min-width: 0; }
.warn-panel li { overflow-wrap: anywhere; min-width: 0; }

/* Tool chips — keep long labels from breaking the chip */
.tool-chip { min-width: 0; overflow: hidden; }
.tool-chip > *:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Install-cert callout (in the canvas section) — same treatment */
.install-cert { min-width: 0; flex-wrap: wrap; }
.install-cert .copy { min-width: 0; overflow-wrap: anywhere; flex: 1 1 280px; }

/* Per-product PDF cards — names with long product strings */
.install-pdf-card { min-width: 0; overflow: hidden; }
.install-pdf-card .name { overflow-wrap: anywhere; }

/* Hero — long lede with the strong span */
.hero .hero-sub { overflow-wrap: anywhere; max-width: 64ch; }

/* Video block — defensive */
.install-video { min-width: 0; }

/* ===========================================================
   HUB PAGES — shared patterns
   Used by /about/, /products/, /case-studies/, /technology/, /industries/
   =========================================================== */

.hub-hero { padding: clamp(64px, 8vw, 120px) 0 clamp(40px, 5vw, 64px); }
.hub-hero .h1 { max-width: 22ch; margin-bottom: 16px; }
.hub-hero .lead { max-width: 64ch; }
.hub-hero .pill-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 24px;
}
.hub-hero .pill {
  background: var(--canvas-2);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
}

/* Two-column hero variant: text + image */
.hub-hero-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hub-hero-split .photo-frame {
  aspect-ratio: 4/5;
  border-radius: var(--r);
  overflow: hidden;
  background: #B5C0CA;
  position: relative;
  box-shadow: 0 32px 80px rgba(15, 27, 46, 0.18);
}
.hub-hero-split .photo-frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
  .hub-hero-split { grid-template-columns: 1fr; gap: 32px; }
}

/* 4-card category grid (technology, industries, case studies listing) */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.hub-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 36px 40px;
  text-decoration: none;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.hub-card:hover {
  border-color: var(--kold);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(15,27,46,0.08);
}
.hub-card .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
}
.hub-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ink);
}
.hub-card p { color: var(--muted); font-size: 14px; line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.hub-card .arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kold);
  margin-top: auto;
  font-weight: 600;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 1024px) { .hub-grid { grid-template-columns: 1fr; } }

/* About: facts/timeline strip */
.about-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 56px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.about-facts > div {
  padding: 28px 24px 28px 0;
  border-right: 1px solid var(--hairline);
  min-width: 0;
}
.about-facts > div:first-child { padding-left: 0; }
.about-facts > div:last-child { border-right: none; padding-right: 0; }
.about-facts .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 500;
}
.about-facts .v {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.about-facts .d { font-size: 13px; color: var(--muted); line-height: 1.45; }
@media (max-width: 1024px) {
  .about-facts { grid-template-columns: repeat(2, 1fr); }
  .about-facts > div:nth-child(2n) { border-right: none; padding-right: 0; }
  .about-facts > div:nth-child(2n+1) { padding-left: 0; }
  .about-facts > div:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}

/* Story sections (long-form on About) */
.about-story {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  margin: 64px 0;
  align-items: start;
}
.about-story .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
  padding-top: 8px;
}
.about-story h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 20px;
  text-wrap: balance;
}
.about-story p { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin-bottom: 1em; min-width: 0; }
@media (max-width: 1024px) { .about-story { grid-template-columns: 1fr; gap: 24px; } }

/* Case study row (used in /case-studies/) */
.case-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 24px;
  text-decoration: none;
  transition: all 0.25s;
  min-width: 0;
}
.case-row:hover { border-color: var(--kold); transform: translateY(-2px); box-shadow: 0 24px 48px rgba(15,27,46,0.08); }
.case-row .photo { aspect-ratio: 4/3; background: #B5C0CA; overflow: hidden; }
.case-row .photo img { width: 100%; height: 100%; object-fit: cover; }
.case-row .body { padding: 36px 40px; display: flex; flex-direction: column; gap: 14px; justify-content: center; min-width: 0; overflow: hidden; }
.case-row .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
}
.case-row h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ink);
}
.case-row .case-stat-row {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 8px;
}
.case-row .case-stat-row > div {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.case-row .case-stat-row strong {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--kold);
  margin-right: 6px;
}
@media (max-width: 1024px) {
  .case-row { grid-template-columns: 1fr; }
  .case-row .body { padding: 28px 24px; }
}

/* Case studies: "more soon" stub card */
.case-stub {
  background: var(--canvas);
  border: 1px dashed var(--hairline-2);
  border-radius: var(--r);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.case-stub .info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.case-stub .info strong {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.012em;
  display: block;
  margin-bottom: 4px;
}
.case-stub .status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
}

/* ============================================================
   RESPONSIVE CHARTS — inline SVG, scales to container
   ============================================================ */

.chart-frame {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 28px 24px 16px;
  margin: 0;
}
.chart-frame.on-dark {
  background: var(--navy-2);
  border-color: var(--hairline-on-dark-2);
}
.chart-frame .chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.chart-frame .chart-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
}
.chart-frame.on-dark .chart-eyebrow { color: var(--kold-bright); }
.chart-frame .chart-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.chart-frame.on-dark .chart-title { color: var(--on-dark); }
.chart-frame .chart-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.chart-frame.on-dark .chart-sub { color: var(--on-dark-muted); }

.pt-chart {
  width: 100%;
  height: auto;
  display: block;
  font-family: 'JetBrains Mono', monospace;
  cursor: crosshair;
}
.pt-chart .pt-overlay { cursor: crosshair; }

.gwp-skyline { width: 100%; height: auto; display: block; }

/* Chart + table side-by-side on wide screens, stacks on narrow */
.chart-with-table {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.chart-with-table .chart-frame { min-width: 0; }
.chart-with-table .data-table-frame {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 0;
  overflow: hidden;
}
.chart-with-table .data-table-frame .table-head {
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--hairline);
}
.chart-with-table .data-table-frame .table-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kold);
  font-weight: 600;
  margin-bottom: 4px;
}
.chart-with-table .data-table-frame .table-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.chart-with-table .data-table-scroll {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.chart-with-table table.pt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.chart-with-table table.pt-table th {
  position: sticky;
  top: 0;
  background: var(--canvas);
  color: var(--muted);
  font-weight: 600;
  padding: 10px 12px;
  text-align: right;
  letter-spacing: 0.04em;
  font-size: 10px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hairline);
}
.chart-with-table table.pt-table th:first-child,
.chart-with-table table.pt-table td:first-child { text-align: left; }
.chart-with-table table.pt-table td {
  padding: 6px 12px;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
.chart-with-table table.pt-table tr:nth-child(even) td { background: var(--canvas); }
.chart-with-table table.pt-table tr:last-child td { border-bottom: none; }

@media (max-width: 880px) {
  .chart-with-table { grid-template-columns: 1fr; }
  .chart-with-table .data-table-scroll { max-height: 320px; }
}


/* ============================================================
   REPLACEMENT MATRIX — HCR ← legacy refrigerants visual grid
   ============================================================ */

.rep-matrix {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
}
.rep-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: 1px;
  background: var(--hairline);
}
.rep-row > * { background: var(--white); padding: 24px 24px; }
.rep-hcr {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--canvas);
}
.rep-hcr-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rep-hcr-name { font-weight: 600; color: var(--ink); font-size: 15px; letter-spacing: -0.005em; }
.rep-hcr-gwp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--eco);
  letter-spacing: 0.06em;
  font-weight: 600;
}
.rep-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
  margin-bottom: 10px;
}
.rep-replaces {
  display: flex;
  flex-direction: column;
}
.rep-gas {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--hairline);
  align-items: baseline;
}
.rep-gas:last-of-type { border-bottom: none; }
.rep-gas-name { font-weight: 500; color: var(--ink); font-size: 14px; }
.rep-gas-gwp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.rep-apps { display: flex; flex-direction: column; }
.rep-app {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  padding: 4px 0;
}
.rep-app + .rep-app { border-top: 1px dotted var(--hairline); margin-top: 4px; padding-top: 8px; }

@media (max-width: 880px) {
  .rep-row { grid-template-columns: 1fr; gap: 0; }
  .rep-row > * { padding: 18px 20px; }
  .rep-hcr { border-bottom: 1px solid var(--hairline); }
  .rep-replaces { border-bottom: 1px solid var(--hairline); }
}


/* ============================================================
   CHART LEGEND CHIPS  (external — replaces in-SVG legend)
   ============================================================ */

.chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.chart-frame.on-dark .legend-chip { color: var(--on-dark-muted); }

.legend-chip .swatch {
  display: inline-block;
  width: 22px;
  height: 2.5px;
  flex-shrink: 0;
  border-radius: 1px;
}
.legend-chip .swatch.dashed {
  height: 0;
  border-top: 2px dashed var(--c);
  background: transparent;
}

/* ============================================================
   COMPARISON BAR CHART (performance page)
   ============================================================ */

.compare-svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: 'JetBrains Mono', monospace;
}


/* ============================================================
   MOBILE — tighten section padding & header-to-content gaps
   ============================================================ */

@media (max-width: 760px) {
  .section-pad      { padding: 48px 0 !important; }
  .section-pad-sm   { padding: 32px 0 !important; }

  .section-header           { margin-bottom: 24px; }
  .chart-with-table         { margin-top: 20px !important; }
  .hub-grid                 { gap: 16px; }
  .fit-grid                 { gap: 16px; }
  .tech-grid                { gap: 20px; }

  /* Reduce vertical air on hero on mobile too */
  .hero                     { padding: 56px 0 40px; }
  .hero h1                  { margin-bottom: 16px; }
  .hero-sub                 { margin-bottom: 28px; }

  /* Slightly tighter post-CTA on mobile */
  .post-cta                 { padding: 24px; gap: 16px; }

  /* Chart frames get a hair less padding at narrow widths */
  .chart-frame              { padding: 20px 16px 14px; }
  .chart-frame .chart-head  { margin-bottom: 14px; gap: 10px; }
}


/* ============================================================
   PER-PAGE FAQ BLOCK — visible Q&A with FAQPage schema
   ============================================================ */

.faq-block {
  max-width: 880px;
  margin: 0 auto;
}
.faq-block .faq-item {
  border-top: 1px solid var(--hairline);
  padding: 28px 0;
}
.faq-block .faq-item:last-child {
  border-bottom: 1px solid var(--hairline);
}
.faq-block .faq-q {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.faq-block .faq-q::before {
  content: 'Q';
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--kold);
  flex-shrink: 0;
  width: 22px;
}
.faq-block .faq-a {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  padding-left: 34px;
}
.faq-block .faq-a a {
  color: var(--kold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* Dark variant (for case-study + dark sections) */
section.dark .faq-block .faq-item,
.faq-block.on-dark .faq-item {
  border-color: var(--hairline-on-dark-2);
}
section.dark .faq-block .faq-q,
.faq-block.on-dark .faq-q {
  color: var(--on-dark);
}
section.dark .faq-block .faq-q::before,
.faq-block.on-dark .faq-q::before {
  color: var(--kold-bright);
}
section.dark .faq-block .faq-a,
.faq-block.on-dark .faq-a {
  color: var(--on-dark-muted);
}
section.dark .faq-block .faq-a a,
.faq-block.on-dark .faq-a a {
  color: var(--kold-bright);
}

@media (max-width: 760px) {
  .faq-block .faq-item { padding: 20px 0; }
  .faq-block .faq-q { font-size: 17px; }
  .faq-block .faq-a { padding-left: 0; font-size: 15px; }
}


/* ============================================================
   MOBILE NAV TOGGLE — open state for the hamburger menu
   ============================================================ */

/* The in-menu "Request a Quote" CTA li is desktop-hidden; it only appears
   inside the open mobile menu (the bar CTA carries desktop). */
.nav-cta-li { display: none; }

@media (max-width: 1024px) {

  /* On mobile the long bar CTA crowds the hamburger off-screen — hide it
     in the bar and surface the CTA inside the opened menu instead. */
  .nav-cta-desktop { display: none !important; }

  .nav.is-menu-open .nav-cta-li {
    display: block;
    width: 100%;
    padding: 16px 24px 20px;
    background: var(--canvas);
  }
  .nav.is-menu-open .nav-cta-li .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
  }

  /* When the menu is open, surface the .nav-links as a vertical flat menu
     positioned right under the nav bar. Mega dropdowns stay hidden.
     Using position: fixed + width: 100vw so we don't depend on the parent
     flex layout's containing-block behavior. */
  .nav.is-menu-open .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: var(--nav-h, 64px);
    left: 0;
    right: 0;
    width: 100vw;
    margin: 0;
    justify-self: stretch;
    background: var(--white);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 24px 48px rgba(15,27,46,0.08);
    padding: 8px 0;
    gap: 0;
    max-height: calc(100vh - var(--nav-h, 64px));
    overflow-y: auto;
    z-index: 100;
  }
  .nav.is-menu-open .nav-links > li {
    width: 100%;
    border-top: 1px solid var(--hairline);
  }
  .nav.is-menu-open .nav-links > li:first-child { border-top: none; }
  .nav.is-menu-open .nav-links > li > a {
    display: block;
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    border-radius: 0;
  }
  .nav.is-menu-open .nav-links > li > a:hover,
  .nav.is-menu-open .nav-links > li > a:focus {
    background: var(--canvas);
  }
  .nav.is-menu-open .nav-links > li.is-active > a {
    background: var(--canvas-2);
    font-weight: 600;
  }

  /* Mega panels accordion-expand inline on tap. */
  .nav.is-menu-open .mega {
    display: none;
    position: static;
    width: 100%;
    max-width: none;
    background: var(--canvas);
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--hairline);
    padding: 12px 24px 16px;
    transform: none;
    opacity: 1;
  }
  .nav.is-menu-open .has-mega.is-expanded .mega { display: block; }
  .nav.is-menu-open .has-mega.is-expanded > a { background: var(--canvas-2); font-weight: 600; }

  /* Caret rotates on expand */
  .nav.is-menu-open .nav-links > li > a .caret {
    display: inline-block;
    margin-left: auto;
    opacity: 0.55;
    transition: transform 0.18s ease;
    font-size: 14px;
  }
  .nav.is-menu-open .nav-links > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  .nav.is-menu-open .has-mega.is-expanded > a .caret { transform: rotate(180deg); opacity: 1; }

  /* "View all" hub link at top of expanded panel */
  .mega-hub-link { display: none; }  /* hidden on desktop by default */
  .nav.is-menu-open .has-mega.is-expanded .mega-hub-link {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kold);
    font-weight: 600;
    text-decoration: none;
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--hairline-2);
    margin-bottom: 12px;
  }

  /* Mobile mega-products: stack vertically as flat cards */
  .nav.is-menu-open .mega-products {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .nav.is-menu-open .mega-card {
    display: grid !important;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: start;
    padding: 12px 0;
    text-decoration: none;
    border-radius: 0;
    background: transparent;
    border: none;
    border-bottom: 1px dotted var(--hairline-2);
    box-shadow: none;
  }
  .nav.is-menu-open .mega-card:last-child { border-bottom: none; }
  .nav.is-menu-open .mega-card:hover { background: transparent; }
  .nav.is-menu-open .mega-card .mc-img {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    width: 56px; height: 56px;
    background: #DEE5EA;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
  }
  .nav.is-menu-open .mega-card .mc-img img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    width: auto; height: auto;
  }
  .nav.is-menu-open .mega-card .mc-sticker {
    position: absolute;
    top: -2px; left: -2px;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 1;
  }
  .nav.is-menu-open .mega-card .mc-replaces {
    grid-column: 2;
    grid-row: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
    line-height: 1.3;
  }
  .nav.is-menu-open .mega-card .mc-name {
    grid-column: 2;
    grid-row: 2;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
  }
  .nav.is-menu-open .mega-card .mc-app {
    grid-column: 2;
    grid-row: 3;
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    line-height: 1.35;
  }

  /* Mobile mega-cols: stack vertically as compact rows */
  .nav.is-menu-open .mega-cols {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    grid-template-columns: none !important;
  }
  .nav.is-menu-open .mc-link {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    border-bottom: 1px dotted var(--hairline-2);
  }
  .nav.is-menu-open .mc-link:last-child { border-bottom: none; }
  .nav.is-menu-open .mc-link .mc-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kold);
    font-weight: 600;
    margin-bottom: 2px;
  }
  .nav.is-menu-open .mc-link .mc-h {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
  }
  .nav.is-menu-open .mc-link .mc-d {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
    margin: 2px 0 0;
  }

  /* Mobile mega-footer */
  .nav.is-menu-open .mega-footer {
    display: block;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--hairline-2);
  }
  .nav.is-menu-open .mega-footer .copy {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
    line-height: 1.4;
  }
  .nav.is-menu-open .mega-footer a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kold);
    text-decoration: none;
    font-weight: 600;
  }

  /* Hamburger morphs to X when menu open */
  .nav.is-menu-open .hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav.is-menu-open .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .nav.is-menu-open .hamburger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .hamburger span {
    transition: transform 0.18s ease, opacity 0.12s ease;
    transform-origin: center;
  }

  /* Hide language toggle on mobile (not wired up anyway) */
  .nav-cta .lang { display: none; }
  /* Tighten the CTA on mobile so logo + button + hamburger fit */
  .nav-cta .btn { padding: 10px 16px; font-size: 14px; }
}


/* ============================================================
   PRODUCT HERO PHOTO — sticker-color glow (Option A)
   Per-product radial bloom inside the cream backdrop.
   Threads the sticker color identity through the entire hero panel.
   ============================================================ */

.product-hero-photo.glow { position: relative; }

/* The colored bloom layer sits between the cream backdrop and the tank
   image. ::before is the soft wide gradient; ::after is the sharper
   center glow for depth. */
.product-hero-photo.glow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    var(--glow-color, transparent) 0%,
    transparent 70%
  );
  opacity: 0.32;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.product-hero-photo.glow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    circle at 50% 58%,
    var(--glow-color-bright, transparent) 0%,
    transparent 50%
  );
  opacity: 0.18;
  filter: blur(40px);
  pointer-events: none;
}
.product-hero-photo.glow img,
.product-hero-photo.glow .photo-credit { position: relative; z-index: 2; }

/* Per-product glow tints — tied to the sticker color system. */
.product-hero-photo.glow.c-4040 { --glow-color: #E08858; --glow-color-bright: #F2B69A; }
.product-hero-photo.glow.c-4141 { --glow-color: #E26AA1; --glow-color-bright: #F2A4C8; }
.product-hero-photo.glow.c-4242 { --glow-color: #5BC9B0; --glow-color-bright: #9DEDD8; }
.product-hero-photo.glow.c-4343 { --glow-color: #7BBFE0; --glow-color-bright: #B5DCF2; }

/* Hide "View all" hub link on desktop — it's only for the mobile accordion. */
.mega-hub-link { display: none !important; }
@media (max-width: 1024px) {
  .nav.is-menu-open .has-mega.is-expanded .mega-hub-link {
    display: block !important;
  }
}

/* ============================================================
   GTRANSLATE — restyle the real dwf widget to match the mega-menu.
   Actual DOM:  .gt_switcher > .gt_selected > a (flag + name + native
   SVG arrow via a:after) , and a sibling .gt_option (the dropdown).
   GTranslate ships .gt_option as position:relative with an animated
   height — that's what pushed the header open. We force it to OVERLAY.
   We keep GTranslate's own arrow (it flips on open) — no second one.
   ============================================================ */

.gt-mobile-li { display: none; }
.gtranslate_wrapper.gt-mobile { display: none; }
.gtranslate_wrapper.gt-desktop { display: inline-flex; align-items: center; }

.gtranslate_wrapper .gt_switcher {
  position: relative;
  font-family: inherit;
  width: auto;
  line-height: normal;
  overflow: visible !important;   /* GTranslate sets overflow:hidden here to mask its
                                     in-flow height animation; with our absolute dropdown
                                     that clips the panel to the pill — so force visible. */
}

/* --- Trigger pill (border + fill live on the <a>) --- */
.gtranslate_wrapper .gt_switcher .gt_selected {
  background: transparent !important;
  border: none !important;
  border-radius: 999px;
}
.gtranslate_wrapper .gt_switcher .gt_selected a {
  position: relative !important;            /* anchor the native arrow INSIDE the pill */
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: auto !important;
  padding: 7px 30px 7px 13px !important;   /* right pad clears the native arrow */
  background: transparent !important;
  border: 1px solid var(--hairline-2) !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kold) !important;
  font-weight: 600;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gtranslate_wrapper .gt_switcher .gt_selected a:hover,
.gtranslate_wrapper .gt_switcher .gt_selected a.open {
  border-color: var(--kold) !important;
  background: var(--canvas) !important;
}
.gtranslate_wrapper .gt_switcher .gt_selected a img {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 27, 46, 0.08);
}
/* Keep GTranslate's own SVG chevron (flips on open) — just nudge + tone it. */
.gtranslate_wrapper .gt_switcher .gt_selected a:after {
  right: 12px !important;
  opacity: 0.55;
}
.gtranslate_wrapper .gt_switcher .gt_selected a.open:after { opacity: 1; }

/* --- Dropdown: force it to OVERLAY (not push layout) + mega-menu look --- */
.gtranslate_wrapper .gt_switcher .gt_option {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 220px !important;
  box-sizing: border-box !important;
  background: var(--white) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 48px rgba(15, 27, 46, 0.10), 0 1px 2px rgba(15, 27, 46, 0.04) !important;
  padding: 6px !important;
  margin: 0 !important;
  height: auto !important;          /* override GTranslate's stunted inline height
                                       (it computes from its own small default rows) */
  max-height: 380px !important;     /* fits all 10 languages; scrolls if ever more */
  overflow-y: auto !important;
  z-index: 300 !important;
}
.gtranslate_wrapper .gt_switcher .gt_option a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 9px 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  transition: background 0.12s ease !important;
}
.gtranslate_wrapper .gt_switcher .gt_option a:hover {
  background: var(--canvas) !important;
  color: var(--ink) !important;
}
.gtranslate_wrapper .gt_switcher .gt_option a.gt_current {
  background: var(--canvas) !important;
  font-weight: 600 !important;
}
.gtranslate_wrapper .gt_switcher .gt_option a img {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 27, 46, 0.08);
  flex-shrink: 0;
}

/* --- Mobile: surface the switcher inside the open menu; keep overlay --- */
@media (max-width: 1024px) {
  .gtranslate_wrapper.gt-desktop { display: none; }
  .nav.is-menu-open .nav-links > .gt-mobile-li {
    display: block;
    padding: 16px 24px;
    background: var(--canvas);
    border-top: 1px solid var(--hairline);
  }
  .nav.is-menu-open .gtranslate_wrapper.gt-mobile { display: block; width: 100%; }
  .nav.is-menu-open .gtranslate_wrapper.gt-mobile .gt_switcher { width: 100%; }
  .nav.is-menu-open .gtranslate_wrapper.gt-mobile .gt_switcher .gt_selected a {
    width: 100% !important;
    justify-content: flex-start;
    padding: 12px 36px 12px 16px !important;
    font-size: 12px !important;
  }
  .nav.is-menu-open .gtranslate_wrapper.gt-mobile .gt_switcher .gt_option {
    position: static !important;   /* flow inside the hamburger menu, don't overlay */
    width: 100% !important;
    margin-top: 8px !important;
    box-shadow: none !important;
    max-height: none !important;
  }
}