/* ==========================================================================
   Codr — Courses, Career paths and Games.
   Loaded only on those three pages (functions.php), so nothing here can touch the home page.
   Built from the same pieces as home: sky hero with floats, a card that rises over the curve,
   white "key" cards with a lip, pastel pads, Cody's FAQ.
   ========================================================================== */

/* ---------- Tones (course / career / game colours) ---------- */
.cp-tone--brand   { --t: var(--codr-brand);   --td: var(--codr-brand-dark);   --tp: var(--codr-brand-pale);   --ti: var(--codr-brand-ink); }
.cp-tone--purple  { --t: var(--codr-purple);  --td: var(--codr-purple-dark);  --tp: var(--codr-purple-pale);  --ti: var(--codr-purple-ink); }
.cp-tone--gold    { --t: var(--codr-gold);    --td: var(--codr-gold-dark);    --tp: var(--codr-gold-pale);    --ti: var(--codr-gold-ink); }
.cp-tone--success, .cp-tone--green { --t: var(--codr-success); --td: var(--codr-success-dark); --tp: var(--codr-success-pale); --ti: var(--codr-success-ink); }
.cp-tone--orange  { --t: var(--codr-orange);  --td: var(--codr-orange-dark);  --tp: var(--codr-orange-pale);  --ti: var(--codr-orange-ink); }
.cp-tone--mythic  { --t: var(--codr-mythic);  --td: var(--codr-mythic-dark);  --tp: var(--codr-mythic-pale);  --ti: var(--codr-mythic-ink); }

/* ---------- Hero: quick facts under the buttons ---------- */
.cp-facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; }
.cp-facts li { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.16); border: 2px solid rgb(255 255 255 / 0.28); color: #fff; font-size: 15px; font-weight: 700; }
.cp-facts b { font-size: 18px; font-weight: 900; }
.cp-hero .codr-hero-visual { position: relative; }

/* ---------- The card over the curve: head + quick links ---------- */
.cp-lift-head { text-align: center; margin-bottom: clamp(18px, 2.4vw, 26px); }
.cp-lift-head .codr-eyebrow { margin: 0 0 6px; }
.cp-lift-title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.01em; color: var(--codr-ink); }


.cp-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.cp-picks a { display: flex; align-items: center; gap: 14px; height: 100%; box-sizing: border-box; padding: 16px 16px 14px; border-radius: 20px; border: 2px solid var(--codr-edge); border-bottom-width: 4px; background: #fff; color: var(--codr-ink); text-decoration: none; transition: transform 120ms var(--codr-ease-out), border-color 200ms, background-color 200ms; }
.cp-picks b { display: block; font-size: 16px; font-weight: 800; line-height: 1.25; }
.cp-picks small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--codr-ink-secondary); }

/* Games: four coloured picks */
.cp-pick-ico { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--gc); box-shadow: 0 4px 0 var(--gd); color: #fff; transition: transform 380ms var(--codr-ease-spring); }
.cp-pick-ico svg { width: 30px; height: 30px; }
.cp-picks a:hover { border-color: var(--gc); background: var(--gp); transform: translateY(-2px); }
.cp-picks a:hover .cp-pick-ico { transform: scale(1.08) rotate(-6deg); }

/* ---------- Section heads ---------- */
.cp-head { max-width: 760px; margin: 0 0 clamp(28px, 3.6vw, 44px); }
.cp-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.cp-head .codr-eyebrow { margin: 0 0 10px; }
.cp-head h2, .cp-game-text h2, .cx-feature-text h2 { margin: 0; font-size: clamp(30px, 3.8vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--codr-ink); text-wrap: balance; }
.cp-intro { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: var(--codr-ink-secondary); text-wrap: pretty; }
.cp-used { display: inline; }
.cp-intro a, .cp-used a { color: var(--codr-brand-ink); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--codr-brand-pale); }
.cp-intro a:hover, .cp-used a:hover { border-color: var(--codr-brand-light); }
.codr-eyebrow.codr-eyebrow--green { color: var(--codr-success-ink); }
.codr-eyebrow.codr-eyebrow--orange { color: var(--codr-orange-ink); }
.codr-eyebrow.codr-eyebrow--purple { color: var(--codr-purple-ink); }
.codr-eyebrow.codr-eyebrow--gold { color: var(--codr-gold-ink); }

.cp-link { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; color: var(--codr-brand-ink); text-decoration: none; }
.cp-link span { transition: transform 200ms var(--codr-ease-out); }
.cp-link:hover span { transform: translateX(4px); }

body .e-con.cp-group--tint { background: var(--codr-elevated); }


.cp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.cp-points li { display: flex; gap: 16px; align-items: flex-start; }
.cp-points h3 { margin: 2px 0 4px; font-size: 20px; font-weight: 800; color: var(--codr-ink); }
.cp-points p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--codr-ink-secondary); }
.cp-point-ico { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 16px; color: #fff; }
.cp-point-ico svg { width: 26px; height: 26px; }
.cp-ico--brand { background: var(--codr-brand); box-shadow: 0 4px 0 var(--codr-brand-dark); }
.cp-ico--green { background: var(--codr-success); box-shadow: 0 4px 0 var(--codr-success-dark); }
.cp-ico--purple { background: var(--codr-purple); box-shadow: 0 4px 0 var(--codr-purple-dark); }
.cp-ico--gold { background: var(--codr-gold); box-shadow: 0 4px 0 var(--codr-gold-dark); color: var(--codr-gold-ink); }
.cp-ico--orange { background: var(--codr-orange); box-shadow: 0 4px 0 var(--codr-orange-dark); }



/* ---------- Blog guides ---------- */
.cp-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cp-guide a { display: flex; flex-direction: column; height: 100%; border-radius: 24px; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 5px; overflow: hidden; color: inherit; text-decoration: none; transition: transform 200ms var(--codr-ease-out), box-shadow 200ms; }
.cp-guide a:hover { transform: translateY(-2px); border-color: var(--codr-edge-strong); color: inherit; }
.cp-guide-media { aspect-ratio: 1200 / 630; background: var(--codr-brand-pale); overflow: hidden; }
.cp-guide-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--codr-ease-out); }
.cp-guide-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.cp-guide h3 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--codr-ink); text-wrap: balance; }
.cp-guide p { margin: 8px 0 14px; font-size: 15px; line-height: 1.55; color: var(--codr-ink-secondary); }
.cp-guide .cp-link { margin-top: auto; }


/* ---------- Games ---------- */
body .e-con.cp-game { --padding-top: clamp(48px, 6vw, 88px); --padding-bottom: clamp(48px, 6vw, 88px); }
.cp-game-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cp-game--rev .cp-game-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.cp-game--rev .cp-game-visual { order: 2; }
.cp-game-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
.cp-game-pad { position: absolute; inset: 4% 2%; border-radius: 40px; background: var(--gp) radial-gradient(rgb(255 255 255 / 0.8) 1.6px, transparent 1.8px) 0 0 / 22px 22px; border: 2px solid color-mix(in srgb, var(--gc) 22%, transparent); }
.cp-game-visual > figure { position: relative; z-index: 1; margin: 0; }
.cp-gchips { display: flex; gap: 8px; margin-bottom: 12px; }
.cp-gchip { padding: 6px 12px; border-radius: 999px; background: var(--gp); color: var(--gi); font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.cp-gchip--gold { background: var(--codr-gold-pale); color: var(--codr-gold-ink); }
.cp-game-text h2 { color: var(--gi); }
.cp-game-tag { margin: 6px 0 12px; font-size: 21px; font-weight: 800; color: var(--codr-ink); }
.cp-game-text > p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: var(--codr-ink-secondary); }
.cp-gstats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; }
.cp-gstats li { display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 10px 14px 8px; border-radius: 16px; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; }
.cp-gstats b { font-size: 24px; font-weight: 900; line-height: 1.1; color: var(--gi); }
.cp-gstats small { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--codr-ink-muted); }
.cp-tags--game li { background: var(--gp); color: var(--gi); }
.cp-play-title { margin: 26px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--codr-ink-muted); }
.cp-play { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cp-play li { display: flex; gap: 14px; align-items: flex-start; }
.cp-play-n { display: grid; place-items: center; width: 36px; height: 34px; flex: none; border-radius: 50%; background: var(--gc); box-shadow: 0 4px 0 var(--gd); color: #fff; font-weight: 900; }
.cp-play h3 { margin: 4px 0 2px; font-size: 17px; font-weight: 800; color: var(--codr-ink); }
.cp-play p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--codr-ink-secondary); }
.cp-glinks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0 !important; }
.cp-glinks .cp-link { color: var(--gi); }
.cp-game + .cp-game { border-top: 2px solid var(--codr-edge); }



/* ---------- Responsive (games, guides, picks) ---------- */
@media (max-width: 1080px) {
  .cp-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cp-game-inner, .cp-game--rev .cp-game-inner { grid-template-columns: minmax(0, 1fr); }
  .cp-game--rev .cp-game-visual { order: 0; }
  .cp-game-visual { min-height: 480px; }
  .cp-guides { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cp-picks { grid-template-columns: minmax(0, 1fr); }
  .cp-intro { font-size: 17px; }
  .cp-facts li { font-size: 14px; padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-guide a, .cp-pick-ico { transition: none; }
}

/* Hero floats: Cody is narrower here than on home, so the layer reaches past him */
.cp-hero .codr-floats { inset: -4% -12% -2%; }
@media (max-width: 900px) { .cp-hero .codr-floats { inset: 0 2%; } }


/* FAQ: the controller pose is a taller clip than the blackboard one, so it's drawn narrower
   to stand at the same height as Cody in the home page FAQ. */
.codr-faq-pip .codr-pip.cp-pip-faq-tall { width: min(64%, 244px); }

/* "Practice that feels like play" uses the home page's step cards; a rule separates it from the last game */
body .e-con.cp-game + .cp-why-sec { border-top: 2px solid var(--codr-edge); }

/* Games hero: Cody at the CRT — one floor shadow under Cody (::after) and one under the TV and console (::before),
   placed from the clip's own frame (540px square: console foot ≈ x 40–225 / y 430, Cody ≈ x 265–500 / y 447) */
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-crt::after,
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-crt::before { content: ""; position: absolute; bottom: auto; border-radius: 50%; background: rgb(8 60 100 / 0.2); z-index: -1; }
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-crt { isolation: isolate; }
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-crt::after { left: 49%; right: 6%; top: 80.4%; height: 4.6%; }
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-crt::before { left: 5%; right: 56%; top: 77.6%; height: 4.4%; }

/* ==========================================================================
   Contact — the address on a card over the curve, four topic keys, tips with Cody.
   ========================================================================== */
.ct-mail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2.6vw, 28px); }
.ct-mail-icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: var(--codr-brand); border: 2px solid var(--codr-brand-dark); border-bottom-width: 5px; color: #fff; }
.ct-mail-icon svg { width: 38px; height: 38px; }
.ct-mail-text { min-width: 0; }
.ct-mail-text .codr-eyebrow { margin: 0 0 4px; }
.ct-mail-addr { display: inline-block; font-size: clamp(24px, 3.2vw, 36px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: var(--codr-ink); text-decoration: none; overflow-wrap: anywhere; }
.ct-mail-addr:hover { color: var(--codr-brand-ink); }
.ct-mail-note { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--codr-ink-secondary); }
.ct-mail-actions { display: flex; gap: 12px; }
.ct-mail-actions .codr-btn { gap: 8px; white-space: nowrap; }
.ct-mail-actions svg { width: 20px; height: 20px; flex: none; }
.ct-write, .ct-write:visited { color: #fff; text-decoration: none; }
/* The copy key swaps its label for a green "Copied!" */
.ct-copy { position: relative; }
.ct-copy-idle, .ct-copy-done { display: inline-flex; align-items: center; gap: 8px; transition: opacity 160ms, transform 220ms var(--codr-ease-spring); }
.ct-copy-done { position: absolute; inset: 0; justify-content: center; opacity: 0; transform: scale(0.8); color: var(--codr-success-ink); }
.ct-copy.is-copied { border-color: var(--codr-success); --lip: var(--codr-success-dark); background: var(--codr-success-pale); }
.ct-copy.is-copied .ct-copy-idle { opacity: 0; transform: scale(0.8); }
.ct-copy.is-copied .ct-copy-done { opacity: 1; transform: none; }

/* Topic keys: a tone each, the whole card opens the email */
.ct-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); list-style: none; margin: 0; padding: 0; }
.ct-topics li { display: flex; }
.ct-topic {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px 20px;
  background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 5px; border-radius: 24px; color: var(--codr-ink); text-decoration: none;
  transition: transform 260ms var(--codr-ease-out), border-color 260ms;
}
.ct-topic-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--tp); color: var(--ti); margin-bottom: 4px; }
.ct-topic-icon svg { width: 28px; height: 28px; }
.ct-topic-title { font-size: 20px; font-weight: 800; line-height: 1.25; }
.ct-topic-text { flex: 1; font-size: 15.5px; line-height: 1.55; color: var(--codr-ink-secondary); }
.ct-topic-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 12px; border-radius: 999px; background: var(--tp); color: var(--ti); font-size: 14px; font-weight: 800; }
.ct-topic-go svg { width: 16px; height: 16px; transition: transform 260ms var(--codr-ease-spring); }
.ct-topic:focus-visible { outline: 3px solid var(--t); outline-offset: 3px; }
@media (hover: hover) {
  .ct-topic:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--t) 45%, var(--codr-edge)); color: var(--codr-ink); }
  .ct-topic:hover .ct-topic-go svg { transform: translateX(3px); }
}
.ct-self { margin: 22px 0 0; font-size: 15.5px; font-weight: 700; color: var(--codr-ink-secondary); }
.ct-self a { color: var(--codr-brand-ink); }

@media (max-width: 1024px) {
  .ct-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-mail { grid-template-columns: auto minmax(0, 1fr); }
  .ct-mail-actions { grid-column: 1 / -1; }
  .ct-mail-actions .codr-btn { flex: 1; }
}
@media (max-width: 600px) {
  .ct-mail { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ct-mail-icon { width: 64px; height: 64px; border-radius: 20px; }
  .ct-mail-icon svg { width: 32px; height: 32px; }
  .ct-mail-actions { flex-direction: column; width: 100%; }
  .ct-topics { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ct-topic, .ct-copy-idle, .ct-copy-done, .ct-topic-go svg { transition: none; } }
/* The topics start close under the address card, like the sections after the other lift cards */
body .e-con.ct-lift + .codr-sec { --padding-top: clamp(40px, 5vw, 72px); }

/* ==========================================================================
   Courses + Career paths: one explorer (cx-), its course stage (cc-) and path stage (ck-),
   the path finder (ck-find), and the text + recording rows (cx-feature).
   Keys are links in reading order: key, panel, key, panel… With no JS it's a full list,
   below 1100px an accordion, from 1100px a rail beside one stage (site.js [data-cx]).
   ========================================================================== */

/* Elementor flattens link shadows in page content, and the theme reset drops them on focus: restate the button lip */
.elementor a.codr-btn { box-shadow: 0 4px 0 var(--lip); }
@media (hover: hover) { .elementor a.codr-btn:hover { box-shadow: 0 2px 0 var(--lip); color: #fff; } }
.elementor a.codr-btn:active { box-shadow: 0 0 0 var(--lip); }
.elementor a.codr-btn:focus { color: #fff; }

body .e-con.codr-sec--lift.cx-lift > .e-con.codr-wrap { max-width: 1200px; }

/* ---------- Rail labels and keys ---------- */
.cx-label { display: flex; align-items: flex-start; gap: 10px; margin: 28px 0 6px; font: 800 19px/1.25 var(--codr-font); letter-spacing: -0.01em; color: var(--codr-ink); scroll-margin-top: 24px; text-wrap: balance; }
.cx-label::before { content: ""; width: 10px; height: 10px; flex: none; margin-top: calc((1.25em - 10px) / 2); border-radius: 50%; background: var(--t); box-shadow: 0 2px 0 var(--td); }
.cx-group:first-child .cx-label { margin-top: 0; }
.cx-hint { margin: 0 0 12px; font: 700 14px/1.4 var(--codr-font); color: var(--codr-ink-secondary); }

.cx-key {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 64px; margin: 0 0 8px; padding: 10px 12px 10px 10px; box-sizing: border-box;
  background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 16px;
  color: var(--codr-ink); text-decoration: none; scroll-margin-top: 24px; cursor: pointer;
  transition: transform 140ms var(--codr-ease-out), border-color 200ms, background-color 200ms;
}
.cx-key img { width: 40px; height: 40px; flex: none; transition: transform 380ms var(--codr-ease-spring); }
.cx-key-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-key-text b { font-size: 17px; font-weight: 800; line-height: 1.2; }
.cx-key-text small { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--codr-ink-secondary); text-wrap: pretty; }
.cx-key-chev { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--codr-elevated); color: var(--ti); transition: transform 260ms var(--codr-ease-out); }
.cx-key-chev svg { width: 18px; height: 18px; }
.cx-key:hover, .cx-key:focus { color: var(--codr-ink); }
.cx-key.is-open { background: var(--tp); border-color: var(--t); border-bottom-color: var(--td); }
.cx-key.is-open small { color: var(--ti); }
.cx-key.is-open img { transform: rotate(-6deg) scale(1.06); }
.cx-key.is-open .cx-key-chev { transform: rotate(180deg); background: #fff; }
@media (hover: hover) {
  .cx-key:not(.is-open):hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--t) 45%, var(--codr-edge)); background: color-mix(in srgb, var(--tp) 60%, #fff); }
}
.cx-key:active { transform: translateY(2px); border-bottom-width: 2px; }
.cx-key:focus-visible { outline: 3px solid var(--ti); outline-offset: 3px; box-shadow: none; }

/* ---------- Panels ---------- */
/* No box styles on .cx-panel itself: a hidden="until-found" panel keeps its box. */
.cx-panel[hidden="until-found"] { display: block; }
.cx-panel-in { container-type: inline-size; padding: 2px 0 18px; }
.cx-pad {
  background-color: var(--tp);
  background-image: radial-gradient(color-mix(in srgb, var(--t) 26%, transparent) 1.6px, transparent 1.8px);
  background-size: 24px 24px;
  border: 2px solid color-mix(in srgb, var(--t) 20%, transparent); border-radius: 28px; padding: clamp(14px, 2.4vw, 28px);
}
.cx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 4px 0; }
.cx-foot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cx-foot-label { margin: 0; font-size: 14px; font-weight: 700; color: var(--codr-ink-secondary); }
.cx-foot-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cx-go svg { width: 18px; height: 18px; }
.cx-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px;
  background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 3px; border-radius: 999px;
  font-size: 13.5px; font-weight: 800; line-height: 1.2; color: var(--codr-ink); text-decoration: none;
  transition: border-color 200ms, transform 140ms var(--codr-ease-out);
}
.cx-chip img { width: 24px; height: 24px; }
.cx-chip svg { width: 18px; height: 18px; color: var(--codr-brand-ink); }
.cx-chip--count { padding-left: 10px; }
.cx-chip:hover, .cx-chip:focus { color: var(--codr-ink); border-color: var(--t, var(--codr-brand)); }
.cx-chip:active { transform: translateY(1px); border-bottom-width: 2px; }

/* Before site.js runs: only the open panel on desktop, none in the accordion (no jump on load) */
.codr-js .cx:not(.is-ready) .cx-panel:not(.is-open) { display: none; }

/* ---------- Desktop: rail + stage ---------- */
@media (min-width: 1100px) {
  .codr-js .cx { display: grid; column-gap: 8px; row-gap: 8px; align-items: start; grid-template-rows: repeat(var(--rows), auto) 1fr; }
  .codr-js .cx-group { display: contents; }
  .codr-js .cx-label, .codr-js .cx-hint, .codr-js .cx-key { margin: 0; }
  .codr-js .cx-label:not(:first-child) { margin-top: 0; }
  .codr-js .cx-group + .cx-group .cx-label { margin-top: 14px; }
  .codr-js .cx-hint { margin-top: -4px; }
  .codr-js .cx-panel { grid-row: 1 / -1; align-self: stretch; }
  .codr-js .cx-panel:not(.is-open) { pointer-events: none; }
  .codr-js .cx-panel.is-open { position: relative; z-index: 1; }
  .codr-js .cx-panel-in { height: 100%; box-sizing: border-box; margin-left: 20px; padding: 0; display: flex; flex-direction: column; }
  .codr-js .cx-pad { flex: 1; }
  .codr-js .cx-key-chev { display: none; }

  .codr-js .cx--courses { grid-template-columns: 148px 148px minmax(0, 1fr); }
  .codr-js .cx--courses .cx-label, .codr-js .cx--courses .cx-hint { grid-column: 1 / 3; }
  .codr-js .cx--courses .cx-key--c1 { grid-column: 1; }
  .codr-js .cx--courses .cx-key--c2 { grid-column: 2; }
  .codr-js .cx--courses .cx-panel { grid-column: 3; }
  .codr-js .cx--courses .cx-key { min-height: 52px; gap: 8px; padding: 7px 8px 8px 7px; border-radius: 14px; grid-template-columns: auto minmax(0, 1fr); }
  .codr-js .cx--courses .cx-key img { width: 32px; height: 32px; }
  .codr-js .cx--courses .cx-key-text b { font-size: 15px; }
  .codr-js .cx--courses .cx-key-text small { display: none; }

  .codr-js .cx--paths { grid-template-columns: 340px minmax(0, 1fr); }
  .codr-js .cx--paths .cx-label, .codr-js .cx--paths .cx-key { grid-column: 1; }
  .codr-js .cx--paths .cx-panel { grid-column: 2; }
  .codr-js .cx--paths .cx-key { min-height: 64px; grid-template-columns: auto minmax(0, 1fr); }
  .codr-js .cx--paths .cx-key img { width: 44px; height: 44px; }
  .codr-js .cx--paths .cx-key-text b { font-size: 16.5px; }
}

/* ---------- Accordion (below 1100px) ---------- */
@media (max-width: 1099px) {
  .codr-js .cx:not(.is-ready) .cx-panel { display: none; }
  .cx { max-width: 760px; margin: 0 auto; }
  .cx-panel-in { padding-top: 0; }
  .cx-panel.is-animating { overflow: hidden; transition: height 320ms var(--codr-ease-out); }
}

/* ---------- One slide and one pop per switch ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cx-panel.is-entering .cx-slide { animation: cxSlide 260ms var(--codr-ease-out) both; }
  .cx-panel.is-entering .cx-pop { animation: cxPop 360ms var(--codr-ease-out) 80ms both; }
  .ck-panel.is-entering .cx-pop { animation-delay: 180ms; }
}
@keyframes cxSlide { from { opacity: 0; transform: translateY(8px); } }
@keyframes cxPop { 0% { transform: scale(0.8); } 60% { transform: scale(1.05); } 100% { transform: none; } }

/* ==========================================================================
   Courses stage: about the course + World 1 as the app shows it
   ========================================================================== */
.cc-pad { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: center; }
.cc-about { min-width: 0; }
.cc-badge img { display: block; width: 88px; height: 88px; filter: drop-shadow(0 6px 0 rgb(0 0 0 / 0.08)); }
.cc-kicker { margin: 14px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ti); }
.cc-name { margin: 0; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; color: var(--codr-ink); }
.cc-tag { margin: 6px 0 0; font-size: 19px; line-height: 1.35; font-weight: 800; color: var(--codr-ink); }
.cc-desc { max-width: 46ch; margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--codr-ink-secondary); }
.cc-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.cc-levels li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 9px; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 16px; text-align: center; }
.cc-levels img { width: 44px; height: 44px; margin-bottom: 4px; }
.cc-levels b { font-size: 13.5px; font-weight: 800; line-height: 1.2; color: var(--codr-ink); }
.cc-levels small { font-size: 12px; font-weight: 700; color: var(--codr-ink-secondary); }

/* World 1, flattened from the app's course screen. Nothing in it is pressable. */
.cc-world { margin: 0; min-width: 0; }
.cc-w-card { padding: 16px 16px 12px; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 5px; border-radius: 24px; }
.cc-w-kick { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ti); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-w-name { margin: 2px 0 0; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--codr-ink); }
.cc-w-prog { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cc-w-seg { display: flex; gap: 4px; flex: 1; }
.cc-w-seg i { flex: 1; height: 7px; border-radius: 999px; background: var(--codr-edge); }
.cc-w-seg i.is-next { background: color-mix(in srgb, var(--t) 45%, #fff); }
.cc-w-seg i.is-boss { flex: 1.6; background: var(--codr-gold-pale); box-shadow: inset 0 0 0 1.5px var(--codr-gold); }
.cc-w-count { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--codr-elevated); font-size: 12px; font-weight: 800; color: var(--codr-ink-secondary); }
.cc-w-rail { position: relative; list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 2px dashed var(--codr-edge); }
.cc-w-rail::before { content: ""; position: absolute; left: 16.5px; top: 30px; bottom: 26px; width: 3px; border-radius: 3px; background: var(--codr-edge); }
.cc-stop { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 5px 0; }
.cc-stop p { margin: 0; }
.cc-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; }
.cc-dot svg { width: 14px; height: 14px; }
.cc-dot--lock { border: 3px solid var(--codr-edge); background: var(--codr-elevated); color: var(--codr-ink-muted); }
.cc-dot--next { border: 3px solid var(--t); background: #fff; color: var(--ti); font-size: 14px; font-weight: 900; box-shadow: 0 0 0 4px #fff, 0 0 0 7px color-mix(in srgb, var(--t) 35%, #fff); }
.cc-dot--more { width: 12px; height: 12px; margin: 0 12px; background: var(--codr-edge); }
.cc-dot--boss { border: 3px solid var(--codr-gold-dark); background: var(--codr-gold-pale); color: var(--codr-gold-ink); }
.cc-dot--boss svg { width: 17px; height: 17px; }
.cc-next { padding: 10px 14px 12px; background: color-mix(in srgb, var(--t) 10%, #fff); border: 2px solid color-mix(in srgb, var(--t) 45%, #fff); border-bottom-width: 4px; border-radius: 18px; }
.cc-next-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ti); }
.cc-next-title { margin-top: 2px !important; font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--codr-ink); }
.cc-meta { margin-top: 1px !important; font-size: 12.5px; font-weight: 600; color: var(--codr-ink-secondary); }
.cc-next .cc-meta { font-size: 13px; font-weight: 700; }
.cc-row-title { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--codr-ink-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-stop--more p { font-size: 13px; font-weight: 800; color: var(--codr-ink-secondary); }
.cc-stop--boss .cc-row-title { color: var(--codr-ink); }
.cc-w-next { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: var(--codr-elevated); border: 2px solid var(--codr-edge); border-bottom-width: 4px; color: var(--codr-ink-secondary); }
.cc-w-next > svg { width: 14px; height: 14px; flex: none; color: var(--codr-ink-muted); }
.cc-w-next p { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.cc-w-next .cc-w-next-kick { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

@container (max-width: 579px) {
  .cc-pad { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Career paths stage: the path, its road to the medal, what you'll be able to do
   ========================================================================== */
body .e-con.cp-lift + .ck-paths-sec { --padding-top: clamp(40px, 5vw, 72px); }
.ck-paths-sec .cp-head { margin-bottom: clamp(24px, 3vw, 36px); }
.ck-panel:focus { outline: none; }
.ck-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.ck-head-text { min-width: 0; flex: 1 1 320px; }
.ck-tag { display: inline-block; padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--ti); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ck-name { margin: 10px 0 0; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.05; font-weight: 900; letter-spacing: -0.025em; color: var(--codr-ink); }
.ck-name:focus { outline: none; }
.ck-sum { max-width: 44ch; margin: 8px 0 0; font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--codr-ink-secondary); }
.ck-stats { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ck-stats li { display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 8px 12px 7px; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 16px; }
.ck-stats b { font-size: 22px; font-weight: 900; line-height: 1.1; color: var(--ti); }
.ck-stats small { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--codr-ink-secondary); }

.ck-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 22px; }
@container (min-width: 680px) { .ck-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; } }

.ck-road-cap { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--codr-ink-secondary); }
.ck-road { position: relative; list-style: none; margin: 0; padding: 0; }
.ck-road::before { content: ""; position: absolute; left: 18px; top: 24px; bottom: 40px; width: 4px; border-radius: 4px; background: var(--codr-edge-strong); }
.ck-stop { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding-bottom: 10px; }
.ck-stop:last-child { padding-bottom: 0; }
.ck-node { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--codr-edge-strong); background: #fff; font: 800 13px/1 var(--codr-font-mono); color: var(--codr-ink-secondary); }
.ck-stop--first .ck-node { border-color: var(--t); color: var(--ti); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 22%, transparent); }
.ck-station {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 8px 12px 8px 8px;
  background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 18px; color: var(--codr-ink); text-decoration: none;
  transition: transform 140ms var(--codr-ease-out), border-color 200ms;
}
.ck-station img { width: 40px; height: 40px; }
.ck-station-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ck-station-text b { font-size: 16px; font-weight: 800; line-height: 1.2; }
.ck-station-text small { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--codr-ink-secondary); }
.ck-station-n { display: none; margin-right: 6px; font: 800 13px/1 var(--codr-font-mono); color: var(--codr-ink-secondary); }
.ck-station-go { display: grid; color: var(--codr-ink-muted); transition: transform 200ms var(--codr-ease-out), color 200ms; }
.ck-station-go svg { width: 18px; height: 18px; }
.ck-station:hover, .ck-station:focus { color: var(--codr-ink); }
@media (hover: hover) {
  .ck-station:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--t) 45%, var(--codr-edge)); }
  .ck-station:hover .ck-station-go { transform: translateX(3px); color: var(--ti); }
}
.ck-station:active { transform: translateY(2px); border-bottom-width: 2px; }
.ck-station:focus-visible { outline: 3px solid var(--ti); outline-offset: 3px; box-shadow: none; }
.ck-stop--first .ck-station { border-color: var(--t); border-bottom-color: var(--td); }
.ck-start { display: inline-block; margin-left: 8px; vertical-align: 2px; padding: 3px 8px; border-radius: 999px; background: var(--tp); color: var(--ti); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.ck-node--goal { border-style: dashed; color: var(--codr-ink-secondary); }
.ck-node--goal svg { width: 18px; height: 18px; }
.ck-goal { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px 10px 10px; background: var(--codr-elevated); border: 2px dashed color-mix(in srgb, var(--t) 40%, var(--codr-edge)); border-radius: 18px; }
.ck-goal img { width: 64px; height: 64px; filter: drop-shadow(0 4px 0 rgb(0 0 0 / 0.08)); }
.ck-goal p { margin: 0; }
.ck-goal-kick { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--codr-ink-secondary); }
.ck-goal-name { font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--codr-ink); }
.ck-goal-line { font-size: 13.5px; font-weight: 700; color: var(--codr-ink-secondary); }

.ck-side { padding: 20px 20px 22px; background: #fff; border: 2px solid var(--codr-edge); border-bottom-width: 5px; border-radius: 22px; }
.ck-side-label { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--codr-ink); }
.ck-side-label + .ck-can + .ck-side-label { margin-top: 18px; }
.ck-can, .ck-build { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ck-can li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--codr-ink); }
.ck-tick { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--t); box-shadow: 0 2px 0 var(--td); color: #fff; }
.cp-tone--gold .ck-tick { color: var(--codr-gold-ink); }
.ck-tick svg { width: 13px; height: 13px; }
.ck-build { gap: 6px; }
.ck-build li { padding: 9px 12px; border-radius: 12px; background: var(--codr-elevated); font-size: 14.5px; line-height: 1.4; font-weight: 700; color: var(--codr-ink); }

/* ---------- The finder: the app's first question ---------- */
.ck-find-sub { margin: -10px 0 clamp(18px, 2.4vw, 24px); text-align: center; font-size: 16px; font-weight: 600; color: var(--codr-ink-secondary); }

.ck-results { margin-top: 20px; }
.ck-res { grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px 22px; border-radius: 24px; background: var(--codr-brand-pale); border: 2px solid #bfe7fb; border-bottom: 4px solid var(--codr-brand-light); }
.ck-res:not([hidden]) { display: grid; }
.ck-res p { margin: 0; }
.ck-res-medal img { display: block; width: 88px; height: 88px; filter: drop-shadow(0 6px 0 rgb(0 0 0 / 0.08)); }
.ck-says { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px !important; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--codr-ink); }
.ck-says-who { padding: 3px 8px; border-radius: 999px; background: #fff; color: var(--codr-brand-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ck-res-label { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--codr-brand-ink); }
.ck-res-name { font-size: 24px; font-weight: 900; line-height: 1.15; color: var(--codr-ink); }
.ck-res-sum { margin-top: 2px !important; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--codr-ink-secondary); }
.ck-res-also { margin-top: 6px !important; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--codr-ink-secondary); }
.ck-res-also a { color: var(--codr-brand-ink); font-weight: 800; text-decoration: none; border-bottom: 2px solid #bfe7fb; white-space: nowrap; }
.ck-res-also a:hover, .ck-res-also a:focus { color: var(--codr-brand-ink); border-color: var(--codr-brand); }
.ck-res-go { white-space: nowrap; }
.ck-find-note { margin: 14px 0 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--codr-ink-secondary); }
@media (prefers-reduced-motion: no-preference) {
  .ck-res.is-entering { animation: cxSlide 260ms var(--codr-ease-out) both; }
  .ck-res.is-entering .ck-res-medal img { animation: cxPop 360ms var(--codr-ease-out) 80ms both; }
}
/* With no JS the radios still work: CSS shows the matching result */
html:not(.codr-js) .ck-find:has(input[value="websites"]:checked) .ck-res[data-for="websites"],
html:not(.codr-js) .ck-find:has(input[value="apps"]:checked) .ck-res[data-for="apps"],
html:not(.codr-js) .ck-find:has(input[value="games"]:checked) .ck-res[data-for="games"],
html:not(.codr-js) .ck-find:has(input[value="ai"]:checked) .ck-res[data-for="ai"],
html:not(.codr-js) .ck-find:has(input[value="data"]:checked) .ck-res[data-for="data"],
html:not(.codr-js) .ck-find:has(input[value="systems"]:checked) .ck-res[data-for="systems"],
html:not(.codr-js) .ck-find:has(input[value="unsure"]:checked) .ck-res[data-for="unsure"] { display: grid; }

/* ---------- Text + recording rows ---------- */
.cx-feature-text .codr-eyebrow { margin: 0 0 10px; }
.cx-feature-text h2 { margin: 0 0 22px; }
.cx-feature-lead { margin: -8px 0 22px; font-size: 18px; line-height: 1.6; color: var(--codr-ink-secondary); }
.cx-steps .cp-point-ico { font-size: 20px; font-weight: 900; }
.cx-steps .cp-ico--gold { color: var(--codr-gold-ink); }
.cx-feature-chip { margin: 24px 0 0; }
.cx-feature-chip .codr-chip { gap: 8px; padding: 8px 14px; font-size: 14px; }
.cx-feature-chip svg { width: 18px; height: 18px; }
.cx-feature-visual { min-height: 560px; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1099px) {
  /* The key above already shows these */
  .cc-about .cc-badge, .cc-about .cc-tag { display: none; }
  .cc-name, .ck-tag, .ck-name { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .cc-kicker { margin-top: 0; }
  .ck-sum { margin-top: 0; }
}
@media (max-width: 900px) {
  .cx-feature-visual { min-height: 480px; }
}
@media (max-width: 640px) {
  .ck-res { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 18px; }
  .ck-res-medal img { width: 72px; height: 72px; }
  .ck-says { justify-content: center; }
  .ck-res-go { width: 100%; box-sizing: border-box; }
  .cx-foot { flex-direction: column; align-items: stretch; }
  .cx-foot-go { flex-direction: column; align-items: stretch; }
  .cx-go { width: 100%; box-sizing: border-box; }
  .cx-foot-label { text-align: center; }
  .cx-pad { border-radius: 22px; }
  .cc-levels img { width: 36px; height: 36px; }
  .cc-levels b { font-size: 12.5px; }
  .ck-stats { width: 100%; }
  .ck-stats li { flex: 1; min-width: 0; padding: 7px 6px 6px; }
  .ck-stats b { font-size: 19px; }
  .ck-stats small { font-size: 10.5px; }
  /* Nodes go; the number moves into the station and the rail becomes a short stub between stations */
  .ck-stop { grid-template-columns: minmax(0, 1fr); }
  .ck-node { display: none; }
  .ck-road::before { display: none; }
  .ck-stop:not(:last-child)::after { content: ""; position: absolute; left: 28px; bottom: 0; width: 4px; height: 10px; background: var(--codr-edge-strong); }
  .ck-station-n { display: inline; }
  .ck-start { display: none; }
  .cx-feature-visual { min-height: 440px; }
}
@media (max-width: 380px) {
  .cc-levels { grid-template-columns: minmax(0, 1fr); }
  .cc-levels li { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 6px 10px; }
  .cc-levels img { width: 32px; height: 32px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-panel.is-animating { transition: none; }
}
.cx-pop { display: block; }
.ck-goal .cx-pop { display: grid; }
.cx-foot-go { margin-left: auto; }
@media (max-width: 640px) { .cx-foot-go { margin-left: 0; } }
/* Paths vary from 3 to 8 stops: the stage takes its own height instead of stretching to the rail (no empty dotted pad) */
@media (min-width: 1100px) {
  .codr-js .cx--paths .cx-panel { align-self: start; }
  .codr-js .cx--paths .cx-panel-in { height: auto; }
  .codr-js .cx--paths .cx-pad { flex: none; }
}
.ck-res-go svg { width: 18px; height: 18px; flex: none; }
/* The accordion starts closed: don't paint the server's desktop pick as open before site.js runs */
@media (max-width: 1099px) {
  .codr-js .cx:not(.is-ready) .cx-key.is-open { background: #fff; border-color: var(--codr-edge); }
  .codr-js .cx:not(.is-ready) .cx-key.is-open small { color: var(--codr-ink-secondary); }
  .codr-js .cx:not(.is-ready) .cx-key.is-open img, .codr-js .cx:not(.is-ready) .cx-key.is-open .cx-key-chev { transform: none; }
}

/* ---------- Review fixes ---------- */
/* Small tone text sits on pale tone pads here: a touch darker so it clears AA on the pale as well as on white */
.cp-tone--brand   { --ti: #0f74a8; }
.cp-tone--success, .cp-tone--green { --ti: #337d00; }
.cp-tone--orange  { --ti: #a35b00; }
.cp-tone--mythic  { --ti: #c52b76; }

/* Finder radios: hidden inside their own tile (Elementor's screen-reader rule parks them 10000em up, and focusing one scrolled the page there) */
.ck-ans-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

/* Courses: the career chips live in the about column, under a label of their own; the foot only holds the actions */
.cc-paths { margin-top: 16px; }
.cc-paths .cx-foot-label { flex-basis: 100%; }
.cc-foot { justify-content: flex-end; }
.cc-foot .cx-foot-go { margin-left: 0; }

/* With no JS every panel shows, so no key should look like the open one */
html:not(.codr-js) .cx-key.is-open { background: #fff; border-color: var(--codr-edge); }
html:not(.codr-js) .cx-key.is-open small { color: var(--codr-ink-secondary); }
html:not(.codr-js) .cx-key.is-open img, html:not(.codr-js) .cx-key-chev { transform: none; }
html:not(.codr-js) .cx-key-chev { display: none; }

@media (max-width: 1099px) {
  /* Head lines up with the centred accordion */
  .ck-paths-sec .cp-head { margin-left: auto; margin-right: auto; }
  /* A link into a panel lands with its key in view, under the header */
  .cx-panel { scroll-margin-top: 98px; }
  /* Touch targets */
  .cx-chip { min-height: 44px; padding: 6px 14px 6px 6px; }
  .cx-chip img { width: 28px; height: 28px; }
  .cx-chip--count { padding-left: 12px; }
  .cx-foot .cp-link { min-height: 44px; }
}
@media (max-width: 640px) {
  /* Paths: the button first, the reassurance under it */
  .ck-panel .cx-foot { flex-direction: column-reverse; }
  .cc-foot { align-items: stretch; }
}
/* Arriving on a #link: the server's default pick may not be the one asked for, so don't paint any until site.js decides */
.codr-hash .cx:not(.is-ready) .cx-panel { visibility: hidden; }
.codr-hash .cx:not(.is-ready) .cx-key.is-open { background: #fff; border-color: var(--codr-edge); }
.codr-hash .cx:not(.is-ready) .cx-key.is-open img { transform: none; }
/* Recording rows: the same dotted pad as the Games page */
.cx-feature .codr-visual-pad { background: var(--pad) radial-gradient(rgb(255 255 255 / 0.8) 1.6px, transparent 1.8px) 0 0 / 22px 22px; border: 2px solid color-mix(in srgb, var(--pad-edge) 22%, transparent); }

/* ---------- The finder as a looping strip of answers (same component as the home page's languages) ---------- */
.ck-marquee { margin-top: 2px; }
.ck-track { animation-duration: 30s; }
.ck-track > * { flex: none; margin-right: 14px; }
.ck-pill {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px 8px 8px;
  border: 2px solid var(--codr-edge); border-bottom-width: 4px; border-radius: 999px; background: #fff;
  color: var(--codr-ink); font-size: 18px; font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: transform var(--codr-fast) var(--codr-ease-out), border-color var(--codr-normal), background-color var(--codr-normal), border-bottom-width var(--codr-fast);
}
.ck-pill-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--codr-brand-pale); color: var(--codr-brand-light); --ic-accent: var(--codr-brand); --ic-light: #fff; transition: transform 380ms var(--codr-ease-spring), background-color 200ms; }
.ck-pill-ico svg { width: 26px; height: 26px; }
@media (hover: hover) {
  .ck-pill:hover { border-color: var(--codr-brand-light); border-bottom-color: var(--codr-brand); color: var(--codr-brand-ink); transform: translateY(-2px); }
}
.ck-pill:active { transform: translateY(2px); border-bottom-width: 2px; }
.ck-pill.is-picked, .ck-pill:has(input:checked) { background: var(--codr-brand-pale); border-color: var(--codr-brand); border-bottom-color: var(--codr-brand-dark); color: var(--codr-brand-ink); }
.ck-pill.is-picked .ck-pill-ico, .ck-pill:has(input:checked) .ck-pill-ico { background: var(--codr-brand); color: #fff; --ic-accent: var(--codr-brand-pale); --ic-light: var(--codr-brand); transform: rotate(-8deg); }
.ck-pill:has(input:focus-visible) { outline: 3px solid var(--codr-brand-ink); outline-offset: 3px; }
@media (max-width: 640px) {
  .ck-pill { font-size: 16px; padding: 6px 18px 6px 6px; }
  .ck-pill-ico { width: 38px; height: 38px; }
  .ck-pill-ico svg { width: 22px; height: 22px; }
  .ck-track { animation-duration: 24s; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-track > [aria-hidden] { display: none; }
  .ck-pill, .ck-pill-ico { transition: none; }
}

/* Finder pills: every answer in its own colour — icon solid in its tone on a pale tile; picked fills with it */
.ck-pill--brand   { --pc: var(--codr-brand);   --pd: var(--codr-brand-dark);   --pp: var(--codr-brand-pale);   --pi: #0f74a8; }
.ck-pill--purple  { --pc: var(--codr-purple);  --pd: var(--codr-purple-dark);  --pp: var(--codr-purple-pale);  --pi: var(--codr-purple-ink); }
.ck-pill--success { --pc: var(--codr-success); --pd: var(--codr-success-dark); --pp: var(--codr-success-pale); --pi: #337d00; }
.ck-pill--mythic  { --pc: var(--codr-mythic);  --pd: var(--codr-mythic-dark);  --pp: var(--codr-mythic-pale);  --pi: #c52b76; }
.ck-pill--teal    { --pc: #14b3a0;             --pd: #0f8c7d;                  --pp: #ddf5f1;                  --pi: #0a6b60; }
.ck-pill--orange  { --pc: var(--codr-orange);  --pd: var(--codr-orange-dark);  --pp: var(--codr-orange-pale);  --pi: #a35b00; }
.ck-pill--gold    { --pc: var(--codr-gold);    --pd: var(--codr-gold-dark);    --pp: var(--codr-gold-pale);    --pi: var(--codr-gold-ink); }
.ck-pill .ck-pill-ico { background: var(--pp); color: var(--pc); --ic-accent: var(--pd); --ic-light: #fff; }
@media (hover: hover) {
  .ck-pill:hover { border-color: color-mix(in srgb, var(--pc) 55%, var(--codr-edge)); border-bottom-color: var(--pd); color: var(--pi); }
}
.ck-pill.is-picked, .ck-pill:has(input:checked) { background: var(--pp); border-color: var(--pc); border-bottom-color: var(--pd); color: var(--pi); }
.ck-pill.is-picked .ck-pill-ico, .ck-pill:has(input:checked) .ck-pill-ico { background: var(--pc); color: #fff; --ic-accent: var(--pp); --ic-light: var(--pd); box-shadow: 0 3px 0 var(--pd); }
.ck-pill--gold.is-picked .ck-pill-ico, .ck-pill--gold:has(input:checked) .ck-pill-ico { --ic-light: var(--codr-gold-ink); }
.ck-pill:has(input:focus-visible) { outline-color: var(--pi); }

/* Contact hero: Cody writing at his desk (540px square clip). One floor shadow under the desk and chair,
   from the clip's frame: legs ≈ x 60–470, touching the floor between y 450 (back) and 510 (front). */
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-contact { isolation: isolate; }
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-contact::after { left: 12%; right: 13%; top: 85%; bottom: auto; height: 9%; }
/* Cody stands in the middle of his floating badges (Elementor zeroes the figure's auto margins otherwise) */
/* Elementor's `.elementor .elementor-widget:not(…):not(…) figure { margin: 0 }` outranks a plain rule */
.cp-hero .codr-hero-visual .elementor-widget figure.codr-pip.codr-pip--floor { margin-left: auto; margin-right: auto; }

/* Courses and Career paths heroes: the artist's 720px clips (square, with air around Cody). Floor shadows placed
   from the first frame — courses: desk + chair legs ≈ x 160–605, floor y 600–650; career paths: feet ≈ x 225–480, y 616–620. */
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-courses,
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-career-paths { isolation: isolate; }
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-courses::after { left: 21%; right: 16%; top: 83%; bottom: auto; height: 7%; }
.cp-hero .codr-hero-visual .codr-pip--floor.cp-pose-career-paths::after { left: 30%; right: 32%; top: 83.6%; bottom: auto; height: 5%; }
@media (max-width: 900px) {
  .codr-hero-visual .codr-pip--hero.cp-pose-courses, .codr-hero-visual .codr-pip--hero.cp-pose-career-paths { width: min(100%, 440px); }
}