/*
Theme Name: AnalystEdge
Theme URI: https://analystedge.ai
Author: AnalystEdge.ai
Author URI: https://analystedge.ai
Description: AnalystEdge.ai WordPress Theme — AI Skills for Data Analysts
Version: 1.9.166
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: analystedge
*/

/* ── GOOGLE FONTS are enqueued via functions.php ── */

:root {
  --green:     #00c8a0;
  --green-dim: #008c70;
  --green-glow: rgba(0,200,160,0.12);
  --ink:       #080b10;
  --ink2:      #0e1219;
  --ink3:      #151b25;
  --border:    #1c2330;
  --text:      #e2e6f0;
  --muted:     #5a6478;
  --mono:      'DM Mono', monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; /* smooth scrolling handled by JS for offset control */ }

body {
  background: var(--ink);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── NOISE TEXTURE OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ── NAV ── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  border-bottom: 1px solid transparent;
  background: rgba(5,7,12,0.0);
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}

/* Desktop: more compact navbar — 36px logo + 12px padding ≈ 61px (was 73px) */
@media (min-width: 769px) {
  #navbar { padding: 12px 48px; }
}

#navbar.scrolled {
  background: rgba(5,7,12,0.96);
  backdrop-filter: blur(32px) saturate(160%);
  border-color: rgba(255,255,255,0.06);
}

@media (max-width: 600px) {
  #navbar,
  #navbar.scrolled {
    background: #050710 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 4px 0 #050710, 0 5px 20px rgba(0,0,0,0.5) !important;
    z-index: 9999 !important;
    isolation: isolate;
  }
}

/* Navbar is transparent at the top everywhere and solidifies on scroll (.scrolled);
   on mobile (<=600px) it stays solid via the !important rule above. The blog and
   article heroes both fill behind the bar, so no per-page backing is needed. */

/* Reset: all other nav elements are NOT fixed */
nav:not(#navbar) {
  position: static;
}

/* Nav right group — links and cart inline */
.nav-right {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo svg { width: 36px; height: 36px; }

.nav-logo { color: var(--text); }

.nav-wordmark {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.nav-wordmark span { color: var(--green); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-family: var(--mono);
  font-size: 12px;
  color: #7a8699;
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--text); }

/* WordPress menu reset */
.nav-links ul { display: none; }
.nav-links li { list-style: none; }

/* Force nav background on checkout/cart/order pages where page is dark from top */
/* Cart/checkout/order navbar — backed on scroll like all other pages */
/* No permanent override needed — .scrolled class handles it via JS */

/* ── EDITORIAL KNOWLEDGE NAVIGATION ───────────────────────────────────────── */

#editorial-nav {
  position: fixed;
  top: 61px;
  left: 0; right: 0;
  z-index: 190;
  margin-top: -1px;
  padding-top: 1px;
  background: rgba(5,7,12,0.96);
  backdrop-filter: blur(32px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04),
    0 6px 16px rgba(0,0,0,0.2),
    0 16px 40px rgba(0,0,0,0.12);
  transition:
    transform 0.4s cubic-bezier(0.16,1,0.3,1),
    opacity 0.3s ease;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Pseudo-element fills any gap between #navbar bottom and editorial nav top */
#editorial-nav::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0; right: 0;
  height: 40px;
  background: rgba(5,7,12,0.96);
  backdrop-filter: blur(32px);
  pointer-events: none;
}

/* Visible state */
#editorial-nav.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* On article pages — clear separation from content */
body.single-post #editorial-nav {
  background: rgba(5,7,12,0.92);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 20px rgba(0,0,0,0.3);
  backdrop-filter: blur(28px) saturate(160%);
}

body.single-post .editorial-nav-inner { opacity: 1; }

body.single-post .editorial-nav-item {
  opacity: 1;
  font-size: 10px;
  color: #8893a6;
}

body.single-post .editorial-nav-item:hover,
body.single-post .editorial-nav-item.active {
  opacity: 1;
  color: var(--text);
}

/* Always visible on archive/category/blog pages */
body.category #editorial-nav,
body.tag #editorial-nav,
body.archive #editorial-nav,
body.blog #editorial-nav {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Never show on static pages or WooCommerce shop */
body.page #editorial-nav,
body.post-type-archive-product #editorial-nav,
body.woocommerce-shop #editorial-nav,
body.woocommerce-page #editorial-nav {
  display: none !important;
}

/* Reset editorial padding on WooCommerce pages */
body.woocommerce,
body.woocommerce-page,
body.woocommerce-shop {
  padding-top: 0 !important;
}

.editorial-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 40px;
  overflow: hidden;
}

.editorial-nav-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(0,200,160,0.38);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  padding-right: 8px;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.editorial-nav-scroll {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  /* Both-edge fade — signals overflow on both sides */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 88%, transparent 100%);
  padding-right: 32px;
  padding-left: 4px;
}

.editorial-nav-scroll::-webkit-scrollbar { display: none; }

.editorial-nav-item {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: #535f74;
  text-decoration: none;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    text-shadow 0.25s ease;
}

/* Thin gradient underline indicator */
.editorial-nav-item::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 11px; right: 11px;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--green) 40%, var(--green) 60%, transparent 100%);
  opacity: 0;
  transform: scaleX(0.15);
  transition:
    opacity 0.22s ease,
    transform 0.32s cubic-bezier(0.16,1,0.3,1);
  transform-origin: center;
}

.editorial-nav-item:hover {
  color: #8096ac;
  background: transparent;
  text-shadow: 0 0 16px rgba(0,200,160,0.12);
}

.editorial-nav-item:hover::after {
  opacity: 0.22;
  transform: scaleX(0.6);
}

.editorial-nav-item.active {
  color: #00c8a0;
  background: rgba(0,200,160,0.05);
  text-shadow: 0 0 18px rgba(0,200,160,0.22);
}

.editorial-nav-item.active::after {
  opacity: 0.9;
  transform: scaleX(1);
}

/* Clear the fixed navbar only — the editorial "Knowledge Verticals" nav is retired,
   so blog/archive pages no longer reserve extra vertical space for it. */
body.single-post,
body.single:not(.single-product),
body.blog,
body.category,
body.tag,
body.archive:not(.post-type-archive-product):not(.woocommerce-page):not(.woocommerce-shop):not(.woocommerce) {
  padding-top: 73px;
}

/* Single blog posts no longer render the editorial ("Knowledge Verticals") nav,
   so clear only the navbar — no 48px reserved gap where that nav used to sit. */
body.single-post,
body.single:not(.single-product) {
  padding-top: 73px;
}

/* Desktop: clear the compact 61px navbar on single posts (no editorial nav here) */
@media (min-width: 769px) {
  body.single-post,
  body.single:not(.single-product),
  body.blog,
  body.category,
  body.tag,
  body.archive:not(.post-type-archive-product):not(.woocommerce-page):not(.woocommerce-shop):not(.woocommerce) { padding-top: 61px; }
}

@media (max-width: 768px) {
  body.blog,
  body.category,
  body.tag,
  body.archive:not(.post-type-archive-product) {
    padding-top: 64px;
  }
}

/* Mobile — scroll horizontally, hide label, edge fade */
@media (max-width: 768px) {
  #editorial-nav {
    top: 64px;
    /* Extend background downward to visually connect with content-filters */
    box-shadow: 0 8px 0 0 rgba(5,7,12,0.97), 0 1px 0 rgba(255,255,255,0.04), 0 6px 16px rgba(0,0,0,0.2);
  }

  .editorial-nav-inner {
    padding: 0;
    gap: 0;
    height: 40px;
    overflow: hidden;
  }

  .editorial-nav-label { display: none; }

  .editorial-nav-scroll {
    padding-left: 16px;
    padding-right: 40px;
    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
    mask-image: linear-gradient(to right, black 70%, transparent 100%);
  }

  /* editorial-nav item sizing handled in 768px block above */

  body.blog,
  body.category,
  body.tag,
  body.archive {
    padding-top: 64px;
  }
}
/* Nav cart icon */
.nav-cart {
  display: flex;
  align-items: center;
  position: relative;
  color: #7a8699;
  text-decoration: none;
  transition: color 0.2s;
}

.nav-cart:hover { color: var(--green); }

.nav-cart svg { width: 20px; height: 20px; }

.nav-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--green);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* WooCommerce notices — brand styled */
.woocommerce-notices-wrapper {
  position: fixed;
  top: 72px;
  right: 24px;
  z-index: 500;
  max-width: 380px;
  width: 100%;
}

.woocommerce-message,
.woocommerce-info {
  background: var(--ink2) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--green) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
  list-style: none !important;
  margin-bottom: 8px !important;
}

.woocommerce-message::before,
.woocommerce-info::before { display: none !important; }

.nav-cta {
  background: var(--green);
  color: var(--ink) !important;
  padding: 9px 20px;
  border-radius: 6px;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  transition: background 0.2s ease !important;
}

.nav-cta:hover { background: #14e8b8; }

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 84vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 68px;
  overflow: hidden;
}

/* Dual atmospheric glow — asymmetric, more editorial */
.hero-glow-left {
  position: absolute;
  top: 10%; left: -10%;
  width: 600px; height: 500px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.04) 0%, transparent 65%);
  pointer-events: none;
}

.hero-glow-right {
  position: absolute;
  bottom: 5%; right: -8%;
  width: 500px; height: 400px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.03) 0%, transparent 65%);
  pointer-events: none;
}

/* Grid lines */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 100%);
  opacity: 0.35;
}

/* Left-aligned heroes — mask from left-center instead of center */
.wl-hero .hero-grid,
.ait-hero .hero-grid,
.sprod-hero .hero-grid {
  mask-image: radial-gradient(ellipse 80% 70% at 30% 50%, black 20%, transparent 100%);
  opacity: 0.28;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,200,160,0.06);
  border: 1px solid rgba(0,200,160,0.16);
  border-radius: 100px;
  padding: 6px 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(0,200,160,0.7);
  letter-spacing: 0.1em;
  margin-bottom: 22px;
  animation: fadeUp 0.6s ease both;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-badge-dot {
  width: 5px; height: 5px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

.hero h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.03em;
  max-width: 780px;
  position: relative;
  z-index: 1;
  animation: fadeUp 0.6s ease 0.1s both;
}

/* "for" connector word — visually smaller to create rhythm */
.hero h1 .hero-for {
  font-size: 0.72em;
  opacity: 0.52;
  display: inline;
}

@media (max-width: 768px) {
  .hero h1 .hero-for {
    font-size: 0.52em;
    opacity: 0.55;
    display: inline;
    vertical-align: -2px;
  }
}

/* "Workflows" — slightly tighter tracking to reduce visual width */
.hero h1 .hero-workflows {
  letter-spacing: -0.045em;
}

.hero h1 em {
  font-style: normal;
  color: var(--green);
  text-shadow: 0 0 18px rgba(0,200,160,0.22), 0 0 5px rgba(0,200,160,0.09);
}

.hero-sub {
  font-size: 16.5px;
  font-weight: 300;
  color: #b8c2cc;
  max-width: 580px;
  margin: 18px auto 0;
  line-height: 1.78;
  position: relative;
  z-index: 1;
  animation: fadeUp 0.6s ease 0.2s both;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
  animation: fadeUp 0.6s ease 0.3s both;
}

.hero-note {
  font-family: var(--mono);
  font-size: 10px;
  color: #4a5668;
  letter-spacing: 0.08em;
  margin-top: 14px;
  animation: fadeUp 0.6s ease 0.35s both;
  position: relative; z-index: 1;
}

/* Knowledge verticals tag row under hero */
.hero-verticals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
  position: relative; z-index: 1;
  animation: fadeUp 0.6s ease 0.4s both;
}

.hero-vert-label {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.52);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 4px;
}

.hero-vert-item {
  font-family: var(--mono);
  font-size: 10px;
  color: #7a8898;
  letter-spacing: 0.06em;
}

.hero-vert-sep {
  color: rgba(0,200,160,0.25);
  font-size: 10px;
}

/* ── KNOWLEDGE VERTICALS SECTION ── */
.fp-verticals-section {
  padding: 52px 0 72px;
}

@media (max-width: 768px) {
  .fp-verticals-section { padding: 44px 0 56px; }
}

.fp-verticals-section .section-sub {
  max-width: 480px;
  color: #96a2b4;
}

.fp-verticals-section .section-title {
  max-width: 520px;
}

.fp-verticals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}

.fp-vert-card {
  background: linear-gradient(160deg, rgba(14,20,28,0.9) 0%, rgba(8,12,18,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 22px 24px 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.28s ease,
    transform 0.32s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.28s ease;
}

/* Top accent line — expands in on hover */
.fp-vert-card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; right: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,200,160,0.5), transparent);
  opacity: 0;
  transition: left 0.35s cubic-bezier(0.16,1,0.3,1), right 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease;
}

.fp-vert-card:hover {
  border-color: rgba(0,200,160,0.2);
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.36),
    0 0 0 1px rgba(0,200,160,0.06),
    0 0 28px rgba(0,200,160,0.04);
}

.fp-vert-card,
.fp-vert-card:hover,
.fp-vert-card:visited {
  text-decoration: none !important;
  color: inherit !important;
}

.fp-vert-card:hover::before {
  left: 15%; right: 15%;
  opacity: 1;
}

.fp-vert-card:hover .fp-vert-title {
  color: #e8f2ec;
}

.fp-vert-icon {
  width: 24px; height: 24px;
  color: rgba(0,200,160,0.38);
  flex-shrink: 0;
  transition: color 0.22s ease;
  margin-bottom: -4px;
}

.fp-vert-card:hover .fp-vert-icon {
  color: rgba(0,200,160,0.65);
}

/* Per-card subtle differentiation — gradient angle + ambient glow variance */
.fp-vert-card:nth-child(1) { background: linear-gradient(155deg, rgba(14,20,28,0.9) 0%, rgba(8,12,18,0.95) 100%); }
.fp-vert-card:nth-child(2) { background: linear-gradient(170deg, rgba(13,19,27,0.9) 0%, rgba(9,13,20,0.95) 100%); }
.fp-vert-card:nth-child(3) { background: linear-gradient(145deg, rgba(15,21,28,0.9) 0%, rgba(8,11,17,0.95) 100%); }
.fp-vert-card:nth-child(4) { background: linear-gradient(160deg, rgba(12,18,26,0.9) 0%, rgba(8,13,19,0.95) 100%); }
.fp-vert-card:nth-child(1) .fp-vert-icon { color: rgba(0,200,160,0.45); }
.fp-vert-card:nth-child(2) .fp-vert-icon { color: rgba(0,180,148,0.38); }
.fp-vert-card:nth-child(3) .fp-vert-icon { color: rgba(0,210,168,0.42); }
.fp-vert-card:nth-child(4) .fp-vert-icon { color: rgba(0,190,154,0.35); }
.fp-vert-card:nth-child(1):hover .fp-vert-icon { color: rgba(0,200,160,0.75); }
.fp-vert-card:nth-child(2):hover .fp-vert-icon { color: rgba(0,180,148,0.7); }
.fp-vert-card:nth-child(3):hover .fp-vert-icon { color: rgba(0,210,168,0.75); }
.fp-vert-card:nth-child(4):hover .fp-vert-icon { color: rgba(0,190,154,0.68); }
.fp-vert-card:hover { background: linear-gradient(160deg, rgba(14,20,28,0.95) 0%, rgba(8,12,18,0.98) 100%); }

.fp-vert-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(0,200,160,0.45);
  text-transform: uppercase;
}

.fp-vert-title {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  transition: color 0.22s ease;
}

.fp-vert-desc {
  font-size: 12.5px;
  font-weight: 300;
  color: #7a8c9e;
  line-height: 1.68;
  margin: 0;
  flex: 1;
}

.fp-vert-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: #6a7d90;
  letter-spacing: 0.07em;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.fp-vert-cta {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(0,200,160,0.55);
  letter-spacing: 0.06em;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none !important;
  transition: color 0.18s ease, gap 0.22s cubic-bezier(0.16,1,0.3,1);
}

.fp-vert-card:hover .fp-vert-cta {
  color: var(--green);
  gap: 8px;
}

@media (max-width: 900px) {
  .fp-verticals-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .fp-verticals-grid { grid-template-columns: 1fr; }
  .hero-verticals { display: none; }
  .hero-note { display: none; }
}

.btn-primary {
  background: var(--green);
  color: var(--ink);
  padding: 14px 32px;
  border-radius: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #14e8b8;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,200,160,0.4), 0 2px 8px rgba(0,200,160,0.2);
  outline: none;
}

.btn-primary .btn-arrow,
.btn-primary span:last-child {
  display: inline-block;
  transition: transform 0.2s ease;
}

.btn-primary:hover .btn-arrow,
.btn-primary:hover span:last-child {
  transform: translateX(3px);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  padding: 14px 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: -0.01em;
  display: inline-block;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: rgba(0,200,160,0.55);
  color: #e8f0ea;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,200,160,0.14);
  outline: none;
}

/* ── SECTION BASE ── */
section {
  position: relative;
  z-index: 1;
  padding: 100px 24px;
}

/* Section separator — thin green-tinted rule */
.section-divider {
  position: relative;
  z-index: 1;
  height: 1px;
  margin: 0 48px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,200,160,0.1) 15%,
    rgba(0,200,160,0.2) 50%,
    rgba(0,200,160,0.1) 85%,
    transparent 100%
  );
}

/* Consistent section padding around dividers */
#start-here        { padding-top: 72px; padding-bottom: 72px; background: var(--ink2); }
#workflow-examples { padding-top: 40px; padding-bottom: 72px; background: var(--ink); }

@media (max-width: 768px) {
  #workflow-examples { padding-left: 0; padding-right: 0; }
  #workflow-examples .container { padding: 0 20px; }
}
#free-pack         { padding-top: 72px !important; padding-bottom: 72px !important; background: var(--ink2); }
#ai-tools          { padding-top: 72px; padding-bottom: 72px; background: var(--ink);  }
#final-cta         { padding-top: 72px; padding-bottom: 72px; background: var(--ink2); }
@media (max-width: 768px) {
  #final-cta { padding-top: 52px; padding-bottom: 52px; }
}

/* Sections with background shift own their color — remove class overrides */
.products-section {
  border-top: none;
  border-bottom: none;
}

.capture-section {
  border-top: none;
  border-bottom: none;
}

/* Lighter variant for post-marquee — less visual weight */
.section-divider--soft {
  opacity: 0.8;
}

/* Ambient transition glow between ticker and sections */
.section-divider--soft::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 60%; height: 120px;
  background: radial-gradient(ellipse at center, rgba(0,200,160,0.04) 0%, transparent 70%);
  pointer-events: none;
}
#features {
  padding-top: 100px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .container { padding: 0 20px !important; }
}

.section-tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.section-title em { font-style: normal; color: var(--green); }

.section-sub {
  font-size: 17px;
  font-weight: 300;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.7;
  margin-bottom: 56px;
}

/* ── EMAIL SIGNUP FORMS ── */
.ae-signup-form--hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Unified pill container */
.ae-hero-bar {
  display: flex;
  align-items: center;
  background: rgba(12, 17, 26, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 7px 7px 7px 22px;
  gap: 8px;
  width: 100%;
  max-width: 600px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.ae-hero-bar:focus-within {
  border-color: rgba(0, 200, 160, 0.45);
  box-shadow:
    0 0 0 3px rgba(0, 200, 160, 0.07),
    0 4px 24px rgba(0, 200, 160, 0.1);
}

.ae-hero-input {
  flex: 1 1 0%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  padding: 12px 8px 12px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
}

.ae-hero-input::placeholder { color: rgba(148, 163, 184, 0.68); }
.ae-hero-input:disabled { opacity: 0.5; cursor: not-allowed; }

/* Suppress the browser autofill light box (Chrome/Safari paint a pale fill on
   autofilled fields, overriding the transparent input). Mask it with an inset
   shadow matching the bar background and keep the text light. */
.ae-hero-input:-webkit-autofill,
.ae-hero-input:-webkit-autofill:hover,
.ae-hero-input:-webkit-autofill:focus,
.ae-hero-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0c111a inset !important;
  box-shadow: 0 0 0 1000px #0c111a inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  border-radius: 0 !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Final CTA — slightly brighter placeholder */
#final-cta .ae-hero-input::placeholder { color: rgba(168, 182, 200, 0.7); }
.ait-cta-section .ae-hero-input::placeholder { color: rgba(168, 182, 200, 0.75); }

/* Capture note — tighter tracking */
.capture-note {
  font-family: var(--mono);
  font-size: 11px;
  color: #8896a4;
  letter-spacing: 0.03em;
}

/* Signup form status messages */
.ae-signup-message {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-top: 10px;
  min-height: 0;
  text-align: center;
}

.ae-signup-message.success { color: var(--green); }
.ae-signup-message.error   { color: #e05050; }

.ae-hero-btn {
  background: var(--green);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  padding: 11px 22px 11px 18px;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  transition:
    background 0.2s ease,
    transform 0.2s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.2s ease;
  line-height: 1;
}

.ae-hero-btn:active {
  transform: scale(0.97) translateY(1px);
  box-shadow: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.ae-hero-btn:hover {
  background: #14e8b8;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 200, 160, 0.38), 0 2px 8px rgba(0, 200, 160, 0.2);
}

.ae-hero-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.ae-hero-msg {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Generic ae-input (non-hero forms) */
.ae-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  min-width: 220px;
}

.ae-input::placeholder { color: var(--muted); }
.ae-input:focus { border-color: rgba(0,200,160,0.4); }
.ae-input:disabled { opacity: 0.5; cursor: not-allowed; }

.ae-msg {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .ae-hero-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
    border-radius: 12px;
    gap: 10px;
  }
  .ae-hero-input { padding: 8px 0; font-size: 15px; }
  .ae-hero-btn   { padding: 13px 16px; font-size: 13px; text-align: center; }
}

/* ── MARQUEE (social proof) ── */
.marquee-section {
  width: 100%;
  height: 54px;
  padding: 0;
  overflow: hidden;
  background: rgba(10, 15, 24, 0.85);
  border-top: 1px solid rgba(120, 140, 170, 0.16);
  border-bottom: 1px solid rgba(120, 140, 170, 0.14);
  position: relative;
  z-index: 1;
  /* edge fade */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,0.6) 4%,
    black 10%,
    black 90%,
    rgba(0,0,0,0.6) 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,0.6) 4%,
    black 10%,
    black 90%,
    rgba(0,0,0,0.6) 96%,
    transparent 100%
  );
}

.marquee-track {
  display: flex;
  align-items: center;
  height: 100%;
  animation: marquee 55s linear infinite;
  white-space: nowrap;
}

.marquee-section:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  height: 100%;
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 40px;
  border-left: 1px solid rgba(120, 140, 170, 0.10);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  color: rgba(148, 163, 184, 0.7);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s ease;
  cursor: default;
}

.marquee-item:hover {
  color: rgba(180, 200, 220, 0.9);
}

.marquee-item:first-child { border-left: none; }

.marquee-icon {
  color: #00d6b3;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

/* keep old .marquee-item span rule from conflicting */
.marquee-item span.marquee-icon { color: #00d6b3; }

@media (max-width: 768px) {
  .marquee-section { height: 50px; }
  .marquee-item { min-width: 200px; padding: 0 36px; font-size: 11px; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── FEATURES ── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.feature-card {
  background: var(--ink2);
  padding: 40px 36px;
  transition: background 0.2s;
  position: relative;
}

.feature-card:hover { background: var(--ink3); }

.feature-icon {
  width: 44px;
  height: 44px;
  background: rgba(0,200,160,0.08);
  border: 1px solid rgba(0,200,160,0.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 20px;
}

.feature-title {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.feature-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.65;
}

/* ── PRODUCTS ── */
.products-section { background: var(--ink2); }

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.product-card {
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px;
  transition: border-color 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.product-card:hover {
  border-color: rgba(0,200,160,0.3);
  transform: translateY(-2px);
}

.product-card.featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
  background: linear-gradient(135deg, #0a1a15 0%, var(--ink) 100%);
  border-color: rgba(0,200,160,0.2);
  padding: 32px;
}

.product-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--green);
  background: rgba(0,200,160,0.08);
  border: 1px solid rgba(0,200,160,0.15);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.product-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  line-height: 1.2;
}

.product-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 24px;
}

.product-price {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.02em;
}

.product-price span {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  font-family: var(--mono);
}

.product-visual {
  background: rgba(0,200,160,0.04);
  border: 1px solid rgba(0,200,160,0.1);
  border-radius: 10px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prompt-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}

.prompt-num {
  color: var(--green);
  opacity: 0.5;
  min-width: 20px;
}

.prompt-text { color: var(--muted); }
.prompt-text strong { color: var(--text); font-weight: 500; }

/* ── TESTIMONIALS ── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testi-card {
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
}

.testi-stars {
  color: var(--green);
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.testi-quote {
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testi-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-dim), var(--ink3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

.testi-name {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.testi-role {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── EMAIL CAPTURE ── */
/* ── FINAL CTA SECTION ── */
.fp-final-cta {
  position: relative;
  padding: 140px 24px 140px;
  text-align: center;
  overflow: hidden;
}

@media (max-width: 768px) {
  .fp-final-cta { padding: 64px 20px 56px; }
}

.fp-final-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.fp-final-inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}

.fp-final-note {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #7a8c9e;
  letter-spacing: 0.06em;
  margin-top: 16px;
}

/* ── 404 PAGE ── */

.ae-404-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 24px;
}

.ae-404-glow {
  position: absolute;
  top: 10%; left: -8%;
  width: 700px; height: 600px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.055) 0%, transparent 60%);
  pointer-events: none;
}

.ae-404-glow--right {
  top: auto; left: auto;
  bottom: 5%; right: -8%;
  width: 500px; height: 400px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.03) 0%, transparent 60%);
}

.ae-404-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

/* Giant 404 numerals */
.ae-404-code {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin-bottom: 12px;
  line-height: 1;
}

.ae-404-digit {
  font-family: 'Syne', sans-serif;
  font-size: clamp(96px, 16vw, 180px);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.09);
  user-select: none;
  transition: color 0.3s ease;
}

.ae-404-digit--accent {
  color: rgba(0,200,160,0.24);
}

.ae-404-hero:hover .ae-404-digit { color: rgba(255,255,255,0.08); }
.ae-404-hero:hover .ae-404-digit--accent { color: rgba(0,200,160,0.25); }

/* Section label */
.ae-404-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(0,200,160,0.55);
  margin-bottom: 16px;
  margin-top: -8px;
}

/* Title */
.ae-404-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--text);
  margin: 0 0 18px;
}

.ae-404-title em { font-style: normal; color: var(--green); }

/* Sub */
.ae-404-sub {
  font-size: 15.5px;
  font-weight: 300;
  color: #7a8898;
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 36px;
}

/* Action buttons */
.ae-404-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.ae-404-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 10px 22px;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.ae-404-btn--primary {
  background: var(--green);
  color: var(--ink) !important;
}

.ae-404-btn--primary:hover {
  background: #14e8b8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,200,160,0.35);
}

.ae-404-btn--secondary {
  background: transparent;
  color: rgba(0,200,160,0.7) !important;
  border: 1px solid rgba(0,200,160,0.25);
}

.ae-404-btn--secondary:hover {
  border-color: rgba(0,200,160,0.45);
  color: var(--green) !important;
  background: rgba(0,200,160,0.06);
  transform: translateY(-2px);
}

/* Quick nav */
.ae-404-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: #3d4a58;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
}

.ae-404-meta a {
  color: #4a5a6a !important;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

.ae-404-meta a:hover { color: rgba(0,200,160,0.65) !important; }
.ae-404-meta-sep { color: rgba(0,200,160,0.2); }

/* ── FOOTER ── */
.ae-footer {
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(5,7,12,0.6);
  padding: 60px 48px 32px;
}

.ae-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 52px;
}

@media (max-width: 768px) {
  .ae-footer-inner { gap: 24px; }
}

/* Top row */
.ae-footer-top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}

/* Brand column */
.ae-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ae-footer-logo {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ae-footer-wordmark {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #dde8f0;
}

.ae-footer-wordmark { font-style: normal; }
.ae-footer-wordmark em { font-style: normal; color: var(--green); }

.ae-footer-tagline {
  font-size: 13px;
  font-weight: 300;
  color: #6a7888;
  line-height: 1.65;
  margin: 0;
}

.ae-footer-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: #5a6878 !important;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  transition: color 0.18s ease;
  margin-top: 4px;
  width: fit-content;
}

.ae-footer-linkedin:hover { color: rgba(0,200,160,0.8) !important; }

/* Nav columns */
.ae-footer-nav-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ae-footer-col-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(0,200,160,0.62);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ae-footer-nav {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ae-footer-nav a {
  font-size: 13px;
  font-weight: 300;
  color: #6a7888 !important;
  text-decoration: none !important;
  transition: color 0.18s ease, transform 0.18s ease;
  line-height: 1;
  display: inline-block;
}

.ae-footer-nav a:hover {
  color: rgba(0,200,160,0.7) !important;
  transform: translateX(2px);
}

/* Bottom row */
.ae-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(0,200,160,0.1);
  flex-wrap: wrap;
  gap: 12px;
}

.ae-footer-copy {
  font-family: var(--mono);
  font-size: 10px;
  color: #3d4a58;
  letter-spacing: 0.08em;
}

.ae-footer-bottom-tag {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(0,200,160,0.25);
  letter-spacing: 0.1em;
}

/* Hide old footer styles */
footer:not(.ae-footer) { display: none; }
.footer-left, .footer-copy, .footer-links { display: none; }

@media (max-width: 900px) {
  .ae-footer { padding: 48px 24px 28px; }
  .ae-footer-top { grid-template-columns: 1fr; gap: 36px; }
  .ae-footer-nav-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .ae-footer-nav-cols { grid-template-columns: 1fr 1fr; }
  .ae-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ── RESPONSIVE ── */

/* ─── HAMBURGER MENU ─── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 300;
}

.nav-hamburger span {
  display: block;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
  transform-origin: center;
}

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-mobile-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(5,7,12,0.98);
  backdrop-filter: blur(20px);
  z-index: 250;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  padding: 148px 36px 40px 48px;
}

.nav-mobile-drawer.is-open { display: flex; }

.nav-mobile-link {
  font-family: 'Syne', sans-serif;
  font-size: clamp(26px, 6.5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none !important;
  transition: color 0.18s ease, opacity 0.18s ease;
  padding: 6px 0;
  display: block;
  width: 100%;
  opacity: 0.9;
}

.nav-mobile-link:hover,
.nav-mobile-link:focus {
  color: var(--green);
  opacity: 1;
  transform: translateX(4px);
}

.nav-mobile-link {
  transition: color 0.18s ease, opacity 0.18s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1);
}

.nav-mobile-divider {
  width: 48px;
  height: 1px;
  background: rgba(0,200,160,0.25);
  margin: 14px 0 0;
}

.nav-mobile-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: #566272;
  letter-spacing: 0.12em;
  margin-top: 0;
  position: absolute;
  bottom: 120px;
  left: 48px;
}

/* ─── 480px — mobile ─── */
@media (max-width: 768px) {
  nav { padding: 16px 20px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero sections */
  .hero { padding: 50px 20px 20px; }
  .hero h1 { font-size: clamp(20px, 6.8vw, 34px); line-height: 1.0; max-width: 94%; }
  .hero-inner { max-width: 100%; width: 100%; }
  .hero-sub { font-size: 15px; max-width: 100%; text-align: left; color: #bac4ce; }
  .hero-badge { font-size: 8px; letter-spacing: 0.07em; padding: 4px 12px; max-width: calc(100vw - 48px); }
  .hero-actions { flex-direction: column; gap: 12px; align-items: stretch; width: 100%; margin-top: 44px; }
  .hero-actions form, .ae-signup-form { width: 100%; }
  .hero-verticals { display: none; }
  .hero-note { display: none; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }

  /* Workflow Library hero */
  .wl-hero { padding: 64px 20px 36px; }
  .wl-hero-title { font-size: clamp(32px, 8vw, 52px); }
  .wl-phil-inner { grid-template-columns: 1fr; gap: 28px; }
  .wl-coming-grid { grid-template-columns: 1fr 1fr; }

  /* AI Tools hero */
  .ait-hero { padding: 64px 20px 32px; }
  .ait-hero-title { font-size: clamp(30px, 7vw, 44px); }

  /* Homepage sections */
  .fp-bfa-grid { grid-template-columns: 1fr 1fr; }
  .fp-bfa-item:nth-child(2n) { border-right: none; }
  .fp-bfa-item:nth-child(5), .fp-bfa-item:nth-child(6) { border-bottom: none; }
  .fp-bfa-item:nth-child(3), .fp-bfa-item:nth-child(4) { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .fp-verticals-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-pack-card { grid-template-columns: 1fr; gap: 28px; }
  .wf-grid { grid-template-columns: 1fr; }

  /* Blog */
  /* sp-layout-inner handled in dedicated 768px block below */

  /* Single post */
  .post-layout { grid-template-columns: 1fr; gap: 32px; }
  .post-sidebar { display: none; }

  /* Product catalog */
  .catalog-grid { grid-template-columns: 1fr !important; }
  .catalog-header { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Single product */
  .sprod-hero { padding: 64px 20px 28px; }
  .sprod-layout-inner { grid-template-columns: 1fr; gap: 36px; }
  .sprod-panel { position: static; }
  .sprod-problem-grid { grid-template-columns: 1fr; }
  .sprod-feature-grid { grid-template-columns: 1fr; }
  .sprod-outcomes-grid { grid-template-columns: 1fr; }
  .sprod-outcome-metric-grid { grid-template-columns: 1fr 1fr; }
  .sprod-related-grid { grid-template-columns: 1fr 1fr; }
  .sprod-pipeline { max-width: 100%; }
  .sprod-pipeline-node { grid-template-columns: 24px 1fr; }
  .sprod-pipeline-layer { grid-column: 2; text-align: left; font-size: 8px; }
  .sprod-final-cta { padding: 28px 24px; }

  /* Cart / checkout */
  .ae-cart-wrap,
  .ae-checkout-wrap { padding: 28px 20px 60px; }
  .ae-cart-inner,
  .ae-checkout-inner { max-width: 100%; }
  .ae-checkout-columns { grid-template-columns: 1fr; gap: 24px; }
  .ae-cart-delivery-grid { grid-template-columns: 1fr; }
  .ae-cart-ecosystem-nav { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; }
  /* Order confirmation (thank-you) */
  .ae-thankyou-hero.ait-hero { padding: 88px 0 12px; }
  .ae-thankyou-hero .ait-hero-title { font-size: clamp(26px, 6vw, 38px); margin-bottom: 10px; }
  .ae-thankyou-hero .ait-hero-sub { margin-bottom: 0; }
  .ae-thankyou-wrap { padding: 16px 20px 56px; }
  .ae-ty-download-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 18px; }
  .ae-ty-section { margin-bottom: 22px; }
  .ae-ty-table th, .ae-ty-table td { padding: 10px 14px; font-size: 12.5px; }
  .ae-ty-product-name { font-size: 12.5px; }
  .ae-ty-next { margin-top: 22px; }
  .ae-checkout-trust { flex-direction: column; gap: 10px; }

  /* Phil cards */
  .wl-phil-cards { margin-top: 0; }

  /* AI Tools sections */
  .ait-pos-grid { grid-template-columns: 1fr; }
  .ait-tool-grid { grid-template-columns: 1fr; }
  .ait-stack-grid { grid-template-columns: 1fr; }
  .ait-chain-grid { grid-template-columns: 1fr; }

  /* Footer */
  .ae-footer { padding: 32px 20px 24px; }
  .ae-footer-top { grid-template-columns: 1fr; gap: 20px; }
  .ae-footer-nav-cols { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Forms */
  .capture-form { flex-direction: column; }
  .capture-form input { max-width: 100% !important; }
  .ae-hero-bar { flex-direction: column; gap: 10px; max-width: 100% !important; width: 100% !important; padding: 8px; box-sizing: border-box; }
  .ae-hero-bar .ae-hero-input { border-radius: 6px !important; width: 100% !important; padding: 14px 16px !important; background: rgba(255,255,255,0.04) !important; border-radius: 6px !important; }
  .ae-hero-bar .ae-hero-btn { border-radius: 6px !important; width: 100% !important; text-align: center !important; padding: 13px 18px !important; justify-content: center !important; color: #050a08 !important; font-weight: 700 !important; font-size: 12.5px !important; letter-spacing: -0.015em !important; overflow: visible !important; white-space: nowrap !important; }

  /* 404 */
  .ae-404-hero { padding: 60px 20px; min-height: auto; }
  .ae-404-actions { flex-direction: column; align-items: flex-start; }
  .marquee-section { height: 40px; }
  .marquee-item { font-size: 9px; padding: 0 14px; }
  .section-title { font-size: clamp(22px, 6.5vw, 36px); }
  .section-title em { opacity: 0.85; }
  .fp-final-sub { font-size: 13px !important; line-height: 1.6 !important; }
}

/* ─── AI Tools mobile card compression ─── */
@media (max-width: 768px) {
  .ait-stack-card { padding: 20px 18px 26px; gap: 9px; }
  .ait-stack-desc { max-width: 92%; line-height: 1.62; }
  .ait-stack-tools { gap: 5px; padding: 10px 0; }
  .ait-stacks-section .section-title { max-width: 86%; }
  /* Card container */
  /* ── Card container ── */
  .ait-tool-card {
    padding: 16px 16px;
    gap: 8px;
  }

  /* Cards slightly closer — avoid floating isolated cards */
  .ait-tools-grid { gap: 14px; }

  /* Details grid — 1 col, tight */
  .ait-tool-details {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px 11px;
    border-color: rgba(255,255,255,0.035);
  }

  /* Section labels — slightly more visible */
  .ait-detail-label {
    margin-bottom: 5px;
    color: #566070;
    letter-spacing: 0.1em;
  }

  /* Bullet points — tighter, slightly dim vs labels */
  .ait-detail-list {
    gap: 3px;
  }

  .ait-detail-list li {
    font-size: 11.5px;
    line-height: 1.38;
    color: #6a7888;
  }

  /* Description — tighter line-height */
  .ait-tool-desc {
    color: #8a9aaa;
    font-size: 13px;
    line-height: 1.62;
  }

  /* Example box — tighter vertically */
  .ait-tool-example {
    padding: 9px 12px;
    font-size: 11px;
  }

  .ait-example-label {
    margin-bottom: 4px;
    color: rgba(0,200,160,0.55);
  }

  /* Section heading breathing room */
  .ait-tool-grid {
    margin-top: 32px;
  }
}

/* ─── 480px — small mobile ─── */
@media (max-width: 480px) {
  .fp-bfa-grid { grid-template-columns: 1fr; }
  .fp-verticals-grid { grid-template-columns: 1fr; }
  .wl-coming-grid { grid-template-columns: 1fr; }
  .sprod-outcome-metric-grid { grid-template-columns: 1fr; }
  .sprod-related-grid { grid-template-columns: 1fr; }
  .ae-footer-nav-cols { grid-template-columns: 1fr; }
  .ae-footer-col-label { margin-bottom: 10px; }
  .ae-footer-nav { gap: 8px; }
  .ae-footer-inner { gap: 28px; }
  .fp-verticals-grid { margin-top: 28px; }
  .ae-ty-download-card .ae-ty-download-btn { width: 100%; justify-content: center; }
  .ae-404-digit { font-size: clamp(72px, 20vw, 96px); }
}

/* ── START HERE CARDS ── */
.sh-card {
  padding: 36px;
  display: flex;
  flex-direction: column;
  background: var(--ink2);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.sh-card:hover {
  background: var(--ink3);
  border-color: rgba(0,200,160,0.28);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}

.sh-card--featured {
  border-color: rgba(0,200,160,0.28);
  background: linear-gradient(160deg, rgba(0,200,160,0.07) 0%, var(--ink2) 60%);
}

.sh-card--featured:hover {
  border-color: rgba(0,200,160,0.5);
  box-shadow: 0 12px 40px rgba(0,200,160,0.12), 0 4px 16px rgba(0,0,0,0.2);
}

/* Best Place to Start label — brighter */
.sh-card--featured .sh-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green);
  letter-spacing: 0.14em;
  margin-bottom: 16px;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.sh-card--featured:hover .sh-label {
  opacity: 1;
  text-shadow: 0 0 12px rgba(0,200,160,0.4);
}

.sh-icon {
  color: var(--green);
  background: rgba(0,200,160,0.07);
  border: 1px solid rgba(0,200,160,0.16);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sh-icon--featured {
  background: rgba(0,200,160,0.13);
  border-color: rgba(0,200,160,0.32);
}

.sh-card:hover .sh-icon {
  background: rgba(0,200,160,0.18);
  border-color: rgba(0,200,160,0.38);
}

/* Descriptions — brighter */
.sh-card .feature-desc {
  color: #b8c2d4;
  flex: 1;
}

/* Button — pushed to bottom consistently via flex, brighter hover glow */
.sh-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 11px 24px;
  font-size: 13px;
  align-self: flex-start;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sh-cta--featured {
  padding: 12px 26px;
  font-size: 14px;
}

.sh-card:hover .sh-cta {
  box-shadow: 0 5px 20px rgba(0,200,160,0.28);
}

.sh-card--featured:hover .sh-cta {
  box-shadow: 0 6px 24px rgba(0,200,160,0.36);
}

/* Mobile: clean stacked spacing */
@media (max-width: 768px) {
  .sh-card { padding: 28px; }
  .sh-cta { margin-top: 20px; }
}

/* ── AI TOOLS TABLE ── */
.ait-table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.ait-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ait-table thead tr {
  border-bottom: 1px solid var(--border);
  background: rgba(0,200,160,0.03);
}

.ait-table th {
  text-align: left;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--green);
  font-weight: 500;
}

.ait-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: default;
}

.ait-row--last { border-bottom: none; }

.ait-row:hover {
  background: rgba(0,200,160,0.04);
  border-bottom-color: rgba(0,200,160,0.18);
}

.ait-row:hover .ait-tool { color: #00e8ba; }

.ait-row:hover .ait-icon { opacity: 1; }

.ait-row--featured {
  background: rgba(0,200,160,0.03);
}

.ait-row--featured:hover {
  background: rgba(0,200,160,0.07);
}

.ait-task {
  padding: 13px 18px;
  color: var(--text);
  font-size: 14px;
  width: 32%;
}

.ait-tool {
  padding: 13px 18px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 12px;
  width: 32%;
  transition: color 0.15s;
}

.ait-tool-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ait-why {
  padding: 13px 18px;
  color: #bcc5d4;
  font-size: 13px;
}

.ait-icon {
  width: 14px;
  height: 14px;
  color: var(--green);
  opacity: 0.7;
  flex-shrink: 0;
}

.ait-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--green);
  background: rgba(0,200,160,0.1);
  border: 1px solid rgba(0,200,160,0.2);
  padding: 2px 7px;
  border-radius: 4px;
}

/* Mobile stacked cards — hidden on desktop */
.ait-mobile { display: none; }

.ait-mobile-row {
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: background 0.15s, border-color 0.15s;
}

.ait-mobile-row:last-child { margin-bottom: 0; }

.ait-mobile-row:hover {
  background: var(--ink3);
  border-color: rgba(0,200,160,0.22);
}

.ait-mobile-row--featured {
  border-color: rgba(0,200,160,0.2);
  background: rgba(0,200,160,0.03);
}

.ait-mobile-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.ait-mobile-task {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}

.ait-mobile-why {
  font-size: 12px;
  color: #a8b2c4;
}

@media (max-width: 768px) {
  .ait-table-wrap { display: none; }
  .ait-mobile { display: block; }
}

/* ── WORKFLOW CARD HOVER ── */
/* ── FREE WORKFLOW PACK SECTION ── */
.fp-pack-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  background: linear-gradient(140deg, #091910 0%, rgba(8,12,18,0.98) 100%);
  border: 1px solid rgba(0,200,160,0.12);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,200,160,0.04);
}

.fp-pack-left,
.fp-pack-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Product identity badge */
.fp-pack-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: rgba(0,200,160,0.55);
  background: rgba(0,200,160,0.05);
  border: 1px solid rgba(0,200,160,0.12);
  border-radius: 100px;
  padding: 5px 14px;
  width: fit-content;
}

.fp-pack-badge-dot {
  width: 5px; height: 5px;
  background: var(--green);
  border-radius: 50%;
  opacity: 0.7;
}

.fp-pack-title {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
}

.fp-pack-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.fp-pack-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 300;
  color: #b8c4d0;
  line-height: 1.72;
}

.fp-pack-check {
  color: var(--green);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.85;
}

/* Asset metadata row */
.fp-pack-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: #4a5668;
  letter-spacing: 0.06em;
}

.fp-pack-meta-sep { color: rgba(0,200,160,0.2); }

/* Compatible-with row — with faint divider above */
.fp-pack-compat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.fp-pack-compat-label {
  color: rgba(0,200,160,0.35);
  margin-right: 2px;
}

.fp-pack-compat-item { color: #5a6878; }
.fp-pack-compat-sep  { color: rgba(255,255,255,0.1); }

/* RIGHT column: includes grid */
.fp-pack-includes {
  background: rgba(0,200,160,0.03);
  border: 1px solid rgba(0,200,160,0.08);
  border-radius: 10px;
  padding: 18px 20px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.fp-pack-includes:hover {
  border-color: rgba(0,200,160,0.14);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.fp-pack-includes-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(0,200,160,0.45);
  margin-bottom: 14px;
}

.fp-pack-includes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.fp-pack-include-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  color: #8090a0;
  line-height: 1.5;
}

.fp-pi-icon {
  color: rgba(0,200,160,0.4);
  font-size: 8px;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Real example box */
.fp-pack-example {
  background: rgba(0,200,160,0.03);
  border: 1px solid rgba(0,200,160,0.08);
  border-radius: 10px;
  padding: 18px 20px;
  transition: border-color 0.22s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease;
}

.fp-pack-example:hover {
  border-color: rgba(0,200,160,0.14);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}

.fp-pack-example-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  color: rgba(0,200,160,0.45);
  margin-bottom: 14px;
}

.fp-pack-example-in,
.fp-pack-example-out {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.fp-pack-example-out { margin-bottom: 0; }

.fp-example-io-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.fp-example-io-in  { color: #4a5668; }
.fp-example-io-out { color: rgba(0,200,160,0.7); }

.fp-example-text {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #8090a0;
  line-height: 1.6;
  margin: 0;
}

.fp-example-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.fp-example-bullets li {
  font-family: var(--mono);
  font-size: 11.5px;
  color: #c0cad8;
  line-height: 1.5;
  display: flex;
  gap: 8px;
}

.fp-ex-dash {
  color: rgba(0,200,160,0.5);
  flex-shrink: 0;
}

.fp-ex-action {
  color: #d8e4ec !important;
  margin-top: 4px;
}

.fp-ex-arrow {
  color: var(--green);
  flex-shrink: 0;
}

.fp-ex-action strong {
  color: #00c8a0;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(0,200,160,0.2);
}

/* Mobile */
@media (max-width: 768px) {
  .fp-pack-card {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 32px;
  }

  .fp-pack-includes-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .fp-pack-example {
    padding: 16px 18px;
  }

  .fp-pack-meta-row {
    flex-wrap: wrap;
  }

  .ae-hero-bar {
    flex-direction: column;
    padding: 12px;
    gap: 10px;
  }

  .ae-hero-input {
    width: 100%;
    padding: 12px 0;
  }

  .ae-hero-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 14px;
  }
}
.wf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 48px;
}

/* ── BUILT FOR ANALYSTS WHO ── */
.fp-bfa-section {
  padding: 64px 0;
}

.fp-bfa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 44px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
}

.fp-bfa-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.22s ease;
}

.fp-bfa-item:nth-child(3n) { border-right: none; }
.fp-bfa-item:nth-child(4),
.fp-bfa-item:nth-child(5),
.fp-bfa-item:nth-child(6) { border-bottom: none; }
.fp-bfa-item:hover { background: rgba(0,200,160,0.03); }

.fp-bfa-icon {
  color: rgba(0,200,160,0.4);
  flex-shrink: 0;
  margin-top: 2px;
  transition: color 0.2s ease;
}

.fp-bfa-item:hover .fp-bfa-icon { color: rgba(0,200,160,0.65); }

.fp-bfa-title {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}

.fp-bfa-desc {
  font-size: 12px;
  font-weight: 300;
  color: #5a6878;
  line-height: 1.65;
}

/* Base card */
.wf-card {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    border-color 0.25s ease,
    transform 0.3s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s ease;
  outline: none;
}

.wf-card--featured {
  border-color: rgba(0,200,160,0.18);
}

/* Per-category accent hover colors */
.wf-card[data-cat="sql"]:hover {
  border-color: rgba(0,200,160,0.32);
  box-shadow: 0 2px 0 rgba(0,200,160,0.08) inset, 0 20px 52px rgba(0,0,0,0.36), 0 0 0 1px rgba(0,200,160,0.08), 0 0 36px rgba(0,200,160,0.05);
}
.wf-card[data-cat="reporting"]:hover {
  border-color: rgba(80,200,200,0.28);
  box-shadow: 0 2px 0 rgba(80,200,200,0.07) inset, 0 20px 52px rgba(0,0,0,0.36), 0 0 0 1px rgba(80,200,200,0.07), 0 0 36px rgba(80,200,200,0.04);
}
.wf-card[data-cat="dashboards"]:hover {
  border-color: rgba(80,140,220,0.28);
  box-shadow: 0 2px 0 rgba(80,140,220,0.07) inset, 0 20px 52px rgba(0,0,0,0.36), 0 0 0 1px rgba(80,140,220,0.07), 0 0 36px rgba(80,140,220,0.04);
}
.wf-card[data-cat="automation"]:hover {
  border-color: rgba(0,180,120,0.28);
  box-shadow: 0 2px 0 rgba(0,180,120,0.07) inset, 0 20px 52px rgba(0,0,0,0.36), 0 0 0 1px rgba(0,180,120,0.07), 0 0 36px rgba(0,180,120,0.04);
}

.wf-card:hover,
.wf-card:focus-visible {
  transform: translateY(-4px);
}

/* Keyboard focus state */
.wf-card:focus-visible {
  border-color: rgba(0,200,160,0.5);
  box-shadow: 0 0 0 3px rgba(0,200,160,0.12), 0 16px 44px rgba(0,0,0,0.32);
}

/* Per-category tag colors */
.wf-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  color: rgba(0,200,160,0.6);
  background: rgba(0,200,160,0.07);
  border: 1px solid rgba(0,200,160,0.15);
  border-radius: 4px;
  padding: 3px 9px;
  display: inline-block;
  width: fit-content;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.wf-card[data-cat="reporting"] .wf-tag {
  color: rgba(0,210,175,0.65);
  background: rgba(0,210,175,0.06);
  border-color: rgba(0,210,175,0.14);
}
.wf-card[data-cat="dashboards"] .wf-tag {
  color: rgba(0,195,165,0.6);
  background: rgba(0,195,165,0.05);
  border-color: rgba(0,195,165,0.13);
}
.wf-card[data-cat="automation"] .wf-tag {
  color: rgba(0,220,160,0.65);
  background: rgba(0,220,160,0.06);
  border-color: rgba(0,220,160,0.14);
}

.wf-card:hover .wf-tag,
.wf-card:focus-visible .wf-tag {
  color: var(--green);
  background: rgba(0,200,160,0.1);
  border-color: rgba(0,200,160,0.25);
}

.wf-title {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  transition: color 0.2s ease;
}

.wf-card:hover .wf-title { color: #ddeedd; }

.wf-desc {
  font-size: 13px;
  font-weight: 300;
  color: #8a98a8;
  line-height: 1.65;
  margin: 0;
}

/* IN / OUT panel */
.wf-io {
  background: rgba(0,200,160,0.03);
  border: 1px solid rgba(0,200,160,0.09);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  flex: 1;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.wf-card:hover .wf-io {
  transform: translateY(-1px);
  border-color: rgba(0,200,160,0.14);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.wf-io-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wf-io-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  min-width: 24px;
  padding-top: 2px;
  flex-shrink: 0;
}

.wf-io-label--in  { color: #5a6878; }
.wf-io-label--out { color: var(--green); opacity: 0.9; transition: opacity 0.2s ease; }

.wf-card:hover .wf-io-label--out { opacity: 1; }

.wf-io-text {
  font-family: 'DM Mono', 'Fira Code', var(--mono);
  font-size: 11.5px;
  color: #8090a0;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.wf-io-text--out {
  color: #dce4ee;
  font-weight: 500;
  font-family: 'DM Mono', 'Fira Code', var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  transition: color 0.22s ease, text-shadow 0.22s ease;
}

.wf-card:hover .wf-io-text--out {
  color: #e8f0ea;
  text-shadow: 0 0 16px rgba(0,200,160,0.14);
}

.wf-io-divider {
  height: 1px;
  background: rgba(255,255,255,0.04);
  margin: 2px 0;
}

/* Time-saved metadata */
.wf-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(0,200,160,0.45);
  letter-spacing: 0.05em;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 4px;
  transition: color 0.2s ease;
}

.wf-card:hover .wf-meta {
  color: rgba(0,200,160,0.7);
}

/* Entire card is clickable — cursor hint */
.wf-card[data-href] {
  cursor: pointer;
}

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

  .wf-card {
    padding: 22px 20px;
  }

  .wf-io {
    padding: 10px 12px;
  }

  .wf-io-text,
  .wf-io-text--out {
    font-size: 11px;
  }

  .wf-title {
    font-size: 16px;
  }
}

/* ── SINGLE POST (single.php) ── */

/* On single posts, sp-title overrides entry-title */
body.single-post .sp-title,
body.single-post h1.entry-title,
body.single .sp-title,
body.single h1.entry-title,
.sp-hero-inner h1,
.sp-hero-inner h1.entry-title,
.sp-hero-inner .sp-title {
  font-size: 29px !important;
  line-height: 1.13 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 12px !important;
}

/* Hide the duplicate title that Gutenberg/WP renders as first content block */
.sp-entry-body > h1:first-child,
.sp-entry-body > .wp-block-post-title,
.sp-entry-body .entry-title {
  display: none !important;
}
body.single .page-wrapper,
body.single .page-template-default .page-wrapper,
body.single > .container > nav,
body.single #content > nav.post-navigation {
  display: none !important;
}

/* Hero */
.sp-hero {
  position: relative;
  padding: 52px 0 28px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* Pull the article hero up behind the (transparent-at-top) navbar so no bare
   --ink strip shows on desktop/tablet. padding-top = navbar height + original 52px
   keeps the article content in exactly the same place. Mobile (<=600px) keeps a
   solid navbar, so it needs no pull-up. */
@media (min-width: 769px) {
  .sp-hero { margin-top: -61px; padding-top: 113px; }
}
@media (min-width: 601px) and (max-width: 768px) {
  .sp-hero { margin-top: -73px; padding-top: 125px; }
}

.sp-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
  z-index: 0;
}

.sp-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 80% at 30% 50%, black 20%, transparent 100%);
  opacity: 0.32;
}

.sp-hero-glow {
  position: absolute;
  top: -10%; left: -5%;
  width: 500px; height: 400px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.sp-hero-inner {
  position: relative; z-index: 1;
  max-width: 720px;
}

/* Breadcrumb — editorial pathway, not just nav */
.sp-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px;
  color: #4a5668; letter-spacing: 0.1em;
  margin-bottom: 18px;
}

.sp-bc-link {
  color: #4a5668; text-decoration: none;
  transition: color 0.18s ease;
}

.sp-bc-link:hover { color: rgba(0,200,160,0.7); }
.sp-bc-sep { color: rgba(255,255,255,0.1); }

/* Article title */
.sp-title {
  font-family: 'Syne', sans-serif;
  font-size: 29px !important;
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 14px;
  max-width: 660px;
}

/* Meta row */
.sp-meta-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 7px;
}

.sp-meta-dot { color: rgba(0,200,160,0.35); font-size: 10px; }

/* Meta row groups — inline on desktop, stacked on mobile */
.sp-meta-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sp-meta-item {
  font-family: var(--mono); font-size: 10px;
  color: #6a7888; letter-spacing: 0.06em;
  transition: color 0.18s ease;
}

.sp-meta-item:hover { color: #96a2b4; }

/* ── LAYOUT ── */
.sp-layout {
  position: relative; z-index: 1;
  padding: 28px 0 60px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

@media (max-width: 768px) {
  .sp-layout { padding: 24px 0 48px; }
}

/* Critical: explicit grid with overflow control */
.sp-layout-inner {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 52px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── CONTENT ── */
.sp-content { min-width: 0; overflow: hidden; }

.sp-thumb {
  margin-bottom: 52px;
  border-radius: 20px;
  overflow: hidden;
  max-height: 420px;
  border: 1px solid rgba(0,200,160,0.08);
  box-shadow:
    0 0 0 1px rgba(0,200,160,0.04),
    0 24px 64px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.3),
    0 0 80px rgba(0,200,160,0.05);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(0,200,160,0.05) 0%, transparent 70%);
}

.sp-thumb-img {
  width: 100%; height: auto; display: block;
  border-radius: 20px;
}

.sp-thumb:hover {
  box-shadow:
    0 0 0 1px rgba(0,200,160,0.12),
    0 32px 80px rgba(0,0,0,0.65),
    0 12px 32px rgba(0,0,0,0.35),
    0 0 100px rgba(0,200,160,0.08);
  transform: translateY(-2px);
}

.sp-thumb-img { width: 100%; height: auto; display: block; }

.sp-entry-body {
  font-size: 17px;
  font-weight: 300;
  color: var(--text);
  line-height: 1.95;
  max-width: 700px;
}

.sp-entry-body p { margin-bottom: 26px; color: #d4dbe8; }

.sp-entry-body h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 80px 0 18px;
  line-height: 1.2;
  scroll-margin-top: 88px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
}

.sp-entry-body h2::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 48px; height: 2px;
  background: var(--green);
  opacity: 0.7;
}

.sp-entry-body h3 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 40px 0 12px;
  line-height: 1.3;
  scroll-margin-top: 88px;
}

.sp-entry-body h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--green);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 28px 0 8px;
}

.sp-entry-body strong { color: var(--text); font-weight: 600; }
.sp-entry-body em { color: #d0d8e8; }

.sp-entry-body a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: rgba(0,200,160,0.35);
  transition: text-decoration-color 0.2s;
}
.sp-entry-body a:hover { text-decoration-color: var(--green); }

.sp-entry-body ul,
.sp-entry-body ol {
  margin: 0 0 22px 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-entry-body ul li,
.sp-entry-body ol li {
  font-size: 16px; color: #c8d2e0;
  line-height: 1.75; padding-left: 20px;
  position: relative;
}

/* Table styling */
.sp-entry-body table {
  width: 100%; border-collapse: collapse;
  margin: 32px 0; font-size: 14px;
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.sp-entry-body table th {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green); background: rgba(0,200,160,0.06);
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.sp-entry-body table td {
  padding: 11px 16px; color: #c0cad8;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  line-height: 1.5;
}
.sp-entry-body table tr:last-child td { border-bottom: none; }
.sp-entry-body table tr:hover td { background: rgba(0,200,160,0.03); }

.sp-entry-body ul li::before {
  content: '—'; position: absolute; left: 0;
  color: var(--green); opacity: 0.6; font-size: 13px;
}

.sp-entry-body ol { counter-reset: sp-ol; }
.sp-entry-body ol li { counter-increment: sp-ol; }
.sp-entry-body ol li::before {
  content: counter(sp-ol); position: absolute; left: 0;
  color: var(--green); font-family: var(--mono);
  font-size: 11px; font-weight: 600; opacity: 0.8;
}

.sp-entry-body code {
  font-family: var(--mono); font-size: 13px;
  background: var(--ink2); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 4px; color: var(--green);
}

.sp-entry-body pre {
  background: var(--ink2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  padding: 22px 24px; overflow-x: auto; margin: 28px 0;
}

.sp-entry-body pre code {
  background: none; border: none; padding: 0;
  color: #b8c2d4; font-size: 13px; line-height: 1.7;
}

.sp-entry-body blockquote {
  background: rgba(0,200,160,0.04);
  border: 1px solid rgba(0,200,160,0.14);
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px; margin: 28px 0;
  color: #c0c8d8; font-size: 15px; line-height: 1.75; font-style: italic;
}
.sp-entry-body blockquote p { margin: 0; color: inherit; }

.sp-entry-body hr {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
  margin: 44px 0;
}

/* Special blocks — handled by .ae-block system below */

/* Tags */
.sp-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--border);
}

.sp-tag {
  font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: 0.1em;
  text-decoration: none; background: var(--ink2);
  border: 1px solid var(--border);
  padding: 4px 12px; border-radius: 4px;
  transition: color 0.2s, border-color 0.2s;
}
.sp-tag:hover { color: var(--green); border-color: rgba(0,200,160,0.3); }

/* Post nav */
.sp-post-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-top: 40px;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.05);
}
.sp-post-nav-next { text-align: right; }
.sp-nav-dir {
  display: block; font-family: var(--mono); font-size: 9px;
  color: #4a5668; letter-spacing: 0.12em; margin-bottom: 4px;
}
.sp-post-nav a {
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
  color: #8090a0; text-decoration: none;
  letter-spacing: -0.01em; line-height: 1.3;
  transition: color 0.18s ease;
}
.sp-post-nav a:hover { color: var(--text); }

/* ── SIDEBAR ── */
.sp-sidebar {
  position: sticky;
  top: 78px; /* sit just below the compact fixed navbar (~61px) */
  display: flex; flex-direction: column; gap: 28px;
  max-width: 310px;
  width: 100%;
  align-self: start;
  animation: sidebar-fade-in 0.5s ease 0.3s both;
}

@keyframes sidebar-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sp-toc {
  background: rgba(10,14,20,0.98);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 16px 18px;
}

/* Inline TOC — mobile only, hidden on desktop */
.sp-toc--inline {
  display: none;
  margin: 32px 0 40px;
  background: rgba(8,12,18,0.6);
  border-color: rgba(255,255,255,0.07);
}

@media (max-width: 768px) {
  .sp-toc--inline { display: block; }
}
.sp-toc-label {
  font-family: var(--mono); font-size: 9px;
  color: rgba(0,200,160,0.62); letter-spacing: 0.16em;
  margin-bottom: 4px;
}
.sp-toc-label::after {
  content: 'Jump to a section';
  display: block;
  font-size: 9px;
  color: #4a5668;
  letter-spacing: 0.04em;
  font-weight: 300;
  margin-top: 3px;
  text-transform: none;
}
.sp-toc-nav { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.sp-toc-nav a {
  font-size: 12px; font-weight: 400; color: #8494a4;
  text-decoration: none; padding: 5px 8px; border-radius: 4px;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  line-height: 1.5;
}
.sp-toc-nav a:hover {
  color: #9aabb8; border-left-color: rgba(0,200,160,0.3);
  background: rgba(0,200,160,0.03);
}
.sp-toc-nav a.active {
  color: #00c8a0; font-weight: 600;
  border-left-color: rgba(0,200,160,0.6);
  background: rgba(0,200,160,0.05);
  text-shadow: 0 0 12px rgba(0,200,160,0.2);
}
.sp-toc-nav a.sp-toc-h3 { padding-left: 18px; font-size: 11px; color: #728290; }
.sp-toc-nav a.sp-toc-h3.active { color: #00c8a0; }

.sp-author-card {
  background: rgba(10,14,20,0.3);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px; padding: 14px 16px;
  transition: border-color 0.22s ease;
}
.sp-author-card:hover {
  border-color: rgba(0,200,160,0.15);
}
.sp-ac-label {
  font-family: var(--mono); font-size: 9px;
  color: rgba(0,200,160,0.45);
  letter-spacing: 0.16em; margin-bottom: 8px;
}
.sp-ac-name {
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--text); margin-bottom: 7px; letter-spacing: -0.01em;
}
.sp-ac-bio {
  font-size: 11.5px; font-weight: 300; color: #5a6878;
  line-height: 1.6; margin-bottom: 10px;
}
.sp-ac-link {
  font-family: var(--mono); font-size: 10.5px; color: rgba(0,200,160,0.6);
  text-decoration: none; letter-spacing: 0.06em;
  transition: color 0.18s ease;
}
.sp-ac-link:hover { color: var(--green); }

.sp-sidebar-cta {
  background: linear-gradient(135deg, #091910 0%, rgba(13,21,32,0.85) 100%);
  border: 1px solid rgba(0,200,160,0.13);
  border-radius: 10px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}

/* Inline CTA bar — mobile only */
.sp-inline-cta-bar {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 10px 0;
  display: none;
}

@media (max-width: 768px) {
  .sp-inline-cta-bar { display: block; }
}

/* Related guides in main content flow */
.sp-related--inline {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Footer links — slightly brighter on mobile */
@media (max-width: 768px) {
  .ae-footer-nav a { color: #6a7888 !important; }
  .ae-footer-brand-tagline,
  .ae-footer-brand-desc { color: #5a6878 !important; }
}

/* Inline contextual mention — minimal, non-interruptive */
.sp-sidebar-cta--inline {
  background: transparent;
  border: none;
  border-left: 2px solid rgba(0,200,160,0.25);
  border-radius: 0;
  padding: 8px 14px;
  gap: 4px;
}

.sp-sc-inline-inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.sp-sc-inline-label {
  font-family: var(--mono);
  font-size: 8.5px;
  color: rgba(0,200,160,0.55);
  letter-spacing: 0.14em;
  white-space: nowrap;
  flex-shrink: 0;
}

.sp-sc-inline-text {
  font-family: var(--mono);
  font-size: 11px;
  color: #6a7888;
  line-height: 1.4;
  font-weight: 400;
}

.sp-sc-inline-link {
  color: rgba(0,200,160,0.78) !important;
  text-decoration: none !important;
  transition: color 0.18s ease;
  font-weight: 500;
}

.sp-sc-inline-link:hover {
  color: var(--green) !important;
}
.sp-sc-label {
  font-family: var(--mono); font-size: 9px;
  color: rgba(0,200,160,0.5);
  letter-spacing: 0.16em;
}
.sp-sc-title {
  font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 800;
  color: var(--text); line-height: 1.15; letter-spacing: -0.02em;
}
.sp-sc-body {
  font-size: 11.5px; font-weight: 300; color: #5a6878; line-height: 1.6; margin: 0;
}

/* Sidebar ae-hero-bar override — stacked layout to fit narrow column */
.sp-sc-bar {
  flex-direction: column;
  padding: 7px;
  gap: 6px;
  border-radius: 10px;
}

.sp-sc-bar .ae-hero-input {
  padding: 10px 12px;
  font-size: 13px;
  width: 100%;
}

.sp-sc-bar .ae-hero-btn {
  width: 100%;
  text-align: center;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 7px;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sp-sc-bar .ae-hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,200,160,0.35), 0 0 0 1px rgba(0,200,160,0.2);
}

.sp-sc-bar .ae-hero-btn .btn-arrow,
.sp-sc-bar .ae-hero-btn::after {
  display: inline-block;
  transition: transform 0.2s ease;
}

.sp-sc-bar .ae-hero-btn:hover .btn-arrow,
.sp-sc-bar .ae-hero-btn:hover::after {
  transform: translateX(3px);
}

.sp-sc-title em { font-style: normal; color: var(--green); }

.sp-sc-msg { font-family: var(--mono); font-size: 11px; text-align: center; min-height: 0; margin-top: 4px; }

.sp-related {
  background: rgba(10,14,20,0.5);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 0;
}
.sp-rel-label {
  font-family: var(--mono); font-size: 9px; color: rgba(0,200,160,0.55);
  letter-spacing: 0.16em; margin-bottom: 14px;
}
.sp-rel-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  text-decoration: none; transition: opacity 0.2s, transform 0.2s ease;
}
.sp-rel-item:last-child { border-bottom: none; padding-bottom: 0; }
.sp-rel-item:first-of-type { padding-top: 0; }
.sp-rel-item:hover { opacity: 1; transform: translateX(3px); }
.sp-rel-item:hover .sp-rel-title { color: #a8b8c4; }
.sp-rel-cat {
  font-family: var(--mono); font-size: 9px; color: rgba(0,200,160,0.5);
  letter-spacing: 0.1em;
}
.sp-rel-title { font-size: 12.5px; font-weight: 400; color: #8a9aaa; line-height: 1.5; transition: color 0.2s ease; }

/* Bottom CTA */
.sp-bottom-cta {
  background: var(--ink2);
  padding: 48px 24px 36px;
  position: relative;
  scroll-margin-top: 80px;
}
.sp-bottom-cta::before {
  content: '';
  position: absolute;
  top: -40px; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--ink2));
  pointer-events: none;
}
.sp-bca-inner { max-width: 600px; margin: 0 auto; text-align: center; }

/* ── READING PROGRESS BAR ── */
.sp-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: var(--green);
  z-index: 99999;
  transition: width 0.1s linear;
  opacity: 0.9;
  box-shadow: 0 0 8px rgba(0,200,160,0.6), 0 0 2px rgba(0,200,160,0.8);
}

/* When WP admin bar is present, shift progress bar below it */
.admin-bar .sp-progress {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .sp-progress { top: 46px; }
}

/* Reduce hero top padding when admin bar is present (adds 32px to html) */
.admin-bar .wl-hero  { padding-top: 24px; }
.admin-bar .ait-hero { padding-top: 24px; }
.admin-bar .sprod-hero { padding-top: 20px; }
.admin-bar .hero     { padding-top: 64px; }
.admin-bar .ae-cart-wrap,
.admin-bar .ae-checkout-wrap { padding-top: 52px; }
.ae-checkout-hero-section.ait-hero { padding: 18px 0 14px; }
/* Mobile: clear the fixed ~72px navbar so the "// Systems Access" badge isn't hidden */
@media (max-width: 768px) {
  .ae-checkout-hero-section.ait-hero { padding-top: 88px; }
}

/* Editorial sections — slightly narrower than hero on mobile */
@media (max-width: 768px) {
  .ait-positioning > .container,
  .ait-tools-section > .container,
  .ait-stacks-section > .container,
  .ait-chains-section > .container { padding: 0 20px !important; }
}
/* Empty cart hero — slightly tighter than browsing pages */
.ae-cart-hero-section.ait-hero { padding: 44px 0 30px; }
/* Mobile: clear the fixed ~72px navbar so the "// Workflow Access" badge isn't hidden */
@media (max-width: 768px) {
  .ae-cart-hero-section.ait-hero { padding-top: 88px; }
}
.admin-bar .ae-checkout-header { padding-top: 28px; }

/* ── HERO WIDTH REFINEMENT ── */
/* ── OPERATIONAL CONTENT BLOCKS ── */

/* ── SHARED BLOCK BASE ── */
.ae-block {
  position: relative;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 40px 0;
  overflow: hidden;
}

.ae-block-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ae-block-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.12;
}

/* ── OPERATIONAL TAKEAWAY ── */
/* Usage: <div class="ae-block ae-takeaway"><div class="ae-block-label">Operational Takeaway</div>...</div> */
.ae-takeaway {
  background: linear-gradient(160deg, #0a1c14 0%, #0c1520 100%);
  border: 1px solid rgba(0,200,160,0.2);
  border-left: 3px solid var(--green);
}

.ae-takeaway .ae-block-label { color: var(--green); }

.ae-takeaway p,
.ae-takeaway .ae-takeaway-body {
  font-size: 15.5px;
  font-weight: 400;
  color: #d4dce8;
  line-height: 1.78;
  margin: 0;
}

/* ── WORKFLOW CHAIN ── */
/* Usage: <div class="ae-block ae-workflow">
     <div class="ae-block-label">Workflow Chain</div>
     <div class="ae-workflow-steps">
       <div class="ae-workflow-step"><span class="ae-ws-num">01</span><div><p class="ae-ws-title">Step</p><p class="ae-ws-desc">Description</p></div></div>
     </div>
   </div> */
.ae-workflow {
  background: var(--ink2);
  border: 1px solid var(--border);
}

.ae-workflow .ae-block-label { color: var(--muted); }

.ae-workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ae-workflow-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
}

.ae-workflow-step:last-child { border-bottom: none; padding-bottom: 0; }
.ae-workflow-step:first-child { padding-top: 0; }

/* Connector line between steps */
.ae-workflow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 28px;
  bottom: -12px;
  width: 1px;
  background: rgba(0,200,160,0.2);
}

.ae-ws-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green);
  opacity: 0.75;
  min-width: 20px;
  margin-top: 3px;
  flex-shrink: 0;
}

.ae-ws-content { flex: 1; }

.ae-ws-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 3px;
  line-height: 1.35;
}

.ae-ws-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ── WORKFLOW CHAIN — VERTICAL FLOW STYLE ── */
/* Directional flow chain: Step → Step → Step */
.ae-flow {
  background: var(--ink2);
  border: 1px solid var(--border);
}

.ae-flow .ae-block-label { color: var(--muted); }

.ae-flow-chain {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ae-flow-node {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 6px;
}

.ae-flow-node-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.04em;
  flex: 1;
}

.ae-flow-node-tag {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--green);
  letter-spacing: 0.12em;
  opacity: 0.75;
  text-transform: uppercase;
}

.ae-flow-arrow {
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(0,200,160,0.3);
  margin-bottom: 6px;
  line-height: 1;
}

.ae-flow-node:last-child { margin-bottom: 0; }

/* ── FAILURE MODES ── */
.ae-failure {
  background: rgba(180,50,50,0.05);
  border: 1px solid rgba(180,60,60,0.16);
  border-left: 3px solid rgba(200,80,80,0.45);
}

.ae-failure .ae-block-label { color: rgba(220,100,100,0.7); }

.ae-failure p { color: #c8b8b8; font-size: 14.5px; line-height: 1.72; margin: 0; }

/* ── KEY PRINCIPLES ── */
.ae-principles {
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
}

.ae-principles .ae-block-label { color: var(--muted); }

.ae-principles-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ae-principles-list li {
  font-size: 14.5px;
  font-weight: 300;
  color: #ccd4e2;
  line-height: 1.65;
  padding-left: 20px;
  position: relative;
}

.ae-principles-list li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--green); opacity: 0.55;
  font-size: 12px; top: 1px;
}

/* ── SYSTEM ARCHITECTURE / LAYER DIAGRAM ── */
.ae-architecture {
  background: var(--ink2);
  border: 1px solid var(--border);
}

.ae-architecture .ae-block-label { color: var(--muted); }

.ae-layer-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ae-layer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  transition: border-color 0.15s;
}

.ae-layer:hover { border-color: rgba(0,200,160,0.18); }

.ae-layer-num {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--green);
  opacity: 0.6;
  min-width: 16px;
  letter-spacing: 0.08em;
}

.ae-layer-name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  letter-spacing: 0.03em;
}

.ae-layer-desc {
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
  text-align: right;
  max-width: 180px;
}

/* ── IMPLEMENTATION NOTE ── */
.ae-note {
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-left: 2px solid rgba(0,200,160,0.3);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 28px 0;
}

.ae-note p {
  font-size: 13.5px;
  color: #9aa4b4;
  line-height: 1.65;
  margin: 0;
  font-style: italic;
}

/* ── DIAGRAM PLACEHOLDER ── */
.ae-diagram {
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  margin: 40px 0;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ae-diagram-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--green);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Mobile refinements for framework blocks */
@media (max-width: 600px) {
  .ae-block { padding: 18px 20px; margin: 30px 0; }
  .ae-layer-desc { display: none; }
  .ae-flow-node { flex-wrap: wrap; }
}

/* ── MOBILE TOC — collapsible ── */
.sp-toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  width: 100%;
  margin-bottom: 12px;
}

.sp-toc-toggle .sp-toc-label {
  margin-bottom: 0;
  pointer-events: none;
}

.sp-toc-toggle-icon {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green);
  transition: transform 0.2s;
  opacity: 0.7;
  /* Only show on mobile — desktop TOC is always open */
  display: none;
}

.sp-toc.collapsed .sp-toc-toggle-icon { transform: rotate(-90deg); }
.sp-toc.collapsed .sp-toc-nav { display: none; }

/* Responsive */
@media (max-width: 768px) {
  .sp-layout-inner { grid-template-columns: 1fr; gap: 36px; }
  .sp-sidebar { position: static; top: auto; max-width: 100%; max-height: none; overflow: visible; display: none; }
  .sp-toc { display: block; }
  .sp-toc-toggle { cursor: pointer; }
  .sp-toc-toggle-icon { display: inline; }
}

@media (max-width: 600px) {
  /* ── 1. EDITORIAL NAV — hidden on mobile article pages ── */
  body.single-post #editorial-nav { display: none !important; }
  body.single-post { padding-top: 73px; }

  /* ── 1. HERO — slightly smaller title for editorial balance ── */
  .sp-hero { padding: 28px 0 20px; }
  .sp-hero > .container,
  .sp-hero-inner { padding: 0 20px; }
  .sp-title,
  .sp-hero-inner h1,
  .sp-hero-inner .sp-title {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.12;
    letter-spacing: -0.025em;
  }
  .sp-breadcrumb { margin-bottom: 12px; }

  /* ── 2. HERO METADATA — clean two-row layout ── */
  .sp-meta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-bottom: 12px;
  }
  .sp-meta-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* ── 2. MINI CTA — subtle editorial note ── */
  .sp-inline-cta-bar { padding: 6px 0; }
  .sp-sidebar-cta--inline { padding: 8px 12px; gap: 3px; border-left-width: 1px; align-items: center; }
  .sp-sc-inline-inner { gap: 6px; }
  .sp-sc-inline-label { font-size: 8px; letter-spacing: 0.12em; }
  .sp-sc-inline-text { font-size: 10.5px; letter-spacing: -0.01em; }

  /* ── 3. INLINE TOC — collapsed by default ── */
  .sp-layout { padding: 20px 0 40px; }
  .sp-layout-inner { padding: 0 20px; gap: 28px; }
  .sp-toc--inline { padding: 11px 14px; }
  .sp-toc--inline .sp-toc-nav { display: none; }
  .sp-toc--inline.is-open .sp-toc-nav { display: flex; }
  .sp-toc-toggle-icon { display: inline !important; }
  .sp-toc--inline .sp-toc-nav a { padding: 4px 8px; }

  /* ── 4. BODY TEXT ── */
  .sp-entry-body { font-size: 16px; line-height: 1.86; max-width: 94%; color: #c8d4de; }
  .sp-entry-body p { margin-bottom: 20px; }
  .sp-entry-body h2 { font-size: 17px; margin: 48px 0 14px; padding-top: 16px; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; }
  .sp-entry-body h3 { font-size: 15px; margin: 34px 0 10px; }
  .sp-entry-body pre { padding: 14px 16px; font-size: 12px; overflow-x: auto; }

  /* ── 5. SHARE BUTTONS — equal 2-col grid ── */
  .sp-share {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 8px;
    align-items: center;
    margin: 32px 0 14px;
    padding: 16px 0;
  }
  .sp-share-label { grid-column: 1; white-space: nowrap; }
  .sp-share-btn {
    width: 100%;
    justify-content: center;
    padding: 9px 10px;
    font-size: 11px;
  }

  /* ── 5. CONTINUE READING — more breathing room ── */
  .sp-rel-item { padding: 16px 0; gap: 6px; }
  .sp-rel-label { margin-bottom: 16px; }
  .sp-rel-title { font-size: 13px; line-height: 1.55; }

  /* ── 6. BOTTOM CTA — slightly more vertical rhythm ── */
  .sp-bottom-cta { padding: 36px 20px 32px; }
  .sp-bottom-cta::before { height: 28px; top: -28px; }
  .sp-bca-inner .ae-hero-bar { margin-top: 18px; }

  /* ── 6. SIDEBAR / NAV ── */
  .sp-author-card { display: none; }
  .sp-toc { margin-bottom: 8px; }
  .sp-post-nav { grid-template-columns: 1fr; }
  .sp-post-nav-next { text-align: left; }

  /* ── 7. GENERAL POLISH ── */
  .ae-block { padding: 14px 16px; }
  .sp-entry-body, .sp-content { overflow-wrap: break-word; word-break: break-word; max-width: 100%; }
  .sp-entry-body pre, .sp-entry-body code { overflow-x: auto; max-width: 100%; }
  .sp-entry-body img { max-width: 100% !important; height: auto !important; }
  .sp-tags { margin-top: 24px; padding-top: 18px; }
  .sp-related--inline { margin-top: 18px; padding-top: 18px; }
}


/* ══════════════════════════════════════════════════════
   SINGLE PRODUCT v2 — NEW SECTIONS
══════════════════════════════════════════════════════ */

/* ── HERO v2 — two-column ── */
.sprod-hero--v2 { padding: 20px 0 0; }

.sprod-hero-v2-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 470px;
  gap: 48px;
  align-items: start;
  padding-bottom: 0;
}

.sprod-hero-left { padding: 6px 0 26px; }
.sprod-hero-right { padding-top: 76px; } /* aligns card top with the headline, clearing the breadcrumb + badge stack */

/* Product image */
.sprod-hero-image-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,200,160,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 60px rgba(0,200,160,0.04);
}
.sprod-hero-image {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 360px;
  transition: opacity 0.2s ease;
}
.sprod-gallery-thumbs {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.sprod-gallery-thumb {
  width: 56px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.sprod-gallery-thumb:hover { border-color: rgba(0,200,160,0.4); }
.sprod-gallery-thumb.is-active { border-color: rgba(0,200,160,0.7); }

/* Preview card (no image) */
.sprod-hero-preview-card {
  background: rgba(8,12,18,0.9);
  border: 1px solid rgba(0,200,160,0.12);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.sprod-hpc-tag {
  font-family: var(--mono);
  font-size: 8px;
  color: rgba(0,200,160,0.55);
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.sprod-hpc-title {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #dde8f0;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  line-height: 1.2;
}
.sprod-hpc-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sprod-hpc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(0,200,160,0.05);
  border: 1px solid rgba(0,200,160,0.1);
  border-radius: 7px;
  padding: 8px 10px;
}
.sprod-hpc-num { font-family: var(--mono); font-size: 8px; color: rgba(0,200,160,0.5); }
.sprod-hpc-label { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; color: #c8d8e4; }
.sprod-hpc-arrow { color: rgba(0,200,160,0.3); font-size: 12px; }
.sprod-hpc-meta {
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.45);
  letter-spacing: 0.08em;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 12px;
}

/* ── STATS STRIP ── */
.sprod-stats-strip {
  background: rgba(8,12,18,0.6);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 20px 0;
}
.sprod-stats-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.sprod-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 32px;
}
.sprod-stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #00c8a0;
  letter-spacing: -0.03em;
  line-height: 1;
}
.sprod-stat-label {
  font-family: var(--mono);
  font-size: 9px;
  color: #6a7a88;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sprod-stat-div {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
}

/* ── FEATURE GRID 5-col ── */
.sprod-feature-grid--5 {
  grid-template-columns: repeat(5, 1fr) !important;
}
.sprod-feature-icon {
  font-size: 16px;
  color: rgba(0,200,160,0.6);
  margin-bottom: 8px;
  display: block;
}

/* ── PROCESS FLOW ── */
.sprod-process-flow {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.sprod-process-card {
  background: rgba(8,12,18,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 18px 16px;
  flex: 1;
  min-width: 130px;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.sprod-process-card:hover {
  border-color: rgba(0,200,160,0.2);
  transform: translateY(-2px);
}
.sprod-process-num {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.55);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.sprod-process-title {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #c8d8e4;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.sprod-process-desc {
  font-size: 11px;
  color: #5a6a7a;
  line-height: 1.55;
}
.sprod-process-arrow {
  font-size: 14px;
  color: rgba(0,200,160,0.25);
  padding: 22px 8px 0;
  flex-shrink: 0;
}

/* ── WHO IT'S FOR — cards ── */
.sprod-audience-grid--cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
}
.sprod-audience-card {
  background: rgba(8,12,18,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 20px 18px;
  transition: border-color 0.22s ease;
}
.sprod-audience-card:hover { border-color: rgba(0,200,160,0.18); }
.sprod-audience-icon-lg {
  font-size: 18px;
  color: rgba(0,200,160,0.5);
  margin-bottom: 10px;
}
.sprod-audience-role {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #c8d8e4;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.sprod-audience-desc {
  font-size: 11.5px;
  color: #5a6a7a;
  line-height: 1.55;
}

/* ── BONUS TOOLKIT ── */
.sprod-bonus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.sprod-bonus-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(0,200,160,0.03);
  border: 1px solid rgba(0,200,160,0.08);
  border-radius: 10px;
  padding: 16px 18px;
}
.sprod-bonus-icon {
  font-size: 16px;
  color: rgba(0,200,160,0.55);
  flex-shrink: 0;
  margin-top: 1px;
}
.sprod-bonus-title {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #c8d8e4;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.sprod-bonus-sub {
  font-size: 11.5px;
  color: #5a6a7a;
  line-height: 1.5;
}

/* Mobile early CTA — hidden on desktop, shown in the hero on mobile.
   Uses a.{class} so it outranks .sprod-free-cta's display:block !important. */
a.sprod-hero-mobile-cta { display: none !important; margin-top: 12px; }

/* Mobile-only hero title + concise overview — hidden on desktop */
.sprod-title-mobile { display: none; }
.sprod-overview-mobile { display: none; }

/* ── MOBILE — single-product polish ── */
@media (max-width: 768px) {
  /* 1 · contain the page — no horizontal scroll */
  body.single-product { overflow-x: hidden; }
  body.single-product .container { padding-left: 22px; padding-right: 22px; }
  .sprod-title, .sprod-summary, .sprod-section-body, .sprod-entry-content,
  .sprod-final-cta-title, .sprod-feature-title, .sprod-feature-desc,
  .sprod-bonus-title, .sprod-bonus-sub, .sprod-audience-desc,
  .sprod-outcome-metric-sub, .sprod-tag {
    overflow-wrap: break-word; word-break: break-word;
  }

  /* hero stacks */
  .sprod-hero--v2 { padding-top: 8px; }
  .sprod-hero-v2-inner { grid-template-columns: 1fr; gap: 12px; }
  .sprod-hero-right { padding-top: 0; }
  .sprod-hero-left { padding-bottom: 0; }

  /* 2 · smaller hero title, slightly tighter leading */
  .sprod-title { font-size: clamp(20px, 6vw, 27px); line-height: 1.06; margin: 0 0 6px; }

  /* 3 · tighten hero vertical spacing (description → tags → CTA) */
  .sprod-breadcrumb { margin-bottom: 8px; }
  .sprod-system-badge { margin-bottom: 6px; }
  .sprod-summary { font-size: 15px; margin-bottom: 8px; line-height: 1.55; }
  .sprod-tag-row { gap: 6px; }

  /* 4 · early CTA visible on mobile */
  a.sprod-hero-mobile-cta { display: block !important; }

  /* 2 · reduce + curate tag chips on mobile */
  .sprod-tag--hide-mobile { display: none !important; }
  .sprod-tag { font-size: 9px; padding: 3px 9px; }

  /* 5 · product image + gallery sizing */
  .sprod-hero-image { height: auto; max-height: none; }
  .sprod-gallery-thumbs { flex-wrap: wrap; gap: 6px; padding: 7px; }
  .sprod-gallery-thumb { width: 46px; height: 34px; }

  /* 7 · stats — clean two-row grid; lone final stat spans full width */
  .sprod-stats-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px 8px; justify-content: stretch; }
  .sprod-stat { padding: 0 6px; }
  .sprod-stat-div { display: none; }
  .sprod-stats-inner.sprod-stats-odd .sprod-stat:last-child { grid-column: 1 / -1; }

  /* 6 · pricing card + CTA before the long overview */
  .sprod-panel { order: -1; }
  .sprod-back-link { display: none; }

  /* 8 + 9 · tighter overview typography, less section height */
  .sprod-section-body, .sprod-entry-content { font-size: 13.5px; line-height: 1.7; }
  .sprod-section-body { margin-bottom: 16px; }
  .sprod-section { padding-bottom: 32px; margin-bottom: 32px; }

  /* 5 · keep content clear of the fixed ~72px header on scroll / anchor jumps */
  body.single-product .sprod-section,
  body.single-product .sprod-section-label,
  body.single-product .sprod-stats-strip,
  body.single-product [id] { scroll-margin-top: 88px; }

  /* existing grid stacks (kept) */
  .sprod-feature-grid--5 { grid-template-columns: 1fr 1fr !important; }
  .sprod-process-flow { flex-direction: column; }
  .sprod-process-arrow { padding: 0 0 0 8px; transform: rotate(90deg); }
  .sprod-audience-grid--cards { grid-template-columns: 1fr 1fr !important; }
  .sprod-bonus-grid { grid-template-columns: 1fr; }

  /* 1 · short mobile-only hero title (full title stays in the DOM for SEO) */
  .sprod-title.has-mobile-title .sprod-title-full { display: none; }
  .sprod-title.has-mobile-title .sprod-title-mobile { display: inline; }

  /* 4 · concise mobile overview; hide the long copy + bullet/use-case lists */
  .has-mobile-overview .sprod-overview-full { display: none; }
  .has-mobile-overview .sprod-overview-mobile { display: block; }

  /* 4b · WP-editor overview: keep only the first two paragraphs on mobile */
  body.single-product .ae-product-overview > * { display: none; }
  body.single-product .ae-product-overview > p:nth-of-type(1),
  body.single-product .ae-product-overview > p:nth-of-type(2) { display: block; }

  /* 11 · trim card padding ~12% */
  .sprod-feature-card { padding: 18px 18px; }
  .sprod-bonus-item { padding: 14px 16px; }
  .sprod-panel-card { padding: 17px 18px; }

  /* 3 · more compact pricing card (vertical padding ~20% tighter) */
  .sprod-price-block { padding: 14px 18px 13px; }

  /* 5 · compact "Who It's For" cards (~12% less padding + tighter internals) */
  .sprod-audience-card { padding: 14px 14px; }
  .sprod-audience-icon-lg { margin-bottom: 8px; }
  .sprod-audience-role { margin-bottom: 5px; }

  /* 6 · tighter Bonus Toolkit card spacing */
  .sprod-bonus-grid { gap: 10px; margin-top: 12px; }

  /* hide the redundant "Best For" card on mobile — the Who It's For section covers it */
  .sprod-panel-card--bestfor { display: none; }

  .sprod-outcome-metric { padding: 14px; }
}

@media (max-width: 480px) {
  .sprod-feature-grid--5 { grid-template-columns: 1fr !important; }
  .sprod-audience-grid--cards { grid-template-columns: 1fr !important; }
  .sprod-stats-inner { gap: 18px 6px; }
}

/* ── WOOCOMMERCE SHOP OVERRIDES ── */

/* Products wrap */
/* WooCommerce content wrapper — full width, no columns */
.ae-woo-content {
  display: block;
  width: 100%;
  float: none;
  clear: both;
}

/* ── SYSTEMS CATALOG ── */
.systems-catalog {
  padding: 52px 0 64px;
  /* Break out of any WooCommerce two-column layout */
  width: 100% !important;
  float: none !important;
  clear: both !important;
  display: block !important;
}

.catalog-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: block !important;
  width: 100% !important;
  float: none !important;
}

.catalog-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.catalog-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.catalog-sort {
  flex-shrink: 0;
  contain: layout;
}

/* Sorting dropdown */
.catalog-sort .woocommerce-ordering,
.catalog-sort form.woocommerce-ordering {
  margin: 0 !important;
}

.catalog-sort select {
  background: rgba(10,14,20,0.8) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: #6a7888 !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  padding: 7px 12px !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
}

.catalog-sort select:hover {
  border-color: rgba(0,200,160,0.2) !important;
  color: #96a2b4 !important;
}

@media (max-width: 600px) {
  .catalog-sort select {
    background: rgba(8,12,18,0.92) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 9px !important;
    color: #8a9aaa !important;
    padding: 9px 16px 9px 14px !important;
    display: flex !important;
    align-items: center !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(8px) !important;
  }
  .catalog-sort select:focus,
  .catalog-sort select:active {
    border-color: rgba(0,200,160,0.35) !important;
    color: #b0bece !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0,200,160,0.08), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  }
}

/* ── THE GRID — direct children of catalog-grid are the product cards ── */
.catalog-grid,
.ae-products-grid,
.woocommerce ul.products,
.woocommerce-page ul.products,
.catalog-products ul.products,
.systems-catalog ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

/* Kill WooCommerce clearfix pseudo-elements that break grid */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.ae-products-grid::before,
.ae-products-grid::after {
  display: none !important;
  content: none !important;
}

/* WooCommerce wraps each product in an anchor — make it transparent to layout */
.catalog-grid > a.woocommerce-LoopProduct-link,
.ae-products-grid > a.woocommerce-LoopProduct-link {
  display: contents !important;
}

/* Every product — article or li — fills its grid cell */
.catalog-grid > *,
.ae-products-grid > *,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.systems-catalog ul.products li.product {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* No products message */
.wl-no-products {
  font-family: var(--mono);
  font-size: 12px;
  color: #4a5668;
  letter-spacing: 0.08em;
  padding: 40px 0;
  text-align: center;
}

@media (max-width: 600px) {
  .catalog-header { flex-direction: column; align-items: flex-start; }
  .catalog-grid,
  .ae-products-grid,
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: 1fr !important; }
}

/* Remove WooCommerce's own star ratings from the grid */
.woocommerce ul.products li.product .star-rating { display: none; }

/* ── CART + CHECKOUT PAGES ── */

/* WooCommerce page wrapper — full width, no container/title */
.woo-page-wrap { background: var(--ink); min-height: 70vh; }
.woo-page-wrap .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Checkout full-width: kill every WP/theme wrapper constraint */
body.woocommerce-checkout .woo-page-wrap,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .wp-block-group,
body.woocommerce-checkout .wp-block-group__inner-container,
body.woocommerce-checkout .is-layout-constrained > *,
body.woocommerce-checkout .is-layout-flow > *,
body.woocommerce-checkout .entry-content > * {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Nuke any bare p tags WooCommerce injects around our cart elements */
.woo-page-wrap .entry-content > p:empty,
.woo-page-wrap .entry-content > p:has(> .ae-cart-ecosystem-nav),
.ae-cart-totals-wrap > p {
  all: unset !important;
  display: block !important;
}

/* Nuclear: hide any entry-title or woocommerce page title that slips through */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart h1.page-title,
.woocommerce-checkout h1.page-title { display: none !important; }

/* Product removed notice */
.woocommerce-cart .woocommerce-message {
  background: var(--ink2) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--green) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  padding: 12px 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  margin-bottom: 16px !important;
}

.woocommerce-cart .woocommerce-message a {
  color: var(--green) !important;
  text-decoration: none !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

.woocommerce-cart .woocommerce-message::before { display: none !important; }
.ae-empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 52px 24px 48px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(10,14,20,0.7);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.28s cubic-bezier(0.16,1,0.3,1);
}

.ae-empty-cart:hover {
  border-color: rgba(0,200,160,0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.24), 0 0 0 1px rgba(0,200,160,0.05);
  transform: translateY(-2px);
}

/* Suppress WooCommerce default empty cart notice */
.woocommerce-cart .woocommerce-info,
.ae-cart-wrap .woocommerce-info {
  display: none !important;
}

.ae-empty-cart-icon {
  color: rgba(0,200,160,0.32);
  margin-bottom: 20px;
}

.ae-empty-cart-msg {
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.ae-empty-cart-sub {
  font-size: 14px;
  font-weight: 300;
  color: #6a7888;
  margin: 0 0 28px;
  max-width: 340px;
  line-height: 1.65;
}

.ae-empty-cart-cta {
  display: inline-flex;
  align-items: center;
  background: var(--green);
  color: var(--ink) !important;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: -0.01em;
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
}

.ae-empty-cart-cta:hover {
  background: #14e8b8;
  color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,200,160,0.35);
  text-decoration: none !important;
}
.ae-cart-wrap {
  position: relative;
  z-index: 1;
  padding: 40px 24px 80px;
  background: var(--ink);
  min-height: 40vh;
}

.ae-checkout-wrap {
  position: relative;
  z-index: 1;
  padding: 24px 48px 52px;
  background: var(--ink);
  min-height: 40vh;
}

/* Break checkout out of the 1100px .container constraint */
body.woocommerce-checkout .ae-checkout-wrap .container,
body.woocommerce-checkout .ae-checkout-wrap > .container {
  max-width: 100% !important;
  padding: 0 !important;
}

.ae-cart-inner {
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

.ae-checkout-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* ── CART/CHECKOUT HERO — reuses ait-hero component directly ── */
/* Cart hero uses standard ait-hero padding */
/* Checkout hero is slightly more compact — transactional page */
.ae-checkout-hero-section.ait-hero h1.ait-hero-title {
  font-size: clamp(22px, 2.8vw, 34px) !important;
  line-height: 1.05 !important;
  margin-bottom: 8px !important;
  max-width: 560px;
}

.ae-checkout-hero-section .ait-hero-inner {
  max-width: 580px;
}

/* Checkout header (cart uses ait-hero component instead) */
.ae-checkout-header {
  position: relative;
  padding: 16px 0 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}

.ae-cart-title,
.ae-checkout-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
  margin: 8px 0 10px;
}

.ae-cart-title em,
.ae-checkout-title em { font-style: normal; color: var(--green); }

.ae-cart-sub,
.ae-checkout-sub {
  font-size: 14px;
  font-weight: 300;
  color: #96a2b4;
  line-height: 1.65;
  max-width: 520px;
  margin: 0;
}

/* Line items */
.ae-cart-items {
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 12px;
}

.ae-cart-items-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--green);
  letter-spacing: 0.18em;
  opacity: 0.85;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ae-cart-items-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ae-cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  margin: 0 -14px;
  transition: background 0.18s ease;
}

.ae-cart-item:hover {
  background: rgba(255,255,255,0.02);
}

.ae-cart-item:last-child { border-bottom: none; padding-bottom: 0; }
.ae-cart-item:first-child { padding-top: 0; }

.ae-ci-info { flex: 1; }

.ae-ci-type {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--green);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 4px;
}

.ae-ci-name {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ae-ci-desc {
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 3px;
  opacity: 0.75;
}

/* Hide "Save $X" discount row in WooCommerce totals table */
.ae-cart-totals .cart-discount,
.ae-cart-totals tr.cart-discount,
.ae-order-review .cart-discount,
.ae-order-review tr.cart-discount {
  display: none !important;
}
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.ae-ci-remove-link {
  display: inline-block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: #4a5668 !important;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  transition: color 0.18s ease, letter-spacing 0.18s ease;
}

.ae-ci-remove-link:hover {
  color: rgba(0,200,160,0.75) !important;
  text-decoration: none !important;
  letter-spacing: 0.1em;
}
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.ae-ci-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.ae-ci-price {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.ae-ci-qty {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  opacity: 0.6;
  white-space: nowrap;
}

.ae-ci-remove { flex-shrink: 0; }

/* ── QTY STEPPER ── */
.ae-ci-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.ae-qty-stepper {
  display: flex;
  align-items: stretch;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  width: 98px;
  height: 32px;
}

.ae-qty-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  line-height: 1;
  width: 32px;
  flex: 0 0 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  padding: 0;
}

.ae-qty-btn span {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  display: block;
  color: inherit;
  user-select: none;
}

.ae-qty-btn:hover { color: var(--green); background: rgba(0,200,160,0.07); }

.ae-qty-input {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  height: 32px;
  padding: 0;
  outline: none;
  -moz-appearance: textfield;
}
.ae-qty-input::-webkit-inner-spin-button,
.ae-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.ae-ci-unit-price {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  opacity: 0.55;
}

/* Suppress WooCommerce proceed-to-checkout block — we render our own CTA */
.ae-cart-totals .wc-proceed-to-checkout,
.ae-cart-totals .wc-proceed-to-checkout * {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Remove empty bordered rows WooCommerce injects between cart sections */
.ae-cart-items .cart_item:empty,
.ae-cart-totals .cart_totals > *:empty {
  display: none !important;
}

/* Strip p-tag styling injected around our custom cart elements */
.ae-cart-totals-wrap > p,
.ae-ecosystem-nav-wrap > p {
  all: unset;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  border: none !important;
  background: none !important;
}

/* Suppress default WooCommerce cart notices/empty rows */
.ae-cart-form .cart-empty-message,
.ae-cart-form tr:empty,
.woocommerce-cart-form ~ .cross-sells {
  display: none !important;
}

.ae-remove-item {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.4;
  line-height: 1;
  transition: opacity 0.2s, color 0.2s;
  padding: 4px 6px;
}

.ae-remove-item:hover { opacity: 0.8; color: var(--text); }

/* Coupon — integrated, minimal */
.ae-cart-coupon {
  margin-bottom: 12px;
  padding-top: 2px;
}

.ae-coupon-details { list-style: none; }

.ae-coupon-toggle {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.12em;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ae-coupon-toggle:hover { opacity: 0.75; }

.ae-coupon-inner {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

.ae-coupon-input {
  flex: 1;
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}

.ae-coupon-input:focus { border-color: rgba(0,200,160,0.35); }
.ae-coupon-input::placeholder { color: var(--muted); opacity: 0.5; }

.ae-coupon-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: color 0.2s, border-color 0.2s;
}

.ae-coupon-btn:hover { color: var(--green); border-color: rgba(0,200,160,0.3); }

/* Cart totals */
.ae-cart-totals-wrap { margin-bottom: 20px; }

.ae-cart-totals {
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  overflow: hidden;
}

/* WooCommerce cart_totals override */
.ae-cart-totals .cart_totals h2,
.ae-cart-totals .wc-proceed-to-checkout h2 { display: none; }

.ae-cart-totals table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
}

.ae-cart-totals table.shop_table tr {
  border-bottom: 1px solid var(--border);
}

.ae-cart-totals table.shop_table .order-total {
  border-bottom: none;
}

.ae-cart-totals table.shop_table th,
.ae-cart-totals table.shop_table td {
  padding: 14px 22px !important;
  border: none !important;
  background: transparent !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--muted) !important;
}

.ae-cart-totals table.shop_table th {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  opacity: 0.7 !important;
}

.ae-cart-totals table.shop_table .order-total th,
.ae-cart-totals table.shop_table .order-total td {
  border: none !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.ae-cart-totals table.shop_table .order-total th {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: rgba(0,200,160,0.55) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

.ae-cart-totals table.shop_table .order-total td,
.ae-cart-totals table.shop_table .order-total .amount {
  font-family: 'Syne', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #e8f0f8 !important;
  letter-spacing: -0.03em !important;
}

/* USD label after checkout total only */
.ae-order-review table.shop_table .order-total td::after {
  content: ' USD';
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 0.08em !important;
  vertical-align: middle !important;
  padding-left: 4px !important;
}

/* Proceed to checkout button */
/* Hide WooCommerce's own checkout button — we output our own directly */
.ae-cart-totals .wc-proceed-to-checkout { display: none !important; }

/* Our direct checkout button — connects flush to totals panel */
.ae-checkout-btn-direct {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  height: 52px !important;
  background: rgba(0,200,160,0.1) !important;
  color: var(--green) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid rgba(0,200,160,0.2) !important;
  border-radius: 0 0 12px 12px !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: -0.01em !important;
  transition: background 0.2s !important;
  box-sizing: border-box !important;
  padding: 0 24px !important;
  line-height: 52px !important;
  vertical-align: middle !important;
  text-align: center !important;
}

.ae-checkout-btn-direct:hover {
  background: rgba(0,200,160,0.16) !important;
  color: var(--green) !important;
}

/* Ecosystem nav wrapper — isolates from WooCommerce p-tag injection */
.ae-ecosystem-nav-wrap {
  margin-top: 0;
}

/* Ecosystem navigation panel */
.ae-cart-ecosystem-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 14px;
  padding: 32px 36px;
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(0,200,160,0.04) 0%, transparent 70%),
    rgba(10,14,20,0.8);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  text-decoration: none !important;
  transition:
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease,
    transform 0.24s cubic-bezier(0.16,1,0.3,1);
}

.ae-cart-ecosystem-nav:hover {
  border-color: rgba(0,200,160,0.24);
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(0,200,160,0.07) 0%, transparent 70%),
    rgba(10,14,20,0.9);
  box-shadow: 0 8px 32px rgba(0,0,0,0.24), 0 0 0 1px rgba(0,200,160,0.07);
  transform: translateY(-1px);
  text-decoration: none !important;
}

.ae-cen-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.ae-cen-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: rgba(0,200,160,0.5);
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ae-cen-headline {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 8px;
  text-decoration: none !important;
}

.ae-cen-sub {
  font-size: 13px;
  font-weight: 300;
  color: #6a7888;
  line-height: 1.6;
  max-width: 420px;
  text-decoration: none !important;
}

.ae-cen-cta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(0,200,160,0.65);
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  padding: 10px 14px;
  border: 1px solid rgba(0,200,160,0.2);
  border-radius: 7px;
  background: rgba(0,200,160,0.04);
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.22s cubic-bezier(0.16,1,0.3,1);
  text-decoration: none !important;
}

.ae-cart-ecosystem-nav:hover .ae-cen-cta {
  color: var(--green);
  border-color: rgba(0,200,160,0.4);
  background: rgba(0,200,160,0.08);
  box-shadow: 0 2px 12px rgba(0,200,160,0.12);
  transform: translateY(-1px);
  text-decoration: none !important;
}

@media (max-width: 600px) {
  .ae-cart-ecosystem-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
  }
}

/* Access delivery section */
.ae-cart-delivery {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── MOBILE CART — uniform horizontal container ──
   Every top-level section shares the same left/right edges, WooCommerce
   form/table wrappers lose their default asymmetric margin/padding, and
   nothing is allowed to exceed the viewport. Box-model only — no design,
   color, type, or order changes. */
@media (max-width: 768px) {
  body.woocommerce-cart { overflow-x: hidden; }

  /* equal outer side padding */
  .ae-cart-wrap { padding-left: 20px; padding-right: 20px; }
  .ae-cart-inner {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* all main sections align to the same edges */
  .ae-cart-form,
  .ae-cart-items,
  .ae-cart-totals-wrap,
  .ae-cart-totals,
  .ae-checkout-btn-direct,
  .ae-ecosystem-nav-wrap,
  .ae-cart-ecosystem-nav,
  .ae-cart-delivery,
  .ae-cart-delivery-grid,
  .ae-cart-delivery-item {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .ae-cart-totals-wrap { margin-bottom: 20px; } /* preserve existing vertical rhythm */

  /* strip WooCommerce form/table wrapper default insets */
  .ae-cart-form,
  .woocommerce-cart-form,
  .ae-cart-totals table.shop_table {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* never let a table push past the card */
  .ae-cart-inner table { max-width: 100%; }
}

.ae-cart-delivery-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(0,200,160,0.5);
  margin-bottom: 20px;
}

.ae-cart-delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ae-cart-delivery-item {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color 0.22s ease;
}

.ae-cart-delivery-item:hover { border-color: rgba(0,200,160,0.23); }

.ae-cd-icon {
  display: flex;
  align-items: center;
  height: 20px;
  margin-top: 3px;
  margin-bottom: 7px;
  color: rgba(0,200,160,0.42);
  line-height: 1;
}

.ae-cd-icon svg {
  display: block;
  flex-shrink: 0;
}

.ae-cd-title {
  font-family: 'Syne', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.ae-cd-desc {
  font-size: 12px;
  font-weight: 300;
  color: #5a6878;
  line-height: 1.62;
}

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

/* Cart form (hide WooCommerce's default table layout) */
.ae-cart-form table.woocommerce-cart-form__contents { display: none !important; }

/* Hide empty additional information boxes on checkout */
.ae-checkout-form .woocommerce-additional-fields,
.ae-checkout-form .woocommerce-additional-fields:empty,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_comments_field,
.woocommerce-checkout .notes { display: none !important; }
.ae-checkout-columns {
  display: grid;
  grid-template-columns: 1fr 600px;
  gap: 32px;
  align-items: start;
}

.ae-checkout-left,
.ae-checkout-right {
  display: flex;
  flex-direction: column;
}

@media (min-width: 769px) {
  .ae-checkout-right {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* Ensure both columns start at the same top edge */
.ae-checkout-left > *:first-child,
.ae-checkout-right > *:first-child {
  margin-top: 0 !important;
}

/* Hide WooCommerce's auto-generated "Your order" h3 that sits outside the review box */
.ae-checkout-right > h3,
h3#order_review_heading {
  display: none !important;
}

/* WooCommerce checkout fields styling */
.ae-checkout-form .woocommerce-billing-fields,
.ae-checkout-form .woocommerce-shipping-fields,
.ae-checkout-form .woocommerce-additional-fields {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 32px;
  margin-bottom: 16px;
}

.ae-order-review {
  background: rgba(8,12,18,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: visible;
  margin-top: 0;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.2);
  padding-bottom: 8px;
}

/* Keep top table corners clipped to match the box border-radius */
.ae-order-review table.shop_table thead tr:first-child th:first-child {
  border-top-left-radius: 11px;
}
.ae-order-review table.shop_table thead tr:first-child th:last-child {
  border-top-right-radius: 11px;
}

.ae-checkout-form .woocommerce-billing-fields h3,
.ae-checkout-form .woocommerce-shipping-fields h3 {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: rgba(0,200,160,0.75) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 0 20px !important;
  font-weight: 400 !important;
}

.ae-checkout-form .form-row input,
.ae-checkout-form .form-row select,
.ae-checkout-form .form-row textarea {
  background: rgba(0,0,0,0.2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}

.ae-checkout-form .form-row input:focus,
.ae-checkout-form .form-row select:focus {
  border-color: rgba(0,200,160,0.35) !important;
}

.ae-checkout-form .form-row label {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* More vertical breathing between form groups */
.ae-checkout-form .form-row,
.ae-checkout-form p.form-row {
  margin-bottom: 18px !important;
}

/* Order review in checkout — styled by rule above */

.ae-order-review table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
}

.ae-order-review table.shop_table th,
.ae-order-review table.shop_table td {
  padding: 12px 18px 12px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  background: transparent !important;
}

.ae-order-review table.shop_table th {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  opacity: 0.7 !important;
  text-align: left !important;
}

.ae-order-review table.shop_table th:first-child,
.ae-order-review table.shop_table td:first-child {
  padding-left: 18px !important;
}

.ae-order-review table.shop_table th:last-child,
.ae-order-review table.shop_table td:last-child {
  padding-right: 18px !important;
}

/* Product name — bright; quantity — very dim; prices — slightly muted */
.ae-order-review .product-name a,
.ae-order-review .product-name {
  color: #e8eef4 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
}

.ae-order-review .product-quantity,
.ae-order-review td .product-quantity {
  color: #3d4a58 !important;
  font-size: 11.5px !important;
}

/* Row prices — slightly dimmer than product names */
.ae-order-review td.product-total .woocommerce-Price-amount,
.ae-order-review td.product-total {
  color: #8a9aaa !important;
  font-size: 13px !important;
}

.ae-order-review table.shop_table .order-total {
  border-top: 1px solid rgba(0,200,160,0.22) !important;
}

.ae-order-review table.shop_table .order-total td {
  background: linear-gradient(to right, rgba(0,200,160,0.025), transparent 70%) !important;
}

.ae-order-review table.shop_table .order-total td,
.ae-order-review table.shop_table .order-total .amount {
  font-family: 'Syne', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.025em !important;
}

/* Stripe/payment embed — more padding, visually integrated */
.ae-order-review #payment,
.ae-order-review .woocommerce-checkout-payment {
  padding: 20px 18px 16px !important;
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  margin-top: 4px !important;
}

/* Checkout trust row */
.ae-checkout-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.ae-checkout-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: #4a5668;
  letter-spacing: 0.07em;
  line-height: 1.6;
}

.ae-checkout-trust-item svg {
  flex-shrink: 0;
  opacity: 0.5;
  color: rgba(0,200,160,0.7);
}

/* Place order button wrapper — add side padding */
.ae-order-review .form-row.place-order {
  padding: 0 18px 18px !important;
  margin: 0 !important;
}

/* Place order button */
.ae-checkout-form #place_order {
  background: rgba(0,200,160,0.1) !important;
  color: var(--green) !important;
  border: 1px solid rgba(0,200,160,0.3) !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
  box-shadow: none !important;
  letter-spacing: -0.01em !important;
}

.ae-order-review #place_order:hover {
  background: rgba(0,200,160,0.16) !important;
  border-color: rgba(0,200,160,0.5) !important;
}

/* Payment section */
.ae-checkout-form #payment,
.ae-checkout-form #payment.woocommerce-checkout-payment {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Override WooCommerce default 18px side padding on #payment */
#payment.woocommerce-checkout-payment {
  padding: 4px 0 0 !important;
}

.ae-checkout-form #payment .payment_methods {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Operational metadata */
.ae-cart-meta,
.ae-checkout-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.ae-cart-meta-item {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #5a6878;
  letter-spacing: 0.07em;
  position: relative;
  padding-left: 0;
  line-height: 1.55;
}

.ae-cart-meta-item::before {
  content: none;
}


/* Responsive */
@media (max-width: 720px) {
  .ae-checkout-columns { grid-template-columns: 1fr; }
  .ae-cart-wrap, .ae-checkout-wrap { padding: 60px 20px; }
  .ae-cart-title, .ae-checkout-title { font-size: clamp(26px, 5vw, 36px); }
}

/* ── ORDER CONFIRMATION PAGE ── */
.ae-thankyou-hero { /* compact — transactional confirmation */ }
.ae-thankyou-hero.ait-hero { padding: 36px 0 24px; }
.ae-thankyou-hero h1.ait-hero-title { line-height: 1.02 !important; }

.ae-thankyou-wrap {
  padding: 24px 24px 80px;
  background: var(--ink);
  min-height: 40vh;
}

.ae-thankyou-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Meta row */
.ae-ty-meta {
  display: flex;
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.ae-ty-meta-item {
  flex: 1;
  min-width: 100px;
  padding: 16px 18px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.ae-ty-meta-email { flex: 1.8; }
.ae-ty-meta-item:last-child { border-right: none; }

.ae-ty-meta-label {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0,200,160,0.55);
  margin-bottom: 6px;
}

.ae-ty-meta-value {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}

/* Sections */
.ae-ty-section { margin-bottom: 28px; }

.ae-ty-section-label {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.55);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Download cards */
.ae-ty-download-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ae-ty-download-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(9,25,16,0.6);
  border: 1px solid rgba(0,200,160,0.18);
  border-radius: 12px;
  padding: 26px 24px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.ae-ty-download-card:hover {
  border-color: rgba(0,200,160,0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.ae-ty-dl-icon {
  color: rgba(0,200,160,0.6);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: -2px;
}

.ae-ty-dl-info { flex: 1; }

.ae-ty-dl-name {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.ae-ty-dl-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: #4a5668;
  letter-spacing: 0.06em;
}

.ae-ty-download-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(0,200,160,0.85);
  color: var(--ink) !important;
  border: none;
  border-radius: 7px;
  padding: 10px 18px;
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1);
}

.ae-ty-download-btn:hover {
  background: #14e8b8;
  transform: translateY(-1px);
  color: var(--ink) !important;
}

/* Order details table */
.ae-ty-table-wrap {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden;
}

.ae-ty-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.ae-ty-table th,
.ae-ty-table td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  color: #7a8898;
  text-align: left;
}

.ae-ty-table th {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,200,160,0.5);
  font-weight: 400;
}

.ae-ty-table tr:last-child td,
.ae-ty-table tr:last-child th { border-bottom: none; }

.ae-ty-product-name {
  color: var(--text);
  font-weight: 400;
}

.ae-ty-product-qty {
  color: #3d4a58;
  font-size: 12px;
  margin-left: 4px;
}

.ae-ty-total-row th,
.ae-ty-total-row td {
  font-family: 'Syne', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  border-top: 1px solid rgba(0,200,160,0.2) !important;
  background: rgba(0,200,160,0.025) !important;
}

.ae-ty-next { margin-top: 32px; }

.ae-ty-browse-btn {
  display: inline-block;
  background: transparent;
  color: rgba(0,200,160,0.7) !important;
  border: 1px solid rgba(0,200,160,0.25);
  border-radius: 7px;
  padding: 10px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ae-ty-browse-btn:hover {
  border-color: rgba(0,200,160,0.45);
  color: var(--green) !important;
  background: rgba(0,200,160,0.06);
}


.woocommerce-order p.woocommerce-thankyou-order-received {
  font-family: 'Syne', sans-serif !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 24px !important;
}

/* Order meta row — single horizontal row */
.woocommerce-order ul.woocommerce-order-overview {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  background: var(--ink2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.woocommerce-order ul.woocommerce-order-overview li {
  flex: 1 1 0 !important;
  padding: 14px 16px !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.woocommerce-order ul.woocommerce-order-overview li:last-child {
  border-right: none !important;
}

.woocommerce-order ul.woocommerce-order-overview li strong {
  display: block !important;
  font-family: var(--mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--green) !important;
  font-weight: 400 !important;
  opacity: 0.75 !important;
  margin-bottom: 5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.woocommerce-order ul.woocommerce-order-overview li span,
.woocommerce-order ul.woocommerce-order-overview li a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  color: var(--text) !important;
  text-decoration: none !important;
  word-break: break-all !important;
  display: block !important;
}

/* Collapse ALL spacing between order confirmation sections */
.woocommerce-order > *:not(ul):not(.woocommerce-order-downloads):not(.woocommerce-order-details):not(.woocommerce-customer-details):not(p.woocommerce-thankyou-order-received) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* But keep the order overview visible */
.woocommerce-order ul.woocommerce-order-overview {
  visibility: visible !important;
  height: auto !important;
  font-size: inherit !important;
  line-height: inherit !important;
  overflow: hidden !important;
}

/* Email column — wider so full address shows */
.woocommerce-order ul.woocommerce-order-overview li:nth-child(3) {
  flex: 2 1 0 !important;
}

/* Tighten gap between meta and downloads */
.woocommerce-order .woocommerce-order-downloads,
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
  margin-top: 24px !important;
}

/* Fix total price — prevent $ and amount splitting across lines */
.woocommerce-order ul.woocommerce-order-overview .woocommerce-Price-amount,
.woocommerce-order ul.woocommerce-order-overview .woocommerce-Price-currencySymbol {
  display: inline !important;
  white-space: nowrap !important;
}

.woocommerce-order ul.woocommerce-order-overview li span.woocommerce-Price-amount {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}

.woocommerce-order ul.woocommerce-order-overview li strong {
  display: block !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--green) !important;
  font-weight: 400 !important;
  opacity: 0.85 !important;
  margin-bottom: 6px !important;
}

.woocommerce-order ul.woocommerce-order-overview li span,
.woocommerce-order ul.woocommerce-order-overview li a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

/* Downloads section */
.woocommerce-order .woocommerce-order-downloads h2,
.woocommerce-order .woocommerce-order-details h2,
.woocommerce-order .woocommerce-customer-details h2 {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--green) !important;
  font-weight: 400 !important;
  opacity: 0.85 !important;
  margin: 32px 0 12px !important;
}

.woocommerce-order table.woocommerce-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--ink2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.woocommerce-order table.woocommerce-table th,
.woocommerce-order table.woocommerce-table td {
  padding: 12px 18px !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  background: transparent !important;
  text-align: left !important;
}

.woocommerce-order table.woocommerce-table th {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.7 !important;
}

.woocommerce-order table.woocommerce-table tr:last-child td,
.woocommerce-order table.woocommerce-table tr:last-child th {
  border-bottom: none !important;
}

.woocommerce-order table.woocommerce-table a {
  color: var(--green) !important;
  text-decoration: none !important;
}

/* Download button */
.woocommerce-order .woocommerce-MyAccount-downloads-file,
.woocommerce-order table .woocommerce-MyAccount-downloads-file {
  background: rgba(0,200,160,0.1) !important;
  color: var(--green) !important;
  border: 1px solid rgba(0,200,160,0.3) !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background 0.2s !important;
}

.woocommerce-order .woocommerce-MyAccount-downloads-file:hover {
  background: rgba(0,200,160,0.18) !important;
}

/* ── CHECKOUT FORM FIELD DARK OVERRIDE ── */
body.woocommerce-checkout .woocommerce input[type="text"],
body.woocommerce-checkout .woocommerce input[type="email"],
body.woocommerce-checkout .woocommerce input[type="tel"],
body.woocommerce-checkout .woocommerce input[type="number"],
body.woocommerce-checkout .woocommerce input[type="password"],
body.woocommerce-checkout .woocommerce select,
body.woocommerce-checkout .woocommerce textarea,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout select {
  background-color: #0e1219 !important;
  background: #0e1219 !important;
  border: 1px solid #1c2330 !important;
  border-radius: 7px !important;
  color: #e2e6f0 !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

body.woocommerce-checkout select,
body.woocommerce-checkout .woocommerce select {
  color: #8a96aa !important;
}

body.woocommerce-checkout input:focus,
body.woocommerce-checkout select:focus {
  border-color: rgba(0,200,160,0.4) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hide "Have a coupon?" notice — coupon is in the cart */
.woocommerce-form-coupon-toggle,
.checkout_coupon,
.woocommerce-info.woocommerce-checkout-coupon { display: none !important; }

/* Checkout form fields — dark styling */
.ae-checkout-form .woocommerce-input-wrapper input,
.ae-checkout-form .woocommerce-input-wrapper select,
.ae-checkout-form .woocommerce-input-wrapper textarea,
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select {
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
  border-color: rgba(0,200,160,0.4) !important;
  box-shadow: none !important;
}

.woocommerce-checkout input::placeholder { color: var(--muted) !important; opacity: 0.6 !important; }

/* Field labels */
.woocommerce-checkout label,
.woocommerce-checkout .woocommerce-form-row label {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Required asterisk */
.woocommerce-checkout .required { color: var(--green) !important; opacity: 0.6 !important; }

/* Payment section heading */
.woocommerce-checkout #payment .wc_payment_method label,
.woocommerce-checkout #payment h3,
.woocommerce-checkout .woocommerce-checkout-payment .wc-block-components-title {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: var(--green) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 14px 0 12px 18px !important;
  display: block !important;
}

/* PAYMENT OPTIONS h3 — matches table cell left padding */
.ae-order-review #payment h3 {
  padding-left: 18px !important;
  margin-left: 0 !important;
}

/* Stripe/Link payment widget — dark container with equal padding */
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout .wc-block-components-payment-method-iframe,
.ae-checkout-form #payment .payment_box {
  background: #080b10 !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 4px 0 !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
}

/* Text below the Stripe widget — terms, privacy notices etc */
.woocommerce-checkout #payment .payment_method_stripe p,
.woocommerce-checkout #payment .payment_box p,
.woocommerce-checkout #payment .payment_box small,
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #payment .about_paypal,
.woocommerce-checkout #payment p {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: #5a6878 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.72 !important;
  opacity: 1 !important;
}

.woocommerce-checkout .woocommerce-privacy-policy-text a,
.woocommerce-checkout #payment p a {
  color: var(--green) !important;
  text-decoration: none !important;
}

/* Force all text in payment area to be readable */
.woocommerce-checkout #payment *:not(iframe),
.woocommerce-checkout .woocommerce-checkout-payment *:not(iframe) {
  color: var(--text) !important;
}

/* Dark background directly behind the Stripe iframe — no border, clipped */
.woocommerce-checkout #payment .payment_box iframe,
.woocommerce-checkout .wc-block-components-payment-method-iframe iframe {
  background: #080b10 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
  vertical-align: bottom !important;
  margin: 0 !important;
}

/* Product thumbnail — top of order review */
.ae-checkout-product-thumb {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,200,160,0.02);
}

.ae-checkout-thumb-img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.ae-checkout-thumb-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ae-checkout-thumb-cat {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: rgba(0,200,160,0.55);
  text-transform: uppercase;
}

.ae-checkout-thumb-name {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #dde8f0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Inline trust badges — right column */
.ae-checkout-trust--inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-radius: 0;
}

.ae-checkout-trust--inline .ae-checkout-trust-item {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #7a8a98;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.5;
}

.ae-checkout-trust--inline .ae-checkout-trust-item svg {
  color: rgba(0,200,160,0.65);
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

/* Order total label — "One-time payment" above price */
.ae-cart-totals table.shop_table .order-total th,
.ae-order-review table.shop_table .order-total th {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: rgba(0,200,160,0.6) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* Payment Options section label indent */
.ae-order-review .woocommerce-checkout-payment > h3,
.ae-order-review .wc-stripe-payment-section > h3,
.ae-order-review #payment > h3 {
  padding-left: 18px !important;
}

/* ── STRIPE LINK / "PAY ANOTHER WAY" ARTIFACT FIX ── */
/* Suppress all white borders, outlines, overflow lines from Stripe iframes */
.woocommerce-checkout #payment .payment_box *,
.woocommerce-checkout #payment .woocommerce-SavedTokens *,
.ae-checkout-form #payment * {
  outline: none !important;
  box-shadow: none !important;
}

/* Force all divs in payment area to have no white border */
.woocommerce-checkout #payment div,
.ae-checkout-form #payment div {
  border-color: rgba(255,255,255,0.06) !important;
}

/* Any div with inline white/light background injected by Stripe → dark */
.woocommerce-checkout #payment .payment_box div,
.ae-checkout-form #payment .payment_box div {
  background: #080b10 !important;
  border: none !important;
}

/* Strip li padding that Stripe Link iframe bleeds outside */
.ae-checkout-form #payment ul.payment_methods li,
.ae-checkout-form #payment li.wc_payment_method {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Hide Stripe "save payment info" checkbox and label — rendered outside iframe */
.wc-stripe-save-payment-method-checkbox,
.woocommerce-SavedTokens,
.woocommerce-save-payment-method,
#wc-stripe-new-payment-method,
.wc-stripe-new-payment-method,
[id*="wc-stripe-save"],
[class*="save-payment-method"],
[class*="save_payment_method"],
.wc_payment_method .wc-stripe-checkbox-group,
.payment_method_stripe .wc-stripe-checkbox-group,
input#wc-stripe-payment-method,
label[for="wc-stripe-payment-method"],
input#wc-stripe-new-payment-method,
label[for="wc-stripe-new-payment-method"],
/* The label text that persists after checkbox is hidden */
.payment_box p.wc-stripe-checkbox,
.wc-stripe-checkbox-group,
.wc-stripe-checkbox-group ~ p,
.payment_box .wc-stripe-checkbox-group,
input[name="wc-stripe-new-payment-method"] ~ label,
input[name="wc-stripe-payment-method"] ~ label,
/* Nuclear: any label inside payment_box containing "save" text context */
.payment_method_stripe .payment_box > p:last-of-type,
.wc_payment_method .payment_box label {
  display: none !important;
}

/* ── FIELDSET FIX — browser default fieldset border causes white lines ── */
#wc-stripe-upe-form,
.wc-upe-form,
.wc-payment-form,
.woocommerce-checkout #payment fieldset,
.ae-checkout-form #payment fieldset {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-inline-size: unset !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Stripe Link button container and any sibling divs */
.woocommerce-checkout #payment .payment_box > div,
.woocommerce-checkout #payment .payment_box > div > div,
.ae-checkout-form #payment .payment_box > div,
.ae-checkout-form #payment .payment_box > div > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* The iframe itself and any wrappers injected by Stripe */
.woocommerce-checkout #payment .payment_box iframe {
  display: block !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Stripe injects a div directly after the iframe for Link / Express checkout */
.woocommerce-checkout #payment .payment_box iframe + div,
.woocommerce-checkout #payment .payment_box iframe ~ div,
.ae-checkout-form #payment .payment_box iframe + div,
.ae-checkout-form #payment .payment_box iframe ~ div,
.woocommerce-checkout #payment .payment_box > div,
.ae-checkout-form #payment .payment_box > div {
  background: #080b10 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Stripe "Pay another way" separator and its siblings */
#wc-stripe-link-button-separator,
.wc-stripe-link-button-separator,
[class*="stripe-link"] + *,
[id*="stripe-link"] + * {
  background: transparent !important;
  border-color: rgba(255,255,255,0.07) !important;
  color: var(--muted) !important;
}

/* Hard override consolidated into sibling div rule above */

/* Place order button */
.woocommerce-checkout #place_order {
  background: rgba(0,200,160,0.1) !important;
  color: var(--green) !important;
  border: 1px solid rgba(0,200,160,0.3) !important;
  border-radius: 8px !important;
  padding: 15px 24px !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  width: calc(100% ) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s cubic-bezier(0.16,1,0.3,1) !important;
  box-shadow: none !important;
  letter-spacing: -0.01em !important;
  margin-top: 10px !important;
}

.woocommerce-checkout #place_order:hover {
  background: rgba(0,200,160,0.18) !important;
  border-color: rgba(0,200,160,0.55) !important;
  box-shadow: 0 0 20px rgba(0,200,160,0.12), 0 4px 16px rgba(0,0,0,0.2) !important;
  transform: translateY(-1px) !important;
}

/* Country select arrow */
.woocommerce-checkout select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6478' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

/* ── SINGLE PRODUCT PAGE ── */

.sprod-hero {
  position: relative;
  padding: 36px 24px 24px;
  overflow: hidden;
}

.sprod-hero-glow {
  position: absolute;
  top: -5%; left: -5%;
  width: 700px; height: 500px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.04) 0%, transparent 65%);
  pointer-events: none;
}

.sprod-hero-inner {
  position: relative; z-index: 1;
  max-width: 900px;
}

/* Breadcrumb */
.sprod-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px;
  margin-bottom: 18px;
}
.sprod-bc-link {
  color: #4a5668; text-decoration: none;
  transition: color 0.18s ease;
}
.sprod-bc-link:hover { color: rgba(0,200,160,0.7); }
.sprod-bc-sep { color: rgba(255,255,255,0.1); }
.sprod-bc-current { color: rgba(0,200,160,0.55); }

/* System badge */
.sprod-system-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(0,200,160,0.6);
  background: rgba(0,200,160,0.06);
  border: 1px solid rgba(0,200,160,0.15);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 15px;
}

.sprod-badge-dot {
  width: 5px; height: 5px;
  background: var(--green);
  border-radius: 50%;
  opacity: 0.7;
}

.sprod-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--text);
  margin: 0 0 12px;
  max-width: 700px;
}

.sprod-summary {
  font-size: 16.5px;
  font-weight: 300;
  color: #96a2b4;
  line-height: 1.65;
  max-width: 540px;
  margin-bottom: 15px;
}

.sprod-tag-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}

.sprod-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #6a7888;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 4px 11px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.sprod-tag:hover { border-color: rgba(0,200,160,0.2); color: #96a2b4; }

.sprod-tag--free {
  color: rgba(0,200,160,0.7);
  background: rgba(0,200,160,0.07);
  border-color: rgba(0,200,160,0.18);
}

/* ── LAYOUT ── */
.sprod-layout { padding: 36px 0 80px; }

.sprod-layout-inner {
  display: grid;
  grid-template-columns: 1fr 304px;
  gap: 56px;
  align-items: start;
}

.sprod-content { min-width: 0; }

/* ── CONTENT SECTIONS ── */
.sprod-section {
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sprod-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.sprod-section-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(0,200,160,0.5);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.sprod-section-body {
  font-size: 14px;
  font-weight: 300;
  color: #8a96a8;
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 22px;
}

/* Problem grid */
.sprod-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.sprod-problem-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 300;
  color: #7a8898;
  line-height: 1.5;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 13px 15px;
}

.sprod-problem-x {
  color: rgba(220,80,80,0.45);
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Workflow flow chain */
/* ── WORKFLOW PIPELINE DIAGRAM ── */
.sprod-pipeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
  position: relative;
  max-width: 600px;
}

.sprod-pipeline-node {
  display: grid;
  grid-template-columns: 28px 1fr 100px;
  gap: 16px;
  align-items: center;
  background: rgba(10,14,20,0.8);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px 20px;
  position: relative;
  z-index: 1;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.sprod-pipeline-node:hover {
  border-color: rgba(0,200,160,0.22);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,200,160,0.05);
}

.sprod-pipeline-node--active {
  border-color: rgba(0,200,160,0.2);
  background: linear-gradient(135deg, rgba(9,25,16,0.6) 0%, rgba(10,14,20,0.9) 100%);
}

.sprod-pipeline-node--terminal {
  border-color: rgba(0,200,160,0.16);
}

.sprod-pipeline-num {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(0,200,160,0.5);
  letter-spacing: 0.1em;
  font-weight: 700;
}

.sprod-pipeline-title {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.sprod-pipeline-desc {
  font-size: 11.5px;
  font-weight: 300;
  color: #5a6878;
  line-height: 1.55;
}

.sprod-pipeline-layer {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.4);
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Connector between nodes */
.sprod-pipeline-connector {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 28px; /* align with num column */
  height: 24px;
  position: relative;
  z-index: 0;
}

.sprod-pipeline-line {
  width: 1px;
  flex: 1;
  background: linear-gradient(to bottom,
    rgba(0,200,160,0.25),
    rgba(0,200,160,0.4) 50%,
    rgba(0,200,160,0.25)
  );
  margin: 0 auto;
  position: relative;
}

.sprod-pipeline-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(0,200,160,0.12);
  border: 1px solid rgba(0,200,160,0.35);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: pipeline-pulse 3s ease-in-out infinite;
}

.sprod-pipeline-connector:nth-child(4) .sprod-pipeline-dot  { animation-delay: 0.5s; }
.sprod-pipeline-connector:nth-child(6) .sprod-pipeline-dot  { animation-delay: 1s; }
.sprod-pipeline-connector:nth-child(8) .sprod-pipeline-dot  { animation-delay: 1.5s; }
.sprod-pipeline-connector:nth-child(10) .sprod-pipeline-dot { animation-delay: 2s; }

@keyframes pipeline-pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1; transform: translate(-50%, -50%) scale(1.4); box-shadow: 0 0 8px rgba(0,200,160,0.35); }
}

@media (max-width: 600px) {
  .sprod-pipeline-node {
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
  }
  .sprod-pipeline-layer {
    grid-column: 2;
    text-align: left;
    margin-top: 2px;
  }
}

/* Feature cards grid */
.sprod-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.sprod-feature-card {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 22px 24px;
  transition: border-color 0.22s ease, transform 0.28s cubic-bezier(0.16,1,0.3,1);
}

.sprod-feature-card:hover {
  border-color: rgba(0,200,160,0.18);
  transform: translateY(-2px);
}

.sprod-feature-title {
  font-family: 'Syne', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  line-height: 1.25;
}

.sprod-feature-desc {
  font-size: 12px;
  font-weight: 300;
  color: #5e6e7e;
  line-height: 1.65;
}

/* Outcomes */
.sprod-outcomes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}

.sprod-outcome-col {
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sprod-outcome-col--before {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.05);
}

.sprod-outcome-col--after {
  background: rgba(0,200,160,0.04);
  border: 1px solid rgba(0,200,160,0.14);
}

.sprod-outcome-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.sprod-outcome-col--before .sprod-outcome-label { color: #4a5668; }
.sprod-outcome-col--after  .sprod-outcome-label { color: rgba(0,200,160,0.6); }

.sprod-outcome-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 300;
  color: #6a7888;
  line-height: 1.5;
}

.sprod-outcome-item span { flex-shrink: 0; font-size: 11px; margin-top: 1px; }

.sprod-outcome-col--before .sprod-outcome-item span { color: rgba(220,80,80,0.4); }
.sprod-outcome-col--after  .sprod-outcome-item span { color: rgba(0,200,160,0.5); }
.sprod-outcome-col--after  .sprod-outcome-item { color: #8a9aaa; }

/* Best for chips */
.sprod-bestfor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sprod-bestfor-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(0,200,160,0.65);
  background: rgba(0,200,160,0.06);
  border: 1px solid rgba(0,200,160,0.16);
  border-radius: 6px;
  padding: 5px 13px;
}

/* Related systems */
.sprod-related-section { margin-top: 0; }

.sprod-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.sprod-related-card {
  background: linear-gradient(150deg, rgba(14,20,28,0.9) 0%, rgba(8,12,18,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.22s ease, transform 0.28s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease;
}

.sprod-related-card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; right: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,200,160,0.45), transparent);
  opacity: 0;
  transition: left 0.32s cubic-bezier(0.16,1,0.3,1), right 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
}

.sprod-related-card:hover {
  border-color: rgba(0,200,160,0.22);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,200,160,0.06);
}

.sprod-related-card:hover::before {
  left: 15%; right: 15%;
  opacity: 1;
}

.sprod-related-type {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.5);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sprod-related-title {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.3;
  flex: 1;
}

.sprod-related-price {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.sprod-related-cta {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(0,200,160,0.5);
  letter-spacing: 0.06em;
  transition: color 0.18s ease;
}

.sprod-related-card:hover .sprod-related-cta { color: var(--green); }

/* Final CTA */
.sprod-final-cta {
  background: linear-gradient(140deg, rgba(9,25,16,0.8) 0%, rgba(8,12,18,0.95) 100%);
  border: 1px solid rgba(0,200,160,0.12);
  border-radius: 16px;
  padding: 48px 48px 44px;
  margin-top: 52px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
}

.sprod-final-cta-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 22px;
  max-width: 440px;
}

.sprod-final-cta-title em { font-style: normal; color: var(--green); }

.sprod-final-cta-btn {
  display: inline-block;
  background: transparent;
  color: rgba(0,200,160,0.8);
  border: 1px solid rgba(0,200,160,0.3);
  border-radius: 8px;
  padding: 13px 26px;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.sprod-final-cta-btn:hover {
  border-color: rgba(0,200,160,0.55);
  color: var(--green);
  background: rgba(0,200,160,0.06);
}

/* ── PURCHASE PANEL ── */
.sprod-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
}

.sprod-price-block {
  background: linear-gradient(140deg, rgba(9,25,16,0.95) 0%, rgba(8,12,18,0.98) 100%);
  border: 1px solid rgba(0,200,160,0.18);
  border-radius: 14px;
  padding: 22px 24px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,200,160,0.05);
}

.sprod-price-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(0,200,160,0.5);
  margin-bottom: 10px;
}

.sprod-price-main {
  font-family: 'Syne', sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}

.sprod-price-free { color: var(--green); }

.sprod-price-note {
  font-family: var(--mono);
  font-size: 10px;
  color: #4a5668;
  letter-spacing: 0.06em;
}

.sprod-price-was {
  font-family: var(--mono);
  font-size: 10px;
  color: #4a5668;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

.sprod-trust-statement {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(0,200,160,0.48);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sprod-panel-card {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 20px 22px;
}

.sprod-panel-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(0,200,160,0.5);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.sprod-inc-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
}

.sprod-inc-list li {
  font-size: 12.5px;
  font-weight: 300;
  color: #8090a0;
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}

.sprod-inc-list li::before {
  content: '·';
  position: absolute; left: 0;
  color: rgba(0,200,160,0.4);
  font-size: 16px; line-height: 1.1;
}

.sprod-bf-text {
  font-size: 12.5px;
  font-weight: 300;
  color: #7a8898;
  line-height: 1.65;
  margin: 0;
}

.sprod-trust-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0;
}

.sprod-trust-item {
  font-family: var(--mono);
  font-size: 10px;
  color: #3d4a58;
  letter-spacing: 0.06em;
  padding-left: 12px;
  position: relative;
}

.sprod-trust-item::before {
  content: '·';
  position: absolute; left: 0;
  color: rgba(0,200,160,0.2);
  font-size: 14px; line-height: 1.1;
}

.sprod-back-link {
  font-family: var(--mono);
  font-size: 10px;
  color: #4a5668;
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.18s ease;
  display: block;
  text-align: center;
  padding-top: 4px;
}

.sprod-back-link:hover { color: rgba(0,200,160,0.6); }

/* "Not for" positioning block */
.sprod-not-for {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 3px solid rgba(0,200,160,0.3);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
}

.sprod-not-for-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(0,200,160,0.5);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sprod-not-for-text {
  font-size: 13.5px;
  font-weight: 300;
  color: #7a8898;
  line-height: 1.7;
  margin: 0;
  max-width: 500px;
}

/* Related card sub + footer */
.sprod-related-sub {
  font-size: 11.5px;
  font-weight: 300;
  color: #5a6878;
  line-height: 1.55;
  flex: 1;
}

.sprod-related-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

/* Entry content (real product description) */
.sprod-entry-content {
  font-size: 14.5px;
  font-weight: 300;
  color: #8a96a8;
  line-height: 1.8;
  max-width: 580px;
}

.sprod-entry-content h2,
.sprod-entry-content h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 32px 0 12px;
}

.sprod-entry-content h2 { font-size: 20px; }
.sprod-entry-content h3 { font-size: 16px; }

.sprod-entry-content p { margin-bottom: 14px; }

.sprod-entry-content ul {
  padding: 0; list-style: none;
  display: flex; flex-direction: column;
  gap: 7px; margin-bottom: 16px;
}

.sprod-entry-content ul li {
  padding-left: 14px; position: relative;
  color: #8090a0; font-size: 13.5px;
}

.sprod-entry-content ul li::before {
  content: '·'; position: absolute; left: 0;
  color: rgba(0,200,160,0.4);
  font-size: 16px; line-height: 1.1;
}

/* Audience cards */
.sprod-audience-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sprod-audience-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 10px 15px;
  transition: border-color 0.2s ease;
}

.sprod-audience-chip:hover { border-color: rgba(0,200,160,0.2); }

.sprod-audience-icon {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(0,200,160,0.4);
  flex-shrink: 0;
}

.sprod-audience-label {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #7a8898;
  letter-spacing: 0.06em;
}

/* Outcome metric cards */
.sprod-outcome-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.sprod-outcome-metric {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.22s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}

.sprod-outcome-metric:hover {
  border-color: rgba(0,200,160,0.2);
  transform: translateY(-2px);
}

.sprod-outcome-metric-icon {
  font-size: 11px;
  color: rgba(0,200,160,0.5);
  font-family: var(--mono);
}

.sprod-outcome-metric-label {
  font-family: 'Syne', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.sprod-outcome-metric-sub {
  font-size: 11px;
  font-weight: 300;
  color: #5a6878;
  line-height: 1.5;
}

/* "Not for" block */
.sprod-not-for {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 2px solid rgba(0,200,160,0.28);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
}

.sprod-not-for-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(0,200,160,0.5);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sprod-not-for-text {
  font-size: 13.5px;
  font-weight: 300;
  color: #7a8898;
  line-height: 1.7;
  margin: 0;
  max-width: 480px;
}
/* Responsive */
@media (max-width: 900px) {
  .sprod-layout-inner { grid-template-columns: 1fr; gap: 40px; }
  .sprod-panel { position: static; }
  .sprod-problem-grid,
  .sprod-feature-grid,
  .sprod-outcomes-grid,
  .sprod-outcome-metric-grid { grid-template-columns: 1fr 1fr; }
  .sprod-related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .sprod-related-grid { grid-template-columns: 1fr; }
  .sprod-final-cta { padding: 28px 24px; }
}
/* Free product explicit CTA — same style as paid add-to-cart */
.sprod-free-cta {
  display: block !important;
  width: 100% !important;
  background: var(--green) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 13px 20px !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.sprod-free-cta:hover {
  background: #14e8b8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,200,160,0.35) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}

/* ── ADD TO CART BUTTON ── */
.sprod-cart-wrap .quantity,
.sprod-cart-wrap input.qty,
.sprod-cart-wrap input[name="quantity"] { display: none !important; }

.sprod-cart-wrap .cart { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.sprod-cart-wrap .single_add_to_cart_button,
.sprod-cart-wrap .button {
  width: 100% !important;
  background: var(--green) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 13px 20px !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

/* "View cart →" link — same height as Add to Cart button */
.sprod-cart-wrap a.added_to_cart,
.sprod-cart-wrap .woocommerce-message a.button,
.sprod-cart-wrap ~ a.added_to_cart,
.cart a.added_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border: 1px solid rgba(0,200,160,0.35) !important;
  color: var(--green) !important;
  background: transparent !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.sprod-cart-wrap .single_add_to_cart_button:hover {
  background: #14e8b8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,200,160,0.35) !important;
}

/* Suppress express payment buttons */
.sprod-cart-wrap .wc-block-components-express-payment,
.sprod-cart-wrap #payment,
#wcpay-payment-request-button-separator,
#wcpay-payment-request-wrapper,
.wcpay-payment-request-button__container { display: none !important; }

/* Single product link colors */
.woocommerce div.product a,
.woocommerce div.product a:link,
.woocommerce div.product a:visited {
  color: var(--text) !important;
  text-decoration: none !important;
}
/* ── WL PRODUCT CARDS — refined operational hierarchy ── */

.woocommerce ul.products li.product.wl-product-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 24px 26px !important;
  background: rgba(10,14,20,0.7) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  cursor: pointer;
  transition:
    border-color 0.22s ease,
    transform 0.25s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.22s ease !important;
}

.woocommerce ul.products li.product.wl-product-card:hover {
  border-color: rgba(0,200,160,0.22) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,200,160,0.06) !important;
}

/* System type label row */
.wl-system-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.wl-system-type {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(0,200,160,0.6);
  text-transform: uppercase;
}

/* Category accent variations — subtle hue shifts within teal family */
.wl-product-card[data-cat="sql"] .wl-system-type,
.wl-product-card[data-cat="sql"] .wl-product-category { color: rgba(0,210,175,0.65); }

.wl-product-card[data-cat="workflow"] .wl-system-type,
.wl-product-card[data-cat="workflow"] .wl-product-category { color: rgba(0,200,160,0.6); }

.wl-product-card[data-cat="course"] .wl-system-type,
.wl-product-card[data-cat="course"] .wl-product-category { color: rgba(0,195,155,0.65); }

.wl-product-card[data-cat="automation"] .wl-system-type,
.wl-product-card[data-cat="automation"] .wl-product-category { color: rgba(0,218,170,0.6); }

/* Coming soon category accents */
.wl-coming-cat { color: rgba(0,200,160,0.5); }

.wl-system-featured-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text);
  background: rgba(0,200,160,0.1);
  border: 1px solid rgba(0,200,160,0.22);
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

/* Product title */
.wl-product-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
  margin: 0 0 10px !important;
  color: #e2eaf2 !important;
  max-width: 28ch;
}

/* Description */
.wl-product-desc {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #7a8898 !important;
  line-height: 1.65 !important;
  margin: 0 0 14px !important;
}

/* Includes section */
.wl-product-includes {
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  flex: 1;
}

.wl-inc-label {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  color: var(--green) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  opacity: 0.8;
}

.wl-inc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.wl-inc-list li {
  font-size: 12.5px !important;
  font-weight: 300 !important;
  color: #9aa3b2 !important;
  line-height: 1.4 !important;
  padding-left: 14px !important;
  position: relative !important;
}

.wl-inc-list li::before {
  content: '·' !important;
  position: absolute !important;
  left: 0 !important;
  color: rgba(0,200,160,0.45) !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
}

/* Best for */
.wl-product-best-for {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.wl-bf-label {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  color: var(--muted) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: block !important;
  opacity: 0.7 !important;
}

.wl-bf-text {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #8a96aa !important;
  line-height: 1.55 !important;
}

/* Footer: price + CTA */
.wl-product-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  margin-top: auto !important;
  flex-wrap: wrap !important;
}

.wl-product-price-display { flex-shrink: 0; }

.wl-price-tag {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.wl-price-free {
  color: var(--green);
}

.wl-product-cta-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: auto !important;
  padding-top: 16px !important;
}
  background: var(--ink2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 34px !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.woocommerce ul.products li.product:hover {
  border-color: rgba(0,200,160,0.24) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,200,160,0.06) !important;
}

/* Featured product — full width only when multiple products exist */
.woocommerce ul.products li.product.wl-product-card--featured {
  border-color: rgba(0,200,160,0.2) !important;
  background: linear-gradient(135deg, #0a1a15 0%, var(--ink2) 100%) !important;
}

/* Only span full width when there are multiple products */
.woocommerce ul.products:has(li.product:nth-child(2)) li.product.wl-product-card--featured {
  grid-column: span 2;
}

/* Hide the native WooCommerce thumbnail in our custom card */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img {
  display: none !important;
}

/* View cart link after add to cart — inline next to button */
.wl-product-cta-wrap .added_to_cart,
a.added_to_cart,
a.added_to_cart:link,
a.added_to_cart:visited {
  color: var(--green) !important;
  text-decoration: none !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 14px !important;
  border: 1px solid rgba(0,200,160,0.3) !important;
  border-radius: 6px !important;
  background: rgba(0,200,160,0.06) !important;
  transition: background 0.2s !important;
}

a.added_to_cart:hover {
  background: rgba(0,200,160,0.12) !important;
}
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product a:link,
.woocommerce ul.products li.product a:visited,
.woocommerce ul.products li.product a:hover {
  color: var(--text) !important;
  text-decoration: none !important;
}

/* Category tag links — green */
.woocommerce ul.products li.product .wl-product-category,
.woocommerce ul.products li.product .wl-product-category a,
.woocommerce ul.products li.product .wl-product-category a:visited {
  color: var(--green) !important;
  text-decoration: none !important;
}

/* Product title link */
.woocommerce ul.products li.product .wl-product-title a,
.woocommerce ul.products li.product .wl-product-title a:visited {
  color: var(--text) !important;
}

.woocommerce ul.products li.product .wl-product-title a:hover {
  color: var(--green) !important;
}

/* Fix category link color — override browser default blue/purple */
.woocommerce ul.products li.product .wl-product-category a,
.woocommerce ul.products li.product .wl-product-category {
  color: var(--green) !important;
  text-decoration: none !important;
}

/* Hide the WooCommerce auto-generated price block in card body (price shown in badge) */
.woocommerce ul.products li.product .price {
  display: none !important;
}

/* Hide strikethrough old price in badge — only show current price */
.wl-product-badge del,
.wl-product-badge .woocommerce-Price-amount:first-child:not(:last-child) {
  display: none !important;
}

/* Remove underline from system type labels */
.wl-system-type, .ae-ci-type, .sprod-system-type { text-decoration: none !important; }

/* Remove underline from WooCommerce's auto-injected product link wrapper */
.wl-product-card a.woocommerce-loop-product__link,
.wl-product-card a.woocommerce-LoopProduct-link {
  text-decoration: none !important;
}

/* View cart link — vertically aligned with adjacent buttons */
.wl-product-cta-wrap .wl-view-cart-link {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  vertical-align: middle !important;
}

/* ── ADD TO CART BUTTON — fully self-contained styles ── */
.wl-atc-btn {
  display: inline-block;
  background: transparent;
  color: #5a6878;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  padding: 9px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.wl-atc-btn:hover,
.wl-atc-btn:focus {
  color: var(--green) !important;
  border-color: rgba(0,200,160,0.5) !important;
  background-color: rgba(0,200,160,0.08) !important;
  text-decoration: none !important;
}

.wl-atc-btn.added {
  color: var(--green);
  border-color: rgba(0,200,160,0.3);
  background: rgba(0,200,160,0.06);
}

/* View cart link after AJAX add */
.wl-product-cta-wrap .added_to_cart,
.wl-product-cta-wrap a.added_to_cart {
  display: inline-block !important;
  color: var(--green) !important;
  border: 1px solid rgba(0,200,160,0.3) !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  background: rgba(0,200,160,0.06) !important;
  transition: background 0.2s !important;
}

/* Style the native Add to cart button to match brand */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product a.add_to_cart,
.woocommerce ul.products li.product .button {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--muted) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid #1c2330 !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

/* Add to cart button hover */
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover,
.wl-product-cta-wrap .button:hover {
  color: var(--green) !important;
  border-color: rgba(0,200,160,0.5) !important;
  background: rgba(0,200,160,0.08) !important;
  box-shadow: none !important;
}

/* WooCommerce result count + ordering bar */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  background: transparent !important;
  border-color: var(--border) !important;
}

.woocommerce .woocommerce-ordering select {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  background: var(--ink2) !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 6px 32px 6px 12px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6478' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  cursor: pointer !important;
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--ink2) !important;
  border-top-color: var(--green) !important;
  color: var(--text) !important;
}

/* ── CHECKOUT VALIDATION — compact notice + field states ── */
.ae-notice.woocommerce-error {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  background: var(--ink2) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-left: 2px solid var(--green) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  margin: 0 0 20px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  list-style: none !important;
  max-width: 100%;
  overflow-wrap: break-word;
}
.ae-notice.woocommerce-error::before,
.ae-notice.woocommerce-error::after { content: none !important; display: none !important; }
.ae-notice .ae-notice-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--green);
}
.ae-notice .ae-notice-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ae-notice .ae-notice-line {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #aab3c2 !important;
  overflow-wrap: break-word;
}
.ae-notice .ae-notice-line strong { color: var(--text) !important; font-weight: 600 !important; }
.ae-notice a { color: var(--green) !important; text-decoration: none !important; }
.ae-notice a:hover { text-decoration: underline !important; }
/* Notice lives inside the Billing Details card, under the heading, above the fields */
.ae-billing-notice-slot:empty { display: none !important; }
.ae-billing-notice-slot .ae-notice.woocommerce-error { margin: 0 0 18px !important; max-width: 100% !important; }
.woocommerce-NoticeGroup:empty { display: none !important; }

/* ── PAID CHECKOUT: payment-area errors stay inside the Payment Options card ── */
.ae-payment-notice-slot:empty { display: none !important; }
.ae-payment-notice-slot { margin: 0 0 12px; }
/* Keep the payment notice looking like the calm card notice even inside #payment (ID specificity) */
#payment .ae-payment-notice-slot .ae-notice.woocommerce-error {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  background: var(--ink2) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-left: 2px solid var(--green) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  margin: 0 0 12px !important;
  max-width: 100% !important;
  box-shadow: none !important;
}

/* Stripe / card inline errors -> muted coral, small + compact (exclude our own notice) */
#payment .woocommerce-error:not(.ae-notice),
#payment .wc-stripe-error,
#payment .stripe-source-errors,
#payment li.payment_method_stripe .stripe-source-errors,
#payment .wc-block-components-validation-error,
#payment .woocommerce-stripe-error,
#payment [id$="-errors"],
#payment [class*="stripe"][class*="error"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 3px 0 0 !important;
  margin: 3px 0 0 !important;
  list-style: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(212,140,130,0.85) !important;
  overflow-wrap: break-word;
}
#payment .woocommerce-error:not(.ae-notice)::before { content: none !important; display: none !important; }

/* Stripe test-mode / gateway description text -> smaller + muted (only shown in test mode) */
#payment > p,
#payment .payment_box p,
#payment .payment_box p strong,
#payment .payment_box .testmode-info,
#payment .wc-stripe-test-mode,
#payment .woocommerce-info,
#payment .woocommerce-info.stripe-test-info {
  font-size: 11px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  opacity: 0.85;
}
#payment .woocommerce-info::before { display: none !important; }

/* Invalid field state — muted error accent, not harsh browser red */
.ae-checkout-form .form-row.woocommerce-invalid input,
.ae-checkout-form .form-row.woocommerce-invalid input.input-text,
.ae-checkout-form .form-row.woocommerce-invalid select,
.ae-checkout-form .form-row.woocommerce-invalid textarea,
.ae-checkout-form .form-row.woocommerce-invalid .select2-container .select2-selection {
  border-color: rgba(212,140,130,0.40) !important;
  box-shadow: 0 0 0 3px rgba(212,140,130,0.06) !important;
}
/* keep the error tint while an invalid field is focused */
.ae-checkout-form .form-row.woocommerce-invalid input:focus,
.ae-checkout-form .form-row.woocommerce-invalid input.input-text:focus,
.ae-checkout-form .form-row.woocommerce-invalid select:focus,
.ae-checkout-form .form-row.woocommerce-invalid textarea:focus {
  border-color: rgba(212,140,130,0.55) !important;
  box-shadow: 0 0 0 3px rgba(212,140,130,0.09) !important;
}
.ae-checkout-form .form-row.woocommerce-validated input {
  border-color: rgba(0,200,160,0.30) !important;
}

/* Inline per-field error text — helper size (~13px), muted, never oversized */
.ae-checkout-form .ae-inline-error,
.ae-checkout-form .form-row .woocommerce-error,
.ae-checkout-form .form-row > .error,
.ae-checkout-form .form-row .field-error,
.ae-checkout-form .woocommerce-invalid > .woocommerce-error,
.ae-checkout-form .woocommerce-invalid label.error {
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 5px 0 0 !important;
  margin: 0 !important;
  list-style: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
  color: rgba(212,140,130,0.82) !important;
  overflow-wrap: break-word;
}
.ae-checkout-form .form-row .woocommerce-error::before { content: none !important; display: none !important; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
  display: flex !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  justify-content: center !important;
  margin: 40px 0 0 !important;
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  padding: 8px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: transparent !important;
  letter-spacing: 0.06em !important;
  transition: all 0.2s !important;
  line-height: 1 !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  color: var(--green) !important;
  border-color: rgba(0,200,160,0.3) !important;
  background: rgba(0,200,160,0.06) !important;
}

/* Hide WooCommerce sale flash — doesn't fit the premium editorial aesthetic */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  display: none !important;
}

/* Responsive */
@media (max-width: 900px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
  }
  .woocommerce ul.products li.product.wl-product-card--featured {
    grid-column: span 1 !important;
  }
}

/* ── WORKFLOW LIBRARY PAGE ── */

/* ── WORKFLOW LIBRARY PAGE ── */

.wl-hero {
  position: relative;
  padding: 48px 0 44px;
  overflow: hidden;
}

.wl-hero-glow {
  position: absolute;
  top: -5%; left: -5%;
  width: 600px; height: 500px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.04) 0%, transparent 65%);
  pointer-events: none;
}

.wl-hero-inner { position: relative; z-index: 1; max-width: 780px; }

.wl-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 20px;
}

.wl-hero-title em { font-style: normal; color: var(--green); }

.wl-hero-sub {
  font-size: 16px;
  font-weight: 300;
  color: #a8b4c4;
  line-height: 1.78;
  max-width: 520px;
  margin-bottom: 18px;
}

.wl-hero-topics {
  font-family: var(--mono);
  font-size: 10px;
  color: #8a9aaa;
  letter-spacing: 0.16em;
  opacity: 1;
  margin-top: 20px;
  word-spacing: 0.14em;
}

/* Philosophy section */
.wl-philosophy {
  padding: 52px 24px 60px;
  background: rgba(10,14,20,0.5);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.wl-phil-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}

.wl-phil-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2.6vw, 29px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 18px;
  margin-top: 8px;
  max-width: 340px;
}

.wl-phil-body {
  font-size: 14px;
  font-weight: 300;
  color: #8a96a8;
  line-height: 1.8;
  margin-bottom: 8px;
  max-width: 370px;
}

.wl-phil-body strong { color: #d8e4ee; font-weight: 600; }

.wl-phil-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  margin-top: -4px;
}

.wl-phil-card {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.24s cubic-bezier(0.16,1,0.3,1);
}

.wl-phil-card:hover {
  border-color: rgba(0,200,160,0.24);
  box-shadow: 0 6px 22px rgba(0,0,0,0.24), 0 0 0 1px rgba(0,200,160,0.05);
  transform: translateY(-1px);
}

.wl-pc-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(0,200,160,0.07);
  border: 1px solid rgba(0,200,160,0.18);
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,200,160,0.65);
  flex-shrink: 0;
  margin-top: 1px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.wl-phil-card:hover .wl-pc-icon {
  color: rgba(0,200,160,0.9);
  background: rgba(0,200,160,0.1);
  border-color: rgba(0,200,160,0.28);
}

.wl-pc-title {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.wl-pc-body {
  font-size: 12.5px;
  font-weight: 300;
  color: #6a7a8a;
  line-height: 1.65;
  margin: 0;
}

/* Sections */
.wl-section {
  padding: 64px 24px;
  position: relative;
}
.wl-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 60%, rgba(0,200,160,0.025) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.wl-section > * { position: relative; z-index: 1; }

.wl-section-header {
  margin-bottom: 28px;
}

.wl-section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 4px;
}

/* Product grid */
.wl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 14px;
  align-items: stretch;
}

/* Product cards */
.wl-product-card {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  box-sizing: border-box;
  transition:
    border-color 0.25s ease,
    transform 0.3s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s ease;
}

.wl-product-card:hover {
  border-color: rgba(0,200,160,0.22);
  transform: translateY(-4px);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.32),
    0 0 0 1px rgba(0,200,160,0.06);
}

.wl-product-card--featured {
  border-color: rgba(0,200,160,0.14);
  background: linear-gradient(150deg, #091910 0%, rgba(8,12,18,0.95) 100%);
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.wl-product-card--featured:hover {
  border-color: rgba(0,200,160,0.28);
  box-shadow:
    0 20px 52px rgba(0,0,0,0.38),
    0 0 0 1px rgba(0,200,160,0.08),
    0 0 32px rgba(0,200,160,0.04);
}

.wl-product-card--free:hover {
  border-color: rgba(0,200,160,0.28);
}

.wl-product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wl-product-category {
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(0,200,160,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wl-product-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #6a7888;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.wl-badge--free {
  color: rgba(0,200,160,0.7);
  background: rgba(0,200,160,0.07);
  border-color: rgba(0,200,160,0.18);
}

.wl-badge--featured {
  color: var(--text);
  background: rgba(0,200,160,0.09);
  border-color: rgba(0,200,160,0.22);
}

.wl-product-title {
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
  transition: color 0.2s ease;
}

.wl-product-card:hover .wl-product-title { color: #e8f2ec; }

.wl-product-desc {
  font-size: 13.5px;
  font-weight: 300;
  color: #7a8898;
  line-height: 1.7;
  margin: 0;
}

.wl-product-best-for {
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 12.5px;
  font-weight: 300;
  color: #8090a0;
  line-height: 1.6;
}

.wl-bf-label {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
}

.wl-product-includes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wl-inc-label {
  font-family: var(--mono);
  font-size: 9px;
  color: #4a5668;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wl-inc-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}

.wl-inc-list li {
  font-size: 13px;
  font-weight: 300;
  color: #8090a0;
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}

.wl-inc-list li::before {
  content: '·';
  position: absolute; left: 0;
  color: rgba(0,200,160,0.4);
  font-size: 16px;
  line-height: 1.1;
}

/* CTAs */
.wl-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 11px 22px;
  min-height: 42px;
  min-width: 136px;
  box-sizing: border-box;
  transition:
    background 0.22s cubic-bezier(0.16,1,0.3,1),
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.22s ease;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 16px;
}

.wl-cta--primary {
  background: var(--green);
  color: var(--ink);
  font-size: 12px;
  padding: 9px 18px;
}

.wl-cta--primary:hover {
  background: #0ff0c0;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,200,160,0.42), 0 0 0 1px rgba(0,200,160,0.15);
  transition: all 0.22s cubic-bezier(0.16,1,0.3,1);
}

.wl-cta--secondary {
  background: transparent;
  color: rgba(0,200,160,0.75);
  border: 1px solid rgba(0,200,160,0.28);
  font-size: 12px;
  padding: 9px 18px;
}

.wl-cta--secondary:hover {
  border-color: rgba(0,200,160,0.5);
  color: #d0e8e0;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,200,160,0.12);
  transition: all 0.22s cubic-bezier(0.16,1,0.3,1);
}

/* Coming soon section */
.wl-coming-section {
  padding: 64px 24px 56px;
  background: linear-gradient(180deg, rgba(6,9,14,0.65) 0%, rgba(8,11,16,0.75) 100%);
  border-top: 1px solid rgba(0,200,160,0.07);
  position: relative;
}
.wl-coming-section::before {
  content: '';
  position: absolute;
  top: -1px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,160,0.12) 50%, transparent);
  pointer-events: none;
}

.wl-coming-header { margin-bottom: 44px; }

.wl-coming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 36px;
  align-items: stretch;
}

.wl-coming-card {
  background: rgba(10,14,20,0.78);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  height: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition:
    border-color 0.22s ease,
    transform 0.28s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.22s ease;
}

.wl-coming-notify {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.5);
  letter-spacing: 0.1em;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.wl-roadmap-badge {
  display: none; /* shown on mobile only */
}

/* Dev chip — top-right corner of each roadmap card */
.wl-dev-chip {
  display: none; /* mobile only */
}

@media (max-width: 600px) {
  .wl-dev-chip {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.1em;
    color: rgba(0,200,160,0.5);
    background: rgba(0,200,160,0.05);
    border: 1px solid rgba(0,200,160,0.12);
    border-radius: 3px;
    padding: 2px 7px;
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
  }
}

@media (max-width: 600px) {
  .wl-roadmap-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9px;
    color: rgba(0,200,160,0.5);
    letter-spacing: 0.1em;
    background: rgba(0,200,160,0.05);
    border: 1px solid rgba(0,200,160,0.12);
    border-radius: 4px;
    padding: 3px 8px;
    margin-top: 10px;
  }
}

.wl-coming-card:hover {
  border-color: rgba(0,200,160,0.28);
  transform: translateY(-3px);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.28),
    0 0 0 1px rgba(0,200,160,0.07),
    0 0 24px rgba(0,200,160,0.04);
}
.wl-coming-card:hover .wl-coming-dot {
  background: rgba(0,200,160,0.55);
  box-shadow: 0 0 8px rgba(0,200,160,0.3);
}
.wl-coming-card:hover .wl-coming-cat {
  color: rgba(0,200,160,0.75);
}

/* Row 2 lifts 1px more — subtle stagger depth */
@media (hover: hover) {
  .wl-coming-grid .wl-coming-card:nth-child(n+4):hover {
    transform: translateY(-3px);
  }
}

.wl-coming-dot {
  position: absolute;
  top: 18px; right: 18px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(0,200,160,0.35);
  border: none;
  animation: coming-dot-pulse 3s ease-in-out infinite;
}

@keyframes coming-dot-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.15); }
}

.wl-coming-cat {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.45);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wl-coming-title {
  font-family: 'Syne', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.3;
  padding-right: 18px;
}

.wl-coming-desc {
  font-size: 12px;
  font-weight: 300;
  color: #6a7a8e;
  line-height: 1.62;
  margin: 0;
  flex: 1;
  max-width: 26ch;
}

.wl-coming-cta {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding-top: 24px;
}
.wl-coming-cta::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 360px; height: 140px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Desktop CTA form — larger, more premium */
.wl-coming-cta .ae-hero-input {
  padding: 14px 10px 14px 0;
  font-size: 15px;
}
.wl-coming-cta .ae-hero-btn {
  padding: 13px 26px 13px 22px;
  font-size: 14px;
}
.wl-coming-cta .ae-hero-bar {
  padding: 4px 4px 4px 20px;
}

/* Mobile: stacked CTA form centered with equal left/right insets inside the box.
   Placed after the desktop rule so it wins by source order at <=768px. */
@media (max-width: 768px) {
  .wl-coming-cta .ae-hero-bar {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;          /* symmetric — replaces the 20px-left asymmetry */
    gap: 10px;
    box-sizing: border-box;
  }
  .wl-coming-cta .ae-hero-input,
  .wl-coming-cta .ae-hero-btn {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
}

.wl-coming-note {
  font-family: var(--mono);
  font-size: 11px;
  color: #4e5e6e;
  letter-spacing: 0.07em;
  margin-bottom: 14px;
}

/* Responsive */
@media (max-width: 900px) {
  .wl-grid { grid-template-columns: 1fr; }
  .wl-hero { padding: 36px 0 32px; }
  .wl-hero > .container { padding: 0 24px !important; }
  .wl-philosophy > .container,
  .wl-section > .container { padding: 0 20px !important; }
  .wl-phil-inner { grid-template-columns: 1fr; gap: 28px; }
  .wl-product-card { padding: 22px 20px; }
  .wl-coming-grid { grid-template-columns: 1fr; }
  .wl-product-card--featured { grid-column: span 1; grid-template-columns: 1fr; gap: 28px; }
  .wl-phil-inner { grid-template-columns: 1fr; gap: 32px; }
  .wl-coming-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  /* ── 1. STICKY HEADER — full mask, no seam ── */
  #navbar {
    background: rgba(5,7,12,0.99) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: 0 2px 0 rgba(5,7,12,0.99), 0 4px 16px rgba(0,0,0,0.32) !important;
  }

  /* ── 1. HERO — clear fixed navbar ── */
  .wl-hero { padding: 80px 20px 16px; }
  .wl-hero-inner { max-width: 100%; }
  .wl-hero-title { font-size: clamp(26px, 7vw, 34px) !important; margin-bottom: 12px !important; }
  .wl-hero-sub { font-size: 14px; margin-bottom: 14px; line-height: 1.65; }
  .wl-hero-badge { margin-bottom: 10px; }
  .wl-hero-topics { margin-top: 4px; margin-bottom: 4px; font-size: 10px; letter-spacing: 0.1em; }
  /* Kill heavy glow on mobile for performance */
  .wl-hero-glow { display: none; }

  /* ── 2. PHILOSOPHY — tighter, no double divider ── */
  .wl-philosophy { padding: 20px 0 24px; border-top: none; border-bottom: none; }
  .wl-phil-title { font-size: 18px; margin-bottom: 12px; }
  .wl-phil-body { font-size: 13px; line-height: 1.68; margin-bottom: 6px; }
  .wl-phil-inner { gap: 20px; }
  .wl-phil-cards { gap: 8px; }
  .wl-phil-card { padding: 14px 16px; gap: 12px; }
  .wl-pc-icon { width: 26px; height: 26px; border-radius: 6px; }
  .wl-pc-title { font-size: 13px; }
  .wl-pc-desc { font-size: 12px; line-height: 1.5; }

  /* ── 2. SECTION SPACING ── */
  .wl-section { padding: 36px 0 44px; }
  .wl-section-header { margin-bottom: 14px; }
  .wl-section .section-title { margin-top: 4px; font-size: clamp(20px, 5.5vw, 26px); line-height: 1.12; letter-spacing: -0.025em; }
  .wl-coming-section {
    padding: 52px 0 52px;
    border-top: none;
    background: linear-gradient(180deg, rgba(5,7,12,0) 0%, rgba(6,9,14,0.7) 40%, rgba(6,9,14,0.7) 100%);
    position: relative;
    isolation: isolate;
  }
  .wl-coming-section::before {
    content: '';
    position: absolute;
    top: -1px; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,200,160,0.1) 50%, transparent);
    pointer-events: none;
  }
  .wl-coming-section::after {
    content: '';
    position: absolute;
    top: -40px; left: 50%; right: 0;
    transform: translateX(-50%);
    width: 120px; height: 80px;
    background: radial-gradient(ellipse, rgba(0,200,160,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .wl-coming-cta { padding-bottom: 32px; }
  .wl-coming-header { margin-bottom: 24px; }
  .wl-coming-header .section-title { font-size: clamp(20px, 5.5vw, 26px); line-height: 1.12; }
  .section-divider { margin: 16px 0; }

  /* ── 3. PRODUCT CARDS ── */
  .wl-coming-grid { grid-template-columns: 1fr; }
  .wl-product-card .wl-atc-btn { display: none; }
  .wl-coming-notify { display: block; }
  .woocommerce ul.products li.product.wl-product-card { padding: 15px 13px !important; }
  .wl-product-title { font-size: 15.5px !important; margin-bottom: 4px !important; text-wrap: balance; overflow-wrap: break-word; }
  .wl-product-desc {
    font-size: 13px !important;
    color: #96a6b6 !important;
    line-height: 1.6 !important;
    margin-bottom: 7px !important;
  }
  .wl-coming-title { font-size: 14px !important; text-wrap: balance; }
  .wl-product-includes { padding: 8px 11px; margin-bottom: 7px; }
  .wl-inc-label { margin-bottom: 5px !important; }
  .wl-inc-list { gap: 3px !important; }
  .wl-inc-list li { font-size: 12px !important; color: #9aabb8 !important; }
  .wl-product-best-for { margin-bottom: 7px !important; }
  .wl-bf-text { font-size: 12.5px !important; color: #8a96a8 !important; }
  .wl-system-type-row { margin-bottom: 5px; }

  /* ── 4. CTA ALIGNMENT + HIERARCHY ── */
  .wl-product-card { padding: 24px; display: flex !important; flex-direction: column !important; }

  /* Title prominence */
  .wl-product-title { color: #dde8f0 !important; letter-spacing: -0.02em !important; }

  /* Soften primary CTA slightly on mobile */
  .wl-cta--primary {
    background: rgba(0,200,160,0.88) !important;
    font-size: 11.5px !important;
    padding: 9px 16px !important;
    box-shadow: none !important;
  }
  .wl-cta--primary:active {
    background: var(--green) !important;
  }

  /* Secondary CTA — consistent height */
  .wl-cta--secondary {
    font-size: 11.5px !important;
    padding: 9px 16px !important;
  }
  .wl-product-includes { flex: 1; }
  .wl-product-best-for { flex-shrink: 0; }
  .wl-cta {
    width: 100% !important;
    text-align: center !important;
    margin-top: auto;
    padding-top: 10px;
    flex-shrink: 0;
  }
  .wl-product-price { display: flex; align-items: center; margin-bottom: 12px; flex-shrink: 0; }
  .wl-system-type-row { flex-shrink: 0; }

  /* ── 5. CATEGORY LABELS + METADATA CONTRAST ── */
  .wl-coming-cat { color: rgba(0,200,160,0.62); letter-spacing: 0.14em; }

  /* Small uppercase labels */
  .wl-inc-label,
  .wl-bf-label,
  .wl-product-category,
  .wl-system-type { color: rgba(0,200,160,0.62) !important; }

  /* Muted body / helper text */
  .wl-coming-desc { color: #7a8898; }
  .wl-coming-note,
  .wl-phil-body { color: #7a8898; }

  /* Includes list items */
  .wl-inc-list li { color: #9aabb8 !important; }

  /* Best-for text */
  .wl-bf-text { color: #8e9eb0 !important; }

  /* Footer microcopy */
  .ae-footer-nav a { color: #6a7888 !important; }
  .ae-footer-bottom { color: #566070; }

  /* ── 6. FOOTER SPACING + READABILITY ── */
  .ae-footer { padding: 32px 20px 28px; }
  .ae-footer-brand { gap: 8px; }
  .ae-footer-top { gap: 12px; }
  .ae-footer-nav-cols { gap: 10px; }
  .ae-footer-nav { gap: 6px; }
  .ae-footer-inner { gap: 20px; }
  /* Improved contrast for low-brightness environments */
  .ae-footer-nav a { color: #7a8898 !important; }
  .ae-footer-nav a:hover { color: rgba(0,200,160,0.75) !important; }
  .ae-footer-col-label { color: rgba(0,200,160,0.72); }
  .ae-footer-copy { color: #566070; }
  .ae-footer-bottom-tag { color: rgba(0,200,160,0.35); }
  .ae-footer-social a { color: #7a8898; }
  .ae-footer-brand-desc { color: #5a6878 !important; }

  /* ── 7. CONSISTENCY AUDIT ── */
  /* Unified border radius */
  .wl-cta { border-radius: 8px !important; }
  .wl-product-includes { border-radius: 7px; }
  .ae-hero-input { border-radius: 7px 0 0 7px; }
  .ae-hero-btn { border-radius: 0 7px 7px 0; }
  /* No text near edges */
  .wl-coming-card {
    padding: 18px 16px;
    opacity: 0.78;
    background: rgba(7,10,15,0.65);
    border-color: rgba(255,255,255,0.035) !important;
    box-shadow: none !important;
  }
  .wl-coming-card:hover {
    opacity: 0.88;
    border-color: rgba(0,200,160,0.12) !important;
    transform: none !important;
  }
  .wl-coming-dot {
    background: rgba(0,200,160,0.18);
    box-shadow: none;
  }
  .wl-coming-notify {
    color: rgba(0,200,160,0.38);
  }
  .wl-coming-title {
    color: #7a8a9e;
  }
  .wl-coming-desc {
    color: #6a7a8a;
  }
  .wl-coming-cat {
    color: rgba(0,200,160,0.48);
  }
  .wl-section > .container,
  .wl-coming-section > .container { padding: 0 18px !important; }

  /* ── 7. CARD INTERACTION FEEDBACK ── */
  /* Base transition on all product cards */
  .wl-product-card,
  .woocommerce ul.products li.product.wl-product-card {
    transition:
      transform 0.18s cubic-bezier(0.16,1,0.3,1),
      border-color 0.18s ease,
      box-shadow 0.18s ease !important;
  }

  /* Disable :hover lift (unreliable on touch) */
  .wl-product-card:hover,
  .woocommerce ul.products li.product.wl-product-card:hover {
    transform: none !important;
  }

  /* Tap / press state */
  .wl-product-card:active,
  .woocommerce ul.products li.product.wl-product-card:active {
    transform: translateY(-1px) !important;
    border-color: rgba(0,200,160,0.26) !important;
    box-shadow:
      0 4px 16px rgba(0,0,0,0.24),
      0 0 0 1px rgba(0,200,160,0.07),
      0 0 18px rgba(0,200,160,0.04) !important;
    transition:
      transform 0.1s ease,
      border-color 0.1s ease,
      box-shadow 0.1s ease !important;
  }

  /* CTA button tap */
  .wl-cta:active {
    transform: scale(0.98) !important;
    opacity: 0.85 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
  }

  /* Coming soon — passive, no lift */
  .wl-coming-card:hover,
  .wl-coming-card:active {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ── AI TOOLS PAGE ── */

.ait-hero {
  position: relative;
  padding: 52px 0 32px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .ait-hero > .container { padding: 0 24px !important; }
}

.ait-hero-glow {
  position: absolute;
  top: -5%; left: -5%;
  width: 600px; height: 500px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.035) 0%, transparent 65%);
  pointer-events: none;
}

.ait-hero-inner { position: relative; z-index: 1; max-width: 680px; }

.ait-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 16px;
}

.ait-hero-title em { font-style: normal; color: var(--green); }

.ait-hero-sub {
  font-size: 16px;
  font-weight: 300;
  color: #96a2b4;
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 14px;
}

.ait-hero-topics {
  font-family: var(--mono);
  font-size: 10px;
  color: #7a8898;
  letter-spacing: 0.13em;
  opacity: 0.9;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .ait-hero-topics {
    color: #6a7a88;
    opacity: 0.85;
    font-size: 9.5px;
    margin-bottom: 26px;
  }
  .ait-hero-inner .ait-hero-sub { max-width: 88%; }
}

/* Workflow category metadata — slightly dimmer than tool names */
.ait-hero-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  color: #4a5668;
  letter-spacing: 0.12em;
  margin-top: 6px;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .ait-hero-meta { font-size: 9px; opacity: 0.55; color: #3d4a58; }
}

/* Separator */
.ait-separator {
  position: relative;
  z-index: 1;
  padding: 24px 0 20px;
}

@media (max-width: 768px) {
  .ait-separator { padding: 28px 20px 8px; }
  .ait-pos-body { color: #96a4b4; margin-bottom: 28px; line-height: 1.78; }
}

.ait-separator-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ait-separator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.04) 70%, transparent);
}

.ait-separator-label {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.58);
  letter-spacing: 0.20em;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(0,200,160,0.12);
}

/* Positioning section */
.ait-positioning {
  padding: 56px 0 44px;
  background: rgba(10,14,20,0.5);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ait-pos-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}

.ait-pos-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 16px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .ait-pos-title { line-height: 1.06; font-size: clamp(20px, 5.5vw, 28px); margin-bottom: 22px; }
  .ait-cta-inner .section-title { margin-bottom: 10px; }
}

.ait-pos-body {
  font-size: 14px;
  font-weight: 300;
  color: #8a96a8;
  line-height: 1.7;
  margin-bottom: 8px;
  max-width: 390px;
}

.ait-pos-card {
  background: linear-gradient(140deg, #091910 0%, rgba(8,12,18,0.95) 100%);
  border: 1px solid rgba(0,200,160,0.16);
  border-radius: 14px;
  padding: 28px 32px;
  align-self: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,200,160,0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

@media (max-width: 768px) {
  .ait-pos-card { padding: 26px 28px; margin: 0 4px; }
}

.ait-pos-card:hover {
  border-color: rgba(0,200,160,0.26);
  box-shadow: 0 20px 52px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,200,160,0.08), 0 0 28px rgba(0,200,160,0.04);
}

.ait-pos-insight {
  font-size: 15.5px;
  font-weight: 300;
  color: #a8b4c0;
  line-height: 1.72;
}

.ait-pos-insight strong[style] {
  color: #00d4a8 !important;
  font-weight: 500;
  text-shadow: 0 0 14px rgba(0,200,160,0.18);
}

@media (max-width: 768px) {
  .ait-pos-insight br + strong[style],
  .ait-pos-insight p + p { margin-top: 14px; }
}

/* Supporting metadata under principle — muted, system-oriented */
.ait-pos-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: #6a7a8a;
  letter-spacing: 0.08em;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  line-height: 1.6;
}

/* Tool cards section */
.ait-tools-section { padding: 64px 0; }

.ait-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Alternating rhythm — prevents wall-of-identical-cards fatigue */
.ait-tools-grid .ait-tool-card:nth-child(even):not(.ait-tool-card--featured) {
  background: rgba(8,12,18,0.82);
  border-color: rgba(255,255,255,0.05);
}

/* Dark cards — slightly brighter body text for readability balance */
.ait-tools-grid .ait-tool-card:nth-child(even) .ait-tool-desc {
  color: #8e9eae;
}

.ait-tool-card {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition:
    border-color 0.25s ease,
    transform 0.3s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s ease;
}

.ait-tool-card:hover {
  border-color: rgba(0,200,160,0.22);
  transform: translateY(-4px);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.32),
    0 0 0 1px rgba(0,200,160,0.05),
    0 0 20px rgba(0,200,160,0.025);
}

.ait-tool-card--featured {
  border-color: rgba(0,200,160,0.11);
  background: linear-gradient(150deg, #081610 0%, rgba(8,12,18,0.95) 100%);
}

.ait-tool-card--featured:hover {
  border-color: rgba(0,200,160,0.22);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.38),
    0 0 0 1px rgba(0,200,160,0.05),
    0 0 18px rgba(0,200,160,0.03);
}

.ait-tool-header {
  display: flex;
  align-items: center;
  gap: 13px;
}

.ait-tool-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(0,200,160,0.06);
  border: 1px solid rgba(0,200,160,0.14);
  color: rgba(0,200,160,0.6);
  transition: color 0.2s ease, background 0.2s ease;
}

.ait-tool-card:hover .ait-tool-icon {
  color: rgba(0,200,160,0.85);
  background: rgba(0,200,160,0.09);
}

.ait-tool-card--featured .ait-tool-icon {
  background: rgba(0,200,160,0.1);
  border-color: rgba(0,200,160,0.22);
  color: rgba(0,200,160,0.75);
}

.ait-tool-name {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}

.ait-tool-card:hover .ait-tool-name { color: #eef4f0; }

.ait-tool-maker {
  font-family: var(--mono);
  font-size: 9.5px;
  color: #5a6878;
  letter-spacing: 0.08em;
  margin-top: 1px;
}

.ait-best-badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(0,200,160,0.7);
  background: rgba(0,200,160,0.07);
  border: 1px solid rgba(0,200,160,0.18);
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
}

.ait-tool-best-for {
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(0,200,160,0.75);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ait-tool-desc {
  font-size: 13.5px;
  font-weight: 300;
  color: #7a8898;
  line-height: 1.7;
  margin: 0;
}

.ait-tool-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 14px 16px;
}

.ait-detail-label {
  font-family: var(--mono);
  font-size: 9px;
  color: #526272;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.ait-detail-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ait-detail-list li {
  font-size: 12px;
  font-weight: 300;
  color: #8090a0;
  line-height: 1.45;
  padding-left: 12px;
  position: relative;
}

.ait-detail-list li::before {
  content: '·';
  position: absolute; left: 0;
  color: rgba(0,200,160,0.4);
  font-size: 14px;
  line-height: 1.2;
}

.ait-tool-example {
  background: rgba(0,200,160,0.025);
  border: 1px solid rgba(0,200,160,0.07);
  border-radius: 8px;
  padding: 14px 15px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #8a9aaa;
  line-height: 1.52;
  transition: border-color 0.2s ease;
}

.ait-tool-card:hover .ait-tool-example {
  border-color: rgba(0,200,160,0.13);
}

.ait-example-label {
  display: block;
  font-size: 9px;
  color: rgba(0,200,160,0.58);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

/* Stacks section */
.ait-stacks-section {
  padding: 64px 0;
  background: rgba(8,11,16,0.6);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ait-stacks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ait-stack-card {
  background: rgba(10,14,20,0.8);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 26px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition:
    border-color 0.25s ease,
    transform 0.3s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s ease;
}

.ait-stack-card:hover {
  border-color: rgba(0,200,160,0.22);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,200,160,0.06);
}

.ait-stack--solo { border-color: rgba(0,200,160,0.14); }

.ait-stack-label {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(0,200,160,0.58);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ait-stack-title {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.ait-stack-desc {
  font-size: 13px;
  font-weight: 300;
  color: #7a8898;
  line-height: 1.68;
}

.ait-stack-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 11px 0;
}

.ait-stack-tool {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}

.ait-st-name {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(0,200,160,0.62);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.ait-st-role {
  font-size: 10.5px;
  font-weight: 300;
  color: #5e6e80;
  text-align: right;
}

/* Workflow archetype label */
.ait-stack-archetype {
  font-family: var(--mono);
  font-size: 9.5px;
  color: #4e5e70;
  letter-spacing: 0.07em;
  line-height: 1.5;
  margin-top: 4px;
}

.ait-stack-note {
  font-size: 11.5px;
  font-weight: 300;
  color: #566070;
  line-height: 1.5;
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 10px;
  margin-top: 0;
}

/* Workflow chains */
.ait-chains-section { padding: 64px 0; }

.ait-chains-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.ait-chain-card {
  background: rgba(10,14,20,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    border-color 0.25s ease,
    transform 0.3s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s ease;
}

.ait-chain-card:hover {
  border-color: rgba(0,200,160,0.22);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,200,160,0.05);
}

.ait-chain-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ait-chain-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ait-chain-step {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  min-width: fit-content;
}

.ait-cs-tool {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green);
  letter-spacing: 0.06em;
  font-weight: 500;
}

.ait-cs-desc {
  font-size: 10px;
  color: #7a8898;
  font-weight: 300;
}

.ait-chain-arrow {
  font-family: var(--mono);
  font-size: 14px;
  color: rgba(0,200,160,0.22);
  flex-shrink: 0;
}

.ait-chain-note {
  font-size: 12px;
  font-weight: 300;
  color: #566070;
  line-height: 1.55;
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 12px;
  margin-top: 0;
  max-width: 92%;
}

/* CTA section */
.ait-cta-section {
  padding: 108px 0 80px;
  position: relative;
  overflow: hidden;
}

.ait-cta-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 360px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.04) 0%, transparent 65%);
  pointer-events: none;
}

.ait-cta-inner { max-width: 600px; margin: 0 auto; text-align: center; }

/* CTA form interaction polish */
.ait-cta-section .ae-hero-input:focus {
  border-color: rgba(0,200,160,0.5) !important;
  box-shadow: 0 0 0 3px rgba(0,200,160,0.06), 0 4px 16px rgba(0,200,160,0.08) !important;
}

.ait-cta-section .ae-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,200,160,0.32);
}

/* Responsive */
@media (max-width: 900px) {
  .ait-tools-grid { grid-template-columns: 1fr; }
  .ait-stacks-grid { grid-template-columns: 1fr; }
  .ait-chains-grid { grid-template-columns: 1fr; }
  .ait-pos-inner   { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 600px) {
  .ait-hero { padding: 76px 24px 44px; }
  .ait-tool-details { grid-template-columns: 1fr; }
  .ait-chain-flow { gap: 5px; }
  .ait-chains-grid { gap: 20px; }
  .ait-chain-card { padding: 20px 18px; gap: 12px; }

  /* Subtle stagger — each card's flow feels slightly different */
  .ait-chains-grid .ait-chain-card:nth-child(2) .ait-chain-flow { gap: 4px; }
  .ait-chains-grid .ait-chain-card:nth-child(3) .ait-chain-flow { gap: 6px; }
  .ait-chains-grid .ait-chain-card:nth-child(4) .ait-chain-flow { gap: 4px; gap: 4px; padding-bottom: 2px; }

  /* Market Research — last step gets slightly more width */
  .ait-chains-grid .ait-chain-card:nth-child(3) .ait-chain-step:last-of-type { min-width: 100px; }

  /* Meeting Intelligence — tighten vertical spacing */
  .ait-chains-grid .ait-chain-card:nth-child(4) { gap: 10px; }
  .ait-chains-grid .ait-chain-card:nth-child(4) .ait-chain-note { padding-top: 10px; }
}

/* ── BLOG PAGE ── */

/* Hero */
.blog-hero {
  position: relative;
  padding: 64px 0 32px;
  overflow: hidden;
}

/* Archive/category pages get tighter hero — utility focus, not editorial */
.blog-hero--archive {
  padding: 44px 24px 20px;
}

.blog-hero--archive .blog-hero-inner {
  max-width: 600px;
}

.blog-hero--archive .blog-hero-title {
  font-size: clamp(22px, 3vw, 34px);
  margin-bottom: 10px;
}

.blog-hero--archive .blog-hero-sub {
  font-size: 15px;
  color: #8a96a8;
  margin-bottom: 0;
  line-height: 1.65;
}

.blog-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.blog-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 16px;
}

.blog-hero-title em {
  font-style: normal;
  color: rgba(0,185,148,0.72);
}

.blog-hero-sub {
  font-size: 17px;
  font-weight: 300;
  color: #aab6c6;
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 10px;
}

.blog-hero-topics {
  font-family: var(--mono);
  font-size: 11px;
  color: #8a9eae;
  letter-spacing: 0.15em;
  margin-top: 4px;
  opacity: 0.96;
}

@media (max-width: 768px) {
  .blog-hero { padding: 48px 0 24px; }
  .blog-hero-inner { max-width: 100%; }
  .blog-hero-sub { max-width: 88%; font-size: 15px; }
  .blog-hero-inner .hero-badge { margin-top: 8px; }
  .blog-hero-topics { font-size: 10px; opacity: 0.7; color: #6a7a8a; margin-top: 8px; }
  .blog-hero-title { font-size: clamp(25px, 6.8vw, 36px); }
}

/* Topic nav */
/* ── CONTENT FILTER NAV (exploration/browsing layer) ── */
#content-filters {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  padding: 0 40px;
  opacity: 0.5;
  transition:
    background 0.35s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease;
}

/* Sticky state */
#content-filters.is-sticky {
  position: sticky;
  top: var(--sticky-top, 101px);
  z-index: 185;
  background: rgba(5,7,12,0.93);
  backdrop-filter: blur(24px) saturate(150%);
  border-bottom-color: rgba(255,255,255,0.06);
  box-shadow: 0 2px 20px rgba(0,0,0,0.32);
}

/* Desktop: keep the filter row sticky at all times so the browser pins it
   natively at its offset. Previously it was position:relative until JS added
   .is-sticky, which let it scroll up *behind* the fixed nav bars and then snap
   into place ("stuck under the top nav before it catches"). With permanent
   sticky it can never travel above top:var(--sticky-top); .is-sticky now only
   drives the frosted-background visual, not the positioning. */
@media (min-width: 769px) {
  #content-filters {
    position: sticky;
    top: var(--sticky-top, 101px);
    z-index: 185;
  }
}

.cf-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 9px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 90%, transparent 100%);
}

.cf-inner::-webkit-scrollbar { display: none; }

/* Contextual label — signals these are editorial destinations */
.cf-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(0,200,160,0.56);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  padding-right: 10px;
}

.cf-divider {
  width: 1px;
  height: 10px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  margin-right: 6px;
}

.cf-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  color: #7a8fa4;
  text-decoration: none;
  padding: 4px 14px;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  transition:
    color 0.18s ease,
    transform 0.18s cubic-bezier(0.16,1,0.3,1);
}

/* Underline indicator — editorial link, not filter pill */
.cf-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,200,160,0.5), transparent);
  opacity: 0;
  transform: scaleX(0.15);
  transition:
    opacity 0.22s ease,
    transform 0.3s cubic-bezier(0.16,1,0.3,1);
  transform-origin: center;
}

.cf-btn:hover {
  color: #9db0c4;
  transform: translateY(-1px);
}

.cf-btn:hover::after {
  opacity: 0.28;
  transform: scaleX(0.65);
}

/* Active: editorial destination — soft underline, not pill */
.cf-btn.active {
  color: #88c8b8;
}

.cf-btn.active::after {
  opacity: 0.55;
  transform: scaleX(1);
}

/* Mobile */
@media (max-width: 768px) {
  /* ── editorial-nav row ── */
  .editorial-nav-inner {
    padding: 0;
    height: 44px;
  }
  .editorial-nav-scroll {
    padding: 0 20px 0 16px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 2px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 82%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 82%, transparent 100%);
  }
  .editorial-nav-item {
    padding: 6px 13px;
    font-size: 10px;
  }
  .editorial-nav-item.active {
    color: rgba(0,200,160,0.85);
    background: rgba(0,200,160,0.07);
  }

  /* ── content-filters row ── */
  #content-filters {
    padding: 0;
    opacity: 0.65;
    background: rgba(5,7,12,0.97);
    backdrop-filter: blur(32px);
    position: relative;
    z-index: 189;
  }
  .cf-inner {
    padding: 6px 16px;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 82%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 82%, transparent 100%);
  }
  .cf-label { display: none; }
  .cf-divider { display: none; }
  .cf-btn {
    padding: 5px 14px;
    font-size: 10px;
  }
  .cf-btn.active {
    color: rgba(0,200,160,0.72);
    background: rgba(0,200,160,0.04);
    border-radius: 4px;
    padding: 5px 11px;
  }
  #content-filters.is-sticky { top: 117px; }

  /* ── spacing between second nav row and hero ── */
  body.blog .blog-hero,
  body.archive .blog-hero {
    padding-top: 36px;
  }
  body.blog .blog-featured,
  body.archive .blog-featured {
    padding-top: 24px;
  }
  #content-filters {
    margin-bottom: 14px;
  }
}

/* Main wrap */
.blog-main-wrap {
  position: relative;
  z-index: 1;
  padding: 48px 24px 80px;
}

/* Featured article */
.blog-featured {
  margin-bottom: 60px;
}

.blog-featured-inner {
  background: linear-gradient(135deg, #091610 0%, var(--ink2) 100%);
  border: 1px solid rgba(0,200,160,0.12);
  border-radius: 16px;
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  transition:
    border-color 0.3s ease,
    transform 0.35s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.3s ease;
}

.blog-featured-inner > * { min-width: 0; }

.blog-featured-inner:hover {
  border-color: rgba(0,200,160,0.28);
  transform: translateY(-4px);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.48),
    0 0 0 1px rgba(0,200,160,0.07),
    0 0 36px rgba(0,200,160,0.04);
}

/* Scale thumbnail on featured hover */
.blog-featured-inner:hover .blog-featured-visual {
  transform: scale(1.015);
}

.blog-featured-visual {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #080b10;
  line-height: 0;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}

/* Title brightens on featured hover */
.blog-featured-inner:hover .blog-featured-title a {
  color: #e8f2e8;
}

.blog-featured-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.blog-meta-sep { color: var(--muted); font-size: 12px; }

.blog-read-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  vertical-align: middle;
}

.blog-featured-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--text);
}

@media (max-width: 768px) {
  .blog-featured-title {
    font-size: clamp(22px, 5.5vw, 28px);
    letter-spacing: -0.03em;
    max-width: 100%;
  }
}

.blog-featured-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.blog-featured-title a:hover { color: var(--green); }

.blog-featured-excerpt {
  font-size: 15px;
  font-weight: 300;
  color: #7a8898;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 520px;
}

@media (max-width: 768px) {
  .blog-featured-excerpt { font-size: 14px; max-width: 86%; }
  .blog-featured-cta { margin-bottom: 8px; }
}

.blog-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: rgba(0,200,160,0.8) !important;
  background: rgba(0,200,160,0.06);
  border: 1px solid rgba(0,200,160,0.2);
  border-radius: 7px;
  text-decoration: none !important;
  letter-spacing: 0.06em;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.28s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
  margin-bottom: 4px;
}

.blog-featured-cta:hover {
  color: var(--green) !important;
  border-color: rgba(0,200,160,0.4);
  background: rgba(0,200,160,0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,200,160,0.12);
  text-decoration: none !important;
}

.blog-featured-visual {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  background: #080b10;
  line-height: 0;
}

.blog-featured-img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: unset !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 10px;
  display: block !important;
}

.blog-featured-placeholder {
  background: rgba(0,200,160,0.04);
  border: 1px solid rgba(0,200,160,0.1);
  border-radius: 10px;
  height: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.blog-fp-inner { text-align: center; }

.blog-fp-title {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Section header */
/* ── ARCHIVE FEATURED GUIDE ── */
.arc-featured {
  margin-bottom: 44px;
}

.arc-featured-inner {
  background: linear-gradient(135deg, #091910 0%, #0d1520 100%);
  border: 1px solid rgba(0,200,160,0.2);
  border-radius: 16px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  box-shadow:
    0 2px 0 0 rgba(0,200,160,0.08) inset,
    0 16px 48px rgba(0,0,0,0.4),
    0 4px 16px rgba(0,0,0,0.2),
    0 0 0 1px rgba(0,0,0,0.2);
}

.arc-featured-inner > * { min-width: 0; }

.arc-featured-inner:hover {
  border-color: rgba(0,200,160,0.32);
  transform: translateY(-3px);
  box-shadow:
    0 2px 0 0 rgba(0,200,160,0.1) inset,
    0 24px 64px rgba(0,0,0,0.5),
    0 8px 24px rgba(0,0,0,0.25),
    0 0 40px rgba(0,200,160,0.06),
    0 0 0 1px rgba(0,0,0,0.2);
}

.arc-featured-inner:hover .arc-featured-title a {
  color: #eef4ee;
}

.arc-featured-meta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}

.arc-featured-badge {
  background: rgba(0,200,160,0.14) !important;
  border-color: rgba(0,200,160,0.3) !important;
}

.arc-featured-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.arc-featured-title a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s;
}

.arc-featured-title a:hover { color: var(--green); }

.arc-featured-excerpt {
  font-size: 14px;
  font-weight: 300;
  color: #8a96a8;
  line-height: 1.7;
  margin-bottom: 22px;
}

.arc-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Editorial utility layer — audience/outcome framing */
.arc-featured-audience {
  font-family: var(--mono);
  font-size: 11px;
  color: #6a7a6a;
  line-height: 1.6;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  border-left: 2px solid rgba(0,200,160,0.15);
  padding-left: 10px;
}

.arc-audience-icon {
  color: rgba(0,200,160,0.3);
  font-size: 7px;
  margin-top: 4px;
  flex-shrink: 0;
  display: none; /* icon handled by border-left */
}

.arc-featured-inner:hover .arc-featured-cta {
  box-shadow: 0 4px 20px rgba(0,200,160,0.3);
}

.arc-featured-visual {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #080b10;
  line-height: 0;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.arc-featured-inner:hover .arc-featured-visual {
  transform: scale(1.02);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}

.arc-featured-img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: unset !important;
  display: block !important;
  border-radius: 10px;
}

/* ── SECTION HEADER ── */
.blog-section-header {
  margin-bottom: 28px;
}

.blog-section-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 6px;
}

/* Posts grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 0;
}

/* Blog card */
.blog-card {
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.25s ease,
    transform 0.3s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.3s ease;
}

.blog-card:hover {
  border-color: rgba(0,200,160,0.24);
  transform: translateY(-5px);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.32),
    0 0 0 1px rgba(0,200,160,0.07),
    0 0 28px rgba(0,200,160,0.04);
}

.blog-card:hover .blog-card-title a {
  color: #ddeedd;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .blog-card-meta { gap: 6px; }
}

.blog-read-time {
  font-family: var(--mono);
  font-size: 10px;
  color: #6a7585;
  letter-spacing: 0.06em;
}

.blog-meta-sep {
  color: rgba(0,200,160,0.35);
  font-size: 10px;
  line-height: 1;
}

.blog-cat-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--green);
  background: rgba(0,200,160,0.08);
  border: 1px solid rgba(0,200,160,0.16);
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

/* Content-type color taxonomy — restrained, not neon */
.blog-cat-tag[data-type="workflow"],
.blog-cat-tag[data-type="system"] {
  color: #00c8a0;
  background: rgba(0,200,160,0.08);
  border-color: rgba(0,200,160,0.18);
}

.blog-cat-tag[data-type="briefing"] {
  color: #60a8d8;
  background: rgba(96,168,216,0.08);
  border-color: rgba(96,168,216,0.2);
}

.blog-cat-tag[data-type="framework"],
.blog-cat-tag[data-type="playbook"] {
  color: #a990d8;
  background: rgba(169,144,216,0.08);
  border-color: rgba(169,144,216,0.18);
}

.blog-cat-tag[data-type="analysis"] {
  color: #60c8c8;
  background: rgba(96,200,200,0.08);
  border-color: rgba(96,200,200,0.18);
}

.blog-cat-tag[data-type="guide"] {
  color: #88b890;
  background: rgba(136,184,144,0.08);
  border-color: rgba(136,184,144,0.18);
}

.blog-cat-tag--featured {
  background: rgba(0,200,160,0.12);
  border-color: rgba(0,200,160,0.28);
}

.blog-card-title {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 10px;
  flex: 1;
}

@media (max-width: 768px) {
  .blog-card-title {
    font-size: 15.5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: none;
    margin-bottom: 14px;
  }
}

.blog-card-title a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}

.blog-card-title a:hover { color: var(--green); }

.blog-card-excerpt {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.62;
  margin-bottom: 0;
  flex: 1;
}

.blog-card-link {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(0,200,160,0.8);
  text-decoration: none;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.28s cubic-bezier(0.16,1,0.3,1), color 0.2s ease;
  margin-top: 20px;
  font-weight: 500;
}

.blog-card-link:hover { gap: 11px; color: #14e8b8; }

.blog-card-arrow {
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
  display: inline-block;
}
.blog-card-link:hover .blog-card-arrow { transform: translateX(3px); }

/* Inline + footer CTA blocks */
.blog-cta-block,
.blog-footer-cta {
  background: linear-gradient(160deg, rgba(8,14,22,0.95) 0%, var(--ink2) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(0,200,160,0.12);
  border-radius: 16px;
  padding: 60px 24px 44px;
  margin: 68px 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.blog-cta-block::before,
.blog-footer-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,160,0.18) 50%, transparent);
  pointer-events: none;
}

.blog-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.blog-footer-cta {
  border-radius: 16px;
  border: 1px solid var(--border);
  margin: 60px 0 0;
  padding: 56px 40px 40px;
}

/* Pagination */
.blog-pagination {
  padding: 40px 0 0;
  display: flex;
  justify-content: center;
}

.blog-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.blog-pagination .page-numbers {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: 0.06em;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
  color: var(--green);
  border-color: rgba(0,200,160,0.3);
  background: rgba(0,200,160,0.06);
}

/* Empty state */
.blog-empty {
  text-align: center;
  padding: 80px 0;
}

/* Responsive */
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured-inner { grid-template-columns: 1fr; gap: 28px; }
  .arc-featured-inner  { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .arc-featured-visual { order: -1; }
  .blog-featured-visual { display: none; }
}

@media (max-width: 600px) {
  .blog-hero { padding: 76px 24px 40px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-cta-block, .blog-footer-cta {
    margin: 28px -20px 0;
    padding: 40px 20px;
    position: relative;
  }
  .blog-cta-block::after,
  .blog-footer-cta::after {
    content: '';
    position: absolute;
    bottom: -40px; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(to bottom, var(--ink2) 0%, transparent 100%);
    pointer-events: none;
  }
  .blog-cta-block::before,
  .blog-footer-cta::before {
    content: '';
    position: absolute;
    bottom: -1px; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,200,160,0.12) 40%, rgba(0,200,160,0.12) 60%, transparent);
    pointer-events: none;
  }
  .blog-footer-cta { margin: 28px 0 0; padding: 36px 20px; border-radius: 10px; }
}

/* ── THANK YOU PAGE ── */
.ty-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 80px;
  overflow: hidden;
}

.ty-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.ty-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 600px;
  width: 100%;
}

.ty-headline {
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.ty-headline em {
  font-style: normal;
  color: var(--green);
}

.ty-sub {
  font-size: 16px;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.6;
}

.ty-spam {
  font-family: var(--mono);
  font-size: 11px;
  color: #7a8699;
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}

/* what's inside card */
.ty-pack {
  background: rgba(0,200,160,0.05);
  border: 1px solid rgba(0,200,160,0.18);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 28px;
  text-align: left;
}

.ty-pack-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green);
  letter-spacing: 0.16em;
  margin-bottom: 16px;
  opacity: 0.9;
}

.ty-pack-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ty-pack-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #c0c8d8;
  font-weight: 300;
  line-height: 1.5;
}

.ty-check {
  color: var(--green);
  font-size: 13px;
  flex-shrink: 0;
}

/* CTA buttons */
.ty-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.ty-btn-primary {
  padding: 14px 28px;
  font-size: 14px;
}

.ty-btn-ghost {
  padding: 14px 28px;
  font-size: 14px;
  border-color: rgba(0,200,160,0.25);
}

/* Quiet secondary text link (sits next to the ghost button) */
.ty-link-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #8893a6;
  text-decoration: none;
  transition: color 0.2s ease, gap 0.22s cubic-bezier(0.16,1,0.3,1);
}

.ty-link-secondary:hover,
.ty-link-secondary:focus-visible {
  color: var(--text);
  gap: 10px;
  outline: none;
}

.ty-link-arrow {
  color: var(--green);
  display: inline-block;
  transition: transform 0.2s ease;
}

.ty-link-secondary:hover .ty-link-arrow {
  transform: translateX(2px);
}

.ty-back {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.ty-back:hover { color: var(--text); }

@media (max-width: 600px) {
  .ty-actions { flex-direction: column; align-items: center; }
  .ty-btn-primary, .ty-btn-ghost { width: 100%; text-align: center; }
  .ty-pack { padding: 20px; }
}

/* ── FREE DOWNLOAD (LEAD MAGNET) PAGE ── */
.dl-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 24px 90px;
  overflow: hidden;
}

.dl-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  text-align: center;
}

/* primary action = PDF download */
.dl-download-btn {
  font-size: 15px;
  padding: 16px 34px;
}

.dl-next {
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.dl-next-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--green);
  opacity: 0.85;
  margin: 0 0 10px;
}

.dl-next-heading {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 24px;
}

.dl-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  text-align: left;
}

.dl-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 112px;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(160deg, rgba(14,20,28,0.9) 0%, rgba(8,12,18,0.95) 100%);
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.28s ease, transform 0.32s cubic-bezier(0.16,1,0.3,1), box-shadow 0.28s ease;
}

.dl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; right: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,200,160,0.5), transparent);
  opacity: 0;
  transition: left 0.35s cubic-bezier(0.16,1,0.3,1), right 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease;
}

.dl-card:hover {
  border-color: rgba(0,200,160,0.2);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.36), 0 0 0 1px rgba(0,200,160,0.06), 0 0 28px rgba(0,200,160,0.04);
}

.dl-card:hover::before { left: 15%; right: 15%; opacity: 1; }

.dl-card-title {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
  transition: color 0.22s ease;
}

.dl-card:hover .dl-card-title { color: #e8f2ec; }

.dl-card-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(0,200,160,0.55);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.18s ease, gap 0.22s cubic-bezier(0.16,1,0.3,1);
}

.dl-card:hover .dl-card-cta { color: var(--green); gap: 8px; }

@media (max-width: 680px) {
  .dl-cards { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .dl-page { padding: 100px 18px 64px; }
  .dl-download-btn { width: 100%; text-align: center; justify-content: center; }
  .dl-next { margin-top: 36px; padding-top: 32px; }
}

/* ── WORDPRESS CONTENT STYLES ── */
.entry-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 80px;
  color: var(--text);
}

.entry-content h1,
.entry-content h2,
.entry-content h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
  margin-top: 40px;
}

/* Exclude ait-hero titles from entry-content overrides */
.entry-content .ait-hero-title,
.entry-content h1.ait-hero-title {
  font-size: clamp(30px, 4vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 16px !important;
  margin-top: 0 !important;
}

.entry-content h1 { font-size: clamp(28px, 4vw, 42px); }
.entry-content h2 { font-size: clamp(22px, 3vw, 32px); }
.entry-content h3 { font-size: clamp(18px, 2.5vw, 24px); }

.entry-content p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

/* Exclude ait-hero paragraphs from entry-content p overrides */
.entry-content .ait-hero-sub,
.entry-content .ait-hero-topics,
.entry-content .ait-hero-meta {
  color: unset !important;
  font-size: unset !important;
  margin-bottom: unset !important;
}

/* High-specificity overrides for ait-hero inside entry-content (cart page) */
.woo-page-wrap .ait-hero-sub,
section.ait-hero p.ait-hero-sub,
.entry-content p.ait-hero-sub {
  font-size: 16px !important;
  color: #96a2b4 !important;
  line-height: 1.75 !important;
  font-weight: 300 !important;
  margin-bottom: 14px !important;
  max-width: 520px !important;
}

/* Checkout sub slightly dimmer — faster transition to action */
.ae-checkout-hero-section p.ait-hero-sub {
  color: #7a8898 !important;
  font-size: 14.5px !important;
}

.woo-page-wrap .ait-hero-topics,
section.ait-hero p.ait-hero-topics,
.entry-content p.ait-hero-topics {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: #8a9aaa !important;
  letter-spacing: 0.15em !important;
  opacity: 1 !important;
  margin-bottom: 0 !important;
  line-height: 1.6 !important;
}

.woo-page-wrap .ait-hero-meta,
section.ait-hero p.ait-hero-meta,
.entry-content p.ait-hero-meta {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  color: #4a5668 !important;
  letter-spacing: 0.12em !important;
  margin-top: 6px !important;
  opacity: 0.8 !important;
  margin-bottom: 0 !important;
}

.entry-content a { color: var(--green); text-decoration: underline; }
.entry-content a:hover { opacity: 0.8; }

/* Strip entry-content styles from WooCommerce cart/checkout wrappers */
/* Only target truly empty p tags — not p tags wrapping our anchors */
.ae-cart-wrap p:empty,
.ae-checkout-wrap p:empty {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* p tags wrapping our custom anchors — strip only the styling, keep display */
.ae-cart-totals-wrap > p,
.ae-ecosystem-nav-wrap > p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  border: none !important;
  background: none !important;
  min-height: 0 !important;
}

/* Suppress bare p tags WooCommerce injects around our cart sections */
.ae-cart-inner > p,
.ae-cart-inner > p:empty,
.ae-cart-wrap > p,
.ae-cart-wrap > p:empty,
.woo-page-wrap .entry-content > p,
.woo-page-wrap .entry-content > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

.ae-cart-wrap .entry-content a,
.ae-checkout-wrap .entry-content a {
  text-decoration: none !important;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 20px 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.entry-content blockquote {
  border-left: 3px solid var(--green);
  padding: 12px 20px;
  margin: 24px 0;
  background: rgba(0,200,160,0.04);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--muted);
}

.entry-content code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--ink2);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--green);
}

.entry-content pre {
  background: var(--ink2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  overflow-x: auto;
  margin-bottom: 20px;
}

.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
}

.entry-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 24px;
}

/* Single post hero — must be smaller than default entry-title */
.sp-hero-inner .entry-title,
.sp-hero-inner .sp-title,
.sp-hero-inner h1 {
  font-size: 32px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}

.entry-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: 48px;
}

.page-wrapper {
  position: relative;
  z-index: 1;
  padding: 120px 24px 80px;
}

/* ── LEGAL / CONTENT PAGES (default page template) ─────────────────────────── */
.page-wrapper .entry-content {
  max-width: 680px;
}

/* Section headings — smaller, mono-flavoured, with a subtle rule */
.page-wrapper .entry-content h2 {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--green) !important;
  margin-top: 48px !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Sub-headings */
.page-wrapper .entry-content h3 {
  font-family: 'Syne', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-top: 28px !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.01em !important;
}

/* Body text — slightly muted, tighter than blog */
.page-wrapper .entry-content p {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: var(--muted) !important;
  margin-bottom: 16px !important;
}

/* Bold text inside paragraphs stays readable */
.page-wrapper .entry-content p strong,
.page-wrapper .entry-content li strong {
  color: var(--text);
  font-weight: 600;
}

/* Lists */
.page-wrapper .entry-content ul,
.page-wrapper .entry-content ol {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: var(--muted) !important;
  margin: 0 0 16px 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.page-wrapper .entry-content ul li,
.page-wrapper .entry-content ol li {
  padding-left: 18px !important;
  position: relative !important;
  margin-bottom: 6px !important;
}

.page-wrapper .entry-content ul li::before {
  content: "//";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--green);
  opacity: 0.7;
  top: 4px;
  letter-spacing: -0.05em;
}

.page-wrapper .entry-content ol {
  counter-reset: legal-counter;
}

.page-wrapper .entry-content ol li::before {
  content: counter(legal-counter) ".";
  counter-increment: legal-counter;
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green);
  opacity: 0.7;
  top: 2px;
}

/* Links — subtle, no underline by default */
.page-wrapper .entry-content a {
  color: var(--green) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0,200,160,0.25) !important;
  transition: border-color 0.2s !important;
}

.page-wrapper .entry-content a:hover {
  border-bottom-color: var(--green) !important;
  opacity: 1 !important;
}

/* Intro paragraph (first p after date) — slightly lighter */
.page-wrapper .entry-content > p:first-of-type {
  font-size: 15px !important;
  color: rgba(226,230,240,0.6) !important;
}

/* Date/last updated line */
.page-wrapper .entry-content > p:first-child em {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-style: normal;
}

/* ── SOCIAL SHARE BAR ────────────────────────────────────────────────────────── */
.sp-share {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 40px 0 16px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.sp-share-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-right: 4px;
  flex-shrink: 0;
}

.sp-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 13px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  letter-spacing: 0.04em;
}

.sp-share-btn:hover {
  color: var(--green);
  border-color: rgba(0,200,160,0.35);
  background: rgba(0,200,160,0.06);
  text-decoration: none;
}

.sp-share-btn.copied {
  color: var(--green);
  border-color: rgba(0,200,160,0.35);
}

button.sp-share-btn {
  background: rgba(255,255,255,0.04);
  outline: none;
}

/* ── Mobile order-info card layout ──
   Placed after the desktop .ae-ty-meta rules so it wins the cascade on mobile.
   Row 1: Order · Date  |  Row 2: Email (full width)  |  Row 3: Total · Payment */
@media (max-width: 768px) {
  /* Clear the fixed navbar so the "// Order Confirmed" badge isn't hidden.
     Placed here (after the desktop rule) so it wins on mobile, like the
     cart/checkout heroes which also use 88px top. */
  .ae-thankyou-hero.ait-hero { padding: 88px 0 12px; }
  .ae-ty-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.06);
  }
  .ae-ty-meta-item {
    flex: none;
    min-width: 0;
    border: none;
    background: var(--ink2);
  }
  .ae-ty-meta-email { grid-column: 1 / -1; }
  /* Prefer keeping the address on one line; break only if it overflows,
     and never force character-level wrapping. */
  .ae-ty-meta-value {
    word-break: normal;
    overflow-wrap: break-word;
  }
  .ae-ty-meta-email .ae-ty-meta-value { overflow-wrap: anywhere; }
}

/* ════════════════════════════════════════════════════════════════════
   BLOG SUBCATEGORY (archive) — final mobile polish pass
   Appended last so these rules win the cascade over earlier blog styles.
   ════════════════════════════════════════════════════════════════════ */

/* (1) Featured "Read guide →" — teal text link matching the other guide
   links (no default browser underline). Applies on all viewports. */
.arc-featured-cta {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(0,200,160,0.85);
  text-decoration: none;
  background: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 2px 2px 2px 0;
  border-radius: 4px;
  transition: gap 0.28s cubic-bezier(0.16,1,0.3,1), color 0.2s ease;
}
.arc-featured-cta:hover { gap: 12px; color: #14e8b8; }
.arc-featured-cta:focus-visible {
  outline: 2px solid rgba(0,200,160,0.7);
  outline-offset: 4px;
  color: #14e8b8;
}
.arc-featured-inner:hover .arc-featured-cta { color: #14e8b8; box-shadow: none; }

@media (max-width: 768px) {
  /* (6) Consistent content width — let the inner .container (20px) be the
     single side-padding source so hero, featured, cards, headings and the
     footer all align to the same edge. (Scoped to archive/subcategory.) */
  body.archive .blog-main-wrap,
  body.category .blog-main-wrap,
  body.tag .blog-main-wrap {
    padding: 22px 0 56px;            /* (4) top gap · (7) ~56px before footer */
  }

  /* (4) Tighten the gap below the hero so the featured guide appears sooner,
     while keeping clear section separation. */
  body.archive .blog-hero--archive,
  body.category .blog-hero--archive,
  body.tag .blog-hero--archive {
    padding: 30px 0 14px;
  }

  /* (3) Compact the premium featured guide card (styling preserved).
     1-column stack + image-on-top continue to come from the ≤900px rule. */
  .arc-featured { margin-bottom: 28px; }
  .arc-featured--last { margin-bottom: 0; }            /* (7) when list hidden */
  .arc-featured-inner { gap: 16px; padding: 18px 18px 20px; }
  .arc-featured-meta { margin-bottom: 9px; }
  .arc-featured-title {
    font-size: clamp(18px, 5.2vw, 22px);
    line-height: 1.22;
    margin-bottom: 8px;
  }
  .arc-featured-excerpt {
    font-size: 13.5px; line-height: 1.55; margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .arc-featured-audience {
    font-size: 10.5px; line-height: 1.5; margin-bottom: 14px; padding-left: 9px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .arc-featured-cta { margin-top: 0; font-size: 12px; }
  .arc-featured-visual { border-radius: 8px; max-height: 172px; }
  .arc-featured-visual .arc-featured-img { height: 172px !important; object-fit: cover; }

  /* (8) Keep regular guide cards compact. */
  .blog-card { padding: 20px; }
  .blog-card-excerpt {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .blog-card-link { margin-top: 14px; }

  /* (5) Broad category navigation — clean horizontal scroll, nothing clipped. */
  .cf-inner {
    padding: 6px 20px;                 /* first item aligns to 20px content edge */
    flex-wrap: nowrap;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  .cf-inner::after { content: ''; flex: 0 0 6px; }     /* trailing space so last item clears */
  .cf-btn { flex-shrink: 0; }
  #content-filters { opacity: 0.92; }                  /* keep active state legible */
  .cf-btn.active {
    color: rgba(0,200,160,0.95);
    background: rgba(0,200,160,0.1);
    border-radius: 4px;
    padding: 5px 11px;
  }

  /* (5) Broad content-category nav (editorial "Knowledge Verticals") —
     same clean-scroll treatment so the last item isn't clipped on the right. */
  .editorial-nav-scroll {
    padding-left: 16px;
    padding-right: 20px;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
  .editorial-nav-scroll::after { content: ''; flex: 0 0 6px; }
  .editorial-nav-item { flex-shrink: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   BLOG HOME featured card (.blog-featured) — mobile compaction only.
   Appended last to win the cascade; desktop (>768px) untouched.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Outer gutter ≈24px (card lives in .container 20px inside .blog-main-wrap
     24px = 44px inset on the home; pull out 20px to reach ~24px). Not edge-to-edge. */
  .blog-featured {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 36px;
  }
  /* Internal padding: 24px sides · ~32px top/bottom — widens the content column. */
  .blog-featured-inner { padding: 32px 24px; }

  .blog-featured-meta { margin-bottom: 24px; }        /* metadata → title */

  .blog-featured-title {
    font-size: clamp(20px, 5vw, 25px);                /* ~8–10% smaller */
    line-height: 1.1;                                 /* tighter */
    margin-bottom: 20px;                              /* title → description */
    max-width: 100%;
  }

  .blog-featured-excerpt {
    margin-bottom: 20px;                              /* description → note */
    max-width: 100%;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }

  .blog-featured .arc-featured-audience {
    margin-bottom: 24px;                              /* note → CTA */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  .blog-featured-cta { margin-top: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   Top category nav (#editorial-nav) — single clean bottom divider (mobile).
   The container's own border-bottom is the one divider; drop the 8px dark
   strip + redundant 1px line that made it look inset/doubled. Appended last
   to win the cascade. Mobile only — desktop and the secondary filter untouched.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #editorial-nav {
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);   /* ambient only — no extra line, no dark band */
  }
  .editorial-nav-inner {
    box-sizing: border-box;
    align-items: center;                       /* items vertically centered, fills the bar */
  }
}

/* ════════════════════════════════════════════════════════════════════
   Close the gap between the two sticky bars (mobile).
   #editorial-nav ends at ~110px; tuck the secondary filter flush beneath it
   so no hero content shows between them. #editorial-nav (z-index 190) sits
   above #content-filters (185), so a ~2px overlap is hidden and the top
   nav's clean border-bottom remains the divider between the bars.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #content-filters.is-sticky { top: 108px; }
}

/* ════════════════════════════════════════════════════════════════════
   Navbar bottom divider alignment (mobile).
   The mobile rule added a 4px solid band (0 4px 0 #050710) below the navbar,
   extending the dark bar past its border so the divider looked inset/misaligned.
   Drop the band; the border-bottom is the single divider at the true bottom edge.
   Appended last + !important to beat the earlier mobile rule.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #navbar,
  #navbar.scrolled {
    box-shadow: 0 5px 20px rgba(0,0,0,0.5) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Home page: remove the stray transition line under the marquee on mobile.
   .section-divider--soft (the post-marquee divider) becomes a full-width
   green-gradient line floating ~16px below the ticker on mobile, reading as
   an unintended line under the scrolling bar. Hide it on mobile; the marquee
   keeps its own clean borders. Desktop unchanged.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section-divider--soft { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Home page (mobile): match the sub-header → first-card gap to the
   marquee → section-tag gap (44px = .fp-verticals-section padding-top).
   Zero the sub-header's bottom margin and put the full gap on the grid.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .fp-verticals-section .section-sub { margin-bottom: 0; }
  .fp-verticals-grid { margin-top: 44px; }
}


/* ════════════════════════════════════════════════════════════
   WEEKLY EMAIL SIGNUP PAGE (/weekly-email/)
   ════════════════════════════════════════════════════════════ */
.we-page { position: relative; overflow: hidden; }

/* ── HERO ── */
.we-hero {
  position: relative;
  padding: 118px 24px 52px;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.we-hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }

.we-h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 20px;
}
.we-h1 em { font-style: normal; color: var(--green); }

.we-hero-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: #9aa3b0;
  max-width: 560px;
  margin: 0 auto 34px;
}

.we-helper {
  margin: 14px 0 0;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}

/* ── SECTIONS ── */
.we-section { position: relative; padding: 74px 24px; }
.we-hero + .we-section { padding-top: 56px; }
.we-section--alt {
  background: rgba(255,255,255,0.015);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.we-section-inner { max-width: 1080px; margin: 0 auto; }
.we-narrow { max-width: 760px; }

.we-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 14px;
}
.we-h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 32px;
}
.we-body {
  font-size: 16px;
  line-height: 1.7;
  color: #9aa3b0;
  margin: -14px 0 30px;
  max-width: 640px;
}

/* ── CARDS (What you'll get) ── */
.we-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.we-card {
  position: relative;
  overflow: hidden;
  padding: 24px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(160deg, rgba(14,20,28,0.9) 0%, rgba(8,12,18,0.95) 100%);
  transition: border-color 0.28s ease, transform 0.32s cubic-bezier(0.16,1,0.3,1), box-shadow 0.28s ease;
}
.we-card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; right: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,200,160,0.5), transparent);
  opacity: 0;
  transition: left 0.35s cubic-bezier(0.16,1,0.3,1), right 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease;
}
.we-card:hover {
  border-color: rgba(0,200,160,0.2);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.36), 0 0 28px rgba(0,200,160,0.04);
}
.we-card:hover::before { left: 15%; right: 15%; opacity: 1; }
.we-card-title { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin: 0 0 8px; }
.we-card-desc { font-size: 14px; line-height: 1.6; color: #9aa3b0; margin: 0; }

/* ── LIST (Who it's for) ── */
.we-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.we-list li {
  position: relative;
  padding: 0 0 0 28px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #c2cad6;
}
.we-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(0,200,160,0.5);
}

/* ── BUILT FOR (two-column: text left, checklist card right) ── */
.we-built {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.we-built .we-body { margin: -6px 0 0; }
.we-built-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(160deg, rgba(21,27,37,0.92) 0%, rgba(14,18,25,0.96) 100%);
  padding: 30px 32px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.28);
}
.we-built-card .we-list { gap: 14px; }

/* ── TOPICS ── */
.we-topics { display: grid; gap: 10px; max-width: 720px; }
.we-topic {
  position: relative;
  padding: 16px 20px 16px 46px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 2px solid rgba(0,200,160,0.4);
  background: rgba(14,20,28,0.6);
  font-size: 15px;
  line-height: 1.5;
  color: #c2cad6;
  transition: border-left-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.we-topic::before {
  content: '//';
  position: absolute;
  left: 18px; top: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--green);
  opacity: 0.7;
}
.we-topic:hover { border-left-color: var(--green); background: rgba(14,20,28,0.92); transform: translateX(3px); }

/* ── FINAL CTA ── */
.we-final { position: relative; padding: 60px 24px 96px; border-top: 1px solid rgba(255,255,255,0.04); }
.we-final-card {
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 42px 40px;
  border-radius: 20px;
  border: 1px solid rgba(0,200,160,0.18);
  background: linear-gradient(160deg, rgba(10,26,21,0.7) 0%, rgba(14,18,25,0.92) 100%);
}
.we-final-h { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.16; letter-spacing: -0.02em; color: var(--text); margin: 0 0 14px; }
.we-final-sub { font-size: 16px; line-height: 1.6; color: #9aa3b0; max-width: 520px; margin: 0 auto 28px; }

/* ── MOBILE ── */
@media (max-width: 880px) {
  .we-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .we-hero { padding: 100px 18px 54px; }
  .we-section { padding: 50px 18px; }
  .we-hero + .we-section { padding-top: 42px; }
  .we-final { padding: 50px 18px 70px; }
  .we-final-card { padding: 36px 22px; }
  .we-cards { grid-template-columns: 1fr; gap: 14px; }
  .we-h2 { margin-bottom: 24px; }
  .we-body { margin-top: -8px; }
  .we-built { grid-template-columns: 1fr; gap: 24px; }
  .we-built .we-body { margin-bottom: 0; }
  .we-built-card { padding: 24px 22px; }
}
@media (max-width: 600px) {
  .we-hero-sub { font-size: 15px; }
  .we-hero { padding-top: 92px; }
}

/* ── CONTACT PAGE ─────────────────────────────────────────────────
   Self-contained; mirrors the proven .ty-* (thank-you) layout values. */
.contact-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 80px;
  overflow: hidden;
}
.contact-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.contact-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 580px;
  width: 100%;
}
.contact-headline {
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.contact-headline em { font-style: normal; color: var(--green); }
.contact-sub {
  font-size: 16px;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 32px;
  line-height: 1.6;
}
.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.contact-btn-primary { padding: 14px 28px; font-size: 14px; }
.contact-email {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--green);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.2s;
}
.contact-email:hover { color: var(--text); }
.contact-card {
  background: rgba(0,200,160,0.05);
  border: 1px solid rgba(0,200,160,0.18);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 28px;
  text-align: left;
}
.contact-card-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--green);
  letter-spacing: 0.16em;
  margin-bottom: 16px;
  opacity: 0.9;
}
.contact-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-card-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #c0c8d8;
  font-weight: 300;
  line-height: 1.5;
}
.contact-check { color: var(--green); font-size: 13px; flex-shrink: 0; }
.contact-meta {
  font-size: 13px;
  font-weight: 300;
  color: #8893a6;
  line-height: 1.7;
  margin-bottom: 30px;
}
.contact-meta a { color: var(--green); text-decoration: none; transition: color 0.2s; }
.contact-meta a:hover { color: var(--text); }
.contact-back {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}
.contact-back:hover { color: var(--text); }

/* ── LEGAL PAGES (Privacy / Terms) ─────────────────────────────────
   Branded header + prose column that styles raw editor content. */
.legal-page {
  position: relative;
  padding: 100px 24px 90px;
  overflow: hidden;
}
.legal-page .hero-grid { height: 460px; inset: 0 0 auto 0; } /* grid only behind the header */
.legal-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 380px;
  background: radial-gradient(ellipse, rgba(0,200,160,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.legal-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.legal-header { text-align: center; margin-bottom: 48px; }
.legal-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.legal-updated {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin: 0;
}
.legal-prose {
  font-size: 15px;
  line-height: 1.78;
  font-weight: 300;
  color: #c0c8d8;
}
.legal-prose > *:first-child { margin-top: 0; }
.legal-prose h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 2.2em 0 0.6em;
}
.legal-prose h3 {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 1.8em 0 0.5em;
}
.legal-prose p { margin: 0 0 1.1em; }
.legal-prose ul,
.legal-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.legal-prose li { margin: 0 0 0.5em; }
.legal-prose a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,200,160,0.3);
  transition: border-color 0.2s, color 0.2s;
}
.legal-prose a:hover { color: var(--text); border-color: var(--text); }
.legal-prose strong { color: var(--text); font-weight: 600; }
.legal-prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.2em 0; }
.legal-prose blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 18px;
  border-left: 2px solid rgba(0,200,160,0.4);
  color: var(--muted);
}
.legal-prose code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--ink3);
  padding: 2px 6px;
  border-radius: 4px;
}
.legal-empty { color: var(--muted); font-style: italic; }
@media (max-width: 600px) {
  .legal-page { padding: 84px 20px 64px; }
  .legal-header { margin-bottom: 36px; text-align: left; }
  .legal-prose { font-size: 14.5px; }
}

/* ── Chrome autofill on checkout ──────────────────────────────────
   Chrome paints autofilled fields with a pale background that plain
   `background` can't override; only an inset box-shadow masks it. The
   .woocommerce inputs already carry `box-shadow: none !important`, so
   these selectors mirror that .woocommerce scope (+ :-webkit-autofill)
   to out-rank it. Field colour #0e1219 = --ink2. */
body.woocommerce-checkout .woocommerce input:-webkit-autofill,
body.woocommerce-checkout .woocommerce input:-webkit-autofill:hover,
body.woocommerce-checkout .woocommerce input:-webkit-autofill:focus,
body.woocommerce-checkout .woocommerce input:-webkit-autofill:active,
body.woocommerce-checkout input:-webkit-autofill,
body.woocommerce-checkout input:-webkit-autofill:hover,
body.woocommerce-checkout input:-webkit-autofill:focus,
body.woocommerce-checkout input:-webkit-autofill:active,
.ae-checkout-form .form-row input:-webkit-autofill,
.ae-checkout-form .form-row input:-webkit-autofill:hover,
.ae-checkout-form .form-row input:-webkit-autofill:focus,
.ae-checkout-form .form-row input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0e1219 inset !important;
  box-shadow: 0 0 0 1000px #0e1219 inset !important;
  -webkit-text-fill-color: #e2e6f0 !important;
  caret-color: #e2e6f0;
  border: 1px solid #1c2330 !important;
  border-radius: 7px !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Standard :autofill pseudo-class (Chrome 109+, FF 86+, Safari 15+). Kept in its
   OWN block: if a browser doesn't recognise :autofill it discards only this rule,
   leaving the -webkit- block above intact (an invalid selector invalidates its
   whole comma list, so the two must not be mixed). */
body.woocommerce-checkout .woocommerce input:autofill,
body.woocommerce-checkout .woocommerce input:autofill:hover,
body.woocommerce-checkout .woocommerce input:autofill:focus,
body.woocommerce-checkout .woocommerce input:autofill:active,
body.woocommerce-checkout input:autofill,
body.woocommerce-checkout input:autofill:hover,
body.woocommerce-checkout input:autofill:focus,
body.woocommerce-checkout input:autofill:active,
.ae-checkout-form .form-row input:autofill,
.ae-checkout-form .form-row input:autofill:hover,
.ae-checkout-form .form-row input:autofill:focus,
.ae-checkout-form .form-row input:autofill:active {
  box-shadow: 0 0 0 1000px #0e1219 inset !important;
  -webkit-text-fill-color: #e2e6f0 !important;
  caret-color: #e2e6f0;
  border: 1px solid #1c2330 !important;
  border-radius: 7px !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* =========================================================================
   EDITORIAL HUB  ·  premium blog rebuild (.ed-*)
   Hero → Featured → Explore by Topic → Latest Articles → Free Pack CTA
   Tokens: --ink #080b10 · --ink2 #0e1219 · --ink3 #151b25 · --green #00c8a0
   ========================================================================= */

.ed-main { background: var(--ink); }
.ed-main .container { max-width: 1180px; }

/* ── 1 · EDITORIAL HERO ─────────────────────────────────────────────────── */
.ed-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(40px, 7vw, 84px) 0 clamp(30px, 4.5vw, 56px);
  background:
    radial-gradient(120% 140% at 50% -10%, #0d1620 0%, var(--ink) 62%);
  border-bottom: 1px solid var(--border);
}
.ed-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,200,160,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,200,160,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 30%, #000 35%, transparent 100%);
          mask-image: radial-gradient(70% 80% at 50% 30%, #000 35%, transparent 100%);
  pointer-events: none;
}
.ed-hero-glow {
  position: absolute; left: 50%; top: -18%;
  width: min(760px, 90%); height: 320px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,200,160,0.16) 0%, rgba(0,200,160,0) 70%);
  pointer-events: none;
}
.ed-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.ed-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,200,160,0.06);
  border: 1px solid rgba(0,200,160,0.16);
  border-radius: 100px;
  padding: 6px 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(0,200,160,0.7); margin-bottom: 22px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.ed-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: pulse 2s ease infinite; }
.ed-hero-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--text); margin: 0 0 16px;
}
.ed-hero-title em { font-style: normal; color: var(--green); }
.ed-hero-sub {
  font-size: 16px; font-weight: 300; line-height: 1.75; color: #96a2b4;
  max-width: 620px; margin: 0 auto;
}
.ed-hero-support {
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--muted);
  max-width: 560px; margin: 16px auto 0;
}

/* ── shared section rhythm ──────────────────────────────────────────────── */
.ed-featured-sec { padding: clamp(48px, 7vw, 84px) 0 0; }
.ed-topics       { padding: clamp(34px, 5vw, 56px) 0 0; }
.ed-list         { padding: clamp(52px, 7vw, 84px) 0 0; }
.ed-cta          { padding: clamp(66px, 9.5vw, 120px) 0 clamp(56px, 8vw, 96px); }

.section-tag {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--green);
}

/* ── 2 · FEATURED ARTICLE ───────────────────────────────────────────────── */
.ed-featured {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 52px);
  align-items: center;
  background: linear-gradient(180deg, var(--ink2) 0%, #0b1017 100%);
  border: 1px solid rgba(0,200,160,0.22);
  border-radius: 20px;
  padding: clamp(24px, 3.5vw, 46px);
  position: relative; overflow: hidden;
}
.ed-featured::before {
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  background: radial-gradient(80% 120% at 100% 0%, rgba(0,200,160,0.10) 0%, transparent 55%);
}
.ed-featured-text { position: relative; z-index: 2; }
.ed-featured-meta {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
}
.ed-featured-tag { color: var(--green); }
.ed-featured-rt  { color: var(--muted); }
.ed-featured-rt::before { content: "·"; margin-right: 14px; color: var(--muted); }
.ed-featured-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(24px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -0.8px; margin: 0 0 16px;
}
.ed-featured-title a { color: var(--text); text-decoration: none; transition: color .2s; }
.ed-featured-title a:hover { color: var(--green); }
.ed-featured-excerpt { font-size: 16px; line-height: 1.65; color: #aeb7c7; margin: 0 0 26px; max-width: 46ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ed-featured-cta { display: inline-flex; padding: 15px 32px; font-weight: 700; }
.ed-featured-media {
  position: relative; display: block; border-radius: 14px; overflow: hidden;
  background: var(--ink3); border: 1px solid var(--border);
}
.ed-featured-img { width: 100%; height: auto; display: block; }

/* ── 3 · EXPLORE BY TOPIC (non-sticky) ──────────────────────────────────── */
.ed-topics-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ed-topics-sub  { font-size: 14px; color: var(--muted); margin: 0; }
.ed-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ed-pill {
  font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); background: var(--ink2);
  border: 1px solid rgba(124,140,168,0.16); border-radius: 999px;
  padding: 10px 22px; text-decoration: none; line-height: 1;
  transition: color .18s, border-color .18s, background .18s;
}
.ed-pill:hover { color: var(--text); border-color: #2b3446; }
.ed-pill.is-active {
  color: var(--green); border-color: rgba(0,200,160,0.55);
  background: rgba(0,200,160,0.08);
}
/* mobile dropdown — hidden on desktop */
.ed-topics-select-wrap { display: none; }
.ed-select-label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.ed-select-shell { position: relative; }
.ed-topics-select {
  -webkit-appearance: none; appearance: none; width: 100%;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.5px; color: var(--text);
  background: var(--ink2); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 40px 13px 16px; cursor: pointer;
}
.ed-topics-select:focus-visible { outline: none; border-color: rgba(0,200,160,0.55); }
.ed-select-chevron {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--green); pointer-events: none; font-size: 12px;
}

/* ── 4 · LATEST ARTICLES GRID ───────────────────────────────────────────── */
.ed-list-head { margin-bottom: 22px; }
.ed-list-head .section-tag { display: block; margin-bottom: 8px; }
.ed-list-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.6px; color: var(--text); margin: 0;
}
.ed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.ed-card {
  display: flex; flex-direction: column;
  background: var(--ink2); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; transition: border-color .2s, transform .2s;
}
.ed-card:hover { border-color: rgba(0,200,160,0.46); transform: translateY(-3px); }
.ed-card-media {
  position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink3);
  overflow: hidden; border-bottom: 1px solid var(--border);
}
.ed-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ed-card:hover .ed-card-img { transform: scale(1.04); filter: brightness(1.06); }
.ed-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.ed-card-cat {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--green);
}
.ed-card-title {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.3;
  letter-spacing: -0.3px; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
}
.ed-card-title a { color: var(--text); text-decoration: none; transition: color .2s; }
.ed-card-title a:hover { color: var(--green); }
.ed-card-excerpt { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.5em; }
.ed-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border);
}
.ed-card-date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; color: var(--muted); }
.ed-card-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.5px; color: var(--text);
  text-decoration: none; white-space: nowrap; transition: color .2s;
}
.ed-card-link:hover { color: var(--green); }
.ed-card-link .ed-arrow { color: var(--green); transition: transform .2s; display: inline-block; }
.ed-card-link:hover .ed-arrow { transform: translateX(3px); }

/* branded fallback when a post has no featured image */
.ed-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; text-align: center; padding: 22px;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(0,200,160,0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink3) 0%, #0b1017 100%);
  background-image:
    radial-gradient(70% 90% at 50% 0%, rgba(0,200,160,0.12) 0%, transparent 60%),
    linear-gradient(to right, rgba(0,200,160,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,200,160,0.06) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
}
.ed-fallback-label { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--green); }
.ed-fallback-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--text); max-width: 24ch; }
.ed-fallback--featured { height: auto; aspect-ratio: 16 / 10; }
.ed-fallback--featured .ed-fallback-title { font-size: clamp(18px, 2.4vw, 26px); }

/* editorial badges (dynamic via custom field ae_badge; auto NEW < 14 days) */
.ed-badge-tag {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; line-height: 1; color: var(--green);
  background: rgba(0,200,160,0.10); border: 1px solid rgba(0,200,160,0.42);
  border-radius: 5px; padding: 5px 9px;
}
.ed-badge-tag--over {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(8,11,16,0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* pagination */
.ed-pagination { margin-top: clamp(28px, 4vw, 44px); }
.ed-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.ed-pagination .page-numbers {
  font-family: var(--mono); font-size: 13px; color: var(--muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; line-height: 1;
  transition: color .2s, border-color .2s;
}
.ed-pagination .page-numbers:hover { color: var(--text); border-color: #2b3446; }
.ed-pagination .page-numbers.current { color: var(--green); border-color: rgba(0,200,160,0.55); background: rgba(0,200,160,0.07); }

/* empty state */
.ed-empty { text-align: center; padding: clamp(40px, 7vw, 80px) 0; }
.ed-empty .ed-list-title { margin: 12px 0 8px; }

/* ── 5 · FREE WORKFLOW PACK CTA ─────────────────────────────────────────── */
.ed-cta-inner {
  text-align: center; max-width: 680px; margin: 0 auto;
  background: linear-gradient(180deg, var(--ink2) 0%, #0b1017 100%);
  border: 1px solid rgba(0,200,160,0.28); border-radius: 20px;
  padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 48px);
  position: relative; overflow: hidden;
}
.ed-cta-inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 50% 0%, rgba(0,200,160,0.12) 0%, transparent 60%);
}
.ed-cta-inner > * { position: relative; z-index: 2; }
.ed-cta-title {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: -0.8px; color: var(--text); margin: 12px 0 12px;
}
.ed-cta-text { font-size: 15px; line-height: 1.6; color: #aeb7c7; max-width: 460px; margin: 0 auto 26px; }
.ed-cta-bar { max-width: 480px; margin: 0 auto; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .ed-featured { grid-template-columns: 1fr; }
  .ed-featured-media { order: -1; }
}
@media (max-width: 640px) {
  .ed-grid { grid-template-columns: 1fr; }

  /* Topic pills: horizontal scroll with right padding so the last pill clears the
     fade (no cut-off), plus a subtle scroll affordance. Not sticky. */
  .ed-pills {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0; padding: 2px 28px 8px 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
  .ed-pills::-webkit-scrollbar { display: none; }
  .ed-pill { flex: 0 0 auto; }
  .ed-card-foot { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Featured title: ~10% smaller + slightly tighter line-height for easier scanning */
  .ed-featured-title { font-size: 21.5px; line-height: 1.08; }

  /* Trim the gap before the Free Workflow Pack CTA further; still clearly separated */
  .ed-cta { padding-top: 34px; }
  /* CTA headline: slightly smaller + tighter line spacing, keeps the bold look */
  .ed-cta-title { font-size: 22.5px; line-height: 1.1; }

  /* Lift thumbnail readability slightly — subtle, stays on-brand */
  .ed-card-img { filter: brightness(1.06) contrast(1.02); }
}
/* end editorial hub */

/* ── Fix: editorial hero sits flush under the navbar (kill the dark gap) ──────
   The body reserves navbar clearance as top-padding; the hero's background used
   to start *below* that, exposing a bare --ink strip between navbar and hero.
   Pull the hero up to fill behind the navbar, and extend the grid texture
   higher so the band just under the navbar reads as hero, not a void. */
.ed-hero {
  margin-top: -73px;
  padding-top: calc(73px + clamp(30px, 5vw, 60px));
}
@media (min-width: 769px) {
  .ed-hero { margin-top: -61px; padding-top: calc(61px + clamp(30px, 5vw, 60px)); }
}
@media (max-width: 768px) {
  .ed-hero { margin-top: -64px; padding-top: calc(64px + 26px); padding-bottom: 32px; }
}
.ed-hero-grid {
  -webkit-mask-image: radial-gradient(115% 100% at 50% 34%, #000 52%, transparent 100%);
          mask-image: radial-gradient(115% 100% at 50% 34%, #000 52%, transparent 100%);
}
/* end hero gap fix */

/* ── Brighter hero backgrounds: match the editorial blog hero lift ───────────
   Adds the #0d1620→--ink radial gradient (plus a slightly stronger teal glow)
   to the AI Tools and Workflow Library heroes. Scoped so the commerce heroes
   that reuse .ait-hero (checkout / cart / thank-you) are left unchanged. */
.ait-hero:not(.ae-checkout-hero-section):not(.ae-cart-hero-section):not(.ae-thankyou-hero),
.wl-hero,
.sp-hero,
.sprod-hero {
  background: radial-gradient(120% 140% at 50% -10%, #0d1620 0%, var(--ink) 62%);
}
.ait-hero-glow { background: radial-gradient(ellipse, rgba(0,200,160,0.10) 0%, transparent 65%); }
.wl-hero-glow  { background: radial-gradient(ellipse, rgba(0,200,160,0.10) 0%, transparent 65%); }
.sp-hero-glow  { background: radial-gradient(ellipse, rgba(0,200,160,0.10) 0%, transparent 70%); }
.sprod-hero-glow { background: radial-gradient(ellipse, rgba(0,200,160,0.10) 0%, transparent 65%); }
/* end brighter heroes */

/* AI Tools + Workflow Library hero grids: match the editorial blog grid —
   tighter 46px cells, brighter teal lines, wider mask reach. Scoped to these
   two heroes only (the shared .hero-grid elsewhere is unchanged). */
.ait-hero .hero-grid,
.wl-hero .hero-grid,
.sp-hero .hero-grid,
.sprod-hero .hero-grid {
  background-image:
    linear-gradient(to right, rgba(0,200,160,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,200,160,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 1;
  -webkit-mask-image: radial-gradient(115% 100% at 50% 34%, #000 52%, transparent 100%);
          mask-image: radial-gradient(115% 100% at 50% 34%, #000 52%, transparent 100%);
}
/* end hero grid match */

/* Mobile iOS safe-area: keep the footer/logo area clear of Safari's bottom bar so
   the page doesn't feel cramped at the bottom (touch viewports only). */
@media (max-width: 768px) {
  html { scroll-padding-top: 80px; }
  .ed-topics, .ed-featured-sec, .ed-list, .ed-cta,
  .ed-list-head, .ed-topics-head { scroll-margin-top: 80px; }
  .ae-footer { padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px)); }
}
/* end mobile safe-area */