/** Shopify CDN: Minification failed

Line 102:0 Unexpected "@media"

**/
/* ============================================================
   OPORA AI HUB ? styles.css
   Premium SaaS landing page aesthetic
   "Linear.app for cleaning operators"
   ============================================================ */

/* ?? FONT IMPORT ???????????????????????????????????????????? */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800,900&f[]=satoshi@400,500,700&display=swap');

/* ?? DESIGN TOKENS ?????????????????????????????????????????? */
:root {
  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw,   1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem + 4vw,      5rem);
  --text-hero: clamp(2.75rem,  0.5rem + 6.5vw,  7rem);

  /* Spacing */
  --s1:  0.25rem;  --s2:  0.5rem;   --s3:  0.75rem;  --s4:  1rem;
  --s5:  1.25rem;  --s6:  1.5rem;   --s8:  2rem;     --s10: 2.5rem;
  --s12: 3rem;     --s16: 4rem;     --s20: 5rem;     --s24: 6rem;

  /* Radii */
  --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 1rem;
  --r-xl: 1.5rem;   --r-full: 9999px;

  /* Easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 180ms var(--ease-out);
  --t-base: 280ms var(--ease-out);
  --t-slow: 420ms var(--ease-out);

  /* Fonts */
  /* Match oporasupply.com standard: Barlow headings, Inter body */
  --font-display: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Content widths */
  --w-narrow: 680px;
  --w-default: 1000px;
  --w-wide: 1280px;
}

/* ?? LIGHT MODE ????????????????????????????????????????????? */
:root, [data-theme="light"] {
  --bg:          #faf9f7;
  --bg-alt:      #f4f2ee;
  --surface:     #ffffff;
  --surface-2:   #f8f7f4;
  --surface-3:   #f0ede8;
  --border:      #e5e2db;
  --border-subtle: #ede9e3;
  --divider:     #dedad3;

  --text:        #1a1916;
  --text-muted:  #6b6863;
  --text-faint:  #b0ada7;
  --text-inv:    #faf9f7;

  /* Opora brand ? deep forest teal + warm off-white */
  --primary:         #0a5f63;
  --primary-hover:   #094f53;
  --primary-active:  #073c3f;
  --primary-light:   #e8f3f3;
  --primary-glow:    rgba(10, 95, 99, 0.12);

  --accent:          #1a8a8f;
  --accent-light:    #d0ecec;

  /* Semantic */
  --success:     #2d7a3a;
  --warning:     #8c5e12;
  --error:       #9b2c2c;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(26, 25, 22, 0.05);
  --shadow-sm: 0 2px 8px rgba(26, 25, 22, 0.07);
  --shadow-md: 0 6px 20px rgba(26, 25, 22, 0.09);
  --shadow-lg: 0 16px 48px rgba(26, 25, 22, 0.12);
  --shadow-xl: 0 32px 80px rgba(26, 25, 22, 0.15);

  /* Hero gradient mesh */
  --hero-bg-1: #faf9f7;
  --hero-bg-2: #e8f3f3;
  --hero-mesh-1: rgba(10, 95, 99, 0.06);
  --hero-mesh-2: rgba(26, 138, 143, 0.04);
}

/* ?? DARK MODE ?????????????????????????????????????????????? */
[data-theme="dark"],
@media (prefers-color-scheme: dark) { :root:not([data-theme]) {
  --bg:          #111210;
  --bg-alt:      #161714;
  --surface:     #1a1c19;
  --surface-2:   #1f211e;
  --surface-3:   #252724;
  --border:      #2d2f2b;
  --border-subtle: #252724;
  --divider:     #242622;

  --text:        #e8e6e1;
  --text-muted:  #8a8780;
  --text-faint:  #504e4a;
  --text-inv:    #111210;

  --primary:         #3fb3b9;
  --primary-hover:   #5fc4ca;
  --primary-active:  #7dd4d9;
  --primary-light:   #1a2f30;
  --primary-glow:    rgba(63, 179, 185, 0.15);

  --accent:          #5bc4c9;
  --accent-light:    #1c3233;

  --shadow-xs: 0 1px 2px rgba(0,0,0, 0.2);
  --shadow-sm: 0 2px 8px rgba(0,0,0, 0.25);
  --shadow-md: 0 6px 20px rgba(0,0,0, 0.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0, 0.4);
  --shadow-xl: 0 32px 80px rgba(0,0,0, 0.5);

  --hero-bg-1: #111210;
  --hero-bg-2: #162020;
  --hero-mesh-1: rgba(63, 179, 185, 0.08);
  --hero-mesh-2: rgba(91, 196, 201, 0.05);
}}

/* Dark mode duplicate for explicit [data-theme="dark"] */
[data-theme="dark"] {
  --bg:          #111210;
  --bg-alt:      #161714;
  --surface:     #1a1c19;
  --surface-2:   #1f211e;
  --surface-3:   #252724;
  --border:      #2d2f2b;
  --border-subtle: #252724;
  --divider:     #242622;
  --text:        #e8e6e1;
  --text-muted:  #8a8780;
  --text-faint:  #504e4a;
  --text-inv:    #111210;
  --primary:         #3fb3b9;
  --primary-hover:   #5fc4ca;
  --primary-active:  #7dd4d9;
  --primary-light:   #1a2f30;
  --primary-glow:    rgba(63, 179, 185, 0.15);
  --accent:          #5bc4c9;
  --accent-light:    #1c3233;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.4);
  --shadow-xl: 0 32px 80px rgba(0,0,0,0.5);
  --hero-bg-1: #111210;
  --hero-bg-2: #162020;
  --hero-mesh-1: rgba(63, 179, 185, 0.08);
  --hero-mesh-2: rgba(91, 196, 201, 0.05);
}

/* ?? BASE RESET ????????????????????????????????????????????? */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s16);
  hanging-punctuation: first last;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul[role="list"], ol[role="list"] { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.1; }
p, li { text-wrap: pretty; max-width: 70ch; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--primary-light); color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ?? UTILITY ???????????????????????????????????????????????? */
.container {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--s6), 5vw, var(--s16));
}
.container--narrow { max-width: var(--w-narrow); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ?? THEME TOGGLE ??????????????????????????????????????????? */
.theme-toggle {
  position: fixed;
  top: var(--s4);
  right: var(--s4);
  z-index: 200;
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.theme-toggle:hover { color: var(--primary); box-shadow: var(--shadow-md); }

/* ?? PROFILE BANNER ????????????????????????????????????????? */
.profile-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--s3) var(--s4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.profile-banner[hidden] { display: none; }
.profile-banner__inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.profile-banner__inner svg { color: var(--primary); flex-shrink: 0; }
.profile-banner__inner strong { color: var(--text); }
.profile-banner__cta {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--primary);
  border-radius: var(--r-full);
  transition: background var(--t-fast), color var(--t-fast);
}
.profile-banner__cta:hover { background: var(--primary); color: var(--text-inv); }
.profile-banner__dismiss {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.profile-banner__dismiss:hover { color: var(--text); background: var(--surface-3); }

/* ????????????????????????????????????????????????????????????
   HERO SECTION
   ???????????????????????????????????????????????????????????? */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-block: var(--s20) var(--s16);
}

/* Gradient mesh background */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, var(--hero-mesh-1), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 70%, var(--hero-mesh-2), transparent 70%),
    linear-gradient(160deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 50%, var(--hero-bg-1) 100%);
  pointer-events: none;
}

/* Noise texture overlay */
.hero::after {
  content: '';
  position: absolute;
  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.025'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
  width: 100%;
  max-width: var(--w-wide);
  padding-inline: clamp(var(--s6), 5vw, var(--s16));
}

.hero__content { display: flex; flex-direction: column; gap: var(--s6); }

/* Trust pills */
.hero__trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  box-shadow: var(--shadow-xs);
  /* entrance animation ? stagger via JS */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out),
              box-shadow var(--t-fast), border-color var(--t-fast);
}
.trust-pill.visible { opacity: 1; transform: translateY(0); }
.trust-pill::before { content: '?'; color: var(--primary); font-size: 0.7em; font-weight: 700; }

/* H1 */
.hero__h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700; /* Barlow tops out at 700 ? site standard */
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.05;
}
.hero__h1 em {
  font-style: normal;
  color: var(--primary);
  position: relative;
}
/* Word-by-word animation handled by JS adding .word-visible */
.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.hero__word.visible { opacity: 1; transform: translateY(0); }

/* Sub */
.hero__sub {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 50ch;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}
.hero__sub.visible { opacity: 1; }

/* CTA group */
.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.hero__cta-group.visible { opacity: 1; transform: translateY(0); }

/* Hero visual */
.hero__visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  opacity: 0;
  transform: translateX(20px) scale(0.97);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.hero__visual.visible { opacity: 1; transform: translateX(0) scale(1); }

/* Dashboard mockup */
.hero__mockup {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.mockup__topbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
}
.mockup__dot {
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  background: var(--border);
  display: block;
}
.mockup__dot:nth-child(1) { background: #ff5f57; }
.mockup__dot:nth-child(2) { background: #febc2e; }
.mockup__dot:nth-child(3) { background: #28c840; }
.mockup__url {
  margin-left: var(--s2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-faint);
  background: var(--surface-3);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-sm);
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.mockup__body { padding: var(--s6); }
.mockup__label {
  font-size: var(--text-xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  margin-bottom: var(--s3);
}
.mockup__result {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
  margin-bottom: var(--s4);
}
.mockup__result span { font-size: var(--text-base); font-weight: 400; color: var(--text-muted); }
.mockup__breakdown { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.mockup__bar { display: flex; align-items: center; gap: var(--s3); }
.mockup__bar span {
  height: 8px;
  border-radius: var(--r-full);
  background: var(--primary);
  display: block;
  transition: width 1.2s var(--ease-out);
}
.mockup__bar:nth-child(2) span { background: var(--accent); opacity: 0.6; }
.mockup__bar:nth-child(3) span { background: var(--text-faint); opacity: 0.5; }
.mockup__bar label { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.mockup__ai-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--primary);
  color: var(--text-inv);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.mockup__ai-pill:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* Scroll hint */
.hero__scroll-hint {
  position: absolute;
  bottom: var(--s8);
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-faint);
  animation: bounce 2s ease-in-out infinite;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}
.hero__scroll-hint.visible { opacity: 1; }
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(5px); }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s6);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: var(--s4) var(--s8); font-size: var(--text-base); }
.btn--full { width: 100%; justify-content: center; }

.btn--primary {
  background: var(--primary);
  color: var(--text-inv);
  box-shadow: 0 0 0 0 var(--primary-glow);
}
.btn--primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 0 4px var(--primary-glow);
}
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--outline:hover {
  background: var(--surface-2);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

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

.btn svg { flex-shrink: 0; }

/* ????????????????????????????????????????????????????????????
   SECTION FRAMEWORK
   ???????????????????????????????????????????????????????????? */
section { padding-block: clamp(var(--s16), 7vw, var(--s24)); }

.section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: var(--s3);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: var(--s4);
}
.section-sub {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: var(--s10);
}
.section-header { margin-bottom: var(--s10); }

/* Scroll-driven entrance */
.fade-in {
  opacity: 1;
}
@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: fade-in-anim linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}
@keyframes fade-in-anim { to { opacity: 1; } }

/* ????????????????????????????????????????????????????????????
   JTBD SECTION
   ???????????????????????????????????????????????????????????? */
.jtbd { background: var(--bg); }

.jtbd__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

/* JTBD Tile */
.jtbd-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  position: relative;
  transition:
    box-shadow var(--t-base),
    border-color var(--t-base),
    transform var(--t-base);
}
.jtbd-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse at 50% 0%, var(--primary-glow), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.jtbd-tile:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
  transform: translateY(-3px);
}
.jtbd-tile:hover::before { opacity: 1; }

/* Tile header (the clickable trigger) */
.jtbd-tile__header {
  padding: var(--s6);
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  cursor: pointer;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

.jtbd-tile__icon {
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}
.jtbd-tile:hover .jtbd-tile__icon {
  background: var(--primary);
  color: var(--text-inv);
  transform: scale(1.06) rotate(-3deg);
}

.jtbd-tile__text { flex: 1; min-width: 0; }

.jtbd-tile__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s1);
  letter-spacing: -0.02em;
}
.jtbd-tile__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  max-width: none;
}

.jtbd-tile__tools-count {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-faint);
  background: var(--surface-3);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.jtbd-tile__chevron {
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform var(--t-fast), color var(--t-fast);
  margin-top: 2px;
}
.jtbd-tile__header[aria-expanded="true"] .jtbd-tile__chevron {
  transform: rotate(180deg);
  color: var(--primary);
}
.jtbd-tile:hover .jtbd-tile__chevron { color: var(--primary); }

/* Catchall tile ? accent border */
.jtbd-tile--catchall {
  background: linear-gradient(135deg, var(--surface) 0%, var(--primary-light) 100%);
  border-color: var(--primary);
  border-width: 1.5px;
}
.jtbd-tile--catchall .jtbd-tile__title { color: var(--primary); }

/* Router panel */
.jtbd-router {
  padding: 0 var(--s6) var(--s6);
  border-top: 1px solid var(--border-subtle);
  margin-top: 0;
  /* smooth height animation via JS */
  overflow: hidden;
}
.jtbd-router[hidden] { display: none; }

.router__step { }
.router__step[hidden] { display: none; }

.router__question {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-block: var(--s5) var(--s4);
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  line-height: 1.4;
}
.router__q-num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--text-inv);
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -0.02em;
}

.router__intro {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-block: var(--s5) var(--s4);
  line-height: 1.6;
  max-width: none;
}

.router__sample-prompts {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.router__sample-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--s2);
  max-width: none;
}
.router__sample-prompts ul { display: flex; flex-direction: column; gap: var(--s2); }
.router__sample-prompts li {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-left: var(--s3);
  border-left: 2px solid var(--primary);
  line-height: 1.5;
  max-width: none;
}

/* Router options */
.router__options {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.router__options--three { }

.router__option {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s4);
  background: var(--surface-2);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--r-lg);
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: left;
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
  text-decoration: none;
  color: inherit;
}
.router__option strong {
  font-weight: 700;
  color: var(--text);
  font-size: var(--text-sm);
}
.router__option span { color: var(--text-muted); line-height: 1.45; max-width: none; }
.router__option:hover {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.router__option--primary {
  border-color: var(--primary);
  background: var(--primary-light);
}
.router__option--primary strong { color: var(--primary); }
.router__option--primary:hover { background: var(--primary); }
.router__option--primary:hover strong,
.router__option--primary:hover span { color: var(--text-inv); }
.router__option--primary:hover .tool-badge { background: rgba(255,255,255,0.2); color: var(--text-inv); border-color: transparent; }

.router__back {
  margin-top: var(--s3);
  font-size: var(--text-xs);
  color: var(--text-faint);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.router__back:hover { color: var(--primary); background: var(--surface-2); }

/* Secondary tool links */
.jtbd-tile__secondary-links {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-size: var(--text-xs);
}
.jtbd-tile__secondary-links span { color: var(--text-faint); }
.jtbd-tile__secondary-links a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--t-fast);
}
.jtbd-tile__secondary-links a:hover { text-decoration-color: var(--primary); }

/* Tool badges */
.tool-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s2);
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  margin-top: var(--s1);
  align-self: flex-start;
  transition: background var(--t-fast), color var(--t-fast);
}
.badge--chat    { background: #e8f3f3; color: #0a5f63; border-color: #c5e0e1; }
.badge--ai      { background: #eef4ff; color: #1a3fad; border-color: #c8d8ff; }
.badge--util    { background: #e8f3f3; color: #0a5f63; border-color: #c5e0e1; }
.badge--calc    { background: #fff7e6; color: #8c5e12; border-color: #fde3a8; }
.badge--lib     { background: #f0f7ee; color: #2d7a3a; border-color: #c2e0bb; }
.badge--gen     { background: #f8eeff; color: #6a2db0; border-color: #d8b8ff; }
.badge--ref     { background: #f5f5f5; color: #4a4a4a; border-color: #ddd; }
.badge--agent   { background: #fff0f0; color: #9b2c2c; border-color: #f5c0c0; }
[data-theme="dark"] .badge--chat  { background: #0d2828; color: #5bc4c9; border-color: #1c3f40; }
[data-theme="dark"] .badge--ai    { background: #0d1433; color: #6b88ff; border-color: #1a2850; }
[data-theme="dark"] .badge--util  { background: #0d2828; color: #5bc4c9; border-color: #1c3f40; }
[data-theme="dark"] .badge--calc  { background: #271e0a; color: #e8a832; border-color: #3d2e10; }
[data-theme="dark"] .badge--lib   { background: #0c1f0e; color: #6daa45; border-color: #163319; }
[data-theme="dark"] .badge--gen   { background: #1a0d2e; color: #b87aff; border-color: #2d1650; }
[data-theme="dark"] .badge--ref   { background: #1f2120; color: #8a8780; border-color: #2d2f2b; }
[data-theme="dark"] .badge--agent { background: #2a0d0d; color: #e87878; border-color: #401515; }
.badge--paid    { background: #f0faf7; color: #065f46; border-color: #a7f3d0; }
[data-theme="dark"] .badge--paid  { background: #052e1c; color: #6ee7b7; border-color: #065f46; }

/* Paid/Premium lock overlay on tool cards */
.tool-card--paid .tool-card__cta::before {
  content: '?? ';
  font-size: 11px;
}

/* ????????????????????????????????????????????????????????????
   LIVE ACTIVITY STRIP
   ???????????????????????????????????????????????????????????? */
.activity-strip {
  background: var(--surface-2);
  border-block: 1px solid var(--border-subtle);
  padding-block: var(--s3);
  overflow: hidden;
}
.activity-strip[hidden] { display: none; }
.activity-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--s8);
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--s6), 5vw, var(--s16));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.activity-strip__inner::-webkit-scrollbar { display: none; }
.activity-stat {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.activity-stat__dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.25);
  animation: pulse-dot 2s ease-in-out infinite;
}
.activity-stat strong { color: var(--text); font-weight: 700; }
.activity-divider { width: 1px; height: 16px; background: var(--divider); flex-shrink: 0; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 2px rgba(34,197,94,0.2); }
  50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34,197,94,0.1); }
}

/* ????????????????????????????????????????????????????????????
   AI EVERYWHERE STRIP
   ???????????????????????????????????????????????????????????? */
.ai-everywhere {
  background: var(--bg-alt);
  border-block: 1px solid var(--border-subtle);
  padding-block: clamp(var(--s12), 5vw, var(--s20));
}
.ai-everywhere__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s12);
  align-items: center;
}
.ai-everywhere__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: var(--s3);
}
.ai-everywhere__desc { font-size: var(--text-base); color: var(--text-muted); line-height: 1.6; max-width: 46ch; }
.ai-everywhere__desc strong { color: var(--primary); }

/* Animated flow diagram */
.ai-everywhere__diagram {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: center;
}
.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s5) var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  min-width: 100px;
  text-align: center;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.flow-step:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-2px); }
.flow-step__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.flow-step--calc .flow-step__icon { background: #fff7e6; color: #8c5e12; }
.flow-step--ai .flow-step__icon { background: var(--primary-light); color: var(--primary); }
.flow-step--doc .flow-step__icon { background: #f0f7ee; color: #2d7a3a; }
.flow-step__label { font-size: var(--text-xs); font-weight: 700; color: var(--text); }
.flow-step__desc { font-size: var(--text-xs); color: var(--text-faint); max-width: none; }

.flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding-inline: var(--s3);
  flex-shrink: 0;
}
.flow-arrow svg { color: var(--primary); }
.flow-arrow__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  max-width: none;
}
/* Animated arrow line */
.flow-arrow svg path { stroke-dasharray: 60; stroke-dashoffset: 60; }
.flow-arrow.animated svg path { animation: draw-arrow 1s var(--ease-out) forwards; }
@keyframes draw-arrow { to { stroke-dashoffset: 0; } }

/* ????????????????????????????????????????????????????????????
   ALL TOOLS GRID
   ???????????????????????????????????????????????????????????? */
.all-tools { background: var(--bg); }

/* Search + filter bar */
.tools-search-bar {
  position: relative;
  margin-bottom: var(--s4);
}
.tools-search-bar svg {
  position: absolute;
  left: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}
.tools-search-input {
  width: 100%;
  padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 24px + var(--s2));
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tools-search-input::placeholder { color: var(--text-faint); }
.tools-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }


.tools-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s8);
}
.filter-btn {
  padding: var(--s2) var(--s4);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1.5px solid var(--border);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.filter-btn--active, .filter-btn.active {
  background: var(--primary);
  color: var(--text-inv);
  border-color: var(--primary);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s4);
}

.tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--t-base),
    border-color var(--t-base),
    transform var(--t-base),
    opacity var(--t-base);
  position: relative;
  overflow: hidden;
}
.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse at 50% 0%, var(--primary-glow), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.tool-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  transform: translateY(-2px);
}
.tool-card:hover::after { opacity: 1; }
.tool-card.hidden-by-filter { display: none; }

.tool-card__badge { align-self: flex-start; }
.tool-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5eead4;
  background: linear-gradient(160deg, rgba(34, 211, 184, 0.18), rgba(34, 211, 184, 0.05));
  border: 1px solid rgba(34, 211, 184, 0.28);
  box-shadow: 0 0 24px -8px rgba(34, 211, 184, 0.45);
  margin-bottom: 2px;
}
.tool-card:hover .tool-card__icon {
  border-color: rgba(34, 211, 184, 0.55);
  box-shadow: 0 0 28px -6px rgba(34, 211, 184, 0.65);
  transform: translateY(-1px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tool-card__cta {
  margin-top: auto;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.tool-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.tool-card__name a {
  text-decoration: none;
  color: inherit;
  transition: color var(--t-fast);
}
.tool-card__name a:hover { color: var(--primary); }
.tool-card__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
  max-width: none;
}
.tool-card__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin-top: auto;
  transition: gap var(--t-fast), color var(--t-fast);
}
.tool-card__cta::after { content: none; }
.tool-card:hover .tool-card__cta { gap: var(--s2); }

/* ????????????????????????????????????????????????????????????
   CONNECTOR DIAGRAM
   ???????????????????????????????????????????????????????????? */
.connector {
  background: var(--bg-alt);
  border-block: 1px solid var(--border-subtle);
}
.connector-diagram {
  position: relative;
  padding: var(--s8) 0 var(--s4);
}

.connector-row {
  display: flex;
  align-items: center;
  gap: var(--s6);
  margin-bottom: var(--s2);
}
.conn-layer-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  min-width: 110px;
  flex-shrink: 0;
}
.conn-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.conn-node {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  cursor: default;
}
.conn-node:hover { transform: translateY(-1px); }
.conn-node--calc  { border-color: #fde3a8; color: #8c5e12; background: #fff7e6; }
.conn-node--ai    { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.conn-node--analyzer { border-color: #c8d8ff; color: #1a3fad; background: #eef4ff; }
.conn-node--doc   { border-color: #c2e0bb; color: #2d7a3a; background: #f0f7ee; }
.conn-node--chat  { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.conn-node--lib   { border-color: #c2e0bb; color: #2d7a3a; background: #f0f7ee; }
[data-theme="dark"] .conn-node--calc { border-color: #3d2e10; color: #e8a832; background: #271e0a; }
[data-theme="dark"] .conn-node--ai   { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
[data-theme="dark"] .conn-node--doc  { border-color: #163319; color: #6daa45; background: #0c1f0e; }
[data-theme="dark"] .conn-node--chat { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
[data-theme="dark"] .conn-node--lib  { border-color: #163319; color: #6daa45; background: #0c1f0e; }
[data-theme="dark"] .conn-node--analyzer { border-color: #1a2850; color: #6b88ff; background: #0d1433; }

.connector-arrow-down {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s1) 0 var(--s1) 110px;
  padding-left: calc(var(--s3) + 8px);
  color: var(--primary);
}
.connector-arrow-down svg { color: var(--text-faint); }
.connector-arrow-down span {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  max-width: none;
}

.conn-always-available {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px dashed var(--border);
  margin-left: 116px;
  flex-wrap: wrap;
}
.conn-always-label {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-style: italic;
  margin-left: 116px;
  margin-top: var(--s2);
  max-width: none;
}

/* ????????????????????????????????????????????????????????????
   TRUST RAIL
   ???????????????????????????????????????????????????????????? */
.trust-rail {
  background: var(--bg);
  padding-block: clamp(var(--s12), 5vw, var(--s20));
}
.trust-rail .section-title { margin-bottom: var(--s8); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6) var(--s8);
}
.trust-item {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
}
.trust-item__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-lg);
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}
.trust-item:hover .trust-item__icon {
  background: var(--primary);
  color: var(--text-inv);
  transform: scale(1.05);
}
.trust-item__text { flex: 1; }
.trust-item__text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s1);
}
.trust-item__text span {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: none;
}

/* ????????????????????????????????????????????????????????????
   CONTEXT / BELOW THE FOLD
   ???????????????????????????????????????????????????????????? */
.context-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-subtle);
}
.context-block {
  margin-bottom: var(--s12);
  padding-bottom: var(--s12);
  border-bottom: 1px solid var(--border-subtle);
}
.context-block:last-of-type { border-bottom: none; padding-bottom: 0; }
.context-block__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: var(--s5);
}
.context-block p {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--s4);
  max-width: 68ch;
}
.context-block p:last-child { margin-bottom: 0; }

/* Steps list */
.steps-list { display: flex; flex-direction: column; gap: var(--s6); list-style: none; }
.step-item { display: flex; gap: var(--s5); align-items: flex-start; }
.step-num {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--text-inv);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-content strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s2);
}
.step-content p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.65; max-width: 60ch; }

/* FAQ */
.faq-block { margin-top: var(--s2); }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-item:first-child { border-top: 1px solid var(--border-subtle); }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  padding: var(--s5) 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: color var(--t-fast);
}
.faq-item__q:hover { color: var(--primary); }
.faq-chevron { color: var(--text-faint); flex-shrink: 0; transition: transform var(--t-fast); }
.faq-item__q[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}
.faq-item__a {
  padding-bottom: var(--s5);
}
.faq-item__a[hidden] { display: none; }
.faq-item__a p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; max-width: 68ch; }

/* ????????????????????????????????????????????????????????????
   FINAL CTA
   ???????????????????????????????????????????????????????????? */
.final-cta {
  background: var(--primary);
  padding-block: clamp(var(--s16), 7vw, var(--s24));
}
.final-cta__inner { text-align: center; }
.final-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-inv);
  margin-bottom: var(--s4);
}
.final-cta__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--s8);
  max-width: 48ch;
  margin-inline: auto;
}
.final-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
}
.final-cta .btn--primary {
  background: var(--text-inv);
  color: var(--primary);
  box-shadow: none;
}
.final-cta .btn--primary:hover {
  background: var(--text-inv);
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.final-cta .btn--outline {
  border-color: rgba(255,255,255,0.4);
  color: var(--text-inv);
  background: rgba(255,255,255,0.1);
}
.final-cta .btn--outline:hover {
  border-color: var(--text-inv);
  background: rgba(255,255,255,0.2);
  color: var(--text-inv);
}
.final-cta .btn--ghost {
  color: rgba(255,255,255,0.65);
}
.final-cta .btn--ghost:hover {
  color: var(--text-inv);
  background: rgba(255,255,255,0.1);
}

/* ????????????????????????????????????????????????????????????
   STICKY MOBILE CTA
   ???????????????????????????????????????????????????????????? */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  bottom: var(--s4);
  left: var(--s4);
  right: var(--s4);
  z-index: 99;
}
.sticky-mobile-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s4);
  background: var(--primary);
  color: var(--text-inv);
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
}
.sticky-mobile-cta a:active { transform: scale(0.97); }

/* ????????????????????????????????????????????????????????????
   RESPONSIVE ? TABLET
   ???????????????????????????????????????????????????????????? */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s10); }
  .hero__visual { justify-content: flex-start; }
  .hero__mockup { max-width: 100%; }

  .jtbd__grid { grid-template-columns: repeat(2, 1fr); }

  .ai-everywhere__inner { grid-template-columns: 1fr; gap: var(--s8); }
  .ai-everywhere__diagram { justify-content: flex-start; flex-wrap: wrap; }

  .trust-grid { grid-template-columns: repeat(2, 1fr); }

  .connector-row { flex-wrap: wrap; }
}

/* ????????????????????????????????????????????????????????????
   RESPONSIVE ? MOBILE
   ???????????????????????????????????????????????????????????? */
@media (max-width: 640px) {
  .hero { padding-block: var(--s16) var(--s12); min-height: 100dvh; }
  .hero__h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  .hero__sub { font-size: var(--text-base); }
  .hero__cta-group { flex-direction: column; }
  .hero__visual { display: none; }
  .hero__trust-pills { gap: var(--s2); }

  .jtbd__grid { grid-template-columns: 1fr; gap: var(--s3); }
  .jtbd-tile { border-radius: var(--r-lg); }
  .jtbd-tile__header { padding: var(--s5); }
  .jtbd-tile__icon { width: 44px; height: 44px; }

  .tools-filter { gap: var(--s2); }
  .filter-btn { padding: var(--s2) var(--s3); font-size: 11px; }

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

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

  .conn-layer-label { display: none; }
  .connector-arrow-down { margin-left: 0; }
  .conn-always-available { margin-left: 0; }
  .conn-always-label { margin-left: 0; }

  .sticky-mobile-cta { display: block; }

  .final-cta__links { flex-direction: column; align-items: center; }
  .final-cta .btn { width: 100%; max-width: 320px; justify-content: center; }

  .profile-banner__inner { flex-wrap: wrap; }
  .profile-banner__cta { margin-left: 0; }

  /* AI everywhere diagram on mobile */
  .ai-everywhere__diagram { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .flow-arrow { flex-direction: row; padding-inline: 0; padding-block: var(--s1); }
  .flow-arrow svg { transform: rotate(90deg); }

  section { padding-block: var(--s12) var(--s12); }
}

/* ?? Hover: prefer-hover media ??????????????????????????????? */
@media (hover: none) {
  .jtbd-tile:hover,
  .tool-card:hover,
  .flow-step:hover,
  .conn-node:hover { transform: none; }
  .jtbd-tile:hover::before,
  .tool-card:hover::after { opacity: 0; }
}

/* ??????????????????????????????????????????????????????????
   AI HUB UPGRADE ? Day 1 ship
   Live demo hero, proof strip, model strip, Ask Opora 2�, ambient gradient
   ?????????????????????????????????????????????????????????? */

/* Accent trust pill (9 AI tools live) */
.trust-pill--accent {
  background: linear-gradient(135deg, rgba(63,181,168,0.18), rgba(63,181,168,0.06));
  border-color: rgba(63,181,168,0.45);
  color: var(--primary);
  font-weight: 600;
}
.trust-pill--accent::before { content: none; }
.trust-pill__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(63,181,168,0.7);
  animation: pulse-dot 2s ease-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63,181,168,0.7); }
  50% { box-shadow: 0 0 0 6px rgba(63,181,168,0); }
}

/* H1 strong emphasis */
.hero__sub strong {
  color: var(--text);
  font-weight: 600;
}

/* Hero CTA primary - now has AI icon */
.btn--primary svg { margin-right: 4px; }

/* Hero proof strip ? REAL grounding */
.hero__proof-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.hero__proof-strip.visible { opacity: 1; transform: translateY(0); }
.proof-strip__label {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 600;
}
.proof-strip__item {
  color: var(--text-muted);
  font-weight: 500;
}
.proof-strip__sep {
  color: var(--text-faint);
  opacity: 0.5;
}

/* ??? LIVE AI MOCKUP ? typing demo ??????????????????????????? */
.hero__mockup--live {
  max-width: 480px;
  position: relative;
  overflow: visible;
}
.hero__mockup--live::before {
  /* subtle glow */
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(60% 50% at 50% 50%, rgba(63,181,168,0.18), transparent 70%);
  border-radius: 32px;
  z-index: -1;
  pointer-events: none;
}

.mockup__live-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(63,181,168,0.12);
  border: 1px solid rgba(63,181,168,0.35);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mockup__live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse-dot 1.8s ease-out infinite;
}

.mockup__body--chat {
  padding: var(--s5) var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-height: 320px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(63,181,168,0.025) 100%),
    var(--surface);
}

.mockup__prompt {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: var(--s3) var(--s4);
}
.mockup__prompt-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.mockup__prompt-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.mockup__ai-response {
  position: relative;
  padding: var(--s4);
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.mockup__ai-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border-subtle);
}
.mockup__ai-meta svg { color: var(--primary); }
.mockup__ai-model {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-faint);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.mockup__ai-stream {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  min-height: 110px;
  font-family: var(--font-body);
}
.mockup__ai-stream strong,
.mockup__ai-stream .num {
  color: var(--primary);
  font-weight: 700;
}
.mockup__ai-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--primary);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink-cursor 1s steps(1) infinite;
}
.mockup__ai-cursor.done { display: none; }
@keyframes blink-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.mockup__ai-cite {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border-subtle);
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  animation: fade-in-cite 400ms var(--ease-out) forwards;
}
@keyframes fade-in-cite { to { opacity: 1; } }

/* ??? MODEL STRIP ? replaces fake activity-strip ??????????? */
.model-strip {
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--s4) 0;
}
.model-strip__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--s6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-muted);
}
.model-strip__label {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 700;
}
.model-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-full);
  font-weight: 500;
  color: var(--text);
}
.model-strip__item svg { color: var(--primary); }
.model-strip__item--accent {
  background: rgba(63,181,168,0.08);
  border-color: rgba(63,181,168,0.3);
  color: var(--primary);
  font-weight: 600;
}
.model-strip__divider {
  color: var(--text-faint);
  opacity: 0.5;
}

/* ??? AMBIENT GRADIENT TRANSITION ??????????????????????????? */
/* Soft fade from dark hero into the lighter JTBD section */
.hero {
  position: relative;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ??? ASK OPORA 2� HERO CARD IN TOOLS GRID ????????????????? */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
@media (max-width: 1024px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tools-grid { grid-template-columns: 1fr; }
}

/* First tool card (Ask Opora) is 2� wide on desktop */
.tools-grid .tool-card:first-child {
  grid-column: span 2;
  background: linear-gradient(135deg,
    rgba(63,181,168,0.06) 0%,
    var(--surface) 60%);
  border: 1px solid rgba(63,181,168,0.3);
  position: relative;
  overflow: hidden;
}
.tools-grid .tool-card:first-child::after {
  /* hero card ambient glow */
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(closest-side, rgba(63,181,168,0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.tools-grid .tool-card:first-child > * { position: relative; z-index: 1; }
.tools-grid .tool-card:first-child .tool-card__name {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
}
.tools-grid .tool-card:first-child .tool-card__desc {
  font-size: var(--text-base);
  max-width: 56ch;
}
@media (max-width: 1024px) {
  .tools-grid .tool-card:first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .tools-grid .tool-card:first-child { grid-column: span 1; }
}

/* Tool card hover preview indicator */
.tool-card {
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.tool-card:hover {
  border-color: rgba(63,181,168,0.4);
}
.tool-card:hover .tool-card__cta {
  color: var(--primary);
  transform: translateX(2px);
}
.tool-card__cta {
  transition: transform var(--t-fast), color var(--t-fast);
  display: inline-block;
}

/* ??? MOBILE LIVE DEMO ??????????????????????????????????????? */
@media (max-width: 768px) {
  .hero__mockup--live { max-width: 100%; }
  .mockup__body--chat { min-height: 280px; padding: var(--s4); }
  .mockup__ai-stream { font-size: 12px; min-height: 90px; }
  .model-strip__inner { gap: var(--s2); font-size: 11px; }
  .hero__proof-strip { font-size: 11px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mockup__ai-cursor { animation: none; opacity: 1; }
  .trust-pill__dot, .mockup__live-dot { animation: none; }
}


/* ?? QA Fix: 44px touch targets for .btn and .filter-btn ?? */
.btn {
  min-height: 44px;
}

.filter-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ????????????????????????????????????????????????????????????
   v13.3 PHASE 1 ? AI page dark + whitespace + Opora Edge demo
   Source: pm/AI_PAGE_CONVERGED_SPEC_PHASE1.md
   Scope:  .ai-hub page only (overrides earlier .hero / .jtbd rules)
   ???????????????????????????????????????????????????????????? */

/* Color tokens ? match the Opora Edge chat box palette */
.ai-hub {
  --o-charcoal:    #0F1217;
  --o-lifted:      #1A1F26;
  --o-lifted-2:    #20262E;
  --o-ink:         #E8E6E0;
  --o-text-mid:    #C7CBD1;
  --o-text-meta:   #7F8489;
  --o-teal:        #3FB5A8;
  --o-header-teal: #398A8E;
  --o-hairline:    #2A2F37;
  --o-cream:       #F5F1E8;
  background: var(--o-charcoal);
  color: var(--o-ink);
}

/* FIX 1 ? Kill the whitespace; drop min-height: 100dvh, swap padding 64/48 */
.ai-hub .hero {
  min-height: 0;
  padding-block: var(--s16) var(--s12);   /* 64px / 48px ? existing ai-hub.css tokens */
  background: var(--o-charcoal);
  position: relative;
  overflow: hidden;
}

/* FIX 2 ? Hero ambient glow rekeyed to dark (replaces light gradient mesh) */
.ai-hub .hero::before {
  background:
    radial-gradient(ellipse 65% 55% at 85%  0%, rgba(63,181,168,0.085) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 70% 10%, rgba(57,138,142,0.055) 0%, transparent 60%),
    var(--o-charcoal);
}
.ai-hub .hero::after { opacity: 0.18; }   /* dial back the noise on dark */

/* Hero text ? light-on-dark */
.ai-hub .hero__h1        { color: var(--o-ink); }
.ai-hub .hero__h1 em     { color: var(--o-teal); font-style: normal; }
.ai-hub .hero__sub       { color: var(--o-text-mid); }
.ai-hub .hero__sub strong{ color: var(--o-ink); }
.ai-hub .hero__proof-strip,
.ai-hub .hero__proof-strip .proof-strip__label,
.ai-hub .hero__proof-strip .proof-strip__item { color: var(--o-text-meta); }

/* FIX 2d ? JTBD section dark; cards lifted */
.ai-hub .jtbd                  { background: var(--o-charcoal); border-top: 1px solid var(--o-hairline); }
.ai-hub .jtbd .section-eyebrow { color: var(--o-header-teal); }
.ai-hub .jtbd .section-title   { color: var(--o-ink); }
.ai-hub .jtbd .section-sub     { color: var(--o-text-mid); }
.ai-hub .jtbd-tile             { background: var(--o-lifted); border-color: var(--o-hairline); }
.ai-hub .jtbd-tile__title      { color: var(--o-ink); }
.ai-hub .jtbd-tile__desc       { color: var(--o-text-mid); }
.ai-hub .jtbd-tile__tools-count{ background: var(--o-lifted-2); color: var(--o-text-mid); }
.ai-hub .jtbd-tile__chevron    { color: var(--o-text-meta); }
.ai-hub .jtbd-tile__secondary-links a { color: var(--o-text-mid); }

/* Global page surfaces ? keep everything dark on /pages/ai */
.ai-hub .all-tools,
.ai-hub section { background-color: transparent; }
.ai-hub .all-tools { background: var(--o-charcoal); }
.ai-hub .ai-everywhere { background: var(--o-charcoal); }
.ai-hub .ai-everywhere__desc { color: var(--o-text-mid); }

/* FIX 3e ? Opora Edge demo card (ported from prototype) */
.ai-hub .oedge-demo {
  background: var(--o-lifted-2);
  border: 1px solid rgba(63,181,168,0.15);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  overflow: hidden;
  width: 100%;
  max-width: 560px;
}
.ai-hub .oedge-demo__head,
.ai-hub .oedge-demo__inputbar {
  background: var(--o-lifted-2);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--o-hairline);
  font-size: 13px;
  color: var(--o-text-mid);
}
.ai-hub .oedge-demo__inputbar { border-top: 1px solid var(--o-hairline); border-bottom: 0; }
.ai-hub .oedge-demo__brand    { display: inline-flex; align-items: center; gap: 8px; color: var(--o-ink); font-weight: 600; }
.ai-hub .oedge-demo__dot      { width: 8px; height: 8px; border-radius: 50%; background: var(--o-teal); box-shadow: 0 0 8px rgba(63,181,168,0.6); }
.ai-hub .oedge-demo__meta     { color: var(--o-text-meta); font-size: 12px; }
.ai-hub .oedge-demo__open     { color: var(--o-teal); font-weight: 600; text-decoration: none; }
.ai-hub .oedge-demo__open:hover{ text-decoration: underline; }
.ai-hub .oedge-demo__body     { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #FAF9F6; }
.ai-hub .oedge-bubble         { border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #1A1F26; border: 1px solid rgba(0,0,0,0.06); }
.ai-hub .oedge-bubble--q      { background: #FFFFFF; }
.ai-hub .oedge-bubble--a      { background: #F1F7F5; border-color: rgba(63,181,168,0.28); }
.ai-hub .oedge-bubble__role   { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #7F8489; margin-bottom: 6px; font-weight: 600; }
.ai-hub .oedge-bubble__role--a{ color: var(--o-header-teal); }
.ai-hub .oedge-bubble__text   { color: #1A1F26; }
.ai-hub .oedge-cursor         { display: inline-block; width: 2px; height: 1.05em; background: var(--o-teal); margin-left: 1px; vertical-align: text-bottom; animation: oedgeBlink 1s step-end infinite; }
.ai-hub .oedge-cursor.done,
.ai-hub .oedge-cursor.is-done { display: none; }
@keyframes oedgeBlink { 50% { opacity: 0; } }

/* FIX 3d ? class-name mismatch: support both .visible (script) and .is-shown (proto) */
.ai-hub .oedge-cites          { display: none; margin-top: 12px; flex-wrap: wrap; gap: 8px; }
.ai-hub .oedge-cites.visible,
.ai-hub .oedge-cites.is-shown { display: flex; }
.ai-hub .oedge-cite           { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: rgba(63,181,168,0.12); color: var(--o-teal-deep, #2F6F6B); border: 1px solid rgba(63,181,168,0.25); font-weight: 500; }

/* Hide the legacy Bid-Drafter mockup if it's still in the DOM (safety net during migration) */
.ai-hub .hero__mockup--live   { display: none; }

/* ????????????????????????????????????????????????????????????
   v13.3 PHASE 1.1 ? User feedback round 1 (6 fixes)
   1. H1 too large ? tighten clamp
   2. "9 AI tools live" pill blurry ? solid contrast
   3. Hero/JTBD whitespace gap ? kill section padding above/below
   4. Outline button invisible text on dark ? explicit ink color
   5. Demo card empty teal pill at bottom ? live input row
   6. Body bg gap above .hero (cream leak) ? page-level dark
   ???????????????????????????????????????????????????????????? */

/* (6) Page-level dark ? eliminate cream peeking above the hero / under sections */
body:has(.ai-hub) { background: var(--o-charcoal, #0F1217); }
.ai-hub { background: var(--o-charcoal, #0F1217); min-height: 100dvh; }

/* (1) H1 ? tighter type scale, not obnoxious. Old clamp(2.75rem, 0.5rem + 6.5vw, 7rem) ? max 7rem (112px). New cap 4.5rem (72px). */
.ai-hub .hero__h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);   /* 36px ? 72px */
  line-height: 1.08;
  letter-spacing: -0.02em;
}
@media (max-width: 720px) {
  .ai-hub .hero__h1 { font-size: clamp(2rem, 7vw, 2.75rem); }   /* 32?44px on mobile */
}

/* Sub line ? gentle reduction, keeps readable */
.ai-hub .hero__sub {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);   /* 16?20px */
  max-width: 52ch;
}

/* (2) "9 AI tools live" pill ? solid contrast on dark; teal background, dark ink */
.ai-hub .trust-pill {
  background: rgba(255,255,255,0.04);
  border-color: var(--o-hairline);
  color: var(--o-text-mid);
}
.ai-hub .trust-pill::before { color: var(--o-teal); }
.ai-hub .trust-pill--accent {
  background: var(--o-teal);
  border-color: var(--o-teal);
  color: #0B1A19;                    /* near-black ink ? crisp, no blur */
  font-weight: 700;
}
.ai-hub .trust-pill--accent .trust-pill__dot {
  background: #0B1A19;
  box-shadow: 0 0 0 0 rgba(11,26,25,0.5);
}
.ai-hub .trust-pill--accent::before { content: none; }

/* (3) Kill the whitespace gap between hero and JTBD */
.ai-hub .hero {
  padding-block: var(--s12) var(--s6);   /* 48px top / 24px bottom (was 64/48) */
}
.ai-hub section.jtbd { padding-block: var(--s10) var(--s16); }   /* 40px top / 64px bottom */
.ai-hub section:not(.hero):not(.jtbd) { padding-block: var(--s12) var(--s12); }

/* Hero proof strip ? readable on dark */
.ai-hub .hero__proof-strip { border-top-color: var(--o-hairline); color: var(--o-text-meta); }
.ai-hub .proof-strip__label { color: var(--o-text-meta); }
.ai-hub .proof-strip__item  { color: var(--o-text-mid); }
.ai-hub .proof-strip__sep   { color: var(--o-text-meta); }

/* (4) Buttons on dark ? primary teal + outline with visible light ink */
.ai-hub .btn--primary {
  background: var(--o-teal);
  color: #0B1A19;
  border-color: var(--o-teal);
}
.ai-hub .btn--primary:hover {
  background: #4ECABC;
  border-color: #4ECABC;
  color: #0B1A19;
}
.ai-hub .btn--outline {
  background: transparent;
  color: var(--o-ink);
  border-color: rgba(232,230,224,0.30);
}
.ai-hub .btn--outline:hover {
  background: rgba(63,181,168,0.10);
  color: var(--o-ink);
  border-color: var(--o-teal);
}
.ai-hub .btn--ghost {
  color: var(--o-text-mid);
}
.ai-hub .btn--ghost:hover {
  color: var(--o-ink);
  background: rgba(255,255,255,0.05);
}

/* (5) Demo inputbar ? live input row */
.ai-hub .oedge-demo__inputbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--o-lifted);
  border-top: 1px solid var(--o-hairline);
}
.ai-hub .oedge-demo__input {
  flex: 1;
  background: var(--o-charcoal);
  border: 1px solid var(--o-hairline);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--o-text-meta);
  font-family: inherit;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-hub .oedge-demo__send {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--o-teal);
  color: #0B1A19;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, transform 160ms ease;
}
.ai-hub .oedge-demo__send:hover { background: #4ECABC; transform: translateY(-1px); }
.ai-hub .oedge-demo__open { color: var(--o-text-meta); font-size: 12px; text-decoration: none; }
.ai-hub .oedge-demo__open:hover { color: var(--o-ink); }
.ai-hub .oedge-demo__metabar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px;
  background: var(--o-lifted);
  border-top: 1px solid var(--o-hairline);
  font-size: 11px;
  color: var(--o-text-meta);
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Hero grid ? keep 2-col but tighten gap so content & demo card both visible centered */
.ai-hub .hero__inner {
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--s8), 4vw, var(--s12));
  align-items: center;
}
@media (max-width: 960px) {
  .ai-hub .hero__inner { grid-template-columns: 1fr; gap: var(--s8); }
}

/* JTBD eyebrow / title sized down so it's punchy not gigantic */
.ai-hub .jtbd .section-title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.1; }
.ai-hub .jtbd .section-eyebrow { letter-spacing: 0.14em; font-size: 12px; }

/* ????????????????????????????????????????????????????????????
   v13.3 PHASE 1.2 ? Section coloring + model-strip rewrite
   Items 8-12 from user feedback
   ???????????????????????????????????????????????????????????? */

/* ?? TOKEN REBINDING ? under .ai-hub, --text family ? dark-mode ink ?? */
/* Root cause fix: var(--text) = #1a1916 (light-mode) leaks on charcoal bg */
.ai-hub {
  --text:          var(--o-ink);         /* #E8E6E0 ? light ink on dark */
  --text-muted:    var(--o-text-mid);    /* #C7CBD1 */
  --text-faint:    var(--o-text-meta);   /* #7F8489 */
  --bg:            var(--o-charcoal);    /* #0F1217 */
  --bg-alt:        var(--o-lifted);      /* #1A1F26 */
  --surface:       var(--o-lifted);      /* #1A1F26 */
  --surface-2:     var(--o-lifted-2);    /* #20262E */
  --surface-3:     var(--o-lifted-2);
  --border:        var(--o-hairline);    /* #2A2F37 */
  --border-subtle: var(--o-hairline);
  --primary:       var(--o-teal);        /* #3FB5A8 */
  --primary-hover: #4ECABC;
  --primary-light: rgba(63,181,168,0.10);
  --primary-glow:  rgba(63,181,168,0.15);
}

/* ?? SECTION TITLE + EYEBROW ? explicit ink so var(--text) never leaks ?? */
.ai-hub .section-title,
.ai-hub .ai-everywhere__title,
.ai-hub .jtbd-tile__title {
  color: var(--o-ink);
}
.ai-hub .section-eyebrow {
  color: var(--o-header-teal);  /* #398A8E ? slightly muted teal for eyebrows */
}
.ai-hub .section-sub,
.ai-hub .lede {
  color: var(--o-text-mid);
}
.ai-hub .trust-item__text strong {
  color: var(--o-ink);
}
.ai-hub .trust-item__text span {
  color: var(--o-text-mid);
}

/* ?? SECTION BACKGROUND RHYTHM ? alternate dark / darker-lifted ?? */
/* hero ? charcoal (baseline, set in Phase 1.1) */
.ai-hub .model-strip       { background: var(--o-charcoal); }  /* stays in charcoal band */
.ai-hub .jtbd              { background: var(--o-charcoal); }
.ai-hub .ai-everywhere     { background: var(--o-lifted); }    /* slight lift: contrast cadence */
.ai-hub .all-tools         { background: var(--o-charcoal); }
.ai-hub .connector         { background: var(--o-lifted); }    /* "The system at a glance" */
.ai-hub .trust-rail        { background: var(--o-charcoal); }  /* "Specifics, not platitudes" */
.ai-hub .context-section   { background: var(--o-lifted); }
.ai-hub .final-cta         { background: var(--o-charcoal); }

/* Hairline separators between bands (subtle rhythm) */
.ai-hub .ai-everywhere,
.ai-hub .all-tools,
.ai-hub .connector,
.ai-hub .trust-rail,
.ai-hub .context-section,
.ai-hub .final-cta {
  border-top: 1px solid var(--o-hairline);
}

/* ?? AI-EVERYWHERE section title ?? */
.ai-hub .ai-everywhere__title {
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  color: var(--o-ink);
}
.ai-hub .ai-everywhere__desc { color: var(--o-text-mid); }
.ai-hub .ai-everywhere__desc strong { color: var(--o-teal); }

/* ?? CONNECTOR ("The system at a glance") section ?? */
.ai-hub .connector .section-title { color: var(--o-ink); }
.ai-hub .connector .section-sub   { color: var(--o-text-mid); }
.ai-hub .conn-layer-label         { color: var(--o-text-meta); }
.ai-hub .conn-node {
  background: var(--o-lifted-2);
  border-color: var(--o-hairline);
  color: var(--o-ink);
}
.ai-hub .conn-node:hover {
  border-color: var(--o-teal);
  color: var(--o-teal);
}
.ai-hub .connector-arrow-down svg { color: var(--o-text-meta); }
.ai-hub .connector-arrow-down span { color: var(--o-text-meta); }

/* ?? TRUST-RAIL ("Specifics, not platitudes") section ?? */
.ai-hub .trust-rail .section-title { color: var(--o-ink); }
.ai-hub .trust-item__icon {
  background: rgba(63,181,168,0.10);
  color: var(--o-teal);
}
.ai-hub .trust-item:hover .trust-item__icon {
  background: var(--o-teal);
  color: #0B1A19;
}

/* ?? JTBD tiles ? dark surface on charcoal bg ?? */
.ai-hub .jtbd-tile {
  background: var(--o-lifted);
  border-color: var(--o-hairline);
}
.ai-hub .jtbd-tile:hover {
  border-color: var(--o-teal);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(63,181,168,0.2);
}
.ai-hub .jtbd-tile__desc { color: var(--o-text-mid); }
.ai-hub .jtbd-tile__tools-count {
  background: var(--o-lifted-2);
  color: var(--o-text-meta);
  border: 1px solid var(--o-hairline);
}
.ai-hub .jtbd-router {
  border-top-color: var(--o-hairline);
  background: var(--o-lifted-2);
}
.ai-hub .router__question { color: var(--o-ink); }
.ai-hub .router__option {
  background: var(--o-lifted);
  border-color: var(--o-hairline);
}
.ai-hub .router__option strong { color: var(--o-ink); }
.ai-hub .router__option span   { color: var(--o-text-mid); }
.ai-hub .router__option:hover  {
  background: var(--o-lifted-2);
  border-color: var(--o-teal);
}

/* ?? PROFILE BANNER ? dark to eliminate cream peeking above hero ?? */
/* Item 12: cream gap above hero */
.ai-hub .profile-banner {
  background: var(--o-lifted);
  border-bottom-color: var(--o-hairline);
}
.ai-hub .profile-banner__inner svg { color: var(--o-teal); }
.ai-hub .profile-banner__inner strong { color: var(--o-ink); }
.ai-hub .profile-banner__cta {
  color: var(--o-teal);
  border-color: var(--o-teal);
}
.ai-hub .profile-banner__cta:hover {
  background: var(--o-teal);
  color: #0B1A19;
}

/* ?? MODEL STRIP REWRITE ? proprietary advantage framing ?? */
/* Kill white strip; dark charcoal with subtle inner glow */
.ai-hub .model-strip {
  background: var(--o-charcoal);
  border-top: 1px solid var(--o-hairline);
  border-bottom: 1px solid var(--o-hairline);
  padding: var(--s5) 0;
  position: relative;
  overflow: hidden;
}
/* Subtle teal ambient glow ? depth not brightness */
.ai-hub .model-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(63,181,168,0.04), transparent 70%);
  pointer-events: none;
}
.ai-hub .model-strip__inner {
  position: relative;
  z-index: 1;
  gap: var(--s2) var(--s4);
}
.ai-hub .model-strip__label {
  color: var(--o-teal);
  font-size: 9px;
  letter-spacing: 0.16em;
}
.ai-hub .model-strip__item {
  background: var(--o-lifted);
  border-color: var(--o-hairline);
  color: var(--o-text-mid);
}
.ai-hub .model-strip__item--accent {
  background: rgba(63,181,168,0.10);
  border-color: rgba(63,181,168,0.30);
  color: var(--o-teal);
}
.ai-hub .model-strip__item svg { color: var(--o-teal); }
.ai-hub .model-strip__divider { color: var(--o-text-meta); opacity: 0.6; }

/* ?? CONTEXT SECTION ? dark lifted background ?? */
.ai-hub .context-block__title { color: var(--o-ink); }
.ai-hub .context-section p,
.ai-hub .context-section li   { color: var(--o-text-mid); }
.ai-hub .context-section h3   { color: var(--o-ink); }
.ai-hub .context-block {
  border-bottom-color: var(--o-hairline);
}

/* ?? FINAL CTA section ?? */
.ai-hub .final-cta .section-title { color: var(--o-ink); }
.ai-hub .final-cta .section-sub   { color: var(--o-text-mid); }

/* ?? TOOL CARDS ? dark ink tiles + solid CTA (ambient depth, no muddy black) ?? */
.ai-hub .tool-card,
.ai-hub .tools-grid .tool-card:first-child {
  background: #14181e !important;
  background-image: none !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-color: #2a2f38 !important;
  border-radius: 16px;
  color: #f0ede4;
  padding: 20px 20px 18px !important;
  gap: 12px !important;
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon badge"
    "name name"
    "desc desc"
    "cta cta";
  align-items: start;
  box-shadow:
    0 10px 30px -10px rgba(15, 23, 42, 0.12),
    0 4px 6px -2px rgba(15, 23, 42, 0.04) !important;
  transform: translateY(0);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease;
}
.ai-hub .tool-card::after,
.ai-hub .tools-grid .tool-card:first-child::after {
  display: none !important;
  content: none !important;
}
.ai-hub .tools-grid .tool-card:first-child {
  grid-column: auto;
}
.ai-hub .tool-card:hover,
.ai-hub .tools-grid .tool-card:first-child:hover {
  border-color: rgba(79, 179, 165, 0.4) !important;
  transform: translateY(-2px);
  box-shadow:
    0 14px 34px -12px rgba(15, 23, 42, 0.16),
    0 6px 10px -4px rgba(15, 23, 42, 0.06) !important;
}
.ai-hub .tool-card__name,
.ai-hub .tool-card__name a,
.ai-hub .tools-grid .tool-card:first-child .tool-card__name,
.ai-hub .tools-grid .tool-card:first-child .tool-card__name a {
  grid-area: name;
  color: #f0ede4 !important;
  font-size: 1.125rem !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}
.ai-hub .tool-card__name a:hover {
  color: #4fb3a5 !important;
}
.ai-hub .tool-card__desc,
.ai-hub .tools-grid .tool-card:first-child .tool-card__desc {
  grid-area: desc;
  color: #b8b3a4 !important;
  font-size: 0.875rem !important;
  line-height: 1.55;
  max-width: none;
  margin: 0;
}
.ai-hub .tool-card__badge {
  grid-area: badge;
  justify-self: end;
  align-self: start;
  background: transparent !important;
  color: #4fb3a5 !important;
  border: 1px solid rgba(79, 179, 165, 0.4) !important;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px !important;
  padding: 4px 8px !important;
  border-radius: 999px;
  margin: 0;
}
.ai-hub .tool-card__icon {
  grid-area: icon;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  color: #4fb3a5 !important;
  background: rgba(79, 179, 165, 0.1) !important;
  border: 1px solid rgba(79, 179, 165, 0.28) !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.ai-hub .tool-card:hover .tool-card__icon {
  border-color: rgba(79, 179, 165, 0.45) !important;
  box-shadow: none !important;
  transform: none;
}
.ai-hub .tool-card__cta {
  grid-area: cta;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: start;
  margin-top: 4px !important;
  padding: 10px 16px !important;
  border-radius: 10px;
  background: #4fb3a5 !important;
  color: #0b1114 !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform 160ms ease, background 160ms ease;
}
.ai-hub .tool-card__cta::after {
  content: none !important;
}
.ai-hub .tool-card:hover .tool-card__cta {
  background: #3fa596 !important;
  color: #0b1114 !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}

/* Filtered view: drop redundant cluster eyebrow (pill already says Keep/Win/…) */
.ai-hub .all-tools.is-filtered .edge-cluster__eyebrow {
  display: none !important;
}
.ai-hub .all-tools.is-filtered .edge-cluster__head {
  margin-bottom: 8px;
}


/* Stage 2 data-flow note ? inline annotation in conn-layer-label */
.conn-layer-note {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--o-text-meta);
  margin-top: 2px;
  font-family: var(--font-body);
}
.ai-hub .conn-layer-note { color: var(--o-teal); opacity: 0.8; }

/* ?? Edge lifecycle clusters (Part II �14.0) ?? */
.edge-clusters { display: flex; flex-direction: column; gap: var(--s8, 48px); }
.edge-cluster__head { margin-bottom: var(--s4, 20px); max-width: 640px; }
.edge-cluster__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.edge-cluster__title {
  margin: 0 0 8px;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: clamp(22px, 3vw, 28px);
  color: var(--text);
}
.edge-cluster__desc { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
.tools-grid--cluster { margin-top: 4px; }
.edge-calc-bridge {
  margin-top: var(--s6, 32px);
  padding-top: var(--s4, 20px);
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}
.edge-calc-bridge a { color: var(--primary); font-weight: 600; }
.opora-d4-save-bar {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border, #e3dfd9);
  border-radius: 12px;
  background: var(--surface-2, #f4f2ef);
}
.opora-d4-save-hint { margin: 0 0 10px; font-size: 13px; color: var(--muted, #76716a); }
.opora-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--primary, #4f98a3);
  background: var(--primary, #4f98a3);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.opora-save-btn--anon { background: transparent; color: var(--primary); }
.opora-save-btn--saved { opacity: 0.85; cursor: default; }

@media (max-width: 640px) {
  .ai-hub .edge-clusters { gap: 28px; }
  .ai-hub .edge-cluster__title { font-size: 20px; }
  .ai-hub .tools-search-bar { margin-bottom: 12px; }
  .ai-hub .tools-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .ai-hub .tools-grid--cluster { grid-template-columns: 1fr; }
  .ai-hub .all-tools { padding-top: 24px !important; }
}

/* ------------------------------------------------------------
   Operator toolkit band ? cream shell, dark tool cards unchanged
   Scope: .ai-hub .all-tools only (does not affect how-connect+)
   ------------------------------------------------------------ */
.ai-hub .all-tools {
  background: #f9f8f3 !important;
  border-top: 1px solid #e8e4dc !important;
  color: #1a1d24;
}
/* Workspace head — neutral eyebrow; green reserved for active/CTA */
.ai-hub .all-tools .section-eyebrow {
  color: #64748b !important;
}
.ai-hub .all-tools .section-title {
  color: #14181e !important;
}
.ai-hub .all-tools .section-sub {
  color: #5a6270 !important;
  max-width: none;
}
.ai-hub .ai-hub-workspace-head .section-sub {
  white-space: nowrap;
}
.ai-hub .ai-hub-workspace-head {
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .ai-hub .ai-hub-workspace-head .section-sub {
    white-space: normal;
  }
}
/* ============================================================
   Filter ribbon — user HTML/CSS (nums = Barlow only)
   ============================================================ */
.ai-hub .all-tools .filter-ribbon {
  --cream: #f7f5ef;
  --cream-2: #efeadf;
  --ink: #0a1424;
  --ink-2: #14203a;
  --teal: #0f5f56;
  --sienna: #a45a2b;
  --muted: #6b7080;
  --muted-2: #3b4152;
  --border: #e5e0d3;
  --border-strong: #c9c3b1;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(10,20,36,0.04), 0 4px 12px rgba(10,20,36,0.05);
  --f-display: "Barlow", system-ui, -apple-system, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  padding: 0;
  max-width: none;
  margin: 0 0 28px;
  font-family: var(--f-body);
}
.ai-hub .all-tools .filter-ribbon-card {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ai-hub .all-tools .filter-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  min-width: 0;
}
.ai-hub .all-tools .filter-tab {
  flex: 1;
  min-width: 0;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  font: inherit;
}
.ai-hub .all-tools .filter-tab + .filter-tab::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--border);
}
.ai-hub .all-tools .filter-tab:hover { background: var(--cream-2); }
.ai-hub .all-tools .filter-tab.is-active { background: var(--cream-2); }
.ai-hub .all-tools .filter-tab.is-active .tab-num { color: var(--teal); }
.ai-hub .all-tools .filter-tab.is-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -14px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
}
.ai-hub .all-tools .tab-num {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--muted-2);
  min-width: 34px;
  line-height: 1;
  transition: color 0.15s;
}
.ai-hub .all-tools .tab-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-hub .all-tools .tab-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.ai-hub .all-tools .tab-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}
.ai-hub .all-tools .flow-ask-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 12px;
  transition: background 0.15s, transform 0.15s;
  align-self: center;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}
.ai-hub .all-tools .flow-ask-pill:hover {
  background: var(--ink-2);
  transform: translateY(-1px);
  color: var(--cream);
}
.ai-hub .all-tools .flow-ask-icon {
  color: var(--sienna);
  display: inline-flex;
  align-items: center;
}
.ai-hub .all-tools .flow-ask-label {
  font-size: 15px;
  font-weight: 600;
}
.ai-hub .all-tools .flow-ask-meta {
  font-size: 12px;
  color: rgba(247,245,239,0.55);
  padding-left: 8px;
  border-left: 1px solid rgba(247,245,239,0.14);
  margin-left: 2px;
}
.ai-hub .all-tools .flow-ask-kbd {
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(247,245,239,0.6);
  background: rgba(247,245,239,0.08);
  border: 1px solid rgba(247,245,239,0.14);
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 4px;
}
.ai-hub .all-tools .filter-ribbon-meta {
  font-size: 13px;
  color: var(--muted);
  padding: 10px 8px 0;
  text-align: right;
}
.ai-hub .all-tools .filter-link {
  color: var(--teal);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
@media (max-width: 1000px) {
  .ai-hub .all-tools .filter-ribbon-card { flex-wrap: wrap; }
  .ai-hub .all-tools .flow-ask-pill { width: 100%; justify-content: center; }
}
@media (max-width: 700px) {
  .ai-hub .all-tools .filter-ribbon-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }
  .ai-hub .all-tools .filter-tabs { flex-direction: column; gap: 2px; }
  .ai-hub .all-tools .filter-tab { padding: 10px 12px; }
  .ai-hub .all-tools .filter-tab + .filter-tab::before { display: none; }
  .ai-hub .all-tools .filter-tab.is-active::after { display: none; }
  .ai-hub .all-tools .filter-tab.is-active { background: var(--teal); }
  .ai-hub .all-tools .filter-tab.is-active .tab-num,
  .ai-hub .all-tools .filter-tab.is-active .tab-title,
  .ai-hub .all-tools .filter-tab.is-active .tab-meta { color: white; }
  .ai-hub .all-tools .tab-num { font-size: 22px; min-width: 28px; }
  .ai-hub .all-tools .filter-ribbon-meta { text-align: left; padding: 8px 0 0; }
}

.ai-hub .all-tools .edge-cluster__eyebrow {
  color: #2a6b62 !important;
}
.ai-hub .all-tools .edge-cluster__title {
  color: #14181e !important;
  font-family: "Barlow", "Inter", system-ui, -apple-system, sans-serif;
}
.ai-hub .all-tools .edge-cluster__desc {
  color: #5a6270 !important;
}
.ai-hub .all-tools .edge-calc-bridge {
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #fff !important;
  border: 1px solid #e5e5e0 !important;
  color: #3d4550 !important;
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.06);
}
.ai-hub .all-tools .edge-calc-bridge a {
  color: #1f5c55 !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-hub .all-tools .edge-calc-bridge__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2a6b62;
  margin-bottom: 4px;
}
.ai-hub .all-tools .edge-calc-bridge__meta {
  display: inline;
  color: #5a6270;
}
.ai-hub .all-tools #no-results p {
  color: #5a6270 !important;
}

/* Reputation Watch ? keep dark card on cream toolkit band */
.ai-hub .all-tools .opora-rep,
.ai-hub .all-tools #reputation-watch .opora-rep {
  background: #0F1217 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin: 0 !important;
  color: #e8e6e0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.ai-hub .all-tools .opora-rep__eyebrow {
  color: #3fb5a8 !important;
  margin: 0 0 8px !important;
}
.ai-hub .all-tools .opora-rep__title {
  color: #ffffff !important;
  margin: 0 0 8px !important;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.ai-hub .all-tools .opora-rep__desc {
  color: #b6bbc4 !important;
  margin: 0 0 14px !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}
.ai-hub .all-tools .opora-rep__connect {
  background: #2f7f86 !important;
  color: #ffffff !important;
  margin-top: 0 !important;
}
.ai-hub .all-tools .opora-rep__draft,
.ai-hub .all-tools .opora-rep__drafts {
  color: #9ca3af !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Tighten toolkit ? how-connect ? trusted gaps */
.ai-hub .all-tools {
  padding-bottom: 20px !important;
}
.ai-hub .how-connect-section {
  padding-top: 32px !important;
  padding-bottom: 28px !important;
}
.ai-hub .how-connect-section .hc-ribbon {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
.ai-hub .edge-sec.edge-trusted {
  padding-top: 36px !important;
}

/* Cluster anchors — account for sticky header when filter scrolls */
#cluster-win,
#cluster-keep,
#cluster-hire,
#cluster-always,
#tools-grid {
  scroll-margin-top: 96px;
}
/* Workspace prototype — light chrome, grid first */
.ai-hub .all-tools {
  background: #f9f8f3 !important;
  padding-top: 48px !important;
}
.ai-hub .ai-hub-workspace-head .section-title {
  font-size: clamp(28px, 4vw, 42px) !important;
  letter-spacing: -0.02em;
  font-weight: 800 !important;
}