/* BBXNEXUS — R15 bounded landing and account-experience preview.
   Existing R14P globe, nine freight stages and proof model remain intact. */
:root{
  --bbx15-cream:#f4f4ed;
  --bbx15-slate:#a9c4cc;
  /* R21: one chilli-red accent across the landing typography and controls. */
  --bbx15-chilli:#ff3029;
  --bbx15-copper:var(--bbx15-chilli);
  --bbxp-copper:var(--bbx15-chilli);
  --r14-copper:var(--bbx15-chilli);
  --bbx15-teal:#78d3cb;
  --bbx15-border:#7099a577;
  --bbx15-obsidian:#030508;
  --bbx15-graphite:#10171d;
}

/* R19 hero finish: cosmic metallic black, with the existing WebGL globe
   remaining the sole visual centerpiece. No extra canvas or motion layer. */
body[data-hero="true"] #experience{
  background:
    radial-gradient(ellipse 38% 55% at 51% 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"] #experience::before{
  opacity:.24;
  background-image:radial-gradient(#c1cbd12b .75px,transparent 1.4px);
  background-size:61px 61px;
}
body[data-hero="true"] #scene::after{
  background:
    radial-gradient(ellipse 37% 54% at 50% 47%,transparent 68%,#03050854 100%),
    linear-gradient(180deg,#030508ad 0%,transparent 17%,transparent 80%,#030508ba 100%)!important;
}
body[data-hero="true"] #experience header{
  background:linear-gradient(180deg,#04070bed,#0b1018d9);
  border-bottom-color:#96a5af35;
}
body[data-hero="true"] #experience header .account-actions #account-login{
  color:#e1e7e8;background:var(--bbx15-graphite);border-color:#667986ad;
}

/* Account actions sit beside—not over—the existing Incoterms control. */
#experience header .account-actions{
  display:flex;align-items:center;gap:9px;margin-left:auto;margin-right:0;
  position:relative;z-index:8;
}
#experience header .account-actions button{
  min-height:40px;padding:9px 16px;border:1px solid #7299a1a3;border-radius:5px;
  font:700 12px/1.2 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:0;color:#e0eceb;background:#102c38;
}
#experience header .account-actions #account-signup{
  color:#122b32;background:var(--bbx15-copper);border-color:var(--bbx15-copper);
}
#experience header .account-actions button:hover{background:#1d4450}
#experience header .account-actions #account-signup:hover{background:#ff665d}
#experience header .account-actions button:focus-visible{
  outline:3px solid var(--bbx15-teal);outline-offset:3px;
}

/* Quiet editorial hierarchy; the Earth remains the hero subject. */
body[data-hero="true"] .hero-editorial{max-width:345px}
body[data-hero="true"] .hero-kicker{
  display:block;margin:0 0 21px;color:var(--bbx15-copper);
  font:700 clamp(12px,.95vw,14px)/1.4 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:.055em;text-transform:none;
}
body[data-hero="true"] #hero-title{
  margin-bottom:20px;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  line-height:1.02;letter-spacing:-.067em;
}
body[data-hero="true"] .hero-copy{
  color:#d0dadd;font:400 clamp(14px,1.05vw,16px)/1.6 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  max-width:34ch;letter-spacing:0;margin-bottom:0;
}

/* Paired editorial rails: the proof heading anchors the upper-right,
   sharing type, color and rhythm with the left hero copy. No floating CTA. */
body[data-hero="true"] .chain-panel{
  top:23.5%;bottom:auto;left:auto;right:5.8%;
  width:clamp(235px,22vw,315px);max-width:none;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body[data-hero="true"] .chain-panel:has(#chain-content[hidden]){
  top:23.5%;bottom:auto;left:auto;right:5.8%;
  width:clamp(235px,22vw,315px);margin:0;padding:0 0 0 18px;
  overflow:visible;border:0;border-left:1px solid #ff30297a;
  border-radius:0;background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body[data-hero="true"] .chain-panel:has(#chain-content[hidden]):hover{
  background:transparent;box-shadow:none;
}
body[data-hero="true"] .chain-panel:has(#chain-content[hidden]) #chain-toggle{
  display:flex;align-items:flex-start;gap:12px;min-height:92px;
  padding:0;text-align:left;border:0;border-radius:0;
  background:transparent;color:var(--bbx15-copper);
  font:600 clamp(22px,2.05vw,30px)/1.11 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.052em;transition:color .2s;
}
body[data-hero="true"] .chain-panel:has(#chain-content[hidden]):hover #chain-toggle{
  color:#ff766d;
}
body[data-hero="true"] #chain-toggle .chain-action-title{
  display:block;min-width:0;text-wrap:balance;
}
body[data-hero="true"] #chain-toggle .chain-action-title strong{
  display:block;color:var(--bbx15-cream);
  font-family:inherit;font-size:1.09em;font-weight:750;line-height:1.07;
  letter-spacing:-.055em;
}
body[data-hero="true"] #chain-toggle .chain-action-title small{
  display:block;margin-top:15px;color:#adbbc1;
  font:500 12px/1.35 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:0;text-wrap:initial;
}
body[data-hero="true"] .chain-panel:has(#chain-content[hidden]) .chain-signal{display:none}
body[data-hero="true"] .chain-panel:has(#chain-content[hidden]) .chain-chevron{
  color:var(--bbx15-teal);font-size:23px;line-height:1.1;
  transform:rotate(-90deg);margin-top:9px;
}
body[data-hero="true"] #chain-toggle{
  min-height:58px;font:650 18px/1.18 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.035em;color:var(--bbx15-copper);
}
body[data-hero="true"] .chain-panel:has(#chain-content:not([hidden])){
  top:max(112px,17vh);bottom:6vh;max-height:calc(100vh - max(112px,17vh) - 6vh);
  overflow-y:auto;padding:14px 14px 14px 18px;
  border-left:1px solid #ff30297a;
  background:linear-gradient(90deg,#030508fa 0%,#070c13ef 76%,#070c13e0 100%);
}
body[data-hero="true"] .chain-panel:has(#chain-content:not([hidden])):hover{
  background:linear-gradient(90deg,#030508fa 0%,#070c13ef 76%,#070c13e0 100%);
}
body[data-hero="true"] .chain-panel:has(#chain-content:not([hidden])) #chain-toggle{
  padding:0 0 12px;
}
body[data-hero="true"] .chain-panel:has(#chain-content:not([hidden])) .chain-signal{
  display:none;
}
body[data-hero="true"] .chain-panel:has(#chain-content:not([hidden])) #chain-content{
  border-top:1px solid #6d829358;padding:16px 0 0;
}
body[data-hero="true"] #chain-content{max-height:none}
body[data-hero="true"] .chain-panel .chain-events button{
  min-height:35px;font-size:10px;letter-spacing:0;
}

/* A participant profile is offered inside existing stage trace, not on top of freight. */
.record-body .stage-profile-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;
  margin:10px 0 6px;padding:7px 12px;border:1px solid #88c5c5;
  border-radius:4px;background:#173a44;color:#eaf7f4;
  font:700 11px/1.3 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.record-body .stage-profile-link:focus-visible{outline:3px solid var(--bbx15-teal);outline-offset:3px}

/* Role registration and member access are honest frontend-only previews. */
.account-dialog{
  position:fixed;inset:0;margin:auto;width:min(930px,calc(100vw - 52px));
  max-height:min(84vh,790px);padding:0;overflow-y:auto;overflow-x:hidden;
  border:1px solid #7199a5;border-radius:12px;background:#091f2a;color:#edf4f0;
  box-shadow:0 28px 90px #020c13c9;z-index:100;color-scheme:dark;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.account-dialog::backdrop{background:#020b11da;backdrop-filter:blur(5px)}
.account-dialog[open]{display:block}
.account-head{
  display:flex;justify-content:space-between;align-items:start;gap:18px;
  padding:26px 30px 18px;border-bottom:1px solid #83a5ae39;
}
.account-eyebrow{margin:0 0 8px;font-size:12px;font-weight:750;letter-spacing:.08em;color:var(--bbx15-copper)}
.account-head h2{margin:0 0 8px;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.05em;line-height:1.15}
.account-head p:last-child{margin:0;color:#c1d4d8;font-size:13px;line-height:1.5}
#account-close{
  flex:0 0 auto;display:grid;place-items:center;width:41px;height:41px;border-radius:6px;
  border:1px solid #93b6bf77;color:#f3f5f2;background:#102f3d;font-size:26px;
}
.account-tabs{display:flex;gap:8px;padding:15px 30px;border-bottom:1px solid #83a5ae39}
.account-tabs button{
  min-height:39px;border:1px solid #718f98a0;border-radius:5px;padding:8px 18px;
  background:#102f3d;color:#c8dcde;font:700 13px/1.3 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.account-tabs button[aria-pressed="true"]{
  background:#e9c5a3;border-color:#e9c5a3;color:#102935;
}
#account-register-view,#account-login-view{padding:18px 30px 27px}
#account-register-view[hidden],#account-login-view[hidden]{display:none!important}
.account-dialog h3{font-size:18px;letter-spacing:-.025em;line-height:1.3;margin:0 0 8px}
.account-hint{font-size:13px;color:#b8d0d5;line-height:1.55;margin:0 0 18px;max-width:70ch}
.account-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px}
.account-role-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  max-height:390px;overflow-y:auto;overscroll-behavior:contain;padding-right:5px;
}
.account-role-list button{
  text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  min-height:68px;border:1px solid #7394a18c;border-radius:6px;padding:10px 12px;
  background:#102f3e;color:#ebf5f2;line-height:1.3;
}
.account-role-list button span{font-size:10px;font-weight:750;letter-spacing:.07em;color:#f0b786;margin-bottom:4px}
.account-role-list button strong{font-size:12px;font-weight:700}
.account-role-list button[aria-pressed="true"]{
  background:#1b4851;border-color:var(--bbx15-teal);box-shadow:inset 3px 0 0 var(--bbx15-teal);
}
.account-profile{
  min-height:315px;background:#102f3c;border:1px solid #80a8ad6d;border-radius:7px;
  padding:20px 21px;
}
.account-profile .profile-category{margin:0 0 8px;color:var(--bbx15-copper);font-size:11px;font-weight:750;letter-spacing:.07em}
.account-profile h4{font-size:21px;letter-spacing:-.04em;margin:0 0 10px}
.account-profile p{font-size:13px;color:#d1e4e5;line-height:1.55;margin:0 0 16px}
.account-profile h5{font-size:12px;color:#e5d4c5;letter-spacing:.035em;margin:0 0 8px}
.account-profile ul{padding-left:18px;margin:0;display:grid;gap:8px}
.account-profile li{font-size:12px;line-height:1.45;color:#d5e5e6}
.account-foot{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  border-top:1px solid #779aa44c;padding-top:18px;margin-top:20px;
}
.account-foot span,.account-login-note{color:#adcad0;font-size:12px;line-height:1.5}
.account-foot button,.account-login-preview button{
  border:1px solid #8ca4a7;border-radius:5px;min-height:40px;padding:9px 15px;
  background:#364a51;color:#cedadd;font:700 12px/1.3 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.account-dialog button:disabled{opacity:.74;cursor:not-allowed}
.account-dialog button:not(:disabled):focus-visible{
  outline:3px solid var(--bbx15-teal);outline-offset:3px;
}
.account-login-preview{
  display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:18px 0 10px;
}
.account-login-preview label{font-size:12px;color:#d7e6e6;display:grid;gap:8px}
.account-login-preview input{
  width:100%;min-height:43px;border:1px solid #6d909e;border-radius:5px;
  background:#152f3b;color:#a4bbc0;padding:10px 12px;
}
.account-login-preview button{grid-column:1/-1;justify-self:start}
.account-login-note{margin:15px 0 0}

@media(min-width:901px) and (max-width:1200px){
  #experience header .brand-line{display:none}
  body[data-hero="true"] .chain-panel{right:4.7%;width:clamp(185px,22vw,235px)}
  body[data-hero="true"] .chain-panel:has(#chain-content[hidden]){right:4.7%;width:clamp(210px,23vw,255px)}
}
@media(min-width:901px) and (max-height:780px){
  body[data-hero="true"] .hero-kicker{margin-bottom:12px}
  body[data-hero="true"] .hero-copy{line-height:1.5}
}
@media(max-width:900px){
  #experience header .account-actions{gap:5px}
  #experience header .account-actions button{padding:8px;font-size:11px;min-height:36px}
  body[data-hero="true"] .chain-panel{top:auto;bottom:5%;right:5%;width:min(70vw,260px)}
  body[data-hero="true"] .chain-panel:has(#chain-content[hidden]){
    top:calc(66px + 4vh);bottom:auto;right:5%;width:min(44vw,225px);
    padding-left:12px;
  }
  body[data-hero="true"] .chain-panel:has(#chain-content[hidden]) #chain-toggle{
    min-height:70px;gap:5px;
    font-size:clamp(15px,3.5vw,21px);line-height:1.15;
  }
  body[data-hero="true"] .chain-panel:has(#chain-content[hidden]) #chain-toggle small{
    margin-top:8px;font-size:10px;
  }
  body[data-hero="true"] .chain-panel:has(#chain-content[hidden]) .chain-chevron{
    font-size:17px;margin-top:3px;
  }
  body[data-hero="true"] .chain-panel:has(#chain-content:not([hidden])){
    top:calc(66px + 3vh);right:5%;width:min(75vw,320px);max-width:none;
    bottom:5vh;max-height:calc(95vh - 66px - 3vh);
  }
  .account-dialog{max-height:88vh;width:calc(100vw - 30px)}
  .account-grid{grid-template-columns:1fr}
  .account-role-list{max-height:250px}
  .account-head,.account-tabs,#account-register-view,#account-login-view{padding-left:17px;padding-right:17px}
  .account-foot{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .account-dialog::backdrop{backdrop-filter:none}
  body[data-hero="true"] .hero-actions button{transition:none}
}