/* EscrowX 2033 homepage expansion — isolated from the existing archive viewer */
:root {
  --ex-cyan: #69edff;
  --ex-blue: #168cff;
  --ex-gold: #d9c58c;
  --ex-red: #ff3549;
  --ex-ink: #03080b;
}

.ex-homepage {
  min-height: 100svh;
  padding-bottom: 44px;
}

.ex-home-message {
  max-width: 960px;
  margin-bottom: 18px;
}

.ex-home-status {
  position: relative;
  z-index: 3;
  max-width: 960px;
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(105, 237, 255, .2);
  background: rgba(0, 10, 15, .72);
  box-shadow: 0 0 34px rgba(0, 170, 255, .08);
}

.ex-home-status div {
  padding: 12px 14px;
  color: #a7cbd1;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 1.2px;
}

.ex-home-status div + div { border-left: 1px solid rgba(105, 237, 255, .16); }
.ex-home-status strong { display: block; color: var(--ex-cyan); font-size: 13px; }
.ex-home-status .is-pending strong { color: var(--ex-gold); }

.ex-comic-strip {
  position: relative;
  z-index: 3;
  width: min(960px, calc(100% - 28px));
  min-height: 46px;
  margin: 0 auto 24px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid rgba(217, 197, 140, .58);
  background: linear-gradient(90deg, rgba(217,197,140,.05), rgba(0,126,174,.15), rgba(217,197,140,.05));
  color: #f3e4b8;
  font: 800 12px/1.3 "Courier New", monospace;
  letter-spacing: 1.6px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(0,162,255,.13), inset 0 0 18px rgba(217,197,140,.035);
}

.ex-comic-strip::before,
.ex-comic-strip::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105,237,255,.72));
}

.ex-comic-strip::after { transform: rotate(180deg); }

.ex-comic-strip small {
  color: #8acfd9;
  font-size: 9px;
  font-weight: normal;
  letter-spacing: 1px;
}

.ex-comic-strip:hover,
.ex-comic-strip:focus-visible {
  border-color: rgba(105,237,255,.82);
  color: #fff;
  box-shadow: 0 0 30px rgba(0,162,255,.28), inset 0 0 22px rgba(105,237,255,.06);
  outline: none;
}

.ex-home-buttons {
  max-width: 960px;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
}

.ex-home-btn {
  min-height: 72px;
  font-size: 13px;
  line-height: 1.35;
}

.ex-home-btn small {
  display: block;
  margin-top: 5px;
  color: #93afb5;
  font-size: 9px;
  font-weight: normal;
  letter-spacing: 1px;
}

.ex-home-btn--feature {
  border-color: rgba(217, 197, 140, .62);
  color: #f0dfac;
  background: linear-gradient(135deg, rgba(217, 197, 140, .15), rgba(0, 116, 160, .12), rgba(0, 12, 19, .94));
}

.ex-login-btn { grid-column: span 3; }

@media (max-width: 720px) {
  .ex-comic-strip { flex-direction: column; gap: 3px; }
  .ex-comic-strip::before,
  .ex-comic-strip::after { display: none; }
}

.ex-experience-overlay {
  position: fixed;
  inset: 0;
  z-index: 130000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 34px 18px;
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 10%, rgba(0, 136, 179, .22), transparent 38%), rgba(0, 3, 5, .97);
}

.ex-experience-overlay.is-open { display: flex; }

.ex-experience-panel {
  position: relative;
  width: min(1080px, 100%);
  min-height: min(710px, calc(100svh - 68px));
  padding: 54px clamp(18px, 4vw, 52px) 40px;
  box-sizing: border-box;
  border: 1px solid rgba(105, 237, 255, .35);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 100% 5px,
    linear-gradient(145deg, rgba(7, 25, 31, .98), rgba(1, 7, 11, .99));
  box-shadow: 0 0 50px rgba(0, 160, 220, .16), inset 0 0 65px rgba(0, 140, 190, .04);
}

.ex-experience-panel::before,
.ex-experience-panel::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 52px;
  pointer-events: none;
}

.ex-experience-panel::before { top: 10px; left: 10px; border-top: 2px solid var(--ex-gold); border-left: 2px solid var(--ex-gold); }
.ex-experience-panel::after { right: 10px; bottom: 10px; border-right: 2px solid var(--ex-blue); border-bottom: 2px solid var(--ex-blue); }

.ex-overlay-close {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(105, 237, 255, .55);
  background: #061117;
  color: #fff;
  font: 24px/1 monospace;
  cursor: pointer;
}

.ex-kicker { color: var(--ex-gold); font-size: 12px; letter-spacing: 2px; }
.ex-experience-panel h2 { margin: 10px 0 12px; color: #effdff; font-size: clamp(25px, 4vw, 42px); letter-spacing: 2px; }
.ex-lead { max-width: 760px; margin: 0 0 26px; color: #bce8ef; font-size: 16px; line-height: 1.7; }

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

.ex-product-card {
  padding: 22px;
  border: 1px solid rgba(105, 237, 255, .24);
  background: rgba(0, 11, 16, .75);
}

.ex-product-card h3 { margin: 0 0 12px; color: var(--ex-cyan); font-size: 19px; }
.ex-product-card p, .ex-product-card li { color: #c1d8dc; font-size: 14px; line-height: 1.65; }
.ex-product-card ul { padding-left: 19px; }
.ex-product-tag { display: inline-block; margin-bottom: 13px; padding: 5px 8px; border: 1px solid rgba(217,197,140,.35); color: var(--ex-gold); font-size: 10px; letter-spacing: 1px; }

.ex-action,
.ex-action:disabled {
  min-height: 48px;
  padding: 12px 17px;
  border: 1px solid rgba(105, 237, 255, .55);
  background: rgba(7, 34, 44, .9);
  color: #dffcff;
  font: 700 12px/1.4 "Courier New", monospace;
  letter-spacing: 1.2px;
}

button.ex-action:not(:disabled) { cursor: pointer; }
.ex-action:disabled { opacity: .62; cursor: not-allowed; }
.ex-action--gold { border-color: rgba(217,197,140,.65); color: #f2e2b5; }

.ex-guidance {
  margin-top: 20px;
  padding: 16px 18px;
  border-left: 3px solid var(--ex-gold);
  background: rgba(217,197,140,.07);
  color: #d8d0ba;
  font-size: 13px;
  line-height: 1.7;
}

.ex-link-placeholders { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* Demonstration pack */
.ex-pack-stage {
  position: relative;
  min-height: 470px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(105,237,255,.18);
  background: radial-gradient(circle, rgba(0,174,219,.14), transparent 55%), #010608;
}

.ex-pack-stage::before { content: "DEMONSTRATION CHAMBER // NO NFT ASSIGNED"; position: absolute; top: 14px; color: #52747b; font-size: 10px; letter-spacing: 1.5px; }

.ex-sealed-pack {
  width: 238px;
  min-height: 330px;
  padding: 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid #a8edf7;
  clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
  background: linear-gradient(145deg, rgba(221,250,255,.18), rgba(0,111,150,.22) 42%, rgba(1,7,10,.97));
  box-shadow: 0 0 25px rgba(95,230,255,.35), inset 0 0 45px rgba(62,204,255,.12);
  text-align: center;
}

.ex-sealed-pack h3 { margin: 42px 0 8px; color: #efffff; font-size: 28px; letter-spacing: 3px; }
.ex-sealed-pack p { color: var(--ex-gold); font-size: 12px; line-height: 1.6; }

.ex-card-deck { display: none; width: 100%; grid-template-columns: repeat(3, minmax(160px, 230px)); gap: clamp(12px, 3vw, 30px); justify-content: center; padding: 62px 16px 24px; box-sizing: border-box; }
.ex-card-deck.is-dealt { display: grid; }

.ex-demo-card {
  position: relative;
  aspect-ratio: 2 / 3;
  border: 0;
  padding: 0;
  background: transparent;
  perspective: 1000px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(75px) scale(.82) rotate(var(--card-tilt, 0deg));
  animation: dealCard .72s cubic-bezier(.17,.75,.25,1) forwards;
  animation-delay: var(--deal-delay, 0s);
}

.ex-demo-card-inner { position: absolute; inset: 0; transition: transform .68s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.ex-demo-card.is-revealed .ex-demo-card-inner { transform: rotateY(180deg); }
.ex-demo-card-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; backface-visibility: hidden; border: 1px solid rgba(105,237,255,.65); clip-path: polygon(7% 0, 93% 0, 100% 5%, 100% 95%, 93% 100%, 7% 100%, 0 95%, 0 5%); }
.ex-demo-card-back { background: repeating-linear-gradient(135deg, rgba(93,239,255,.12) 0 2px, transparent 2px 12px), radial-gradient(circle, rgba(0,174,255,.23), transparent 58%), #041016; color: #defcff; }
.ex-demo-card-back b { font-size: 48px; text-shadow: 0 0 18px rgba(105,237,255,.7); }
.ex-demo-card-back span { margin-top: 14px; color: #79a8b0; font-size: 9px; letter-spacing: 1.5px; }
.ex-demo-card-front { transform: rotateY(180deg); background: linear-gradient(160deg, rgba(217,197,140,.19), rgba(0,95,130,.2) 55%, #05090b); text-align: center; }
.ex-demo-card-front::before { content: ""; width: 72px; height: 92px; margin-bottom: 17px; border: 1px dashed rgba(217,197,140,.55); background: linear-gradient(135deg, transparent 48%, rgba(105,237,255,.15) 49% 51%, transparent 52%); }
.ex-demo-card-front strong { color: #f2e1ae; font-size: 14px; line-height: 1.4; }
.ex-demo-card-front span { margin-top: 9px; color: #8caeb4; font-size: 9px; line-height: 1.45; letter-spacing: 1px; }
.ex-pack-controls { display: none; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.ex-pack-controls.is-visible { display: flex; }

@keyframes dealCard { to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--card-tilt, 0deg)); } }

/* Comic archive placeholder */
.ex-comic-layout { display: grid; grid-template-columns: minmax(250px, 360px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.ex-comic-cover { position: relative; aspect-ratio: .72; padding: 24px; box-sizing: border-box; transform: rotate(-1.2deg); border: 2px solid #9e9271; background: radial-gradient(circle at 50% 35%, rgba(93,239,255,.22), transparent 30%), linear-gradient(155deg, #17323a, #071014 65%, #2a1d18); box-shadow: 15px 17px 0 rgba(0,0,0,.34), inset 0 0 45px rgba(255,213,145,.10); overflow: hidden; }
.ex-comic-cover::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(102deg, transparent 0 33px, rgba(245,226,178,.06) 34px 35px), radial-gradient(circle at 7% 92%, rgba(220,181,121,.28), transparent 19%); mix-blend-mode: screen; pointer-events: none; }
.ex-comic-edition { display: inline-block; padding: 5px 8px; border: 1px solid #dfc989; color: #f1dea6; font-size: 10px; letter-spacing: 1.5px; }
.ex-comic-cover h3 { position: relative; z-index: 1; margin: 35px 0 5px; color: #efffff; font-size: clamp(32px, 5vw, 55px); line-height: .9; letter-spacing: 2px; text-shadow: 3px 3px 0 #153f4c, 0 0 22px rgba(105,237,255,.6); }
.ex-comic-cover p { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 28px; color: #ecdcae; font-size: 13px; line-height: 1.5; }
.ex-comic-notes { display: grid; gap: 10px; margin: 22px 0; }
.ex-comic-notes span { padding: 10px 12px; border-left: 2px solid var(--ex-cyan); background: rgba(105,237,255,.05); color: #bad9de; font-size: 13px; line-height: 1.45; }

@media (max-width: 820px) {
  .ex-home-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-login-btn { grid-column: span 2; }
  .ex-home-status { grid-template-columns: 1fr; }
  .ex-home-status div + div { border-left: 0; border-top: 1px solid rgba(105,237,255,.16); }
  .ex-product-grid, .ex-comic-layout { grid-template-columns: 1fr; }
  .ex-comic-cover { width: min(330px, 90%); margin: 0 auto; }
  .ex-card-deck { grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 7px; }
}

@media (max-width: 520px) {
  .ex-home-buttons { grid-template-columns: 1fr; }
  .ex-login-btn { grid-column: auto; }
  .ex-experience-overlay { padding: 0; }
  .ex-experience-panel { min-height: 100svh; padding: 60px 15px 28px; border-left: 0; border-right: 0; }
  .ex-card-deck { grid-template-columns: 1fr; max-width: 230px; }
  .ex-demo-card { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-demo-card { animation-duration: .01ms; }
  .ex-demo-card-inner { transition-duration: .01ms; }
}

/* Home access console: polished metal, restrained moving reflections. */
.ex-home-nav.ex-home-buttons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;width:min(960px,100%);margin:0 auto 24px}
.ex-home-nav .ex-nav-full{grid-column:1/-1}
.ex-home-nav .ex-nav-half{grid-column:span 3}
.ex-home-nav .ex-nav-third{grid-column:span 2}
.ex-home-nav .ex-home-btn{
 isolation:isolate;min-width:0;min-height:82px;padding:18px 20px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
 border:1px solid #68bed1;border-radius:5px;color:#e4fbff;
 background:linear-gradient(180deg,#4c7482 0%,#1c3e4b 5%,#143442 46%,#071d2a 49%,#102c3b 94%,#396272 100%);
 box-shadow:inset 0 1px 0 #d4f6ffb3,inset 0 -2px 0 #020b12,0 3px 0 #020a10,0 0 15px #1aaeff18;
 text-shadow:0 1px 2px #000,0 0 12px #57dfff55;
 font-size:13px;letter-spacing:1.4px;transition:transform .18s,border-color .18s,box-shadow .18s;
}
.ex-home-nav .ex-home-btn::before{inset:4px;border:1px solid #a9efff24;border-radius:2px;pointer-events:none}
.ex-home-nav .ex-home-btn::after{
 content:"";position:absolute;inset:-35% auto -35% -60%;width:35%;height:auto;right:auto;top:-35%;
 background:linear-gradient(90deg,transparent,#d9f8ff08 25%,#e6fbff55 50%,#d9f8ff08 75%,transparent);
 transform:skewX(-22deg) translateX(0);pointer-events:none;opacity:0;
}
.ex-home-nav .ex-home-btn::after{animation:ex-metal-glimmer 8s ease-in-out infinite;animation-delay:var(--ex-glimmer-delay,0s)}
.ex-home-nav .ex-home-btn:hover{transform:translateY(-2px);border-color:#d3f9ff;box-shadow:inset 0 1px 0 #fff,0 3px 0 #020a10,0 0 23px #43cfff55}
.ex-home-nav .ex-home-btn:focus-visible{outline:3px solid #ffe4a0;outline-offset:4px}
.ex-home-nav .ex-home-btn:active{transform:translateY(1px)}
.ex-home-nav .ex-home-btn small{display:block;font-size:9px;font-weight:600;letter-spacing:1.2px;color:#add4df}
.ex-home-nav .ex-nav-thin{min-height:43px;padding:10px 16px;font-size:11px}
.ex-home-nav .ex-nav-comic{
 min-height:86px;border-color:#d4bd79;color:#fff0bf;
 background:linear-gradient(180deg,#8d7950 0%,#483c27 5%,#332b20 46%,#171c22 49%,#292b27 94%,#786843 100%);
}
.ex-home-nav .ex-nav-comic small{color:#e1cd9c}
.ex-home-nav .ex-nav-terminal{min-height:84px;font-size:15px;border-color:#64dcfa}
.ex-home-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px}
[data-ex-overlay="comic"] .ex-comic-reader-panel::before,
[data-ex-overlay="comic"] .ex-comic-reader-panel::after{display:none!important;content:none!important}
.ex-arena-panel{text-align:center;max-width:680px;min-height:460px}
.ex-arena-panel h2{font:800 clamp(24px,5vw,42px)/1.2 "Courier New",monospace;letter-spacing:4px;color:#e2f8ff}
.ex-arena-status{color:#e8d397;letter-spacing:3px;font:700 12px "Courier New",monospace}
.ex-arena-emblem{font-size:72px;color:#6deaff;text-shadow:0 0 28px #149fcc}
.ex-arena-panel p{line-height:1.7}
.ex-arena-panel .ex-home-btn{margin-top:24px}
@keyframes ex-metal-glimmer{0%,65%{opacity:0;transform:skewX(-22deg) translateX(0)}70%{opacity:.7}88%{opacity:.7}96%,100%{opacity:0;transform:skewX(-22deg) translateX(550%)}}
@media(max-width:600px){
 .ex-home-nav.ex-home-buttons{gap:10px}
 .ex-home-nav .ex-home-btn{padding:14px 10px;font-size:11px;letter-spacing:.8px}
 .ex-home-nav .ex-home-btn small{font-size:8px;letter-spacing:.5px}
 .ex-home-nav .ex-nav-thin{min-height:42px;padding:10px}
 .ex-home-nav .ex-nav-terminal{font-size:13px}
 .ex-home-nav .ex-nav-third{min-height:64px;font-size:10px;padding:12px 5px}
}
@media(max-width:360px){.ex-home-nav .ex-nav-half{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.ex-home-nav .ex-home-btn::after{animation:none}.ex-home-nav .ex-home-btn{transition:none}}

/* Equal-finish colour families; the comic retains its original slim strip. */
.ex-homepage,.ex-experience-overlay:not([data-ex-overlay="comic"]){text-transform:uppercase}
.ex-home-nav .ex-metal-violet{--metal-light:#c3edff;--metal-upper:#538eaf;--metal-middle:#376d8e;--metal-dark:#173e5b;--metal-lower:#2d6283;--metal-edge:#bdefff;--metal-text:#f2fbff;--metal-glow:#9bddff55;--metal-small:#d5f2ff}
.ex-home-nav .ex-metal-gold{--metal-light:#fff1a0;--metal-upper:#b69a34;--metal-middle:#8b721c;--metal-dark:#4d3e0d;--metal-lower:#79611a;--metal-edge:#ffe684;--metal-text:#fffbea;--metal-glow:#ffda5755;--metal-small:#fff1b3}
.ex-home-nav .ex-metal-blue{--metal-light:#6699bb;--metal-upper:#254d70;--metal-middle:#1c3b59;--metal-dark:#102334;--metal-lower:#1b354c;--metal-edge:#89c7f3;--metal-text:#e4f5ff;--metal-glow:#70bdff55;--metal-small:#b6dafa}
.ex-home-nav .ex-home-btn{
 border-color:var(--metal-edge);color:var(--metal-text);
 background:linear-gradient(180deg,var(--metal-light) 0%,var(--metal-upper) 5%,var(--metal-middle) 46%,var(--metal-dark) 49%,var(--metal-lower) 94%,var(--metal-light) 100%);
 box-shadow:inset 0 1px 0 #ffffffa8,inset 0 -2px 0 #020b12,0 3px 0 #020a10,0 0 12px var(--metal-glow);
 text-shadow:0 1px 2px #000,0 0 12px var(--metal-glow);
}
.ex-home-nav .ex-home-btn small{color:var(--metal-small)}
.ex-home-nav .ex-home-btn:hover{border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 3px 0 #020a10,0 0 23px var(--metal-glow)}
.ex-home-nav .ex-nav-comic{min-height:46px;padding:10px 18px;flex-direction:row;gap:18px;font-size:12px}
@media(max-width:600px){.ex-home-nav .ex-nav-comic{min-height:46px;padding:10px;gap:10px;font-size:10px}}
@media(max-width:380px){.ex-home-nav .ex-nav-comic small{display:none}}

/* Approved calm Home and confidential access navigation. */
.ex-home-nav .ex-home-btn{--metal-light:#557887;--metal-upper:#203d4f;--metal-middle:#172f41;--metal-dark:#0b1b2a;--metal-lower:#183143;--metal-edge:#bba46b;--metal-text:#f2e8cd;--metal-small:#c0d9e3;--metal-glow:#60b9df28}
.ex-home-nav .ex-home-btn::before{border-color:#d8bf7b26}
.ex-home-nav .ex-home-btn:hover{border-color:#e3cf98}
.paper-actions{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px dashed #43382b;padding-top:22px;margin-top:24px}
.paper-actions button,.paper-return{appearance:none;position:relative;border:2px solid #28221a;border-radius:0;background:linear-gradient(135deg,#3e35210a,#17100a18);box-shadow:inset 0 0 0 2px #e8d5ac,inset 0 0 0 3px #39302077;color:#211d16;font:900 12px/1.5 "Courier New",monospace;letter-spacing:1px;padding:15px 12px;cursor:pointer;text-transform:uppercase}
.paper-actions button:first-child{grid-column:1/-1;padding:9px 12px}
.paper-actions button:hover,.paper-return:hover{background:#252119;color:#f3dfb6}
.paper-actions button:focus-visible,.paper-return:focus-visible{outline:3px solid #332717;outline-offset:3px}
.paper-return{margin-top:20px}

.paper-actions{white-space:normal}
@media(max-width:600px){.paper-actions{gap:8px}.paper-actions button{font-size:10px;padding:12px 8px}}