/* ============================================================
   DCS AI Technologies — canonical corporate shell
   One header, one footer, one set of tokens, every corporate page.

   Everything here is namespaced `dcsx-` so it cannot collide with
   the per-page inline CSS that still exists on most pages. Remove
   a page's old header/footer CSS only after it is on this shell.
   ============================================================ */

:root{
  --dcsx-blue:#2f6fed; --dcsx-blue-dark:#1e4fb0; --dcsx-blue-deep:#0c2c63;
  --dcsx-tint:#eef4fe; --dcsx-tint2:#f6f9ff; --dcsx-tint3:#e3edfd;
  --dcsx-ink:#1b2333; --dcsx-muted:#5d6675; --dcsx-line:#dbe5fb; --dcsx-line2:#c7d8f6;
  --dcsx-hdr-h:68px;
  --dcsx-wrap:1320px;
  --dcsx-gut:32px;
  --dcsx-radius:9px;
  --dcsx-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- accessibility ---------- */
.dcsx-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--dcsx-blue);color:#fff;
  padding:10px 18px;border-radius:0 0 8px 0;font:600 14px/1 var(--dcsx-font);text-decoration:none;}
.dcsx-skip:focus{left:0;}
.dcsx-hdr :focus-visible{outline:2px solid var(--dcsx-blue);outline-offset:2px;border-radius:6px;}

/* ---------- header shell ---------- */
.dcsx-hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--dcsx-line);font-family:var(--dcsx-font);color:var(--dcsx-ink);}
.dcsx-wrap{max-width:var(--dcsx-wrap);margin:0 auto;padding:0 var(--dcsx-gut);
  display:flex;align-items:center;height:var(--dcsx-hdr-h);gap:4px;}

/* logo — fixed, never shrinks */
.dcsx-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  margin-right:8px;flex:0 0 auto;white-space:nowrap;}
.dcsx-logo img{width:38px;height:38px;object-fit:contain;display:block;}
.dcsx-logo .dcsx-wm{display:inline-block;line-height:1.02;}
.dcsx-logo .dcsx-wm b{display:block;font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--dcsx-ink);}
.dcsx-logo .dcsx-wm small{display:block;font-size:6.5px;font-weight:700;text-transform:uppercase;
  color:var(--dcsx-muted);margin-top:1px;letter-spacing:.06em;
  text-align:justify;text-align-last:justify;}

/* primary nav — allowed to shrink before anything else does */
.dcsx-nav{display:flex;align-items:center;justify-content:center;gap:2px;flex:1 1 auto;min-width:0;}
.dcsx-nav > a,.dcsx-item > button{
  display:flex;align-items:center;gap:5px;background:none;border:none;font:500 14px/1 var(--dcsx-font);
  color:var(--dcsx-ink);padding:9px 11px;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap;}
.dcsx-nav > a:hover,.dcsx-item > button:hover{background:var(--dcsx-tint);color:var(--dcsx-blue);}
.dcsx-nav > a[aria-current="page"]{color:var(--dcsx-blue);background:var(--dcsx-tint);}
.dcsx-item{position:relative;}
.dcsx-caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.5;transition:transform .15s ease;flex:0 0 auto;}
.dcsx-item.dcsx-open .dcsx-caret{transform:translateY(1px) rotate(-135deg);}

/* right cluster — never shrinks, so "Sign in" cannot be squashed */
.dcsx-right{display:flex;align-items:center;gap:5px;flex:0 0 auto;margin-left:6px;}
.dcsx-iconbtn{background:none;border:1px solid var(--dcsx-line);cursor:pointer;
  width:40px;height:40px;padding:0;border-radius:var(--dcsx-radius);flex:0 0 auto;box-sizing:border-box;
  color:var(--dcsx-muted);display:inline-flex;align-items:center;justify-content:center;transition:.15s;}
.dcsx-iconbtn:hover{background:var(--dcsx-tint);color:var(--dcsx-blue);}

/* Sign in and Get started: same box model, same height, different weight */
.dcsx-signin,.dcsx-cta{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  height:40px;padding:0 15px;border-radius:var(--dcsx-radius);font:600 14px/1 var(--dcsx-font);
  text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:.15s;box-sizing:border-box;}
.dcsx-signin{color:var(--dcsx-ink);background:transparent;}
.dcsx-signin:hover{background:var(--dcsx-tint);color:var(--dcsx-blue);}
.dcsx-cta{background:var(--dcsx-blue);color:#fff;}
.dcsx-cta:hover{background:var(--dcsx-blue-dark);}

/* ---------- mega menus ---------- */
.dcsx-mega{position:absolute;left:0;right:0;top:var(--dcsx-hdr-h);background:#fff;
  border-bottom:1px solid var(--dcsx-line);box-shadow:0 24px 48px rgba(20,30,55,.13);display:none;}
.dcsx-mega[data-open="true"]{display:block;animation:dcsx-drop .16s ease;}
@keyframes dcsx-drop{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:translateY(0);}}
.dcsx-megagrid{max-width:var(--dcsx-wrap);margin:0 auto;padding:28px var(--dcsx-gut) 12px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px 26px;}
.dcsx-megagrid.dcsx-g6{grid-template-columns:repeat(6,1fr);gap:14px 20px;}
.dcsx-megacol h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--dcsx-blue);margin:0 0 10px;}
.dcsx-megacol a{display:block;font-size:13.5px;color:var(--dcsx-ink);padding:5px 0;text-decoration:none;}
.dcsx-megacol a:hover{color:var(--dcsx-blue);}
.dcsx-megacol a span{display:block;font-size:11.5px;color:var(--dcsx-muted);}
.dcsx-megafoot{max-width:var(--dcsx-wrap);margin:0 auto;padding:12px var(--dcsx-gut);
  border-top:1px solid var(--dcsx-line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.dcsx-megafoot a{font-size:13px;font-weight:600;color:var(--dcsx-blue);text-decoration:none;}
.dcsx-megafoot .dcsx-note{font-size:12px;color:var(--dcsx-muted);}

/* ---------- search ---------- */
.dcsx-searchpanel{position:absolute;left:0;right:0;top:var(--dcsx-hdr-h);background:#fff;
  border-bottom:1px solid var(--dcsx-line);box-shadow:0 18px 38px rgba(20,30,55,.12);}
.dcsx-searchpanel[hidden]{display:none;}
.dcsx-searchinner{max-width:var(--dcsx-wrap);margin:0 auto;padding:18px var(--dcsx-gut);}
.dcsx-searchform{display:flex;align-items:center;gap:9px;background:var(--dcsx-tint2);
  border:1px solid var(--dcsx-line2);border-radius:var(--dcsx-radius);padding:10px 14px;}
.dcsx-searchform:focus-within{border-color:var(--dcsx-blue);background:#fff;box-shadow:0 0 0 3px var(--dcsx-tint);}
.dcsx-searchform input{border:none;background:none;font:400 15px/1.3 var(--dcsx-font);outline:none;
  width:100%;color:var(--dcsx-ink);}
.dcsx-searchhint{font-size:12px;color:var(--dcsx-muted);margin-top:9px;}

/* ---------- mobile menu ---------- */
.dcsx-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;color:var(--dcsx-ink);}
.dcsx-burger:hover{background:var(--dcsx-tint);}
.dcsx-burger span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;}
.dcsx-burger span + span{margin-top:4px;}
/* Hidden by default at every width. The panel is only ever shown inside the
   <=1023px block below, via :not([hidden]) — the base rule used to be the only
   display declaration, so removing the hidden attribute did nothing and the
   burger opened a 0x0 panel. */
.dcsx-mobile{display:none;position:absolute;left:0;right:0;top:var(--dcsx-hdr-h);background:#fff;
  border-bottom:1px solid var(--dcsx-line);box-shadow:0 18px 38px rgba(20,30,55,.14);
  max-height:calc(100vh - var(--dcsx-hdr-h));overflow-y:auto;-webkit-overflow-scrolling:touch;}
.dcsx-mobile[hidden]{display:none !important;}
.dcsx-mobinner{padding:14px var(--dcsx-gut) 26px;}
.dcsx-mobsec{border-bottom:1px solid var(--dcsx-line);}
.dcsx-mobsec:last-of-type{border-bottom:none;}
.dcsx-mobsec > button{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:none;font:600 15px/1 var(--dcsx-font);color:var(--dcsx-ink);
  padding:14px 2px;cursor:pointer;text-align:left;}
.dcsx-mobsec > a{display:block;font:600 15px/1 var(--dcsx-font);color:var(--dcsx-ink);
  padding:14px 2px;text-decoration:none;}
.dcsx-mobpanel{display:none;padding:0 0 10px 10px;}
.dcsx-mobsec.dcsx-open .dcsx-mobpanel{display:block;}
.dcsx-mobpanel h5{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--dcsx-blue);margin:12px 0 6px;}
.dcsx-mobpanel a{display:block;font-size:14px;color:var(--dcsx-muted);padding:7px 0;text-decoration:none;}
.dcsx-mobpanel a:hover{color:var(--dcsx-blue);}
.dcsx-mobcta{display:flex;gap:10px;margin-top:18px;}
.dcsx-mobcta .dcsx-signin,.dcsx-mobcta .dcsx-cta{flex:1;height:44px;font-size:15px;}
.dcsx-mobcta .dcsx-signin,.dcsx-mobcta .dcsx-cta{display:inline-flex !important;}
.dcsx-mobcta .dcsx-signin{border-color:var(--dcsx-line2);}

/* ============================================================
   RESPONSIVE — the old shell had ONE breakpoint that never
   touched the header, so it overflowed from ~1370px downward.
   ============================================================ */

/* tablet/laptop: drop the wordmark subtitle and tighten spacing */
@media (max-width:1180px){
  :root{--dcsx-gut:24px;}
  .dcsx-nav > a,.dcsx-item > button{padding:9px 9px;font-size:13.5px;}
  .dcsx-logo{margin-right:8px;}
  .dcsx-logo .dcsx-wm small{display:none;}
  .dcsx-logo .dcsx-wm b{font-size:17px;}
}

/* below 1024px the six primary items cannot fit honestly — switch to the
   mobile menu rather than hiding nav with no replacement (the old product
   pages did `.navlinks{display:none}` and left users with no navigation). */
@media (max-width:1023px){
  .dcsx-nav{display:none;}
  .dcsx-mobile:not([hidden]){display:block;}
  .dcsx-right .dcsx-item{display:none;}
  .dcsx-burger{display:block;}
  .dcsx-mega{display:none !important;}
  .dcsx-wrap{gap:6px;}
  .dcsx-nav,.dcsx-right{margin-left:auto;}
}

@media (max-width:640px){
  :root{--dcsx-gut:16px;}
  .dcsx-right .dcsx-signin{display:none;}   /* header only — the mobile panel still carries it */
  .dcsx-cta{height:40px;padding:0 13px;font-size:13.5px;}
  .dcsx-logo img{width:32px;height:32px;}
  .dcsx-logo .dcsx-wm b{font-size:16px;}
}

@media (max-width:380px){
  .dcsx-right .dcsx-cta{display:none;}      /* header only — the mobile panel still carries it */
}

@media (prefers-reduced-motion:reduce){
  .dcsx-mega[data-open="true"]{animation:none;}
  .dcsx-caret{transition:none;}
}

/* ---------- canonical footer ---------- */
.dcsx-ftr{background:#fff;border-top:1px solid var(--dcsx-line);font-family:var(--dcsx-font);
  color:var(--dcsx-ink);margin-top:0;}
.dcsx-ftrwrap{max-width:var(--dcsx-wrap);margin:0 auto;padding:52px var(--dcsx-gut) 32px;}
.dcsx-ftrgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px;}
.dcsx-ftrbrand p{font-size:12.5px;color:var(--dcsx-muted);line-height:1.6;margin:12px 0 0;max-width:34ch;}
.dcsx-ftrcol h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--dcsx-ink);margin:0 0 12px;}
.dcsx-ftrcol ul{list-style:none;padding:0;margin:0;}
.dcsx-ftrcol li{margin-bottom:8px;}
.dcsx-ftrcol a{font-size:13px;color:var(--dcsx-muted);text-decoration:none;}
.dcsx-ftrcol a:hover{color:var(--dcsx-blue);}
.dcsx-ftrlegal{margin-top:34px;padding-top:20px;border-top:1px solid var(--dcsx-line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--dcsx-muted);}
.dcsx-ftrnote{font-size:11.5px;color:var(--dcsx-muted);line-height:1.55;margin:14px 0 0;}
@media (max-width:980px){ .dcsx-ftrgrid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .dcsx-ftrgrid{grid-template-columns:1fr;} }

/* ---------- product sub-bar ----------
   Preserves the in-page section navigation the product pages used to carry
   in their own bespoke headers, without duplicating global navigation. */
.dcsx-subbar{position:sticky;top:var(--dcsx-hdr-h);z-index:90;background:var(--dcsx-tint2);
  border-bottom:1px solid var(--dcsx-line);font-family:var(--dcsx-font);}
.dcsx-subwrap{max-width:var(--dcsx-wrap);margin:0 auto;padding:0 var(--dcsx-gut);
  display:flex;align-items:center;gap:18px;height:46px;}
.dcsx-sublabel{font-size:14px;font-weight:700;color:var(--dcsx-ink);letter-spacing:-.2px;
  flex:0 0 auto;padding-right:16px;border-right:1px solid var(--dcsx-line2);}
.dcsx-sublinks{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;}
.dcsx-sublinks::-webkit-scrollbar{display:none;}
.dcsx-sublinks a{font-size:13.5px;color:var(--dcsx-muted);text-decoration:none;
  padding:7px 11px;border-radius:7px;white-space:nowrap;}
.dcsx-sublinks a:hover{background:#fff;color:var(--dcsx-blue);}
@media (max-width:640px){
  .dcsx-subwrap{gap:12px;height:44px;}
  .dcsx-sublabel{font-size:13px;padding-right:12px;}
}

/* ---------- wide-content guard ----------
   Tables and code blocks cannot shrink below their content width, so they
   were pushing the whole document wider than the viewport on phones
   (compute.html measured documentElement.scrollWidth = 525px at a 390px
   viewport). They now scroll inside their own container instead. */
.dcsx-scrollx{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.dcsx-scrollx > table{margin:0;}
/* media never wider than its column */
.dcsx-hdr img,.dcsx-ftr img{max-width:100%;height:auto;}

/* honest-state notice (status.html and anywhere a source is not connected) */
.status-notice{max-width:var(--dcsx-wrap);margin:20px auto 0;padding:14px 18px;
  background:#fff8e6;border:1px solid #f5d98a;border-left:3px solid #b45309;border-radius:10px;
  font-family:var(--dcsx-font);font-size:13.5px;line-height:1.6;color:#4a3708;}
.status-notice b{color:#7a4f06;}
.status-notice a{color:#2f6fed;font-weight:600;}

/* ---------- mobile overflow guard ----------
   Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content width. On the product pages the two-column "band"
   layouts collapsed to one column at <=1000px but their items still measured
   420-465px inside a 390px viewport, pushing the whole document sideways
   (standards.html and verify.html measured 513px).

   min-width:0 lets them shrink; the wide-content guard above keeps tables and
   code blocks scrolling inside their own box rather than stretching the page. */
@media (max-width:900px){
  .band,.band-text,.band-visual,.hero-in,.phero-in,
  .feat,.feat-grid,.catgrid,.toolgrid,.secgrid,.nums,
  .steps,.mech-grid,.card4,.term-grid,.specs-grid,.rel-grid,
  .agents-panel,.agent-card,.std-cards,.agentlib-grid,
  .ecalc,.ecalc-stat,.demand-box,.inc-stat{
    min-width:0;
    max-width:100%;
  }
  /* long unbroken strings (hashes, CIDs, endpoints) must not set the width */
  .band-text,.band-visual,.agent-card,.ecalc-stat{overflow-wrap:break-word;}
}

/* sub-bar: the links row must be allowed to shrink before it can scroll.
   overflow-x:auto on a flex child does nothing while the flex container
   still has min-width:auto — status.html pushed the document to 404px. */
.dcsx-subwrap{min-width:0;}
.dcsx-sublinks{flex:1 1 auto;min-width:0;}

/* index.html "Our brands" two-up: an unclassed inner grid whose items
   would not shrink below their content width */
@media (max-width:900px){
  #brands .wrap > div{grid-template-columns:1fr !important;}
  #brands .wrap > div > div,
  #founder .wrap > div > div,
  #founder .wrap > div > div > div{min-width:0;max-width:100%;}
}

/* the scroll box itself, and the containers it sits in, must be allowed to
   shrink — otherwise the box grows to the table's width and the page still
   scrolls sideways (index.html: a table inside .dcsx-scrollx measured 383px
   in a 390px viewport starting at the 48px gutter). */
.dcsx-scrollx{min-width:0;}
@media (max-width:900px){
  .wrap > *, .wrap > * > *, .wrap > * > * > *{min-width:0;}
}

/* index.html #shipped: the feature table sits in a card that was not being
   held to the viewport, so the table set the page width instead of scrolling */
@media (max-width:900px){
  #shipped .wrap > div{max-width:100% !important;}
  #shipped .dcsx-scrollx,#shipped div[style*="overflow-x"]{max-width:100%;overflow-x:auto;}
}

/* provenance note on author-recorded records (status.html incident history) */
.inc-provenance{font-size:12.5px;color:#5d6675;line-height:1.6;margin:8px 0 0;max-width:68ch;}
.inc-provenance b{color:#1b2333;}

/* status.html: the 90-day bar strip used to be filled with Math.random() values.
   The generator is gone; this is the explicit no-data slot that replaces it. */
.ep-bars-empty{position:relative;min-width:120px;border-bottom:1px dashed var(--dcsx-line2);opacity:.55;}
.ep-bars-empty::after{content:"no data source connected";position:absolute;left:0;bottom:4px;
  font-family:var(--dcsx-font);font-size:10.5px;letter-spacing:.02em;color:var(--dcsx-muted);white-space:nowrap;}

/* footer social row */
.dcsx-social{display:flex;gap:8px;margin:14px 0 0;}
.dcsx-social a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--dcsx-tint);color:var(--dcsx-blue);transition:.15s;}
.dcsx-social a:hover{background:var(--dcsx-blue);color:#fff;}
.dcsx-social svg{width:15px;height:15px;fill:currentColor;display:block;}

/* Hero decoration clip.
   The homepage hero orbit rotates on a 72s loop with 205px arms and 80px
   tiles. At narrow widths its bounding box sweeps past the viewport edge at
   some phases, so the document width fluctuated between 391px and 405px at a
   390px viewport — which is what clipped the header CTA in screenshots.
   The cluster is purely decorative, so clipping it is safe. */
.hero-cluster{overflow:hidden;}

/* ---------- 1024–1180 fit band ----------
   Seven primary items + Explore DCS + search + both CTAs need ~1120px at the
   default type scale. Between 1024 and 1180 the flex row was shrinking gaps to
   zero and letting the logo collide with "Products" and "Company" with
   "Explore DCS" — an overlap the document-width check does not catch, because
   nothing overflows. Tighten the type and padding so the row genuinely fits,
   and drop the wordmark to the mark alone at the narrow end. */
@media (max-width:1180px){
  .dcsx-nav{gap:0;}
  .dcsx-nav > a,.dcsx-item > button{padding:9px 7px;font-size:13px;letter-spacing:-.1px;}
  .dcsx-right{gap:4px;margin-left:4px;}
  .dcsx-signin,.dcsx-cta{padding:0 12px;font-size:13.5px;}
  .dcsx-logo{margin-right:4px;}
}
@media (min-width:1024px) and (max-width:1100px){
  .dcsx-logo .dcsx-wm{display:none;}   /* mark only in the tight band — buys ~70px */
  .dcsx-nav > a,.dcsx-item > button{padding:9px 6px;font-size:12.5px;}
  .dcsx-signin,.dcsx-cta{padding:0 11px;}
  .dcsx-iconbtn{width:36px;height:36px;}
}