/* ===== Extracted inline style block 01 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#070e1b;--nav:#0d1f3a;--bg2:#0b1527;--bg3:#101d35;--srf:#152240;
  --red:#e74c3c;--cyan:#8ee3ff;--cy2:#22d3ee;--teal:#2dd4bf;--gold:#fbbf24;
  --t1:#fff;--t2:#d1d9e6;--t3:#8a9bb0;
  --bdr:rgba(142,227,255,0.1);--bdr2:rgba(142,227,255,0.2);--card-bg:linear-gradient(170deg,#0d1f3a,#0a1929);--cyan-rgb:142,227,255;--gold-rgb:251,191,36;--red-rgb:231,76,60;--card-bg2:#0c1a2e;--subtle:rgba(142,227,255,0.04);--subtle2:rgba(14,165,233,0.04);--subtle3:rgba(142,227,255,0.15);
  --fn:'IBM Plex Sans','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--se:'Instrument Serif',Georgia,serif;--sa:'IBM Plex Sans',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--fn);background:var(--bg);color:var(--t1);line-height:1.8;font-size:18px;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* NAV */
.topbar{position:sticky;top:0;z-index:200;background:var(--nav);border-bottom:1px solid var(--bdr)}
.topbar-in{max-width:1300px;margin:0 auto;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 36px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;cursor:pointer;flex-shrink:0;min-width:0}
.brand-lockup{height:58px;width:auto;display:block;filter:drop-shadow(0 0 6px rgba(142,227,255,0.15));margin-top:10px}
.tnav{display:flex;gap:20px;align-items:center;flex-wrap:nowrap}
.tnav a,.tnav .pdrop-trigger{color:var(--cyan);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:4px;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap;line-height:1}
.tnav a:hover,.tnav .pdrop-trigger:hover{color:var(--t1);border-color:var(--cyan)}
.hamburger{display:none;cursor:pointer;padding:12px;border-radius:10px;border:1px solid var(--bdr2)}
.hamburger span{display:block;width:28px;height:2.5px;background:var(--t1);margin:6px 0;border-radius:2px}
.mob-menu{display:none;position:fixed;top:84px;left:0;right:0;bottom:0;background:var(--nav);z-index:199;padding:20px 36px}
.mob-menu.open{display:flex;flex-direction:column}
.mob-menu a{color:var(--t1);text-decoration:none;font-size:20px;font-weight:bold;text-transform:uppercase;padding:18px 0;border-bottom:1px solid var(--bdr)}
.page{display:flex;flex-direction:column;min-height:calc(100vh - 84px)}

/* HOME HERO */
.hero-zone{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:96px 36px 72px;text-align:center;min-height:78vh;isolation:isolate
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 28%, rgba(34,211,238,0.12), transparent 28%),
    radial-gradient(circle at 20% 70%, rgba(34,211,238,0.06), transparent 24%),
    radial-gradient(circle at 82% 65%, rgba(231,76,60,0.05), transparent 22%),
    linear-gradient(180deg, rgba(7,14,27,0.55), rgba(7,14,27,0.92));
  z-index:0
}
.hero-orbit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}
.hero-globe{
  position:relative;width:min(760px,82vw);aspect-ratio:1/1;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.10), transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(34,211,238,0.16), rgba(8,19,35,0.03) 56%, transparent 72%);
  box-shadow:0 0 0 1px rgba(142,227,255,0.08),0 0 80px rgba(34,211,238,0.10),inset 0 0 80px rgba(34,211,238,0.08);
  opacity:.95;filter:blur(.1px)
}
.hero-globe::before{
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:repeating-linear-gradient(to right, rgba(142,227,255,0.08) 0 1px, transparent 1px 42px),repeating-linear-gradient(to bottom, rgba(142,227,255,0.07) 0 1px, transparent 1px 42px);
  mask-image:radial-gradient(circle, #000 68%, transparent 72%);-webkit-mask-image:radial-gradient(circle, #000 68%, transparent 72%);opacity:.65
}
.hero-globe::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:1px solid rgba(142,227,255,0.10);box-shadow:0 0 40px rgba(34,211,238,0.08);opacity:.7}
.hero-ring{position:absolute;border-radius:50%;border:1px solid rgba(142,227,255,0.10);pointer-events:none}
.hero-ring.r1{width:min(880px,90vw);aspect-ratio:1/1;opacity:.35}
.hero-ring.r2{width:min(980px,98vw);aspect-ratio:1/1;opacity:.18}
.hero-node{position:absolute;width:10px;height:10px;border-radius:50%;background:#22d3ee;box-shadow:0 0 0 6px rgba(34,211,238,0.08),0 0 14px rgba(34,211,238,0.45);opacity:.95}
.hero-node.n1{top:28%;left:26%}.hero-node.n2{top:38%;right:23%}.hero-node.n3{bottom:28%;left:38%}.hero-node.n4{bottom:22%;right:32%}
.hero-arc{position:absolute;border-top:1px solid rgba(142,227,255,0.20);border-radius:50%;pointer-events:none;filter:drop-shadow(0 0 8px rgba(34,211,238,0.16))}
.hero-arc.a1{width:340px;height:120px;top:32%;left:28%;transform:rotate(-8deg)}
.hero-arc.a2{width:300px;height:110px;bottom:30%;right:30%;transform:rotate(10deg)}
.hero-glow{position:absolute;inset:0;overflow:hidden;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:bfade 16s ease-in-out infinite}
.blob.b1{width:480px;height:480px;background:rgba(34,211,238,0.10);top:6%;left:4%}
.blob.b2{width:360px;height:360px;background:rgba(231,76,60,0.06);top:46%;right:6%;animation-delay:-5s}
.blob.b3{width:520px;height:520px;background:rgba(45,212,191,0.07);bottom:2%;left:28%;animation-delay:-9s}
@keyframes bfade{0%,100%{transform:scale(.92);opacity:.38}50%{transform:scale(1.06);opacity:.68}}
.hc{position:relative;z-index:3;width:100%;max-width:1200px;margin:0 auto}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;margin-bottom:22px;border:1px solid rgba(142,227,255,0.16);border-radius:999px;background:rgba(255,255,255,0.03);color:var(--cyan);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-zone h1{font-family:var(--se);font-size:clamp(56px,9vw,96px);font-weight:400;color:var(--t1);line-height:1.02;letter-spacing:-.05em;margin-bottom:22px;max-width:1040px;margin-left:auto;margin-right:auto;text-wrap:balance}
.hero-zone h1 em{font-style:italic;color:var(--cyan)}.hero-zone h1 .acc{color:var(--red)}
.hero-sub{font-size:clamp(21px,2.5vw,28px);color:var(--t2);line-height:1.65;max-width:980px;margin:0 auto}
.hero-seq{margin-top:16px;font-size:17px;color:rgba(255,255,255,0.82);letter-spacing:.04em}
.hero-proof{margin-top:12px;font-size:16px;color:var(--t3)}
.hero-cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* SUB HERO (gateway pages) */
.sub-hero{position:relative;overflow:hidden;padding:56px 36px 44px;text-align:center}
.sub-hero .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 40%,rgba(34,211,238,0.05),transparent 55%)}
.sub-hero .hc{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.sub-hero h1{font-family:var(--se);font-size:clamp(40px,7vw,68px);font-weight:400;color:var(--t1);line-height:1.08;letter-spacing:-.03em;margin-bottom:20px}
.sub-hero h1 em{font-style:italic;color:var(--cyan)}.sub-hero h1 .acc{color:var(--red)}
.sub-hero p{font-size:clamp(18px,2.2vw,22px);color:var(--t2);line-height:1.7;max-width:900px;margin:0 auto}
.back-link{max-width:1200px;margin:0 auto;padding:16px 36px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.back-link a.back-next{color:var(--cyan);font-weight:600}
.back-link a.back-next:hover{color:var(--cyan);opacity:0.8}

/* ═══════════════════════════════════════════════════════════════════
   v85: HOW-TO ENTRY CARD (on platform docs pages)
   Style matches existing docs cards (dark SPA theme).
   ═══════════════════════════════════════════════════════════════════ */
.howto-entry-card{
  display:block;background:var(--card-bg);
  border:1px solid var(--bdr2);border-radius:16px;padding:22px 24px 18px;
  text-decoration:none;color:var(--t1);cursor:pointer;transition:all .3s;
  position:relative;overflow:hidden;
}
.howto-entry-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#0d9488,#22d3ee);
}
.howto-entry-card:hover{
  border-color:var(--cyan);transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(13,148,136,0.25);
}
.howto-entry-card .he-head{
  display:flex;align-items:center;gap:18px;margin-bottom:16px;
}
.howto-entry-card .he-icon{
  font-size:38px;line-height:1;flex-shrink:0;
  width:58px;height:58px;display:flex;align-items:center;justify-content:center;
  background:rgba(34,211,238,0.08);border-radius:12px;
}
.howto-entry-card .he-title{flex:1;min-width:0}
.howto-entry-card .he-title h3{
  font-family:var(--se);font-size:22px;font-weight:400;
  color:var(--t1);margin:0 0 4px;line-height:1.2;
}
.howto-entry-card .he-title p{
  font-size:14px;color:var(--t3);margin:0;line-height:1.4;
}
.howto-entry-card .he-arrow{
  color:var(--cyan);font-weight:600;font-size:14px;
  white-space:nowrap;flex-shrink:0;
}
.howto-entry-card .he-cats{
  display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 8px;
  border-top:1px solid rgba(142,227,255,0.08);
}
.howto-entry-card .he-cat{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:rgba(142,227,255,0.06);border:1px solid rgba(142,227,255,0.18);
  font-size:12.5px;color:var(--t2);
}
.howto-entry-card .he-cat span{font-size:14px}
.howto-entry-card .he-cat em{color:var(--cyan);font-style:normal;font-weight:600;margin-left:2px}
.howto-entry-card .he-meta{
  margin-top:10px;font-size:12px;color:var(--t3);
}
.howto-entry-card .he-meta a{color:var(--cyan);text-decoration:none}
.howto-entry-card .he-meta a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════════
   v85: HOW-TO VIEWER — light-teal theme, matches Quick Tutorials aesthetic
   Viewer is a self-contained "docs mode" with its own background, regardless
   of the main site's dark/light toggle.
   ═══════════════════════════════════════════════════════════════════ */
.howto-viewer{
  --ht-bg:#fafbfc;
  --ht-surface:#ffffff;
  --ht-border:#e5e7eb;
  --ht-border-soft:#f1f5f9;
  --ht-text:#111827;
  --ht-text-mid:#374151;
  --ht-text-soft:#6b7280;
  --ht-teal:#0d9488;
  --ht-teal-dark:#115e59;
  --ht-teal-bg:#f0fdfa;
  --ht-teal-light:#ccfbf1;
  --ht-teal-border:#99f6e4;

  max-width:1300px;margin:0 auto;padding:16px 24px 0;
  background:var(--ht-bg);color:var(--ht-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  border-radius:12px;
}
/* The viewer imposes its own background on its children regardless of theme */
.howto-viewer *{box-sizing:border-box}
.howto-viewer a{color:var(--ht-teal)}
.howto-viewer h1,.howto-viewer h2,.howto-viewer h3,.howto-viewer h4{
  color:var(--ht-text);font-family:inherit;
}

/* Header strip inside viewer */
.howto-viewer .ht-hdr{
  display:flex;align-items:center;gap:14px;
  padding:18px 6px 14px;border-bottom:1px solid var(--ht-border);
  margin-bottom:18px;
}
.howto-viewer .ht-hdr .ht-hdr-icon{
  font-size:32px;line-height:1;
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:var(--ht-teal-bg);border-radius:10px;
}
.howto-viewer .ht-hdr-text{flex:1;min-width:0}
.howto-viewer .ht-hdr-text h1{
  font-size:24px;font-weight:700;margin:0 0 3px;letter-spacing:-0.01em;
}
.howto-viewer .ht-hdr-text p{
  font-size:14px;color:var(--ht-text-soft);margin:0;line-height:1.4;
}
.howto-viewer .ht-hdr-back{
  padding:7px 14px;background:#fff;border:1px solid var(--ht-border);
  border-radius:6px;color:var(--ht-text-mid);text-decoration:none;
  font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;
  white-space:nowrap;
}
.howto-viewer .ht-hdr-back:hover{
  background:var(--ht-teal-bg);border-color:var(--ht-teal-border);
  color:var(--ht-teal-dark);
}

/* Main layout: sidebar + content */
.howto-viewer .ht-main{
  display:grid;grid-template-columns:400px 1fr;gap:28px;
  align-items:start;padding-bottom:40px;
}

/* Sidebar */
.howto-viewer .ht-sidebar{
  position:sticky;top:16px;max-height:calc(100vh - 32px);
  overflow-y:auto;padding:4px 8px 20px 0;
  border-right:1px solid var(--ht-border-soft);
}
.howto-viewer .ht-search{
  width:100%;padding:8px 12px;margin-bottom:14px;
  border:1px solid var(--ht-border);border-radius:6px;
  font-size:13px;font-family:inherit;background:#fff;color:var(--ht-text);
}
.howto-viewer .ht-search:focus{
  outline:none;border-color:var(--ht-teal);
  box-shadow:0 0 0 3px rgba(13,148,136,0.12);
}
.howto-viewer .ht-cat-group{margin-bottom:2px}
.howto-viewer .ht-cat-hdr{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--ht-teal-dark);
  padding:9px 8px 2px 8px;border-radius:5px;
  margin-bottom:0;cursor:pointer;user-select:none;
  transition:background-color .15s;
}
.howto-viewer .ht-cat-hdr:hover{background:var(--ht-teal-bg)}
.howto-viewer .ht-cat-hdr > span:nth-of-type(2){font-size:18px;line-height:1}
.howto-viewer .ht-cat-hdr .ht-cat-chevron{
  display:inline-block;font-size:10px;margin-right:2px;
  transition:transform .18s ease;color:var(--ht-teal);
  transform:rotate(0deg);
}
.howto-viewer .ht-cat-group.expanded .ht-cat-hdr .ht-cat-chevron{
  transform:rotate(90deg);
}
.howto-viewer .ht-cat-hdr .ht-cat-count{
  margin-left:auto;font-size:11px;font-weight:600;
  color:var(--ht-text-soft);letter-spacing:0.02em;text-transform:none;
  background:var(--ht-teal-bg);padding:2px 7px;border-radius:10px;
}
.howto-viewer .ht-toc{
  list-style:none;padding:0;margin:0 0 0 16px;
  max-height:0;overflow:hidden;transition:max-height .22s ease;
}
.howto-viewer .ht-cat-group.expanded .ht-toc{
  max-height:1000px; /* generous cap; accordion opens */
  padding:2px 0 4px 16px;
  border-left:1px solid var(--ht-border-soft);
  margin-left:12px;
}
.howto-viewer .ht-toc li{margin:0}
.howto-viewer .ht-toc a{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:3px 10px;color:var(--ht-text-mid);text-decoration:none;
  font-size:12.5px;line-height:1.35;border-radius:4px;
  border-left:2px solid transparent;cursor:pointer;
  margin-left:-14px;
}
.howto-viewer .ht-toc a:hover{
  background:var(--ht-teal-bg);color:var(--ht-teal-dark);
}
.howto-viewer .ht-toc a.active{
  background:var(--ht-teal-light);color:var(--ht-teal-dark);
  font-weight:600;border-left-color:var(--ht-teal);
}
.howto-viewer .ht-toc .ht-toc-steps{
  font-size:10.5px;color:var(--ht-text-soft);font-weight:500;flex-shrink:0;
}
.howto-viewer .ht-toc a.active .ht-toc-steps{color:var(--ht-teal-dark)}
.howto-viewer .ht-empty{
  font-size:12px;color:var(--ht-text-soft);font-style:italic;
  padding:14px 4px;display:none;
}
.howto-viewer .ht-empty.show{display:block}

/* Content area */
.howto-viewer .ht-content{
  background:var(--ht-surface);border:1px solid var(--ht-border);
  border-radius:10px;padding:28px 32px 24px;min-height:420px;
}
.howto-viewer .ht-breadcrumb{
  font-size:12px;color:var(--ht-text-soft);
  letter-spacing:0.04em;margin-bottom:10px;
}
.howto-viewer .ht-breadcrumb span{color:var(--ht-teal)}
.howto-viewer .ht-content h2{
  font-size:26px;font-weight:700;margin:0 0 6px;
  color:var(--ht-text);line-height:1.25;letter-spacing:-0.01em;
}
.howto-viewer .ht-content .ht-content-sum{
  font-size:15px;color:var(--ht-text-soft);margin:0 0 20px;
  line-height:1.55;
}
.howto-viewer .ht-content .ht-content-meta{
  display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ht-teal-dark);background:var(--ht-teal-bg);
  padding:4px 10px;border-radius:4px;margin-bottom:14px;
}
.howto-viewer .ht-content ol{
  padding-left:22px;margin:0;
}
.howto-viewer .ht-content ol li{
  font-size:15px;color:var(--ht-text-mid);line-height:1.7;
  margin-bottom:10px;padding-left:4px;
}
.howto-viewer .ht-content ol li strong{color:var(--ht-text)}
.howto-viewer .ht-content .tip{
  border-bottom:1px dotted var(--ht-teal);cursor:help;color:var(--ht-teal-dark);
}
.howto-viewer .ht-ref-link{
  margin-top:22px;padding-top:16px;border-top:1px dashed var(--ht-border);
  font-size:13px;
}
.howto-viewer .ht-ref-link a{
  color:var(--ht-teal);text-decoration:none;font-weight:600;
}
.howto-viewer .ht-ref-link a:hover{text-decoration:underline}

/* Prev / Next nav at bottom of content */
.howto-viewer .ht-pager{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:28px;padding-top:18px;border-top:1px solid var(--ht-border);
}
.howto-viewer .ht-pager a{
  flex:1;max-width:45%;padding:10px 14px;
  background:#fff;border:1px solid var(--ht-border);border-radius:7px;
  color:var(--ht-text-mid);text-decoration:none;cursor:pointer;
  font-size:13px;line-height:1.35;transition:all .15s;
}
.howto-viewer .ht-pager a:hover{
  background:var(--ht-teal-bg);border-color:var(--ht-teal-border);
  color:var(--ht-teal-dark);
}
.howto-viewer .ht-pager .ht-pager-lbl{
  font-size:11px;color:var(--ht-text-soft);
  text-transform:uppercase;letter-spacing:0.06em;margin-bottom:3px;
}
.howto-viewer .ht-pager .ht-pager-prev{text-align:left}
.howto-viewer .ht-pager .ht-pager-next{text-align:right;margin-left:auto}
.howto-viewer .ht-pager a.disabled{opacity:0.4;pointer-events:none}

/* Mobile: collapse sidebar into a top dropdown */
@media (max-width: 900px){
  .howto-viewer .ht-main{grid-template-columns:1fr;gap:14px}
  .howto-viewer .ht-sidebar{
    position:static;max-height:none;
    border-right:none;border-bottom:1px solid var(--ht-border);
    padding:0 0 14px;
  }
  .howto-viewer .ht-sidebar-toggle{
    display:block;width:100%;padding:10px 14px;margin:0 0 10px;
    background:var(--ht-teal-bg);border:1px solid var(--ht-teal-border);
    border-radius:6px;font-size:14px;font-weight:600;
    color:var(--ht-teal-dark);text-align:left;cursor:pointer;
  }
  .howto-viewer .ht-sidebar-toggle::after{
    content:"▾";float:right;transition:transform .2s;
  }
  .howto-viewer .ht-sidebar.collapsed .ht-sidebar-inner{display:none}
  .howto-viewer .ht-sidebar.collapsed .ht-sidebar-toggle::after{transform:rotate(-90deg)}
  .howto-viewer .ht-content{padding:20px 20px 18px}
  .howto-viewer .ht-content h2{font-size:22px}
}
@media (min-width: 901px){
  .howto-viewer .ht-sidebar-toggle{display:none}
}


body.light-theme .back-link a.back-next{color:#0891b2 !important}
body.light-theme .back-link a.back-next:hover{color:#0e7490 !important}
.back-link a{font-size:15px;color:var(--t3);text-decoration:none;font-weight:600;cursor:pointer;transition:color .15s}
.back-link a:hover{color:var(--cyan)}

/* CONTENT SECTION (text blocks between cards) */
.content-section{max-width:1000px;margin:0 auto;padding:0 36px 56px}
.content-section h2{font-family:var(--se);font-size:clamp(28px,4vw,40px);color:var(--t1);margin-bottom:16px;text-align:center}
.content-section h2 em{font-style:italic;color:var(--cyan)}
.content-section p{font-size:18px;color:var(--t2);line-height:1.8;margin-bottom:16px}
.content-section p:last-child{margin-bottom:0}

/* COMPARISON GRID */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto;padding:0 36px 48px}
.compare-box{border-radius:16px;padding:28px;border:1px solid var(--bdr)}
.compare-old{background:rgba(var(--red-rgb,231,76,60),0.04);border-color:rgba(231,76,60,0.15)}
.compare-new{background:var(--subtle);border-color:rgba(34,211,238,0.15)}
.compare-box h3{font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.compare-old h3{color:var(--red)}.compare-new h3{color:var(--cyan)}
.compare-box p{font-size:16px;color:var(--t2);line-height:1.65;margin-bottom:8px}
.compare-box p:last-child{margin-bottom:0}
.compare-trio{max-width:1000px;margin:0 auto;padding:0 36px 48px}
.compare-trio .compare-box{border-radius:16px;padding:16px 14px;border:1px solid var(--bdr)}
.compare-trio .compare-box h3{font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.compare-trio .compare-box p{font-size:14px;color:var(--t2);line-height:1.65;margin-bottom:6px}
.compare-trio .compare-box p:last-child{margin-bottom:0}
.compare-trio .compare-old{background:rgba(var(--red-rgb,231,76,60),0.04);border-color:rgba(231,76,60,0.15)}
.compare-trio .compare-new{background:var(--subtle);border-color:rgba(34,211,238,0.15)}


/* STAT BAR */
.stat-bar{text-align:center;padding:16px 36px 48px}
.stat-bar .big{font-family:var(--se);font-size:72px;font-style:italic;color:var(--cyan);line-height:1}
.stat-bar .lbl{font-size:20px;color:var(--t2);margin-top:8px}

/* GATEWAY / CHAPTER CARDS */
.gateways{position:relative;z-index:2;padding:0 36px 48px}
.gateways-in{max-width:1200px;margin:0 auto}
.gw-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}.gw-grid>.gw-card{flex:1 1 280px;max-width:calc(50% - 8px);min-width:240px}
.gw-card{border-radius:18px;padding:36px 28px;text-align:center;text-decoration:none;color:var(--t1);position:relative;overflow:hidden;transition:all .35s;cursor:pointer;display:flex;flex-direction:column;align-items:center;background:var(--card-bg);border:1px solid var(--subtle3)}
.gw-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,var(--cy2),var(--teal))}
.gw-card:hover{transform:translateY(-8px);box-shadow:0 18px 48px rgba(0,0,0,0.34);border-color:rgba(142,227,255,0.34);background:linear-gradient(170deg,#102844 0%,#0c1e33 100%)}
.gw-card:hover::before{opacity:1}
.gw-card .gw-icon{font-size:36px;margin-bottom:14px;display:block}
.gw-card h2{font-family:var(--se);font-size:24px;font-weight:400;color:var(--t1);margin-bottom:8px;line-height:1.2}
.gw-card h2 em{font-style:italic;color:var(--cyan)}
.gw-card p{font-size:15px;color:var(--t3);line-height:1.6;margin-bottom:14px;flex:1}
.gw-card .gw-enter{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--cyan)}


/* Primary entry row */
#ecosystem-entry{padding-bottom:20px}
#ecosystem-entry h2{margin-bottom:10px}
#ecosystem-entry + .gateways .gw-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  max-width:1100px;
  margin:24px auto 0;
  justify-content:center;
}
#ecosystem-entry + .gateways .gw-grid > .gw-card{
  max-width:none !important;
  min-width:0 !important;
  width:100%;
  min-height:220px;
  padding:24px 20px;
  justify-content:space-between;
}
#ecosystem-entry + .gateways .gw-card p{
  max-width:220px;
  margin-left:auto;
  margin-right:auto;
}
#ecosystem-entry + .gateways .gw-card .gw-enter{margin-top:auto}
@media(max-width:900px){
  #ecosystem-entry + .gateways .gw-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:560px){
  #ecosystem-entry + .gateways .gw-grid{grid-template-columns:1fr !important;max-width:520px;}
}

/* SECTION LABEL */
.slbl{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:16px;text-align:center;padding:0 36px}

/* PLATFORM CARDS */
.plat-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1200px;margin:0 auto;padding:0 36px 48px}
.plat-card{background:#0c1a2e;border:1px solid var(--bdr);border-radius:16px;padding:28px;text-decoration:none;color:var(--t1);transition:all .3s;cursor:pointer;position:relative;overflow:hidden}
.plat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s}
.plat-card:hover{border-color:var(--bdr2);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.3)}.plat-card:hover::before{opacity:1}
.plat-card .ph{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.plat-card .pi{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px}
.plat-card h3{font-size:20px;font-weight:700;color:var(--t1)}.plat-card h3 small{display:block;font-size:14px;font-weight:500;color:var(--cyan);margin-top:2px}
.plat-card>p{font-size:15px;color:var(--t3);line-height:1.6;margin:0 0 10px}
.plat-card .ptag{display:inline-block;padding:4px 12px;border-radius:6px;font-size:13px;font-weight:700;background:rgba(142,227,255,0.08);color:var(--cyan);margin-bottom:8px}
.plat-card .peng{font-size:14px;color:var(--t3);padding-top:10px;border-top:1px solid var(--bdr)}.plat-card .peng b{color:var(--t2)}
.pi-gw{background:linear-gradient(135deg,#14b8a6,#5eead4)}.pc-gw::before{background:linear-gradient(90deg,#0d9488,#2dd4bf)}
.pi-ws{background:linear-gradient(135deg,#3b82f6,#93c5fd)}.pc-ws::before{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.pi-sw{background:linear-gradient(135deg,#8b5cf6,#c4b5fd)}.pc-sw::before{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.pi-wd{background:linear-gradient(135deg,#0ea5e9,#7dd3fc)}.pc-wd::before{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}
.pi-dn{background:linear-gradient(135deg,#f59e0b,#fcd34d)}.pc-dn::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}

/* CASE STUDY CARDS */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;max-width:1200px;margin:0 auto;padding:0 36px 48px}
.case-card{background:#0c1a2e;border:1px solid var(--bdr);border-radius:14px;padding:24px;text-decoration:none;color:var(--t1);transition:all .35s;cursor:pointer;position:relative;overflow:hidden}
.case-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,var(--cy2),var(--teal))}
.case-card:hover{border-color:var(--bdr2);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.case-card:hover::before{opacity:1}
.case-card .tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cy2);margin-bottom:8px}
.case-card h3{font-size:18px;font-weight:700;color:var(--t1);margin-bottom:6px}
.case-card p{font-size:14px;color:var(--t3);line-height:1.5;margin:0}

/* ─── v84: Cases page tiered layout ─────────────────────────
   Tier 1 (hero): Michigan, Pakistan, BP — large cards with highlight
   Tier 2 (standard): Allegan, Ottawa, China, USFWS
   Tier 3 (compact): Marina, Legal, Classroom */

.case-section-label{
  font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--t3);text-align:center;margin:8px 0 16px;
}
.case-section-label::before,.case-section-label::after{
  content:"";display:inline-block;width:40px;height:1px;
  background:var(--bdr2);vertical-align:middle;margin:0 14px;
}

.case-tier1-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:1300px;margin:0 auto;padding:0 36px 8px;
}
.case-card-hero{
  background:var(--card-bg);
  border:1px solid var(--bdr2);border-radius:18px;padding:32px 28px 28px;
  text-decoration:none;color:var(--t1);transition:all .35s;cursor:pointer;
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  min-height:340px;
}
.case-card-hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--cyan),var(--teal));
  opacity:1;
}
.case-card-hero:hover{
  border-color:var(--cyan);transform:translateY(-4px);
  box-shadow:0 16px 44px rgba(13,148,136,0.25);
}
.case-card-hero .tag{
  display:inline-block;background:rgba(142,227,255,0.12);
  border:1px solid rgba(142,227,255,0.3);border-radius:999px;
  padding:4px 12px;font-size:11px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan);
  margin-bottom:16px;align-self:flex-start;
}
.case-card-hero h2{
  font-family:var(--se);font-size:26px;font-weight:400;
  color:var(--t1);margin:0 0 4px;line-height:1.2;
}
.case-card-hero h2 em{color:var(--cyan);font-style:italic}
.case-card-hero .case-stat{
  font-family:var(--se);font-size:36px;font-weight:400;
  color:var(--cyan);margin:12px 0 14px;line-height:1;letter-spacing:-0.02em;
}
.case-card-hero .case-stat-unit{
  font-size:14px;color:var(--t3);font-family:Arial,sans-serif;
  letter-spacing:0.02em;margin-top:4px;display:block;
}
.case-card-hero p{
  font-size:15px;color:var(--t2);line-height:1.6;margin:0 0 16px;flex:1;
}
.case-card-hero .case-quote{
  font-family:var(--se);font-size:14px;font-style:italic;
  color:var(--t3);border-left:2px solid var(--cyan);
  padding:4px 0 4px 14px;margin:0 0 16px;line-height:1.5;
}
.case-card-hero .case-quote cite{
  display:block;margin-top:6px;font-size:12px;
  color:var(--t3);font-style:normal;opacity:0.8;
}
.case-card-hero .hub-enter{
  color:var(--cyan);font-weight:600;font-size:14px;
  margin-top:auto;align-self:flex-start;
}

.case-tier2-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:1300px;margin:8px auto 0;padding:0 36px 8px;
}
.case-card-mid{
  background:var(--card-bg);border:1px solid var(--bdr);border-radius:12px;
  padding:20px 20px 18px;text-decoration:none;color:var(--t1);
  transition:all .3s;cursor:pointer;display:flex;flex-direction:column;
  min-height:180px;
}
.case-card-mid:hover{border-color:var(--bdr2);transform:translateY(-2px)}
.case-card-mid .tag{
  font-size:10.5px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--cy2);margin-bottom:8px;
}
.case-card-mid h3{
  font-size:16px;font-weight:700;color:var(--t1);
  margin:0 0 8px;line-height:1.3;
}
.case-card-mid h3 em{color:var(--cyan);font-style:italic;font-weight:700}
.case-card-mid p{
  font-size:13px;color:var(--t3);line-height:1.5;
  margin:0 0 10px;flex:1;
}
.case-card-mid .hub-enter{
  color:var(--cyan);font-weight:600;font-size:12.5px;margin-top:auto;
}

.case-tier3-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  max-width:1100px;margin:8px auto 0;padding:0 36px 32px;
}
.case-card-mini{
  background:var(--subtle);border:1px solid var(--bdr);border-radius:10px;
  padding:16px 18px;text-decoration:none;color:var(--t1);
  transition:all .25s;cursor:pointer;display:flex;flex-direction:column;
}
.case-card-mini:hover{background:var(--card-bg);border-color:var(--bdr2)}
.case-card-mini .tag{
  font-size:10px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--cy2);margin-bottom:6px;
}
.case-card-mini h4{
  font-size:14px;font-weight:700;color:var(--t1);
  margin:0 0 6px;line-height:1.3;
}
.case-card-mini h4 em{color:var(--cyan);font-style:italic}
.case-card-mini p{
  font-size:12.5px;color:var(--t3);line-height:1.5;margin:0;
}

/* Responsive */
@media (max-width:1024px){
  .case-tier1-grid{grid-template-columns:1fr;gap:16px}
  .case-tier2-grid{grid-template-columns:repeat(2,1fr)}
  .case-tier3-grid{grid-template-columns:1fr;gap:10px}
}
@media (max-width:640px){
  .case-tier2-grid{grid-template-columns:1fr}
}


/* TESTIMONIAL CARDS */
.voice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;max-width:1200px;margin:0 auto;padding:0 36px 48px}
.vcard{background:#0c1a2e;border:1px solid var(--bdr);border-radius:14px;padding:24px;position:relative}
.vcard::before{content:'\201C';font-family:var(--se);font-size:40px;color:var(--cyan);opacity:.3;position:absolute;top:8px;left:16px}
.vcard p{font-size:16px;color:var(--t2);line-height:1.65;font-style:italic;padding-top:6px;margin-bottom:10px}
.vcard cite{font-size:13px;color:var(--t3);font-style:normal;font-weight:600}

/* SECTOR GRID */
.sector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;max-width:1000px;margin:0 auto;padding:0 36px 16px}
.sector-card{background:var(--card-bg);border:1px solid var(--bdr);border-radius:12px;padding:18px 18px;text-decoration:none;color:var(--t1);transition:all .35s;cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;gap:14px}
.sector-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,var(--cy2),var(--teal))}
.sector-card:hover{border-color:var(--bdr2);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.sector-card:hover::before{opacity:1}
.sector-card .si{font-size:28px;flex-shrink:0;width:40px;text-align:center}
.sector-card h2{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:6px;line-height:1.3}
.sector-card h2 em{color:var(--cyan);font-style:italic}
.sector-card p{font-size:12.5px;color:var(--t3);line-height:1.45;margin:0}

/* COLLAB MODES */
.collab-strip{max-width:1200px;margin:0 auto;padding:0 36px 48px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.collab-strip>.collab-item{flex:1 1 200px;max-width:280px;min-width:160px}

.collab-4{grid-template-columns:repeat(4,1fr)}
.collab-6{grid-template-columns:repeat(6,1fr)}
.hub-2col{grid-template-columns:1fr 1fr}

.collab-item{text-align:center;padding:20px 16px;border-radius:14px;background:var(--bg2);border:1px solid var(--bdr)}
.collab-item .ci-num{font-family:var(--se);font-size:28px;color:var(--cyan);font-style:italic}
.collab-item .ci-lbl{font-size:14px;color:var(--t2);margin-top:4px;font-weight:600}
.collab-item .ci-desc{font-size:13px;color:var(--t3);margin-top:4px}

/* SHOWCASE */
.showcase{max-width:1200px;margin:0 auto 48px;padding:0 36px}
.showcase-box .ph-icon{font-size:52px;margin-bottom:16px}
.showcase-box .ph-text{font-size:22px;color:var(--t2);margin-bottom:8px;font-weight:600}
.showcase-box .ph-sub{font-size:15px;color:var(--t3);opacity:.7;max-width:600px}

/* TRUST + DIVIDER */

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--bdr2),transparent);max-width:1200px;margin:0 auto 48px;padding:0 36px}

/* LEVEL 2 PLATFORM HUB CARDS */
.hub-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:1100px;margin:0 auto;padding:0 36px 48px}.hub-grid>*{flex:1 1 100%;max-width:100%}
.hub-card{background:#0c1a2e;border:1px solid var(--bdr);border-radius:18px;padding:36px;text-decoration:none;color:var(--t1);transition:all .3s;cursor:pointer;position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.hub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;opacity:0;transition:opacity .3s}
.hub-card:hover{border-color:var(--bdr2);transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,0.3)}
.hub-card:hover::before{opacity:1}
.hub-card .hub-icon{width:72px;height:72px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0}
.hub-card h2{font-family:var(--se);font-size:28px;font-weight:400;color:var(--t1);margin-bottom:4px}
.hub-card h2 em{font-style:italic;color:var(--cyan)}
.hub-card .hub-sub{font-size:15px;color:var(--cyan);font-weight:600;margin-bottom:12px}
.hub-card .hub-desc{font-size:17px;color:var(--t2);line-height:1.7;margin-bottom:16px}
.hub-card .hub-caps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.hub-card .hub-cap{font-size:13px;padding:5px 14px;border-radius:8px;background:rgba(var(--cyan-rgb,142,227,255),0.06);border:1px solid var(--bdr);color:var(--t2);font-weight:600}
.hub-card .hub-eng{font-size:14px;color:var(--t3);padding-top:14px;border-top:1px solid var(--bdr)}
.hub-card .hub-eng b{color:var(--t2)}
.hub-card .hub-enter{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:700;color:var(--cyan);margin-top:14px}
.hub-card .hub-flag{display:inline-block;padding:4px 12px;border-radius:6px;font-size:12px;font-weight:700;background:rgba(var(--cyan-rgb,142,227,255),0.1);color:var(--cyan);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}

.hc-gw::before{background:linear-gradient(90deg,#0d9488,#2dd4bf)}
.hc-ws::before{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.hc-sw::before{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.hc-wd::before{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}
.hc-dn::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}

@media(max-width:768px){
  .trio-grid>*{flex:1 1 100% !important;max-width:100% !important}
  .collab-4{grid-template-columns:1fr 1fr !important}
  .collab-6{grid-template-columns:1fr 1fr 1fr !important}
  .hub-2col{grid-template-columns:1fr !important}
  .proof-grid{grid-template-columns:1fr !important}
  .compare-2col{grid-template-columns:1fr !important}
  .hub-card{grid-template-columns:1fr;text-align:center}
  .hub-card .hub-icon{margin:0 auto}
  .hub-card .hub-caps{justify-content:center}
}



/* Audience stack + button safety fixes */
.audience-stack{max-width:980px;margin:0 auto;padding:0 36px 32px;display:flex;flex-direction:column;gap:22px}
.audience-card{background:#0c1a2e;border:1px solid var(--bdr);border-radius:18px;padding:30px 32px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.audience-card .aud-icon{width:72px;height:72px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0}
.audience-card h2{font-family:var(--se);font-size:28px;font-weight:400;color:var(--t1);margin-bottom:4px}
.audience-card h2 em{font-style:italic;color:var(--cyan)}
.audience-card .aud-sub{font-size:15px;color:var(--cyan);font-weight:600;margin-bottom:12px}
.audience-card .aud-desc{font-size:17px;color:var(--t2);line-height:1.7;margin-bottom:16px}
.audience-card .aud-caps{display:flex;flex-wrap:wrap;gap:8px}
.audience-card .aud-cap{font-size:13px;padding:5px 14px;border-radius:8px;background:rgba(var(--cyan-rgb,142,227,255),0.06);border:1px solid var(--bdr);color:var(--t2);font-weight:600}
.content-section a.btn-g,.content-section .btn-g,.audience-stack + .content-section .btn-g,.hub-card .btn-g{display:inline-flex !important;width:auto !important;max-width:none !important;min-width:0 !important;align-items:center;justify-content:center;white-space:nowrap;align-self:center}
@media(max-width:768px){.audience-stack{padding:0 20px 24px}.audience-card{grid-template-columns:1fr;text-align:center;padding:24px}.audience-card .aud-icon{margin:0 auto}.audience-card .aud-caps{justify-content:center}}


/* PLATFORM STACK — replaces tall 5-card section */
.platform-stack{max-width:1200px;margin:0 auto;padding:0 36px 56px;display:flex;flex-direction:column;gap:28px}
.platform-row{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start;padding:28px 30px;border-radius:20px;background:#0c1a2e;border:1px solid var(--bdr);box-shadow:0 10px 30px rgba(0,0,0,0.22)}
.platform-row-head{display:flex;flex-direction:column;gap:10px}
.platform-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;background:rgba(142,227,255,0.08)}
.platform-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.platform-row h3{font-family:var(--se);font-size:30px;font-weight:400;line-height:1.15;margin:0;color:var(--t1)}
.platform-row h3 em{font-style:italic;color:var(--cyan)}
.platform-hook{font-size:18px;color:var(--t2);line-height:1.5;margin:0}
.platform-row-body{display:flex;flex-direction:column;gap:16px}
.platform-desc{font-size:15px;color:var(--t2);line-height:1.7;margin:0}
.platform-tags{display:flex;flex-wrap:wrap;gap:8px}
.platform-tags span{font-size:13px;padding:6px 12px;border-radius:999px;background:rgba(142,227,255,0.07);border:1px solid var(--bdr);color:var(--t2);white-space:nowrap}
.platform-meta{font-size:14px;color:var(--t3);line-height:1.6;margin:0}
.platform-meta strong{color:var(--t2)}
.platform-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.platform-actions .btn-g{display:inline-flex !important;width:auto !important;max-width:none !important;min-width:0 !important;padding:10px 18px;font-size:15px;border-radius:12px;box-shadow:none}
.platform-actions .btn-g.ghost{background:rgba(255,255,255,0.02);border:1px solid rgba(142,227,255,0.20)}
@media(max-width:900px){.platform-row{grid-template-columns:1fr}.platform-stack{padding:0 20px 40px}.platform-row h3{font-size:26px}.platform-hook{font-size:17px}}

/* FOOTER */
.footer{padding:28px 36px 24px;background:var(--nav);border-top:1px solid var(--bdr)}
.footer-in{max-width:900px;margin:0 auto;text-align:center}
.footer-tagline{font-family:var(--se);font-size:22px;color:var(--t1);margin-bottom:10px;letter-spacing:.01em}
.footer-tagline em{font-style:italic;color:var(--cyan)}
.footer-trust{font-size:14px;color:var(--t3);margin-bottom:10px;line-height:1.6;letter-spacing:.01em}
.footer-trust span{white-space:nowrap}
.footer-bottom{font-size:14px;color:var(--t3);opacity:0.85}
.footer-bottom a{color:var(--t3);text-decoration:none}
.footer-bottom a:hover{color:var(--cyan)}
.footer-co{font-family:Arial,Helvetica,sans-serif;font-weight:bold}
.footer-co .fc{color:var(--cyan)}.footer-co .fr{color:var(--red)}

/* RESPONSIVE */
@media(max-width:1024px){.gw-grid>.gw-card{flex:1 1 260px !important;max-width:100% !important}}
.grid-4col{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}.grid-4col>*{flex:1 1 220px;max-width:300px;min-width:180px}
.grid-5col{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}.grid-5col>*{flex:1 1 160px;max-width:220px;min-width:140px}
.grid-6col{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media(max-width:960px){
  .tnav{display:none}.hamburger{display:block}.mob-menu{top:84px}
}
@media(max-width:768px){
  .grid-4col>*{flex:1 1 45% !important}
  .grid-5col{grid-template-columns:repeat(3,1fr)}
  .grid-6col{grid-template-columns:repeat(3,1fr)}
  .brand-lockup{height:46px}.topbar-in{height:72px;padding:0 20px}.mob-menu{top:72px}

  .hero-zone{padding:72px 20px 48px;min-height:auto}.hero-globe{width:92vw}.hero-ring.r1{width:98vw}.hero-ring.r2{display:none}.hero-zone h1{font-size:46px}.hero-sub{font-size:18px}.hero-seq{font-size:15px}.hero-kicker{font-size:11.5px;padding:7px 12px}
  .sub-hero{padding:36px 20px 28px}.sub-hero h1{font-size:34px}.sub-hero p{font-size:17px}
  .gateways{padding:0 20px 36px}.gw-grid>.gw-card{flex:1 1 100% !important;max-width:100% !important}.gw-card{padding:28px 24px}
  .plat-grid,.case-grid,.voice-grid,.sector-grid{padding:0 20px 36px;grid-template-columns:1fr}
  .compare-3{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr;padding:0 20px 36px}
  .content-section{padding:0 20px 36px}
  .showcase{padding:0 20px}
  .compare-trio{padding:0 20px 36px}
  .compare-trio .compare-box{padding:12px 10px}
  .compare-trio .compare-box p{font-size:12px}
  .compare-trio .compare-box h3{font-size:13px}
  .collab-strip{padding:0 20px 36px}.collab-strip>.collab-item{flex:1 1 100% !important;max-width:100% !important}
  .stat-bar .big{font-size:56px}
  }

/* Forum topic buttons */
.forum-btn{padding:10px 20px;border-radius:10px;background:linear-gradient(180deg,rgba(21,50,85,0.95),rgba(15,38,68,0.95));color:#c8d6e5;text-decoration:none;font-size:15px;font-weight:600;transition:all .3s;border:1px solid var(--subtle3);box-shadow:0 3px 10px rgba(0,0,0,0.2);cursor:pointer;display:inline-block}
.forum-btn:hover{background:rgba(34,211,238,0.15);border-color:rgba(142,227,255,0.4);color:#fff}
.btn-g{display:inline-block;padding:16px 44px;font-size:19px;font-weight:700;color:var(--t1);background:linear-gradient(135deg,#0d9488,#0f766e);border:1px solid var(--bdr2);border-radius:14px;text-decoration:none;cursor:pointer;transition:all .3s;box-shadow:0 4px 20px rgba(13,148,136,0.3);letter-spacing:0.02em;white-space:nowrap}
.btn-g:hover{background:linear-gradient(135deg,#14b8a6,#0d9488);box-shadow:0 8px 28px rgba(13,148,136,0.4);transform:translateY(-2px);color:#fff}
.doc-links a{color:rgba(142,227,255,0.85);text-decoration:none;font-weight:500;transition:color .2s}
.doc-links a:hover{color:var(--t1);text-decoration:underline}
.doc-links a::after{content:"  ●  ";color:rgba(142,227,255,0.8);font-size:8px;vertical-align:middle;padding:0 2px}
.doc-links a:last-child::after{content:""}

/* Bottom page navigation */
.bottom-nav{max-width:1200px;margin:0 auto;padding:24px 36px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--bdr)}
.bottom-nav a{color:var(--t1);text-decoration:none;font-size:14px;font-weight:600;padding:12px 22px;border-radius:12px;border:1px solid rgba(142,227,255,0.25);transition:all .3s;background:linear-gradient(170deg,#102844,#0c1e33);cursor:pointer;letter-spacing:.01em}
.bottom-nav a:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 8px 24px rgba(13,115,119,0.3);background:linear-gradient(170deg,#143050,#0e2540);color:#fff}
.bottom-nav .bn-back{display:flex;align-items:center;gap:6px;color:var(--cyan)}
.bottom-nav .bn-top{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,0.8);font-size:13px}
.bottom-nav .bn-home{display:flex;align-items:center;gap:6px;color:var(--cyan)}
@media(max-width:768px){.bottom-nav{padding:20px 20px;flex-wrap:wrap;justify-content:center;gap:8px}.bottom-nav a{font-size:13px;padding:10px 16px}}

/* Pulsing live dot */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22d3ee;margin-right:6px;vertical-align:middle;animation:pulse-live 2s ease-in-out infinite}
@keyframes pulse-live{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,211,238,0.5)}50%{opacity:0.6;box-shadow:0 0 8px 4px rgba(34,211,238,0)}}

/* Trio grid — 3 columns on desktop, stacks on mobile */
.trio-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1200px;margin:0 auto;padding:0 36px 32px}.trio-grid>*{flex:1 1 280px;max-width:380px;min-width:240px}
.trio-grid .compare-box{border-radius:16px;padding:20px 16px;border:1px solid var(--bdr)}
.trio-grid .compare-box h3{font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.trio-grid .compare-box p{font-size:15px;color:var(--t2);line-height:1.65;margin-bottom:6px}
.trio-grid .compare-box p:last-child{margin-bottom:0}
.trio-grid .compare-old{background:rgba(var(--red-rgb,231,76,60),0.04);border-color:rgba(231,76,60,0.15)}
.trio-grid .compare-new{background:var(--subtle);border-color:rgba(34,211,238,0.15)}

.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.proof-single{grid-template-columns:1fr}
.compare-2col{grid-template-columns:1fr 1fr}


/* DOCS & HOWTO STYLES */

/* How-To accordion tutorials */
.ht-cat{max-width:960px;margin:0 auto;padding:28px 36px 8px}
.ht-cat-title{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);opacity:0.85}
.ht-cat-title span{margin-right:8px}
.ht-list{max-width:960px;margin:0 auto;padding:0 36px 12px;display:flex;flex-direction:column;gap:8px}
.ht-item{background:#0c1a2e;border:1px solid var(--bdr);border-radius:12px;overflow:hidden;position:relative;transition:border-color .3s}
.ht-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,var(--cy2),var(--teal));z-index:1}
.ht-item:hover{border-color:var(--bdr2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.ht-item:hover::before{opacity:1}
.ht-head{padding:16px 20px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ht-head h3{font-family:var(--se);font-size:20px;font-weight:400;color:var(--t1);margin:0;line-height:1.3}
.ht-head h3 em{font-style:italic;color:var(--cyan)}
.ht-head .ht-sum{font-size:14px;color:var(--t3);margin-top:3px;opacity:0.85}
.ht-head .ht-arrow{font-size:14px;color:var(--t3);transition:transform .3s;flex-shrink:0}
.ht-item.open .ht-arrow{transform:rotate(180deg)}
.ht-item.open{border-color:rgba(34,211,238,0.2)}
.ht-item.open::before{opacity:1}
.ht-body{display:none;padding:0 20px 18px;border-top:1px solid var(--bdr)}
.ht-item.open .ht-body{display:block}
.ht-body ol{margin:14px 0 0;padding-left:22px}
.ht-body ol li{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:8px;padding-left:4px}
.ht-body ol li strong{color:var(--t1)}
.ht-count{font-size:13px;color:var(--cyan);font-weight:600;background:rgba(34,211,238,0.1);padding:3px 10px;border-radius:6px;white-space:nowrap}

/* Tutorial cards (4-col grid) — matches site card language */
.tut-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:1000px;margin:0 auto;padding:0 36px 28px}
.tut-card{background:#0c1a2e;border:1px solid var(--bdr);border-radius:14px;padding:14px 14px 12px;text-decoration:none;display:block;transition:all .35s;min-height:100px;cursor:pointer;position:relative;overflow:hidden}
.tut-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,var(--cy2),var(--teal))}
.tut-card:hover{border-color:var(--bdr2);transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.tut-card:hover::before{opacity:1}
.tut-card-num{display:block;color:var(--cyan);font-size:15px;font-weight:800;margin-bottom:8px;letter-spacing:.06em;text-align:center;opacity:0.85}
.tut-card-title{display:block;color:var(--t1);font-size:15px;font-weight:700;line-height:1.35;margin-bottom:6px}
.tut-card-desc{display:block;color:var(--t3);font-size:13px;font-weight:400;line-height:1.5;opacity:0.85}

/* Case study cards (2-col, larger) — matches hub-card language */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin:0 auto;padding:0 36px 32px}
.case-card{background:#0c1a2e;border:1px solid var(--bdr);border-radius:18px;padding:32px 28px;text-decoration:none;display:flex;flex-direction:column;transition:all .35s;min-height:310px;cursor:pointer;position:relative;overflow:hidden}
.case-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,var(--cy2),var(--teal))}
.case-card:hover{border-color:rgba(142,227,255,0.3);transform:translateY(-5px);box-shadow:0 12px 36px rgba(0,0,0,0.3);background:linear-gradient(170deg,#102844,#0c1e33)}
.case-card:hover::before{opacity:1}
.case-label{font-size:11px;font-weight:700;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.case-title{font-size:20px;font-weight:700;color:var(--t1);margin-bottom:6px;line-height:1.3}
.case-location{font-size:13px;color:var(--t3);margin-bottom:14px;font-style:italic}
.case-desc{font-size:13px;color:var(--t2);line-height:1.65;flex:1}
.case-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.case-tag{font-size:11px;padding:3px 10px;border-radius:20px;background:rgba(142,227,255,0.08);color:var(--cyan);border:1px solid var(--subtle3)}

/* Other platform tutorials (4-col) — matches plat-card language */
.plat-tut-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:1000px;margin:0 auto;padding:0 36px 28px}
.plat-tut{background:#0c1a2e;border:1px solid var(--bdr);border-radius:16px;padding:20px 16px;text-decoration:none;display:block;transition:all .35s;text-align:center;cursor:pointer;position:relative;overflow:hidden}
.plat-tut::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,var(--cy2),var(--teal))}
.plat-tut:hover{border-color:var(--bdr2);transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.plat-tut:hover::before{opacity:1}
.plat-tut-icon{font-size:26px;margin-bottom:10px}
.plat-tut-name{color:var(--t1);font-size:18px;font-weight:700;margin-bottom:6px}
.plat-tut-sub{color:var(--t3);font-size:12.5px;line-height:1.45}

/* AI assistant chips — matches site bg */
.ai-strip{display:flex;justify-content:center;gap:12px;max-width:1000px;margin:0 auto;padding:0 36px 28px;flex-wrap:wrap}
.ai-chip{padding:10px 20px;border-radius:12px;background:var(--card-bg);border:1px solid var(--bdr);font-size:14px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:8px;transition:all .35s;cursor:default;position:relative;overflow:hidden}
.ai-chip::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,var(--cy2),var(--teal))}
.ai-chip:hover{border-color:var(--bdr2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.ai-chip:hover::before{opacity:1}
.ai-chip span:first-child{font-size:20px}

/* Documentation parts (collapsible) */
.doc-part{background:#0c1a2e;border:1px solid var(--bdr);border-radius:16px;margin:0 0 12px;overflow:hidden;transition:all .35s;position:relative}
.doc-part::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,var(--cy2),var(--teal))}
.doc-part:hover{border-color:var(--bdr2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.doc-part:hover::before{opacity:1}
.doc-part-header{padding:20px 24px;cursor:pointer;display:flex;align-items:center;gap:16px;user-select:none}
.doc-part-header:hover{background:rgba(var(--cyan-rgb,142,227,255),0.03)}
.doc-part-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.doc-part-title{flex:1}
.doc-part-title h3{font-size:18px;font-weight:700;color:var(--t1);margin-bottom:2px}
.doc-part-title span{font-size:13px;color:var(--t3)}
.doc-part-arrow{color:var(--cyan);font-size:18px;transition:transform .3s;flex-shrink:0}
.doc-part.open .doc-part-arrow{transform:rotate(90deg)}
.doc-part-body{display:none;padding:0 24px 20px;border-top:1px solid var(--bdr)}
.doc-part.open .doc-part-body{display:block}
.doc-ch{margin:10px 0 0;padding:10px 14px;background:rgba(var(--cyan-rgb,142,227,255),0.03);border-radius:8px}
.doc-ch-title{font-size:15px;font-weight:700;color:#22d3ee;margin-bottom:8px;letter-spacing:.02em;padding-bottom:6px;border-bottom:1px solid rgba(142,227,255,0.08)}
.doc-ch-links{font-size:14px;line-height:2.1;color:var(--t2)}
.doc-ch-links a{color:rgba(180,210,230,0.7);text-decoration:none;font-weight:400;transition:color .2s}
.doc-ch-links a:hover{color:var(--t1);text-decoration:underline}
.doc-ch-links a::after{content:" · ";color:rgba(142,227,255,0.3);font-size:13px;vertical-align:middle;padding:0 4px}
.doc-ch-links a:last-child::after{content:""}

/* Education links */
.edu-links{font-size:15px;line-height:2.4;color:var(--t2);text-align:center}
.edu-links a{color:var(--cyan);text-decoration:none;font-weight:600}
.edu-links a:hover{text-decoration:underline}

@media(max-width:768px){
  .tut-card-grid{grid-template-columns:repeat(2,1fr);padding:0 20px 20px}
  .case-grid{grid-template-columns:1fr;padding:0 20px 24px}
  .plat-tut-grid{grid-template-columns:repeat(2,1fr);padding:0 20px 20px}
  .ai-strip{gap:10px;padding:0 20px 20px}
  .ht-head h3{font-size:18px}
  .ht-list{padding:0 20px 12px}
  .ht-cat{padding:24px 20px 8px}
}

/* ═══ PRICING PAGE STYLES ═══ */
.tier-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto;padding:0 36px 48px}
.tc-col{border-radius:16px;padding:32px 28px;border:1px solid var(--bdr);background:var(--card-bg);position:relative;overflow:hidden}
.tc-col::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.tc-col.tc-free::before{background:var(--t3)}
.tc-col.tc-prem::before{background:linear-gradient(90deg,var(--cy2),var(--gold))}
.tc-col h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.tc-col.tc-free h3{color:var(--t3)}.tc-col.tc-prem h3{color:var(--gold)}
.tc-col .tc-price{font-family:var(--se);font-size:clamp(32px,5vw,44px);color:var(--t1);font-style:italic;margin-bottom:16px;line-height:1.1}
.tc-col .tc-price em{color:var(--cyan)}
.tc-col .tc-desc{font-size:15px;color:var(--t3);margin-bottom:20px;line-height:1.6}
.tc-col .tc-list{list-style:none;padding:0}
.tc-col .tc-list li{font-size:15px;color:var(--t2);line-height:1.6;margin-bottom:10px;padding-left:20px;position:relative}
.tc-col .tc-list li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%}
.tc-col.tc-free .tc-list li::before{background:var(--t3)}
.tc-col.tc-prem .tc-list li::before{background:var(--gold)}
.tc-col .tc-list li strong{color:var(--t1)}
.tc-cta{display:block;text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--bdr)}
.tc-cta a{display:inline-block;padding:14px 36px;font-size:16px;font-weight:700;border-radius:12px;text-decoration:none;cursor:pointer;transition:all .3s;letter-spacing:.02em}
.tc-free .tc-cta a{color:var(--cyan);background:transparent;border:1px solid var(--bdr2)}
.tc-free .tc-cta a:hover{background:rgba(34,211,238,0.08);border-color:rgba(34,211,238,0.4)}
.tc-prem .tc-cta a{color:var(--t1);background:linear-gradient(135deg,#0d9488,#0f766e);border:1px solid var(--bdr2);box-shadow:0 4px 16px rgba(13,148,136,0.3)}
.tc-prem .tc-cta a:hover{background:linear-gradient(135deg,#14b8a6,#0d9488);transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,148,136,0.4)}

.pp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:1100px;margin:0 auto;padding:0 36px 24px}
.pp-card{border-radius:14px;padding:24px 16px;border:1px solid var(--bdr);background:var(--card-bg);text-align:center;position:relative;overflow:hidden;transition:border-color .3s}
.pp-card:hover{border-color:var(--bdr2)}
.pp-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 10px}
.pp-name{font-size:16px;font-weight:700;color:var(--t1);margin-bottom:2px}
.pp-sub{font-size:12px;color:var(--t3);margin-bottom:16px}
.pp-prices{margin-bottom:16px}
.pp-price{margin-bottom:6px}
.pp-amt{font-family:var(--se);font-size:28px;color:var(--t1);font-style:italic}
.pp-amt sup{font-size:14px;color:var(--t3)}
.pp-per{font-size:13px;color:var(--t3);margin-left:2px}
.pp-price.pp-yr{padding-top:8px;border-top:1px solid var(--bdr)}
.pp-save{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;background:rgba(45,212,191,0.12);color:var(--teal);margin-left:6px}
.pp-btn{display:block;padding:10px 16px;font-size:14px;font-weight:700;color:var(--t1);background:linear-gradient(135deg,#0d9488,#0f766e);border:1px solid var(--bdr2);border-radius:10px;text-decoration:none;transition:all .3s;margin-bottom:6px}
.pp-btn:hover{background:linear-gradient(135deg,#14b8a6,#0d9488);transform:translateY(-1px)}
.pp-btn-alt{display:block;font-size:12px;color:var(--t3);text-decoration:none;transition:color .2s}
.pp-btn-alt:hover{color:var(--cyan)}

.included-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:1100px;margin:0 auto;padding:0 36px 48px}
.incl-item{text-align:center;padding:16px 10px;border-radius:14px;background:var(--bg2);border:1px solid var(--bdr)}
.incl-item .incl-icon{font-size:24px;margin-bottom:6px}
.incl-item .incl-lbl{font-size:14px;color:var(--t2);font-weight:600;line-height:1.4}

.promo-section{max-width:900px;margin:0 auto;padding:0 36px 48px}
.promo-box{border-radius:16px;padding:36px 32px;border:1px solid rgba(251,191,36,0.2);background:linear-gradient(170deg,rgba(251,191,36,0.03),rgba(13,31,58,0.95));position:relative;overflow:hidden}
.promo-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),#f59e0b,var(--cy2))}
.promo-box h3{font-family:var(--se);font-size:clamp(22px,3.5vw,30px);color:var(--t1);margin-bottom:8px}
.promo-box h3 em{font-style:italic;color:var(--gold)}
.promo-box>p{font-size:16px;color:var(--t2);line-height:1.7;margin-bottom:20px}
.promo-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.promo-step{text-align:center;padding:16px 10px;border-radius:12px;background:rgba(var(--cyan-rgb,142,227,255),0.03);border:1px solid var(--bdr)}
.promo-step .ps-num{font-family:var(--se);font-size:28px;font-style:italic;color:var(--gold);margin-bottom:4px}
.promo-step .ps-lbl{font-size:13px;color:var(--t2);font-weight:600;line-height:1.4}
.promo-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.promo-cta a{display:inline-block;padding:14px 32px;font-size:16px;font-weight:700;color:var(--t1);background:linear-gradient(135deg,#b45309,#92400e);border:1px solid rgba(251,191,36,0.3);border-radius:12px;text-decoration:none;transition:all .3s;box-shadow:0 4px 16px rgba(180,83,9,0.3)}
.promo-cta a:hover{background:linear-gradient(135deg,#d97706,#b45309);transform:translateY(-2px);box-shadow:0 8px 24px rgba(180,83,9,0.4)}
.promo-cta span{font-size:14px;color:var(--t3)}
.promo-note{font-size:13px;color:var(--t3);margin-top:16px;padding-top:12px;border-top:1px solid var(--bdr);line-height:1.6}

.ptab-bar{display:flex;gap:6px;max-width:1100px;margin:0 auto;padding:0 36px 24px;flex-wrap:wrap;justify-content:center}
.ptab{padding:10px 22px;border-radius:10px;font-size:15px;font-weight:700;color:var(--t3);background:var(--bg2);border:1px solid var(--bdr);cursor:pointer;transition:all .25s;text-transform:uppercase;letter-spacing:.04em}
.ptab:hover{border-color:var(--bdr2);color:var(--t2)}
.ptab.active{background:rgba(34,211,238,0.12);border-color:rgba(34,211,238,0.35);color:var(--cyan)}

.ftable-wrap{max-width:1000px;margin:0 auto;padding:0 36px 48px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ftable{width:100%;border-collapse:separate;border-spacing:0;border-radius:14px;overflow:hidden;border:1px solid var(--bdr);background:var(--card-bg)}
.ftable thead th{padding:16px 14px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;text-align:center;color:var(--t3);background:var(--subtle);border-bottom:1px solid var(--bdr)}
.ftable thead th:first-child{text-align:left;color:var(--t2);min-width:340px}
.ftable thead th.th-free{color:var(--t3);width:120px}
.ftable thead th.th-prem{color:var(--gold);width:120px}
.ftable tbody td{padding:12px 14px;font-size:15px;text-align:center;color:var(--t2);border-bottom:1px solid rgba(142,227,255,0.05)}
.ftable tbody td:first-child{text-align:left;font-size:14px;line-height:1.5}
.ftable tbody tr:last-child td{border-bottom:none}
.ftable tbody tr:hover{background:rgba(142,227,255,0.02)}
.ftable .ck{color:var(--teal);font-weight:700;font-size:16px}
.ftable .no{color:var(--t3);opacity:0.4}
.ftable .cat-row td{padding:14px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan);background:rgba(var(--cyan-rgb,142,227,255),0.03);border-bottom:1px solid var(--bdr)}
.ftable .upgrade{color:var(--gold);font-size:13px;font-weight:600}

.desktop-section{max-width:900px;margin:0 auto;padding:0 36px 48px}
.desktop-box{border-radius:16px;padding:32px 28px;border:1px solid var(--bdr);background:var(--card-bg);display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.desktop-box .db-icon{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,#334155,#1e293b);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.desktop-box h3{font-family:var(--se);font-size:24px;color:var(--t1);margin-bottom:6px}
.desktop-box h3 em{font-style:italic;color:var(--cyan)}
.desktop-box>div>p{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:14px}
.desktop-tiers{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.dt-item{padding:8px 14px;border-radius:8px;background:var(--subtle);border:1px solid var(--bdr);font-size:13px;color:var(--t2)}
.dt-item strong{color:var(--t1);display:block;font-size:14px;margin-bottom:2px}
.dt-item .dt-price{color:var(--gold);font-weight:700;font-size:15px}
.dt-item .dt-free{color:var(--teal);font-weight:700;font-size:15px}

.contact-form{max-width:760px;margin:0 auto;padding:0 36px 48px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.cf-field{display:flex;flex-direction:column;gap:6px}
.cf-field.full{grid-column:1/-1}
.cf-label{font-size:13px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.cf-input,.cf-select,.cf-textarea{padding:14px 16px;border-radius:10px;border:1px solid var(--bdr);background:var(--bg2);color:var(--t1);font-family:var(--fn);font-size:16px;transition:border-color .2s,box-shadow .2s;outline:none;width:100%}
.cf-input:focus,.cf-select:focus,.cf-textarea:focus{border-color:rgba(34,211,238,0.4);box-shadow:0 0 0 3px rgba(34,211,238,0.08)}
.cf-input::placeholder,.cf-textarea::placeholder{color:var(--t3);opacity:0.5}
.cf-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a9bb0' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer}
.cf-select option{background:var(--bg2);color:var(--t1)}
.cf-textarea{min-height:120px;resize:vertical}
.cf-submit{margin-top:8px;width:100%}
.cf-success{display:none;text-align:center;padding:32px;background:var(--subtle);border:1px solid rgba(34,211,238,0.2);border-radius:14px;max-width:760px;margin:0 auto}
.cf-success h3{font-family:var(--se);font-size:28px;color:var(--t1);margin-bottom:8px}
.cf-success h3 em{font-style:italic;color:var(--cyan)}
.cf-success p{font-size:16px;color:var(--t2)}

.note-strip{max-width:1000px;margin:-32px auto 48px;padding:0 36px}
.note-strip p{font-size:13px;color:var(--t3);font-style:italic;text-align:center}

@media(max-width:1024px){.included-strip{grid-template-columns:repeat(3,1fr)}.promo-steps{grid-template-columns:1fr 1fr}.pp-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){
  .tier-compare{grid-template-columns:1fr}
  .included-strip{grid-template-columns:1fr 1fr;padding:0 20px 36px}
  .pp-grid{grid-template-columns:1fr 1fr;padding:0 20px 24px}
  .ftable-wrap{padding:0 20px 36px}.ftable thead th{font-size:11px;padding:12px 8px}.ftable tbody td{font-size:13px;padding:10px 8px}.ftable thead th:first-child{min-width:180px}
  .cf-grid{grid-template-columns:1fr}.contact-form{padding:0 20px 36px}
  .desktop-box{grid-template-columns:1fr;text-align:center}.desktop-box .db-icon{margin:0 auto}.desktop-tiers{justify-content:center}
  .desktop-section{padding:0 20px 36px}.promo-section{padding:0 20px 36px}
}


/* ====== AI Chat Panel ====== */
.ai-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:9000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ai-overlay.open{display:flex}
.ai-panel{width:min(780px,96vw);height:min(700px,88vh);background:var(--card-bg);border:1px solid var(--bdr2);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 32px 100px rgba(0,0,0,0.7),0 0 60px rgba(142,227,255,0.06)}
.ai-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid rgba(142,227,255,0.12);background:rgba(255,255,255,0.02)}
.ai-hdr h3{font-family:var(--se);font-size:22px;color:var(--t1);margin:0;font-weight:400;display:flex;align-items:center;gap:10px}
.ai-hdr h3 em{font-style:italic;color:var(--cyan)}
.ai-hdr .ai-badge{background:rgba(142,227,255,0.12);color:var(--cyan);font-size:11px;padding:3px 10px;border-radius:20px;font-family:var(--sa);letter-spacing:0.04em;text-transform:uppercase;font-weight:600}
.ai-x{background:none;border:none;color:var(--t3);font-size:28px;cursor:pointer;padding:4px 10px;border-radius:10px;line-height:1;transition:all .2s}
.ai-x:hover{background:rgba(255,255,255,0.08);color:var(--t1)}
.ai-body{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.ai-body::-webkit-scrollbar{width:6px}.ai-body::-webkit-scrollbar-track{background:transparent}.ai-body::-webkit-scrollbar-thumb{background:rgba(142,227,255,0.15);border-radius:3px}
.ai-bubble{max-width:85%;padding:14px 18px;border-radius:16px;font-size:15px;line-height:1.75;white-space:pre-wrap;word-wrap:break-word;animation:aiFadeIn .3s ease}
@keyframes aiFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ai-bubble-u{align-self:flex-end;background:linear-gradient(135deg,#0ea5e9,#0d9488);color:var(--t1);border-bottom-right-radius:4px}
.ai-bubble-a{align-self:flex-start;background:rgba(255,255,255,0.04);color:var(--t2);border-bottom-left-radius:4px;border:1px solid var(--bdr)}
.ai-bubble-w{align-self:center;color:var(--t3);font-size:14px;font-style:italic;text-align:center;padding:8px 16px;background:var(--subtle);border-radius:12px;border:1px dashed var(--subtle3);max-width:90%}
.ai-refs{padding:10px 24px 6px;border-top:1px solid rgba(142,227,255,0.08)}
.ai-refs summary{color:var(--t3);font-size:13px;cursor:pointer;user-select:none}
.ai-refs summary:hover{color:var(--cyan)}
.ai-refs-list{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0}
.ai-ref{background:rgba(255,255,255,0.04);border:1px solid var(--subtle3);border-radius:10px;padding:6px 14px;font-size:12px;color:var(--t3);cursor:pointer;transition:all .2s}
.ai-ref:hover{color:var(--cyan);border-color:var(--cyan);background:rgba(142,227,255,0.05)}
.ai-foot{display:flex;gap:12px;padding:18px 24px;border-top:1px solid rgba(142,227,255,0.12);background:rgba(0,0,0,0.2);align-items:flex-end}
.ai-foot textarea{flex:1;background:rgba(255,255,255,0.05);border:1px solid var(--subtle3);border-radius:16px;color:var(--t1);font-size:16px;padding:14px 20px;resize:none;font-family:var(--sa);outline:none;min-height:56px;max-height:140px;line-height:1.5;transition:border-color .2s}
.ai-foot textarea::placeholder{color:var(--t3)}
.ai-foot textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(142,227,255,0.08)}
.ai-send{background:linear-gradient(135deg,#0ea5e9,#0d9488);border:none;border-radius:16px;color:#0a1628;font-weight:700;padding:14px 28px;cursor:pointer;font-size:16px;white-space:nowrap;transition:all .2s;min-height:56px;letter-spacing:0.02em}
.ai-send:hover{background:linear-gradient(135deg,#22d3ee,#0ea5e9);transform:translateY(-1px);box-shadow:0 4px 16px rgba(142,227,255,0.3)}
.ai-send:disabled{opacity:0.35;cursor:not-allowed;transform:none;box-shadow:none}
.ai-dots{display:inline-flex;gap:5px;padding:14px 18px;align-self:flex-start}
.ai-dots span{width:9px;height:9px;border-radius:50%;background:var(--cyan);opacity:0.5;animation:aiPulse 1.4s infinite ease-in-out both}
.ai-dots span:nth-child(1){animation-delay:-0.32s}
.ai-dots span:nth-child(2){animation-delay:-0.16s}
@keyframes aiPulse{0%,80%,100%{transform:scale(0.4);opacity:0.3}40%{transform:scale(1);opacity:0.8}}
@media(max-width:768px){.ai-panel{height:96vh;border-radius:16px 16px 0 0}.ai-foot textarea{min-height:48px;font-size:15px}.ai-send{padding:12px 20px;font-size:15px}}


/* ====== Platform Dropdown ====== */
.pdrop{position:relative;display:inline-flex;align-items:center}
.pdrop-trigger{cursor:pointer}
.pdrop-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(520px,92vw);background:var(--card-bg);border:1px solid var(--bdr2);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,0.7),0 0 40px rgba(142,227,255,0.06);padding:8px;z-index:999;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px);transition:opacity .18s ease, transform .18s ease, visibility .18s}
.pdrop-panel.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.pdrop-panel::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.pdrop-item{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--t1);transition:background .15s}
.pdrop-item:hover{background:rgba(var(--cyan-rgb,142,227,255),0.06)}
.pdrop-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px}
.pdrop-text{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.pdrop-name{font-family:var(--sa);font-size:16px;font-weight:600;color:var(--t1);line-height:1.2}
.pdrop-sub{font-family:var(--sa);font-size:12px;color:var(--t3);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdrop-sub b{color:var(--cyan);font-weight:500}
.pdrop-launch{background:rgba(var(--cyan-rgb,142,227,255),0.1);border:1px solid rgba(142,227,255,0.25);color:var(--cyan);font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:var(--sa);letter-spacing:0.02em;margin-left:4px;flex-shrink:0}
.pdrop-launch:hover{background:var(--cyan);color:#0a1628;border-color:var(--cyan)}
.pdrop-footer{border-top:1px solid rgba(142,227,255,0.1);margin-top:6px;padding:12px 14px;display:flex;justify-content:center;align-items:center}
.pdrop-compare{font-size:13px;color:var(--t3);text-decoration:none;font-family:var(--sa);cursor:pointer;transition:color .15s;padding:6px 14px;border-radius:8px;white-space:nowrap;font-weight:600}
.pdrop-compare:hover{color:var(--cyan);background:rgba(34,211,238,0.06)}
@media(max-width:768px){.pdrop-panel{width:calc(100vw - 40px);left:20px;right:20px;transform:none}.pdrop-panel.open{transform:translateY(0)}}

/* Quick-pick cards */
.qp-card:hover{border-color:var(--cyan) !important;transform:translateY(-2px);box-shadow:0 8px 24px rgba(142,227,255,0.1)}
@media(max-width:900px){.qp-card{padding:14px 10px !important}.qp-card > div:first-child{font-size:26px !important}.qp-card > div:nth-child(2){font-size:13px !important}}
@media(max-width:640px){[onclick*="igwnet"].qp-card, [onclick*="swanet"].qp-card, [onclick*="stormnet"].qp-card, [onclick*="conduitnet"].qp-card, [onclick*="datanet"].qp-card{grid-column:span 1}.qp-card + .qp-card{margin-top:0}}



/* ====== Hover Tooltips ====== */
.tip{position:relative;border-bottom:1px dotted rgba(142,227,255,0.4);cursor:help;white-space:nowrap}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#0c1a2e;color:var(--t1);border:1px solid var(--bdr2);border-radius:8px;padding:8px 12px;font-size:12px;font-family:var(--sa);line-height:1.4;white-space:normal;width:max-content;max-width:260px;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;pointer-events:none;z-index:300;box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.tip:hover::after{opacity:1;visibility:visible}
@media(max-width:768px){.tip::after{display:none}}


/* Direct access secondary links */
.da-link:hover{color:var(--cyan) !important}


/* ====== Light Theme — Comprehensive ====== */
body.light-theme{
  --bg:#f5f7fa;--nav:#ffffff;--bg2:#edf2f7;--bg3:#e2e8f0;--srf:#cbd5e1;
  --red:#dc2626;--cyan:#0891b2;--cy2:#0e7490;--teal:#0d9488;--gold:#b45309;
  --t1:#0f172a;--t2:#334155;--t3:#64748b;
  --bdr:rgba(0,0,0,0.1);--bdr2:rgba(0,0,0,0.18);--card-bg:#fff;--card-bg2:#fff;--cyan-rgb:8,145,178;--gold-rgb:180,83,9;--red-rgb:220,38,38;--subtle:rgba(8,145,178,0.04);--subtle2:rgba(8,145,178,0.03);--subtle3:rgba(0,0,0,0.08);
}

/* ═══ NAVIGATION ═══ */
body.light-theme .topbar{background:#fff !important;border-bottom:1px solid rgba(0,0,0,0.08) !important;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
body.light-theme .theme-toggle{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.12)}
body.light-theme .theme-toggle .tt-opt{color:#64748b}
body.light-theme .theme-toggle .tt-opt:hover{color:#0f172a}
body.light-theme .theme-toggle .tt-opt + .tt-opt{border-left-color:rgba(0,0,0,0.08)}
body.light-theme .theme-toggle .tt-dark{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25);background:rgba(0,0,0,0.03)}
body.light-theme .theme-toggle .tt-light{background:#0891b2 !important;color:#fff !important}
body.light-theme .tnav a,body.light-theme .tnav .pdrop-trigger{color:#0e7490 !important}
body.light-theme .tnav a:hover,body.light-theme .tnav .pdrop-trigger:hover{color:#0f172a !important}
body.light-theme .tnav a[href*="Register"]{background:#0891b2 !important;color:#fff !important}
body.light-theme .hamburger span{background:#334155}
body.light-theme .mob-menu{background:#fff !important;border-bottom:1px solid rgba(0,0,0,0.1)}
body.light-theme .mob-menu a{color:#334155 !important}
body.light-theme .mob-menu a[style*="color:var(--cyan)"]{color:#0891b2 !important}
body.light-theme .mob-menu a[style*="font-weight:600"]{color:#0891b2 !important}

/* ═══ DROPDOWNS (Platform + Network) ═══ */
body.light-theme .pdrop-panel{background:#fff !important;border-color:rgba(0,0,0,0.12) !important;box-shadow:0 12px 40px rgba(0,0,0,0.15) !important}
body.light-theme .pdrop-item:hover{background:rgba(8,145,178,0.06) !important}
body.light-theme .pdrop-name{color:#0f172a !important}
body.light-theme .pdrop-sub{color:#64748b !important}
body.light-theme .pdrop-sub b{color:#0891b2 !important}
body.light-theme .pdrop-launch{background:rgba(8,145,178,0.08) !important;border-color:rgba(8,145,178,0.25) !important;color:#0891b2 !important}
body.light-theme .pdrop-launch:hover{background:#0891b2 !important;color:#fff !important;border-color:#0891b2 !important}
body.light-theme .pdrop-footer{border-top-color:rgba(0,0,0,0.08) !important}
body.light-theme .pdrop-compare{color:#64748b !important}
body.light-theme .pdrop-compare:hover{color:#0891b2 !important}

/* ═══ HERO & SUB-HERO ═══ */
body.light-theme .hero-bg{background:radial-gradient(ellipse 90% 55% at 50% 30%,rgba(8,145,178,0.07),transparent 55%),radial-gradient(ellipse 50% 40% at 12% 65%,rgba(220,38,38,0.04),transparent) !important}
body.light-theme .blob{opacity:0.15 !important}
body.light-theme .acc{color:#dc2626 !important}
body.light-theme .hero-sub{color:#334155 !important}

/* ═══ PRIMARY BUTTONS ═══ */
body.light-theme .btn-g{background:#0891b2 !important;color:#fff !important;border:none !important;box-shadow:0 2px 8px rgba(8,145,178,0.2)}
body.light-theme .btn-g:hover{background:#0e7490 !important}
/* Secondary/ghost buttons */
body.light-theme .btn-g[style*="background:transparent"]{background:transparent !important;color:#0891b2 !important;border:1px solid rgba(8,145,178,0.3) !important;box-shadow:none !important}
body.light-theme .btn-g[style*="background:transparent"]:hover{background:rgba(8,145,178,0.06) !important}

/* ═══ GATEWAY CARDS ═══ */
body.light-theme .gw-card{background:#fff !important;border:1px solid rgba(0,0,0,0.08) !important;box-shadow:0 2px 8px rgba(0,0,0,0.04) !important}
body.light-theme .gw-card:hover{border-color:rgba(8,145,178,0.3) !important;box-shadow:0 6px 20px rgba(8,145,178,0.08) !important}
body.light-theme .gw-card h2{color:#0f172a}
body.light-theme .gw-card p{color:#334155}
body.light-theme .gw-enter{color:#0891b2 !important}

/* ═══ HUB CARDS ═══ */
body.light-theme .hub-card{background:#fff !important;border:1px solid rgba(0,0,0,0.08) !important;box-shadow:0 2px 8px rgba(0,0,0,0.04) !important}
body.light-theme .hub-card:hover{border-color:rgba(8,145,178,0.3) !important}
body.light-theme .hub-card h2{color:#0f172a}
body.light-theme .hub-desc{color:#334155 !important}
body.light-theme .hub-sub{color:#64748b !important}
body.light-theme .hub-enter{color:#0891b2 !important}
body.light-theme .hub-cap{background:rgba(8,145,178,0.06) !important;color:#0e7490 !important;border-color:rgba(8,145,178,0.15) !important}
body.light-theme .hub-eng{color:#64748b !important}
body.light-theme .hub-eng b{color:#334155 !important}

/* ═══ COMPARE BOXES ═══ */
body.light-theme .compare-box{background:#fff !important;border:1px solid rgba(0,0,0,0.1) !important}
body.light-theme .compare-box.compare-new{background:rgba(8,145,178,0.03) !important;border-color:rgba(8,145,178,0.2) !important}
body.light-theme .compare-box.compare-old{background:rgba(220,38,38,0.02) !important;border-color:rgba(220,38,38,0.15) !important}
body.light-theme .compare-box h3{color:#0f172a}
body.light-theme .compare-box p{color:#334155}

/* ═══ INLINE GRADIENT CARDS (pillars, callouts, etc.) ═══ */
body.light-theme [style*="linear-gradient(170deg,#0d1f3a"]{background:#fff !important;border-color:rgba(0,0,0,0.1) !important;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
body.light-theme [style*="linear-gradient(170deg,#0d1f3a"] h3{color:#0f172a}
body.light-theme [style*="linear-gradient(170deg,#0d1f3a"] p{color:#334155}
body.light-theme [style*="linear-gradient(170deg,#0d1f3a"] [style*="color:var(--t2)"]{color:#334155 !important}

/* ═══ CALLOUT BOXES (cyan-tinted, amber-tinted) ═══ */
body.light-theme [style*="rgba(142,227,255,0.04)"]{background:rgba(8,145,178,0.04) !important}
body.light-theme [style*="rgba(14,165,233,0.04)"]{background:rgba(8,145,178,0.03) !important}
body.light-theme [style*="rgba(14,165,233,0.02)"]{background:rgba(8,145,178,0.02) !important}
body.light-theme [style*="rgba(251,191,36,0.04)"]{background:rgba(180,83,9,0.04) !important}
body.light-theme [style*="rgba(34,211,238,0.04)"]{background:rgba(8,145,178,0.04) !important}
body.light-theme [style*="rgba(231,76,60,0.04)"]{background:rgba(220,38,38,0.03) !important}
body.light-theme [style*="rgba(231,76,60,0.03)"]{background:rgba(220,38,38,0.02) !important}
body.light-theme [style*="rgba(142,227,255,0.1)"]{background:rgba(8,145,178,0.08) !important}
body.light-theme [style*="rgba(142,227,255,0.06)"]{background:rgba(8,145,178,0.05) !important}
body.light-theme [style*="rgba(142,227,255,0.03)"]{background:rgba(8,145,178,0.03) !important}
/* Callout boxes with gradient */
body.light-theme [style*="linear-gradient(170deg,rgba(142,227,255"]{background:rgba(8,145,178,0.04) !important;border-color:rgba(8,145,178,0.15) !important}

/* ═══ INLINE BORDERS (cyan rgba) ═══ */
body.light-theme [style*="border:1px solid rgba(142,227,255,0.1"]{border-color:rgba(0,0,0,0.1) !important}
body.light-theme [style*="border:1px solid var(--subtle3)"]{border-color:rgba(0,0,0,0.1) !important}
body.light-theme [style*="border:1px solid var(--subtle3)"]{border-color:rgba(0,0,0,0.1) !important}
body.light-theme [style*="border:1px solid var(--bdr2)"]{border-color:rgba(8,145,178,0.2) !important}
body.light-theme [style*="border:1px solid var(--bdr2)"]{border-color:rgba(8,145,178,0.2) !important}
body.light-theme [style*="border:1px solid var(--bdr2)"]{border-color:rgba(8,145,178,0.25) !important}
body.light-theme [style*="border:1px solid rgba(14,165,233,0.1"]{border-color:rgba(0,0,0,0.08) !important}
body.light-theme [style*="border:1px solid var(--subtle3)"]{border-color:rgba(0,0,0,0.08) !important}
body.light-theme [style*="border:1px solid rgba(34,211,238,0.15)"]{border-color:rgba(0,0,0,0.08) !important}
body.light-theme [style*="border:1px solid rgba(251,191,36,0.2)"]{border-color:rgba(180,83,9,0.2) !important}
body.light-theme [style*="border-top:1px solid var(--subtle3)"]{border-top-color:rgba(0,0,0,0.08) !important}
body.light-theme [style*="border-top:1px solid var(--bdr)"]{border-top-color:rgba(0,0,0,0.06) !important}
/* Platform-colored borders on cards */
body.light-theme [style*="border:1px solid rgba(13,148,136,0.3)"]{border-color:rgba(13,148,136,0.25) !important}
body.light-theme [style*="border:1px solid rgba(37,99,235,0.3)"]{border-color:rgba(37,99,235,0.25) !important}
body.light-theme [style*="border:1px solid rgba(124,58,237,0.3)"]{border-color:rgba(124,58,237,0.25) !important}
body.light-theme [style*="border:1px solid rgba(14,165,233,0.3)"]{border-color:rgba(14,165,233,0.25) !important}
body.light-theme [style*="border:1px solid rgba(245,158,11,0.3)"]{border-color:rgba(245,158,11,0.25) !important}

/* ═══ HARDCODED WHITE TEXT ═══ */
body.light-theme [style*="color:#fff"]{color:#0f172a !important}
body.light-theme [style*="color:#e8edf4"]{color:#0f172a !important}
body.light-theme [style*="color:#c8d6e5"]{color:#334155 !important}

/* ═══ INLINE COLOR OVERRIDES ═══ */
body.light-theme [style*="color:var(--cyan)"]{color:#0891b2 !important}
body.light-theme [style*="color:var(--t1)"]{color:#0f172a !important}
body.light-theme [style*="color:var(--t2)"]{color:#334155 !important}
body.light-theme [style*="color:var(--t3)"]{color:#64748b !important}
body.light-theme [style*="color:var(--red)"]{color:#dc2626 !important}
body.light-theme [style*="color:var(--gold)"]{color:#b45309 !important}
body.light-theme em[style*="color:var(--cyan)"]{color:#0891b2 !important}

/* ═══ STAT BAR ═══ */
body.light-theme .stat-bar{background:rgba(8,145,178,0.04)}
body.light-theme .big{color:#0891b2 !important}
body.light-theme .lbl{color:#334155 !important}

/* ═══ COLLAB ITEMS ═══ */
body.light-theme .collab-item{background:#fff !important;border-color:rgba(0,0,0,0.08) !important}
body.light-theme .ci-num{color:#0891b2}
body.light-theme .ci-lbl{color:#0f172a !important}
body.light-theme .ci-desc{color:#64748b !important}

/* ═══ QUICK-PICK CARDS ═══ */
body.light-theme .qp-card{background:#fff !important;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
body.light-theme .qp-card:hover{border-color:#0891b2 !important;box-shadow:0 4px 12px rgba(8,145,178,0.1) !important}

/* ═══ TOOLTIPS ═══ */
body.light-theme .tip{border-bottom-color:rgba(8,145,178,0.35) !important}
body.light-theme .tip::after{background:#0f172a !important;color:#f5f7fa !important;border-color:rgba(255,255,255,0.15) !important}

/* ═══ DIVIDERS ═══ */
body.light-theme .divider{background:rgba(0,0,0,0.06) !important}
body.light-theme .divider::after{background:rgba(0,0,0,0.06) !important}

/* ═══ BOTTOM NAV ═══ */
body.light-theme .bottom-nav{background:#edf2f7 !important;border-color:rgba(0,0,0,0.06) !important}
body.light-theme .bottom-nav a{color:#334155 !important}
body.light-theme .bottom-nav a:hover{color:#0891b2 !important}
body.light-theme .bn-back,.light-theme .bn-top,.light-theme .bn-home{color:#334155 !important}

/* ═══ BACK LINKS ═══ */
body.light-theme .back-link{background:rgba(0,0,0,0.02)}
body.light-theme .back-link a{color:#64748b !important}
body.light-theme .back-link a:hover{color:#0891b2 !important}

/* ═══ FOOTER ═══ */
body.light-theme .footer{background:#e2e8f0 !important;border-top:1px solid rgba(0,0,0,0.06) !important}
body.light-theme .footer-tagline{color:#0f172a !important}
body.light-theme .footer-tagline em{color:#0891b2 !important}

/* ═══ AI CHAT PANEL ═══ */
body.light-theme .ai-chat-panel{background:#fff !important;border-color:rgba(0,0,0,0.15) !important;box-shadow:0 8px 32px rgba(0,0,0,0.12) !important}
body.light-theme .ai-chat-panel input,.light-theme .ai-chat-panel textarea{background:#f5f7fa !important;color:#0f172a !important;border-color:rgba(0,0,0,0.15) !important}
body.light-theme .ai-bubble-a{background:rgba(8,145,178,0.06) !important;color:#0f172a !important}
body.light-theme .ai-bubble-u{background:#e2e8f0 !important;color:#0f172a !important}
body.light-theme .ai-bubble-w{background:rgba(0,0,0,0.03) !important;border-color:rgba(0,0,0,0.1) !important;color:#64748b !important}

/* ═══ NOSCRIPT ═══ */
body.light-theme noscript div{background:#fff !important;color:#334155 !important}

/* ═══ SCROLLBAR ═══ */
body.light-theme::-webkit-scrollbar-track{background:#edf2f7}
body.light-theme::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:4px}
body.light-theme::-webkit-scrollbar-thumb:hover{background:#64748b}

/* ═══ LIVE DOT ═══ */
body.light-theme .live-dot{background:#dc2626}

/* ═══ MISC INLINE PATTERNS ═══ */
body.light-theme [style*="background:linear-gradient(180deg,#0c1a2e"]{background:#fff !important}
body.light-theme [style*="background:#0c1a2e"]{background:#fff !important}
body.light-theme [style*="background:radial-gradient(circle,rgba(142,227,255"]{background:radial-gradient(circle,rgba(8,145,178,0.04) 0%,transparent 70%) !important}
body.light-theme [style*="border-top:1px solid var(--bdr)"]{border-top-color:rgba(0,0,0,0.06) !important}
body.light-theme [style*="border-bottom:1px dashed"]{border-bottom-color:rgba(0,0,0,0.15) !important}
/* Da-link hover */
body.light-theme .da-link{color:#64748b !important}
body.light-theme .da-link:hover{color:#0891b2 !important}


/* ═══ ADDITIONAL CLASS OVERRIDES ═══ */
body.light-theme .gw-card:hover{background:#f8fafc !important;border-color:rgba(8,145,178,0.3) !important;box-shadow:0 8px 24px rgba(8,145,178,0.08) !important}
body.light-theme .case-card{background:#fff !important;border-color:rgba(0,0,0,0.08) !important}

/* ═══ v86: light-theme polish for v84/v85 custom cards ═══ */
body.light-theme .case-card-hero{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);
}
body.light-theme .case-card-hero:hover{
  border-color:#0891b2 !important;
  box-shadow:0 14px 36px rgba(8,145,178,0.12) !important;
}
body.light-theme .case-card-hero .tag{
  background:rgba(8,145,178,0.08) !important;
  border-color:rgba(8,145,178,0.25) !important;
  color:#0e7490 !important;
}
body.light-theme .case-card-hero .case-stat{color:#0891b2 !important}
body.light-theme .case-card-hero .case-quote{
  color:#475569 !important;
  border-left-color:#0891b2 !important;
}
body.light-theme .case-card-hero .case-quote cite{color:#64748b !important}
body.light-theme .case-card-hero .hub-enter{color:#0891b2 !important}

body.light-theme .case-card-mid{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.08) !important;
}
body.light-theme .case-card-mid:hover{
  border-color:rgba(8,145,178,0.3) !important;
  box-shadow:0 8px 20px rgba(8,145,178,0.08);
}
body.light-theme .case-card-mid .tag{color:#0891b2 !important}
body.light-theme .case-card-mid .hub-enter{color:#0891b2 !important}

body.light-theme .case-card-mini{
  background:rgba(8,145,178,0.03) !important;
  border-color:rgba(0,0,0,0.08) !important;
}
body.light-theme .case-card-mini:hover{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.15) !important;
}
body.light-theme .case-card-mini .tag{color:#0891b2 !important}

body.light-theme .case-section-label{color:#64748b !important}
body.light-theme .case-section-label::before,
body.light-theme .case-section-label::after{
  background:rgba(0,0,0,0.12) !important;
}

/* How-To entry card */
body.light-theme .howto-entry-card{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);
}
body.light-theme .howto-entry-card:hover{
  border-color:#0891b2 !important;
  box-shadow:0 12px 30px rgba(8,145,178,0.12) !important;
}
body.light-theme .howto-entry-card .he-icon{
  background:rgba(8,145,178,0.08) !important;
}
body.light-theme .howto-entry-card .he-title h3{color:#0f172a !important}
body.light-theme .howto-entry-card .he-title p{color:#64748b !important}
body.light-theme .howto-entry-card .he-arrow{color:#0891b2 !important}
body.light-theme .howto-entry-card .he-cats{
  border-top-color:rgba(0,0,0,0.06) !important;
}
body.light-theme .howto-entry-card .he-cat{
  background:rgba(8,145,178,0.06) !important;
  border-color:rgba(8,145,178,0.2) !important;
  color:#334155 !important;
}
body.light-theme .howto-entry-card .he-cat em{color:#0891b2 !important}
body.light-theme .howto-entry-card .he-meta{color:#64748b !important}
body.light-theme .howto-entry-card .he-meta a{color:#0891b2 !important}


body.light-theme .case-card:hover{background:#f8fafc !important;border-color:rgba(8,145,178,0.3) !important;box-shadow:0 8px 24px rgba(8,145,178,0.08) !important}
body.light-theme .case-tag{background:rgba(8,145,178,0.08) !important;color:#0891b2 !important;border-color:rgba(8,145,178,0.2) !important}
body.light-theme .plat-card{background:#fff !important;border-color:rgba(0,0,0,0.08) !important}
body.light-theme .plat-card:hover{border-color:rgba(8,145,178,0.3) !important}
body.light-theme .plat-card .ptag{background:rgba(8,145,178,0.08) !important;color:#0891b2 !important}
body.light-theme .bottom-nav a{background:#fff !important;border-color:rgba(0,0,0,0.12) !important;color:#334155 !important}
body.light-theme .bottom-nav a:hover{background:rgba(8,145,178,0.06) !important;border-color:#0891b2 !important;color:#0891b2 !important;box-shadow:0 4px 12px rgba(8,145,178,0.1) !important}
/* duplicate removed */
body.light-theme .forum-btn{background:#fff !important;border-color:rgba(0,0,0,0.12) !important;color:#334155 !important}
body.light-theme .forum-btn:hover{background:rgba(8,145,178,0.06) !important;border-color:#0891b2 !important;color:#0891b2 !important}
body.light-theme .ai-panel{background:#fff !important;border-color:rgba(0,0,0,0.15) !important;box-shadow:0 16px 48px rgba(0,0,0,0.12) !important}
body.light-theme .ai-hdr{border-bottom-color:rgba(0,0,0,0.08) !important;background:rgba(0,0,0,0.02) !important}
body.light-theme .ai-hdr .ai-badge{background:rgba(8,145,178,0.1) !important;color:#0891b2 !important}
body.light-theme .ai-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15) !important}
body.light-theme .ai-ref{color:#334155 !important;border-color:rgba(0,0,0,0.1) !important}
body.light-theme .ai-ref:hover{color:#0891b2 !important;border-color:#0891b2 !important;background:rgba(8,145,178,0.04) !important}
body.light-theme .ftable tbody td{color:#334155 !important;border-bottom-color:rgba(0,0,0,0.06) !important}
body.light-theme .ftable tbody tr:hover{background:rgba(8,145,178,0.03) !important}
body.light-theme .ftable thead th{background:rgba(8,145,178,0.06) !important;color:#0f172a !important;border-bottom-color:rgba(0,0,0,0.1) !important}
body.light-theme .doc-ch-title{color:#0891b2 !important;border-bottom-color:rgba(0,0,0,0.08) !important}
body.light-theme .voice-card{background:#fff !important;border-color:rgba(0,0,0,0.08) !important}
body.light-theme .sector-card{background:#fff !important;border-color:rgba(0,0,0,0.08) !important}
body.light-theme .sector-card:hover{border-color:rgba(8,145,178,0.3) !important}
body.light-theme .hub-flag{background:rgba(8,145,178,0.1) !important;color:#0891b2 !important}
body.light-theme .content-section h2{color:#0f172a}
body.light-theme .content-section p{color:#334155}
body.light-theme .content-section em{color:#0891b2}
body.light-theme .gw-icon{color:#0f172a}
body.light-theme .live-dot{background:#dc2626 !important}


/* Hero text light-theme fixes */
body.light-theme .hero-seq{color:rgba(15,23,42,0.7) !important}
body.light-theme .hero-kicker{color:#0891b2 !important;border-color:rgba(8,145,178,0.2) !important;background:rgba(8,145,178,0.06) !important}
body.light-theme .hero-proof{color:#334155 !important}
body.light-theme .hero-cta .ghost{border-color:rgba(8,145,178,0.3) !important;color:#0891b2 !important}

body.light-theme .bottom-nav .bn-top{color:rgba(15,23,42,0.6) !important}

/* Light theme — ghost/outline button fixes */
body.light-theme .btn-g.ghost{background:transparent !important;color:#0891b2 !important;border:1px solid rgba(8,145,178,0.3) !important;box-shadow:none !important}
body.light-theme .btn-g.ghost:hover{background:rgba(8,145,178,0.06) !important;color:#0891b2 !important}
body.light-theme .platform-actions .btn-g.ghost{background:transparent !important;color:#0891b2 !important;border:1px solid rgba(8,145,178,0.25) !important;box-shadow:none !important}
body.light-theme .platform-actions .btn-g.ghost:hover{background:rgba(8,145,178,0.06) !important}
body.light-theme .btn-g[style*="border:1px solid var(--bdr"]{background:transparent !important;color:#0891b2 !important;border:1px solid rgba(8,145,178,0.3) !important;box-shadow:none !important}
body.light-theme .btn-g[style*="border:1px solid var(--bdr"]:hover{background:rgba(8,145,178,0.06) !important;color:#0891b2 !important}
body.light-theme .btn-g[style*="color:var(--cyan)"]{color:#0891b2 !important}
body.light-theme .btn-g[style*="color:var(--t3)"]{color:#475569 !important;border-color:rgba(0,0,0,0.15) !important}

/* ═══ THEME TOGGLE ═══ */
.theme-toggle{display:inline-flex;align-items:stretch;border:1px solid var(--bdr);border-radius:999px;background:rgba(0,0,0,0.15);overflow:hidden;flex-shrink:0;line-height:1;height:26px}
.theme-toggle .tt-opt{display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:none;background:none;color:var(--t3);font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;cursor:pointer;transition:color .15s,background .15s}
.theme-toggle .tt-opt svg{display:block;flex-shrink:0}
.theme-toggle .tt-opt:hover{color:var(--t1)}
.theme-toggle .tt-opt + .tt-opt{border-left:1px solid var(--bdr)}
body:not(.light-theme) .theme-toggle .tt-light{box-shadow:inset 0 0 0 1px rgba(142,227,255,0.45);background:rgba(142,227,255,0.04)}
body:not(.light-theme) .theme-toggle .tt-dark{background:var(--cyan);color:#0a1628}
body:not(.light-theme) .theme-toggle .tt-dark:hover{background:var(--cyan);color:#0a1628}


/* ====== Balanced Card Layouts ====== */
/* Children of flex containers converted from auto-fit grids */
[style*="flex-wrap:wrap"] > div[style*="border-radius"]{flex:1 1 280px;max-width:400px;min-width:240px}
[style*="flex-wrap:wrap"] > a[style*="border-radius"]{flex:1 1 280px;max-width:400px;min-width:240px}
[style*="flex-wrap:wrap"] > div[style*="padding:16px"]{flex:1 1 200px;max-width:260px;min-width:160px}
[style*="flex-wrap:wrap"] > div[style*="padding:22px"]{flex:1 1 280px;max-width:380px;min-width:240px}
[style*="flex-wrap:wrap"] > div[style*="padding:24px"]{flex:1 1 280px;max-width:380px;min-width:240px}
[style*="flex-wrap:wrap"] > div[style*="padding:28px"]{flex:1 1 280px;max-width:400px;min-width:260px}
[style*="flex-wrap:wrap"] > div[style*="padding:20px 18px"]{flex:1 1 260px;max-width:340px;min-width:220px}
/* Hub-grid 2-column layouts */
.hub-2col{display:flex !important;flex-wrap:wrap;justify-content:center;gap:20px}
.hub-2col>.gw-card,.hub-2col>.hub-card{flex:1 1 380px;max-width:440px}
/* Mobile: all cards stack */
@media(max-width:640px){
  [style*="flex-wrap:wrap"] > div[style*="border-radius"],
  [style*="flex-wrap:wrap"] > a[style*="border-radius"],
  [style*="flex-wrap:wrap"] > div[style*="padding:16px"],
  [style*="flex-wrap:wrap"] > div[style*="padding:22px"],
  [style*="flex-wrap:wrap"] > div[style*="padding:24px"],
  [style*="flex-wrap:wrap"] > div[style*="padding:28px"],
  [style*="flex-wrap:wrap"] > div[style*="padding:20px 18px"]{
    flex:1 1 100% !important;max-width:100% !important
  }
  .hub-2col>.gw-card,.hub-2col>.hub-card{flex:1 1 100% !important;max-width:100% !important}
}


/* ====== Smart Card Count Layouts ====== */
/* Auto-detect card count and size accordingly */
/* 2 cards → side by side, centered, constrained */
.gw-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))) > *{flex:1 1 calc(50% - 16px);max-width:calc(50% - 8px)}
/* 3 cards → 3 across */
.gw-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) > *{flex:1 1 calc(33.33% - 16px);max-width:calc(33.33% - 11px)}
/* 4 cards → 2×2 grid */
.gw-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) > *{flex:1 1 calc(50% - 16px);max-width:calc(50% - 8px)}
/* 5 cards → 3+2 centered */
.gw-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *{flex:1 1 calc(33.33% - 16px);max-width:calc(33.33% - 11px)}
/* 6 cards → 3×2 */
.gw-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) > *{flex:1 1 calc(33.33% - 16px);max-width:calc(33.33% - 11px)}

/* Same for hub-grid containers with card children */
.hub-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))) > *{max-width:520px;margin:0 auto}

.hub-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))) > *{flex:1 1 calc(33.33% - 20px);max-width:calc(33.33% - 14px);min-width:260px}

.hub-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) > *{flex:1 1 calc(50% - 20px);max-width:calc(50% - 10px);min-width:280px}

.hub-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *{flex:1 1 calc(33.33% - 20px);max-width:calc(33.33% - 14px);min-width:260px}

.hub-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) > *{flex:1 1 calc(33.33% - 20px);max-width:calc(33.33% - 14px);min-width:240px}

/* Inline flex containers — same logic */
[style*="flex-wrap:wrap"]:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *{flex:1 1 calc(33.33% - 20px) !important;max-width:calc(33.33% - 14px) !important}
[style*="flex-wrap:wrap"]:has(> :nth-child(4)):not(:has(> :nth-child(5))) > *{flex:1 1 calc(50% - 20px) !important;max-width:calc(50% - 10px) !important}
[style*="flex-wrap:wrap"]:has(> :nth-child(3)):not(:has(> :nth-child(4))) > *{flex:1 1 calc(33.33% - 20px) !important;max-width:calc(33.33% - 14px) !important}
[style*="flex-wrap:wrap"]:has(> :nth-child(2)):not(:has(> :nth-child(3))) > *{flex:1 1 calc(50% - 20px) !important;max-width:calc(50% - 10px) !important}

/* Collab strips (4-5 stat items) */
.collab-strip:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *{flex:0 1 calc(20% - 14px);max-width:220px;min-width:160px}
.collab-strip:has(> :nth-child(4)):not(:has(> :nth-child(5))) > *{flex:0 1 calc(25% - 14px);max-width:260px;min-width:180px}

/* Mobile: always stack regardless of count */
@media(max-width:640px){
  .gw-grid > *,.hub-grid > *,[style*="flex-wrap:wrap"] > *,.collab-strip > *{flex:0 1 100% !important;max-width:100% !important;min-width:0 !important}
}
/* Tablet: max 2 per row */
@media(min-width:641px) and (max-width:900px){
  .gw-grid > *,.hub-grid > *{flex:0 1 calc(50% - 16px) !important;max-width:100% !important}
}


/* ====== Stats Row Fix ====== */
.stats-row > *{flex:0 0 auto !important;max-width:none !important;min-width:0 !important}
@media(max-width:640px){.stats-row{flex-wrap:wrap !important;gap:20px 32px !important}.stats-row > *{flex:0 0 calc(50% - 20px) !important}}

/* ====== Network Dropdown Fix — spacing ====== */
.pdrop-item{min-height:56px}
.pdrop-text{padding-right:8px}
.pdrop-launch{flex-shrink:0;align-self:center}
#ndropPanel .pdrop-item{padding:14px 16px}


@media(max-width:900px){.qp-grid{grid-template-columns:repeat(3,1fr) !important}}
@media(max-width:640px){.qp-grid{grid-template-columns:repeat(2,1fr) !important}}

/* Compact stat strips — force single row on desktop, wrap on mobile */
@media(max-width:640px){.collab-strip[style*="nowrap"]{flex-wrap:wrap !important}.collab-strip[style*="nowrap"] .collab-item{flex:0 0 calc(50% - 8px) !important;max-width:none !important}}

/* ====== Hub-cards in 2-column grids — compact layout ====== */
[style*="grid-template-columns:1fr 1fr"] > .hub-card{
  padding:22px 24px !important;
  gap:16px !important;
  grid-template-columns:48px 1fr !important;
}
[style*="grid-template-columns:1fr 1fr"] > .hub-card .hub-icon{
  width:48px !important;
  height:48px !important;
  border-radius:12px !important;
  font-size:24px !important;
}
[style*="grid-template-columns:1fr 1fr"] > .hub-card h2{
  font-size:17px !important;
  margin-bottom:4px !important;
}
[style*="grid-template-columns:1fr 1fr"] > .hub-card .hub-desc{
  font-size:13px !important;
  line-height:1.5 !important;
}
[style*="grid-template-columns:1fr 1fr"] > .hub-card .hub-sub{
  font-size:12px !important;
}
@media(max-width:768px){
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr"] > .hub-card{
    padding:28px !important;
    gap:20px !important;
    grid-template-columns:auto 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr"] > .hub-card .hub-icon{
    width:56px !important;
    height:56px !important;
  }
}

/* Hub-cards in :has()-driven multi-column layouts */
.hub-grid:has(> :nth-child(3)) > .hub-card{
  padding:22px 24px !important;
  gap:16px !important;
  grid-template-columns:48px 1fr !important;
}
.hub-grid:has(> :nth-child(3)) > .hub-card .hub-icon{
  width:48px !important;
  height:48px !important;
  border-radius:12px !important;
  font-size:24px !important;
}
.hub-grid:has(> :nth-child(3)) > .hub-card h2{
  font-size:17px !important;
  margin-bottom:4px !important;
}
.hub-grid:has(> :nth-child(3)) > .hub-card .hub-desc{
  font-size:13px !important;
  line-height:1.5 !important;
}
.hub-grid:has(> :nth-child(3)) > .hub-card .hub-sub{
  font-size:12px !important;
}
@media(max-width:768px){
  .hub-grid:has(> :nth-child(3)) > .hub-card{
    padding:28px !important;
    gap:20px !important;
    grid-template-columns:auto 1fr !important;
  }
  .hub-grid:has(> :nth-child(3)) > .hub-card .hub-icon{
    width:56px !important;
    height:56px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NEW HERO SECTION — v25 integration
   Brand + trust pill + network sphere + 3-CTA row + stats
   ═══════════════════════════════════════════════════════════════ */

/* --- Brand wordmark at top of hero --- */
.hero-brand{
  display:flex;justify-content:center;align-items:baseline;
  width:100%;
  margin:0 0 6px;
  font-family:var(--fn);
  font-size:clamp(26px,3.2vw,38px);
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1;
  text-align:center;
}
.hero-brand .bw-red{color:var(--red)}
.hero-brand .bw-cyan{color:var(--cyan)}

/* --- Trust pill (replaces old kicker) --- */
.hero-trust{
  display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:10px 19px;padding:12px 28px;margin:0 auto 40px;
  border:1px solid var(--bdr2);border-radius:999px;
  background:rgba(13,31,58,0.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:13.5px;color:var(--t2);
  max-width:96%;font-weight:500;letter-spacing:0.005em;
}
.ht-badge{display:inline-flex;align-items:baseline;white-space:nowrap}
.ht-badge em{font-style:italic;color:var(--cyan);font-weight:600}
.ht-badge b{font-weight:600;color:var(--t1)}
.ht-badge .ht-q{color:var(--t3);font-weight:400;margin-left:4px;font-size:12px}
.ht-div{
  width:6px;height:6px;border-radius:50%;
  background:var(--cy2);align-self:center;
  box-shadow:0 0 0 0 rgba(34,211,238,0.6);
  animation:trustDot 2.4s ease-out infinite;
}
.ht-div.d2{animation-delay:1.2s}
@keyframes trustDot{
  0%,100%{opacity:0.85;box-shadow:0 0 0 0 rgba(34,211,238,0.55)}
  40%    {opacity:1;   box-shadow:0 0 0 5px rgba(34,211,238,0)}
  80%    {opacity:0.85;box-shadow:0 0 0 0 rgba(34,211,238,0)}
}
@keyframes trustDotSm{
  0%,100%{opacity:0.6}
  40%    {opacity:1}
  80%    {opacity:0.6}
}

/* --- Override hero-zone h1 spacing to let Instrument Serif breathe --- */
.hero-zone h1{
  font-size:clamp(44px,6.8vw,80px) !important;
  line-height:1.1 !important;
  letter-spacing:-0.015em !important;
  word-spacing:0.02em;
  margin-bottom:0 !important;
  max-width:1080px !important;
}

/* --- Unified copy block (lead + support) --- */
.hero-copy{margin:42px auto 0;max-width:900px;text-wrap:balance}
.hero-lead{
  font-size:clamp(22px,2.6vw,30px);
  color:var(--t2);line-height:1.4;
  font-weight:400;letter-spacing:-0.008em;margin:0;
}
.hero-support{
  margin-top:6px;
  font-size:clamp(16px,1.75vw,19px);
  color:var(--t2);opacity:0.72;
  line-height:1.55;letter-spacing:0;
}

/* --- CTA row: three buttons, equal-height, symmetric flanks --- */
.hero-cta-row{
  display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;
  margin-top:56px;
}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 26px;border-radius:999px;
  font-size:14.5px;font-weight:500;letter-spacing:0;
  text-decoration:none;cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:transform .15s,background .15s,border-color .15s;
}
.cta-primary{
  background:var(--cy2);color:#070e1b !important;
  border:1px solid var(--cy2);padding:0 44px;
  font-weight:600;font-size:15px;
  box-shadow:0 0 0 4px rgba(34,211,238,0.08),0 10px 28px -8px rgba(34,211,238,0.45);
}
.cta-primary:hover{background:#67e8f9;transform:translateY(-1px);color:#070e1b !important}
.cta-secondary{
  background:transparent;color:var(--cyan) !important;
  border:1px solid rgba(142,227,255,0.3);min-width:240px;
}
.cta-secondary:hover{
  background:rgba(142,227,255,0.06);border-color:rgba(142,227,255,0.5);
  transform:translateY(-1px);color:var(--cyan) !important;
}
.cta-secondary i{font-style:italic;color:var(--cyan);font-weight:500}

/* Play icon — cyan ring with red triangle */
.cta-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;line-height:1;flex-shrink:0;
}
.cta-play{
  border-radius:50%;background:transparent;
  border:1.5px solid var(--cyan);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.cta-secondary:hover .cta-play{
  transform:scale(1.08);border-color:#b8ecff;
  box-shadow:0 0 0 3px rgba(142,227,255,0.14);
}
.cta-play svg{width:10px;height:10px;display:block;margin-left:1px}

/* Free tier subtitle under CTA row */
.hero-subtitle{
  margin-top:16px;font-size:11.5px;color:var(--t3);
  text-transform:uppercase;letter-spacing:0.14em;
  font-weight:500;text-align:center;
}
/* Above-CTA variant: qualifies the CTAs that follow */
.hero-subtitle-above{
  margin-top:26px;margin-bottom:14px;
  font-size:12.5px;color:var(--cyan);
  letter-spacing:0.1em;
}
.hero-subtitle-above em{font-style:normal;opacity:0.7;text-transform:none;letter-spacing:0}
.hero-subtitle b{color:var(--teal);font-weight:600}

/* Stats strip */
.hero-stats{
  display:flex;gap:56px;justify-content:center;align-items:flex-start;flex-wrap:wrap;
  margin:42px auto 0;padding-top:34px;
  border-top:1px solid var(--bdr);max-width:680px;
}
.hs-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:92px}
.hs-item strong{
  font-family:var(--se);font-size:clamp(34px,4vw,48px);
  color:var(--cyan);font-weight:400;
  line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
}
.hs-item strong sup{font-size:0.5em;font-weight:400;top:-0.6em}
.hs-item span{
  font-size:11px;color:var(--t3);text-transform:uppercase;
  letter-spacing:0.14em;font-weight:600;margin-top:4px;
}

/* --- Override .hero-globe to accommodate SVG instead of CSS div --- */
.hero-globe{
  width:min(775px,90vw) !important;
  aspect-ratio:1/1 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:drop-shadow(0 0 80px rgba(34,211,238,0.08));
  display:block !important;
}
/* Scale outer orbit rings to match the larger globe */
.hero-zone .hero-ring.r1{width:min(1100px,90vw) !important}
.hero-zone .hero-ring.r2{width:min(1225px,98vw) !important}
.hero-globe::before,
.hero-globe::after{display:none !important}

/* --- Accessibility: respect reduced-motion preference --- */
@media (prefers-reduced-motion:reduce){
  .ht-div,
  .hero-globe *,
  .blob{animation:none !important}
  .hero-globe circle,
  .hero-globe ellipse{
    /* Keep sensor network visible, just stop the traveling beams */
  }
}

/* --- Mobile: tighten spacing, drop some effects --- */
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS for the new hero
   Strategy: layered breakpoints matching the existing site (960/768/640/380),
   plus a short-screen landscape rule.
   ═══════════════════════════════════════════════════════════════ */

/* TABLET (≤960px): slightly smaller headline, tighten pill */
@media (max-width:960px){
  .hero-zone{padding:64px 24px 56px}
  .hero-brand{font-size:30px;margin-bottom:8px}
  .hero-trust{padding:11px 22px;font-size:13px;gap:8px 14px;margin-bottom:32px}
  .hero-zone h1{font-size:58px !important;line-height:1.08 !important}
  .hero-copy{margin-top:32px}
  .hero-lead{font-size:24px}
  .hero-support{font-size:17px}
  .hero-cta-row{gap:12px;margin-top:40px}
  .hero-stats{gap:40px;margin-top:36px;padding-top:28px}
  .hs-item strong{font-size:38px}
  .hero-globe{width:min(640px,88vw) !important}
  .hero-zone .hero-ring.r1{width:min(900px,95vw) !important}
  .hero-zone .hero-ring.r2{width:min(1000px,100vw) !important}
}

/* SMALL TABLET / LANDSCAPE PHONE (≤768px) — matches existing site breakpoint */
@media (max-width:768px){
  .hero-zone{padding:48px 20px 40px;min-height:auto}
  .hero-brand{font-size:26px;margin-bottom:8px;letter-spacing:0.015em}
  .hero-trust{padding:10px 18px;font-size:12.5px;gap:6px 10px;margin-bottom:26px;max-width:100%}
  .ht-badge{white-space:normal;flex-wrap:wrap;justify-content:center;gap:4px}
  .ht-badge .ht-q{margin-left:3px;font-size:11.5px}
  .ht-div{width:5px;height:5px;box-shadow:none;animation-name:trustDotSm}
  .hero-zone h1{font-size:40px !important;line-height:1.12 !important;letter-spacing:-0.01em !important;padding:0 8px}
  .hero-copy{margin-top:24px;padding:0 8px}
  .hero-lead{font-size:19px;line-height:1.4}
  .hero-support{font-size:15px;margin-top:4px}
  .hero-cta-row{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-areas:
      "primary primary"
      "sec1    sec2";
    gap:10px;margin-top:32px;padding:0 16px;
    justify-content:center;
  }
  /* Launch spans its own row, content-sized, centered */
  .cta-primary{
    grid-area:primary;
    justify-self:center;
    height:50px;padding:0 32px;font-size:14.5px;
  }
  /* Secondaries share row 2 */
  .cta-secondary{
    min-width:0;width:auto;max-width:none;
    height:46px;font-size:13px;padding:0 16px;
    gap:6px;
  }
  .hero-cta-row > .cta-secondary:nth-of-type(1){grid-area:sec1}
  .hero-cta-row > .cta-secondary:nth-of-type(2){grid-area:sec2}
  .cta-secondary i{font-size:0.95em}
  .cta-icon{width:20px;height:20px}
  .cta-play svg{width:9px;height:9px}
  .hero-subtitle{margin-top:14px;font-size:11px;letter-spacing:0.12em}
  .hero-stats{gap:18px 28px;margin-top:28px;padding-top:22px;max-width:100%}
  .hs-item{min-width:78px;flex:1 1 78px}
  .hs-item strong{font-size:30px}
  .hs-item span{font-size:10px;letter-spacing:0.1em}
  .hero-globe{width:min(520px,92vw) !important;filter:drop-shadow(0 0 50px rgba(34,211,238,0.06))}
  .hero-zone .hero-ring.r1{width:100vw !important;opacity:0.2}
  .hero-zone .hero-ring.r2{display:none}
}

/* PHONE (≤480px): single-column everything, more aggressive tightening */
@media (max-width:480px){
  .hero-zone{padding:40px 16px 32px}
  .hero-brand{font-size:22px;letter-spacing:0.01em;margin-bottom:8px}
  .hero-trust{padding:9px 14px;font-size:11.5px;gap:5px 8px}
  .ht-badge em,.ht-badge b{font-size:12px}
  .ht-badge .ht-q{font-size:10.5px}
  .hero-zone h1{font-size:34px !important;line-height:1.14 !important;padding:0 4px}
  .hero-copy{margin-top:20px;padding:0 4px}
  .hero-lead{font-size:17px;line-height:1.4}
  .hero-support{font-size:14px;margin-top:4px;line-height:1.5}
  .hero-cta-row{margin-top:26px;padding:0 8px;gap:8px}
  .cta-primary{height:48px;font-size:14px;padding:0 22px}
  .cta-secondary{height:44px;font-size:12.5px;padding:0 12px;gap:5px}
  .cta-secondary i{font-size:0.92em}
  .cta-icon{width:18px;height:18px}
  .cta-play svg{width:8px;height:8px}
  .hero-stats{gap:16px;padding-top:20px;margin-top:24px}
  .hs-item{min-width:0;flex:1 1 32%}
  .hs-item strong{font-size:26px}
  .hs-item span{font-size:9.5px;letter-spacing:0.08em}
  .hero-globe{width:min(440px,98vw) !important}
}

/* SMALL PHONE (≤380px): last-resort tightening so nothing overflows */
@media (max-width:380px){
  .hero-brand{font-size:19px;letter-spacing:0.008em}
  .hero-trust{padding:8px 12px;font-size:10.5px;gap:4px 6px}
  .ht-badge em,.ht-badge b{font-size:11px}
  .ht-badge .ht-q{display:none} /* Drop the "live data" suffix on the smallest screens */
  .hero-zone h1{font-size:28px !important;line-height:1.18 !important}
  .hero-lead{font-size:15.5px}
  .hero-support{font-size:13px}
  .hs-item strong{font-size:22px}
  .hs-item span{font-size:9px}
  .cta-primary{height:48px;font-size:13.5px}
  .cta-secondary{height:42px;font-size:11.5px;padding:0 6px;gap:4px;letter-spacing:0}
  .cta-icon{width:16px;height:16px}
  .cta-play svg{width:7px;height:7px}
}

/* LANDSCAPE PHONE (short height): prevent globe from dominating a squat viewport */
@media (max-width:900px) and (max-height:500px){
  .hero-zone{padding:32px 20px 24px;min-height:auto}
  .hero-globe{width:min(380px,55vw) !important;opacity:0.55}
  .hero-brand{font-size:22px;margin-bottom:6px}
  .hero-trust{margin-bottom:18px}
  .hero-zone h1{font-size:32px !important;line-height:1.1 !important}
  .hero-copy{margin-top:16px}
  .hero-cta-row{margin-top:20px}
  .hero-stats{margin-top:20px;padding-top:16px}
}

/* Prevent hero overflow on very wide aspect ratios */
@media (max-width:1200px){
  .hero-zone{overflow:hidden}
}

/* --- Light theme overrides --- */
body.light-theme .hero-brand .bw-red{color:#dc2626}
body.light-theme .hero-brand .bw-cyan{color:#0891b2}
body.light-theme .hero-zone h1{color:#0f172a !important}
body.light-theme .hero-zone h1 em{color:#0891b2 !important}
body.light-theme .hero-zone h1 .acc{color:#dc2626 !important}
body.light-theme .hero-trust{background:rgba(255,255,255,0.7);color:#334155;border-color:rgba(8,145,178,0.2)}
body.light-theme .ht-badge b{color:#0f172a}
body.light-theme .ht-badge em{color:#0891b2}
body.light-theme .ht-badge .ht-q{color:#64748b}
body.light-theme .ht-div{background:#0891b2;box-shadow:0 0 0 0 rgba(8,145,178,0.5)}
body.light-theme .hero-lead{color:#334155}
body.light-theme .hero-support{color:#475569}
body.light-theme .cta-primary{background:#0891b2;border-color:#0891b2;color:#fff !important}
body.light-theme .cta-primary:hover{background:#0e7490;color:#fff !important}
body.light-theme .cta-secondary{color:#0891b2 !important;border-color:rgba(8,145,178,0.3)}
body.light-theme .cta-secondary:hover{background:rgba(8,145,178,0.06);color:#0891b2 !important}
body.light-theme .cta-secondary i{color:#0891b2}
body.light-theme .cta-play{border-color:#0891b2}
body.light-theme .hero-subtitle{color:#64748b}
body.light-theme .hero-subtitle b{color:#0891b2}
body.light-theme .hs-item strong{color:#0891b2}
body.light-theme .hs-item span{color:#64748b}

/* --- Light-theme globe: ORBITAL RINGS (clean, geometric) --- */
body.light-theme .hero-globe{
  display:none !important;
}

/* Hide ALL dark-mode sphere layers and network elements */
body.light-theme .hero-globe .glb-sphere  {display:none !important}
body.light-theme .hero-globe .glb-light   {display:none !important}
body.light-theme .hero-globe .glb-shadow  {display:none !important}
body.light-theme .hero-globe .glb-spec    {display:none !important}
body.light-theme .hero-globe .glb-vignette{display:none !important}
body.light-theme .hero-globe .glb-clouds  {display:none !important}
body.light-theme .hero-globe .glb-sensors {display:none !important}
body.light-theme .hero-globe .glb-arcs    {display:none !important}
body.light-theme .hero-globe .glb-anim    {display:none !important}

/* Show orbital structure only in light mode */
body.light-theme .hero-globe .glb-orbital{display:block}

/* Dark mode: hide orbital structure */
.hero-globe .glb-orbital{display:none}

/* Hero rings (outer orbit lines) — faint slate in light mode */
body.light-theme .hero-ring{border-color:rgba(8,145,178,0.15) !important}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIXES — TARGETED AT REAL PROBLEMS
   Root causes identified by audit:
   1. .btn-g has white-space:nowrap → long button text overflows screen
   2. .btn-g padding:16px 44px → too big for mobile
   3. Cards with variable text → uneven heights
   ═══════════════════════════════════════════════════════════════ */

/* --- ALLOW .btn-g to wrap gracefully on narrower screens --- */
@media (max-width:900px){
  .btn-g{
    white-space:normal !important;
    text-align:center;
    line-height:1.3;
    padding:14px 32px;
    font-size:17px;
    max-width:100%;
    overflow-wrap:break-word;
    word-wrap:break-word;
  }
}
@media (max-width:640px){
  .btn-g{
    padding:12px 22px;
    font-size:15px;
    line-height:1.35;
    min-height:44px; /* accessible tap target */
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}
@media (max-width:400px){
  .btn-g{
    padding:11px 18px;
    font-size:14px;
    letter-spacing:0;
  }
}

/* --- PREVENT HORIZONTAL OVERFLOW at root level --- */
html, body{
  max-width:100%;
  overflow-x:hidden; /* Last-resort safety — nothing should ever scroll horizontally */
}

/* --- UNIVERSAL: no element may exceed viewport width --- */
@media (max-width:640px){
  .page > *, .content-section, .hero-zone, .sub-hero,
  .gateways, .audience-stack, .hub-grid, .plat-grid,
  .case-grid, .voice-grid, .sector-grid, .pp-grid{
    max-width:100vw;
    overflow-x:hidden;
  }
}

/* --- CARD AUDIT FIXES (consolidated and simplified) --- */

/* Universal card safety */
.gw-card, .plat-card, .case-card, .vcard, .sector-card,
.hub-card, .audience-card, .pp-card, .qp-card, .compare-box{
  overflow-wrap:break-word;
  word-wrap:break-word;
  word-break:break-word;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* Text content inside cards */
.gw-card p, .plat-card p, .case-card p, .vcard p, .sector-card p,
.hub-card p, .audience-card p, .pp-card p,
.gw-card h2, .plat-card h3, .case-card h3, .sector-card h2,
.hub-card h2, .audience-card h2{
  overflow-wrap:break-word;
  word-wrap:break-word;
  hyphens:auto;
  min-width:0;
}

/* Grid stretching for equal heights */
.gw-grid, .plat-grid, .case-grid, .voice-grid,
.sector-grid, .hub-grid, .pp-grid{
  align-items:stretch;
}

/* Cards fill their grid cell height */
.gw-card, .plat-card, .case-card, .vcard,
.sector-card, .hub-card, .pp-card{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Card text body takes available space, footers stick to bottom */
.gw-card > p:last-of-type, .plat-card > p:last-of-type,
.case-card > p:last-of-type, .pp-card > p:last-of-type{
  flex:1 0 auto;
}

/* --- PP-GRID cascade --- */
@media (max-width:1024px){
  .pp-grid{grid-template-columns:repeat(3,1fr) !important}
}
@media (max-width:720px){
  .pp-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px;padding:0 20px 24px}
}
@media (max-width:480px){
  .pp-grid{grid-template-columns:1fr !important;max-width:360px;gap:10px}
  .pp-card{padding:18px 14px}
}

/* --- GW-GRID (gateway cards) --- */
@media (max-width:960px){
  .gw-grid > .gw-card{flex:1 1 calc(50% - 8px) !important;max-width:calc(50% - 8px) !important;min-width:0 !important}
}
@media (max-width:640px){
  .gw-grid{padding:0 20px 36px}
  .gw-grid > .gw-card{flex:1 1 100% !important;max-width:100% !important;min-width:0 !important}
  .gw-card{padding:24px 20px}
  .gw-card .gw-icon{font-size:32px}
  .gw-card h2{font-size:20px}
  .gw-card p{font-size:14px}
}

/* --- PLAT-GRID (platform cards) --- */
.plat-grid > .plat-card{flex:1 1 280px;min-width:240px;max-width:calc(50% - 8px)}
@media (min-width:1024px){
  .plat-grid > .plat-card{max-width:calc(33.33% - 12px)}
}
@media (max-width:720px){
  .plat-grid{padding:0 20px 36px}
  .plat-grid > .plat-card{flex:1 1 100% !important;max-width:100% !important;min-width:0 !important}
  .plat-card{padding:20px 18px}
  .plat-card h3{font-size:18px}
  .plat-card h3 small{font-size:13px}
  .plat-card > p{font-size:14px}
}

/* --- CASE-GRID --- */
@media (max-width:720px){
  .case-grid{grid-template-columns:1fr !important;padding:0 20px 36px;gap:12px}
  .case-card{padding:18px}
  .case-card h3{font-size:16px}
  .case-card p{font-size:13.5px}
}

/* --- VOICE-GRID --- */
@media (max-width:720px){
  .voice-grid{grid-template-columns:1fr !important;padding:0 20px 36px;gap:12px;max-width:560px}
  .vcard{padding:20px}
  .vcard p{font-size:15px}
}

/* --- SECTOR-GRID --- */
@media (max-width:720px){
  .sector-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;padding:0 20px 16px}
}
@media (max-width:480px){
  .sector-grid{grid-template-columns:1fr !important;max-width:380px}
  .sector-card{padding:14px}
  .sector-card .si{font-size:22px;width:28px}
  .sector-card h2{font-size:14px}
  .sector-card p{font-size:12px}
}

/* --- HUB-CARD internal grid on mobile --- */
@media (max-width:720px){
  .hub-card{
    grid-template-columns:1fr !important;
    text-align:center;
    padding:24px 20px;
    gap:14px;
  }
  .hub-card .hub-icon{
    margin:0 auto;
    width:56px;height:56px;
    font-size:24px;
  }
  .hub-card h2{font-size:22px}
  .hub-card .hub-sub{font-size:13.5px}
  .hub-card .hub-desc{font-size:14.5px}
}

/* --- AUDIENCE-CARD --- */
@media (max-width:480px){
  .audience-card{padding:18px 16px}
  .audience-card .aud-icon{width:56px;height:56px;font-size:24px}
  .audience-card h2{font-size:20px}
  .audience-card .aud-sub{font-size:13px}
  .audience-card .aud-desc{font-size:14.5px}
  .audience-card .aud-cap{font-size:11.5px;padding:4px 9px}
}

/* --- COMPARE BOX --- */
@media (max-width:720px){
  .compare-box{padding:20px 18px}
  .compare-box h3{font-size:14px}
  .compare-box p{font-size:14.5px}
  .compare-trio .compare-box{padding:14px 12px}
  .compare-trio .compare-box p{font-size:13px}
}

/* --- QP-CARD --- */
.qp-card{min-width:0;overflow-wrap:break-word}
@media (max-width:480px){
  .qp-card{padding:12px 8px !important}
  .qp-card > div:first-child{font-size:22px !important}
  .qp-card > div:nth-child(2){font-size:11.5px !important}
}

/* --- :has() fallback for older browsers --- */
@supports not selector(:has(*)){
  .hub-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
  .hub-grid > *{flex:none !important;max-width:none !important;min-width:0 !important}
  @media (max-width:720px){
    .hub-grid{grid-template-columns:1fr;max-width:560px}
  }
}

/* --- Light theme card backgrounds --- */
body.light-theme .gw-card,
body.light-theme .plat-card,
body.light-theme .case-card,
body.light-theme .vcard,
body.light-theme .sector-card,
body.light-theme .hub-card,
body.light-theme .audience-card,
body.light-theme .pp-card{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}


/* ═══ iter-31: Card backgrounds missed by iter-27 light theme ═══ */
/* Fixes invisible text on .platform-row, .tut-card, .ht-item, .doc-part (hardcoded #0c1a2e backgrounds) */
/* Plus hover state for .sh .s-card (hardcoded dark gradient on hover) */

body.light-theme .platform-row{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
body.light-theme .platform-row:hover{
  border-color:rgba(8,145,178,0.3) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

body.light-theme .tut-card{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
body.light-theme .tut-card:hover{
  border-color:rgba(8,145,178,0.3) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

body.light-theme .ht-item{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
body.light-theme .ht-item:hover{
  border-color:rgba(8,145,178,0.3) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

body.light-theme .doc-part{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
body.light-theme .doc-part:hover{
  border-color:rgba(8,145,178,0.3) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* Hover state for .sh .s-card — default state already uses var(--card-bg), but :hover overrides with hardcoded gradient */
body.light-theme .sh .s-card:hover{
  background:linear-gradient(170deg,#f8fafc 0%,#f1f5f9 100%) !important;
  border-color:rgba(8,145,178,0.3) !important;
  box-shadow:0 10px 32px rgba(8,145,178,0.1) !important;
}


/* --- IMAGES and MEDIA never overflow --- */
img, video, iframe, svg, canvas{
  max-width:100%;
  height:auto;
}

/* ═══════════════════════════════════════════════════════════════
   INLINE-STYLE OVERRIDES — the real fix for card/section overflow
   The HTML contains many inline style="grid-template-columns:1fr 1fr"
   and style="padding:0 36px 32px" that bypass media queries.
   Only way to override inline styles is CSS with !important.
   ═══════════════════════════════════════════════════════════════ */

/* Two-column inline grids collapse to 1 column on tablet/phone */
@media (max-width:768px){
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  /* Page content containers with inline 36px side padding shrink on mobile */
  [style*="padding:0 36px"]{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  [style*="padding:16px 36px"],
  [style*="padding:24px 36px"]{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}
@media (max-width:480px){
  [style*="padding:0 36px"],
  [style*="padding:16px 36px"],
  [style*="padding:24px 36px"]{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* Inline 50%-width cards stack on mobile */
@media (max-width:720px){
  [style*="flex:1 1 calc(50% - 10px)"],
  [style*="max-width:calc(50% - 10px)"]{
    flex:1 1 100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  /* Match ANY 33%, 25%, or 50% inline flex cards (regardless of gap offset) */
  [style*="max-width:calc(33.33%"],
  [style*="max-width:calc(33%"],
  [style*="max-width:calc(25%"],
  [style*="max-width:calc(50%"]{
    flex:1 1 100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  [style*="flex:1 1 calc(33.33% - 14px)"],
  [style*="max-width:calc(33.33% - 14px)"]{
    flex:1 1 100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
}

/* ULTRA-HIGH-SPECIFICITY MOBILE OVERRIDE
   The pre-existing rules use [style*="flex-wrap:wrap"]:has(...) > *
   which has very high specificity. We need to match or beat it.
   This selector wraps the body tag as an extra specificity anchor. */
@media (max-width:720px){
  html body [style*="flex-wrap:wrap"]:has(> :nth-child(2)) > *,
  html body [style*="flex-wrap:wrap"]:has(> :nth-child(3)) > *,
  html body [style*="flex-wrap:wrap"]:has(> :nth-child(4)) > *,
  html body [style*="flex-wrap:wrap"]:has(> :nth-child(5)) > *,
  html body [style*="flex-wrap:wrap"]:has(> :nth-child(6)) > *{
    flex:1 1 100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  /* Fallback for browsers without :has() support */
  html body [style*="flex-wrap:wrap"] > *{
    flex:1 1 100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
}

/* Tablet: let 3-col sections go to 2-col before going fully stacked */
@media (max-width:960px) and (min-width:721px){
  html body [style*="flex-wrap:wrap"]:has(> :nth-child(3)):not(:has(> :nth-child(4))) > *,
  html body [style*="flex-wrap:wrap"]:has(> :nth-child(5)):not(:has(> :nth-child(6))) > *{
    flex:1 1 calc(50% - 8px) !important;
    max-width:calc(50% - 8px) !important;
  }
  html body [style*="max-width:calc(33.33%"]{
    max-width:calc(50% - 8px) !important;
  }
  html body [style*="max-width:calc(25%"]{
    max-width:calc(50% - 8px) !important;
  }
}

/* Inline grid-template-columns:auto 1fr on hub-cards stacks on mobile */
@media (max-width:720px){
  [style*="grid-template-columns:auto 1fr"]{
    grid-template-columns:1fr !important;
    text-align:center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER / BOTTOM NAV FIX
   The bottom-nav was wrapping vertically on mobile.
   Keep it horizontal, shrink padding instead.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .bottom-nav{
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    gap:6px !important;
    padding:16px 16px !important;
  }
  .bottom-nav a{
    font-size:12px !important;
    padding:8px 12px !important;
    white-space:nowrap !important;
    flex:0 1 auto;
    min-width:0;
  }
  /* Optional: hide "back to top" on the smallest screens to preserve 2 main actions */
}
@media (max-width:420px){
  .bottom-nav{
    padding:14px 12px !important;
    gap:4px !important;
  }
  .bottom-nav a{
    font-size:11px !important;
    padding:7px 10px !important;
    letter-spacing:0 !important;
  }
  /* If only 3 buttons, shrink them; if hiding is preferred, uncomment next line: */
  /* .bottom-nav .bn-top{display:none !important} */
}

/* ═══════════════════════════════════════════════════════════════
   CARD TEXT OVERFLOW — final protection
   ═══════════════════════════════════════════════════════════════ */
.gw-card *, .plat-card *, .case-card *, .vcard *, .sector-card *,
.hub-card *, .audience-card *, .pp-card *, .qp-card *{
  max-width:100%;
  overflow-wrap:break-word;
  word-wrap:break-word;
  word-break:break-word;
}

/* Long inline text separated by · or — can break */
.plat-card b, .plat-card strong,
.case-card b, .case-card strong,
.hub-card b, .hub-card strong,
.audience-card b, .audience-card strong{
  display:inline;
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Nothing in cards is allowed to use nowrap */
@media (max-width:720px){
  .gw-card [style*="nowrap"],
  .plat-card [style*="nowrap"],
  .case-card [style*="nowrap"],
  .hub-card [style*="nowrap"],
  .audience-card [style*="nowrap"]{
    white-space:normal !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER LINK NAV (Platforms · Pricing · Cases · Services · etc.)
   Problem: 7 nav links with flex-wrap were going fully vertical on phones.
   Solution: explicit grid layout — 7 cols desktop, 4 cols phone (2 rows).
   ═══════════════════════════════════════════════════════════════ */

/* Desktop base — single horizontal row with tight gaps */
.footer-in > div[style*="flex-wrap:wrap"]{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  gap:8px 20px !important;
  font-size:13px !important;
  line-height:1.6 !important;
  padding:0 16px !important;
  max-width:100%;
}
.footer-in > div[style*="flex-wrap:wrap"] a{
  white-space:nowrap;
  flex-shrink:0;
}

/* Tablet — allow wrap to 2 rows if needed, still horizontal */
@media (max-width:720px){
  .footer-in > div[style*="flex-wrap:wrap"]{
    display:grid !important;
    grid-template-columns:repeat(4, auto) !important;
    justify-content:center !important;
    gap:6px 14px !important;
    font-size:12px !important;
    padding:0 12px !important;
  }
  .footer-in > div[style*="flex-wrap:wrap"] a{
    padding:3px 4px;
    text-align:center;
  }
}

/* Phone — 4-column grid (4 links on row 1, 3 on row 2 aligned left) */
@media (max-width:480px){
  .footer-in > div[style*="flex-wrap:wrap"]{
    grid-template-columns:repeat(4, 1fr) !important;
    gap:6px 6px !important;
    font-size:11.5px !important;
    padding:0 10px !important;
  }
  .footer-in > div[style*="flex-wrap:wrap"] a{
    padding:4px 2px;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* Small phone — still 4 cols, tighter */
@media (max-width:380px){
  .footer-in > div[style*="flex-wrap:wrap"]{
    grid-template-columns:repeat(3, 1fr) !important;
    gap:4px 4px !important;
    font-size:11px !important;
  }
}

/* Footer tagline and chrome shrinkage on mobile */
@media (max-width:768px){
  .footer{padding:24px 16px 20px !important}
  .footer-tagline{font-size:18px !important;margin-bottom:8px}
  .footer-trust{font-size:12px !important;line-height:1.6}
  .footer-bottom{font-size:11.5px !important}
  .footer-bottom a{padding:0 2px}
}
@media (max-width:480px){
  .footer-tagline{font-size:16px !important}
  .footer-trust{font-size:11px !important}
}

/* ═══════════════════════════════════════════════════════════════
   NUCLEAR MOBILE CARD STACK OVERRIDE — last line of defense
   If anything else is blocking card stacking on phones, this wins.
   Uses maximum specificity (5 selectors deep) plus !important.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  /* Any inline-styled flex container's children become full width */
  html body .page [style*="display:flex"][style*="flex-wrap:wrap"] > *,
  html body .page div[style*="flex-wrap:wrap"] > a,
  html body .page div[style*="flex-wrap:wrap"] > div,
  html body div[style*="display:flex"][style*="flex-wrap:wrap"] > *,
  html body section div[style*="flex-wrap:wrap"] > *{
    flex:1 1 100% !important;
    max-width:100% !important;
    width:100% !important;
    min-width:0 !important;
    flex-basis:100% !important;
  }

  /* Target specifically cards with onclick handlers inside flex-wrap containers */
  html body div[style*="flex-wrap:wrap"] > a[onclick],
  html body div[style*="flex-wrap:wrap"] > a[href]{
    flex:1 1 100% !important;
    max-width:100% !important;
    width:100% !important;
    display:block !important;
    box-sizing:border-box !important;
  }

  /* Target elements with max-width:calc specifically */
  html body a[style*="max-width:calc(33"],
  html body a[style*="max-width:calc(25"],
  html body div[style*="max-width:calc(33"],
  html body div[style*="max-width:calc(25"]{
    max-width:100% !important;
    flex-basis:100% !important;
    flex:1 1 100% !important;
    width:100% !important;
  }
}


/* ===== Extracted inline style block 02 ===== */
/* ═══════════════════════════════════════════════════════════════
 * iter-39: Visual polish — light-mode card treatment + emoji centering
 * ═══════════════════════════════════════════════════════════════ */

/* EMOJI CENTERING — robust grid-based centering handles emoji font metrics */
.hub-card .hub-icon,
.gw-card .gw-icon,
.aud-card .aud-icon {
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  font-variant-emoji: emoji;
  /* Give emoji a slight baseline normalization */
  text-align: center;
}

/* Slightly larger icon in 2-col hub-grids — the existing 48px rule was too compressed */
@media (min-width: 901px) {
  [style*="grid-template-columns:1fr 1fr"] > .hub-card .hub-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    font-size: 26px !important;
  }
}

/* LIGHT MODE CARDS — make them pop with teal accent + subtle gradient */
body.light-theme .hub-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%) !important;
  border: 1px solid rgba(13, 148, 136, 0.18) !important;
  box-shadow: 
    0 1px 3px rgba(13, 148, 136, 0.04),
    0 4px 12px rgba(13, 148, 136, 0.06) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-theme .hub-card:hover {
  background: linear-gradient(135deg, #ffffff 0%, #ccfbf1 100%) !important;
  border-color: rgba(13, 148, 136, 0.4) !important;
  box-shadow: 
    0 2px 6px rgba(13, 148, 136, 0.08),
    0 12px 32px rgba(13, 148, 136, 0.12) !important;
  transform: translateY(-2px);
}

/* Collab items — same treatment, more compact */
body.light-theme .collab-item {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%) !important;
  border: 1px solid rgba(13, 148, 136, 0.18) !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.05) !important;
  transition: all 0.2s;
}

body.light-theme .collab-item:hover {
  border-color: rgba(13, 148, 136, 0.35) !important;
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.1) !important;
  transform: translateY(-1px);
}

/* Compare boxes — same treatment */
body.light-theme .compare-box {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%) !important;
  border: 1px solid rgba(13, 148, 136, 0.18) !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.05) !important;
}
body.light-theme .compare-box.compare-new {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%) !important;
  border-color: rgba(13, 148, 136, 0.35) !important;
}
body.light-theme .compare-box.compare-old {
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important;
  border-color: rgba(220, 38, 38, 0.15) !important;
}

/* Other card variants */
body.light-theme .gw-card,
body.light-theme .aud-card,
body.light-theme .tc-card,
body.light-theme .feature-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%) !important;
  border: 1px solid rgba(13, 148, 136, 0.18) !important;
  box-shadow: 
    0 1px 3px rgba(13, 148, 136, 0.04),
    0 4px 12px rgba(13, 148, 136, 0.06) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.light-theme .gw-card:hover,
body.light-theme .aud-card:hover,
body.light-theme .tc-card:hover,
body.light-theme .feature-card:hover {
  background: linear-gradient(135deg, #ffffff 0%, #ccfbf1 100%) !important;
  border-color: rgba(13, 148, 136, 0.4) !important;
  box-shadow: 
    0 2px 6px rgba(13, 148, 136, 0.08),
    0 12px 32px rgba(13, 148, 136, 0.12) !important;
  transform: translateY(-2px);
}

/* WHO BENEFITS — responsive fallback for the 3-card grid */
@media (max-width: 900px) {
  .hub-grid[style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 640px) {
  .hub-grid[style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* HUB-CAPS in light mode */
body.light-theme .hub-cap {
  background: rgba(13, 148, 136, 0.08) !important;
  border: 1px solid rgba(13, 148, 136, 0.2) !important;
  color: #134e4a !important;
}

/* Hub-icon visibility in light mode — subtle ring */
body.light-theme .hub-card .hub-icon {
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.2) !important;
}

/* Ensure dark mode preserves original feel but with slight teal accent */
body:not(.light-theme) .hub-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body:not(.light-theme) .hub-card:hover {
  transform: translateY(-2px);
  border-color: rgba(142, 227, 255, 0.35) !important;
}


/* ===== Extracted inline style block 03 ===== */
/* MAGNET4WATER site-wide search widget — v2
 * Prominent, stylish search input with teal accents
 */

/* ═════════════════════════════════════════════════════
 * TRIGGER BUTTONS — look like proper search boxes
 * ═════════════════════════════════════════════════════ */

.m4w-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #ffffff;
  border: 1.5px solid rgba(13, 148, 136, 0.3);
  border-radius: 12px;
  color: #64748b;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 200px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.05);
}

.m4w-search-btn:hover,
.m4w-search-btn:focus-visible {
  border-color: rgba(13, 148, 136, 0.6);
  color: #0d9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.15);
  outline: none;
}

.m4w-search-btn svg {
  flex-shrink: 0;
  color: #0d9488;
}

.m4w-search-btn-text {
  flex: 1;
  color: inherit;
}

.m4w-search-btn-kbd {
  font-size: 11px;
  background: #f0fdfa;
  color: #0d9488;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: ui-monospace, 'SF Mono', monospace;
  border: 1px solid rgba(13, 148, 136, 0.2);
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* HERO variant — big, prominent */
.m4w-search-btn-hero {
  min-width: min(100%, 600px);
  max-width: 640px;
  padding: 18px 22px;
  font-size: 17px;
  border-radius: 16px;
  border-width: 2px;
  border-color: rgba(13, 148, 136, 0.4);
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.1),
              0 1px 3px rgba(13, 148, 136, 0.05);
}
.m4w-search-btn-hero:hover {
  border-color: rgba(13, 148, 136, 0.7);
  background: linear-gradient(135deg, #ffffff 0%, #ccfbf1 100%);
  box-shadow: 0 8px 28px rgba(13, 148, 136, 0.18),
              0 2px 6px rgba(13, 148, 136, 0.08);
  transform: translateY(-1px);
}

.m4w-search-btn-hero svg {
  width: 20px;
  height: 20px;
}

.m4w-search-btn-hero .m4w-search-btn-text {
  font-size: 17px;
  color: #64748b;
}
.m4w-search-btn-hero:hover .m4w-search-btn-text {
  color: #134e4a;
}

.m4w-search-btn-hero .m4w-search-btn-kbd {
  font-size: 12px;
  padding: 4px 10px;
}

/* ═════════════════════════════════════════════════════
 * OVERLAY
 * ═════════════════════════════════════════════════════ */

.m4w-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 72px 20px 20px;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

.m4w-search-overlay.open {
  display: flex !important;
  opacity: 1;
}

/* ═════════════════════════════════════════════════════
 * DIALOG
 * ═════════════════════════════════════════════════════ */

.m4w-search-dialog {
  background: #ffffff;
  border: 1px solid rgba(13, 148, 136, 0.15);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(13, 148, 136, 0.05),
    0 12px 32px rgba(15, 23, 42, 0.18),
    0 32px 72px rgba(15, 23, 42, 0.25);
  width: 100%;
  max-width: 780px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform 0.18s ease-out;
}

.m4w-search-overlay.open .m4w-search-dialog {
  transform: translateY(0);
}

/* ═════════════════════════════════════════════════════
 * INPUT — BIG, STYLISH, TEAL-BORDERED
 * ═════════════════════════════════════════════════════ */

.m4w-search-input-wrap {
  padding: 20px 24px 16px;
  flex-shrink: 0;
}

.m4w-search-input-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 18px;
  border: 2px solid rgba(13, 148, 136, 0.35);
  border-radius: 14px;
  background: #ffffff;
  min-height: 60px;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.04);
}

.m4w-search-input-row:focus-within {
  border-color: rgba(13, 148, 136, 0.7);
  box-shadow:
    0 0 0 4px rgba(13, 148, 136, 0.1),
    0 2px 8px rgba(13, 148, 136, 0.08);
}

.m4w-search-icon {
  color: #0d9488;
  flex-shrink: 0;
}

.m4w-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 20px;
  font-family: inherit;
  color: #0f172a;
  background: transparent;
  padding: 14px 0;
  min-width: 0;
  font-weight: 500;
}

.m4w-search-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.m4w-search-close {
  font-size: 11px;
  padding: 6px 10px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.m4w-search-close:hover {
  background: #f0fdfa;
  border-color: rgba(13, 148, 136, 0.4);
  color: #0d9488;
}

/* ═════════════════════════════════════════════════════
 * LOADING / RESULTS
 * ═════════════════════════════════════════════════════ */

.m4w-search-loading {
  padding: 40px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}

.m4w-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
}

.m4w-search-empty {
  padding: 40px 20px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

.m4w-search-empty strong { color: #0f172a; }

.m4w-search-group {
  padding: 12px 12px 6px;
  font-size: 11px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 700;
}

.m4w-search-result {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  margin-bottom: 2px;
  cursor: pointer;
  transition: all 0.08s;
  border: 1px solid transparent;
}

.m4w-search-result:hover,
.m4w-search-result.active {
  background: #f0fdfa;
  border-color: rgba(13, 148, 136, 0.2);
}

.m4w-search-result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.m4w-search-result-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.m4w-badge-igwnet { background: #ccfbf1; color: #134e4a; }
.m4w-badge-swanet { background: #dcfce7; color: #14532d; }
.m4w-badge-stormnet { background: #ddd6fe; color: #4c1d95; }
.m4w-badge-conduitnet { background: #fef3c7; color: #78350f; }
.m4w-badge-datanet { background: #e0e7ff; color: #312e81; }
.m4w-badge-site { background: #f1f5f9; color: #334155; }

.m4w-search-result-type {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.m4w-search-result-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.35;
}

.m4w-search-result-snippet {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.m4w-search-result-snippet mark,
.m4w-search-result-title mark {
  background: #fef9c3;
  color: #78350f;
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 600;
}

.m4w-search-result-title mark { color: inherit; }

.m4w-search-result-url {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
  font-family: ui-monospace, 'SF Mono', monospace;
}

/* ═════════════════════════════════════════════════════
 * FOOTER
 * ═════════════════════════════════════════════════════ */

.m4w-search-footer {
  padding: 12px 24px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: #f9fafb;
}

.m4w-search-footer kbd {
  padding: 2px 7px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  color: #475569;
  margin-right: 5px;
  font-weight: 600;
}

/* ═════════════════════════════════════════════════════
 * MOBILE
 * ═════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .m4w-search-overlay { padding: 0; }
  .m4w-search-dialog { border-radius: 0; max-width: none; max-height: 100vh; height: 100vh; }
  .m4w-search-input-wrap { padding: 16px 16px 12px; }
  .m4w-search-input-row { min-height: 52px; padding: 2px 14px; }
  .m4w-search-input { font-size: 18px; }
  .m4w-search-btn { min-width: 44px; }
  .m4w-search-btn-text, .m4w-search-btn-kbd { display: none; }
  .m4w-search-footer { font-size: 10px; gap: 10px; }
}


/* ===== Extracted inline style block 04 ===== */
/* ═══════════════════════════════════════════════════════════════
 * iter-40: Hub card visual enhancement — always-visible accent bars
 * ═══════════════════════════════════════════════════════════════ */

/* ALWAYS-VISIBLE accent bar on top of every hub-card */
.hub-card::before {
  opacity: 1 !important;          /* was 0, only showed on hover */
  height: 5px !important;         /* was 4px — slightly more prominent */
}

/* Enhanced hover — bar glows and grows */
.hub-card:hover::before {
  opacity: 1 !important;
  height: 6px !important;
  filter: brightness(1.1) saturate(1.2);
  box-shadow: 0 0 12px currentColor;
}

/* LIGHT MODE — ensure accent bars are visible with proper contrast */
body.light-theme .hub-card {
  /* Add a subtle outer glow matching the theme */
  position: relative;
}

/* Each card variant gets a colored inner shadow/glow */
body.light-theme .hc-gw {
  box-shadow: 
    inset 0 5px 0 0 transparent,  /* accent handled by ::before */
    0 1px 3px rgba(13, 148, 136, 0.08),
    0 4px 16px rgba(13, 148, 136, 0.1) !important;
  border-color: rgba(13, 148, 136, 0.22) !important;
}
body.light-theme .hc-gw:hover {
  box-shadow: 
    0 2px 6px rgba(13, 148, 136, 0.15),
    0 12px 32px rgba(13, 148, 136, 0.18) !important;
  border-color: rgba(13, 148, 136, 0.5) !important;
}

body.light-theme .hc-ws {
  box-shadow: 
    0 1px 3px rgba(37, 99, 235, 0.08),
    0 4px 16px rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
}
body.light-theme .hc-ws:hover {
  box-shadow: 
    0 2px 6px rgba(37, 99, 235, 0.15),
    0 12px 32px rgba(37, 99, 235, 0.18) !important;
  border-color: rgba(37, 99, 235, 0.5) !important;
}

body.light-theme .hc-sw {
  box-shadow: 
    0 1px 3px rgba(124, 58, 237, 0.08),
    0 4px 16px rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
}
body.light-theme .hc-sw:hover {
  box-shadow: 
    0 2px 6px rgba(124, 58, 237, 0.15),
    0 12px 32px rgba(124, 58, 237, 0.18) !important;
  border-color: rgba(124, 58, 237, 0.5) !important;
}

body.light-theme .hc-wd {
  box-shadow: 
    0 1px 3px rgba(14, 165, 233, 0.08),
    0 4px 16px rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.22) !important;
}
body.light-theme .hc-wd:hover {
  box-shadow: 
    0 2px 6px rgba(14, 165, 233, 0.15),
    0 12px 32px rgba(14, 165, 233, 0.18) !important;
  border-color: rgba(14, 165, 233, 0.5) !important;
}

body.light-theme .hc-dn {
  box-shadow: 
    0 1px 3px rgba(245, 158, 11, 0.08),
    0 4px 16px rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
}
body.light-theme .hc-dn:hover {
  box-shadow: 
    0 2px 6px rgba(245, 158, 11, 0.15),
    0 12px 32px rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
}

/* DARK MODE — accent bars look great on dark bg already,
 * but add subtle border color match for consistency */
body:not(.light-theme) .hc-gw { border-color: rgba(45, 212, 191, 0.25) !important; }
body:not(.light-theme) .hc-ws { border-color: rgba(96, 165, 250, 0.25) !important; }
body:not(.light-theme) .hc-sw { border-color: rgba(167, 139, 250, 0.25) !important; }
body:not(.light-theme) .hc-wd { border-color: rgba(56, 189, 248, 0.25) !important; }
body:not(.light-theme) .hc-dn { border-color: rgba(251, 191, 36, 0.25) !important; }

body:not(.light-theme) .hc-gw:hover { border-color: rgba(45, 212, 191, 0.6) !important; box-shadow: 0 12px 32px rgba(13, 148, 136, 0.2) !important; }
body:not(.light-theme) .hc-ws:hover { border-color: rgba(96, 165, 250, 0.6) !important; box-shadow: 0 12px 32px rgba(37, 99, 235, 0.2) !important; }
body:not(.light-theme) .hc-sw:hover { border-color: rgba(167, 139, 250, 0.6) !important; box-shadow: 0 12px 32px rgba(124, 58, 237, 0.2) !important; }
body:not(.light-theme) .hc-wd:hover { border-color: rgba(56, 189, 248, 0.6) !important; box-shadow: 0 12px 32px rgba(14, 165, 233, 0.2) !important; }
body:not(.light-theme) .hc-dn:hover { border-color: rgba(251, 191, 36, 0.6) !important; box-shadow: 0 12px 32px rgba(245, 158, 11, 0.2) !important; }


/* ===== Extracted inline style block 05 ===== */
/* ═════════════════════════════════════════════════════
 * iter-40 ter: 'How the network works' grid — FORCE WIDE CARDS
 * Overrides any inherited max-width from .hub-2col or other rules
 * ═════════════════════════════════════════════════════ */

.hub-grid-network {
  max-width: 1020px !important;
}

/* Force cards in this specific grid to fill their column — no inherited max-width */
.hub-grid-network > .hub-card {
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
  flex: 0 0 auto !important;  /* defeat any flex-basis inherited rules */
  padding: 28px 32px !important;
}

/* Icon and typography sizing for this section */
.hub-grid-network > .hub-card .hub-icon {
  width: 60px !important;
  height: 60px !important;
  font-size: 28px !important;
  border-radius: 14px !important;
}

.hub-grid-network > .hub-card h2 {
  font-size: 22px !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}

.hub-grid-network > .hub-card .hub-desc {
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin-bottom: 0 !important;
}

/* Mobile: stack to single column */
@media (max-width: 820px) {
  .hub-grid-network {
    grid-template-columns: 1fr !important;
  }
}


/* 'Why MAGNET?' grid — same width/centering treatment as hub-grid-network */
.hub-grid-why {
  max-width: 1020px !important;
}
.hub-grid-why > .hub-card {
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  padding: 28px 32px !important;
}
.hub-grid-why > .hub-card .hub-icon {
  width: 68px !important;
  height: 68px !important;
  font-size: 34px !important;
  border-radius: 16px !important;
}
.hub-grid-why > .hub-card h2 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}
.hub-grid-why > .hub-card .hub-desc {
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 820px) {
  .hub-grid-why {
    grid-template-columns: 1fr !important;
  }
}

/* 'What We Offer' grid — mirrors hub-grid-why */
.hub-grid-offer {
  max-width: 1020px !important;
}
.hub-grid-offer > .hub-card {
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  padding: 28px 32px !important;
}
.hub-grid-offer > .hub-card .hub-icon {
  width: 68px !important;
  height: 68px !important;
  font-size: 34px !important;
  border-radius: 16px !important;
}
.hub-grid-offer > .hub-card h2 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}
.hub-grid-offer > .hub-card .hub-desc {
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin-bottom: 14px !important;
}
@media (max-width: 820px) {
  .hub-grid-offer {
    grid-template-columns: 1fr !important;
  }
}


/* ===== Extracted inline style block 06 ===== */
/* ═══════════════════════════════════════════════════════════════
 * iter-41: Typography + visual hierarchy rebalance
 * Bumps smallest/densest elements to be scannable.
 * Applies in both light and dark modes.
 * ═══════════════════════════════════════════════════════════════ */

/* ─── 1. LOGO — make it prominent ─────────────────────────── */
.brand-lockup {
  height: 50px !important;       /* v83: trim for nav fit */
  width: auto !important;
  min-width: 200px !important;    /* prevent flex compression */
  margin-top: 4px !important;
  object-fit: contain !important; /* preserve aspect ratio */
}
@media (max-width: 820px) {
  .brand-lockup { height: 56px !important; }
}
.topbar-in {
  height: 80px !important;        /* v83: tighter now logo is 50px */
}

/* ─── 2. EMOJI CENTERING — robust across all icon boxes ───── */
.hub-card .hub-icon,
.gw-card .gw-icon,
.aud-card .aud-icon,
.collab-item .ci-num {
  line-height: 1 !important;
  font-variant-emoji: emoji;
  text-align: center;
  /* Use flex for reliable centering across browsers */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Hub icon specific — emojis need slight downshift to appear centered */
.hub-card .hub-icon {
  /* Vertical nudge: emoji baseline sits ~4% above geometric center.
     Pushing down 2-3px makes the optical center match. */
  padding-top: 2px !important;
  box-sizing: border-box !important;
}

/* ─── 3. HUB ICONS — bigger, more visible emojis ──────────── */
.hub-card .hub-icon {
  width: 80px !important;          /* was 72 */
  height: 80px !important;
  font-size: 40px !important;      /* was 32 — bigger emoji */
  border-radius: 18px !important;
}
/* Aud-icon bumped too */
.aud-card .aud-icon {
  width: 76px !important;
  height: 76px !important;
  font-size: 38px !important;
}
/* Gw-icon (inline emoji for cards) */
.gw-icon {
  font-size: 44px !important;      /* was 36 */
  margin-bottom: 16px !important;
}
/* Collab-strip emoji */
.collab-item .ci-num {
  font-size: 42px !important;      /* was 28 — much bigger */
  margin-bottom: 6px !important;
}
.collab-item .ci-lbl {
  font-size: 15px !important;      /* was 14 */
  font-weight: 700 !important;
}
.collab-item .ci-desc {
  font-size: 13px !important;      /* was 13, keep */
  line-height: 1.5 !important;
}

/* ─── 4. CARD TEXT — bump sizes in 2-col grids ────────────── */
/* Override the old aggressive shrink rules that made things too small */
[style*="grid-template-columns:1fr 1fr"] > .hub-card .hub-sub,
.hub-grid-network > .hub-card .hub-sub {
  font-size: 15px !important;      /* was 12 */
  margin-bottom: 12px !important;
  font-weight: 600 !important;
}
[style*="grid-template-columns:1fr 1fr"] > .hub-card .hub-desc,
.hub-grid-network > .hub-card .hub-desc {
  font-size: 16px !important;      /* was 13 */
  line-height: 1.65 !important;
}
[style*="grid-template-columns:1fr 1fr"] > .hub-card h2,
.hub-grid-network > .hub-card h2 {
  font-size: 24px !important;      /* was 22 */
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}
/* Icon size in 2-col — bump up from the old 48/56 */
[style*="grid-template-columns:1fr 1fr"] > .hub-card .hub-icon,
.hub-grid-network > .hub-card .hub-icon {
  width: 68px !important;          /* was 48-60 */
  height: 68px !important;
  font-size: 34px !important;      /* was 24-28 */
  border-radius: 16px !important;
}

/* ─── 5. HUB-CAP PILLS — slightly bigger ──────────────────── */
.hub-card .hub-cap {
  font-size: 14px !important;      /* was 13 */
  padding: 6px 14px !important;    /* slightly taller */
}

/* ─── 6. TOPBAR NAV — stay readable ───────────────────────── */
.tnav a, .tnav .pdrop-trigger {
  font-size: 16px !important;      /* was 15 */
}
/* ─── v83: medium-desktop nav fit (1280 ≤ width ≤ 1480) ──────────
   At this width the full nav would overflow past the viewport.
   Tighten gap, font-size, and letter-spacing; keep all items visible. */
@media (min-width: 1025px) and (max-width: 1480px) {
  .tnav { gap: 12px !important; }
  .tnav a, .tnav .pdrop-trigger {
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
  }
  .topbar-in { padding: 0 24px !important; }
}


/* ─── 7. EYEBROW LABELS — consistent sizing ───────────────── */
.eyebrow {
  font-size: 12px !important;      /* was 11 */
  letter-spacing: 1.2px !important;
}

/* ─── 8. BODY — slightly more generous on desktop ─────────── */
@media (min-width: 901px) {
  body { font-size: 18px; }        /* confirm, was already 18 */
  p { line-height: 1.7; }
}

/* ─── 9. DOUBLE-CHECK: specific 'Publish a Model' card ───── */
/* This card sits alone in a content-section (not a grid) — make sure
   its icon uses the big 80×80 treatment with proper centering */
.content-section > .hub-card .hub-icon {
  width: 80px !important;
  height: 80px !important;
  font-size: 40px !important;
  /* Override any inherited 2-col shrinks by resetting explicitly */
}


/* ===== Extracted inline style block 07 ===== */
/* ═══════════════════════════════════════════════════════════════
 * iter-42: AI assistant cards — prevent button overflow
 * ═══════════════════════════════════════════════════════════════ */
.ai-cards-grid .btn-g,
.ai-cards-grid span[style*="Coming Soon"] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.2px !important;
}

/* Make card padding more efficient on narrow cards */
@media (max-width: 500px) {
  .ai-cards-grid > div {
    padding: 20px !important;
  }
  .ai-cards-grid .btn-g {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}


/* ===== Extracted inline style block 08 ===== */
/* ═══════════════════════════════════════════════════════════════
 * iter-43: Icon visibility — subtle ring + shadow for separation
 * Ensures icons stand out from card backgrounds in both themes
 * ═══════════════════════════════════════════════════════════════ */

/* Dark theme — subtle white inner glow + dark outer shadow */
.platform-icon,
.hub-card .hub-icon,
.aud-card .aud-icon,
.gw-card .gw-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Light theme — darker outline for definition */
body.light-theme .platform-icon,
body.light-theme .hub-card .hub-icon,
body.light-theme .aud-card .aud-icon,
body.light-theme .gw-card .gw-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 10px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}

/* .gw-icon is inline not a box — give it a text-shadow for visibility */
.gw-card .gw-icon {
  box-shadow: none !important;  /* override above; it's inline, no bg */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
body.light-theme .gw-card .gw-icon {
  text-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}


/* ===== Extracted inline style block 09 ===== */
/* ═══════════════════════════════════════════════════════════════
 * iter-44: Hero search box — decorative inset cyan outline
 * Double-border effect using layered inset box-shadows:
 *  - Outer 2px teal stroke (the element's border)
 *  - Pale band 0-9px inside (filler)
 *  - Cyan line 9-12px inside (the visible decorative ring, 3px thick)
 *  - Content area from 12px inward
 *
 * Shadows stack top-to-bottom: first layer on top covers later layers where
 * they overlap, so the cyan line appears as a 3px ring at 9-12px from the edge.
 * ═══════════════════════════════════════════════════════════════ */

.m4w-search-btn-hero {
  position: relative !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%) !important;
  border: 2px solid rgba(13, 148, 136, 0.5) !important;
  border-radius: 20px !important;
  /* Bumped padding so text has room inside the ~12px ring */
  padding: 24px 32px !important;
  box-shadow:
    /* Outer pale band — covers 0 to 9px from edge */
    inset 0 0 0 9px #ffffff,
    /* Cyan decorative line — visible from 9 to 12px (3px thick) */
    inset 0 0 0 12px rgba(6, 182, 212, 0.55),
    /* Outer depth shadow */
    0 8px 24px rgba(13, 148, 136, 0.14),
    0 2px 6px rgba(13, 148, 136, 0.07) !important;
}

.m4w-search-btn-hero:hover,
.m4w-search-btn-hero:focus-visible {
  border-color: rgba(13, 148, 136, 0.8) !important;
  background: linear-gradient(135deg, #ffffff 0%, #ccfbf1 100%) !important;
  box-shadow:
    /* Pale band transitions to slightly brighter cyan */
    inset 0 0 0 9px #ffffff,
    /* Cyan line intensifies — brighter AND thicker on hover (9-13px = 4px thick) */
    inset 0 0 0 13px rgba(6, 182, 212, 0.75),
    /* Stronger outer glow */
    0 12px 36px rgba(13, 148, 136, 0.22),
    0 4px 10px rgba(13, 148, 136, 0.1),
    /* Outer focus-style halo */
    0 0 0 5px rgba(13, 148, 136, 0.1) !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

/* Tighten text padding-left offset so icon and text sit comfortably inside the inset line */
.m4w-search-btn-hero svg {
  stroke: #0d9488;
}
.m4w-search-btn-hero:hover svg {
  stroke: #0891b2;
}

/* Ensure text stays inside the decorative ring comfortably */
.m4w-search-btn-hero .m4w-search-btn-text {
  font-size: 17px !important;
  color: #64748b !important;
}
.m4w-search-btn-hero:hover .m4w-search-btn-text {
  color: #0e7490 !important;
}
.m4w-search-btn-hero .m4w-search-btn-kbd {
  font-size: 12px !important;
  padding: 5px 11px !important;
  background: rgba(13, 148, 136, 0.12) !important;
  color: #0d9488 !important;
  border: 1px solid rgba(13, 148, 136, 0.25) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}


/* ===== Extracted inline style block 10 ===== */
/* ═══════════════════════════════════════════════════════════════
 * iter-45: Hero search — example-keyword chips
 * ═══════════════════════════════════════════════════════════════ */
.m4w-hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  background: rgba(13, 148, 136, 0.08);
  color: #0e7490;
  border: 1px solid rgba(13, 148, 136, 0.25);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.3;
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.m4w-hero-chip::before {
  content: "🔍";
  margin-right: 6px;
  font-size: 11px;
  opacity: 0.7;
}
.m4w-hero-chip:hover,
.m4w-hero-chip:focus-visible {
  background: rgba(13, 148, 136, 0.18);
  border-color: rgba(13, 148, 136, 0.55);
  color: #134e4a;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(13, 148, 136, 0.15);
  outline: none;
}
.m4w-hero-chip:hover::before {
  opacity: 1;
}
.m4w-hero-chip:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.1);
}


/* ===== Extracted inline style block 11 ===== */
.sh .s-cat{max-width:960px;margin:0 auto;padding:40px 36px 10px}
.sh .s-cat p{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);opacity:0.7}
.sh .s-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:960px;margin:0 auto;padding:0 36px 20px}
.sh .s-grid.s-1col{grid-template-columns:1fr;max-width:500px}
.sh .s-card{background:var(--card-bg);border:1px solid var(--bdr);border-radius:14px;padding:28px 30px;text-decoration:none;color:var(--t1);cursor:pointer;position:relative;overflow:hidden;transition:all .35s;display:flex;flex-direction:column}
.sh .s-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s;background:linear-gradient(90deg,var(--cy2),var(--teal))}
.sh .s-card:hover{border-color:var(--bdr2);transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,0.3);background:linear-gradient(170deg,#102844 0%,#0c1e33 100%)}
.sh .s-card:hover::before{opacity:1}
.sh .s-card h3{font-family:var(--se);font-size:28px;font-weight:400;color:var(--t1);line-height:1.2;margin-bottom:5px}
.sh .s-card h3 em{font-style:italic;color:var(--cyan)}
.sh .s-card h3 span.ico{margin-right:8px;font-style:normal}
.sh .s-card .s-tag{font-size:16px;color:var(--cyan);font-weight:600;margin-bottom:8px}
.sh .s-card .s-desc{font-size:16px;color:var(--t3);line-height:1.6;margin-bottom:12px}
.sh .s-card .s-caps{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.sh .s-card .s-cap{font-size:11px;padding:3px 9px;border-radius:5px;background:rgba(var(--cyan-rgb,142,227,255),0.06);border:1px solid var(--bdr);color:var(--t3);font-weight:600;white-space:nowrap}
.sh .s-card .s-go{font-size:16px;font-weight:700;color:var(--cyan);margin-top:auto;padding-top:10px}
.sh .s-card .s-flag{display:inline-block;padding:4px 12px;border-radius:5px;font-size:13px;font-weight:700;background:rgba(var(--cyan-rgb,142,227,255),0.1);color:var(--cyan);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
@media(max-width:768px){
  .sh .s-grid{grid-template-columns:1fr !important}
  .sh .s-grid.s-1col{max-width:100%}
}


/* ═══════════════════════════════════════════════════════════════════
   ── AI SIGNATURE DECORATION ── 2026-04
   A coordinated visual system for MAGNET AI entry points and modal.
   Signals: "this is a signature capability", not just a button.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Sparkle animation used for 🤖 icons on Ask-AI buttons ─── */
@keyframes aiSparkle {
  0%, 100% { transform: scale(1)   rotate(0deg);   filter: drop-shadow(0 0 0 rgba(34,211,238,0)); }
  25%      { transform: scale(1.08) rotate(-6deg); filter: drop-shadow(0 0 6px rgba(34,211,238,0.55)); }
  50%      { transform: scale(1.12) rotate(0deg);  filter: drop-shadow(0 0 10px rgba(34,211,238,0.7)); }
  75%      { transform: scale(1.08) rotate(6deg);  filter: drop-shadow(0 0 6px rgba(34,211,238,0.55)); }
}
@keyframes aiGlowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.18), 0 4px 14px rgba(0,0,0,0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(34,211,238,0), 0 6px 22px rgba(34,211,238,0.35); }
}
@keyframes aiShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── "Ask X AI" ghost buttons — elevate them with a gradient ring ─── */
/* These are existing .btn-g.ghost buttons that have onclick="openAiChat(...)".
   We target them via CSS attribute-selectors so no HTML changes are needed. */
.btn-g[onclick*="openAiChat"] {
  position: relative;
  border: 1px solid rgba(34,211,238,0.35) !important;
  background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(13,148,136,0.05)) !important;
  color: var(--cyan) !important;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
}
.btn-g[onclick*="openAiChat"]:hover {
  transform: translateY(-1px);
  border-color: var(--cyan) !important;
  background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(13,148,136,0.10)) !important;
  box-shadow: 0 8px 24px rgba(34,211,238,0.25), 0 0 0 3px rgba(34,211,238,0.08);
}
.btn-g[onclick*="openAiChat"]:active { transform: translateY(0); }

/* Decorate the 🤖 emoji inside these buttons (first character of text).
   We add a pseudo-element sparkle on hover for extra magic. */
.btn-g[onclick*="openAiChat"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34,211,238,0.6), rgba(13,148,136,0.3), rgba(34,211,238,0.6));
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.btn-g[onclick*="openAiChat"]:hover::before {
  opacity: 1;
  animation: aiShimmer 2.2s linear infinite;
}

/* ─── AI strip chips (under 'Chat with the Platform Experts') ─── */
/* Give them the same sparkle treatment on hover */
.ai-chip { cursor: pointer !important; }
.ai-chip:hover span:first-child { animation: aiSparkle 1.2s ease-in-out infinite; }

/* ─── AI MODAL — upgraded header with gradient accent bar ─── */
.ai-panel { position: relative; }
.ai-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(34,211,238,0) 0%,
    rgba(34,211,238,0.9) 25%,
    rgba(13,148,136,1) 50%,
    rgba(34,211,238,0.9) 75%,
    rgba(34,211,238,0) 100%);
  background-size: 200% 100%;
  animation: aiShimmer 4s linear infinite;
  z-index: 1;
  pointer-events: none;
}

/* Header — tighter, more app-like, with live-indicator dot before platform badge */
.ai-hdr h3 { letter-spacing: -0.01em; }
.ai-hdr h3::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  margin-right: 10px;
  vertical-align: middle;
  animation: pulse-live 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Badge (the "Powered by Azure AI" pill) — tighten */
.ai-hdr .ai-badge {
  background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(13,148,136,0.10));
  border: 1px solid rgba(34,211,238,0.25);
}

/* Input focus: add subtle outer glow */
.ai-foot textarea:focus {
  box-shadow: 0 0 0 3px rgba(34,211,238,0.12), 0 0 18px rgba(34,211,238,0.08);
}

/* Send button — add a subtle idle pulse only when enabled */
.ai-send:not(:disabled) {
  animation: aiGlowPulse 2.8s ease-in-out infinite;
}
.ai-send:not(:disabled):hover { animation: none; } /* hover takes over */

/* Modal footer disclaimer bar */
.ai-disclaimer {
  padding: 10px 24px;
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(142,227,255,0.08);
  font-size: 11.5px;
  color: var(--t3);
  font-family: var(--sa);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}
.ai-disclaimer::before {
  content: "⚡";
  color: var(--cyan);
  font-size: 13px;
  flex-shrink: 0;
}

/* ─── Light theme variants ─── */
body.light-theme .btn-g[onclick*="openAiChat"] {
  background: linear-gradient(135deg, rgba(13,148,136,0.08), rgba(34,211,238,0.04)) !important;
  color: #0d9488 !important;
  border-color: rgba(13,148,136,0.35) !important;
}
body.light-theme .btn-g[onclick*="openAiChat"]:hover {
  background: linear-gradient(135deg, rgba(13,148,136,0.14), rgba(34,211,238,0.08)) !important;
  border-color: #0d9488 !important;
  box-shadow: 0 8px 24px rgba(13,148,136,0.22), 0 0 0 3px rgba(13,148,136,0.08);
}
body.light-theme .ai-disclaimer {
  background: rgba(0,0,0,0.03);
  border-top-color: rgba(0,0,0,0.08);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .btn-g[onclick*="openAiChat"]:hover::before,
  .ai-panel::before,
  .ai-chip:hover span:first-child,
  .ai-send:not(:disabled),
  .ai-hdr h3::before {
    animation: none !important;
  }
}

/* ── STICKY-FOOTER FIX ── 2026-04 */
/* Ensures the global footer stays pinned to the viewport bottom on short
   template pages (e.g., tpl-forum). Without this the footer floats when
   template content is less than viewport height. */
html { min-height: 100vh; }
body { min-height: 100vh; display: flex; flex-direction: column; }
#page { flex: 1 0 auto; }
footer.footer { flex-shrink: 0; margin-top: auto; }