/* BBXNEXUS R26 — clear two-field hero: globe LEFT, editorial + proof RIGHT.
   The existing globe, freight stages, palette and proof data are intact.
   The world scene stays put; optical framing is controlled in Three.js. */

/* Right-hand copy has one stable baseline. No floating CTA/card. */
body[data-hero="true"] #hero .hero-editorial{
  left:63%;right:auto;top:max(100px,calc(52.5vh - 193px));
  width:clamp(245px,27vw,380px);max-width:none;
}
body[data-hero="true"] #hero .hero-kicker{
  margin-bottom:13px;
  font-size:clamp(11px,.88vw,13px);line-height:1.4;
  letter-spacing:.055em;
}
body[data-hero="true"] #hero #hero-title{
  font-size:clamp(34px,2.9vw,52px);line-height:.99;
  margin:0 0 18px;letter-spacing:-.068em;
  max-width:100%;text-wrap:balance;
}
body[data-hero="true"] #hero #hero-title .hero-subtitle{
  margin-top:.13em;letter-spacing:-.069em;
}
body[data-hero="true"] #hero .hero-copy{
  max-width:100%;margin:0;
  font-size:clamp(12px,.98vw,15px);line-height:1.55;
  text-wrap:pretty;
}

/* Match the cosmic-metal vignette to the sphere's new left-side position. */
@media(min-width:901px){
  body[data-hero="true"] #experience{
    background:
      radial-gradient(ellipse 38% 55% at 30% 46%,#34404b54 0%,#151e2952 48%,transparent 88%),
      radial-gradient(ellipse 48% 65% at 18% 100%,#27323b36 0%,transparent 75%),
      linear-gradient(120deg,#030508 0%,#0d131a 33%,#05070b 68%,#0b1016 100%);
  }
  body[data-hero="true"] #scene::after{
    background:
      radial-gradient(ellipse 37% 54% at 30% 47%,transparent 68%,#03050854 100%),
      linear-gradient(180deg,#030508ad 0%,transparent 17%,transparent 80%,#030508ba 100%)!important;
  }
}

/* The proof title sits directly *below* the editorial in the RIGHT rail.
   --bbx-hero-proof-top is measured from real editorial height after fonts load. */
body[data-hero="true"] #chain-panel,
body[data-hero="true"] #chain-panel:has(#chain-content[hidden]){
  left:63%;right:auto;top:var(--bbx-hero-proof-top,65%);bottom:auto;
  width:clamp(245px,27vw,380px);max-width:none;
  margin:0;padding:14px 0 0;
  border:0;border-top:1px solid #ed2318ad;border-radius:0;
  background:transparent;box-shadow:none;backdrop-filter:none;
}
body[data-hero="true"] #chain-panel:has(#chain-content[hidden]) #chain-toggle{
  min-height:68px;display:flex;align-items:flex-start;gap:6px;
  padding:0;border:0;background:transparent;
  font:750 clamp(20px,1.75vw,28px)/1.1 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.055em;color:#ee2f22;text-align:left;
}
body[data-hero="true"] #chain-panel:has(#chain-content[hidden]) #chain-toggle .chain-action-title strong{
  color:#f5f6f2;font-weight:800;letter-spacing:-.058em;
}
body[data-hero="true"] #chain-panel:has(#chain-content[hidden]) #chain-toggle small{
  margin-top:10px;color:#b2c6cb;font:500 12px/1.3 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
body[data-hero="true"] #chain-panel:has(#chain-content[hidden]) .chain-chevron{
  color:#8dd9d2;font-size:19px;margin-top:5px;
}

/* Only an explicitly opened proof viewer becomes a bounded reading surface. */
body[data-hero="true"] #chain-panel:has(#chain-content:not([hidden])){
  left:63%;right:auto;
  top:max(106px,15vh);bottom:4.5%;
  width:max(285px,min(32vw,420px));max-height:none;
  overflow-y:auto;padding:15px 17px 16px 18px;
  border-left:2px solid #ed3127;
  background:linear-gradient(90deg,#030508fa,#081017f3);
  box-shadow:0 16px 40px #0007;
}

/* With no WebGL, place the accessible status first in the *same* right rail;
   headline and proposed proof follow below. Never show it over working 3D. */
body[data-hero="true"][data-rendering="static"] #fallback{inset:0;transform:none!important}
body[data-hero="true"][data-rendering="static"] #fallback p{
  left:63%;right:auto;top:106px;
  bottom:auto;width:clamp(245px,27vw,380px);max-width:none;
  padding:0;border:0;
  background:transparent;color:#a9bbc2;
  font:500 11px/1.5 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
body[data-hero="true"][data-rendering="static"] #hero .hero-editorial{top:190px}

@media (min-width:901px) and (max-height:700px){
  body[data-hero="true"] #hero .hero-editorial{top:max(100px,calc(52.5vh - 179px))}
  body[data-hero="true"] #hero .hero-kicker{margin-bottom:9px}
  body[data-hero="true"] #hero #hero-title{margin-bottom:12px}
  body[data-hero="true"] #chain-panel:has(#chain-content[hidden]) #chain-toggle small{margin-top:7px}
}

/* Mobile keeps heading → proof → visible globe; copy remains right-weighted.
   The globe begins below legible copy instead of covering it. */
@media(max-width:900px){
  body[data-hero="true"] #hero .hero-editorial{
    left:auto;right:5.2%;top:82px;width:min(80vw,430px);max-width:none;
  }
  body[data-hero="true"] #hero .hero-kicker{margin-bottom:9px;font-size:11px}
  body[data-hero="true"] #hero #hero-title{
    font-size:clamp(32px,6.8vw,49px);line-height:1.03;
    max-width:100%;margin-bottom:12px;
  }
  body[data-hero="true"] #hero .hero-copy{
    font-size:clamp(12px,2.5vw,14px);line-height:1.52;
    max-width:min(44ch,100%);
  }
  body[data-hero="true"] #chain-panel,
  body[data-hero="true"] #chain-panel:has(#chain-content[hidden]){
    left:auto;right:5.2%;top:var(--bbx-hero-proof-top,285px);bottom:auto;
    width:min(80vw,430px);max-width:none;padding:12px 0 0;
  }
  body[data-hero="true"] #chain-panel:has(#chain-content[hidden]) #chain-toggle{
    min-height:64px;font-size:clamp(19px,4vw,26px);line-height:1.08;
  }
  body[data-hero="true"] #chain-panel:has(#chain-content[hidden]) #chain-toggle small{
    font-size:11px;margin-top:6px;
  }
  body[data-hero="true"] #chain-panel:has(#chain-content:not([hidden])){
    left:auto;right:5.2%;top:max(80px,10vh);
    bottom:4%;width:min(90vw,430px);max-width:none;
    max-height:calc(96dvh - max(80px,10vh));
  }
  body[data-hero="true"] #scene{
    top:var(--bbx-mobile-hero-scene-top,var(--bbx-hero-globe-top,385px));bottom:auto;
    height:clamp(215px,43vh,435px);min-height:0;max-height:none;
  }
  body[data-hero="true"][data-rendering="static"] #fallback p{
    left:auto;right:5.2%;top:82px;
    width:min(80vw,430px);max-width:none;
  }
  body[data-hero="true"][data-rendering="static"] #hero .hero-editorial{top:163px}
}

@media(max-width:600px){
  #experience header{left:4%;right:4%;gap:6px}
  #experience header .brand{font-size:clamp(15px,4vw,20px);white-space:nowrap}
  #experience header .brand-icon{font-size:25px;margin-right:4px}
  #experience header .account-actions{gap:4px}
  #experience header .account-actions button{padding:7px 6px;min-height:34px;font-size:10px}
  #experience header #incoterms-open{padding:8px 7px;font-size:10px;white-space:nowrap}
}

@media(max-width:360px){
  #experience header .brand{font-size:14px}
  #experience header .brand-icon{font-size:22px}
  #experience header .account-actions button{font-size:9px;padding:6px 5px}
  #experience header #incoterms-open{font-size:9px;padding:7px 5px}
}

@media(prefers-reduced-motion:reduce){
  body[data-hero="true"] #chain-panel:has(#chain-content[hidden]) #chain-toggle{transition:none}
}

/* Dual-tone neon typography: change ONLY the accents which were originally
   chilli-red. White, silver and muted text retain their existing CSS colours. */
:root{--bbx-page-neon:#FF2028}
@media(forced-colors:none){
  body[data-rendering="webgl"] :is(
    header .brand-icon,
    #hero .hero-kicker,
    #hero-title .hero-subtitle,
    #chain-toggle,
    #chain-toggle .chain-action-title,
    .account-eyebrow,
    .account-profile .profile-category
  ){
    color:var(--bbx-page-neon)!important;
    text-shadow:0 0 12px color-mix(in srgb,var(--bbx-page-neon) 26%,transparent);
  }
  body[data-rendering="webgl"] #chain-toggle .chain-action-title :is(strong,small){
    text-shadow:none!important;
  }
  body[data-rendering="webgl"][data-hero="true"] #chain-panel{
    border-top-color:color-mix(in srgb,var(--bbx-page-neon) 70%,transparent)!important;
  }
  body[data-rendering="webgl"][data-hero="true"] #chain-panel:has(#chain-content:not([hidden])){
    border-left-color:var(--bbx-page-neon)!important;
  }

  /* All three header controls use a fixed, readable silver-dark glass.
     Their colours never subscribe to the globe and their sizing is intact. */
  #experience header :is(#account-login,#account-signup,#incoterms-open){
    color:#eef4f6!important;
    background:linear-gradient(145deg,#2e455cbe,#0b1c2bdd)!important;
    border:1px solid #adbfcb87!important;
    border-radius:7px;
    box-shadow:inset 0 1px 0 #ffffff1b,0 5px 16px #00000045!important;
    backdrop-filter:blur(12px) saturate(125%);
    -webkit-backdrop-filter:blur(12px) saturate(125%);
    text-shadow:none!important;
    -webkit-text-stroke:0!important;
  }
  #experience header :is(#account-login,#account-signup,#incoterms-open):is(:hover,[aria-expanded="true"]){
    background:linear-gradient(145deg,#41596dcc,#173145eb)!important;
    border-color:#d2e1ebad!important;
  }
  #experience header :is(#account-login,#account-signup,#incoterms-open):focus-visible{
    outline:2px solid #d7e9f2!important;
    outline-offset:3px;
  }
}

/* Incoterms reading sheet: expand the existing right-hand educational overlay.
   The globe, main layout, header trigger and underlying model are unchanged. */
body[data-hero] #incoterms-panel{
  top:clamp(90px,11vh,112px);
  right:clamp(16px,3.4vw,62px);
  bottom:max(18px,env(safe-area-inset-bottom));
  width:clamp(420px,42vw,720px);
  max-width:calc(100vw - 32px);
  border-radius:18px;
  font:400 14px/1.65 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  scrollbar-gutter:stable;
}
body[data-hero] #incoterms-panel .incoterms-heading{
  padding:17px 24px;
  border-bottom:1px solid #b7cfdd45;
}
body[data-hero] #incoterms-panel .incoterms-content{
  padding:20px 26px 30px;
  font-size:14px;line-height:1.65;
}
body[data-hero] #incoterms-panel h2{font-size:20px;letter-spacing:-.025em}
body[data-hero] #incoterms-panel h3{font-size:15px}
body[data-hero] #incoterms-panel .incoterms-help,
body[data-hero] #incoterms-panel .incoterms-notices,
body[data-hero] #incoterms-panel .incoterms-summary{font-size:12.5px;line-height:1.6}
body[data-hero] #incoterms-panel #incoterm-stages li{
  font-size:12px;line-height:1.45;padding:.65rem .55rem;
}

@media(forced-colors:none){
  body[data-hero] #incoterms-panel{
    background:linear-gradient(145deg,#223b50d9 0%,#101f30e5 50%,#07101ee6 100%);
    color:#f1f7fa;
    border:1px solid #c3d7e57a;
    box-shadow:inset 0 1px 0 #ffffff27,0 25px 70px #000000a3,0 0 30px #8eafc31a;
    backdrop-filter:blur(18px) saturate(135%);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
  }
  body[data-hero] #incoterms-panel .incoterms-heading{
    background:linear-gradient(110deg,#3c5869d9,#1b3447e0);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  body[data-hero] #incoterms-panel :is(button,input,select){
    color:#f4f8fa;
    background:linear-gradient(145deg,#264459c4,#102535d9);
    border:1px solid #b4cfdd72;
    border-radius:8px;
  }
  body[data-hero] #incoterms-panel button:hover{
    background:linear-gradient(145deg,#385e72dd,#1b3b4dd9);
    border-color:#d7ebf3aa;
  }
}

@media(max-width:900px){
  body[data-hero] #incoterms-panel{
    top:max(74px,env(safe-area-inset-top));
    left:3%;right:3%;bottom:max(12px,env(safe-area-inset-bottom));
    width:auto;max-width:none;border-radius:14px;
  }
  body[data-hero] #incoterms-panel .incoterms-heading{padding:12px 17px}
  body[data-hero] #incoterms-panel .incoterms-content{padding:16px 17px 25px}
}
@media(max-height:500px){
  body[data-hero] #incoterms-panel{top:80px;bottom:8px}
}
@media(max-width:900px) and (max-height:500px){
  body[data-hero] #incoterms-panel{top:69px;bottom:8px}
}

/* Match the OPEN on-chain proof sheet to the Incoterms reading sheet.
   The collapsed invitation and its location remain exactly as before. */
body[data-hero="true"] #chain-panel:has(#chain-content:not([hidden])){
  left:auto;
  top:clamp(90px,11vh,112px);
  right:clamp(16px,3.4vw,62px);
  bottom:max(18px,env(safe-area-inset-bottom));
  width:clamp(420px,42vw,720px);
  max-width:calc(100vw - 32px);
  max-height:none;
  padding:20px 26px 30px;
  overflow-y:auto;overflow-x:hidden;
  border-radius:18px;
  font:400 14px/1.65 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  scrollbar-gutter:stable;
}
@media(forced-colors:none){
  body[data-hero="true"] #chain-panel:has(#chain-content:not([hidden])){
    background:linear-gradient(145deg,#223b50d9 0%,#101f30e5 50%,#07101ee6 100%);
    color:#f1f7fa;
    border:1px solid #c3d7e57a;
    box-shadow:inset 0 1px 0 #ffffff27,0 25px 70px #000000a3,0 0 30px #8eafc31a;
    backdrop-filter:blur(18px) saturate(135%);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
  }
}
@media(max-width:900px){
  body[data-hero="true"] #chain-panel:has(#chain-content:not([hidden])){
    top:max(74px,env(safe-area-inset-top));
    left:3%;right:3%;bottom:max(12px,env(safe-area-inset-bottom));
    width:auto;max-width:none;border-radius:14px;
    padding:16px 17px 25px;
  }
}
@media(max-height:500px){
  body[data-hero="true"] #chain-panel:has(#chain-content:not([hidden])){top:80px;bottom:8px}
}
@media(max-width:900px) and (max-height:500px){
  body[data-hero="true"] #chain-panel:has(#chain-content:not([hidden])){top:69px;bottom:8px}
}

/* Mirror the on-chain reading sheet's dual-tone frame. The same interpolated
   globe neon accents the top/left edge; right/bottom remain fixed silver. */
@media(forced-colors:none){
  body[data-rendering="webgl"][data-hero] #incoterms-panel:not([hidden]){
    border-top-color:color-mix(in srgb,var(--bbx-page-neon) 70%,transparent);
    border-left-color:var(--bbx-page-neon);
  }
}

/* R28: the Founder tagline fills the open space below the proof invitation.
   Align to the existing right rail and its measured proof position; never move
   the globe or change the interactive proof panel's stacking/geometry. */
.hero-global-vision{display:none}
body[data-hero="true"] #experience .hero-global-vision{
  position:absolute;z-index:3;pointer-events:none;
  display:block;left:63%;right:auto;
  top:calc(var(--bbx-hero-proof-top,65%) + 148px);bottom:auto;
  width:clamp(245px,27vw,380px);max-width:none;
  margin:0;text-align:left;
  font:750 clamp(22px,2.1vw,32px)/1.16 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.055em;text-shadow:0 4px 22px #0000006b;
  opacity:var(--hero-opacity,1);
}
body[data-hero="true"] #experience .hero-global-vision::before{
  content:"";position:absolute;left:0;right:0;top:-23px;
  border-top:1px solid color-mix(in srgb,var(--bbx-page-neon) 70%,transparent);
}
body[data-hero="true"] #experience .hero-global-vision span,
body[data-hero="true"] #experience .hero-global-vision strong{
  display:block;white-space:nowrap;
}
body[data-hero="true"] #experience .hero-global-vision span{color:#edf4f7;font-weight:700}
body[data-hero="true"] #experience .hero-global-vision strong{color:#FF2028;font-weight:800}
@media(forced-colors:none){
  body[data-rendering="webgl"][data-hero="true"] #experience .hero-global-vision strong{
    color:var(--bbx-page-neon);
  }
}
body[data-hero="true"]:has(#chain-content:not([hidden])) #experience .hero-global-vision,
body[data-hero="true"]:has(#incoterms-panel:not([hidden])) #experience .hero-global-vision{
  display:none;
}
@media(min-width:901px) and (max-height:700px){
  body[data-hero="true"] #experience .hero-global-vision{
    top:calc(var(--bbx-hero-proof-top,65%) + 126px);
    font-size:clamp(20px,1.95vw,29px);
  }
}
@media(max-width:900px){
  body[data-hero="true"] #experience .hero-global-vision{
    left:auto;right:5.2%;top:auto;bottom:max(18px,env(safe-area-inset-bottom));
    width:min(80vw,430px);font-size:clamp(17px,3.8vw,24px);
  }
}
@media(max-width:900px) and (max-height:700px){
  /* Short phone viewports must prioritize the existing globe and proof UI. */
  body[data-hero="true"] #experience .hero-global-vision{display:none}
}

/* R30: fit the Founder's two-line replacement headline inside the original
   editorial rail. Existing proof positioning still measures the rendered copy. */
body[data-hero="true"] #hero #hero-title{
  font-size:clamp(28px,2.75vw,44px);
  white-space:nowrap;
}
@media(max-width:900px){
  body[data-hero="true"] #hero #hero-title{font-size:clamp(27px,6vw,43px)}
}

/* Keep the desktop text rail aligned with the Log in control. */
@media(min-width:901px){
  body[data-hero="true"] #hero .hero-editorial,
  body[data-hero="true"] #chain-panel:has(#chain-content[hidden]),
  body[data-hero="true"] #experience .hero-global-vision,
  body[data-hero="true"][data-rendering="static"] #fallback p{
    left:var(--bbx-hero-rail-left,63%);right:auto;
    width:min(380px,calc(96vw - var(--bbx-hero-rail-left,63vw)));
  }
}