:root { --codex-green:#35e49a; --codex-cyan:#5ee9ff; --codex-ink:#07111f; --codex-panel:rgba(13,25,42,.82); --codex-line:rgba(255,255,255,.12); }
.codex-credits-body { margin:0; color:#f5f8ff; background:radial-gradient(circle at 18% 14%,rgba(27,131,125,.22),transparent 30%),radial-gradient(circle at 84% 8%,rgba(38,91,184,.2),transparent 30%),linear-gradient(145deg,#070b12,#0b1422 52%,#081019); font-family:"Manrope",sans-serif; }
.codex-page { width:min(1240px,calc(100vw - 40px)); margin:clamp(26px,4vw,58px) auto 88px; }
.codex-back { display:inline-flex; align-items:center; gap:8px; min-height:38px; margin-bottom:20px; padding:0 14px; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:rgba(255,255,255,.72)!important; background:rgba(255,255,255,.035); font-size:13px; font-weight:800; text-decoration:none; }
.codex-back svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.codex-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); min-height:440px; overflow:hidden; border:1px solid var(--codex-line); border-radius:34px; background:linear-gradient(125deg,rgba(4,10,17,.98),rgba(10,29,48,.91)); box-shadow:0 30px 80px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.06); }
.codex-hero::after { content:""; position:absolute; inset:auto -8% -54% 28%; height:450px; border-radius:50%; background:rgba(52,228,154,.08); filter:blur(70px); pointer-events:none; }
.codex-hero__copy { position:relative; z-index:2; align-self:center; padding:clamp(34px,5vw,68px); }
.codex-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--codex-green); font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.codex-eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 18px currentColor; }
.codex-hero h1 { margin:18px 0 0; font:800 clamp(43px,6vw,76px)/.93 "Space Grotesk",sans-serif; letter-spacing:-.065em; }
.codex-hero h1 span { color:transparent; background:linear-gradient(90deg,var(--codex-green),var(--codex-cyan)); -webkit-background-clip:text; background-clip:text; }
.codex-hero__copy>p { max-width:610px; margin:24px 0 0; color:rgba(232,240,255,.68); font-size:clamp(15px,1.4vw,18px); line-height:1.6; }
.codex-hero__facts { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.codex-hero__facts span { padding:9px 13px; border:1px solid var(--codex-line); border-radius:999px; color:rgba(244,248,255,.82); background:rgba(255,255,255,.045); font-size:12px; font-weight:800; }
.codex-hero__visual { position:relative; min-height:420px; }
.codex-hero__glow { position:absolute; width:330px; height:330px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(52,228,154,.25),rgba(66,147,255,.1) 44%,transparent 70%); filter:blur(8px); }
.codex-hero__terminal { position:absolute; left:50%; top:50%; width:245px; height:245px; transform:translate(-50%,-50%) rotate(-7deg); display:grid; place-content:center; border:1px solid rgba(113,255,207,.35); border-radius:44px; background:linear-gradient(145deg,rgba(21,42,65,.94),rgba(4,12,22,.96)); box-shadow:0 28px 80px rgba(0,0,0,.5),0 0 80px rgba(45,223,156,.14),inset 0 1px rgba(255,255,255,.12); }
.codex-hero__terminal i { position:absolute; top:20px; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); }.codex-hero__terminal i:nth-child(1){left:22px}.codex-hero__terminal i:nth-child(2){left:37px}.codex-hero__terminal i:nth-child(3){left:52px}
.codex-hero__terminal strong { color:var(--codex-green); font:700 62px/1 "Space Grotesk"; text-shadow:0 0 28px rgba(53,228,154,.38); }.codex-hero__terminal span { margin-top:8px; color:rgba(255,255,255,.7); font:700 18px/1.15 "Space Grotesk"; letter-spacing:.09em; text-transform:uppercase; }
.codex-float { position:absolute; z-index:3; padding:10px 14px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(12,24,40,.8); box-shadow:0 18px 40px rgba(0,0,0,.25); color:#fff; font:800 15px "Space Grotesk"; backdrop-filter:blur(12px); }.codex-float--one{left:9%;top:23%;transform:rotate(-8deg)}.codex-float--two{right:9%;top:20%;transform:rotate(8deg)}.codex-float--three{right:12%;bottom:18%;transform:rotate(-5deg);color:var(--codex-green)}
.codex-checkout-layout { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(520px,1.2fr); gap:22px; margin-top:24px; align-items:start; }
.codex-details,.codex-order,.codex-info,.codex-terms article { border:1px solid var(--codex-line); border-radius:30px; background:linear-gradient(145deg,rgba(18,34,55,.86),rgba(8,18,31,.82)); box-shadow:0 22px 55px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(18px); }
.codex-details { position:sticky; top:112px; padding:clamp(25px,3vw,36px); }.codex-details h2,.codex-order h2,.codex-info h2,.codex-terms h2 { margin:12px 0 0; font:800 clamp(27px,3vw,40px)/1.02 "Space Grotesk",sans-serif; letter-spacing:-.045em; }.codex-details>p { margin:18px 0 24px; color:rgba(229,237,250,.65); line-height:1.58; }
.codex-security { display:flex; gap:13px; padding:16px 0; border-top:1px solid var(--codex-line); }.codex-security>span { flex:0 0 34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#07150f; background:var(--codex-green); font-weight:900; }.codex-security strong { display:block; font-size:14px; }.codex-security p { margin:5px 0 0; color:rgba(229,237,250,.58); font-size:13px; line-height:1.45; }
.codex-order { display:grid; gap:19px; padding:clamp(22px,3.4vw,40px); }.codex-order__head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.codex-order__head>div>span { color:var(--codex-green); font-size:12px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }.codex-order__head>strong { flex:0 0 auto; padding:12px 15px; border:1px solid rgba(53,228,154,.2); border-radius:16px; background:rgba(53,228,154,.1); color:var(--codex-green); font-size:18px; white-space:nowrap; }
.codex-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.codex-option { position:relative; min-width:0; padding:17px 14px 15px; border:1px solid var(--codex-line); border-radius:21px; background:rgba(255,255,255,.035); cursor:pointer; transition:.18s ease; }.codex-option:hover { transform:translateY(-2px); border-color:rgba(94,233,255,.32); }.codex-option.is-selected { border-color:rgba(53,228,154,.65); background:linear-gradient(150deg,rgba(53,228,154,.14),rgba(66,147,255,.08)); box-shadow:0 0 0 3px rgba(53,228,154,.07); }.codex-option input { position:absolute; opacity:0; pointer-events:none; }.codex-option>span { display:grid; }.codex-option>span strong { font:800 clamp(25px,3vw,34px)/1 "Space Grotesk"; }.codex-option>span small { margin-top:3px; color:rgba(229,237,250,.55); font-size:12px; }.codex-option>b { display:block; margin-top:16px; color:#fff; font-size:14px; }.codex-option>em { position:absolute; right:9px; top:9px; padding:4px 6px; border-radius:999px; background:rgba(94,233,255,.1); color:var(--codex-cyan); font-size:9px; font-style:normal; font-weight:900; text-transform:uppercase; }
.codex-field { display:grid; gap:7px; }.codex-field>span { font-size:14px; font-weight:900; }.codex-field>small { color:rgba(229,237,250,.55); font-size:12px; }.codex-field input { width:100%; box-sizing:border-box; min-height:53px; padding:0 16px; border:1px solid var(--codex-line); border-radius:17px; outline:none; background:rgba(3,10,19,.55); color:#fff; font:700 15px "Manrope"; }.codex-field input:focus { border-color:rgba(53,228,154,.68); box-shadow:0 0 0 4px rgba(53,228,154,.09); }
.codex-confirm { display:flex; align-items:flex-start; gap:11px; padding:15px; border:1px solid rgba(94,233,255,.16); border-radius:17px; background:rgba(94,233,255,.045); color:rgba(241,247,255,.76); font-size:13px; line-height:1.45; cursor:pointer; }.codex-confirm input { width:19px; height:19px; margin:0; accent-color:var(--codex-green); flex:0 0 auto; }
.codex-payment { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; border:0; }.codex-payment legend { grid-column:1/-1; margin-bottom:8px; font-size:14px; font-weight:900; }.codex-payment label { position:relative; cursor:pointer; }.codex-payment label>input { position:absolute; opacity:0; }.codex-payment label>span { display:grid; grid-template-columns:38px 1fr; align-items:center; column-gap:10px; padding:13px; border:1px solid var(--codex-line); border-radius:17px; background:rgba(255,255,255,.035); }.codex-payment label>input:checked+span { border-color:rgba(53,228,154,.58); background:rgba(53,228,154,.08); }.codex-payment img { grid-row:1/3; }.codex-payment strong,.codex-payment small { display:block; }.codex-payment small { color:rgba(229,237,250,.5); }
.codex-order__legal { margin:0; color:rgba(229,237,250,.46); font-size:11px; line-height:1.5; }.codex-order__legal a { color:rgba(229,237,250,.72); }.codex-order__status { min-height:0; margin:0; color:rgba(255,255,255,.7); font-size:13px; }.codex-order__status:empty { display:none; }.codex-order__status.is-error { color:#ff9da7; }.codex-order__status.is-loading { color:var(--codex-cyan); }
.codex-submit { min-height:56px; border:0; border-radius:18px; background:linear-gradient(100deg,var(--codex-green),#42d9c2); color:#06120d; font:900 15px "Manrope"; cursor:pointer; box-shadow:0 16px 34px rgba(53,228,154,.18); transition:.18s ease; }.codex-submit:hover { transform:translateY(-2px); box-shadow:0 20px 40px rgba(53,228,154,.25); }.codex-submit:disabled { opacity:.62; cursor:wait; transform:none; }
.codex-info { margin-top:24px; padding:clamp(25px,4vw,42px); }.codex-info>ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:28px 0 0; padding:0; list-style:none; }.codex-info li { min-width:0; padding:18px; border:1px solid var(--codex-line); border-radius:20px; background:rgba(255,255,255,.03); }.codex-info li>span { color:var(--codex-green); font:800 12px "Space Grotesk"; }.codex-info li>strong { display:block; margin-top:20px; }.codex-info li>p { margin:7px 0 0; color:rgba(229,237,250,.55); font-size:13px; line-height:1.45; }
.codex-terms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:24px; }.codex-terms article { padding:clamp(24px,3vw,34px); }.codex-terms h2 { font-size:27px; }.codex-terms p { margin:14px 0 0; color:rgba(229,237,250,.62); line-height:1.58; }
.codex-entry { width:min(1180px,calc(100vw - 40px)); margin:22px auto 0; }.codex-entry__card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; padding:20px 22px; border:1px solid rgba(255,255,255,.11); border-radius:27px; background:linear-gradient(120deg,rgba(10,23,39,.95),rgba(15,49,55,.9)); color:#fff; text-decoration:none; box-shadow:0 20px 46px rgba(0,0,0,.18); transition:.2s ease; }.codex-entry__card:hover { transform:translateY(-3px); border-color:rgba(53,228,154,.32); }.codex-entry__visual { position:relative; width:75px; height:75px; display:grid; place-items:center; border:1px solid rgba(53,228,154,.32); border-radius:22px; background:rgba(53,228,154,.08); color:var(--codex-green); font:800 24px "Space Grotesk"; }.codex-entry__visual i { position:absolute; right:-8px; bottom:-6px; padding:4px 7px; border-radius:8px; background:var(--codex-green); color:#07130e; font:900 9px "Manrope"; }.codex-entry__content { display:grid; gap:5px; }.codex-entry__eyebrow { color:var(--codex-green); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.codex-entry__content strong { font:800 clamp(22px,2.4vw,32px)/1.05 "Space Grotesk"; letter-spacing:-.035em; }.codex-entry__content>span:last-child { color:rgba(236,243,255,.6); font-size:13px; }.codex-entry__button { padding:13px 17px; border-radius:15px; background:#fff; color:#0b1420; font-size:13px; font-weight:900; white-space:nowrap; }
.codex-directory-card__media { position:relative; overflow:hidden; display:block; min-height:210px; background:radial-gradient(circle at 50% 50%,rgba(53,228,154,.22),transparent 30%),linear-gradient(145deg,#07101c,#0d263e)!important; }.codex-directory-card__media::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(to bottom,black,transparent); }.codex-directory-card__orb { position:absolute; left:50%; top:50%; width:112px; height:112px; transform:translate(-50%,-50%); display:grid; place-items:center; border:1px solid rgba(53,228,154,.38); border-radius:31px; background:rgba(6,17,29,.82); box-shadow:0 20px 55px rgba(0,0,0,.4),0 0 55px rgba(53,228,154,.12); color:var(--codex-green); font:800 30px "Space Grotesk"; }.codex-directory-card__amount { position:absolute; padding:7px 10px; border:1px solid rgba(255,255,255,.14); border-radius:11px; background:rgba(12,25,40,.78); color:#fff; font:800 11px "Space Grotesk"; }.codex-directory-card__amount--one{left:16%;top:21%}.codex-directory-card__amount--two{right:14%;top:19%}.codex-directory-card__amount--three{right:17%;bottom:17%;color:var(--codex-green)}
@media (max-width:900px) { .codex-page{width:min(100% - 24px,720px);margin-top:20px}.codex-hero{grid-template-columns:1fr}.codex-hero__visual{min-height:310px}.codex-checkout-layout{grid-template-columns:1fr}.codex-details{position:static}.codex-info>ol{grid-template-columns:repeat(2,minmax(0,1fr))}.codex-entry__card{grid-template-columns:auto 1fr}.codex-entry__button{grid-column:1/-1;text-align:center}.codex-terms{grid-template-columns:1fr} }
@media (max-width:600px) { .codex-page{width:calc(100% - 18px);margin-bottom:58px}.codex-hero{border-radius:25px}.codex-hero__copy{padding:28px 22px 10px}.codex-hero h1{font-size:43px}.codex-hero__visual{min-height:280px}.codex-hero__terminal{width:190px;height:190px;border-radius:34px}.codex-hero__terminal strong{font-size:48px}.codex-checkout-layout{gap:14px;margin-top:14px}.codex-details,.codex-order,.codex-info,.codex-terms article{border-radius:24px}.codex-options{grid-template-columns:1fr}.codex-option{display:flex;align-items:center;justify-content:space-between;padding:15px 16px}.codex-option>span{display:flex;align-items:baseline;gap:7px}.codex-option>span strong{font-size:27px}.codex-option>b{margin:0}.codex-option>em{left:62px;right:auto;top:5px}.codex-payment{grid-template-columns:1fr}.codex-info>ol{grid-template-columns:1fr}.codex-entry{width:calc(100vw - 18px);margin-top:14px}.codex-entry__card{grid-template-columns:1fr;padding:18px;border-radius:23px}.codex-entry__visual{width:62px;height:62px}.codex-entry__button{grid-column:auto}.codex-order__head{display:grid}.codex-order__head>strong{justify-self:start} }
@media (prefers-reduced-motion:reduce) { .codex-entry__card,.codex-option,.codex-submit{transition:none!important} }

/* Match the Steam/Mann Co page: Manrope for UI, Space Grotesk for display text. */
.codex-credits-body,
.codex-credits-body button,
.codex-credits-body input,
.codex-credits-body textarea,
.codex-credits-body select { font-family:"Manrope","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

/* The promo panel stays still; only its action responds to hover. */
.codex-entry__card,
.codex-entry__card:hover { transform:none; border-color:rgba(255,255,255,.11); }
.codex-entry__content strong,
.codex-entry__card:hover .codex-entry__content strong { color:rgba(255,255,255,.96)!important; }
.codex-entry__card:hover .codex-entry__eyebrow { color:var(--codex-green)!important; }
.codex-entry__card:hover .codex-entry__content>span:last-child { color:rgba(236,243,255,.6)!important; }
.codex-entry__button { display:inline-flex; align-items:center; justify-content:center; transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease; }
.codex-entry__card:hover .codex-entry__button { transform:translateY(-3px); background:var(--codex-green); color:#07130e; box-shadow:0 12px 26px rgba(53,228,154,.22); }
@media (prefers-reduced-motion:reduce) { .codex-entry__button { transition:none!important; }.codex-entry__card:hover .codex-entry__button { transform:none; } }