*,*::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:transparent}
/* [m4w-change 2026-05-14: sub-hero-flatten]
   The radial cyan overlay (rgba(34,211,238,0.05) ellipse) created a
   visible edge where the overlay faded out, neither committing to a
   bold gradient statement nor to a flat surface — it sat in an awkward
   middle ground. Drop it so the sub-hero stays flat #f5f9fb, matching
   the body and the 5 L2 docs pages. Hero-bg div is kept (still
   referenced by HTML) but now renders transparent. */
.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;
  }
}



/* ═══════════════════════════════════════════════════════════════
 * 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;
}



/* 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; }
}




/* ═══════════════════════════════════════════════════════════════
 * 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; }





/* ═════════════════════════════════════════════════════
 * 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;
  }
}




/* ═══════════════════════════════════════════════════════════════
 * 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 */
}



/* ═══════════════════════════════════════════════════════════════
 * 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;
  }
}



/* ═══════════════════════════════════════════════════════════════
 * 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);
}



/* ═══════════════════════════════════════════════════════════════
 * 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;
}



/* ═══════════════════════════════════════════════════════════════
 * 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);
}


body{min-height:100vh;}
.m4w-doc-standalone{max-width:1280px;margin:0 auto;padding:28px 24px 72px;min-width:0;width:100%;box-sizing:border-box;}
/* [m4w-change 2026-05-14: doc-standalone-phone-overflow-fix]
   body uses display:flex, making .m4w-doc-standalone a flex item that
   sizes to its content's intrinsic min-width by default — at ~992px on
   any reasonably-content-heavy page. Adding min-width:0 lets the flex
   item shrink below its content's natural width, and width:100% +
   box-sizing:border-box ensure it fills the viewport-sized body
   container. Restores responsive shrinkage on phone widths. */

/* [m4w-change 2026-05-14: docs-cta-strip-phone-breathing-room]
   The top CTA strip on docs pages uses inline-block buttons with
   margin-right:8px and text-align:center. On desktop they fit on one
   row with horizontal gaps. On phone they wrap onto separate lines
   but have no vertical gap, stacking directly on top of each other.
   Add bottom margin to .btn-g siblings inside .m4w-doc-standalone so
   wrapped buttons get breathing room. On desktop the bottom margin
   only affects the (single) row, which is invisible since only one
   row exists. */
.m4w-doc-standalone .btn-g{margin-bottom:8px;}
.m4w-doc-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 28px;}
.m4w-doc-topbar a{color:var(--cyan,#06b6d4);text-decoration:none;font-weight:800;}
.m4w-doc-topbar .crumb{color:var(--t3,#94a3b8);font-size:14px;}
.m4w-doc-note{margin:24px auto;max-width:860px;padding:16px 20px;border:1px solid rgba(34,211,238,.18);border-radius:18px;background:rgba(34,211,238,.06);color:var(--t2,#cbd5e1);}