: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; }

/* Use the same graphite product-page shell as ChatGPT and Steam, with a
   restrained Codex emerald glow. The stronger selector intentionally wins
   over the generic dark fallback loaded before this page stylesheet. */
html:has(body.codex-credits-body) {
  background:#181b20!important;
}

html body.codex-credits-body.home-gradient-page {
  background:
    radial-gradient(circle at 17% 16%,rgba(20,184,139,.12),transparent 30%),
    radial-gradient(circle at 84% 12%,rgba(94,233,255,.065),transparent 32%),
    linear-gradient(180deg,#22262d 0%,#1d2127 46%,#181b20 100%)!important;
  background-attachment:fixed!important;
}

html body.codex-credits-body.home-gradient-page::before {
  inset:-10% -8%;
  background:
    radial-gradient(circle at 18% 18%,rgba(20,184,139,.11),transparent 29%),
    radial-gradient(circle at 78% 14%,rgba(94,233,255,.055),transparent 30%)!important;
  filter:blur(90px) saturate(104%)!important;
  opacity:.72!important;
}
.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} }

/* Steam-style product checkout: visual card on the left, order form on the right. */
.codex-page {
  width:min(1180px,calc(100vw - 40px));
  margin:clamp(24px,3vw,42px) auto 82px;
}

.codex-checkout-layout {
  grid-template-columns:minmax(0,.82fr) minmax(460px,1fr);
  gap:22px;
  margin-top:28px;
}

.codex-details,
.codex-order {
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(18,29,44,.96),rgba(10,18,30,.94));
  box-shadow:0 24px 64px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.codex-product-card {
  position:sticky;
  top:116px;
  min-height:560px;
  padding:0;
  overflow:hidden;
}

.codex-product-card__media {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  height:320px;
  overflow:hidden;
  background:linear-gradient(145deg,#19c29a 0%,#13b48b 58%,#0b9c79 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.codex-product-card__media::before,
.codex-product-card__media::after {
  position:absolute;
  content:"";
  pointer-events:none;
}

.codex-product-card__media::before {
  inset:-28%;
  background:
    radial-gradient(circle at 28% 26%,rgba(255,255,255,.2),transparent 25%),
    radial-gradient(circle at 72% 76%,rgba(0,71,55,.25),transparent 32%);
}

.codex-product-card__media::after {
  inset:0;
  opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 94%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 94%);
}

.codex-product-card__lockup {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:#fff;
}

.codex-product-card__mark {
  display:block;
  width:148px;
  height:148px;
  background:#fff;
  -webkit-mask:url("/assets/img/services/chatgpt-symbol-mask-v2.webp?v=20260909-emerald-codex1") center/contain no-repeat;
  mask:url("/assets/img/services/chatgpt-symbol-mask-v2.webp?v=20260909-emerald-codex1") center/contain no-repeat;
  filter:drop-shadow(0 18px 32px rgba(1,75,57,.22));
}

.codex-product-card__lockup b {
  padding-left:.18em;
  font:900 26px/1 "Manrope","Inter",sans-serif;
  letter-spacing:.18em;
}

.codex-product-card__copy {
  padding:26px;
}

.codex-product-card__copy .codex-eyebrow {
  margin:0 0 10px;
}

.codex-product-card__copy h1 {
  margin:0;
  color:#f7f9fc;
  font:700 clamp(31px,3vw,42px)/1 "Space Grotesk","Manrope",sans-serif;
  letter-spacing:-.052em;
}

.codex-product-card__copy > p {
  margin:16px 0 0;
  color:rgba(224,232,242,.68);
  font-size:15px;
  line-height:1.55;
}

.codex-product-card__facts {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}

.codex-product-card__facts span {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:31px;
  padding:0 10px;
  border:1px solid rgba(53,228,154,.2);
  border-radius:999px;
  color:rgba(235,244,249,.82);
  background:rgba(53,228,154,.06);
  font-size:11px;
  font-weight:800;
}

.codex-product-card__facts span::before {
  content:"✓";
  color:var(--codex-green);
}

.codex-order {
  gap:18px;
  padding:clamp(24px,3vw,34px);
}

.codex-order__head h2 {
  max-width:430px;
  font-size:clamp(31px,3.2vw,43px);
}

.codex-order__head > strong { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }

.codex-option {
  min-height:126px;
  border-radius:20px;
}

.codex-field input {
  border-radius:18px;
}

.codex-payment { grid-template-columns:repeat(2,minmax(160px,220px)); justify-content:center; }
.codex-payment legend { width:100%; text-align:center; }
.codex-payment label > span { display:flex; align-items:center; justify-content:center; gap:10px; min-height:70px; border-radius:20px; }
.codex-payment img { grid-row:auto; }

/* Calm, legible checkout: packages use their full surface instead of
   concentrating every label in the left edge. */
.codex-page { width:min(1280px,calc(100vw - 48px)); }
.codex-checkout-layout { grid-template-columns:minmax(340px,.86fr) minmax(560px,1.14fr); gap:26px; }
.codex-product-card { min-height:590px; }
.codex-product-card__media { height:338px; }
.codex-product-card__copy { padding:30px; }
.codex-product-card__copy h1 { font-size:clamp(35px,3.25vw,46px); }
.codex-product-card__copy > p { font-size:17px; line-height:1.6; }
.codex-product-card__facts { gap:10px; margin-top:23px; }
.codex-product-card__facts span { min-height:36px; padding:0 13px; font-size:12.5px; }
.codex-order { gap:22px; padding:clamp(30px,3.5vw,44px); }
.codex-order__head > div > span { font-size:13px; }
.codex-order__head h2 { max-width:500px; font-size:clamp(36px,3.55vw,49px); }
.codex-order__head > strong { font-size:22px; font-weight:900; }
.codex-options { gap:14px; }
.codex-option { display:grid; place-items:center; min-height:150px; padding:19px 16px; text-align:center; }
.codex-option > span { width:100%; justify-items:center; align-self:center; gap:6px; text-align:center; }
.codex-option > span > strong,.codex-option > span > small { width:100%; text-align:center; }
.codex-option > span strong { font-size:clamp(36px,3.7vw,48px); }
.codex-option > span small { margin:0; font-size:14px; font-weight:800; }
.codex-option > em { left:50%; right:auto; top:11px; padding:5px 9px; font-size:10px; transform:translateX(-50%); }
.codex-field { gap:9px; }
.codex-field > span { font-size:17px; }
.codex-field > small { font-size:14px; }
.codex-field input { min-height:60px; padding:0 18px; font-size:16px; }
.codex-payment { gap:14px; }
.codex-payment legend { margin-bottom:10px; font-size:16px; }
.codex-payment label > span { min-height:76px; font-size:16px; }
.codex-payment strong { font-size:16px; }
.codex-order__legal { font-size:12px; }
.codex-submit { min-height:62px; font-size:17px; }
.codex-supporting { gap:16px; margin-top:22px; }
.codex-supporting summary { min-height:64px; padding:0 21px; font-size:16px; }
.codex-supporting details > div { padding:0 21px 21px; }
.codex-supporting p { font-size:14px; line-height:1.62; }

@media (max-width:900px) {
  .codex-page { width:min(760px,calc(100vw - 28px)); }
  .codex-checkout-layout { grid-template-columns:1fr; gap:18px; }
  .codex-product-card { min-height:0; }
}

@media (max-width:600px) {
  .codex-page { width:calc(100vw - 20px); }
  .codex-product-card__copy { padding:25px 21px; }
  .codex-product-card__copy h1 { font-size:36px; }
  .codex-product-card__copy > p { font-size:16px; }
  .codex-order { gap:19px; padding:25px 19px; }
  .codex-order__head h2 { font-size:36px; }
  .codex-options { gap:11px; }
  .codex-option { display:grid; min-height:118px; padding:18px 15px 14px; }
  .codex-option > span { display:grid; width:100%; justify-items:center; gap:5px; text-align:center; }
  .codex-option > span strong { font-size:39px; }
  .codex-option > span small { font-size:14px; }
  .codex-option > em { top:8px; }
  .codex-payment { grid-template-columns:1fr; }
  .codex-payment label > span { min-height:64px; }
}

/* Wider reading column for desktop: text and controls remain the focus rather
   than leaving unused space on both sides of the checkout. */
@media (min-width:901px) {
  .codex-page { width:min(1440px,calc(100vw - 56px)); }
  .codex-checkout-layout { grid-template-columns:minmax(390px,.88fr) minmax(680px,1.26fr); gap:30px; }
  .codex-product-card { min-height:640px; }
  .codex-product-card__media { height:370px; }
  .codex-product-card__copy { padding:34px; }
  .codex-product-card__copy h1 { font-size:clamp(42px,3.45vw,54px); }
  .codex-product-card__copy > p { font-size:18px; line-height:1.65; }
  .codex-product-card__facts span { min-height:40px; padding:0 15px; font-size:14px; }
  .codex-order { gap:25px; padding:clamp(36px,3.8vw,52px); }
  .codex-order__head > div > span { font-size:14px; }
  .codex-order__head h2 { max-width:600px; font-size:clamp(43px,3.8vw,56px); }
  .codex-order__head > strong { font-size:25px; }
  .codex-options { gap:16px; }
  .codex-option { min-height:170px; padding:22px 18px; }
  .codex-option > span strong { font-size:clamp(42px,3.9vw,54px); }
  .codex-option > span small { font-size:16px; }
  .codex-option > em { font-size:11px; }
  .codex-field > span { font-size:18px; }
  .codex-field > small { font-size:15px; }
  .codex-field input { min-height:66px; font-size:17px; }
  .codex-payment legend { font-size:17px; }
  .codex-payment label > span { min-height:82px; font-size:18px; }
  .codex-payment strong { font-size:18px; }
  .codex-order__legal { font-size:13px; }
  .codex-submit { min-height:68px; font-size:19px; }
  .codex-supporting summary { min-height:70px; font-size:17px; }
  .codex-supporting p { font-size:15px; }
}

.codex-submit {
  min-height:58px;
  border-radius:20px;
}

.codex-supporting {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.codex-supporting details {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  background:rgba(15,25,39,.72);
}

.codex-supporting summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  padding:0 18px;
  color:#eef4f8;
  font-size:14px;
  font-weight:850;
  cursor:pointer;
  list-style:none;
}

.codex-supporting summary::-webkit-details-marker { display:none; }
.codex-supporting summary::after { content:"+"; color:var(--codex-green); font-size:22px; }
.codex-supporting details[open] summary::after { content:"−"; }
.codex-supporting details > div { padding:0 18px 18px; }
.codex-supporting p { margin:0; color:rgba(224,232,242,.66); font-size:13px; line-height:1.55; }

@media (max-width:900px) {
  .codex-page { width:min(720px,calc(100vw - 24px)); }
  .codex-checkout-layout { grid-template-columns:1fr; }
  .codex-product-card { position:relative; top:auto; min-height:0; }
  .codex-product-card__media { height:270px; }
  .codex-product-card__copy { padding:24px; }
}

@media (max-width:600px) {
  .codex-page { width:calc(100vw - 18px); }
  .codex-checkout-layout { gap:14px; margin-top:14px; }
  .codex-product-card,.codex-order { border-radius:24px; }
  .codex-product-card__media { height:220px; }
  .codex-product-card__mark { width:108px; height:108px; }
  .codex-product-card__lockup b { font-size:21px; }
  .codex-product-card__copy h1 { font-size:34px; }
  .codex-order { padding:21px 16px; }
  .codex-order__head { display:grid; }
  .codex-order__head > strong { justify-self:start; }
  .codex-options,.codex-payment,.codex-supporting { grid-template-columns:1fr; }
  .codex-option { min-height:auto; }
}

/* 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; }

/* Use the same type scale and weights as the Steam/Mann Co checkout. */
.codex-details h2,
.codex-order h2,
.codex-info h2,
.codex-terms h2 {
  font-family:"Space Grotesk","Manrope",sans-serif;
  font-size:clamp(28px,3vw,42px);
  line-height:1;
  font-weight:700;
  letter-spacing:-.05em;
}
.codex-terms h2 { font-size:28px; }
.codex-field>span {
  font-size:16px;
  font-weight:900;
  letter-spacing:-.01em;
}
.codex-field>small {
  font-size:13px;
  line-height:1.35;
}
.codex-option>span strong,
.codex-entry__content strong { font-family:"Space Grotesk","Manrope",sans-serif; font-weight:700; }

/* 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; } }

/* This page has no product promo pill in the header. Keep navigation in the
   flexible right-hand column so it remains next to the language selector. */
@media (min-width:1181px) {
  body.codex-credits-body header .header-quick-links {
    grid-column:3!important;
    justify-self:end!important;
    justify-content:flex-end!important;
    margin-left:auto!important;
  }
}