/* ==========================
   BASE
   ========================== */
body { margin:0; font-family: system-ui, Arial; background:#0b1220; color:#eaf0ff; }
a { color: inherit; text-decoration:none; }

/* Left-rail container (was centered). */
.container{
  max-width: none;
  margin: 0;
  padding: 24px 16px;  /* match header/breadcrumb rail */
}

/* ==========================
   APP: TOP NAV (My ZONAL)
   ========================== */

.appTopNavInner{
  padding: 12px 16px; /* slightly tighter than marketing */
}

.appBrand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.appBrandLogo{
  width: 25px;
  height: 25px;
}

.appBrandWord{
  color: #ffffff;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: 12px;
  text-transform: uppercase;
}

.appTopSpacer{
  flex: 1;
}

.appTopRight{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon button (unchanged bevel language) */
.appIconBtn{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.appIconBtn:hover{
  background: rgba(255,255,255,.07);
}

/* === NEW: SVG icon styling (Lucide) === */
.appIcon{
  width: 16px;
  height: 16px;
  stroke-width: 2;
  color: rgba(255,255,255,.85);
}

.appIconBtn:hover .appIcon{
  color: #ffffff;
}

/* Fallback dot (still works if icon lib missing) */
.appIconDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
}

/* Username */
.appUserName{
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  padding-left: 6px;
  white-space: nowrap;
}


/* ==========================
   APP: DROPDOWNS
   ========================== */

.appDrop{
  position: relative;
}

.appDropMenu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;

  /* match bevel/dark language */
  background: rgba(10, 16, 28, .98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);

  padding: 8px;
  display: none;
  z-index: 100;
}

.appDrop.is-open .appDropMenu{
  display: block;
}

.appDropItem{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}

.appDropItem:hover{
  background: rgba(255,255,255,.06);
}

.appDropSep{
  height: 1px;
  margin: 6px 4px;
  background: rgba(255,255,255,.12);
}


/* ==========================
   APP: SIDE NAV (My ZONAL)
   ========================== */

.appSideNav{
  padding: 14px 10px;
  font-size: 12px;
}

.appSideSection{
  margin-bottom: 18px;
}

/* Top-level headers: INDICATORS, DATA WAREHOUSE, TRADE ENGINE */
.appSideTop{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 6px;
  color: #ffffff;
}

/* Group labels: Tokens/Symbols, Query Engine, Settings, LIVE Trading, etc */
.appSideGroupLabel{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  margin: 6px 0 4px;
  color: rgba(255,255,255,.85);
}

/* Clickable links */
.appSideLink{
  display: flex;            /* FORCE each item onto its own line */
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 3px 0;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}

.appSideLink:hover{
  color: #ffffff;
}

/* Indentation */
.appSideIndent1{ padding-left: 14px; }
.appSideIndent2{ padding-left: 28px; }

/* Active highlight */
.appSideLink.active,
.appSideTop.active{
  color: #ffffff;
  font-weight: 800;
}

/* Icons */
.appSideIcon{
  width: 14px;
  height: 14px;
  stroke-width: 2;
  color: rgba(255,255,255,.75);
}

.appSideLink:hover .appSideIcon,
.appSideTop:hover .appSideIcon{
  color: #ffffff;
}


/* ==========================
   APP: SIDE NAV – INVERTED PALETTE
   ========================== */

.appSideNav{
  /* slightly darker gray (per request: "more gray") */
  background: #e7e9ee;
  color: #0b1220;
  border-right: 1px solid rgba(0,0,0,.08);
}

/* Top headers */
.appSideTop{
  color: #0b1220;
}

/* Group labels */
.appSideGroupLabel{
  color: rgba(11,18,32,.75);
}

/* Links */
.appSideLink{
  color: rgba(11,18,32,.85);
}

.appSideLink:hover{
  color: #0b1220;
  background: rgba(11,18,32,.06);
  border-radius: 6px;
}

/* Active item */
.appSideLink.active,
.appSideTop.active{
  color: #0b1220;
  font-weight: 800;
}

/* Icons */
.appSideIcon{
  color: rgba(11,18,32,.75);
}

.appSideLink:hover .appSideIcon,
.appSideTop:hover .appSideIcon{
  color: #0b1220;
}


/* ==========================
   APP: PAGE LAYOUT (main content)
   ========================== */

/* main canvas uses same background as the side-nav */
.appMain{
  background: #e7e9ee; /* match appSideNav */
}

/* inner content padding */
.appMainInner{
  padding: 18px 18px 24px;
  min-height: calc(100vh - 80px); /* approximate header height */
}

/* Header text */
.appPageHeader{
  margin-bottom: 12px;
}

.appPageTitle{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(11,18,32,.92);
}

/* ==========================
   APP: PAGE MENU BAR
   - same background as top-nav
   - ~50% top-nav height
   - indented + beveled
   ========================== */

.appPageMenuBar{
  margin: 0 0 14px 0;
  padding: 10px 12px;              /* half-height feel */
  border-radius: 14px;

  /* match your topNav "dark" language */
  background: rgba(11,18,32,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);

  /* indent from edges like Shopify */
  max-width: 100%;
}

.appPageMenuInner{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Menu items (placeholder tabs) */
.appPageMenuItem{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.80);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: default;
}

.appPageMenuItem.is-active{
  color: #0b1220;
  background: rgba(255,255,255,.90);
}

.appPageMenuItem:not(.is-active):hover{
  color: #ffffff;
  background: rgba(255,255,255,.08);
}

/* ==========================
   APP: PAGE RESULTS PANEL
   - match public panel tone
   - indented + beveled
   ========================== */

.appPageResults{
  background: #f7f9fc; /* match your public-side panel background */
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 38px rgba(0,0,0,.12);
  overflow: hidden;
}

.appPageResultsInner{
  padding: 18px;
}


/* ==========================
   APP: GRID (rail + main)
   ========================== */

.appShellGrid{
  display: grid;
  grid-template-columns: 280px 1fr; /* rail width + main */
  min-height: calc(100vh - 72px);   /* header height-ish; adjust if needed */
}

/* Left rail column */
.appRail{
  background: #e7e9ee; /* match appSideNav */
  border-right: 1px solid rgba(0,0,0,.08);
  overflow: auto;
}

/* Make sure side nav fills/behaves as a block */
.appRail .appSideNav{
  width: 100%;
  height: 100%;
}

/* Main column */
.appMain{
  background: #e7e9ee; /* match appSideNav */
  overflow: auto;
}

@media (max-width: 900px){
  .appShellGrid{
    grid-template-columns: 1fr;
  }
  .appRail{
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
}



/* ==========================
   PUBLIC: TOP NAV
   ========================== */
.topNav{
  position: sticky;
  top: 0;
  z-index: 50;

  /* Match body background */
  background: inherit;

  /* Remove glass look */
  backdrop-filter: none;

  /* Keep subtle separation */
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Left-align header rail */
.topNavInner{
  max-width: none;     /* remove center constraint */
  margin: 0;           /* remove auto-centering */
  padding: 14px 16px;  /* match .container rail */
  display: flex;
  align-items: center;
  gap: 18px;
}

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

/* Larger ZONAL logo */
.brandLogo{
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Slightly smaller on mobile */
@media (max-width: 900px){
  .brandLogo{
    width: 75px;
    height: 75px;
  }
}

.brandText{
  font-weight: 900;
  letter-spacing: .06em;
  color: #0b1a2f;
}

/* Top-level menu */
.topMenu{
  display:flex;
  align-items:center;
  gap: 14px;
  flex: 1;
  justify-content: center; /* mobile/legacy default; overridden on desktop below */
}

/* Desktop: left-align menu and keep CTA on right */
@media (min-width: 901px){
  .topMenu{
    justify-content: flex-start; /* instead of center */
    margin-left: 24px;          /* space from logo */
  }
}

.topItem{ position: relative; }

.topLink{
  display:flex; align-items:center; gap:6px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
}
.topLink.active{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.25);
  color: #ffffff;
}
.chev{ font-size: 12px; opacity: .6; margin-top: -1px; }

.topCta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width: 140px;
}

/* Makes Get Started sit inline with nav links */
.topCta{
  min-width: auto;   /* remove forced width */
  margin-left: 8px;  /* small gap after last label */
}

.topCta .btn{
  padding: 8px 12px;     /* match nav height */
  font-size: 12px;
  letter-spacing: .06em;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  border:1px solid rgba(255,255,255,.14);
}
.btn.primary{
  background: linear-gradient(90deg, rgba(255,180,0,1), rgba(255,120,0,1));
  color: #0b1a2f;
  border: none;
  box-shadow: 0 8px 20px rgba(255,140,0,.22);
}
.btn.primary:hover{ filter: brightness(1.02); }

/* Emphasize Get Started CTA in top nav */
.topMenu .topCta .btn.primary{
  padding: 12px 18px;     /* bigger click target */
  font-size: 14px;
  letter-spacing: .08em;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(255,140,0,.35);
}

/* ==========================
   DROPDOWN (Desktop hover)
   ========================== */
.drop{
  position:absolute;

  /* IMPORTANT: anchor dropdown under the hovered label */
  left: 0;
  transform: none;

  top: 100%;
  margin-top: 6px;   /* visual spacing without breaking hover */
  z-index: 999;      /* keep dropdown above page */

  min-width: 520px;
  max-width: 720px;
  padding: 10px;
  border-radius: 16px;

  /* MATCH TOP NAV BACKGROUND */
  background: linear-gradient(
    180deg,
    rgba(10,18,32,0.98),
    rgba(10,18,32,0.92)
  );

  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dropInner{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dropCol{
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.02);
}

.dropTitle{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: .75;
}
.dropTitleLink{ text-decoration:none; color: rgba(11,26,47,.9); }

.dropLink{
  display:block;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: inherit;
  font-weight: 700;
  font-size: 13px;
}
.dropLink.active{
  background: rgba(61,179,255,.14);
  border: 1px solid rgba(61,179,255,.22);
  color: rgba(11,26,47,1);
}

/* .topItem.hasDrop:hover .drop{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
} */

/* Hover styles (keep white text on dark nav) */
.topLink:hover{
  background: rgba(255,255,255,.08);
  color: #ffffff;
}
.dropLink:hover{
  background: rgba(255,255,255,.06);
  color: inherit;
}

/* Desktop-only: keep dropdown anchored (already anchored in .drop above) */
@media (min-width: 901px){
  .topItem{ position: relative; }
  .topItem .drop{
    left: 0;
    transform: none;
    top: calc(100% + 6px);
    margin-top: 0;
  }
}

/* ==========================
   MOBILE NAV (Tap Accordion)
   ========================== */

/* Toggle button (hamburger) */
.navToggle{
  display:none;
  margin-left:auto;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.navToggle:hover{ background: rgba(255,255,255,.07); }

.navToggleBars{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  position:relative;
  margin:0 auto;
  opacity:.9;
}
.navToggleBars:before,
.navToggleBars:after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#fff;
}
.navToggleBars:before{ top:-6px; }
.navToggleBars:after{ top:6px; }

/* Top row inside each item (lets us add a mobile “+” toggle) */
.topRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* The + toggle (only visible on mobile) */
.dropToggle{
  display:none;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:#fff;
  font-weight:900;
  line-height:1;
}
.dropToggle:hover{ background: rgba(255,255,255,.07); }

/* ---- Mobile layout ---- */
@media (max-width: 900px){
  /* show hamburger */
  .navToggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* stack header content */
  .topNavInner{
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px; /* keep slightly tighter on mobile */
  }

  /* collapse menu by default */
  .topMenu{
    display:none;              /* overridden by .topNav.is-open */
    width:100%;
    flex-direction:column;
    justify-content:flex-start;
    gap: 6px;
    padding: 6px 0 10px;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-left: 0; /* ensure no desktop offset leaks in */
  }
  .topNav.is-open .topMenu{ display:flex; }

  /* CTA full width under menu */
  .topCta{
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    margin-left: 0;
  }

  /* top links full width */
  .topLink{
    width:100%;
    padding: 12px 12px;
    border-radius: 14px;
  }

  /* show accordion toggles */
  .dropToggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* dropdown becomes an inline accordion panel */
  .drop{
    position: static;
    left: auto;
    transform: none;
    top: auto;
    min-width: 0;
    width: 100%;
    max-width: none;

    /* always “visible style”, but collapsed by height */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: none;

    max-height: 0;
    overflow: hidden;
    transition: max-height 240ms ease;
  }

  /* expand when tapped */
  .topItem.expanded .drop{
    max-height: 1200px; /* large enough for long menus */
    padding: 10px;
    margin-top: 6px;
  }

  /* dropdown content: single column on mobile */
  .dropInner{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* hover is unreliable on touch */
  .topItem.hasDrop:hover .drop{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ==========================
   HERO / LANDING
   ========================== */
.hero { padding: 48px 0 24px; }
.hero h1 { font-size: 40px; margin:0 0 8px; }
.sub { opacity:.85; margin:0 0 32px; }
.tiles { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin: 18px 0 30px; }
.tile { padding:18px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); text-align:center; }
.tile:hover { background: rgba(255,255,255,.06); }

/* ==========================
   DOCS LAYOUT (Side Nav + Page Body)
   ========================== */
/* Left-align docs shell (was centered via max-width + margin:auto). */
.docsShell{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  max-width: none;
  margin: 0;

  /* FIX HEADER GAP: no top gutter */
  padding: 0 16px 0;
}

/* Side rail card */
.docsRail{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,.02);
  height: fit-content;
  position: sticky;
  top: 74px;
}

/* ✅ BEVELED PAGE BODY PANEL (main content column) */
.docsMain{
  /* keep existing spacing logic, but turn it into a “panel” */
  padding: 22px 24px 28px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.96),
    rgba(245,248,255,0.98)
  );
  color: #0b1a2f;

  border-radius: 22px;

  /* bevel edge + lift */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 22px 50px rgba(3,10,30,0.45);

  /* subtle edge line so it reads on dark bg */
  border: 1px solid rgba(255,255,255,0.08);
}

/* If any pages still wrap content in main.page, keep it transparent so docsMain is the panel */
.docsMain main.page{
  background: transparent;
  color: inherit;
  min-height: auto;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---- Side Nav ---- */
.sideNav { display:flex; flex-direction:column; gap:10px; }
.sideTitle { font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; opacity:.9; margin-bottom:6px; }
.sideHint { opacity:.7; font-size:13px; line-height:1.4; }
.sideGroup { display:flex; flex-direction:column; gap:6px; padding: 8px 0; border-top:1px solid rgba(255,255,255,.06); }
.sideGroup:first-of-type { border-top: none; padding-top: 0; }
.sideGroupTitle { font-weight:700; opacity:.9; font-size:13px; margin: 4px 0 2px; }
.sideGroupTitleLink { opacity:.9; }
.sideGroupTitleLink:hover { opacity:1; }
.sideLink { font-size:14px; opacity:.82; padding: 8px 10px; border-radius:12px; }
.sideLink:hover { background: rgba(255,255,255,.06); opacity:1; }
.sideLink.active { background: rgba(61,179,255,.14); border: 1px solid rgba(61,179,255,.22); opacity:1; font-weight:700; }

/* Docs on small screens */
@media (max-width: 900px){
  .docsShell{
    grid-template-columns: 1fr;
    padding: 14px 14px 20px;
  }
  .docsRail{
    position: static;
    top: auto;
  }
  .docsMain{
    padding: 18px 16px 22px;
    border-radius: 18px;
  }
}

/* ==========================
   PUBLIC: PAGE DETAIL (pagedetail block)
   ========================== */

.pdWrap{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}

/* left list */
.pdList{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pdItem{
  text-align: left;
  border: 0;
  background: transparent;
  color: rgba(11,18,32,.86);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}

.pdItem:hover{
  background: rgba(11,18,32,.06);
}

.pdItem.is-active{
  background: rgba(11,18,32,.10);
  box-shadow: inset 0 0 0 1px rgba(11,18,32,.14);
}

/* right sliding panel */
.pdDetail{
  background: #f7f9fc; /* requested public panel tone */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 38px rgba(0,0,0,.12);
  overflow: hidden;

  /* collapsed by default */
  max-width: 0;
  opacity: 0;
  transform: translateX(-10px);

  transition: max-width 260ms ease, opacity 220ms ease, transform 260ms ease;
}

.pdWrap.is-open .pdDetail{
  max-width: 1200px; /* large enough to fully show */
  opacity: 1;
  transform: translateX(0);
}

/* inner */
.pdDetailInner{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Headline */
.pdHeadline{
  padding-left: 12px;   /* subtle inset */
  padding-top: 12px;    /* space from top of card */
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;            /* prevent extra collapse issues */
  color: rgba(11,18,32,.92);
}

/* --- Pagedetail layout: images + copy side-by-side --- */
.pdContentRow{
  padding: 0 12px 14px;            /* left inset + bottom padding */
  display: grid;
  grid-template-columns: 220px 1fr; /* images | text */
  gap: 16px;
  align-items: start;
}

/* Image column wrapper: STACK images (no clipping) */
.pdImageWrap{
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* remove the “single-frame” behavior that hid image #2 */
  border: 0;
  background: transparent;
  overflow: visible;
  margin: 0;
  padding: 0;
}

/* Each image gets its own framed tile */
.pdImage{
  width: 200px;
  height: 200px;
  object-fit: cover;
  display: block;

  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Text column */
.pdText{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(11,18,32,.80);
}

@media (max-width: 900px){
  .pdWrap{
    grid-template-columns: 1fr;
  }

  .pdDetail{
    max-width: 100%;
    opacity: 1;
    transform: none;
  }

  .pdContentRow{
    grid-template-columns: 1fr; /* stack image then text on mobile */
  }

  .pdImage{
    width: 100%;
    max-width: 260px; /* keep it from being enormous */
    height: auto;
    aspect-ratio: 1 / 1; /* keep square feel when width changes */
  }
}



/* ==========================
   FOOTER
   ========================== */
.footer{
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 0;
  padding: 28px 16px;               /* match rail padding */
  background: rgba(255,255,255,.02);
}

/* Keep footer content from stretching edge-to-edge */
.footerInner{
  max-width: 1100px;                /* prevents columns drifting apart */
  margin: 0 auto;
}

/* Tighter columns: size to content, not full 1fr spread */
.footGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 70px));
  justify-content: start;            /* critical: don't space to edges */
  gap: 18px;                         /* controlled spacing between columns */
}

.footTitle{
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .9;
}

.footLink{
  display: block;
  opacity: .85;
  padding: 5px 0;
}

.footLink:hover{
  opacity: 1;
}

/* Mobile: stack columns */
@media (max-width: 900px){
  .footer{
    padding: 22px 14px;
  }
  .footGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ==========================
   LEGACY NAV CLASSES (kept for safety)
   If you are no longer using these, you can delete.
   ========================== */
.logo { height: 34px; width:auto; }
.menu { display:flex; gap:16px; flex:1; }
.menuItem { position:relative; padding: 10px 6px; }
.menuItem > a { opacity:.9; }
.menuItem > a.active { opacity:1; font-weight:600; }
.dropdown { display:none; position:absolute; left:0; top:44px; background:#0f1b33; border:1px solid rgba(255,255,255,.08); padding:14px; border-radius:14px; min-width: 420px; box-shadow: 0 10px 40px rgba(0,0,0,.4); gap:18px; }
.menuItem:hover .dropdown { display:flex; }

/* ==================================
   SIDE NAV SETTINGS
   ================================== */

/* No vertical gap between groups */
.sideGroup {
  margin-bottom: 0;
}

/* All nav links */
.sideLink,
.sideGroupTitleLink {
  display: block;
  padding: 1px 6px;   /* almost no vertical padding */
  line-height: 1.05;
  margin: 0;
}

/* Group title wrapper */
.sideGroupTitle {
  margin: 2px 0 0 0;
}

/* Top overview spacing */
.sideGroup > .sideLink:first-child {
  margin-top: 0;
}

/* Container trim */
.sideNav {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ==================================
   PAGE SETTINGS
   ================================== */

/* If a page uses main.page outside docsMain, keep old behavior */
main.page {
  background: #ffffff;
  color: #111;
  min-height: auto;
}


/* Ensure sections inherit the white canvas */
main.page > section {
  background: transparent;
}

/* Align the page content top with the side-nav bevel start + page padding */
main.page {
  padding-top: 0px;
  padding-left: 28px;   /* little more breathing room */
  padding-right: 24px;
}

/* Remove gap above first page block */
main.page > section:first-child{
  margin-top: 0;
}

/* ---- Section Hero ---- */
main.page .sectionHero {
  margin-top: 0;
  padding-top: 0;
}
main.page .sectionHero h2 {
  margin-top: 0;
}

.sectionHeroImages {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.sectionHeroImage {
  max-width: 800px;
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}


/* ==================================
   WIREFRAME PAGE CONTENT (CTAs + 3 Images)
   Used by block type: pageContent
   ================================== */
.pageContent{
  margin-top: 8px;
}

.pageHeadline{
  font-size: 32px;
  line-height: 1.08;
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0b1a2f;
}

.pageSubheadline{
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 18px;
  color: rgba(11,26,47,.78);
}

.pageCopy{
  color: rgba(11,26,47,.86);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 18px;
}

/* Copy HTML styling support */
.pageCopy h3{
  margin: 22px 0 8px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 900;
  color: #0b1a2f;
}
.pageCopy p{
  margin: 0 0 14px;
}
.pageCopy ul{
  margin: 0 0 14px 18px;
}
.pageCopy li{
  margin: 0 0 8px;
}

/* CTAs row: three labels ABOVE the images */
.pageCtas{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 14px;
}

.pageCta{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(11,26,47,.14);
  background: rgba(11,26,47,.03);
  color: #0b1a2f;
  font-weight: 900;
  text-align:center;
}

.pageCta:hover{
  background: rgba(11,26,47,.06);
}

/* Images row: three across, clickable */
.pageImages{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}

.pageImage{
  display:block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(11,26,47,.14);
  background: #fff;
  box-shadow: 0 10px 26px rgba(11,26,47,.08);
}

.pageImage img{
  width: 100%;
  height: auto;
  display:block;
}

/* Responsive: stack to 1 column on mobile */
@media (max-width: 900px){
  main.page{
    padding-left: 16px;
    padding-right: 16px;
  }

  .pageCtas,
  .pageImages{
    grid-template-columns: 1fr;
  }

  .pageHeadline{
    font-size: 34px;
  }
}

/* ==================================
   SWAPPED HERO HEADLINE CLASS
   ================================== */
.sectionHeroHeadline{
  font-size: 28px;
  line-height: 1.12;
  font-weight: 700;              /* slightly less heavy */
  letter-spacing: -0.015em;     /* tighter, but not aggressive */
  color: #0b1a2f;

  /* subtle refinement */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ==================================
   PAGE MENU (Tabbed content blocks)
   Block type: pageMenu
   ================================== */

.pageMenu{
  margin-top: 8px;
}

/* Hero */
.pageMenuHero{
  margin-bottom: 14px;
}

/* You already added .herosub earlier, but here’s a richer default */
.herosub{
  opacity: .85;
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(11,26,47,.72);
}

/* Tabs bar */
.pageMenuTabs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
  gap: 8px;
  margin: 2px 0 14px;
  justify-content: start;
}

/* Beveled tab button */
.pageMenuTab{
  appearance: none;
  border: 1px solid rgba(11,26,47,.14);
  background: rgba(11,26,47,.03);
  color: #0b1a2f;

  font-weight: 800;          /* slightly less shouty */
  letter-spacing: .06em;
  font-size: 11px;           /* smaller text */
  text-transform: uppercase;

  padding: 8px 10px;         /* shorter + narrower */
  border-radius: 12px;       /* tighter pill */
  cursor: pointer;

  box-shadow: 0 8px 18px rgba(11,26,47,.05);
}

.pageMenuTab:hover{
  background: rgba(11,26,47,.06);
}

.pageMenuTab.is-active{
  background: linear-gradient(90deg, rgba(61,179,255,.18), rgba(105,255,200,.14));
  border: 1px solid rgba(61,179,255,.35);
  box-shadow: 0 14px 34px rgba(11,26,47,.10);
}

/* Panels */
.pageMenuPanels{
  border: 1px solid rgba(11,26,47,.10);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(11,26,47,.06);
  overflow: hidden;
}

.pageMenuPanel{
  display: none;
  padding: 18px 18px 16px;
}

.pageMenuPanel.is-active{
  display: block;
}

/* Copy (HTML allowed) */
.pageMenuCopy{
  color: rgba(11,26,47,.88);
  font-size: 15px;
  line-height: 1.75;
}

.pageMenuCopy h3{
  margin: 18px 0 8px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 900;
  color: #0b1a2f;
}

.pageMenuCopy p{ margin: 0 0 14px; }
.pageMenuCopy ul{ margin: 0 0 14px 18px; }
.pageMenuCopy li{ margin: 0 0 8px; }
.pageMenuCopy ol{ margin: 0 0 14px 18px; }

/* Images row (supports many images side-by-side) */
.pageMenuImages{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;      /* wraps to next line if needed */
  gap: 12px;
  align-items: center;
}

/* Individual clickable image tile */
.pageMenuImageLink{
  display: inline-flex;
  border-radius: 0;
  overflow: visible;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Image sizing */
.pageMenuImage{
  width: 100px;
  height: 100px;
  display: block;
  object-fit: cover;    /* prevents distortion */
}


/* CTA */
.pageMenuCtaRow{
  margin-top: 12px;
}

.pageMenuCta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 14px;
  border-radius: 18px;

  background: linear-gradient(90deg, #2f7cff, #38d2ff);
  color: #ffffff;

  border: 1px solid rgba(56,210,255,.6);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 26px rgba(47,124,255,.35);

  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;

  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.pageMenuCta:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 14px 34px rgba(47,124,255,.45);
}

.pageMenuMobileLabel{
  display:block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,26,47,.55);
  margin: 0 0 6px;
}

.pageMenuSelect{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,26,47,.14);
  background: #fff;
  color: #0b1a2f;
  font-weight: 800;
}

@media (max-width: 900px){
  .pageMenuTabs{
    display: none;
  }
  .pageMenuMobileSelect{
    display: block;
  }
  .pageMenuPanel{
    padding: 16px 14px 14px;
  }
}

/* ==================================
   IMAGE MODAL (600x600)
   ================================== */

.imgModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.imgModal.is-open{
  display: block;
}

.imgModalOverlay{
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 20, .62);
}

.imgModalWindow{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 600px;
  height: 600px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 28px);

  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(11,26,47,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  overflow: hidden;
}

.imgModalClose{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(11,26,47,.12);
  background: rgba(11,26,47,.04);
  cursor: pointer;
  font-weight: 900;
}

.imgModalClose:hover{
  background: rgba(11,26,47,.08);
}

.imgModalBody{
  height: calc(100% - 64px);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgModalImg{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(11,26,47,.10);
}

.imgModalFooter{
  height: 64px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid rgba(11,26,47,.10);
  background: rgba(11,26,47,.02);
}

.imgModalLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(11,26,47,.14);
  background: rgba(11,26,47,.03);
  color: #0b1a2f;
  font-weight: 900;
}

.imgModalLink:hover{
  background: rgba(11,26,47,.06);
}

/* ==================================
   PAGE MENU — BLUE TABS (ACTIVE)
   ================================== */

/* Default (inactive) */
.pageMenuTab{
  background: rgba(11, 26, 47, 0.08); /* darker soft gray-blue */
  color: #0b1a2f;
  border: 1px solid rgba(11,26,47,.22);
}

/* Hover */
.pageMenuTab:hover{
  background: rgba(61,179,255,.10);
}

/* Active: ZONAL blue */
.pageMenuTab.is-active{
  background: linear-gradient(90deg, #2f7cff, #38d2ff);
  color: #ffffff;
  border: 1px solid rgba(56,210,255,.6);
  box-shadow: 0 14px 34px rgba(47,124,255,.45);
}




/* ==========================
   HOMEPAGE (White canvas, no nav rails)
   ========================== */

/* When the homepage wrapper is present, hide global nav + kill dark gutters */
body:has(.homeRoot){
  background: #ffffff;
  color: #0b1a2f;
}

/* Hide global top-nav + footer on the homepage (per request: no top-nav / side-nav) */
body:has(.homeRoot) .topNav{ display:none; }
body:has(.homeRoot) .footer{ display:none; }

/* Remove the default left-rail padding on homepage */
body:has(.homeRoot) .container{
  padding: 0;
  margin: 0;
  max-width: none;
}

/* Ensure main.page doesn't add extra gutters on homepage */
body:has(.homeRoot) main.page{
  padding: 0;
  background: transparent;
  color: inherit;
}

.homeRoot{
  min-height: 100vh;
  background: #ffffff;
}

/* Shared section spacing */
.homeSection{
  padding: 18px 16px;
  display: flex;
  justify-content: center;
}

/* -------- Logo Section -------- */
.homeLogo{
  padding-top: 26px;
  padding-bottom: 18px;
}
.homeLogoImg{
  width: 300px;
  height: 300px;
  object-fit: contain; /* keeps aspect ratio */
}

/* -------- Menu Band -------- */
.homeMenuBand{
  width: 100%;
  background: #0b1220; /* same as your current body/top-nav tone */
}
.homeMenuInner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.homeMenuLink{
  color: #ffffff;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
  text-transform: uppercase;
  padding: 8px 6px;
  border-radius: 10px;
}
.homeMenuLink:hover{
  background: rgba(255,255,255,.10);
}
.homeMenuLinkStrong{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
}
.homeMenuSep{
  color: rgba(255,255,255,.55);
  font-weight: 900;
}

/* -------- Live Update Section (2 columns x 3 rows) -------- */
.homeLive{ padding-top: 26px; }

.homeLiveGrid{
  width: min(980px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  align-items: stretch;
}

.homeLiveCell{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border: 0px solid rgba(11,26,47,.14);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(11,26,47,.08);
}

/* Header cells */
.homeLiveHead{
  background: #0b1220;
  color:#ffffff;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 18px;
  padding: 14px 10px;
  border-radius: 16px;
  box-shadow: none;
  border: none;
}

/* Image cells: make the CELL the "card" that pops */
.homeLiveImgCell{
  padding: 0;
  margin-bottom: -6px; /* closes the visual gap */
  box-shadow: 0 10px 26px rgba(11,26,47,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover pop (like pageMenuImageLink) */
.homeLiveImgCell:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(11,26,47,.16);
  border-color: rgba(47,128,255,.35);
}

/* Image itself: no extra card/border, just fit nicely */
.homeLiveImg{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* CTA row cells */
.homeLiveCtaCell{
  padding: 8px 10px 10px; /* pull button closer to image */
  box-shadow: none;
}

/* Pill button used in multiple sections */
.homePill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;   /* smaller pill */
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;    /* smaller text */

  background: linear-gradient(90deg, #2f7cff, #38d2ff);
  color: #ffffff;
  border: 1px solid rgba(56,210,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 10px 22px rgba(47,124,255,.24);

  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}



.homePill:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}


/* -------- Mantra Section -------- */
.homeMantra{ padding-top: 28px; padding-bottom: 10px; }
.homeMantraImg{
  max-width: 800px;  /* cap the width */
  width: 100%;      /* allow shrink on small screens */
  height: auto;     /* keep aspect ratio */
  display: block;
  margin: 0 auto;   /* keep it centered */
  border-radius: 18px;
  border: 1px solid rgba(11,26,47,.14);
  box-shadow: 0 14px 34px rgba(11,26,47,.10);
}

/* -------- Hero Section -------- */
.homeHero{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontal centering */
  justify-content: center; /* vertical centering if you add height later */
  gap: 8px;
}
.homeHeroHeadline{
  margin: 0;
  font-size: 44px;
  letter-spacing: -0.02em;
  font-weight: 1000;
}
.homeHeroSubheadline{
  margin: 0;
  font-size: 18px;
  opacity: .72;
}


/* ==========================
   HOME MODULES GRID (3-up)
========================== */

.homeModulesGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  justify-items: center;
}

.homeModulesItem{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.homeModulesLabel{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2f80ff, #4fd1ff);
  color: #fff;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 10px 25px rgba(47,128,255,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.homeModulesLabel:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(47,128,255,.45);
}

.homeModulesCell{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.homeModulesImgCell{
  position: relative;
  border-radius: 20px;
  overflow: hidden;

  /* subtle “beveled frame” */
  background: linear-gradient(135deg,
    rgba(255,255,255,0.95),
    rgba(11,26,47,0.06)
  );

  border: 1px solid rgba(11,26,47,.14);

  /* bevel + lift */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),   /* top highlight */
    inset 0 -8px 18px rgba(11,26,47,0.10),  /* bottom shade */
    0 14px 34px rgba(11,26,47,0.12);        /* outer lift */
}

/* glossy bevel sweep */
.homeModulesImgCell::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.00) 55%
  );
  opacity: .75;
}

.homeModulesImg{
  max-width: 200px;  /* desktop size */
  width: 100%;      /* responsive shrink */
  height: auto;     /* keep aspect ratio */
  display: block;
  margin: 0 auto;   /* center in cell */
}

.homeModulesImg{
  border-radius: 18px; /* matches the inner bevel look */
}

.homeModulesCtaCell{
  padding: 10px;
}

.homeModulesSpacer{}


/* -------- Bottom Section -------- */
.homeBottom{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.homeBottomHeadline{
  margin: 0;
}

.homeBottomSubheadline{
  margin: 0;
  opacity: 0.8;
}


/* Mobile: stack the 2-column Live section + simplify Modules grid */
@media (max-width: 900px){
  .homeLiveGrid{
    grid-template-columns: 1fr;
  }
  .homeModulesGrid{
    grid-template-columns: 1fr;
  }
  .homeModulesSpacer{ display:none; }
  .homeModulesCtaCell{
    padding: 0 0 18px;
  }
  .homeHeroHeadline{ font-size: 36px; }
}