/* v5.13: Home "the stack". The approved logo, sliced into its levels (same pixels, clip-path only).
   Pick a trade: its level slides out, the others dim, a card explains where it sits in the build. */
.stk{--stk-gold:#E5AE55;--stk-gold-soft:#F3D9A4;--stk-blue:#9CC8FF;--stk-violet:#6D28D9;--stk-ink:#0B0B10;margin:8px 0 28px}
.stk-stage{position:relative;aspect-ratio:16/9;max-height:660px;width:100%;border-radius:20px;overflow:hidden;background:var(--stk-ink);
 border:1px solid #26232F;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 40px 80px -40px rgba(10,8,20,.55)}
.stk-bg{position:absolute;inset:0;pointer-events:none;
 background:
  radial-gradient(ellipse 34% 46% at 50% 44%,rgba(56,110,200,.26),transparent 70%),
  radial-gradient(ellipse 60% 40% at 50% 100%,rgba(109,40,217,.16),transparent 70%),
  linear-gradient(rgba(156,200,255,.085) 1px,transparent 1px) 0 0/120px 120px,
  linear-gradient(90deg,rgba(156,200,255,.085) 1px,transparent 1px) 0 0/120px 120px,
  linear-gradient(rgba(156,200,255,.035) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,rgba(156,200,255,.035) 1px,transparent 1px) 0 0/24px 24px}
.stk-bg::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px 30px rgba(5,5,8,.75)}
.stk.is-run .stk-stage{background:#0A2340;transition:background-color .9s}
.stk-stage{transition:background-color .9s}

/* ticket: calm, small, reads like a job label */
.stk-ticket{position:absolute;left:24px;top:22px;margin:0;z-index:6;display:flex;flex-direction:column;gap:3px;padding:9px 12px 9px 14px;border-radius:8px;
 background:rgba(14,14,20,.72);border:1px solid rgba(255,255,255,.09);border-left:2px solid var(--stk-gold);backdrop-filter:blur(6px)}
.stk-tk-job{font:600 10.5px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--stk-gold)}
.stk-tk-st{font-size:13px;line-height:1.25;font-weight:600;color:#E7E5EE}

/* drawing-sheet stamp, bottom right */
.stk-stamp{position:absolute;right:20px;bottom:16px;margin:0;z-index:2;display:flex;gap:0;font:500 10px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(190,215,255,.5);border:1px solid rgba(156,200,255,.18)}
.stk-stamp>*{padding:6px 9px;border-left:1px solid rgba(156,200,255,.18)}.stk-stamp>:first-child{border-left:0;color:rgba(229,174,85,.75);font-weight:700}

/* the logo and its level slices */
.stk-art{position:absolute;left:50%;top:12.5%;width:32%;aspect-ratio:602/664;transform:translateX(-50%);z-index:3}
.stk-art img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.stk-floor{position:absolute;left:4%;right:4%;bottom:-7%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(4px);pointer-events:none}
.stk-final.is-sliced{opacity:0}
.stk-plan{opacity:0;filter:drop-shadow(0 0 2px rgba(120,180,255,.6));transition:opacity .35s}
.stk-plan.on{opacity:.75}
.stk-piece{--dx:0%;--dy:0%;transform:translate(var(--dx),var(--dy));
 filter:drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(1) saturate(1);
 transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .4s ease,opacity .4s ease}
.stk-piece.is-dim{filter:drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(.48) saturate(.65)}
.stk-piece.is-out{z-index:2;filter:drop-shadow(0 0 1px rgba(229,174,85,.9)) drop-shadow(0 18px 16px rgba(0,0,0,.6)) brightness(1.08) saturate(1.05)}
.stk-piece.is-out[data-band="0"]{filter:drop-shadow(0 0 2px rgba(229,174,85,.9)) drop-shadow(0 0 18px rgba(229,174,85,.55)) drop-shadow(0 16px 14px rgba(0,0,0,.55)) brightness(1.08)}
.stk-piece.is-hover{--dy:-2.5%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5)) brightness(1.12) saturate(1)}
.stk-scan{position:absolute;left:-8%;right:-8%;height:2px;top:100%;opacity:0;pointer-events:none;
 background:linear-gradient(90deg,transparent,var(--stk-gold) 20%,#FFF1CF 50%,var(--stk-gold) 80%,transparent);box-shadow:0 0 14px 2px rgba(229,174,85,.55)}
.stk-outline{opacity:.9}

/* Pinnacle (the spire) */
.stk-spire{position:absolute;left:50%;top:5.2%;transform:translateX(-50%);z-index:6;white-space:nowrap;cursor:pointer;
 font-family:inherit;font-size:13px;font-weight:600;line-height:1;letter-spacing:.01em;color:var(--stk-gold-soft);padding:7px 14px 7px 26px;border-radius:999px;
 background:rgba(229,174,85,.1);border:1px solid rgba(229,174,85,.45);transition:background .2s,border-color .2s,color .2s}
.stk-spire::before{content:"";position:absolute;left:12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--stk-gold);box-shadow:0 0 8px rgba(229,174,85,.9)}
.stk-spire:hover,.stk-spire[aria-expanded=true]{background:rgba(229,174,85,.2);border-color:var(--stk-gold);color:#FFF4DE}
.stk-spire:focus-visible{outline:2px solid var(--stk-gold);outline-offset:3px}
.stk-art.has-spire-hit{cursor:default}

/* leader lines: straight drafting lines with an elbow, a tick at the trade and a dot on the level */
.stk-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.stk-lines path{fill:none;stroke:rgba(170,210,255,.42);stroke-width:1;stroke-linejoin:round;transition:stroke .25s,opacity .25s}
.stk-lines circle{fill:rgba(170,210,255,.75);transition:fill .25s,opacity .25s}
.stk-lines circle.t{fill:none;stroke:rgba(170,210,255,.55);stroke-width:1}
.stk-lines .on{stroke:var(--stk-gold)}.stk-lines path.on{stroke-width:1.6}
.stk-lines circle.on{fill:var(--stk-gold)}.stk-lines circle.t.on{fill:none;stroke:var(--stk-gold)}
.stk-lines .off{opacity:0}
.stk.is-open .stk-lines path:not(.on),.stk.is-open .stk-lines circle:not(.on){opacity:.35}

/* trade buttons */
.stk-chip{position:absolute;z-index:5;transform:translateY(-50%);display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;
 min-width:184px;padding:10px 12px 10px 15px;border-radius:10px;cursor:pointer;text-align:left;font-family:inherit;color:#F4F3F8;
 background:rgba(18,17,25,.8);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 24px -14px rgba(0,0,0,.8);
 transition:background .2s,border-color .2s,opacity .25s,box-shadow .2s}
.stk-chip-t{grid-column:1;font-size:15.5px;font-weight:700;line-height:1.15;letter-spacing:-.005em}
.stk-chip small{grid-column:1;display:block;margin-top:3px;font-size:12.5px;font-weight:500;line-height:1.25;color:#A3A1AE}
.stk-plus{grid-column:2;grid-row:1/span 2;position:relative;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.22);transition:transform .25s,border-color .2s}
.stk-plus::before,.stk-plus::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px;margin:-.75px 0 0 -4px;background:#C9C7D3;border-radius:1px}
.stk-plus::after{transform:rotate(90deg)}
.stk-chip.l{right:calc(50% + 19.5%)}
.stk-chip.r{left:calc(50% + 19.5%)}
.stk-chip:hover,.stk-chip.is-hl{background:rgba(32,29,42,.92);border-color:rgba(229,174,85,.55)}
.stk-chip[aria-expanded=true]{background:rgba(229,174,85,.14);border-color:var(--stk-gold);box-shadow:0 0 0 1px rgba(229,174,85,.35),0 14px 30px -14px rgba(0,0,0,.9)}
.stk-chip[aria-expanded=true] .stk-plus{transform:rotate(45deg);border-color:var(--stk-gold)}
.stk-chip[aria-expanded=true] .stk-plus::before,.stk-chip[aria-expanded=true] .stk-plus::after{background:var(--stk-gold)}
.stk-chip:focus-visible{outline:2px solid var(--stk-gold);outline-offset:2px}
.stk-chip.is-under{opacity:0;pointer-events:none}
.stk.is-run .stk-chip,.stk.is-run .stk-spire{opacity:0;pointer-events:none}

/* the card */
.stk-card{position:absolute;z-index:7;top:50%;transform:translateY(-50%);width:min(33%,420px);max-height:calc(100% - 40px);overflow:auto;
 padding:20px 22px 20px;border-radius:14px;color:#ECEAF2;background:linear-gradient(180deg,rgba(26,24,36,.97),rgba(17,16,24,.97));
 border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 30px 70px -20px rgba(0,0,0,.85);scrollbar-width:thin}
.stk-card[hidden]{display:none}
.stk-card[data-side=r]{right:22px}.stk-card[data-side=l]{left:22px}
.stk-card.is-in{animation:stkIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes stkIn{from{opacity:0;transform:translateY(-50%) translateX(var(--from,10px))}to{opacity:1;transform:translateY(-50%)}}
.stk-card[data-side=l]{--from:-10px}
.stk-card-top{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;margin-bottom:12px}
.stk-meter{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;width:34px}
.stk-meter li{height:5px;border-radius:1.5px;background:rgba(156,200,255,.16)}
.stk-meter li:nth-child(1){width:8px}.stk-meter li:nth-child(2){width:14px}.stk-meter li:nth-child(3){width:19px}
.stk-meter li:nth-child(4){width:24px}.stk-meter li:nth-child(5){width:29px}.stk-meter li:nth-child(6){width:34px}
.stk-meter li.is-built{background:rgba(156,200,255,.55)}
.stk-meter li.is-cur{background:var(--stk-gold);box-shadow:0 0 8px rgba(229,174,85,.7)}
.stk-eyebrow{margin:0 0 4px;font:600 11px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--stk-gold)}
.stk-card h3{margin:0;font-size:22px;line-height:1.15;letter-spacing:-.015em;color:#fff;outline:none}
.stk-x{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:transparent;cursor:pointer;color:#D6D4DE}
.stk-x svg{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}
.stk-x:hover{background:rgba(255,255,255,.07);color:#fff}
.stk-x:focus-visible{outline:2px solid var(--stk-gold);outline-offset:2px}
.stk-body{margin:0 0 14px;font-size:15px;line-height:1.55;color:#E2E0E9}
.stk-rel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.stk-rel>div{padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.stk-rel dt{font:600 10.5px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:#9C99A8;margin-bottom:5px}
.stk-rel dd{margin:0;display:flex;flex-wrap:wrap;gap:4px 6px;font-size:13.5px;color:#D9D7E1}
.stk-rel dd button{font:inherit;font-weight:600;color:var(--stk-blue);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(156,200,255,.4);text-underline-offset:3px}
.stk-rel dd button:hover{color:#fff;text-decoration-color:#fff}
.stk-rel dd button:focus-visible{outline:2px solid var(--stk-gold);outline-offset:2px;border-radius:2px}
.stk-shared{margin:0 0 16px;padding:11px 0 0 13px;border-left:2px solid rgba(109,40,217,.9);border-top:1px solid rgba(255,255,255,.07)}
.stk-shared-h{margin:0 0 5px;font-size:12.5px;font-weight:700;color:#C4B5FD;letter-spacing:.01em}
.stk-shared p:not(.stk-shared-h){margin:0;font-size:13.5px;line-height:1.55;color:#B9B6C6}
.stk-go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:#fff;text-decoration:none;padding:9px 14px;border-radius:999px;background:var(--stk-violet);border:1px solid #8B5CF6;transition:background .2s}
.stk-go::after{content:"\2192";font-weight:700}
.stk-go:hover{background:#5B21B6}
.stk-go:focus-visible{outline:2px solid var(--stk-gold);outline-offset:3px}
.stk-cap{text-align:center;margin:14px auto 0;max-width:80ch;text-wrap:balance;color:var(--ink-soft,#52525B);font-size:16px}

@media (max-width:1180px){
 .stk-chip{min-width:160px;padding:9px 10px 9px 12px}.stk-chip-t{font-size:14.5px}.stk-chip small{font-size:12px}
 .stk-chip.l{right:calc(50% + 17.5%)}.stk-chip.r{left:calc(50% + 17.5%)}.stk-art{width:28%}
 .stk-card{width:min(38%,400px);padding:16px 18px}.stk-body{font-size:14px}.stk-stamp{display:none}
}
/* phones and narrow tablets: logo, then the card, then the trade buttons */
@media (max-width:900px){
 .stk-stage{aspect-ratio:auto;max-height:none;display:flex;flex-direction:column;align-items:stretch;padding:16px 14px 16px}
 .stk-ticket{position:relative;left:auto;top:auto;align-self:flex-start;order:0;margin-bottom:14px}
 .stk-art{position:relative;left:auto;top:auto;transform:none;width:min(64%,260px);margin:4px auto 10px;order:2}
 .stk-spire{position:relative;left:auto;top:auto;transform:none;align-self:center;order:1;margin:0 0 12px}
 .stk-lines,.stk-stamp{display:none}
 .stk-card{position:relative;order:3;top:auto;transform:none;width:auto;max-height:none;overflow:visible;margin:10px 0 14px;left:auto!important;right:auto!important;padding:16px}
 .stk-card.is-in{animation:stkInM .28s ease-out}
 @keyframes stkInM{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
 .stk-chips{order:4;display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .stk-chip{position:static;transform:none;min-width:0;padding:10px 10px 10px 12px}
 .stk-chip.is-under{opacity:1;pointer-events:auto}
 .stk-piece.is-out{filter:drop-shadow(0 0 1.5px rgba(229,174,85,.95)) drop-shadow(0 0 10px rgba(229,174,85,.55)) brightness(1.1)}
}
@media (max-width:359px){.stk-rel{grid-template-columns:1fr}}
@media (max-width:420px){.stk-chip small{font-size:11.5px}.stk-plus{width:18px;height:18px}}
@media (prefers-reduced-motion:reduce){
 .stk-piece,.stk-chip,.stk-plan,.stk-lines path,.stk-lines circle,.stk-plus{transition:none}
 .stk-card.is-in{animation:none}
 .stk-piece.is-out{filter:drop-shadow(0 0 1.5px rgba(229,174,85,.95)) drop-shadow(0 0 10px rgba(229,174,85,.55)) brightness(1.1)}
}